diff --git a/chrome/content/zotero/standalone/basicViewer.xhtml b/chrome/content/zotero/standalone/basicViewer.xhtml index fbc7e963c8..f8eab84d0e 100644 --- a/chrome/content/zotero/standalone/basicViewer.xhtml +++ b/chrome/content/zotero/standalone/basicViewer.xhtml @@ -27,7 +27,6 @@ - diff --git a/chrome/content/zotero/zoteroPane.xhtml b/chrome/content/zotero/zoteroPane.xhtml index 4dcae3f54e..0b0a61b96c 100644 --- a/chrome/content/zotero/zoteroPane.xhtml +++ b/chrome/content/zotero/zoteroPane.xhtml @@ -27,7 +27,6 @@ - diff --git a/chrome/skin/default/zotero/overlay.css b/chrome/skin/default/zotero/overlay.css index 30c56168ed..0b1b567213 100644 --- a/chrome/skin/default/zotero/overlay.css +++ b/chrome/skin/default/zotero/overlay.css @@ -4,12 +4,6 @@ overflow: hidden; } -#zotero-collections-pane -{ - min-width: 250px; - width: 250px; -} - #zotero-items-tree treechildren::-moz-tree-image(hasAttachment, pie) { margin: 1px 0 0; @@ -182,14 +176,6 @@ text-decoration: underline; } -#zotero-item-pane -{ - width: 342px; - min-width: 342px; - /* Need a min height to prevent layout issues in stacked mode */ - min-height: 168px; -} - #zotero-layout-switcher { height: 0; diff --git a/chrome/skin/default/zotero/standalone.css b/chrome/skin/default/zotero/standalone.css deleted file mode 100644 index f566c61c3b..0000000000 --- a/chrome/skin/default/zotero/standalone.css +++ /dev/null @@ -1,4 +0,0 @@ -#main-window { - min-width: 670px; - min-height: 300px; -} \ No newline at end of file diff --git a/scss/_zotero.scss b/scss/_zotero.scss index b59d54d7d5..ffa5d8bf5d 100644 --- a/scss/_zotero.scss +++ b/scss/_zotero.scss @@ -58,6 +58,7 @@ @import "components/tabsMenu"; @import "components/newCollectionDialog"; @import "components/reader"; +@import "components/itemPane"; // Elements // -------------------------------------------------- diff --git a/scss/abstracts/_variables.scss b/scss/abstracts/_variables.scss index 05b436a016..c88ac65bfe 100644 --- a/scss/abstracts/_variables.scss +++ b/scss/abstracts/_variables.scss @@ -104,3 +104,10 @@ $tagColorsLookup: ( '#a28ae5': --tag-purple, '#a6507b': --tag-plum, ); + +// Layout constants +// -------------------------------------------------- +$min-width-collections-pane: 200px; +$min-width-items-pane: 370px; +$min-width-item-pane: 300px; +$width-sidenav: 37px; diff --git a/scss/base/_base.scss b/scss/base/_base.scss index 14fb676d89..23de9c5a4b 100644 --- a/scss/base/_base.scss +++ b/scss/base/_base.scss @@ -25,17 +25,6 @@ background: var(--material-sidepane); } -#zotero-items-pane-container { - min-width: 370px; -} - -#zotero-items-pane { - min-width: 370px; - min-height: 150px; - height: 150px; - width: 290px; -} - #zotero-title-bar { border-bottom: var(--material-panedivider); } diff --git a/scss/components/_collection-tree.scss b/scss/components/_collection-tree.scss index 23feed0875..d389f5fa2a 100644 --- a/scss/components/_collection-tree.scss +++ b/scss/components/_collection-tree.scss @@ -11,6 +11,11 @@ $icons: ( } } +#zotero-collections-pane { + min-width: $min-width-collections-pane; + width: $min-width-collections-pane; +} + #zotero-collections-tree-container { height: 5.2em; } diff --git a/scss/components/_contextPane.scss b/scss/components/_contextPane.scss index d2d76acaed..12c1c5fcb1 100644 --- a/scss/components/_contextPane.scss +++ b/scss/components/_contextPane.scss @@ -1,10 +1,10 @@ #tabs-deck { - min-width: 600px; + min-width: $min-width-collections-pane + $min-width-items-pane; } #zotero-context-pane { display: flex; - min-width: 360px; + min-width: $min-width-item-pane; .divider { border-bottom: 1px solid var(--fill-quinary); diff --git a/scss/components/_item-tree.scss b/scss/components/_item-tree.scss index ccb3c99681..83f356cf9a 100644 --- a/scss/components/_item-tree.scss +++ b/scss/components/_item-tree.scss @@ -1,7 +1,17 @@ @use "sass:map"; -#zotero-items-tree { +#zotero-items-pane-container { + min-width: $min-width-items-pane; +} +#zotero-items-pane { + min-width: $min-width-items-pane; + min-height: 150px; + height: 150px; + width: 290px; +} + +#zotero-items-tree { .virtualized-table-body, .drag-image-container { padding: 4px 8px 8px; } diff --git a/scss/components/_itemPane.scss b/scss/components/_itemPane.scss new file mode 100644 index 0000000000..2f31c9e39e --- /dev/null +++ b/scss/components/_itemPane.scss @@ -0,0 +1,6 @@ +#zotero-item-pane { + width: $min-width-item-pane; + min-width: $min-width-item-pane; + /* Need a min height to prevent layout issues in stacked mode */ + min-height: 168px; +} diff --git a/scss/components/_mainWindow.scss b/scss/components/_mainWindow.scss index 1f6603e07b..694e7c6698 100644 --- a/scss/components/_mainWindow.scss +++ b/scss/components/_mainWindow.scss @@ -141,6 +141,11 @@ --panel-background: var(--material-toolbar); } +#main-window { + min-width: $min-width-collections-pane + $min-width-items-pane + $min-width-item-pane + $width-sidenav; + min-height: 300px; +} + #zotero-pane-stack > hbox { // Let window chrome, tabs, and toolbar shrink even when sidebars overflow min-width: 0; diff --git a/scss/elements/_itemPaneSidenav.scss b/scss/elements/_itemPaneSidenav.scss index bd5e2a35f2..d0cd283d7f 100644 --- a/scss/elements/_itemPaneSidenav.scss +++ b/scss/elements/_itemPaneSidenav.scss @@ -11,6 +11,7 @@ item-pane-sidenav { gap: 6px; background: var(--material-sidepane); position: relative; // Stop item pane content from overlapping + width: $width-sidenav; &.stacked { flex-direction: row;