import('./default.widgets.vue')),
- XSide, // NOTE: dynamic importするとAsyncComponentWrapperが間に入るせいでref取得できなくて面倒になる
- },
-
- provide() {
- return {
- sideViewHook: this.isDesktop ? (url) => {
- this.$refs.side.navigate(url);
- } : null
- };
},
data() {
return {
pageInfo: null,
- isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
menuDef: sidebarDef,
- navHidden: false,
+ isMobile: window.innerWidth <= MOBILE_THRESHOLD,
+ isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
widgetsShowing: false,
wallpaper: localStorage.getItem('wallpaper') != null,
faLayerGroup, faBars, faBell, faHome, faCircle, faPencilAlt,
@@ -125,21 +116,10 @@ export default defineComponent({
},
mounted() {
- this.adjustUI();
-
- const ro = new ResizeObserver((entries, observer) => {
- this.adjustUI();
- });
-
- ro.observe(this.$refs.contents);
-
- window.addEventListener('resize', this.adjustUI, { passive: true });
-
- if (!this.isDesktop) {
- window.addEventListener('resize', () => {
- if (window.innerWidth >= DESKTOP_THRESHOLD) this.isDesktop = true;
- }, { passive: true });
- }
+ window.addEventListener('resize', () => {
+ this.isMobile = (window.innerWidth <= MOBILE_THRESHOLD);
+ this.isDesktop = (window.innerWidth >= DESKTOP_THRESHOLD);
+ }, { passive: true });
},
methods: {
@@ -151,20 +131,8 @@ export default defineComponent({
}
},
- adjustUI() {
- const navWidth = this.$refs.nav.$el.offsetWidth;
- this.navHidden = navWidth === 0;
- if (this.$refs.contents == null) return;
- const width = this.$refs.contents.offsetWidth;
- if (this.$refs.header) this.$refs.header.style.width = `${width}px`;
- },
-
- showNav() {
- this.$refs.nav.show();
- },
-
- attachSticky(el) {
- const sticky = new StickySidebar(el, this.$refs.widgetsSpacer);
+ attachSticky() {
+ const sticky = new StickySidebar(this.$refs.widgets, 16);
window.addEventListener('scroll', () => {
sticky.calc(window.scrollY);
}, { passive: true });
@@ -178,6 +146,10 @@ export default defineComponent({
window.scroll({ top: 0, behavior: 'smooth' });
},
+ showDrawerNav() {
+ this.$refs.drawerNav.show();
+ },
+
onTransition() {
if (window._scroll) window._scroll();
},
@@ -200,12 +172,6 @@ export default defineComponent({
os.contextMenu([{
type: 'label',
text: path,
- }, {
- icon: faColumns,
- text: this.$ts.openInSideView,
- action: () => {
- this.$refs.side.navigate(path);
- }
}, {
icon: faWindowMaximize,
text: this.$ts.openInWindow,
@@ -242,99 +208,98 @@ export default defineComponent({
}
.mk-app {
- $header-height: 58px; // TODO: どこかに集約したい
- $ui-font-size: 1em; // TODO: どこかに集約したい
- $widgets-hide-threshold: 1090px;
+ $header-height: 50px;
+ $ui-font-size: 1em;
+ $widgets-hide-threshold: 1200px;
+ $nav-icon-only-width: 78px; // TODO: どこかに集約したい
// ほんとは単に 100vh と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
min-height: calc(var(--vh, 1vh) * 100);
box-sizing: border-box;
- display: flex;
&.wallpaper {
background: var(--wallpaperOverlay);
//backdrop-filter: blur(4px);
}
- > .contents {
- width: 100%;
- min-width: 0;
+ &.isMobile {
+ > .columns {
+ display: block;
+ margin: 0;
- &.withHeader {
- padding-top: $header-height;
+ > .main {
+ margin: 0;
+ border: none;
+ width: 100%;
+ border-radius: 0;
+
+ > .header {
+ width: 100%;
+ }
+ }
}
+ }
- > .header {
- position: fixed;
- z-index: 1000;
- top: 0;
- height: $header-height;
- width: 100%;
- line-height: $header-height;
- text-align: center;
- font-weight: bold;
- //background-color: var(--panel);
- -webkit-backdrop-filter: blur(32px);
- backdrop-filter: blur(32px);
- background-color: var(--header);
- //border-bottom: solid 1px var(--divider);
- user-select: none;
- }
+ > .columns {
+ display: flex;
+ justify-content: center;
+ max-width: 100%;
+ margin: 32px 0;
- > main {
- min-width: 0;
+ > .main {
+ width: 750px;
+ margin: 0 16px 0 0;
+ background: var(--bg);
+ --margin: 12px;
+
+ > .header {
+ position: sticky;
+ z-index: 1000;
+ top: 0;
+ height: $header-height;
+ line-height: $header-height;
+ -webkit-backdrop-filter: blur(32px);
+ backdrop-filter: blur(32px);
+ background-color: var(--header);
+ border-bottom: solid 0.5px var(--divider);
+ }
> .content {
- > * {
- // ほんとは単に calc(100vh - #{$header-height}) と書きたいところだが... https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
- min-height: calc((var(--vh, 1vh) * 100) - #{$header-height});
- }
+ background: var(--bg);
+ --stickyTop: #{$header-height};
}
- > .spacer {
- height: 82px;
+ @media (max-width: 850px) {
+ padding-top: $header-height;
- @media (min-width: ($widgets-hide-threshold + 1px)) {
- display: none;
+ > .header {
+ position: fixed;
+ width: calc(100% - #{$nav-icon-only-width});
}
}
}
- }
- > .side {
- min-width: 370px;
- max-width: 370px;
- border-left: solid 1px var(--divider);
- }
+ > .widgets {
+ //--panelShadow: none;
- > .widgets {
- padding: 0 var(--margin);
- border-left: solid 1px var(--divider);
-
- @media (max-width: $widgets-hide-threshold) {
- display: none;
- }
- }
-
- > .widgetButton {
- display: block;
- position: fixed;
- z-index: 1000;
- bottom: 32px;
- right: 32px;
- width: 64px;
- height: 64px;
- border-radius: 100%;
- box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
- font-size: 22px;
- background: var(--panel);
-
- &.navHidden {
- display: none;
+ @media (max-width: $widgets-hide-threshold) {
+ display: none;
+ }
}
- @media (min-width: ($widgets-hide-threshold + 1px)) {
- display: none;
+ @media (max-width: 850px) {
+ margin: 0;
+
+ > .sidebar {
+ border-right: solid 0.5px var(--divider);
+ }
+
+ > .main {
+ margin: 0;
+ border-radius: 0;
+ box-shadow: none;
+ width: 100%;
+ }
}
}
@@ -349,10 +314,7 @@ export default defineComponent({
-webkit-backdrop-filter: blur(32px);
backdrop-filter: blur(32px);
background-color: var(--header);
-
- &:not(.navHidden) {
- display: none;
- }
+ border-top: solid 0.5px var(--divider);
> .button {
position: relative;
@@ -429,6 +391,3 @@ export default defineComponent({
}
}
-
-
diff --git a/src/client/ui/default.widgets.vue b/src/client/ui/default.widgets.vue
index 35d3442bb2..b12de841a7 100644
--- a/src/client/ui/default.widgets.vue
+++ b/src/client/ui/default.widgets.vue
@@ -61,8 +61,6 @@ export default defineComponent({
.efzpzdvf {
position: sticky;
height: min-content;
- min-height: 100vh;
- padding: var(--margin) 0;
box-sizing: border-box;
> * {
diff --git a/src/client/ui/desktop.vue b/src/client/ui/desktop.vue
index 1480fd1840..a60aed6841 100644
--- a/src/client/ui/desktop.vue
+++ b/src/client/ui/desktop.vue
@@ -12,7 +12,7 @@ import { host } from '@client/config';
import { search } from '@client/scripts/search';
import XCommon from './_common_/common.vue';
import * as os from '@client/os';
-import XSidebar from '@client/components/sidebar.vue';
+import XSidebar from '@client/ui/_common_/sidebar.vue';
import { sidebarDef } from '@client/sidebar';
import { ColdDeviceStorage } from '@client/store';
diff --git a/src/client/ui/universal.vue b/src/client/ui/universal.vue
new file mode 100644
index 0000000000..e1b368c25a
--- /dev/null
+++ b/src/client/ui/universal.vue
@@ -0,0 +1,433 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/client/ui/universal.widgets.vue b/src/client/ui/universal.widgets.vue
new file mode 100644
index 0000000000..35d3442bb2
--- /dev/null
+++ b/src/client/ui/universal.widgets.vue
@@ -0,0 +1,81 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/client/ui/zen.vue b/src/client/ui/zen.vue
index 9215a639b0..321eb1a025 100644
--- a/src/client/ui/zen.vue
+++ b/src/client/ui/zen.vue
@@ -94,7 +94,7 @@ export default defineComponent({
-webkit-backdrop-filter: blur(32px);
backdrop-filter: blur(32px);
background-color: var(--header);
- border-bottom: solid 1px var(--divider);
+ border-bottom: solid 0.5px var(--divider);
}
> main {
diff --git a/src/client/widgets/aiscript.vue b/src/client/widgets/aiscript.vue
index 84390866bd..f24e033593 100644
--- a/src/client/widgets/aiscript.vue
+++ b/src/client/widgets/aiscript.vue
@@ -122,7 +122,7 @@ export default defineComponent({
color: var(--fg);
background: transparent;
border: none;
- border-bottom: solid 1px var(--divider);
+ border-bottom: solid 0.5px var(--divider);
border-radius: 0;
box-sizing: border-box;
font: inherit;
@@ -147,7 +147,7 @@ export default defineComponent({
}
> .logs {
- border-top: solid 1px var(--divider);
+ border-top: solid 0.5px var(--divider);
text-align: left;
padding: 16px;
diff --git a/src/client/widgets/federation.vue b/src/client/widgets/federation.vue
index 6eb656ce05..f0a79a31a6 100644
--- a/src/client/widgets/federation.vue
+++ b/src/client/widgets/federation.vue
@@ -100,7 +100,7 @@ export default defineComponent({
display: flex;
align-items: center;
padding: 14px 16px;
- border-bottom: solid 1px var(--divider);
+ border-bottom: solid 0.5px var(--divider);
> img {
display: block;
diff --git a/src/client/widgets/job-queue.vue b/src/client/widgets/job-queue.vue
index aaf2b2fc8f..0b560ca56e 100644
--- a/src/client/widgets/job-queue.vue
+++ b/src/client/widgets/job-queue.vue
@@ -136,7 +136,7 @@ export default defineComponent({
padding: 16px;
&:not(:first-child) {
- border-top: solid 1px var(--divider);
+ border-top: solid 0.5px var(--divider);
}
> .label {
diff --git a/src/client/widgets/memo.vue b/src/client/widgets/memo.vue
index 4a7786312a..c3ab2934a8 100644
--- a/src/client/widgets/memo.vue
+++ b/src/client/widgets/memo.vue
@@ -77,7 +77,7 @@ export default defineComponent({
color: var(--fg);
background: transparent;
border: none;
- border-bottom: solid 1px var(--divider);
+ border-bottom: solid 0.5px var(--divider);
border-radius: 0;
box-sizing: border-box;
font: inherit;
diff --git a/src/client/widgets/trends.vue b/src/client/widgets/trends.vue
index 300e3b31de..cd7202f1f8 100644
--- a/src/client/widgets/trends.vue
+++ b/src/client/widgets/trends.vue
@@ -79,7 +79,7 @@ export default defineComponent({
display: flex;
align-items: center;
padding: 14px 16px;
- border-bottom: solid 1px var(--divider);
+ border-bottom: solid 0.5px var(--divider);
> .tag {
flex: 1;
