mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-05-26 15:54:34 +08:00
a445e8cce5
We want to merge the theme component that allows admins to display extra groups on the about page. The settings for this are now under About your site. All the code is lift-and-shift, with some minor adjustments, e.g. theme components can't use the group_list setting type, but it has been converted to that here. Also the system tests for the admin controls are new. This whole thing is gated behind a hidden site setting to avoid double rendering while we deprecate the theme component.
130 lines
2.2 KiB
SCSS
Vendored
130 lines
2.2 KiB
SCSS
Vendored
@use "lib/viewport";
|
|
|
|
.about {
|
|
&__main-content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 2em;
|
|
max-width: 1100px;
|
|
|
|
.--custom-group {
|
|
max-width: unset;
|
|
margin-top: 3em;
|
|
|
|
h3 {
|
|
a {
|
|
color: var(--primary);
|
|
|
|
&:hover {
|
|
color: var(--tertiary);
|
|
}
|
|
}
|
|
|
|
&::first-letter {
|
|
text-transform: capitalize;
|
|
}
|
|
}
|
|
|
|
p {
|
|
margin-top: 0;
|
|
color: var(--primary-high);
|
|
}
|
|
|
|
&.--has-description {
|
|
h3 {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__header {
|
|
max-width: 1100px;
|
|
}
|
|
|
|
&__left-side {
|
|
flex: 1 1 650px;
|
|
}
|
|
|
|
&__right-side {
|
|
flex: 1 2 200px;
|
|
}
|
|
|
|
&__stats {
|
|
display: flex;
|
|
border-top: 1px solid var(--primary-low);
|
|
border-bottom: 1px solid var(--primary-low);
|
|
padding: 1em 1em;
|
|
margin-bottom: 1em;
|
|
|
|
@include viewport.until(md) {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.d-icon {
|
|
margin-right: 3px;
|
|
}
|
|
}
|
|
|
|
&__stats-item {
|
|
flex: 1 0 fit-content;
|
|
|
|
@include viewport.until(md) {
|
|
margin-bottom: 1em;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__banner {
|
|
margin-bottom: 1em;
|
|
width: 100%;
|
|
height: auto; // Let the height scale with the width
|
|
position: relative; // Ensure the container can handle absolute positioning for the image
|
|
padding-top: 27.27%; // Maintain the aspect ratio (300px/1100px * 100)
|
|
|
|
&-img {
|
|
position: absolute; // Allow to fill the full space
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover; // Ensures the image fills the container while preserving aspect ratio
|
|
}
|
|
}
|
|
|
|
&__activities-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 1.5em;
|
|
}
|
|
|
|
&__activities-item-icon {
|
|
margin-right: 1em;
|
|
}
|
|
|
|
&__activities-item-period {
|
|
font-size: var(--font-down-2);
|
|
}
|
|
|
|
&__admins,
|
|
&__moderators {
|
|
margin-top: 3em;
|
|
|
|
h3 {
|
|
margin-bottom: 1em;
|
|
}
|
|
}
|
|
}
|
|
|
|
.about-page-users-list {
|
|
display: grid;
|
|
gap: 1em;
|
|
grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
|
|
|
|
&__expand-button {
|
|
width: 100%;
|
|
}
|
|
}
|
