CloudToys/puyopuyotetr.is
1
0
Fork 0
Code

Fix extra clickable spaces for narrow screen

Browse Source
This commit is contained in:
Ondřej Hruška 2017-07-11 17:53:50 +02:00
parent 9f7a5aac1e
commit 08d19778d5
1 changed files with 64 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
app/javascript/styles/components.scss
View File

@ -421,18 +421,77 @@
cursor: pointer; cursor: pointer;
} }
// Extra clickable area in the status gutter // --- Extra clickable area in the status gutter ---
@media screen and (min-width: 1024px) { .ui.wide {
@mixin xtraspaces-full {
height: calc(100% + 10px);
bottom: -40px;
}
@mixin xtraspaces-short {
height: calc(100% - 35px);
bottom: 0;
}
// Avi must go on top if the toot is too short
.status__avatar {
z-index: 10;
}
// Base styles
.status__content--with-action > div::after { .status__content--with-action > div::after {
content: ''; content: '';
display: block; display: block;
width: 68px; width: 64px;
height: calc(100% + 10px);
position: absolute; position: absolute;
left: -68px; left: -68px;
bottom: -40px;
// more than 4 never fit on FullHD, short
@include xtraspaces-short;
} }
@media screen and (min-width: 1800px) {
// 4, very wide screen
.column:nth-child(2):nth-last-child(4) {
&, & ~ .column {
.status__content--with-action > div::after {
@include xtraspaces-full;
}
}
}
}
// 1 or 2, always fit
.column:nth-child(2):nth-last-child(1),
.column:nth-child(2):nth-last-child(2),
.column:nth-child(2):nth-last-child(3) {
&, & ~ .column {
.status__content--with-action > div::after {
@include xtraspaces-full;
}
}
}
@media screen and (max-width: 1440px) {
// 3, small screen
.column:nth-child(2):nth-last-child(3) {
&, & ~ .column {
.status__content--with-action > div::after {
@include xtraspaces-short;
}
}
}
}
// Phone or iPad
@media screen and (max-width: 1060px) {
.status__content--with-action > div::after {
display: none;
}
}
// I am very sorry
} }
// --- end extra clickable spaces ---
.status__content, .status__content,
.reply-indicator__content { .reply-indicator__content {