lee/changedetection.io
1
0
Fork 0
mirror of https://github.com/dgtlmoon/changedetection.io.git synced 2025-10-30 14:17:40 +00:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
dgtlmoon
2022-03-25 23:37:28 +01:00
committed by GitHub
parent 946377d2be
commit c79d6824e3
2 changed files with 39 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
changedetectionio/static/styles/styles.css
View File

@@ -244,7 +244,7 @@ footer {
.sticky-tab {
position: absolute;
top: 60px;
font-size: 8px;
font-size: 65%;
background: #fff;
padding: 10px; }
.sticky-tab#left-sticky {
@@ -310,14 +310,23 @@ footer {
#nav-menu {
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
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) {
input[type='text'] {
width: 100%; }
.watch-table {
/* Force table to not be like tables anymore */
/* Force table to not be like tables anymore */

33
changedetectionio/static/styles/styles.scss
View File

@@ -322,7 +322,7 @@ footer {
.sticky-tab {
position: absolute;
top: 60px;
font-size: 8px;
font-size: 65%;
background: #fff;
padding: 10px;
&#left-sticky {
@@ -422,18 +422,35 @@ footer {
}
}
@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'] {
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.
*/
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
input[type='text'] {
width: 100%;
}
.watch-table {
/* Force table to not be like tables anymore */
thead, tbody, th, td, tr {