Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
discourse/app/assets/stylesheets/desktop/menu-panel.scss

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

104 lines
2.2 KiB
SCSS
Raw Normal View History

DEV: Introduce a basic version of the new notifications menu behind a feature flag (#17492)
2022-07-18 22:35:02 -04:00
.menu-panel {
&.user-menu.revamped {
width: unset;
}
.panel-body {
max-height: calc(100vh - 100px);
}
FIX: ensure menu not too tall on desktop only Followup to af65809e, menu-panel shorter than 100vh does not look good on mobile.
2019-11-03 18:47:53 -05:00
}
UX: Make Sidebar more consistent with user menu on mobile (#17940) Before this commit, we carried custom code and styles for the sidebar on mobile. This meant the look and feel of bringing up the sidebar on mobile was very different from the user menu resulting in a very inconsistent experience on mobile. Also, we could not leverage on the existing swipe to close support on mobile. In this commit, we made it such that the sidebar dropdown is always rendered on mobile and made the interaction with the dropdown more consistent with the user menu. There is also more parity with the old hamburger dropdown when the experimental sidebar is disabled.
2022-08-16 01:45:32 -04:00
// Sidebar-hamburger hybrid
.hamburger-panel .revamped {
--d-sidebar-highlight-color: var(--highlight-medium);
UX: Revamp styling of sidebar The following changes are made in this commit: 1. Move caret icon in sidebar section header to the right. 1. Each row in sidebar takes the full width which enables us to do a full width highlight on hover and when sidebar link is active. 1. Ensure each row in Sidebar is of the same height. Internal refs: /t/70546, /t/72196, /t/71820
2022-08-18 03:03:28 -04:00
--d-sidebar-row-horizontal-padding: 0.5rem;
UX: Add icons to all section links in Sidebar (#18378) This commit introduces an icon to all links in the sidebar. If an icon has not been configured, we will fall back to a generic "link" icon. As part of this commit, we also standardised the size of each prefix to 20px by 20px and set a fix margin. This is to allow sufficient space for text prefixes and image prefixes to be displayed. Tests have been intentionally left out for now as I don't feel like asserting for the icons will bring much value at this point. Time shall prove me wrong. Co-authored-by: awesomerobot <kris.aubuchon@discourse.org>
2022-09-29 00:28:01 -04:00
--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;
UX: Revamp styling of sidebar The following changes are made in this commit: 1. Move caret icon in sidebar section header to the right. 1. Each row in sidebar takes the full width which enables us to do a full width highlight on hover and when sidebar link is active. 1. Ensure each row in Sidebar is of the same height. Internal refs: /t/70546, /t/72196, /t/71820
2022-08-18 03:03:28 -04:00
UX: Make Sidebar more consistent with user menu on mobile (#17940) Before this commit, we carried custom code and styles for the sidebar on mobile. This meant the look and feel of bringing up the sidebar on mobile was very different from the user menu resulting in a very inconsistent experience on mobile. Also, we could not leverage on the existing swipe to close support on mobile. In this commit, we made it such that the sidebar dropdown is always rendered on mobile and made the interaction with the dropdown more consistent with the user menu. There is also more parity with the old hamburger dropdown when the experimental sidebar is disabled.
2022-08-16 01:45:32 -04:00
.panel-body-content {
width: 100%;
min-width: 0; // prevent content blowing out width
}
.sidebar-section-wrapper {
.sidebar-section-header-button {
opacity: 1;
}
.sidebar-section-link.active {
font-weight: normal;
color: var(--primary-high);
background: var(--tertiary-low);
}
UX: sidebar styling, spacing consistency, etc (#18059)
2022-08-23 21:33:15 -04:00
.sidebar-section-header-wrapper .select-kit .btn:hover {
background: transparent;
}
UX: two column dropdown sidebar layout (#21288)
2023-05-01 10:41:28 -04:00
&.sidebar-section {
padding-top: 0.5em;
.sidebar-section-header-wrapper {
margin: 0 0 var(--d-sidebar-row-vertical-padding);
border-bottom: 1px solid var(--primary-low);
}
ul {
display: grid;
grid-template-columns: 1fr 1fr;
li {
min-width: 0;
}
}
}
}
.sidebar-section-wrapper .sidebar-section-header-caret {
display: none;
}
.sidebar-section-header-collapsable {
pointer-events: none; // disabling collapsible sections
}
.sidebar-custom-sections .d-icon-globe {
left: -0.9em;
top: 0.35em;
font-size: 0.7em;
UX: sidebar styling, spacing consistency, etc (#18059)
2022-08-23 21:33:15 -04:00
}
.sidebar-section-link-wrapper
.sidebar-section-link-hover:hover
.sidebar-section-hover-button {
background: transparent;
UX: Make Sidebar more consistent with user menu on mobile (#17940) Before this commit, we carried custom code and styles for the sidebar on mobile. This meant the look and feel of bringing up the sidebar on mobile was very different from the user menu resulting in a very inconsistent experience on mobile. Also, we could not leverage on the existing swipe to close support on mobile. In this commit, we made it such that the sidebar dropdown is always rendered on mobile and made the interaction with the dropdown more consistent with the user menu. There is also more parity with the old hamburger dropdown when the experimental sidebar is disabled.
2022-08-16 01:45:32 -04:00
}
.sidebar-footer-wrapper {
UX: sidebar styling, spacing consistency, etc (#18059)
2022-08-23 21:33:15 -04:00
padding: 0;
UX: two column dropdown sidebar layout (#21288)
2023-05-01 10:41:28 -04:00
margin-top: 1em;
UX: sidebar styling, spacing consistency, etc (#18059)
2022-08-23 21:33:15 -04:00
.sidebar-footer-container {
padding: 0;
UX: two column dropdown sidebar layout (#21288)
2023-05-01 10:41:28 -04:00
border: none;
background: var(--secondary);
UX: sidebar styling, spacing consistency, etc (#18059)
2022-08-23 21:33:15 -04:00
&:before {
UX: two column dropdown sidebar layout (#21288)
2023-05-01 10:41:28 -04:00
top: -1.5em;
background: linear-gradient(
to bottom,
transparent,
rgba(var(--secondary-rgb), 1)
);
UX: sidebar styling, spacing consistency, etc (#18059)
2022-08-23 21:33:15 -04:00
}
}
UX: Make Sidebar more consistent with user menu on mobile (#17940) Before this commit, we carried custom code and styles for the sidebar on mobile. This meant the look and feel of bringing up the sidebar on mobile was very different from the user menu resulting in a very inconsistent experience on mobile. Also, we could not leverage on the existing swipe to close support on mobile. In this commit, we made it such that the sidebar dropdown is always rendered on mobile and made the interaction with the dropdown more consistent with the user menu. There is also more parity with the old hamburger dropdown when the experimental sidebar is disabled.
2022-08-16 01:45:32 -04:00
}
}
UX: two column dropdown sidebar layout (#21288)
2023-05-01 10:41:28 -04:00
.sidebar-hamburger-dropdown {
.discourse-no-touch & {
.sidebar-section-wrapper .sidebar-section-header-wrapper:hover,
.sidebar-section-wrapper .sidebar-section-header-wrapper:focus-within {
background: transparent;
}
}
}