MetuFSS
/
metu.life
2
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Better grid layout for the landing page (#6543)

Browse Source 
* Use grid layout for the landing page

* Fix column settings

Set the ratio explicitly

* Improve information board
master
Lynx Kotoura 7 years ago committed by Eugen Rochko
parent 18513a978a
commit a40167cf4d
2 changed files with 262 additions and 135 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 249
      app/javascript/styles/mastodon/about.scss
  2. 148
      app/views/about/show.html.haml

249
app/javascript/styles/mastodon/about.scss
Unescape View File

@ -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;

148
app/views/about/show.html.haml
Unescape View File

@ -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})"

Write Preview
Loading…
Cancel
Save