eris/calckey
1
0
Fork 0
Code Pull requests Projects Releases Packages Wiki Activity

feat(client): Do not wrap widgets

Browse source
This commit is contained in:
syuilo 2020-06-27 20:54:56 +09:00
parent 41f66e4299
commit 3f78f6f6bb
2 changed files with 9 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/client/app.vue
View file

@ -214,10 +214,6 @@ export default Vue.extend({
this.showNav = false; this.showNav = false;
this.canBack = (window.history.length > 0 && !['index'].includes(to.name)); this.canBack = (window.history.length > 0 && !['index'].includes(to.name));
}, },
isDesktop() {
if (this.isDesktop) this.adjustWidgetsWidth();
}
}, },
created() { created() {
@ -241,8 +237,6 @@ export default Vue.extend({
}, },
mounted() { mounted() {
if (this.isDesktop) this.adjustWidgetsWidth();
const adjustTitlePosition = () => { const adjustTitlePosition = () => {
const left = this.$refs.main.getBoundingClientRect().left - this.$refs.nav.offsetWidth; const left = this.$refs.main.getBoundingClientRect().left - this.$refs.nav.offsetWidth;
if (left >= 0) { if (left >= 0) {
@ -268,19 +262,6 @@ export default Vue.extend({
}, },
methods: { 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() { top() {
window.scroll({ top: 0, behavior: 'smooth' }); window.scroll({ top: 0, behavior: 'smooth' });
}, },
@ -938,6 +919,9 @@ export default Vue.extend({
> .content { > .content {
> * { > * {
min-height: calc(100vh - #{$header-height});
box-sizing: border-box;
&:not(.full) { &:not(.full) {
padding: var(--margin) 0; padding: var(--margin) 0;
} }
@ -987,6 +971,8 @@ export default Vue.extend({
> .widgets { > .widgets {
box-sizing: border-box; box-sizing: border-box;
margin-left: var(--margin); 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) { @media (max-width: $side-hide-threshold) {
display: none; display: none;
@ -994,23 +980,12 @@ export default Vue.extend({
> div { > div {
position: sticky; position: sticky;
top: calc(#{$header-height} + var(--margin)); top: $header-height;
height: calc(100vh - #{$header-height} - var(--margin)); height: calc(100vh - #{$header-height});
overflow: auto;
&.edit {
overflow: auto;
width: auto !important;
}
&:not(.edit) {
display: inline-flex;
flex-wrap: wrap;
flex-direction: column;
place-content: flex-start;
}
> * { > * {
margin: 0 var(--margin) var(--margin) 0; margin: var(--margin) 0;
width: 300px; width: 300px;
} }

11
src/client/style.scss
View file

@ -278,17 +278,6 @@ hr {
._panel { ._panel {
position: relative; position: relative;
background: var(--panel); 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); box-shadow: 0 1px 0 0 var(--divider), 0 -1px 0 0 var(--divider);
} }