diff --git a/dist/css/app.css b/dist/css/app.css index 76be510..693054a 100644 --- a/dist/css/app.css +++ b/dist/css/app.css @@ -1 +1 @@ -.container-fluid{max-width:1440px}h2{font-size:20px}th{text-transform:capitalize;background:#eef7fd}.react-bs-table{border:1px solid #ddd;border-radius:2px;margin:0}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:1px 6px} \ No newline at end of file +body{font-size:calc(10px + .5vw)}.container-fluid{max-width:1440px}h2{font-size:20px}th{position:relative;text-transform:capitalize;background:#eef7fd}.react-bs-table{border:1px solid #ddd;border-radius:2px;margin:0}.react-bs-table table td,.react-bs-table table th{white-space:normal;word-break:break-word}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:1px calc(0px + 1vw)}.table>tbody>tr>th,.table>tfoot>tr>th,.table>thead>tr>th{padding-right:20px}td:nth-child(1),th:nth-child(1){width:50%}td:nth-child(2),th:nth-child(2){width:22%}td:nth-child(3),th:nth-child(3){width:14%}td:nth-child(4),th:nth-child(4){width:14%}.order{position:absolute;top:1px;right:3px} \ No newline at end of file diff --git a/src/scss/app.scss b/src/scss/app.scss index 2ea7cb7..4f7bd3e 100644 --- a/src/scss/app.scss +++ b/src/scss/app.scss @@ -1,3 +1,6 @@ +body { + font-size: calc(10px + .5vw); +} .container-fluid { max-width: 1440px; } @@ -5,6 +8,7 @@ h2 { font-size: 20px; } th { + position: relative; text-transform: capitalize; background: #eef7fd; } @@ -12,7 +16,22 @@ th { border: 1px solid #ddd; border-radius: 2px; margin: 0; + &, + & table { + // We can't do this because, unbelievably, the elements are in a separate table :( + //table-layout: auto; + } + table { + td, + th { + // Override some bananas styles + // Why did they think nowrap was a smart idea? Fuck mobiles, right? + white-space: normal; + word-break: break-word; + } + } } +// Realistically, this would bring in bootstrap as a package and use it properly .table { // Cells > thead, @@ -21,8 +40,32 @@ th { > tr { > th, > td { - padding: 1px 6px; + padding: 1px calc(0px + 1vw); + } + > th { + padding-right: 20px; } } } } +// Quick solution to the forced table-layout: fixed +th, +td { + &:nth-child(1) { + width: 50%; + } + &:nth-child(2) { + width: 22%; + } + &:nth-child(3) { + width: 14%; + } + &:nth-child(4) { + width: 14%; + } +} +.order { + position: absolute; + top: 1px; + right: 3px; +}