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 {
position: relative;
}
.d-icon-globe {
position: absolute;
left: -0.75em;
height: 0.75em;
width: 0.75em;
margin-top: 0.15em;
align-items: center;
.d-icon-globe {
position: absolute;
left: -0.75em;
align-self: stretch;
width: 0.6em;
height: 100%;
}
}
.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;
box-sizing: border-box;
width: 100%;
padding: var(--d-sidebar-row-vertical-padding)
var(--d-sidebar-row-horizontal-padding);
font-size: var(--d-sidebar-row-font-size);
padding: 0 var(--d-sidebar-row-horizontal-padding);
justify-content: left;
svg.d-icon {

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

@ -1,5 +1,5 @@
: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;
}
@ -35,15 +35,16 @@
.sidebar-section-link-content-badge {
@include ellipsis;
padding-left: 0.5em;
padding-right: 0.1em; // avoids some overflow cropping
text-align: right;
color: var(--primary-high);
color: var(--primary-700);
font-size: var(--font-down-1);
font-weight: normal;
margin-left: auto;
}
.sidebar-section-link-suffix {
margin-left: 0.25rem;
margin-left: 1em;
font-size: var(--font-down-4);
color: var(--tertiary-medium);
}
@ -119,6 +120,7 @@
background: rgba(var(--primary-rgb), 0.1);
width: 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 {
width: 0.9em;
height: 0.9em;
width: 0.87em;
height: 0.87em;
}
}

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

@ -16,10 +16,14 @@
.sidebar-section-header-wrapper {
display: flex;
font-size: var(--d-sidebar-section-header-text-font-size);
.discourse-no-touch & {
&:hover {
background: var(--d-sidebar-highlight-color);
.d-icon-globe {
color: var(--primary-medium);
}
}
}
@ -27,6 +31,10 @@
background: var(--d-sidebar-highlight-color);
}
.sidebar-section-header-button {
font-size: var(--font-down-1);
}
.btn.dropdown-select-box-header,
.sidebar-section-header-button {
.discourse-no-touch & {
@ -86,9 +94,9 @@
}
.sidebar-section-header-text {
display: flex;
line-height: normal;
margin-right: 0.25em;
font-size: var(--d-sidebar-section-header-text-font-size);
@include ellipsis;
}
@ -133,7 +141,7 @@
}
.sidebar-section-content {
padding-bottom: 1em;
padding-bottom: 1.25em;
margin: 0;
hr {
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-ease: ease-in-out;
--d-sidebar-row-height: 30px;
// 1.25rem gets text left-aligned with the hamburger icon
--d-sidebar-row-horizontal-padding: 1.25rem;
--d-sidebar-row-vertical-padding: 0.33rem;
--d-sidebar-row-font-size: var(--font-down-1);
// ems so height is variable along with font size
--d-sidebar-row-height: 2.15em;
}
.sidebar-row {
box-sizing: border-box;
height: var(--d-sidebar-row-height);
padding: var(--d-sidebar-row-vertical-padding)
var(--d-sidebar-row-horizontal-padding);
padding: 0 var(--d-sidebar-row-horizontal-padding);
align-items: center;
font-size: var(--d-sidebar-row-font-size);
}
.sidebar-wrapper {
@ -61,7 +58,7 @@
flex-direction: column;
box-sizing: border-box;
flex: 1;
padding: 1.5em 0 1em;
padding: 1.35em 0 1em;
overflow-x: hidden;
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;
$reply-area-max-width: 1475px !default;
$d-sidebar-width: 16em !default;
$d-sidebar-width: 17em !default;
$d-sidebar-narrow-width: 14em !default;
// Brand color variables

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

@ -16,7 +16,7 @@
--d-sidebar-row-height: 30px;
// 1.25rem gets text left-aligned with the hamburger icon
--d-sidebar-row-horizontal-padding: 0.66rem;
--d-sidebar-row-vertical-padding: 0.33rem;
width: 360px;
.panel-body-content {
width: 100%;
@ -41,8 +41,13 @@
&.sidebar-section {
padding-top: 0.5em;
.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);
.d-icon-globe {
font-size: var(--font-down-2);
color: var(--primary-medium);
}
}
ul {
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-hover:hover
.sidebar-section-hover-button {

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

@ -16,9 +16,6 @@
.hamburger-panel .revamped {
--d-sidebar-row-horizontal-padding: 1rem;
--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;
padding: 0;
@ -66,4 +63,11 @@
.sidebar-section-content {
padding-bottom: 0;
}
.sidebar-section-header-wrapper {
.d-icon-globe {
color: var(--primary-medium);
font-size: var(--font-down-1);
}
}
}