mirror of
https://codeberg.org/forgejo/forgejo
synced 2025-10-19 13:00:51 +02:00
2b4754c1d7
This PR replaces the sort dropdowns on Users and Organizations pages of Explore with the one we've got earlier in two other areas. Previous such replacement happened in #8572. This implies a few positive changes such as: * larger font size * larger clickable area for coarse cursor * it is possible to use while scripts are still loading * it is possible to use w/o JS Some refactors were made to support this change and as general improvements. Desktop, closed B: https://codeberg.org/attachments/354f7194-b247-4ecd-8875-2e95dadc7445 A: https://codeberg.org/attachments/0fa49cf5-e8e5-4c15-b2b0-7d13e8505945 Desktop, open B: https://codeberg.org/attachments/b01b75d1-dbe4-458c-abd5-64cd8c121bc1 A: https://codeberg.org/attachments/94baccc4-fe36-4ae1-ace0-9b4d5fbd9f42 Mobile, open B: https://codeberg.org/attachments/f868720a-ec71-4829-87f7-a1cfab860e37 A: https://codeberg.org/attachments/bbe72710-6824-4107-8086-d2bd50897038 Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9556 Reviewed-by: Michael Kriese <michael.kriese@gmx.de>
138 lines
3.4 KiB
CSS
138 lines
3.4 KiB
CSS
/* Copyright 2025 The Forgejo Authors. All rights reserved.
|
|
* SPDX-License-Identifier: GPL-3.0-or-later */
|
|
|
|
/* This is an implementation of a dropdown menu based on details HTML tag.
|
|
* It is inspired by https://picocss.com/docs/dropdown.
|
|
*
|
|
* NoJS mode could be improved by forcing the same [name] onto all dropdowns, so
|
|
* that the browser will automatically close all but the one that was just opened
|
|
* using keyboard. But the code doing that will not be as clean.
|
|
*/
|
|
|
|
:root details.dropdown {
|
|
--dropdown-box-shadow: 0 6px 18px var(--color-shadow);
|
|
--dropdown-item-padding: 0.5rem 0.75rem;
|
|
}
|
|
|
|
@media (pointer: coarse) {
|
|
:root details.dropdown {
|
|
--dropdown-item-padding: 0.75rem 1rem;
|
|
}
|
|
}
|
|
|
|
details.dropdown {
|
|
position: relative;
|
|
}
|
|
|
|
details.dropdown > summary {
|
|
/* Optional flex+gap in case summary contains multiple elements */
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
/* Main visual properties */
|
|
border-radius: var(--border-radius);
|
|
padding: 0.5rem;
|
|
/* Unset unwanted default properties */
|
|
user-select: none;
|
|
list-style-type: none;
|
|
|
|
&.border {
|
|
border: 1px solid var(--color-light-border);
|
|
}
|
|
&.options {
|
|
padding-inline: 0.75rem;
|
|
}
|
|
}
|
|
|
|
details.dropdown > summary:hover,
|
|
details.dropdown > summary + ul > li:hover {
|
|
background: var(--color-hover);
|
|
}
|
|
|
|
details.dropdown[open] > summary,
|
|
details.dropdown > summary + ul > li:focus-within {
|
|
background: var(--color-active);
|
|
}
|
|
|
|
/* NoJS mode. Creates a virtual fullscreen area. Clicking it closes the dropdown. */
|
|
.no-js details.dropdown[open] > summary::before {
|
|
z-index: 1;
|
|
position: fixed;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
inset: 0;
|
|
background: 0 0;
|
|
content: "";
|
|
cursor: default;
|
|
}
|
|
|
|
details.dropdown > summary + ul {
|
|
z-index: 99;
|
|
position: absolute;
|
|
min-width: max-content;
|
|
margin: 0;
|
|
margin-top: 0.5rem;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
list-style-type: none;
|
|
border-radius: var(--border-radius);
|
|
background: var(--color-body);
|
|
box-shadow: var(--dropdown-box-shadow);
|
|
border: 1px solid var(--color-secondary);
|
|
}
|
|
|
|
details.dropdown > summary + ul > li {
|
|
width: 100%;
|
|
background: none;
|
|
|
|
> :is(a, button) {
|
|
padding: var(--dropdown-item-padding);
|
|
width: 100%;
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
align-items: center;
|
|
color: var(--color-text);
|
|
/* Suppress underline - hover is indicated by background color */
|
|
text-decoration: none;
|
|
|
|
&.active {
|
|
background: var(--color-active);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
}
|
|
/* Cancel default styling of button elements */
|
|
> button {
|
|
background: none;
|
|
}
|
|
|
|
&:first-child {
|
|
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
|
}
|
|
&:last-child {
|
|
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
|
}
|
|
}
|
|
|
|
/* dir-auto option - switch the direction at a width point where most of layout changes occur. */
|
|
/* There's no way to check with CSS if LTR dropdown will fit on screen without JS. */
|
|
@media (max-width: 767.98px) {
|
|
details.dropdown.dir-auto > summary + ul {
|
|
inset-inline: 0 auto;
|
|
direction: rtl;
|
|
> li {
|
|
direction: ltr;
|
|
}
|
|
}
|
|
}
|
|
/* Note: https://css-tricks.com/css-anchor-positioning-guide/
|
|
* looks like a great thing but FF still doesn't support it. */
|
|
|
|
details.dropdown.dir-rtl > summary + ul {
|
|
inset-inline: 0 auto;
|
|
direction: rtl;
|
|
> li {
|
|
direction: ltr;
|
|
}
|
|
}
|