mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2026-02-03 20:51:07 -05:00
2b4754c1d7
Some checks are pending
Integration tests for the release process / release-simulation (push) Waiting to run
/ release (push) Waiting to run
testing-integration / test-unit (push) Waiting to run
testing-integration / test-sqlite (push) Waiting to run
testing-integration / test-mariadb (v10.6) (push) Waiting to run
testing-integration / test-mariadb (v11.8) (push) Waiting to run
testing / backend-checks (push) Waiting to run
testing / frontend-checks (push) Waiting to run
testing / test-unit (push) Blocked by required conditions
testing / test-e2e (push) Blocked by required conditions
testing / test-remote-cacher (redis) (push) Blocked by required conditions
testing / test-remote-cacher (valkey) (push) Blocked by required conditions
testing / test-remote-cacher (garnet) (push) Blocked by required conditions
testing / test-remote-cacher (redict) (push) Blocked by required conditions
testing / test-mysql (push) Blocked by required conditions
testing / test-pgsql (push) Blocked by required conditions
testing / test-sqlite (push) Blocked by required conditions
testing / security-check (push) Blocked by required conditions
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;
|
|
}
|
|
}
|