Skip to content
Extraits de code Groupes Projets
Valider a40167cf rédigé par Lynx Kotoura's avatar Lynx Kotoura Validation de Eugen Rochko
Parcourir les fichiers

Better grid layout for the landing page (#6543) 

* Use grid layout for the landing page

* Fix column settings

Set the ratio explicitly

* Improve information board
parent 18513a97
Aucune branche associée trouvée
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
Masquer les modifications d'espaces
En ligne Côte à côte
app/javascript/styles/mastodon/about.scss
+ 161
− 88
Voir le fichier @ a40167cf
......@@ -15,117 +15,172 @@ $small-breakpoint: 960px;
}
}
.show-xs,
.show-sm {
display: none;
}
.show-m {
display: block;
}
@media screen and (max-width: $small-breakpoint) {
.hide-sm {
display: none !important;
}
.landing-page {
.grid {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 2fr;
grid-auto-columns: 25%;
grid-auto-rows: max-content;
.column-0 {
display: none;
}
.show-sm {
display: block !important;
}
}
.column-1 {
grid-column: 1;
grid-row: 1;
}
@media screen and (max-width: $column-breakpoint) {
.hide-xs {
display: none !important;
}
.column-2 {
grid-column: 2;
grid-row: 1;
}
.column-3 {
grid-column: 3;
grid-row: 1 / 3;
}
.show-xs {
display: block !important;
.column-4 {
grid-column: 1 / 3;
grid-row: 2;
}
}
}
.row {
display: flex;
flex-wrap: wrap;
margin: 0 -5px;
@media screen and (max-width: $small-breakpoint) {
@for $i from 1 through 15 {
.column-#{$i} {
box-sizing: border-box;
min-height: 1px;
flex: 0 0 percentage($i / 15);
max-width: percentage($i / 15);
padding: 0 5px;
.grid {
grid-template-columns: 40% 60%;
@media screen and (max-width: $small-breakpoint) {
&-sm {
box-sizing: border-box;
min-height: 1px;
flex: 0 0 percentage($i / 15);
max-width: percentage($i / 15);
padding: 0 5px;
.column-0 {
display: none;
}
@media screen and (max-width: $column-breakpoint) {
max-width: 100%;
flex: 0 0 100%;
margin-bottom: 10px;
.column-1 {
grid-column: 1;
grid-row: 1;
&:last-child {
margin-bottom: 0;
}
}
&.non-preview .landing-page__forms {
height: 100%;
}
}
@media screen and (max-width: $column-breakpoint) {
max-width: 100%;
flex: 0 0 100%;
margin-bottom: 10px;
.column-2 {
grid-column: 2;
grid-row: 1 / 3;
&:last-child {
margin-bottom: 0;
&.non-preview {
grid-column: 2;
grid-row: 1;
}
}
.column-3 {
grid-column: 1;
grid-row: 2 / 4;
}
.column-4 {
grid-column: 2;
grid-row: 3;
&.non-preview {
grid-column: 1 / 3;
grid-row: 2;
}
}
}
}
}
.column-flex {
display: flex;
flex-direction: column;
}
@media screen and (max-width: $column-breakpoint) {
.grid {
grid-template-columns: auto;
.separator-or {
position: relative;
margin: 40px 0;
text-align: center;
.column-0 {
display: block;
grid-column: 1;
grid-row: 1;
}
&::before {
content: "";
display: block;
width: 100%;
height: 0;
border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
position: absolute;
top: 50%;
left: 0;
.column-1 {
grid-column: 1;
grid-row: 3;
.brand {
display: none;
}
}
.column-2 {
grid-column: 1;
grid-row: 2;
.landing-page__logo,
.landing-page__call-to-action {
display: none;
}
&.non-preview {
grid-column: 1;
grid-row: 2;
}
}
.column-3 {
grid-column: 1;
grid-row: 5;
}
.column-4 {
grid-column: 1;
grid-row: 4;
&.non-preview {
grid-column: 1;
grid-row: 4;
}
}
}
}
span {
display: inline-block;
background: $ui-base-color;
font-size: 12px;
font-weight: 500;
color: $ui-primary-color;
text-transform: uppercase;
.column-flex {
display: flex;
flex-direction: column;
}
.separator-or {
position: relative;
z-index: 1;
padding: 0 8px;
cursor: default;
margin: 40px 0;
text-align: center;
&::before {
content: "";
display: block;
width: 100%;
height: 0;
border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
position: absolute;
top: 50%;
left: 0;
}
span {
display: inline-block;
background: $ui-base-color;
font-size: 12px;
font-weight: 500;
color: $ui-primary-color;
text-transform: uppercase;
position: relative;
z-index: 1;
padding: 0 8px;
cursor: default;
}
}
}
.landing-page {
p,
li {
font-family: 'mastodon-font-sans-serif', sans-serif;
......@@ -539,6 +594,7 @@ $small-breakpoint: 960px;
img {
position: static;
padding: 10px 0;
}
@media screen and (max-width: $small-breakpoint) {
......@@ -558,18 +614,33 @@ $small-breakpoint: 960px;
}
&__call-to-action {
margin-bottom: 10px;
background: darken($ui-base-color, 4%);
border-radius: 4px;
padding: 25px 40px;
overflow: hidden;
.row {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.information-board__section {
padding: 0;
.row__information-board {
display: flex;
justify-content: flex-end;
align-items: flex-end;
.information-board__section {
flex: 1 0 80px;
padding: 0 5px;
}
}
.row__mascot {
flex: 1;
margin: 10px -50px 0 0;
}
}
......@@ -619,6 +690,8 @@ $small-breakpoint: 960px;
&__short-description {
.row {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 40px;
}
......@@ -668,7 +741,6 @@ $small-breakpoint: 960px;
height: 100%;
@media screen and (max-width: $small-breakpoint) {
margin-bottom: 10px;
height: auto;
}
......@@ -717,6 +789,7 @@ $small-breakpoint: 960px;
width: 100%;
flex: 1 1 auto;
overflow: hidden;
height: 100%;
.column-header {
color: inherit;
......
app/views/about/show.html.haml
+ 101
− 47
Voir le fichier @ a40167cf
......@@ -8,51 +8,100 @@
.landing-page.alternative
.container
.row
.column-4.hide-sm.show-xs.show-m
.landing-page__forms
.brand
= link_to root_url do
= image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
.hide-xs
.grid
.column-0
.brand
= link_to root_url do
= image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
- if Setting.timeline_preview
.column-1
.landing-page__forms
.brand
= link_to root_url do
= image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
= render 'forms'
.column-7.column-9-sm
.landing-page__hero
= image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('preview.jpg'), alt: @instance_presenter.site_title
- else
.column-1.non-preview
.landing-page__forms
.brand
= link_to root_url do
= image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
.landing-page__information
.landing-page__short-description
= render 'forms'
- if Setting.timeline_preview
.column-2
.landing-page__hero
= image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('preview.jpg'), alt: @instance_presenter.site_title
.landing-page__information
.landing-page__short-description
.row
.landing-page__logo
= image_tag asset_pack_path('logo_transparent.svg'), alt: 'Mastodon'
%h1
= @instance_presenter.site_title
%small!= t 'about.hosted_on', domain: content_tag(:span, site_hostname)
%p= @instance_presenter.site_description.html_safe.presence || t('about.generic_description', domain: site_hostname)
.landing-page__call-to-action
.row
.landing-page__logo.hide-xs
= image_tag asset_pack_path('logo_transparent.svg'), alt: 'Mastodon'
.row__information-board
.information-board__section
%span= t 'about.user_count_before'
%strong= number_with_delimiter @instance_presenter.user_count
%span= t 'about.user_count_after'
.information-board__section
%span= t 'about.status_count_before'
%strong= number_with_delimiter @instance_presenter.status_count
%span= t 'about.status_count_after'
.row__mascot
.landing-page__mascot
= image_tag asset_pack_path('elephant_ui_plane.svg')
%h1
= @instance_presenter.site_title
%small!= t 'about.hosted_on', domain: content_tag(:span, site_hostname)
- else
.column-2.non-preview
.landing-page__hero
= image_tag @instance_presenter.hero&.file&.url || @instance_presenter.thumbnail&.file&.url || asset_pack_path('preview.jpg'), alt: @instance_presenter.site_title
%p= @instance_presenter.site_description.html_safe.presence || t('about.generic_description', domain: site_hostname)
.landing-page__information
.landing-page__short-description
.row
.landing-page__logo
= image_tag asset_pack_path('logo_transparent.svg'), alt: 'Mastodon'
.show-xs
.landing-page__forms
= render 'forms'
.landing-page__call-to-action.hide-xs
.row
.column-5
.landing-page__mascot
= image_tag asset_pack_path('elephant_ui_plane.svg')
.column-5
.information-board__section
%span= t 'about.user_count_before'
%strong= number_with_delimiter @instance_presenter.user_count
%span= t 'about.user_count_after'
.column-5
.information-board__section
%span= t 'about.status_count_before'
%strong= number_with_delimiter @instance_presenter.status_count
%span= t 'about.status_count_after'
.landing-page__information
%h1
= @instance_presenter.site_title
%small!= t 'about.hosted_on', domain: content_tag(:span, site_hostname)
%p= @instance_presenter.site_description.html_safe.presence || t('about.generic_description', domain: site_hostname)
.landing-page__call-to-action
.row
.row__information-board
.information-board__section
%span= t 'about.user_count_before'
%strong= number_with_delimiter @instance_presenter.user_count
%span= t 'about.user_count_after'
.information-board__section
%span= t 'about.status_count_before'
%strong= number_with_delimiter @instance_presenter.status_count
%span= t 'about.status_count_after'
.row__mascot
.landing-page__mascot
= image_tag asset_pack_path('elephant_ui_plane.svg')
- if Setting.timeline_preview
.column-3
#mastodon-timeline{ data: { props: Oj.dump(default_props) } }
- if Setting.timeline_preview
.column-4.landing-page__information
.landing-page__features
%h3= t 'about.what_is_mastodon'
%p= t 'about.about_mastodon_html'
......@@ -67,13 +116,18 @@
= link_to t('about.source_code'), @instance_presenter.source_url
= " (#{@instance_presenter.version_number})"
.column-4.column-6-sm.column-flex
.show-sm.hide-xs
.landing-page__forms
.brand
= link_to root_url do
= image_tag asset_pack_path('logo_full.svg'), alt: 'Mastodon'
- else
.column-4.non-preview.landing-page__information
.landing-page__features
%h3= t 'about.what_is_mastodon'
%p= t 'about.about_mastodon_html'
= render 'forms'
- if Setting.timeline_preview
#mastodon-timeline{ data: { props: Oj.dump(default_props) } }
= render 'features'
.landing-page__features__action
= link_to t('about.learn_more'), 'https://joinmastodon.org/', class: 'button button-alternative'
.landing-page__footer
%p
= link_to t('about.source_code'), @instance_presenter.source_url
= " (#{@instance_presenter.version_number})"
0% ou .
You are about to add 0 people to the discussion. Proceed with caution.
Terminez d'abord l'édition de ce message.
Veuillez vous inscrire ou vous pour commenter