Minor UI cleanups (mobile tabs, font sizing) (#503)

pull/509/head
dgtlmoon 3 years ago committed by GitHub
parent 946377d2be
commit c79d6824e3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -244,7 +244,7 @@ footer {
.sticky-tab { .sticky-tab {
position: absolute; position: absolute;
top: 60px; top: 60px;
font-size: 8px; font-size: 65%;
background: #fff; background: #fff;
padding: 10px; } padding: 10px; }
.sticky-tab#left-sticky { .sticky-tab#left-sticky {
@ -310,14 +310,23 @@ footer {
#nav-menu { #nav-menu {
overflow-x: scroll; } } overflow-x: scroll; } }
/* @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 800px) {
div.sticky-tab#hosted-sticky {
top: 60px;
left: 0px;
right: auto; }
section.content {
padding-top: 110px; }
div.tabs ul li {
display: block;
border-radius: 0px; }
input[type='text'] {
width: 100%; }
/*
Max width before this PARTICULAR table gets nasty Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px This query will take effect for any screen smaller than 760px
and also iPads specifically. and also iPads specifically.
*/ */
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
input[type='text'] {
width: 100%; }
.watch-table { .watch-table {
/* Force table to not be like tables anymore */ /* Force table to not be like tables anymore */
/* Force table to not be like tables anymore */ /* Force table to not be like tables anymore */

@ -322,7 +322,7 @@ footer {
.sticky-tab { .sticky-tab {
position: absolute; position: absolute;
top: 60px; top: 60px;
font-size: 8px; font-size: 65%;
background: #fff; background: #fff;
padding: 10px; padding: 10px;
&#left-sticky { &#left-sticky {
@ -422,18 +422,35 @@ footer {
} }
} }
/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 800px) {
div.sticky-tab#hosted-sticky {
top: 60px;
left: 0px;
right: auto;
}
section.content {
padding-top: 110px;
}
// Make the tabs easier to hit, they will be all nice and horizontal
div.tabs ul li {
display: block;
border-radius: 0px;
}
input[type='text'] { input[type='text'] {
width: 100%; width: 100%;
} }
/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
.watch-table { .watch-table {
/* Force table to not be like tables anymore */ /* Force table to not be like tables anymore */
thead, tbody, th, td, tr { thead, tbody, th, td, tr {

Loading…
Cancel
Save