From 54590d594ac3fd8090b168bc5884599cc11ff7cf Mon Sep 17 00:00:00 2001 From: Keavon Chambers Date: Sat, 4 Dec 2021 22:30:07 -0800 Subject: [PATCH] CSS editor layout fixes and scrolling Major CSS improvements to layout at small screen sizes. By adding min-width: 0 and min-height: 0 on the nested display: flex structure, widgets no longer coerce the whole layout into large-scale resizing. Scrollbars are now used to allow correct overflowing of the tab bar (fixes #177), Document Panel options bar, and tool shelf. Improvements to responsive resizing are also included for viewing the UI correctly on mobile now. Additional small fixes to styling of widget colors and corner roundness. The ruler has been darkened one shade to improve text contrast and aesthetics. --- frontend/public/index.html | 5 ++--- frontend/src/App.vue | 4 ++++ frontend/src/components/layout/LayoutCol.vue | 2 ++ frontend/src/components/layout/LayoutRow.vue | 2 ++ frontend/src/components/panels/Document.vue | 22 +++++++++++++++---- frontend/src/components/panels/LayerTree.vue | 16 ++++++++++++++ .../components/widgets/buttons/IconButton.vue | 10 +++++++-- .../components/widgets/inputs/NumberInput.vue | 10 ++++++--- .../components/widgets/inputs/RadioInput.vue | 5 +++++ .../components/widgets/labels/TextLabel.vue | 2 +- .../widgets/labels/UserInputLabel.vue | 1 + .../components/widgets/rulers/CanvasRuler.vue | 2 +- .../window/status-bar/StatusBar.vue | 2 +- .../window/title-bar/WindowButtonsWeb.vue | 10 +++++++-- frontend/src/components/workspace/Panel.vue | 16 +++++++++++--- .../src/components/workspace/Workspace.vue | 16 ++++++++++++++ 16 files changed, 105 insertions(+), 20 deletions(-) diff --git a/frontend/public/index.html b/frontend/public/index.html index af63f786a9..070dff8f52 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -4,15 +4,14 @@ - + - + Graphite diff --git a/frontend/src/App.vue b/frontend/src/App.vue index e3c4563b76..b683425edb 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -70,6 +70,7 @@ body, height: 100%; background: var(--color-2-mildblack); user-select: none; + overscroll-behavior: none; } html, @@ -78,6 +79,7 @@ input, textarea, button { font-family: "Source Sans Pro", Arial, sans-serif; + font-weight: 400; font-size: 14px; line-height: 1; color: var(--color-e-nearwhite); @@ -104,10 +106,12 @@ img { // WebKit &::-webkit-scrollbar { width: calc(2px + 6px + 2px); + height: calc(2px + 6px + 2px); } &:not(:hover)::-webkit-scrollbar { width: 0; + height: 0; } &::-webkit-scrollbar-track { diff --git a/frontend/src/components/layout/LayoutCol.vue b/frontend/src/components/layout/LayoutCol.vue index bbc4a3645b..6b2c2962e2 100644 --- a/frontend/src/components/layout/LayoutCol.vue +++ b/frontend/src/components/layout/LayoutCol.vue @@ -9,6 +9,8 @@ display: flex; flex-direction: column; flex-grow: 1; + min-width: 0; + min-height: 0; .spacer { flex: 1 1 100%; diff --git a/frontend/src/components/layout/LayoutRow.vue b/frontend/src/components/layout/LayoutRow.vue index c1b7dad1bd..101971c506 100644 --- a/frontend/src/components/layout/LayoutRow.vue +++ b/frontend/src/components/layout/LayoutRow.vue @@ -9,6 +9,8 @@ display: flex; flex-direction: row; flex-grow: 1; + min-width: 0; + min-height: 0; .spacer { flex: 1 1 100%; diff --git a/frontend/src/components/panels/Document.vue b/frontend/src/components/panels/Document.vue index b8d2b3e2fd..3fc62d0da3 100644 --- a/frontend/src/components/panels/Document.vue +++ b/frontend/src/components/panels/Document.vue @@ -1,6 +1,6 @@