From 3f78f6f6bbf27c24661d8dff55de86f036168062 Mon Sep 17 00:00:00 2001 From: syuilo Date: Sat, 27 Jun 2020 20:54:56 +0900 Subject: [PATCH] feat(client): Do not wrap widgets --- src/client/app.vue | 43 +++++++++---------------------------------- src/client/style.scss | 11 ----------- 2 files changed, 9 insertions(+), 45 deletions(-) diff --git a/src/client/app.vue b/src/client/app.vue index 717051277..aaf5d3c43 100644 --- a/src/client/app.vue +++ b/src/client/app.vue @@ -214,10 +214,6 @@ export default Vue.extend({ this.showNav = false; this.canBack = (window.history.length > 0 && !['index'].includes(to.name)); }, - - isDesktop() { - if (this.isDesktop) this.adjustWidgetsWidth(); - } }, created() { @@ -241,8 +237,6 @@ export default Vue.extend({ }, mounted() { - if (this.isDesktop) this.adjustWidgetsWidth(); - const adjustTitlePosition = () => { const left = this.$refs.main.getBoundingClientRect().left - this.$refs.nav.offsetWidth; if (left >= 0) { @@ -268,19 +262,6 @@ export default Vue.extend({ }, methods: { - adjustWidgetsWidth() { - // https://stackoverflow.com/questions/33891709/when-flexbox-items-wrap-in-column-mode-container-does-not-grow-its-width - const adjust = () => { - const lastChild = this.$refs.widgets.children[this.$refs.widgets.children.length - 1]; - if (lastChild == null) return; - - const width = lastChild.offsetLeft + 300 + 16; - this.$refs.widgets.style.width = width + 'px'; - }; - setInterval(adjust, 1000); - setTimeout(adjust, 100); - }, - top() { window.scroll({ top: 0, behavior: 'smooth' }); }, @@ -938,6 +919,9 @@ export default Vue.extend({ > .content { > * { + min-height: calc(100vh - #{$header-height}); + box-sizing: border-box; + &:not(.full) { padding: var(--margin) 0; } @@ -987,6 +971,8 @@ export default Vue.extend({ > .widgets { box-sizing: border-box; margin-left: var(--margin); + background: var(--pageBg); + box-shadow: 1px 0 0 0 var(--divider),-1px 0 0 0 var(--divider); @media (max-width: $side-hide-threshold) { display: none; @@ -994,23 +980,12 @@ export default Vue.extend({ > div { position: sticky; - top: calc(#{$header-height} + var(--margin)); - height: calc(100vh - #{$header-height} - var(--margin)); - - &.edit { - overflow: auto; - width: auto !important; - } - - &:not(.edit) { - display: inline-flex; - flex-wrap: wrap; - flex-direction: column; - place-content: flex-start; - } + top: $header-height; + height: calc(100vh - #{$header-height}); + overflow: auto; > * { - margin: 0 var(--margin) var(--margin) 0; + margin: var(--margin) 0; width: 300px; } diff --git a/src/client/style.scss b/src/client/style.scss index 57906d5ae..2ef995c1b 100644 --- a/src/client/style.scss +++ b/src/client/style.scss @@ -278,17 +278,6 @@ hr { ._panel { position: relative; background: var(--panel); - border-radius: var(--radius); - box-shadow: 0 0 0 1px var(--divider); -} - -main ._panel { - border-radius: 0; - box-shadow: 0 1px 0 0 var(--divider), 0 -1px 0 0 var(--divider); -} - -._panel ._panel { - border-radius: 0; box-shadow: 0 1px 0 0 var(--divider), 0 -1px 0 0 var(--divider); }