Automatic 2 or 3 column display on Dashboard page based on screen width

This commit is contained in:
bergware
2017-06-30 08:54:40 +02:00
parent a5d206afaf
commit 501c28ed7f
4 changed files with 44 additions and 10 deletions

View File

@@ -177,7 +177,6 @@ table.share_status.dash{float:left;width:35%;margin-top:36px;margin-right:6px;bo
table.share_status.dash thead tr:first-child td{line-height:30px}
table.share_status.dash thead tr:last-child>td{border-bottom:1px solid #606E7F;text-align:left;color:#606E7F}
table.share_status.dash tbody td.blue{color:#606E7F}
table.share_status.dash.line{width:49%;margin-right:2%;table-layout:fixed}
table.share_status.dash.line tbody tr.wide{height:40px;line-height:40px}
table.share_status.dash.line tbody td{padding:3px 4px 3px 10px}
table.share_status.dash.line tr>td{width:25%}
@@ -187,10 +186,20 @@ table.share_status.dash.line tr>td[colspan='4']{width:100%}
table.share_status.dash.line tr>td:last-child{white-space:normal}
table.share_status.dash tr.h48{height:48px}
table.share_status.dash td:first-child{width:25%}
@media (max-width:1440px){
table.share_status.dash.line{width:49%;margin-right:2%;table-layout:fixed}
table.share_status.m36{width:49%;margin-left:0;margin-right:0}
table.share_status.m36 tr>td+td+td{width:12%}
table.share_status.m0{width:49%;margin-left:0;margin-right:0}
table.share_status.m0 tr>td+td+td{width:12%}
}
@media (min-width:1441px){
table.share_status.dash.line{width:33%;margin-right:7px;table-layout:fixed}
table.share_status.m36{width:33%;margin-left:0;margin-right:0}
table.share_status.m36 tr>td+td+td{width:12%}
table.share_status.m0{width:33%;margin-left:0;margin-right:7px}
table.share_status.m0 tr>td+td+td{width:12%}
}
tr.alert{color:#F0000C;background-color:#FF9E9E}
tr.warn{color:#E68A00;background-color:#FEEFB3}
tr.past{color:#D63301;background-color:#FFDDD1}

View File

@@ -161,7 +161,6 @@ table.share_status.table tr>td{width:50%}
table.share_status.dash{float:left;width:35%;margin-top:36px;border:1px solid #202020}
table.share_status.dash thead tr:last-child>td{font-weight:bold;border-bottom:1px solid #202020}
table.share_status.dash tbody td.blue{color:#3B5998}
table.share_status.dash.line{width:49%;margin-right:2%;table-layout:fixed}
table.share_status.dash.line tbody tr:nth-child(even){background-color:#000000}
table.share_status.dash.line tbody tr.wide{height:40px;line-height:40px}
table.share_status.dash.line tbody td{border:1px solid #202020;padding:3px 4px 3px 10px}
@@ -172,11 +171,20 @@ table.share_status.dash.line tr>td[colspan="4"]{width:100%}
table.share_status.dash.line tr>td:last-child{white-space:normal}
table.share_status.dash tr.h48{height:48px}
table.share_status.dash td:first-child{width:25%}
@media (max-width:1440px){
table.share_status.dash.line{width:49%;margin-right:2%;table-layout:fixed}
table.share_status.m36{width:49%;margin-left:0;margin-right:0}
table.share_status.m36 tr>td+td+td{width:14%}
table.share_status.m36 tr>td+td+td+td{width:8%;text-align:center}
table.share_status.m36 tr>td+td+td{width:12%}
table.share_status.m0{width:49%;margin-left:0;margin-right:0}
table.share_status.m0 tr>td+td+td{width:12%;text-align:center}
table.share_status.m0 tr>td+td+td{width:12%}
}
@media (min-width:1441px){
table.share_status.dash.line{width:33%;margin-right:7px;table-layout:fixed}
table.share_status.m36{width:33%;margin-left:0;margin-right:0}
table.share_status.m36 tr>td+td+td{width:12%}
table.share_status.m0{width:33%;margin-left:0;margin-right:7px}
table.share_status.m0 tr>td+td+td{width:12%}
}
[name=arrayOps]{margin-top:12px}
span.error{color:#F0000C;background-color:#FF9E9E;display:block;width:100%}
span.warn{color:#E68A00;background-color:#FEEFB3;display:block;width:100%}

View File

@@ -177,7 +177,6 @@ table.share_status.dash{float:left;width:35%;margin-top:36px;margin-right:6px;bo
table.share_status.dash thead tr:first-child td{line-height:30px}
table.share_status.dash thead tr:last-child>td{border-bottom:1px solid #606E7F;text-align:left;color:#606E7F}
table.share_status.dash tbody td.blue{color:#606E7F}
table.share_status.dash.line{width:49%;margin-right:2%;table-layout:fixed}
table.share_status.dash.line tbody tr.wide{height:40px;line-height:40px}
table.share_status.dash.line tbody td{padding:3px 4px 3px 10px}
table.share_status.dash.line tr>td{width:25%}
@@ -187,10 +186,20 @@ table.share_status.dash.line tr>td[colspan='4']{width:100%}
table.share_status.dash.line tr>td:last-child{white-space:normal}
table.share_status.dash tr.h48{height:48px}
table.share_status.dash td:first-child{width:25%}
@media (max-width:1440px){
table.share_status.dash.line{width:49%;margin-right:2%;table-layout:fixed}
table.share_status.m36{width:49%;margin-left:0;margin-right:0}
table.share_status.m36 tr>td+td+td{width:12%}
table.share_status.m0{width:49%;margin-left:0;margin-right:0}
table.share_status.m0 tr>td+td+td{width:12%}
}
@media (min-width:1441px){
table.share_status.dash.line{width:33%;margin-right:7px;table-layout:fixed}
table.share_status.m36{width:33%;margin-left:0;margin-right:0}
table.share_status.m36 tr>td+td+td{width:12%}
table.share_status.m0{width:33%;margin-left:0;margin-right:7px}
table.share_status.m0 tr>td+td+td{width:12%}
}
tr.alert{color:#F0000C;background-color:#FF9E9E}
tr.warn{color:#E68A00;background-color:#FEEFB3}
tr.past{color:#D63301;background-color:#FFDDD1}

View File

@@ -161,7 +161,6 @@ table.share_status.table tr>td{width:50%}
table.share_status.dash{float:left;width:35%;margin-top:36px;border:1px solid #D0D0D0}
table.share_status.dash thead tr:last-child>td{font-weight:bold;border-bottom:1px solid #D0D0D0}
table.share_status.dash tbody td.blue{color:#3B5998}
table.share_status.dash.line{width:49%;margin-right:2%;table-layout:fixed}
table.share_status.dash.line tbody tr:nth-child(even){background-color:#FFFFFF}
table.share_status.dash.line tbody tr.wide{height:40px;line-height:40px}
table.share_status.dash.line tbody td{border:1px solid #D0D0D0;padding:3px 4px 3px 10px}
@@ -172,11 +171,20 @@ table.share_status.dash.line tr>td[colspan="4"]{width:100%}
table.share_status.dash.line tr>td:last-child{white-space:normal}
table.share_status.dash tr.h48{height:48px}
table.share_status.dash td:first-child{width:25%}
@media (max-width:1440px){
table.share_status.dash.line{width:49%;margin-right:2%;table-layout:fixed}
table.share_status.m36{width:49%;margin-left:0;margin-right:0}
table.share_status.m36 tr>td+td+td{width:14%}
table.share_status.m36 tr>td+td+td+td{width:8%;text-align:center}
table.share_status.m36 tr>td+td+td{width:12%}
table.share_status.m0{width:49%;margin-left:0;margin-right:0}
table.share_status.m0 tr>td+td+td{width:12%;text-align:center}
table.share_status.m0 tr>td+td+td{width:12%}
}
@media (min-width:1441px){
table.share_status.dash.line{width:33%;margin-right:7px;table-layout:fixed}
table.share_status.m36{width:33%;margin-left:0;margin-right:0}
table.share_status.m36 tr>td+td+td{width:12%}
table.share_status.m0{width:33%;margin-left:0;margin-right:7px}
table.share_status.m0 tr>td+td+td{width:12%}
}
[name=arrayOps]{margin-top:12px}
span.error{color:#F0000C;background-color:#FF9E9E;display:block;width:100%}
span.warn{color:#E68A00;background-color:#FEEFB3;display:block;width:100%}