From 5d46c576bb4a815015bf04a6a589ccee1270fdcb Mon Sep 17 00:00:00 2001 From: David Sn Date: Sat, 13 Jan 2018 21:07:29 +0100 Subject: [PATCH] Fix infobox styles to work well with multiple column infobox rows I used the fix provided by TheDJ and tested out locally on Firefox 57 and Chrome latest, but I couldn't test out any grade C browser as on Linux it's really hard to find such an outdated browser like Internet Explorer on Windows. Bug: T168716 Change-Id: I8e03610e4eb3c93b80bb757592c2fb3079a68412 --- .../skins.minerva.content.styles/hacks.less | 23 ++++++++++++++++++- .../skins.minerva.tablet.styles/hacks.less | 5 ---- 2 files changed, 22 insertions(+), 6 deletions(-) diff --git a/resources/skins.minerva.content.styles/hacks.less b/resources/skins.minerva.content.styles/hacks.less index ce7b22581..2ed6a9050 100644 --- a/resources/skins.minerva.content.styles/hacks.less +++ b/resources/skins.minerva.content.styles/hacks.less @@ -50,6 +50,10 @@ FIXME: Review all of these hacks to see if they still apply. text-align: left; background-color: @colorGray15; + display: flex; + flex: 1 1 100%; + flex-flow: column nowrap; + th, td { vertical-align: top; border: 0; @@ -57,7 +61,13 @@ FIXME: Review all of these hacks to see if they still apply. padding: 7px 10px; } - td { + tbody > tr > td, + tbody > tr > th { + flex: 1 0; + } + + td:only-child, + th:only-child { width: 100%; } @@ -66,6 +76,17 @@ FIXME: Review all of these hacks to see if they still apply. border: 0; } } + + &.infobox > tbody { + display: flex; + flex-flow: column nowrap; + } + + &.infobox > tbody > tr { + min-width: 100%; + display: flex; + flex-flow: row nowrap; + } } } diff --git a/resources/skins.minerva.tablet.styles/hacks.less b/resources/skins.minerva.tablet.styles/hacks.less index c833a7b07..102189a8b 100644 --- a/resources/skins.minerva.tablet.styles/hacks.less +++ b/resources/skins.minerva.tablet.styles/hacks.less @@ -22,11 +22,6 @@ FIXME: Review all of these hacks to see if they still apply. width: auto !important; float: right !important; clear: right !important; - - td { - width: auto; - } - } // banners inserted by other extensions, i.e. Zero #mw-mf-page-center .mw-mf-banner {