discourse/app/assets/stylesheets/common/base/about.scss
Osama Sayegh 10ae7ef44a
FEATURE: Add estimated number of global and EU visitors to the about page (#28382)
This commit implements 2 new metrics/stats in the /about page for the _estimated_ numbers of unique visitors from the EU and the rest of the world. This new feature is currently off by default, but it can be enabled by turning on the hidden `display_eu_visitor_stats` site settings via the rails console.

There are a number of assumptions that we're making here in order to estimate the number of unique visitors, specifically:

1. we're assuming that the average of page views per anonymous visitor is similar to the average number of page views that a logged-in visitor makes, and
2. we're assuming that the ratio of logged in visitors from the EU is similar to the ratio of anonymous visitors from the EU

Discourse keeps track of the number of both logged-in and anonymous page views, and also the number of unique logged-in visitors and where they're from. So with those numbers and the assumptions above, we can estimate the number of unique anonymous visitors from the EU and the rest of the world.

Internal topic: t/128480.
2024-08-21 00:03:42 +03:00

122 lines
1.8 KiB
SCSS

.about {
&__main-content {
display: flex;
flex-wrap: wrap;
gap: 2em;
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 breakpoint(tablet) {
flex-direction: column;
}
.d-icon {
margin-right: 3px;
}
}
&__stats-item {
flex: 1 0 fit-content;
@include breakpoint(tablet) {
margin-bottom: 1em;
&:last-child {
margin-bottom: 0;
}
}
}
&__banner {
margin-bottom: 1em;
min-height: 300px;
max-height: 300px;
}
&__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%;
}
}
section.about {
margin-bottom: 3em;
.users {
display: grid;
gap: 1em;
grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
}
h3 {
margin-bottom: 1em;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 0.35em;
.d-icon {
color: var(--primary-high);
}
.badge-category__wrapper {
font-size: var(--font-0);
align-self: baseline;
}
}
&.stats {
table {
td {
padding: 0.67em;
&:not(:first-child) {
text-align: center;
}
}
}
.stats-table-footer {
max-width: 30em;
}
}
}