Unfloyded/Legamunt
0
0
Fork 0
Code Activity

feat(compose): More space on mobile devices (#4282)

Browse source 
* feat(compose): More space on mobile devices

* feat(compose): Hide navigation when typing on mobile devices

* fix(compose): Make animation faster

* fix(navigation_bar): Remove hardcoded title

* fix(compose): Prevent accidental bluring

* fix(compose): Increase max-height to 600px
This commit is contained in:
Sorin Davidoi 2017-07-21 01:38:24 +02:00 • committed by Eugen Rochko
parent 4b911fea03
commit c1bc5e14eb
6 changed files with 114 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

68
app/javascript/styles/components.scss
View file

@ -1177,6 +1177,11 @@
.permalink {
text-decoration: none;
}
.icon-button {
pointer-events: none;
opacity: 0;
}
}
.navigation-bar__profile {
@ -3723,3 +3728,66 @@ noscript {
margin: 20px 0;
}
}
@media screen and (max-width: 1024px) and (max-height: 600px) {
$duration: 400ms;
$delay: 100ms;
.tabs-bar,
.search {
will-change: margin-top;
transition: margin-top $duration $delay;
}
.navigation-bar {
will-change: padding-bottom;
transition: padding-bottom $duration $delay;
}
.navigation-bar {
& > a:first-child {
will-change: margin-top, margin-left, width;
transition: margin-top $duration $delay, margin-left $duration ($duration + $delay);
}
& > .navigation-bar__profile-edit {
will-change: margin-top;
transition: margin-top $duration $delay;
}
& > .icon-button {
will-change: opacity;
transition: opacity $duration $delay;
}
}
.is-composing {
.tabs-bar,
.search {
margin-top: -50px;
}
.navigation-bar {
padding-bottom: 0;
& > a:first-child {
margin-top: -50px;
margin-left: -40px;
}
.navigation-bar__profile {
padding-top: 2px;
}
.navigation-bar__profile-edit {
position: absolute;
margin-top: -50px;
}
.icon-button {
pointer-events: auto;
opacity: 1;
}
}
}
}