ar
/
mastodon
forked from treehouse/mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improvements to static metadata styling, especially for mobile

rebase/4.0.0rc2
kibigo! 2017-06-28 00:57:32 -07:00
parent 6107e95404
commit 03f9648377
2 changed files with 41 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
app/javascript/styles/accounts.scss
View File

@ -1,10 +1,25 @@
.card { .card {
display: flex; display: flex;
position: relative;
background: $ui-base-color; background: $ui-base-color;
background-size: cover;
background-position: center;
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
overflow: hidden; overflow: hidden;
&::after {
background: linear-gradient(rgba($base-shadow-color, 0.5), rgba($base-shadow-color, 0.8));
display: block;
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
@media screen and (max-width: 700px) { @media screen and (max-width: 700px) {
border-radius: 0; border-radius: 0;
box-shadow: none; box-shadow: none;
@ -13,22 +28,9 @@
.details { .details {
position: relative; position: relative;
padding: 60px 0 0; padding: 60px 0 0;
background-size: cover;
background-position: center;
text-align: center; text-align: center;
flex: auto; flex: auto;
z-index: 2;
&::after {
background: linear-gradient(rgba($base-shadow-color, 0.5), rgba($base-shadow-color, 0.8));
display: block;
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
} }
.name { .name {
@ -38,8 +40,6 @@
color: $primary-text-color; color: $primary-text-color;
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
position: relative;
z-index: 2;
text-shadow: 0 0 2px $base-shadow-color; text-shadow: 0 0 2px $base-shadow-color;
small { small {
@ -54,8 +54,6 @@
@include avatar-size(120px); @include avatar-size(120px);
margin: 0 auto; margin: 0 auto;
margin-bottom: 15px; margin-bottom: 15px;
position: relative;
z-index: 2;
img { img {
@include avatar-radius(); @include avatar-radius();
@ -72,11 +70,9 @@
} }
.details-counters { .details-counters {
position: relative;
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
margin: 15px 0; margin: 15px 0;
z-index: 2;
} }
.counter { .counter {
@ -124,22 +120,23 @@
} }
.bio { .bio {
position: relative;
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
margin: 15px 0; margin: 15px 0;
padding: 5px 10px; padding: 5px 10px;
color: $ui-secondary-color; color: $ui-secondary-color;
z-index: 2;
} }
.metadata { .metadata {
position: relative;
min-width: 180px;
max-width: 40%; max-width: 40%;
background: $ui-base-color; background: rgba($base-shadow-color, 0.8);
color: $primary-text-color; color: $primary-text-color;
text-align: left; text-align: left;
overflow-y: auto; overflow-y: auto;
white-space: pre-wrap; white-space: pre-wrap;
z-index: 3;
.metadata-item { .metadata-item {
border-bottom: 1px $ui-primary-color solid; border-bottom: 1px $ui-primary-color solid;
@ -173,6 +170,25 @@
} }
} }
@media screen and (max-width: 500px) {
.card {
display: block;
.metadata {
max-width: none;
background: $base-shadow-color;
border-top: 1px $ui-primary-color solid;
.metadata-item {
padding: 15px 20px;
}
}
}
}
.pagination { .pagination {
padding: 30px 0; padding: 30px 0;
text-align: center; text-align: center;

4
app/views/accounts/_header.html.haml
View File

@ -1,6 +1,6 @@
- processed_bio = FrontmatterHandler.instance.process_bio Formatter.instance.simplified_format account - processed_bio = FrontmatterHandler.instance.process_bio Formatter.instance.simplified_format account
.card.h-card.p-author .card.h-card.p-author{ style: "background-image: url(#{account.header.url(:original)})" }
.details{ style: "background-image: url(#{account.header.url(:original)})" } .details
- if user_signed_in? && current_account.id != account.id && !current_account.requested?(account) - if user_signed_in? && current_account.id != account.id && !current_account.requested?(account)
.controls .controls
- if current_account.following?(account) - if current_account.following?(account)