mirror
/
changedetection.io
kopia lustrzana https://github.com/dgtlmoon/changedetection.io
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

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

pull/509/head
dgtlmoon 2022-03-25 23:37:28 +01:00 zatwierdzone przez GitHub
rodzic 946377d2be
commit c79d6824e3
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 4AEE18F83AFDEB23
2 zmienionych plików z 39 dodań i 13 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

17
changedetectionio/static/styles/styles.css
Wyświetl plik

@ -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 */

31
changedetectionio/static/styles/styles.scss
Wyświetl plik

@ -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 {