mirror of
https://codeberg.org/forgejo/forgejo
synced 2025-10-19 13:00:51 +02:00
abd69183ea
Followup to https://codeberg.org/forgejo/forgejo/pulls/6700 & https://codeberg.org/forgejo/forgejo/pulls/9429 ## Testing Test coverage is already present in `tests/e2e/repo-home.test.e2e.ts` - there are no changes in behavior, so just selectors were updated. ## Changes * Re-make stats using details+summary: it now works without JS, works immediately after page is displayed, responds to clicking more quickly * Make the clickable bar taller on coarse screens * Fix broken overflowing on narrow screens Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9532 Reviewed-by: Otto <otto@codeberg.org> Co-authored-by: 0ko <0ko@noreply.codeberg.org> Co-committed-by: 0ko <0ko@noreply.codeberg.org>
130 lines
2.5 KiB
CSS
130 lines
2.5 KiB
CSS
/* Copyright 2025 The Forgejo Authors. All rights reserved.
|
|
* SPDX-License-Identifier: GPL-3.0-or-later */
|
|
|
|
:root stats-bar {
|
|
--stats-bar-height: 0.75rem;
|
|
}
|
|
|
|
@media (pointer: coarse) {
|
|
:root stats-bar {
|
|
--stats-bar-height: 1rem;
|
|
}
|
|
}
|
|
|
|
/* General properties, can be reused by different kinds of stats bars */
|
|
stats-bar {
|
|
display: flex !important;
|
|
height: var(--stats-bar-height);
|
|
width: 100%;
|
|
border-radius: var(--border-radius);
|
|
|
|
.slice {
|
|
display: inline-block;
|
|
|
|
&:first-child {
|
|
border-radius: var(--border-radius) 0 0 var(--border-radius);
|
|
}
|
|
&:last-child {
|
|
border-radius: 0 var(--border-radius) var(--border-radius) 0;
|
|
}
|
|
&:only-child {
|
|
border-radius: var(--border-radius);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Properties for stats bars with legend included via <details> */
|
|
details.stats {
|
|
/* Summary and legend should be stacked vertically */
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
/* Prevent opener marker from showing up */
|
|
summary {
|
|
display: flex;
|
|
}
|
|
|
|
/* Cancel unwanted <ul> properties of legend */
|
|
ul {
|
|
display: flex;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
/* Properties specific to the UI in storage overview */
|
|
.size-overview .stats {
|
|
border-radius: var(--border-radius);
|
|
|
|
&:hover,
|
|
&[open] {
|
|
background-color: var(--color-box-body-highlight);
|
|
stats-bar {
|
|
background-color: var(--color-secondary-dark-3);
|
|
}
|
|
}
|
|
|
|
&[open] {
|
|
gap: 0.25rem;
|
|
background-color: var(--color-box-body-highlight);
|
|
}
|
|
|
|
summary {
|
|
flex-direction: column;
|
|
padding: 0.75rem;
|
|
gap: 1rem;
|
|
|
|
stats-bar {
|
|
/* Same as default background of `progress` */
|
|
background-color: var(--color-secondary-dark-1);
|
|
}
|
|
}
|
|
|
|
ul {
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
padding: 0.75rem;
|
|
padding-top: 0;
|
|
|
|
li {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Properties specific to the lang stats in repo overview */
|
|
#language-stats {
|
|
stats-bar {
|
|
gap: 2px;
|
|
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
|
overflow: hidden;
|
|
.slice {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
&[open] stats-bar {
|
|
border-radius: 0;
|
|
}
|
|
|
|
ul {
|
|
min-height: 2rem;
|
|
padding: 0 0.5rem;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around;
|
|
gap: 0 1rem;
|
|
|
|
li {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.25rem 0;
|
|
gap: 0.25em;
|
|
|
|
span {
|
|
font-weight: var(--font-weight-semibold);
|
|
text-wrap: nowrap;
|
|
}
|
|
}
|
|
}
|
|
}
|