tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add "Toots/Toots with replies/Media" tab below profile header (#6572)

Browse Source 
* Add "Toots/Toots with replies/Media" tab below profile header

* Add focal point display to account gallery timeline

* Fix visual glitch of standalone GIFV
This commit is contained in:
Eugen Rochko
2018-03-01 02:48:44 +01:00
committed by GitHub
parent 473a69ab18
commit 5131012505
9 changed files with 105 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
app/javascript/styles/mastodon/components.scss
View File

@@ -4230,6 +4230,7 @@ a.status-card {
&.standalone {
.media-gallery__item-gifv-thumbnail {
transform: none;
top: 0;
}
}
}
@@ -4579,64 +4580,94 @@ a.status-card {
/* End Video Player */
.account-gallery__container {
margin: -2px;
padding: 4px;
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 2px;
}
.account-gallery__item {
flex: 1 1 auto;
width: calc(100% / 3 - 4px);
height: 95px;
margin: 2px;
flex-grow: 1;
width: 50%;
overflow: hidden;
position: relative;
&::before {
content: "";
display: block;
padding-top: 100%;
}
a {
display: block;
width: 100%;
height: 100%;
width: calc(100% - 4px);
height: calc(100% - 4px);
margin: 2px;
top: 0;
left: 0;
background-color: $base-overlay-background;
background-size: cover;
background-position: center;
position: relative;
position: absolute;
color: inherit;
text-decoration: none;
border-radius: 4px;
&:hover,
&:active,
&:focus {
outline: 0;
&::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: rgba($base-overlay-background, 0.3);
border-radius: 4px;
}
}
}
}
.account-section-headline {
color: $ui-base-lighter-color;
.account__section-headline {
background: lighten($ui-base-color, 2%);
border-bottom: 1px solid lighten($ui-base-color, 4%);
padding: 15px 10px;
font-size: 14px;
font-weight: 500;
position: relative;
cursor: default;
display: flex;
&::before,
&::after {
a {
display: block;
content: "";
position: absolute;
bottom: 0;
left: 18px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px;
border-color: transparent transparent lighten($ui-base-color, 4%);
}
color: $ui-base-lighter-color;
padding: 15px 10px;
font-size: 14px;
font-weight: 500;
text-decoration: none;
position: relative;
&::after {
bottom: -1px;
border-color: transparent transparent $ui-base-color;
&.active {
color: $ui-highlight-color;
&::before,
&::after {
display: block;
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
transform: translateX(-50%);
border-style: solid;
border-width: 0 10px 10px;
border-color: transparent transparent lighten($ui-base-color, 4%);
}
&::after {
bottom: -1px;
border-color: transparent transparent $ui-base-color;
}
}
}
}