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 af63f786..070dff8f 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 e3c4563b..b683425e 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 bbc4a364..6b2c2962 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 c1b7dad1..101971c5 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 b8d2b3e2..3fc62d0d 100644 --- a/frontend/src/components/panels/Document.vue +++ b/frontend/src/components/panels/Document.vue @@ -1,6 +1,6 @@