Browse Source

Properly style the table for smaller viewports

The grid was way off.
tags/3.20.2
parent
commit
675d03eaa8
Signed by: hristoast GPG Key ID: 5FC7664AD47AA1C5
1 changed files with 100 additions and 0 deletions
  1. +100
    -0
      momw/static/css/site.css

+ 100
- 0
momw/static/css/site.css View File

@@ -484,6 +484,56 @@ button[disabled], html input[disabled] {
}

@media screen and (max-width: 1000px) {
div#mod-list-detail-grid {
grid-template-columns: unset;
grid-template-columns: 50px 1fr;
}

div#mod-list-grid {
grid-template-columns: unset;
grid-template-columns: 160px 1fr 50px;
}

div#mod-list-grid div:first-child, div#mod-list-grid div:nth-child(2) {
text-align: initial;
}

div#mod-list-grid div.listcount {
padding-top: 20px;
}

div.mod-detail-grid {
grid-template-columns: unset;
grid-template-columns: 1 1f;
}

div.mod-detail-grid .key, div.mod-detail-grid .val {
overflow-x: auto;
}

div.mod-detail-grid .key {
border-left: 1px solid #e1e1e1;
font-weight: bold;
padding-left: 10px;
text-align: initial;
}

div.mod-detail-grid .val {
border-left: 1px solid #e1e1e1;
}

div.mod-detail-grid .val {
border-top: initial;
}

div.mod-detail-grid div:nth-last-child(2) {
border-bottom: initial;
}

div#mod-list-detail-grid div.modname {
border-right: 1px solid #e1e1e1;
}

.mobile-hide {
display: none;
}
@@ -507,6 +557,56 @@ button[disabled], html input[disabled] {
}

@media screen and (max-width: 1120px) {
div#mod-list-detail-grid {
grid-template-columns: unset;
grid-template-columns: 50px 1fr;
}

div#mod-list-grid {
grid-template-columns: unset;
grid-template-columns: 160px 1fr 50px;
}

div#mod-list-grid div:first-child, div#mod-list-grid div:nth-child(2) {
text-align: initial;
}

div#mod-list-grid div.listcount {
padding-top: 20px;
}

div.mod-detail-grid {
grid-template-columns: unset;
grid-template-columns: 1 1f;
}

div.mod-detail-grid .key, div.mod-detail-grid .val {
overflow-x: auto;
}

div.mod-detail-grid .key {
border-left: 1px solid #e1e1e1;
font-weight: bold;
padding-left: 10px;
text-align: initial;
}

div.mod-detail-grid .val {
border-left: 1px solid #e1e1e1;
}

div.mod-detail-grid .val {
border-top: initial;
}

div.mod-detail-grid div:nth-last-child(2) {
border-bottom: initial;
}

div#mod-list-detail-grid div.modname {
border-right: 1px solid #e1e1e1;
}

.mobile-hide {
display: none;
}


Loading…
Cancel
Save