first steps of making the elements more readable on mobile

This commit is contained in:
Anton Georgiev 2015-02-25 02:39:30 +00:00
parent 4bf12fd721
commit a7d181f862
3 changed files with 24 additions and 9 deletions

View File

@ -151,11 +151,15 @@
height: 15%; height: 15%;
} }
@media @mobile-portrait-with-keyboard, @mobile-portrait { @media @mobile-portrait-with-keyboard, @mobile-portrait {
height: 60px; font-size: 3vh;
} }
@media @mobile-portrait-with-keyboard, @media @mobile-portrait-with-keyboard {
@desktop-portrait, height: 60%;
@mobile-portrait { }
@media @mobile-portrait {
height: 40%;
}
@media @desktop-portrait {
font-size: 25px; font-size: 25px;
} }
} }

View File

@ -253,7 +253,7 @@ body {
font-size: 14px; font-size: 14px;
} }
@media @mobile-portrait, @mobile-portrait-with-keyboard { @media @mobile-portrait, @mobile-portrait-with-keyboard {
font-size: 30px; font-size: 3vh;
} }
} }

View File

@ -4,6 +4,7 @@
margin-top: 10px; margin-top: 10px;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
background: #efeaea;
} }
#usericons { #usericons {
@ -12,6 +13,12 @@
margin-left: 3px; margin-left: 3px;
padding: 2px; padding: 2px;
border: 1px solid white; border: 1px solid white;
@media @desktop-portrait {
font-size: 25px;
}
@media @mobile-portrait {
font-size: 5vh;
}
} }
.raisedHandIcon, .muteIcon { .raisedHandIcon, .muteIcon {
&:hover { &:hover {
@ -34,9 +41,10 @@
} }
@media @desktop-portrait { @media @desktop-portrait {
height: 25px; height: 25px;
font-size: 3vh;
} }
@media @desktop-portrait, @mobile-portrait { @media @mobile-portrait, @mobile-portrait-with-keyboard {
font-size: 2vh; font-size: 4vh;
} }
} }
@ -52,12 +60,15 @@
order: 1; order: 1;
min-width: 0; min-width: 0;
} }
@media @mobile-portrait-with-keyboard, @desktop-portrait, @mobile-portrait { @media @desktop-portrait, @mobile-portrait {
-webkit-order: 3; -webkit-order: 3;
order: 3; order: 3;
margin-bottom: 0px; margin-bottom: 0px;
padding-bottom: 55px; /*so that the footer does not overlap */ padding-bottom: 55px; /*so that the footer does not overlap */
} }
@media @mobile-portrait-with-keyboard {
display: none; //hide when typing
}
} }
#user-contents { #user-contents {
@ -71,7 +82,7 @@
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
} }
@media @mobile-portrait-with-keyboard, @desktop-portrait, @mobile-portrait { @media @desktop-portrait, @mobile-portrait {
max-height: 40vh; //for longer userlist a scrollbar appears max-height: 40vh; //for longer userlist a scrollbar appears
} }
} }