github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-30 05:53:55 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
7639591552
discourse/app/assets/stylesheets/common/base/sidebar-more-section-links.scss

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

71 lines
1.7 KiB
SCSS
Raw Normal View History

FIX: flaky sidebar-user-community-section-test (#21398) Change mechanism handling `more` button for sidebar. Before it was using HTML details tag. To make tests more reliable, we are switching to use ember runloop.
2023-05-08 11:37:34 +08:00
.btn-flat.sidebar-more-section-links-details-summary {
UX: sidebar styling, spacing consistency, etc (#18059)
2022-08-24 09:33:15 +08:00
&:focus-within,
FIX: flaky sidebar-user-community-section-test (#21398) Change mechanism handling `more` button for sidebar. Before it was using HTML details tag. To make tests more reliable, we are switching to use ember runloop.
2023-05-08 11:37:34 +08:00
&:active,
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 15:03:28 +08:00
&:hover {
UX: remove sidebar background color (#21775)
2023-06-06 21:24:56 +08:00
background: var(--d-sidebar-highlight-background);
FIX: flaky sidebar-user-community-section-test (#21398) Change mechanism handling `more` button for sidebar. Before it was using HTML details tag. To make tests more reliable, we are switching to use ember runloop.
2023-05-08 11:37:34 +08:00
svg.d-icon {
UX: remove sidebar background color (#21775)
2023-06-06 21:24:56 +08:00
color: var(--d-sidebar-highlight-color);
UX: Reduce number of links displayed in Community by default (#17703) Additional links are hidden by default and can be accessed via the "more..." link.
2022-07-28 16:46:46 +08:00
}
}
UX: Remove section heading for community section (#22405) Why is this change being made? We've decided that the previous "community" section should look more like a primary section that holds the most important navigation links for the site and the word "community" doesn't quite fit that description. Therefore, we've made the decision to drop the section heading for the community section. As part of removing the section heading, the following changes are made as well: 1. Button to customize the section has been moved to the "footer" of the "More..." section when `navigation_menu` site setting is set to `sidebar`. When `navigation_menu` is set to `header dropdown`, a button to customize the section is shown inline. 2. The section will no longer be collapsable. 3. The title of the section is no longer customisable as it is no longer displayed. As a technical note, we have not dropped any previous customisations of the section's title previously in case we have to bring back the header in the future. 4. The new topic button that was previously present in the header has been removed alongside the header. Admins can add a custom section link to the `/new-topic` route if there would like to make it easier for users to create a new topic in the sidebar.
2023-07-11 09:40:37 +08:00
FIX: flaky sidebar-user-community-section-test (#21398) Change mechanism handling `more` button for sidebar. Before it was using HTML details tag. To make tests more reliable, we are switching to use ember runloop.
2023-05-08 11:37:34 +08:00
height: var(--d-sidebar-row-height);
UX: remove sidebar background color (#21775)
2023-06-06 21:24:56 +08:00
color: var(--d-sidebar-link-color);
FIX: flaky sidebar-user-community-section-test (#21398) Change mechanism handling `more` button for sidebar. Before it was using HTML details tag. To make tests more reliable, we are switching to use ember runloop.
2023-05-08 11:37:34 +08:00
display: flex;
list-style: none;
box-sizing: border-box;
width: 100%;
UX: increase sidebar font-size (#21704)
2023-05-24 23:00:20 +08:00
padding: 0 var(--d-sidebar-row-horizontal-padding);
FIX: flaky sidebar-user-community-section-test (#21398) Change mechanism handling `more` button for sidebar. Before it was using HTML details tag. To make tests more reliable, we are switching to use ember runloop.
2023-05-08 11:37:34 +08:00
justify-content: left;
UX: Reduce number of links displayed in Community by default (#17703) Additional links are hidden by default and can be accessed via the "more..." link.
2022-07-28 16:46:46 +08:00
UX: remove sidebar background color (#21775)
2023-06-06 21:24:56 +08:00
.d-icon {
FIX: flaky sidebar-user-community-section-test (#21398) Change mechanism handling `more` button for sidebar. Before it was using HTML details tag. To make tests more reliable, we are switching to use ember runloop.
2023-05-08 11:37:34 +08:00
width: var(--d-sidebar-section-link-prefix-width);
margin-right: var(--d-sidebar-section-link-prefix-margin-right);
UX: remove sidebar background color (#21775)
2023-06-06 21:24:56 +08:00
color: var(--d-sidebar-link-icon-color);
FIX: flaky sidebar-user-community-section-test (#21398) Change mechanism handling `more` button for sidebar. Before it was using HTML details tag. To make tests more reliable, we are switching to use ember runloop.
2023-05-08 11:37:34 +08:00
font-size: var(--font-down-1);
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 15:03:28 +08:00
}
FIX: flaky sidebar-user-community-section-test (#21398) Change mechanism handling `more` button for sidebar. Before it was using HTML details tag. To make tests more reliable, we are switching to use ember runloop.
2023-05-08 11:37:34 +08:00
}
UX: Remove section heading for community section (#22405) Why is this change being made? We've decided that the previous "community" section should look more like a primary section that holds the most important navigation links for the site and the word "community" doesn't quite fit that description. Therefore, we've made the decision to drop the section heading for the community section. As part of removing the section heading, the following changes are made as well: 1. Button to customize the section has been moved to the "footer" of the "More..." section when `navigation_menu` site setting is set to `sidebar`. When `navigation_menu` is set to `header dropdown`, a button to customize the section is shown inline. 2. The section will no longer be collapsable. 3. The title of the section is no longer customisable as it is no longer displayed. As a technical note, we have not dropped any previous customisations of the section's title previously in case we have to bring back the header in the future. 4. The new topic button that was previously present in the header has been removed alongside the header. Admins can add a custom section link to the `/new-topic` route if there would like to make it easier for users to create a new topic in the sidebar.
2023-07-11 09:40:37 +08:00
FIX: flaky sidebar-user-community-section-test (#21398) Change mechanism handling `more` button for sidebar. Before it was using HTML details tag. To make tests more reliable, we are switching to use ember runloop.
2023-05-08 11:37:34 +08:00
.sidebar-more-section-links-details-content {
UX: remove sidebar background color (#21775)
2023-06-06 21:24:56 +08:00
background-color: var(--d-sidebar-background);
FIX: flaky sidebar-user-community-section-test (#21398) Change mechanism handling `more` button for sidebar. Before it was using HTML details tag. To make tests more reliable, we are switching to use ember runloop.
2023-05-08 11:37:34 +08:00
transition: background-color 0.25s;
REFACTOR: move shadow vars to css custom props (#22094)
2023-06-14 04:38:31 +08:00
box-shadow: var(--shadow-card);
UX: increase contrast of "more" sidebar dropdown (#22044)
2023-06-10 00:38:44 +08:00
border: 1px solid var(--primary-low);
FIX: flaky sidebar-user-community-section-test (#21398) Change mechanism handling `more` button for sidebar. Before it was using HTML details tag. To make tests more reliable, we are switching to use ember runloop.
2023-05-08 11:37:34 +08:00
margin: 0 calc(var(--d-sidebar-row-horizontal-padding) * 2 / 3);
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 15:03:28 +08:00
FIX: flaky sidebar-user-community-section-test (#21398) Change mechanism handling `more` button for sidebar. Before it was using HTML details tag. To make tests more reliable, we are switching to use ember runloop.
2023-05-08 11:37:34 +08:00
.sidebar-row {
padding: 0.33rem calc(var(--d-sidebar-row-horizontal-padding) / 3);
UX: Reduce number of links displayed in Community by default (#17703) Additional links are hidden by default and can be accessed via the "more..." link.
2022-07-28 16:46:46 +08:00
}
}
UX: Remove section heading for community section (#22405) Why is this change being made? We've decided that the previous "community" section should look more like a primary section that holds the most important navigation links for the site and the word "community" doesn't quite fit that description. Therefore, we've made the decision to drop the section heading for the community section. As part of removing the section heading, the following changes are made as well: 1. Button to customize the section has been moved to the "footer" of the "More..." section when `navigation_menu` site setting is set to `sidebar`. When `navigation_menu` is set to `header dropdown`, a button to customize the section is shown inline. 2. The section will no longer be collapsable. 3. The title of the section is no longer customisable as it is no longer displayed. As a technical note, we have not dropped any previous customisations of the section's title previously in case we have to bring back the header in the future. 4. The new topic button that was previously present in the header has been removed alongside the header. Admins can add a custom section link to the `/new-topic` route if there would like to make it easier for users to create a new topic in the sidebar.
2023-07-11 09:40:37 +08:00
FIX: jumpy more sidebar section (#21430) Bug introduced in PR https://github.com/discourse/discourse/pull/21398 More section needs to be wrapped in div with position:relative to have sticky and absolute position.
2023-05-08 12:33:24 +08:00
.sidebar-more-section-links-details-content-main {
position: sticky;
UX: Remove section heading for community section (#22405) Why is this change being made? We've decided that the previous "community" section should look more like a primary section that holds the most important navigation links for the site and the word "community" doesn't quite fit that description. Therefore, we've made the decision to drop the section heading for the community section. As part of removing the section heading, the following changes are made as well: 1. Button to customize the section has been moved to the "footer" of the "More..." section when `navigation_menu` site setting is set to `sidebar`. When `navigation_menu` is set to `header dropdown`, a button to customize the section is shown inline. 2. The section will no longer be collapsable. 3. The title of the section is no longer customisable as it is no longer displayed. As a technical note, we have not dropped any previous customisations of the section's title previously in case we have to bring back the header in the future. 4. The new topic button that was previously present in the header has been removed alongside the header. Admins can add a custom section link to the `/new-topic` route if there would like to make it easier for users to create a new topic in the sidebar.
2023-07-11 09:40:37 +08:00
margin: 0;
FIX: jumpy more sidebar section (#21430) Bug introduced in PR https://github.com/discourse/discourse/pull/21398 More section needs to be wrapped in div with position:relative to have sticky and absolute position.
2023-05-08 12:33:24 +08:00
}
UX: Remove section heading for community section (#22405) Why is this change being made? We've decided that the previous "community" section should look more like a primary section that holds the most important navigation links for the site and the word "community" doesn't quite fit that description. Therefore, we've made the decision to drop the section heading for the community section. As part of removing the section heading, the following changes are made as well: 1. Button to customize the section has been moved to the "footer" of the "More..." section when `navigation_menu` site setting is set to `sidebar`. When `navigation_menu` is set to `header dropdown`, a button to customize the section is shown inline. 2. The section will no longer be collapsable. 3. The title of the section is no longer customisable as it is no longer displayed. As a technical note, we have not dropped any previous customisations of the section's title previously in case we have to bring back the header in the future. 4. The new topic button that was previously present in the header has been removed alongside the header. Admins can add a custom section link to the `/new-topic` route if there would like to make it easier for users to create a new topic in the sidebar.
2023-07-11 09:40:37 +08:00
.sidebar-more-section-links-details-content-footer {
border-top: 2px solid var(--primary-low);
display: flex;
width: 100%;
.sidebar-section-link-wrapper {
width: 100%;
}
}
FIX: flaky sidebar-user-community-section-test (#21398) Change mechanism handling `more` button for sidebar. Before it was using HTML details tag. To make tests more reliable, we are switching to use ember runloop.
2023-05-08 11:37:34 +08:00
.sidebar-more-section-links-details-content-wrapper {
position: absolute;
width: 100%;
z-index: z("modal", "content") + 1;
FIX: jumpy more sidebar section (#21430) Bug introduced in PR https://github.com/discourse/discourse/pull/21398 More section needs to be wrapped in div with position:relative to have sticky and absolute position.
2023-05-08 12:33:24 +08:00
}
UX: Remove section heading for community section (#22405) Why is this change being made? We've decided that the previous "community" section should look more like a primary section that holds the most important navigation links for the site and the word "community" doesn't quite fit that description. Therefore, we've made the decision to drop the section heading for the community section. As part of removing the section heading, the following changes are made as well: 1. Button to customize the section has been moved to the "footer" of the "More..." section when `navigation_menu` site setting is set to `sidebar`. When `navigation_menu` is set to `header dropdown`, a button to customize the section is shown inline. 2. The section will no longer be collapsable. 3. The title of the section is no longer customisable as it is no longer displayed. As a technical note, we have not dropped any previous customisations of the section's title previously in case we have to bring back the header in the future. 4. The new topic button that was previously present in the header has been removed alongside the header. Admins can add a custom section link to the `/new-topic` route if there would like to make it easier for users to create a new topic in the sidebar.
2023-07-11 09:40:37 +08:00
FIX: jumpy more sidebar section (#21430) Bug introduced in PR https://github.com/discourse/discourse/pull/21398 More section needs to be wrapped in div with position:relative to have sticky and absolute position.
2023-05-08 12:33:24 +08:00
.sidebar-more-section-links-details {
position: relative;
UX: fix "More" menu at small tablet width (#23616)
2023-09-16 05:21:24 +08:00
@include breakpoint(tablet) {
grid-column-start: 1;
grid-column-end: 3;
.sidebar-more-section-links-details-content-main {
gap: 0 1em;
}
}
FIX: flaky sidebar-user-community-section-test (#21398) Change mechanism handling `more` button for sidebar. Before it was using HTML details tag. To make tests more reliable, we are switching to use ember runloop.
2023-05-08 11:37:34 +08:00
}
Reference in New Issue Copy Permalink