From 666498e7b76144b35d245d4b1c09e1dc62fac84b Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 10 Apr 2022 21:54:02 +0300 Subject: [PATCH 1/4] fix main post form having hidden emoji picker --- src/App.scss | 12 ++++++------ src/components/attachment/attachment.scss | 2 +- src/components/desktop_nav/desktop_nav.scss | 8 ++++---- src/components/emoji_picker/emoji_picker.scss | 2 +- src/components/media_modal/media_modal.vue | 2 +- src/components/post_status_form/post_status_form.vue | 1 + src/components/user_panel/user_panel.vue | 1 + src/hocs/with_load_more/with_load_more.scss | 2 +- src/hocs/with_subscription/with_subscription.scss | 2 +- 9 files changed, 17 insertions(+), 15 deletions(-) diff --git a/src/App.scss b/src/App.scss index d83965621..cc8ef592c 100644 --- a/src/App.scss +++ b/src/App.scss @@ -2,7 +2,7 @@ @import './_variables.scss'; :root { - --navbar-height: 50px; + --navbar-height: 3.5em; } html { @@ -159,8 +159,8 @@ nav { } .app-layout { - --miniColumn: 25em; - --maxiColumn: minmax(var(--miniColumn), 45em); + --miniColumn: 25rem; + --maxiColumn: minmax(var(--miniColumn), 45rem); --columnGap: 1em; --status-margin: 0.75em; @@ -227,7 +227,7 @@ nav { &.-has-new-post-button { .column { - padding-bottom: 20em; + padding-bottom: 10rem; } } @@ -301,7 +301,7 @@ nav { cursor: pointer; box-shadow: $fallback--buttonShadow; box-shadow: var(--buttonShadow); - font-size: 14px; + font-size: 1rem; font-family: sans-serif; font-family: var(--interfaceFont, sans-serif); @@ -429,7 +429,7 @@ textarea, color: var(--inputText, $fallback--lightText); font-family: sans-serif; font-family: var(--inputFont, sans-serif); - font-size: 14px; + font-size: 1rem; margin: 0; box-sizing: border-box; display: inline-block; diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss index dfda15bf8..b2dea98d5 100644 --- a/src/components/attachment/attachment.scss +++ b/src/components/attachment/attachment.scss @@ -173,7 +173,7 @@ margin: 8px; word-break: break-all; h1 { - font-size: 14px; + font-size: 1rem; margin: 0px; } } diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss index 1e731c703..3c2e70b51 100644 --- a/src/components/desktop_nav/desktop_nav.scss +++ b/src/components/desktop_nav/desktop_nav.scss @@ -9,7 +9,7 @@ .inner-nav { display: grid; - grid-template-rows: 50px; + grid-template-rows: var(--navbar-height); grid-template-columns: 2fr auto 2fr; grid-template-areas: "sitename logo actions"; box-sizing: border-box; @@ -75,7 +75,7 @@ img { display: inline-block; - height: 50px; + height: var(--navbar-height); } } @@ -101,8 +101,8 @@ .item { flex: 1; - line-height: 50px; - height: 50px; + line-height: var(--navbar-height); + height: var(--navbar-height); overflow: hidden; display: flex; flex-wrap: wrap; diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss index ec7117587..1a696584e 100644 --- a/src/components/emoji_picker/emoji_picker.scss +++ b/src/components/emoji_picker/emoji_picker.scss @@ -7,7 +7,7 @@ right: 0; left: 0; margin: 0 !important; - z-index: 1; + z-index: 100; background-color: $fallback--bg; background-color: var(--popover, $fallback--bg); color: $fallback--link; diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue index c7dcd007f..8b76aafb5 100644 --- a/src/components/media_modal/media_modal.vue +++ b/src/components/media_modal/media_modal.vue @@ -234,7 +234,7 @@ $modal-view-button-icon-margin: 0.5em; position: absolute; height: $modal-view-button-icon-height; width: $modal-view-button-icon-width; - font-size: 14px; + font-size: 1rem; line-height: $modal-view-button-icon-height; color: #FFF; text-align: center; diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 0fdb6dc73..d6595354a 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -509,6 +509,7 @@ flex-direction: column; padding: 0.25em 0.5em 0.5em; line-height:24px; + z-index: 50; } form textarea.form-cw { diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue index 50949b988..243de3870 100644 --- a/src/components/user_panel/user_panel.vue +++ b/src/components/user_panel/user_panel.vue @@ -24,5 +24,6 @@ diff --git a/src/hocs/with_load_more/with_load_more.scss b/src/hocs/with_load_more/with_load_more.scss index 1a26eb8d6..de86ed4a5 100644 --- a/src/hocs/with_load_more/with_load_more.scss +++ b/src/hocs/with_load_more/with_load_more.scss @@ -10,7 +10,7 @@ border-top-color: var(--border, $fallback--border); .error { - font-size: 14px; + font-size: 1rem; } a { diff --git a/src/hocs/with_subscription/with_subscription.scss b/src/hocs/with_subscription/with_subscription.scss index 52c7d94c0..7fd838021 100644 --- a/src/hocs/with_subscription/with_subscription.scss +++ b/src/hocs/with_subscription/with_subscription.scss @@ -4,7 +4,7 @@ text-align: center; .error { - font-size: 14px; + font-size: 1rem; } } } \ No newline at end of file From f27226b55cefe6e351e562bbc908f5517e236804 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 10 Apr 2022 22:09:46 +0300 Subject: [PATCH 2/4] improvements to relative font sizes --- src/App.scss | 6 +++--- src/components/popover/popover.vue | 2 +- src/panel.scss | 13 +++++++------ 3 files changed, 11 insertions(+), 10 deletions(-) diff --git a/src/App.scss b/src/App.scss index cc8ef592c..1025bb504 100644 --- a/src/App.scss +++ b/src/App.scss @@ -301,7 +301,7 @@ nav { cursor: pointer; box-shadow: $fallback--buttonShadow; box-shadow: var(--buttonShadow); - font-size: 1rem; + font-size: 1em; font-family: sans-serif; font-family: var(--interfaceFont, sans-serif); @@ -429,7 +429,7 @@ textarea, color: var(--inputText, $fallback--lightText); font-family: sans-serif; font-family: var(--inputFont, sans-serif); - font-size: 1rem; + font-size: 1em; margin: 0; box-sizing: border-box; display: inline-block; @@ -730,7 +730,7 @@ i[class*=icon-], } .btn.button-default { - min-height: 28px; + min-height: 2em; } .new-status-notification { diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue index 3f2a81f54..973625d15 100644 --- a/src/components/popover/popover.vue +++ b/src/components/popover/popover.vue @@ -65,7 +65,7 @@ .dropdown-menu { display: block; padding: .5rem 0; - font-size: 1rem; + font-size: 1em; text-align: left; list-style: none; max-width: 100vw; diff --git a/src/panel.scss b/src/panel.scss index 049144ba1..b23ec4bb6 100644 --- a/src/panel.scss +++ b/src/panel.scss @@ -28,7 +28,8 @@ .panel-body:empty::before { content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations - display: block; margin: 1em; + display: block; + margin: 1em; text-align: center; } @@ -42,18 +43,18 @@ background-size: cover; padding: 0.6em 0.6em; text-align: left; - line-height: 28px; + line-height: calc(var(--panel-heading-height) / 2); color: var(--panelText); background-color: $fallback--bg; background-color: var(--bg, $fallback--bg); align-items: baseline; - height: var(--panelHeadingHeight); + height: var(--panel-heading-height); z-index: -2; - --panelHeadingHeight: 45px; + --panel-heading-height: 3.2em; &.-flexible-height { - --panelHeadingHeight: auto; + --panel-heading-height: auto; &::after, &::before { @@ -92,7 +93,7 @@ z-index: -1; border-radius: $fallback--panelRadius $fallback--panelRadius 0 0; border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0; - mask: linear-gradient(to bottom, white var(--panelHeadingHeight), transparent var(--panelHeadingHeight)); + mask: linear-gradient(to bottom, white var(--panel-heading-height), transparent var(--panel-heading-height)); } .title { From fe8b5b62ae284c5e105d2b1063815dc28582194d Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 10 Apr 2022 22:23:07 +0300 Subject: [PATCH 3/4] fix chromium crashing on my machine :hyperjoy: LUL --- src/App.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/App.scss b/src/App.scss index 1025bb504..eae3afa36 100644 --- a/src/App.scss +++ b/src/App.scss @@ -7,7 +7,6 @@ html { font-size: 14px; - overflow-x: clip; } body { From 5d203e93ae6bc55988c6f4672d589787308099f0 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Sun, 10 Apr 2022 22:37:08 +0300 Subject: [PATCH 4/4] improvements to relative panel sizing --- src/App.scss | 2 +- src/panel.scss | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/App.scss b/src/App.scss index eae3afa36..acaf282a0 100644 --- a/src/App.scss +++ b/src/App.scss @@ -2,7 +2,7 @@ @import './_variables.scss'; :root { - --navbar-height: 3.5em; + --navbar-height: 3.5rem; } html { diff --git a/src/panel.scss b/src/panel.scss index b23ec4bb6..57059cb9e 100644 --- a/src/panel.scss +++ b/src/panel.scss @@ -34,6 +34,10 @@ } .panel-heading { + --panel-heading-height: 3.2em; + --panel-heading-height-padding: 0.6em; + --__panel-heading-height-inner: calc(var(--panel-heading-height) - 2 * var(--panel-heading-height-padding)); + position: relative; box-sizing: border-box; display: flex; @@ -43,7 +47,7 @@ background-size: cover; padding: 0.6em 0.6em; text-align: left; - line-height: calc(var(--panel-heading-height) / 2); + line-height: var(--__panel-heading-height-inner); color: var(--panelText); background-color: $fallback--bg; background-color: var(--bg, $fallback--bg); @@ -51,8 +55,6 @@ height: var(--panel-heading-height); z-index: -2; - --panel-heading-height: 3.2em; - &.-flexible-height { --panel-heading-height: auto; @@ -120,14 +122,12 @@ .button-default, .alert { - // height: 100%; - line-height: 21px; + height: var(--__panel-heading-height-inner); min-height: 0; box-sizing: border-box; margin: 0; margin-left: 0.5em; min-width: 1px; - align-self: stretch; } .button-default {