Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: increase sidebar font-size (#21704)

This commit is contained in:
Kris 2023-05-24 11:00:20 -04:00 committed by GitHub
parent d6d5eae16f
commit 2aae8d6092
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 44 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/assets/stylesheets/common/base/sidebar-custom-section.scss
View File

@ -4,14 +4,13 @@
} }
.sidebar-section-header { .sidebar-section-header {
position: relative; position: relative;
} .d-icon-globe {
.d-icon-globe { position: absolute;
position: absolute; left: -0.75em;
left: -0.75em; align-self: stretch;
height: 0.75em; width: 0.6em;
width: 0.75em; height: 100%;
margin-top: 0.15em; }
align-items: center;
} }
.sidebar-section-link-prefix.icon { .sidebar-section-link-prefix.icon {

4
app/assets/stylesheets/common/base/sidebar-more-section-links.scss
View File

@ -13,9 +13,7 @@
list-style: none; list-style: none;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
padding: var(--d-sidebar-row-vertical-padding) padding: 0 var(--d-sidebar-row-horizontal-padding);
var(--d-sidebar-row-horizontal-padding);
font-size: var(--d-sidebar-row-font-size);
justify-content: left; justify-content: left;
svg.d-icon { svg.d-icon {

12
app/assets/stylesheets/common/base/sidebar-section-link.scss
View File

@ -1,5 +1,5 @@
:root { :root {
--d-sidebar-section-link-prefix-margin-right: 0.4rem; --d-sidebar-section-link-prefix-margin-right: 0.5rem;
--d-sidebar-section-link-prefix-width: 20px; --d-sidebar-section-link-prefix-width: 20px;
} }
@ -35,15 +35,16 @@
.sidebar-section-link-content-badge { .sidebar-section-link-content-badge {
@include ellipsis; @include ellipsis;
padding-left: 0.5em; padding-left: 0.5em;
padding-right: 0.1em; // avoids some overflow cropping
text-align: right; text-align: right;
color: var(--primary-high); color: var(--primary-700);
font-size: var(--font-down-1); font-size: var(--font-down-1);
font-weight: normal; font-weight: normal;
margin-left: auto; margin-left: auto;
} }
.sidebar-section-link-suffix { .sidebar-section-link-suffix {
margin-left: 0.25rem; margin-left: 1em;
font-size: var(--font-down-4); font-size: var(--font-down-4);
color: var(--tertiary-medium); color: var(--tertiary-medium);
} }
@ -119,6 +120,7 @@
background: rgba(var(--primary-rgb), 0.1); background: rgba(var(--primary-rgb), 0.1);
width: calc(var(--d-sidebar-section-link-prefix-width) - 2px); width: calc(var(--d-sidebar-section-link-prefix-width) - 2px);
height: calc(var(--d-sidebar-section-link-prefix-width) - 2px); height: calc(var(--d-sidebar-section-link-prefix-width) - 2px);
font-size: var(--font-down-1);
} }
} }
@ -145,8 +147,8 @@
} }
} }
.prefix-span { .prefix-span {
width: 0.9em; width: 0.87em;
height: 0.9em; height: 0.87em;
} }
} }

12
app/assets/stylesheets/common/base/sidebar-section.scss
View File

