sander/rowsandall
Private
Public Access
1
0
Fork 0
Code Activity

improving css for flex charts on mobile

Browse Source
This commit is contained in:
Sander Roosendaal
2019-03-26 16:44:50 +01:00
parent 0838f0de66
commit 3bc962071d
3 changed files with 23 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
rowers/templates/flexchart3otw.html
View File

@@ -35,7 +35,7 @@
<ul class="main-content"> <ul class="main-content">
<li class="grid_4"> <li class="grid_4">
<div id="theplot" class="flexplot" style="min-width:300px;"> <div id="theplot" class="flexplot">
{{ the_div|safe }} {{ the_div|safe }}
</div> </div>
</li> </li>

1
static/css/rowsandall2.css
View File

@@ -1005,6 +1005,7 @@ th.rotate > div > span {
z-index: 10; z-index: 10;
} }
a.wh:link { a.wh:link {
color: #e9e9e9; color: #e9e9e9;
} }

29
static/css/styles2.css
View File

@@ -564,28 +564,28 @@
@media (min-height: 600px) { @media only screen and (min-height: 600px) {
.maxheight { .maxheight {
max-height: 450px; max-height: 450px;
overflow: scroll; overflow: scroll;
} }
} }
@media (min-height: 600px) { @media only screen and (min-height: 600px) {
.maxheight { .maxheight {
max-height: 450px; max-height: 450px;
overflow: scroll; overflow: scroll;
} }
} }
@media (min-height: 800px) { @media only screen and (min-height: 800px) {
.maxheight { .maxheight {
max-height: 600px; max-height: 600px;
overflow: scroll; overflow: scroll;
} }
} }
@media (min-height: 1000px) { @media only screen and (min-height: 1000px) {
.maxheight { .maxheight {
max-height: 800px; max-height: 800px;
overflow: scroll; overflow: scroll;
@@ -593,7 +593,7 @@
} }
@media (max-width: 600px) { @media only screen and (max-width: 600px) {
nav a { nav a {
font-size: 0px; font-size: 0px;
} }
@@ -601,9 +601,22 @@
nav a i { nav a i {
font-size: 20px; font-size: 20px;
} }
#theplot .bk-grid-column {
display: none;
}
#theplot .bk-plot-layout {
position: auto;
width: 100%;
height: auto;
display: inline;
}
} }
@media (min-width: 450px) {
@media only screen and (min-width: 450px) {
.wrapper { .wrapper {
grid-template-columns: 1fr 3fr; grid-template-columns: 1fr 3fr;
grid-template-areas: grid-template-areas:
@@ -648,7 +661,7 @@
} }
@media (min-width: 768px) { @media only screen and (min-width: 768px) {
.wrapper { .wrapper {
grid-template-columns: 1fr 4fr 1fr; grid-template-columns: 1fr 4fr 1fr;
grid-template-areas: grid-template-areas:
@@ -727,7 +740,7 @@
page-break-after: avoid; page-break-after: avoid;
} }
ul, img { ul, img, table {
page-break-inside: avoid; page-break-inside: avoid;
} }