mirror of
https://github.com/discourse/discourse.git
synced 2024-11-26 18:33:52 +08:00
d208396c5c
PERF: improve touch, swipe, panning performance on mobile menus --- * stop event propagation on swipe events: other touch events were stealing a huge amount of time here. Stop event propagation when handling pan events. * animate with [web animations api](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API) * prefer translate3d to hint for gpu rendering. * query document for elements only on start move event, not on subsequent move events * remove unused calculations for directioned velocity and distance: all swipe/pan elements function in x/y direction only. * re-implement scroll locking behavior. re-implemented scroll lock behavior --- With stop event propagation, we need to re-implement scroll locking on menu swipes. Previously, this was using onTouchMove which was costly. We may now use styling with overflow-y:hidden to lock scroll behavior. overflow:hidden on html/body elements is now supported by iOS as of 2022 https://bugs.webkit.org/show_bug.cgi?id=153852 https://bugs.webkit.org/show_bug.cgi?id=220908 UX: improve swipe --- Some improvements to get gestures and swipes feeling a little more polished. This focuses on end gesture, and how we transfer it to a css animation to complete a menu open/close action. Multitouch: events may pan, scroll, and zoom - especially on iOS safari. Cancelling the swipe event allows for a more pleasant zooming experience. * ease-out on menus opening, linear on close * calculate animation duration for opening and closing, attempt to better transfer user swipe velocity to css animation. * more timely close/open and cleanup from calculated animation timing. * add animation to closing menus on cloak tap * correctly animate menus with ease-in and ease-out * add swipe cancel event on multitouch event DEV --- * lean on promises js animations api gives us promises to listen to. Update test waiters to use waitForPromise from @ember/test-waiters instead of reigster/unregister. * convert swipe mixin to its own class. Convert swipe callbacks to custom events on the element. Move shared functions for max animation time and close logic to new shared class. swipe-events lib uses custom events to trigger callbacks, rather than assuming implemented hard coded function from the mixin's base class. Custom events are triggered from the bound element as swipestart, swipeend, swipe Add shared convenience functions for swipe events so they can be more easily shared. A client receives an initial swipe event and can check some state to see if it wants to handle the swipe event and if it doesn't, calling `event.preventDefault();` will prevent `swipe` and `swipeend` events from firing until another distinct swipestart event is fired. Swipe events will auto-cancel on multitouch. The scroll lock has also exposed as its own utility class.
622 lines
12 KiB
SCSS
622 lines
12 KiB
SCSS
.menu-panel.slide-in {
|
|
position: fixed;
|
|
right: 0;
|
|
box-shadow: var(--shadow-header);
|
|
|
|
.panel-body {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.header-cloak {
|
|
display: none;
|
|
}
|
|
|
|
.menu-panel.drop-down {
|
|
position: absolute;
|
|
// positions are relative to the .d-header .panel div
|
|
top: 100%; // directly underneath .panel
|
|
right: -10px; // 10px to the right of .panel - adjust as needed
|
|
max-height: 80vh;
|
|
border-radius: var(--d-border-radius-large);
|
|
}
|
|
|
|
.menu-panel {
|
|
border: 1px solid var(--primary-low);
|
|
box-shadow: var(--shadow-menu-panel);
|
|
background-color: var(--secondary);
|
|
z-index: z("header");
|
|
padding: 0.5em;
|
|
width: 320px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-sizing: border-box;
|
|
|
|
hr {
|
|
margin: 3px 0;
|
|
}
|
|
|
|
.panel-header {
|
|
position: absolute;
|
|
right: 20px;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.panel-body {
|
|
display: flex;
|
|
touch-action: pan-y pinch-zoom;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
}
|
|
|
|
.panel-body-contents {
|
|
max-height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.panel-body-bottom {
|
|
display: flex;
|
|
flex: 1 0 0%; // safari height fix
|
|
margin-top: 0.5em;
|
|
flex-wrap: wrap;
|
|
|
|
.show-all {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
button {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.notifications-dismiss {
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
.btn {
|
|
background-color: var(--primary-very-low);
|
|
color: var(--primary-high);
|
|
&:hover {
|
|
background: var(--primary-low);
|
|
color: var(--primary);
|
|
}
|
|
}
|
|
}
|
|
|
|
.badge-notification {
|
|
vertical-align: text-bottom;
|
|
}
|
|
}
|
|
|
|
.search-menu .menu-panel {
|
|
width: 500px;
|
|
}
|
|
|
|
.user-menu.revamped {
|
|
right: 0;
|
|
width: 320px;
|
|
padding: 0;
|
|
border-top-right-radius: 0px;
|
|
|
|
.panel-body-bottom {
|
|
flex: 0;
|
|
}
|
|
|
|
.menu-tabs-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-left: 1px solid var(--primary-low);
|
|
padding: 0.75em 0 0;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.tabs-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.btn {
|
|
display: flex;
|
|
padding: 0.857em;
|
|
position: relative;
|
|
border-radius: 0px;
|
|
|
|
.d-icon {
|
|
color: var(--primary-medium);
|
|
}
|
|
|
|
.badge-notification {
|
|
background-color: var(--tertiary-med-or-tertiary);
|
|
position: absolute;
|
|
right: 6px;
|
|
top: 6px;
|
|
font-size: var(--font-down-3);
|
|
}
|
|
|
|
&.active {
|
|
background-color: var(--d-selected);
|
|
}
|
|
&:hover {
|
|
background-color: var(--d-hover);
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom-tabs {
|
|
border-top: 1px solid var(--primary-low);
|
|
}
|
|
|
|
.panel-body-contents {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.quick-access-panel {
|
|
width: 320px;
|
|
padding: 0.75em;
|
|
padding-bottom: max(env(safe-area-inset-bottom), 0.75em);
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
min-width: 0; // makes sure menu tabs don't go off screen
|
|
|
|
.double-user,
|
|
.multi-user {
|
|
white-space: unset;
|
|
}
|
|
|
|
.item-label {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
color: var(--primary);
|
|
}
|
|
|
|
li {
|
|
background-color: var(--secondary);
|
|
|
|
&.unread,
|
|
&.pending {
|
|
background-color: var(--tertiary-low);
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var(--d-hover);
|
|
outline: none;
|
|
}
|
|
|
|
&:focus-within {
|
|
background: var(--d-hover);
|
|
a {
|
|
// we don't need the link focus because we're styling the parent
|
|
outline: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#quick-access-profile {
|
|
display: inline;
|
|
max-height: 99%; // macOS Chrome sometimes adds an unneeded scrollbar at 100%
|
|
|
|
ul {
|
|
flex-wrap: nowrap;
|
|
height: 100%;
|
|
align-items: center;
|
|
overflow-y: auto; // really short viewports
|
|
}
|
|
li {
|
|
flex: 1 1 auto;
|
|
max-height: 3em; // prevent buttons from getting too tall
|
|
> * {
|
|
// button, a, and everything else
|
|
height: 100%;
|
|
align-items: center;
|
|
margin: 0;
|
|
padding: 0 0.5em;
|
|
}
|
|
img.emoji {
|
|
height: 1em;
|
|
width: 1em;
|
|
padding-top: 0.2em;
|
|
margin-right: 0.5em;
|
|
}
|
|
.d-icon {
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
|
|
.set-user-status {
|
|
.emoji {
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
|
|
.profile-tab-btn {
|
|
.relative-date {
|
|
font-size: var(--font-down-3);
|
|
color: var(--primary-medium);
|
|
}
|
|
|
|
justify-content: unset;
|
|
line-height: var(--line-height-large);
|
|
width: 100%;
|
|
|
|
.d-icon {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.do-not-disturb {
|
|
.d-icon-toggle-on {
|
|
color: var(--tertiary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.hamburger-panel {
|
|
// remove once glimmer search menu in place
|
|
a.widget-link {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
@include ellipsis;
|
|
}
|
|
a.search-link {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
@include ellipsis;
|
|
}
|
|
.panel-body {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
span.badge-category {
|
|
max-width: 100px;
|
|
}
|
|
}
|
|
|
|
.menu-links.columned {
|
|
li {
|
|
width: 50%;
|
|
float: left;
|
|
}
|
|
}
|
|
|
|
.menu-panel {
|
|
// remove once glimmer search menu in place
|
|
.widget-link,
|
|
.categories-link {
|
|
padding: 0.25em 0.5em;
|
|
display: block;
|
|
color: var(--primary);
|
|
&:hover,
|
|
&:focus {
|
|
background-color: var(--d-hover);
|
|
outline: none;
|
|
}
|
|
|
|
.d-icon {
|
|
color: var(--primary-medium);
|
|
}
|
|
|
|
.new {
|
|
font-size: var(--font-down-1);
|
|
margin-left: 0.5em;
|
|
color: var(--primary-med-or-secondary-med);
|
|
}
|
|
|
|
&.show-help,
|
|
&.filter {
|
|
color: var(--tertiary);
|
|
}
|
|
}
|
|
|
|
.search-link,
|
|
.categories-link {
|
|
padding: 0.25em 0.5em;
|
|
display: block;
|
|
color: var(--primary);
|
|
&:hover,
|
|
&:focus {
|
|
background-color: var(--d-hover);
|
|
outline: none;
|
|
}
|
|
|
|
.d-icon {
|
|
color: var(--primary-medium);
|
|
}
|
|
|
|
.new {
|
|
font-size: var(--font-down-1);
|
|
margin-left: 0.5em;
|
|
color: var(--primary-med-or-secondary-med);
|
|
}
|
|
|
|
&.show-help,
|
|
&.filter {
|
|
color: var(--tertiary);
|
|
}
|
|
}
|
|
|
|
li.category-link {
|
|
float: left;
|
|
background-color: transparent;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.25em 0.5em;
|
|
width: 50%;
|
|
box-sizing: border-box;
|
|
a {
|
|
display: inline-flex;
|
|
&:hover,
|
|
&:focus {
|
|
background: transparent;
|
|
|
|
.category-name {
|
|
color: var(--primary);
|
|
}
|
|
}
|
|
}
|
|
.badge-notification {
|
|
color: var(--primary-med-or-secondary-med);
|
|
background-color: transparent;
|
|
display: inline;
|
|
padding: 0;
|
|
font-size: var(--font-down-1);
|
|
line-height: var(--line-height-large);
|
|
}
|
|
.badge-wrapper {
|
|
&.bar,
|
|
&.bullet {
|
|
color: var(--primary);
|
|
padding: 0 0 0 0.15em;
|
|
}
|
|
&.box {
|
|
color: var(--secondary);
|
|
+ a.badge.badge-notification {
|
|
padding-top: 2px;
|
|
}
|
|
span {
|
|
z-index: z("base") * -1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// note these topic counts only appear for anons in the category hamburger drop down
|
|
b.topics-count {
|
|
color: var(--primary-med-or-secondary-med);
|
|
font-weight: normal;
|
|
font-size: var(--font-down-1);
|
|
}
|
|
|
|
div.discourse-tags {
|
|
font-size: var(--font-down-1);
|
|
}
|
|
}
|
|
|
|
.user-menu {
|
|
.quick-access-panel {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
max-height: 100%;
|
|
border-top: 1px solid var(--primary-low);
|
|
padding-top: 0.75em;
|
|
margin-top: -1px;
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
h3 {
|
|
padding: 0 0.4em;
|
|
font-weight: bold;
|
|
margin: 0.5em 0;
|
|
}
|
|
|
|
.d-icon,
|
|
&:hover .d-icon {
|
|
color: var(--primary-medium);
|
|
}
|
|
.icon {
|
|
color: var(--primary-high);
|
|
}
|
|
|
|
.btn-primary {
|
|
.d-icon {
|
|
color: var(--secondary);
|
|
}
|
|
}
|
|
|
|
ul {
|
|
display: flex;
|
|
flex-flow: column wrap;
|
|
overflow: hidden;
|
|
max-height: 100%;
|
|
}
|
|
|
|
li {
|
|
background-color: var(--d-selected);
|
|
box-sizing: border-box;
|
|
list-style-type: none;
|
|
|
|
// This is until other languages remove the HTML from within
|
|
// notifications. It can then be removed
|
|
div .fa {
|
|
display: none;
|
|
}
|
|
|
|
span.double-user,
|
|
// e.g., "username, username2"
|
|
span.multi-user
|
|
// e.g., "username and n others"
|
|
{
|
|
display: inline;
|
|
max-width: 100%;
|
|
align-items: baseline;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
span.multi-user
|
|
// e.g., "username, username2, and n others"
|
|
{
|
|
span.multi-username:nth-of-type(2) {
|
|
// margin between username2 and "and n others"
|
|
margin-right: 0.25em;
|
|
}
|
|
}
|
|
|
|
// truncate when usernames are very long
|
|
span.multi-username {
|
|
@include ellipsis;
|
|
flex: 0 1 auto;
|
|
min-width: 1.2em;
|
|
max-width: 10em;
|
|
&:nth-of-type(2) {
|
|
// margin for comma between username and username2
|
|
margin-left: 0.25em;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var(--d-hover);
|
|
outline: none;
|
|
}
|
|
|
|
&:focus-within {
|
|
background: var(--d-hover);
|
|
a {
|
|
// we don't need the link focus because we're styling the parent
|
|
outline: 0;
|
|
}
|
|
.btn-flat:focus {
|
|
// undo default btn-flat style
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
a,
|
|
.profile-tab-btn {
|
|
display: flex;
|
|
margin: 0.25em;
|
|
padding: 0em 0.25em;
|
|
}
|
|
|
|
button {
|
|
padding: 0.25em 0.5em;
|
|
}
|
|
|
|
a,
|
|
button {
|
|
> div {
|
|
overflow: hidden; // clears the text from wrapping below icons
|
|
overflow-wrap: anywhere;
|
|
@supports not (overflow-wrap: anywhere) {
|
|
word-break: break-word;
|
|
}
|
|
|
|
// Truncate items with more than 2 lines.
|
|
@include line-clamp(2);
|
|
}
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
li:not(.show-all) {
|
|
padding: 0;
|
|
align-self: flex-start;
|
|
width: 100%;
|
|
.d-icon {
|
|
padding-top: 0.2em;
|
|
margin-right: 0.5em;
|
|
}
|
|
}
|
|
.is-warning {
|
|
.d-icon-envelope {
|
|
color: var(--danger);
|
|
}
|
|
}
|
|
.read {
|
|
background-color: var(--secondary);
|
|
}
|
|
.none {
|
|
padding-top: 5px;
|
|
}
|
|
.spinner-container {
|
|
min-height: 2em;
|
|
}
|
|
.spinner {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-width: 2px;
|
|
margin: 0 auto;
|
|
}
|
|
.show-all a {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 30px;
|
|
color: var(--primary-med-or-secondary-high);
|
|
background: var(--blend-primary-secondary-5);
|
|
&:hover {
|
|
color: var(--primary);
|
|
background: var(--primary-low);
|
|
}
|
|
}
|
|
/* as a big ol' click target, don't let text inside be selected */
|
|
@include unselectable;
|
|
}
|
|
}
|
|
|
|
.hamburger-panel .menu-panel.slide-in {
|
|
left: 0;
|
|
|
|
.panel-body {
|
|
display: block;
|
|
}
|
|
.panel-body-contents {
|
|
max-height: unset;
|
|
min-height: 100%;
|
|
}
|
|
}
|
|
.header-cloak {
|
|
height: 100%;
|
|
width: 100%;
|
|
position: fixed;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
top: var(--header-top);
|
|
left: 0;
|
|
display: none;
|
|
touch-action: pan-y pinch-zoom;
|
|
}
|
|
|
|
.menu-panel.slide-in {
|
|
top: var(--header-top);
|
|
box-sizing: border-box;
|
|
// ensure there's always space to click outside on tiny devices
|
|
max-width: 90vw;
|
|
|
|
--100dvh: 100%;
|
|
@supports (height: 100dvh) {
|
|
--100dvh: 100dvh;
|
|
}
|
|
box-shadow: 0px 0 30px -2px rgba(0, 0, 0, 0.5);
|
|
|
|
--base-height: calc(var(--100dvh) - var(--header-top));
|
|
|
|
height: var(--base-height);
|
|
|
|
body.footer-nav-ipad & {
|
|
height: calc(var(--base-height) - var(--footer-nav-height));
|
|
}
|
|
}
|