@ -16,10 +16,14 @@
.sidebar-section-header-wrapper { .sidebar-section-header-wrapper {
display: flex; display: flex;
font-size: var(--d-sidebar-section-header-text-font-size);
.discourse-no-touch & { .discourse-no-touch & {
&:hover { &:hover {
background: var(--d-sidebar-highlight-color); background: var(--d-sidebar-highlight-color);
.d-icon-globe {
color: var(--primary-medium);
}
} }
} }
@ -27,6 +31,10 @@
background: var(--d-sidebar-highlight-color); background: var(--d-sidebar-highlight-color);
} }
.sidebar-section-header-button {
font-size: var(--font-down-1);
}
.btn.dropdown-select-box-header, .btn.dropdown-select-box-header,
.sidebar-section-header-button { .sidebar-section-header-button {
.discourse-no-touch & { .discourse-no-touch & {
@ -86,9 +94,9 @@
} }
.sidebar-section-header-text { .sidebar-section-header-text {
display: flex;
line-height: normal; line-height: normal;
margin-right: 0.25em; margin-right: 0.25em;
font-size: var(--d-sidebar-section-header-text-font-size);
@include ellipsis; @include ellipsis;
} }
@ -133,7 +141,7 @@
} }
.sidebar-section-content { .sidebar-section-content {
padding-bottom: 1em; padding-bottom: 1.25em;
margin: 0; margin: 0;
hr { hr {
margin: 0em 1.5em; margin: 0em 1.5em;

11
app/assets/stylesheets/common/base/sidebar.scss
View File

@ -5,20 +5,17 @@
} }
--d-sidebar-animation-time: 0.25s; --d-sidebar-animation-time: 0.25s;
--d-sidebar-animation-ease: ease-in-out; --d-sidebar-animation-ease: ease-in-out;
--d-sidebar-row-height: 30px;
// 1.25rem gets text left-aligned with the hamburger icon // 1.25rem gets text left-aligned with the hamburger icon
--d-sidebar-row-horizontal-padding: 1.25rem; --d-sidebar-row-horizontal-padding: 1.25rem;
--d-sidebar-row-vertical-padding: 0.33rem; // ems so height is variable along with font size
--d-sidebar-row-font-size: var(--font-down-1); --d-sidebar-row-height: 2.15em;
} }
.sidebar-row { .sidebar-row {
box-sizing: border-box; box-sizing: border-box;
height: var(--d-sidebar-row-height); height: var(--d-sidebar-row-height);
padding: var(--d-sidebar-row-vertical-padding) padding: 0 var(--d-sidebar-row-horizontal-padding);
var(--d-sidebar-row-horizontal-padding);
align-items: center; align-items: center;
font-size: var(--d-sidebar-row-font-size);
} }
.sidebar-wrapper { .sidebar-wrapper {
@ -61,7 +58,7 @@
flex-direction: column; flex-direction: column;
box-sizing: border-box; box-sizing: border-box;
flex: 1; flex: 1;
padding: 1.5em 0 1em; padding: 1.35em 0 1em;
overflow-x: hidden; overflow-x: hidden;
overflow-y: overlay; overflow-y: overlay;

2
app/assets/stylesheets/common/foundation/variables.scss
View File

@ -17,7 +17,7 @@ $topic-body-width-padding: 11px;
$topic-avatar-width: 45px; $topic-avatar-width: 45px;
$reply-area-max-width: 1475px !default; $reply-area-max-width: 1475px !default;
$d-sidebar-width: 16em !default; $d-sidebar-width: 17em !default;
$d-sidebar-narrow-width: 14em !default; $d-sidebar-narrow-width: 14em !default;
// Brand color variables // Brand color variables

15
app/assets/stylesheets/desktop/menu-panel.scss
View File

@ -16,7 +16,7 @@
--d-sidebar-row-height: 30px; --d-sidebar-row-height: 30px;
// 1.25rem gets text left-aligned with the hamburger icon // 1.25rem gets text left-aligned with the hamburger icon
--d-sidebar-row-horizontal-padding: 0.66rem; --d-sidebar-row-horizontal-padding: 0.66rem;
--d-sidebar-row-vertical-padding: 0.33rem; width: 360px;
.panel-body-content { .panel-body-content {
width: 100%; width: 100%;
@ -41,8 +41,13 @@
&.sidebar-section { &.sidebar-section {
padding-top: 0.5em; padding-top: 0.5em;
.sidebar-section-header-wrapper { .sidebar-section-header-wrapper {
margin: 0 0 var(--d-sidebar-row-vertical-padding); margin: 0 0 0.5em;
padding-bottom: 0.25em;
border-bottom: 1px solid var(--primary-low); border-bottom: 1px solid var(--primary-low);
.d-icon-globe {
font-size: var(--font-down-2);
color: var(--primary-medium);
}
} }
ul { ul {
display: grid; display: grid;
@ -58,12 +63,6 @@
} }
} }
.sidebar-custom-sections .d-icon-globe {
left: -0.9em;
top: 0.35em;
font-size: 0.7em;
}
.sidebar-section-link-wrapper .sidebar-section-link-wrapper
.sidebar-section-link-hover:hover .sidebar-section-link-hover:hover
.sidebar-section-hover-button { .sidebar-section-hover-button {

10
app/assets/stylesheets/mobile/menu-panel.scss
View File

@ -16,9 +16,6 @@
.hamburger-panel .revamped { .hamburger-panel .revamped {
--d-sidebar-row-horizontal-padding: 1rem; --d-sidebar-row-horizontal-padding: 1rem;
--d-sidebar-highlight-color: var(--primary-low); --d-sidebar-highlight-color: var(--primary-low);
--d-sidebar-row-font-size: var(--font-0);
--d-sidebar-row-height: 32px;
--d-sidebar-section-header-text-font-size: var(--font-0);
box-sizing: border-box; box-sizing: border-box;
padding: 0; padding: 0;
@ -66,4 +63,11 @@
.sidebar-section-content { .sidebar-section-content {
padding-bottom: 0; padding-bottom: 0;
} }
.sidebar-section-header-wrapper {
.d-icon-globe {
color: var(--primary-medium);
font-size: var(--font-down-1);
}
}
} }