From 12eb9eea52c88e6be36e048fcaf73406cf7f487e Mon Sep 17 00:00:00 2001 From: kasperisager <kasperisager@gmail.com> Date: Tue, 22 Apr 2014 17:16:53 -0400 Subject: [PATCH] Fixes #52: Fix table layout to avoid overflow --- design/custom_amelia.css | 13 +++++++++++-- design/custom_bootstrap.css | 13 +++++++++++-- design/custom_cerulean.css | 13 +++++++++++-- design/custom_cosmo.css | 13 +++++++++++-- design/custom_cyborg.css | 13 +++++++++++-- design/custom_flatly.css | 13 +++++++++++-- design/custom_journal.css | 13 +++++++++++-- design/custom_lumen.css | 13 +++++++++++-- design/custom_readable.css | 13 +++++++++++-- design/custom_simplex.css | 13 +++++++++++-- design/custom_slate.css | 13 +++++++++++-- design/custom_spacelab.css | 13 +++++++++++-- design/custom_superhero.css | 13 +++++++++++-- design/custom_united.css | 13 +++++++++++-- design/custom_yeti.css | 13 +++++++++++-- design/style.css | 13 +++++++++++-- less/components/listings.less | 11 ++++++++++- less/shared/tables.less | 6 +++--- 18 files changed, 189 insertions(+), 36 deletions(-) diff --git a/design/custom_amelia.css b/design/custom_amelia.css index efa8556..844a1e3 100644 --- a/design/custom_amelia.css +++ b/design/custom_amelia.css @@ -971,7 +971,7 @@ table > tfoot > tr.danger > th { white-space: nowrap; } } -.Preferences table.PreferenceGroup { +.PreferenceGroup { width: 100%; } fieldset { @@ -3761,6 +3761,9 @@ tr.Item:after { .DataList-Search .Media { margin-top: 5px; } +.DataTable { + table-layout: fixed; +} .DataTable h1, .DataTable h2, .DataTable h3, @@ -3804,6 +3807,7 @@ tr.Item:after { font-size: 18px; } .DataTable .BigCount { + width: 10%; text-align: center; } @media (max-width: 767px) { @@ -3815,15 +3819,20 @@ tr.Item:after { .DataTable .BigCount { display: none; } + .DataTable .BlockColumn { + width: 35%; + } } @media (max-width: 1199px) { .DataTable .FirstUser { display: none; } + .DataTable .BlockColumn { + width: 30%; + } } .BlockColumn { width: 20%; - min-width: 170px; } .CategoryTable .BlockColumn { width: 30%; diff --git a/design/custom_bootstrap.css b/design/custom_bootstrap.css index 74c55c1..2288a2c 100644 --- a/design/custom_bootstrap.css +++ b/design/custom_bootstrap.css @@ -970,7 +970,7 @@ table > tfoot > tr.danger > th { white-space: nowrap; } } -.Preferences table.PreferenceGroup { +.PreferenceGroup { width: 100%; } fieldset { @@ -3788,6 +3788,9 @@ tr.Item:after { .DataList-Search .Media { margin-top: 5px; } +.DataTable { + table-layout: fixed; +} .DataTable h1, .DataTable h2, .DataTable h3, @@ -3831,6 +3834,7 @@ tr.Item:after { font-size: 18px; } .DataTable .BigCount { + width: 10%; text-align: center; } @media (max-width: 767px) { @@ -3842,15 +3846,20 @@ tr.Item:after { .DataTable .BigCount { display: none; } + .DataTable .BlockColumn { + width: 35%; + } } @media (max-width: 1199px) { .DataTable .FirstUser { display: none; } + .DataTable .BlockColumn { + width: 30%; + } } .BlockColumn { width: 20%; - min-width: 170px; } .CategoryTable .BlockColumn { width: 30%; diff --git a/design/custom_cerulean.css b/design/custom_cerulean.css index 8993db0..d850ff9 100644 --- a/design/custom_cerulean.css +++ b/design/custom_cerulean.css @@ -970,7 +970,7 @@ table > tfoot > tr.danger > th { white-space: nowrap; } } -.Preferences table.PreferenceGroup { +.PreferenceGroup { width: 100%; } fieldset { @@ -3760,6 +3760,9 @@ tr.Item:after { .DataList-Search .Media { margin-top: 5px; } +.DataTable { + table-layout: fixed; +} .DataTable h1, .DataTable h2, .DataTable h3, @@ -3803,6 +3806,7 @@ tr.Item:after { font-size: 18px; } .DataTable .BigCount { + width: 10%; text-align: center; } @media (max-width: 767px) { @@ -3814,15 +3818,20 @@ tr.Item:after { .DataTable .BigCount { display: none; } + .DataTable .BlockColumn { + width: 35%; + } } @media (max-width: 1199px) { .DataTable .FirstUser { display: none; } + .DataTable .BlockColumn { + width: 30%; + } } .BlockColumn { width: 20%; - min-width: 170px; } .CategoryTable .BlockColumn { width: 30%; diff --git a/design/custom_cosmo.css b/design/custom_cosmo.css index 204f23e..83f894f 100644 --- a/design/custom_cosmo.css +++ b/design/custom_cosmo.css @@ -971,7 +971,7 @@ table > tfoot > tr.danger > th { white-space: nowrap; } } -.Preferences table.PreferenceGroup { +.PreferenceGroup { width: 100%; } fieldset { @@ -3761,6 +3761,9 @@ tr.Item:after { .DataList-Search .Media { margin-top: 5px; } +.DataTable { + table-layout: fixed; +} .DataTable h1, .DataTable h2, .DataTable h3, @@ -3804,6 +3807,7 @@ tr.Item:after { font-size: 19px; } .DataTable .BigCount { + width: 10%; text-align: center; } @media (max-width: 767px) { @@ -3815,15 +3819,20 @@ tr.Item:after { .DataTable .BigCount { display: none; } + .DataTable .BlockColumn { + width: 35%; + } } @media (max-width: 1199px) { .DataTable .FirstUser { display: none; } + .DataTable .BlockColumn { + width: 30%; + } } .BlockColumn { width: 20%; - min-width: 170px; } .CategoryTable .BlockColumn { width: 30%; diff --git a/design/custom_cyborg.css b/design/custom_cyborg.css index e8d5e8c..a62c155 100644 --- a/design/custom_cyborg.css +++ b/design/custom_cyborg.css @@ -971,7 +971,7 @@ table > tfoot > tr.danger > th { white-space: nowrap; } } -.Preferences table.PreferenceGroup { +.PreferenceGroup { width: 100%; } fieldset { @@ -3761,6 +3761,9 @@ tr.Item:after { .DataList-Search .Media { margin-top: 5px; } +.DataTable { + table-layout: fixed; +} .DataTable h1, .DataTable h2, .DataTable h3, @@ -3804,6 +3807,7 @@ tr.Item:after { font-size: 18px; } .DataTable .BigCount { + width: 10%; text-align: center; } @media (max-width: 767px) { @@ -3815,15 +3819,20 @@ tr.Item:after { .DataTable .BigCount { display: none; } + .DataTable .BlockColumn { + width: 35%; + } } @media (max-width: 1199px) { .DataTable .FirstUser { display: none; } + .DataTable .BlockColumn { + width: 30%; + } } .BlockColumn { width: 20%; - min-width: 170px; } .CategoryTable .BlockColumn { width: 30%; diff --git a/design/custom_flatly.css b/design/custom_flatly.css index bca5ae5..62e5ddb 100644 --- a/design/custom_flatly.css +++ b/design/custom_flatly.css @@ -971,7 +971,7 @@ table > tfoot > tr.danger > th { white-space: nowrap; } } -.Preferences table.PreferenceGroup { +.PreferenceGroup { width: 100%; } fieldset { @@ -3761,6 +3761,9 @@ tr.Item:after { .DataList-Search .Media { margin-top: 5px; } +.DataTable { + table-layout: fixed; +} .DataTable h1, .DataTable h2, .DataTable h3, @@ -3804,6 +3807,7 @@ tr.Item:after { font-size: 19px; } .DataTable .BigCount { + width: 10%; text-align: center; } @media (max-width: 767px) { @@ -3815,15 +3819,20 @@ tr.Item:after { .DataTable .BigCount { display: none; } + .DataTable .BlockColumn { + width: 35%; + } } @media (max-width: 1199px) { .DataTable .FirstUser { display: none; } + .DataTable .BlockColumn { + width: 30%; + } } .BlockColumn { width: 20%; - min-width: 170px; } .CategoryTable .BlockColumn { width: 30%; diff --git a/design/custom_journal.css b/design/custom_journal.css index 7c58bb2..5cdbd3c 100644 --- a/design/custom_journal.css +++ b/design/custom_journal.css @@ -971,7 +971,7 @@ table > tfoot > tr.danger > th { white-space: nowrap; } } -.Preferences table.PreferenceGroup { +.PreferenceGroup { width: 100%; } fieldset { @@ -3761,6 +3761,9 @@ tr.Item:after { .DataList-Search .Media { margin-top: 5px; } +.DataTable { + table-layout: fixed; +} .DataTable h1, .DataTable h2, .DataTable h3, @@ -3804,6 +3807,7 @@ tr.Item:after { font-size: 19px; } .DataTable .BigCount { + width: 10%; text-align: center; } @media (max-width: 767px) { @@ -3815,15 +3819,20 @@ tr.Item:after { .DataTable .BigCount { display: none; } + .DataTable .BlockColumn { + width: 35%; + } } @media (max-width: 1199px) { .DataTable .FirstUser { display: none; } + .DataTable .BlockColumn { + width: 30%; + } } .BlockColumn { width: 20%; - min-width: 170px; } .CategoryTable .BlockColumn { width: 30%; diff --git a/design/custom_lumen.css b/design/custom_lumen.css index 2c75b6e..566ab60 100644 --- a/design/custom_lumen.css +++ b/design/custom_lumen.css @@ -971,7 +971,7 @@ table > tfoot > tr.danger > th { white-space: nowrap; } } -.Preferences table.PreferenceGroup { +.PreferenceGroup { width: 100%; } fieldset { @@ -3761,6 +3761,9 @@ tr.Item:after { .DataList-Search .Media { margin-top: 5px; } +.DataTable { + table-layout: fixed; +} .DataTable h1, .DataTable h2, .DataTable h3, @@ -3804,6 +3807,7 @@ tr.Item:after { font-size: 18px; } .DataTable .BigCount { + width: 10%; text-align: center; } @media (max-width: 767px) { @@ -3815,15 +3819,20 @@ tr.Item:after { .DataTable .BigCount { display: none; } + .DataTable .BlockColumn { + width: 35%; + } } @media (max-width: 1199px) { .DataTable .FirstUser { display: none; } + .DataTable .BlockColumn { + width: 30%; + } } .BlockColumn { width: 20%; - min-width: 170px; } .CategoryTable .BlockColumn { width: 30%; diff --git a/design/custom_readable.css b/design/custom_readable.css index 7eabfd3..062468a 100644 --- a/design/custom_readable.css +++ b/design/custom_readable.css @@ -971,7 +971,7 @@ table > tfoot > tr.danger > th { white-space: nowrap; } } -.Preferences table.PreferenceGroup { +.PreferenceGroup { width: 100%; } fieldset { @@ -3761,6 +3761,9 @@ tr.Item:after { .DataList-Search .Media { margin-top: 5px; } +.DataTable { + table-layout: fixed; +} .DataTable h1, .DataTable h2, .DataTable h3, @@ -3804,6 +3807,7 @@ tr.Item:after { font-size: 20px; } .DataTable .BigCount { + width: 10%; text-align: center; } @media (max-width: 767px) { @@ -3815,15 +3819,20 @@ tr.Item:after { .DataTable .BigCount { display: none; } + .DataTable .BlockColumn { + width: 35%; + } } @media (max-width: 1199px) { .DataTable .FirstUser { display: none; } + .DataTable .BlockColumn { + width: 30%; + } } .BlockColumn { width: 20%; - min-width: 170px; } .CategoryTable .BlockColumn { width: 30%; diff --git a/design/custom_simplex.css b/design/custom_simplex.css index c07c460..4df5a46 100644 --- a/design/custom_simplex.css +++ b/design/custom_simplex.css @@ -970,7 +970,7 @@ table > tfoot > tr.danger > th { white-space: nowrap; } } -.Preferences table.PreferenceGroup { +.PreferenceGroup { width: 100%; } fieldset { @@ -3760,6 +3760,9 @@ tr.Item:after { .DataList-Search .Media { margin-top: 5px; } +.DataTable { + table-layout: fixed; +} .DataTable h1, .DataTable h2, .DataTable h3, @@ -3803,6 +3806,7 @@ tr.Item:after { font-size: 18px; } .DataTable .BigCount { + width: 10%; text-align: center; } @media (max-width: 767px) { @@ -3814,15 +3818,20 @@ tr.Item:after { .DataTable .BigCount { display: none; } + .DataTable .BlockColumn { + width: 35%; + } } @media (max-width: 1199px) { .DataTable .FirstUser { display: none; } + .DataTable .BlockColumn { + width: 30%; + } } .BlockColumn { width: 20%; - min-width: 170px; } .CategoryTable .BlockColumn { width: 30%; diff --git a/design/custom_slate.css b/design/custom_slate.css index b65e24a..f7b44b6 100644 --- a/design/custom_slate.css +++ b/design/custom_slate.css @@ -970,7 +970,7 @@ table > tfoot > tr.danger > th { white-space: nowrap; } } -.Preferences table.PreferenceGroup { +.PreferenceGroup { width: 100%; } fieldset { @@ -3772,6 +3772,9 @@ tr.Item:after { .DataList-Search .Media { margin-top: 5px; } +.DataTable { + table-layout: fixed; +} .DataTable h1, .DataTable h2, .DataTable h3, @@ -3815,6 +3818,7 @@ tr.Item:after { font-size: 18px; } .DataTable .BigCount { + width: 10%; text-align: center; } @media (max-width: 767px) { @@ -3826,15 +3830,20 @@ tr.Item:after { .DataTable .BigCount { display: none; } + .DataTable .BlockColumn { + width: 35%; + } } @media (max-width: 1199px) { .DataTable .FirstUser { display: none; } + .DataTable .BlockColumn { + width: 30%; + } } .BlockColumn { width: 20%; - min-width: 170px; } .CategoryTable .BlockColumn { width: 30%; diff --git a/design/custom_spacelab.css b/design/custom_spacelab.css index a291ff8..363036d 100644 --- a/design/custom_spacelab.css +++ b/design/custom_spacelab.css @@ -971,7 +971,7 @@ table > tfoot > tr.danger > th { white-space: nowrap; } } -.Preferences table.PreferenceGroup { +.PreferenceGroup { width: 100%; } fieldset { @@ -3761,6 +3761,9 @@ tr.Item:after { .DataList-Search .Media { margin-top: 5px; } +.DataTable { + table-layout: fixed; +} .DataTable h1, .DataTable h2, .DataTable h3, @@ -3804,6 +3807,7 @@ tr.Item:after { font-size: 18px; } .DataTable .BigCount { + width: 10%; text-align: center; } @media (max-width: 767px) { @@ -3815,15 +3819,20 @@ tr.Item:after { .DataTable .BigCount { display: none; } + .DataTable .BlockColumn { + width: 35%; + } } @media (max-width: 1199px) { .DataTable .FirstUser { display: none; } + .DataTable .BlockColumn { + width: 30%; + } } .BlockColumn { width: 20%; - min-width: 170px; } .CategoryTable .BlockColumn { width: 30%; diff --git a/design/custom_superhero.css b/design/custom_superhero.css index bee77cc..a43f552 100644 --- a/design/custom_superhero.css +++ b/design/custom_superhero.css @@ -971,7 +971,7 @@ table > tfoot > tr.danger > th { white-space: nowrap; } } -.Preferences table.PreferenceGroup { +.PreferenceGroup { width: 100%; } fieldset { @@ -3758,6 +3758,9 @@ tr.Item:after { .DataList-Search .Media { margin-top: 5px; } +.DataTable { + table-layout: fixed; +} .DataTable h1, .DataTable h2, .DataTable h3, @@ -3801,6 +3804,7 @@ tr.Item:after { font-size: 19px; } .DataTable .BigCount { + width: 10%; text-align: center; } @media (max-width: 767px) { @@ -3812,15 +3816,20 @@ tr.Item:after { .DataTable .BigCount { display: none; } + .DataTable .BlockColumn { + width: 35%; + } } @media (max-width: 1199px) { .DataTable .FirstUser { display: none; } + .DataTable .BlockColumn { + width: 30%; + } } .BlockColumn { width: 20%; - min-width: 170px; } .CategoryTable .BlockColumn { width: 30%; diff --git a/design/custom_united.css b/design/custom_united.css index 3da7596..06184c1 100644 --- a/design/custom_united.css +++ b/design/custom_united.css @@ -971,7 +971,7 @@ table > tfoot > tr.danger > th { white-space: nowrap; } } -.Preferences table.PreferenceGroup { +.PreferenceGroup { width: 100%; } fieldset { @@ -3761,6 +3761,9 @@ tr.Item:after { .DataList-Search .Media { margin-top: 5px; } +.DataTable { + table-layout: fixed; +} .DataTable h1, .DataTable h2, .DataTable h3, @@ -3804,6 +3807,7 @@ tr.Item:after { font-size: 18px; } .DataTable .BigCount { + width: 10%; text-align: center; } @media (max-width: 767px) { @@ -3815,15 +3819,20 @@ tr.Item:after { .DataTable .BigCount { display: none; } + .DataTable .BlockColumn { + width: 35%; + } } @media (max-width: 1199px) { .DataTable .FirstUser { display: none; } + .DataTable .BlockColumn { + width: 30%; + } } .BlockColumn { width: 20%; - min-width: 170px; } .CategoryTable .BlockColumn { width: 30%; diff --git a/design/custom_yeti.css b/design/custom_yeti.css index 0457176..695c0f6 100644 --- a/design/custom_yeti.css +++ b/design/custom_yeti.css @@ -971,7 +971,7 @@ table > tfoot > tr.danger > th { white-space: nowrap; } } -.Preferences table.PreferenceGroup { +.PreferenceGroup { width: 100%; } fieldset { @@ -3761,6 +3761,9 @@ tr.Item:after { .DataList-Search .Media { margin-top: 5px; } +.DataTable { + table-layout: fixed; +} .DataTable h1, .DataTable h2, .DataTable h3, @@ -3804,6 +3807,7 @@ tr.Item:after { font-size: 19px; } .DataTable .BigCount { + width: 10%; text-align: center; } @media (max-width: 767px) { @@ -3815,15 +3819,20 @@ tr.Item:after { .DataTable .BigCount { display: none; } + .DataTable .BlockColumn { + width: 35%; + } } @media (max-width: 1199px) { .DataTable .FirstUser { display: none; } + .DataTable .BlockColumn { + width: 30%; + } } .BlockColumn { width: 20%; - min-width: 170px; } .CategoryTable .BlockColumn { width: 30%; diff --git a/design/style.css b/design/style.css index f76c584..d7562b8 100644 --- a/design/style.css +++ b/design/style.css @@ -970,7 +970,7 @@ table > tfoot > tr.danger > th { white-space: nowrap; } } -.Preferences table.PreferenceGroup { +.PreferenceGroup { width: 100%; } fieldset { @@ -3760,6 +3760,9 @@ tr.Item:after { .DataList-Search .Media { margin-top: 5px; } +.DataTable { + table-layout: fixed; +} .DataTable h1, .DataTable h2, .DataTable h3, @@ -3803,6 +3806,7 @@ tr.Item:after { font-size: 18px; } .DataTable .BigCount { + width: 10%; text-align: center; } @media (max-width: 767px) { @@ -3814,15 +3818,20 @@ tr.Item:after { .DataTable .BigCount { display: none; } + .DataTable .BlockColumn { + width: 35%; + } } @media (max-width: 1199px) { .DataTable .FirstUser { display: none; } + .DataTable .BlockColumn { + width: 30%; + } } .BlockColumn { width: 20%; - min-width: 170px; } .CategoryTable .BlockColumn { width: 30%; diff --git a/less/components/listings.less b/less/components/listings.less index 6a5b6bd..5c86a09 100644 --- a/less/components/listings.less +++ b/less/components/listings.less @@ -105,6 +105,7 @@ } .DataTable { + table-layout: fixed; .reset-headings(); &:extend(.table-hover all); @@ -130,6 +131,7 @@ } .BigCount { + width: 10%; text-align: center; } @@ -143,18 +145,25 @@ .BigCount { display: none; } + + .BlockColumn { + width: 35%; + } } @media (max-width: @screen-md-max) { .FirstUser { display: none; } + + .BlockColumn { + width: 30%; + } } } .BlockColumn { width: 20%; - min-width: 170px; .CategoryTable & { width: 30%; diff --git a/less/shared/tables.less b/less/shared/tables.less index fcb8aca..363b5ca 100644 --- a/less/shared/tables.less +++ b/less/shared/tables.less @@ -14,8 +14,8 @@ table { &:extend(.table all); +} - .Preferences &.PreferenceGroup { - width: 100%; - } +.PreferenceGroup { + width: 100%; } -- GitLab