Skip to content

Commit 6169ac2

Browse files
awesomerobotawesomerobot
authored
UX: make the notification panel consistent with new search panel styles (#32753)
This eliminates menu panel container padding, which gets us a closer match to the recent search panel adjustments. I've also eliminated the menu-panel box-shadow variant — if we're not going to use it on the search panel we should consolidate and eliminate the variance. Before: ![image](https://github.com/user-attachments/assets/07122788-61a4-4767-a697-47cc3118d84e) After: ![image](https://github.com/user-attachments/assets/a6f66c6f-37cd-4144-930d-d05546bba801)
1 parent 9e17b0b commit 6169ac2

File tree

8 files changed

+46
-51
lines changed

8 files changed

+46
-51
lines changed

‎app/assets/stylesheets/color_definitions.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,9 +126,9 @@
126126
--bronze: #{$bronze};
127127
--shadow-modal: 0 8px 60px rgba(0, 0, 0, #{$shadow-opacity-modal});
128128
--shadow-composer: 0 -1px 40px rgba(0, 0, 0, #{$shadow-opacity-composer});
129-
--shadow-menu-panel: 0 8px 12px rgba(0, 0, 0, #{$shadow-opacity-menu-panel});
130129
--shadow-card: 0 4px 14px rgba(0, 0, 0, #{$shadow-opacity-card});
131130
--shadow-dropdown: 0 2px 12px 0 rgba(0, 0, 0, #{$shadow-opacity-dropdown});
131+
--shadow-menu-panel: var(--shadow-dropdown);
132132
--shadow-header: 0 0 0 1px var(--primary-low);
133133
--shadow-footer-nav: 0 0 2px 0 rgba(0, 0, 0, #{$shadow-opacity-footer-nav});
134134
--shadow-focus-danger: 0 0 6px 0 var(--danger);

‎app/assets/stylesheets/common/base/menu-panel.scss

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@
3838
}
3939

4040
.menu-panel {
41-
border: 1px solid var(--primary-low);
42-
box-shadow: var(--shadow-menu-panel);
41+
--list-item-padding: 0.5em 1rem;
42+
box-shadow: var(--shadow-dropdown);
4343
background-color: var(--secondary);
4444
z-index: z("header");
4545
padding: 0.5em;
@@ -169,7 +169,8 @@
169169
}
170170

171171
hr {
172-
margin: 3px 0;
172+
margin: 0;
173+
height: auto;
173174
}
174175

175176
.panel-header {
@@ -199,9 +200,9 @@
199200

200201
.panel-body-bottom {
201202
display: flex;
202-
flex: 1 0 0%; // safari height fix
203-
margin-top: 0.5em;
203+
flex: 1 0 0;
204204
flex-wrap: wrap;
205+
padding: 0.75em 0.75em max(env(safe-area-inset-bottom), 0.75em);
205206

206207
.show-all {
207208
display: flex;
@@ -242,6 +243,7 @@
242243
}
243244

244245
.user-menu.revamped {
246+
--user-menu-border-width: 1px;
245247
right: 0;
246248
width: 320px;
247249
padding: 0;
@@ -254,10 +256,10 @@
254256
.menu-tabs-container {
255257
display: flex;
256258
flex-direction: column;
257-
border-left: 1px solid var(--primary-low);
258-
padding: 0.75em 0 0;
259+
padding: 0;
259260
overflow-y: auto;
260261
overscroll-behavior: contain;
262+
margin-inline: calc(var(--user-menu-border-width) * -1);
261263
}
262264

263265
.tabs-list {
@@ -268,7 +270,7 @@
268270
display: flex;
269271
position: relative;
270272
border-radius: 0;
271-
padding: 0.857em;
273+
padding: 0.875em 1em 0.875em 0.875em;
272274

273275
@media screen and (height <= 400px) {
274276
// helps with 400% zoom level
@@ -298,14 +300,18 @@
298300
background-color: var(--d-selected);
299301
}
300302

301-
&:hover {
302-
background-color: var(--d-hover);
303+
.discourse-no-touch & {
304+
&:hover {
305+
background-color: var(--d-hover);
306+
border-left: var(--user-menu-border-width) solid var(--primary-low);
307+
padding-left: calc(0.875em - var(--user-menu-border-width));
308+
}
303309
}
304310
}
305311
}
306312

307313
.bottom-tabs {
308-
border-top: 1px solid var(--primary-low);
314+
border-top: var(--user-menu-border-width) solid var(--primary-low);
309315
}
310316

311317
.panel-body-contents {
@@ -315,16 +321,14 @@
315321

316322
.quick-access-panel {
317323
width: 320px;
318-
padding: 0.75em;
319-
padding-bottom: max(env(safe-area-inset-bottom), 0.75em);
320324
justify-content: space-between;
321325
box-sizing: border-box;
326+
border-right: var(--user-menu-border-width) solid var(--primary-low);
322327
min-width: 0; // makes sure menu tabs don't go off screen
323328
}
324329

325330
#quick-access-profile {
326331
display: inline;
327-
max-height: 99%; // macOS Chrome sometimes adds an unneeded scrollbar at 100%
328332

329333
ul {
330334
flex-wrap: nowrap;
@@ -335,14 +339,16 @@
335339

336340
li {
337341
flex: 1 1 auto;
338-
max-height: 3em; // prevent buttons from getting too tall
342+
display: flex;
343+
flex-direction: column;
344+
max-height: 3.25em;
339345

340346
> * {
341347
// button, a, and everything else
342-
height: 100%;
343348
align-items: center;
344349
margin: 0;
345-
padding: 0 0.5em;
350+
padding: var(--list-item-padding);
351+
flex: 1 1 auto;
346352
}
347353

348354
img.emoji {
@@ -389,7 +395,7 @@
389395
}
390396

391397
hr {
392-
border-top: 1px solid var(--primary-low);
398+
border-top: var(--user-menu-border-width) solid var(--primary-low);
393399
width: 100%;
394400
}
395401
}
@@ -416,9 +422,6 @@
416422
flex-direction: column;
417423
min-height: 0;
418424
max-height: 100%;
419-
border-top: 1px solid var(--primary-low);
420-
padding-top: 0.75em;
421-
margin-top: -1px;
422425

423426
/* as a big ol' click target, don't let text inside be selected */
424427
@include unselectable;
@@ -534,15 +537,9 @@
534537
}
535538
}
536539

537-
a,
538-
.profile-tab-btn {
540+
a {
539541
display: flex;
540-
margin: 0.25em;
541-
padding: 0 0.25em;
542-
}
543-
544-
button {
545-
padding: 0.25em 0.5em;
542+
padding: var(--list-item-padding);
546543
}
547544

548545
a,
@@ -624,7 +621,6 @@
624621
a {
625622
color: var(--primary);
626623
align-items: center;
627-
padding: 0.15em 0;
628624

629625
.item-label {
630626
font-weight: bold;
@@ -675,11 +671,15 @@
675671
}
676672
}
677673

678-
&.unread .icon-avatar__icon-wrapper {
679-
background: var(--tertiary);
674+
&.unread,
675+
&.pending {
676+
.icon-avatar__icon-wrapper {
677+
background: var(--tertiary);
678+
font-size: var(--font-down-1);
680679

681-
.d-icon {
682-
color: var(--secondary);
680+
.d-icon {
681+
color: var(--secondary);
682+
}
683683
}
684684
}
685685
}

‎app/assets/stylesheets/common/base/search-menu.scss

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,9 @@
1111
border-top: 1px solid var(--primary-low);
1212
}
1313

14-
$search-pad-vertical: 0.25em;
15-
$search-pad-horizontal: 0.5em;
16-
$search-result-element-padding: 0.35em 1rem; // hate myself but .25em is too tight and .5 too loose
17-
1814
.search-menu.glimmer-search-menu {
15+
--search-result-element-padding: 0.5em 1rem;
16+
1917
.search-input-wrapper {
2018
@include viewport.until(sm) {
2119
position: fixed;
@@ -42,7 +40,7 @@ $search-result-element-padding: 0.35em 1rem; // hate myself but .25em is too tig
4240

4341
.search-menu-panel & {
4442
@include viewport.from(sm) {
45-
padding: $search-result-element-padding;
43+
padding: 0.75em 1rem 0.5em;
4644
}
4745
}
4846
}
@@ -86,8 +84,6 @@ $search-result-element-padding: 0.35em 1rem; // hate myself but .25em is too tig
8684
}
8785

8886
.menu-panel {
89-
border: 0;
90-
box-shadow: var(--shadow-dropdown);
9187
padding: 0; // overrule generic menu panels to achieve full width hover effect
9288

9389
@include viewport.from(sm) {
@@ -138,7 +134,6 @@ $search-result-element-padding: 0.35em 1rem; // hate myself but .25em is too tig
138134
.results {
139135
display: flex;
140136
flex-direction: column;
141-
padding-top: $search-pad-vertical;
142137
border-radius: var(--d-border-radius);
143138

144139
.heading {
@@ -169,7 +164,7 @@ $search-result-element-padding: 0.35em 1rem; // hate myself but .25em is too tig
169164
}
170165

171166
.search-link {
172-
padding: $search-result-element-padding;
167+
padding: var(--search-result-element-padding);
173168

174169
&.category,
175170
&.user,
@@ -420,7 +415,7 @@ $search-result-element-padding: 0.35em 1rem; // hate myself but .25em is too tig
420415
}
421416

422417
.search-random-quick-tip {
423-
padding: max(0.5rem, 0.5em) 1rem;
418+
padding: 0 1rem max(0.75rem, 0.75em);
424419
font-size: var(--font-down-2);
425420
color: var(--primary-medium);
426421

@@ -464,5 +459,5 @@ $search-result-element-padding: 0.35em 1rem; // hate myself but .25em is too tig
464459
}
465460

466461
.no-results {
467-
padding: $search-result-element-padding;
462+
padding: var(--search-result-element-padding);
468463
}

‎app/assets/stylesheets/common/float-kit/d-menu.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
border-radius: var(--d-border-radius);
4444
background-color: var(--secondary);
4545
border: 1px solid var(--primary-low);
46-
box-shadow: var(--shadow-menu-panel);
46+
box-shadow: var(--shadow-dropdown);
4747
overscroll-behavior: contain;
4848
overflow: auto;
4949
}

‎app/assets/stylesheets/common/float-kit/d-toasts.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
overflow: hidden;
2828
background-color: var(--secondary);
2929
border: 1px solid var(--primary-low);
30-
box-shadow: var(--shadow-menu-panel);
30+
box-shadow: var(--shadow-dropdown);
3131
overflow-wrap: break-word;
3232
display: flex;
3333
animation: d-toast-opening 0.3s ease-in-out;

‎app/assets/stylesheets/common/float-kit/d-tooltip.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
background-color: var(--secondary);
3535
border-radius: var(--d-border-radius);
3636
border: 1px solid var(--primary-low);
37-
box-shadow: var(--shadow-menu-panel);
37+
box-shadow: var(--shadow-dropdown);
3838
z-index: z("max");
3939
width: max-content;
4040
position: absolute;

‎app/assets/stylesheets/mobile/post-action-feedback.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
overflow: hidden;
2323
background-color: var(--tertiary-very-low);
2424
border: 1px solid var(--primary-low);
25-
box-shadow: var(--shadow-menu-panel);
25+
box-shadow: var(--shadow-dropdown);
2626
overflow-wrap: break-word;
2727
animation: d-toast-opening 0.3s ease-in-out;
2828
will-change: transform;

‎app/assets/stylesheets/qunit-custom.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -272,9 +272,9 @@ body {
272272
--bronze: #cd7f32;
273273
--shadow-modal: 0 8px 60px rgba(0, 0, 0, 1);
274274
--shadow-composer: 0 -1px 40px rgba(0, 0, 0, 0.35);
275-
--shadow-menu-panel: 0 8px 12px rgba(0, 0, 0, 0.35);
276275
--shadow-card: 0 4px 14px rgba(0, 0, 0, 0.5);
277276
--shadow-dropdown: 0 2px 12px 0 rgba(0, 0, 0, 0.25);
277+
--shadow-menu-panel: var(--shadow-dropdown);
278278
--shadow-header: 0 2px 4px -1px rgba(0, 0, 0, 0.45);
279279
--shadow-footer-nav: 0 0 2px 0 rgba(0, 0, 0, 0.4);
280280
--shadow-focus-danger: 0 0 6px 0 var(--danger);

0 commit comments

Comments
 (0)