From b853dd3bbb409bb21a12700087ad4715928ed157 Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Mon, 6 Jan 2020 14:17:23 -0500 Subject: [PATCH 1/4] Fix layout issue mentioned in #56 --- resources/components/common.less | 4 + .../mediawiki.action.view.filepage.less | 237 ++++++++++-------- 2 files changed, 142 insertions(+), 99 deletions(-) diff --git a/resources/components/common.less b/resources/components/common.less index 8f38a9b4..2a677164 100644 --- a/resources/components/common.less +++ b/resources/components/common.less @@ -54,6 +54,10 @@ dl { margin: @content-margin-top 0 0 0; } +p:first-of-type { + margin-top: 0; +} + pre, code, tt, diff --git a/skinStyles/mediawiki/action/mediawiki.action.view.filepage.less b/skinStyles/mediawiki/action/mediawiki.action.view.filepage.less index 51b28369..de3485fd 100644 --- a/skinStyles/mediawiki/action/mediawiki.action.view.filepage.less +++ b/skinStyles/mediawiki/action/mediawiki.action.view.filepage.less @@ -7,126 +7,165 @@ @import '../../../resources/mixins.less'; #filetoc { - margin: 0; - padding: 0; - overflow: auto; - white-space: nowrap; - display: flex; - border-color: @base-80; - transition: @transition-margin, @transition-padding; + margin: 0; + padding: 0; + overflow: auto; + white-space: nowrap; + display: flex; + border-color: @base-80; + transition: @transition-margin, @transition-padding; - li { - padding: 0; - display: block; + li { + padding: 0; + display: block; - a { - padding: @margin-side / 2 @margin-side; - display: block; - transition: @transition-background-quick; + a { + padding: @margin-side / 2 @margin-side; + display: block; + transition: @transition-background-quick; - &:hover { - background-color: @base-80; - } - } - } + &:hover { + background-color: @base-80; + } + } + } } .fullImageLink { - margin: 0 @negative-margin; - max-width: @footer-width - 10px; // 1280px - image size 4 - background-color: @base-90; + margin: 0 @negative-margin; + max-width: @footer-width - 10px; // 1280px - image size 4 + background-color: @base-90; - > a { - display: block; - pointer-events: none; + >a { + display: block; + pointer-events: none; - > img { - margin: 0 auto; - max-width: 100%; - height: auto; - display: block; - .boxshadow(1); - } - } + >img { + margin: 0 auto; + max-width: 100%; + height: auto; + display: block; + .boxshadow(1); + } + } - .mw-filepage-resolutioninfo { - padding: @margin-side / 2 @margin-side; - border: 1px solid @base-80; - text-align: center; - transition: @transition-margin, @transition-padding; - } + .mw-filepage-resolutioninfo { + padding: @margin-side / 2 @margin-side; + border: 1px solid @base-80; + text-align: center; + transition: @transition-margin, @transition-padding; + } } .fullMedia { - padding: @margin-side / 2 @margin-side; - border: 1px solid @base-80; - border-top: 0; - background-color: @base-90; - font-size: smaller; - text-align: center; - transition: @transition-margin; + padding: @margin-side / 2 @margin-side; + border: 1px solid @base-80; + border-top: 0; + background-color: @base-90; + font-size: smaller; + text-align: center; + transition: @transition-margin; - .mw-mmv-filepage-buttons { - margin-top: @margin-side / 2; - display: flex; - justify-content: center; - } + .mw-mmv-filepage-buttons { + margin-top: @margin-side / 2; + display: flex; + justify-content: center; + } } -@media only screen and ( max-width: @screen2 ) { - .fullImageLink { - /* stylelint-disable unit-no-unknown */ - margin: 0~'calc((100vw - @{page-width}) / -2)'; - /* stylelint-enable */ +.multipageimage { + display: flex; + justify-content: center; + overflow: visible; - .mw-filepage-resolutioninfo, - .fullMedia { - margin: 0; - } - } + .fullImageLink { + margin: 0 !important; + } + + >a>img { + margin: 0; + } + + .multipageimagenavbox { + display: flex; + align-items: center; + justify-content: space-between; + + .thumb { + margin: 0 !important; + + &:first-of-type { + order: -1; + } + + .lazy { + filter: none !important; + } + } + + hr, + br { + display: none; + } + } } -@media only screen and ( max-width: @screen1 ) { - #filetoc, - .fullImageLink, - .fullMedia { - margin: 0 -@margin-side; - } +@media only screen and (max-width: @screen2 ) { + .fullImageLink { + /* stylelint-disable unit-no-unknown */ + margin: 0~'calc((100vw - @{page-width}) / -2)'; + /* stylelint-enable */ - #filetoc { - padding: 0 @margin-side; - } + .mw-filepage-resolutioninfo, + .fullMedia { + margin: 0; + } + } } -@media ( prefers-color-scheme: dark ) { - #filetoc, - .fullMedia { - background-color: @dark-bg-10; - border-color: @dark-bg-20; - } +@media only screen and (max-width: @screen1 ) { - .fullImageLink { - background-color: @dark-bg-10; + #filetoc, + .fullImageLink, + .fullMedia { + margin: 0 -@margin-side; + } - .mw-filepage-resolutioninfo { - border-color: @dark-bg-20; - } - } - - #filetoc li a:hover { - background-color: @dark-bg-40; - } - - .mw_metadata td, - .mw_metadata th { - border: 1px solid @dark-bg-50; - } - - .mw_metadata th { - background-color: @dark-bg-10; - } - - .mw_metadata td { - background-color: @dark-bg-20; - } + #filetoc { + padding: 0 @margin-side; + } } + +@media (prefers-color-scheme: dark) { + + #filetoc, + .fullMedia { + background-color: @dark-bg-10; + border-color: @dark-bg-20; + } + + .fullImageLink { + background-color: @dark-bg-10; + + .mw-filepage-resolutioninfo { + border-color: @dark-bg-20; + } + } + + #filetoc li a:hover { + background-color: @dark-bg-40; + } + + .mw_metadata td, + .mw_metadata th { + border: 1px solid @dark-bg-50; + } + + .mw_metadata th { + background-color: @dark-bg-10; + } + + .mw_metadata td { + background-color: @dark-bg-20; + } +} \ No newline at end of file From 3822b0bf3a9cb61de9af442486f02d3ffcb4d350 Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Tue, 7 Jan 2020 12:44:10 -0500 Subject: [PATCH 2/4] Update common.less --- resources/components/common.less | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/resources/components/common.less b/resources/components/common.less index 2a677164..90e60517 100644 --- a/resources/components/common.less +++ b/resources/components/common.less @@ -54,10 +54,6 @@ dl { margin: @content-margin-top 0 0 0; } -p:first-of-type { - margin-top: 0; -} - pre, code, tt, @@ -513,6 +509,10 @@ a { line-height: inherit; overflow-wrap: break-word; } + + p:first-of-type { + margin-top: 0; + } h2 { font-size: @content-h2-size; From 85affcfc6fbedc7a24105f1626b9cded20806217 Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Tue, 7 Jan 2020 12:47:21 -0500 Subject: [PATCH 3/4] Update mediawiki.action.view.filepage.less --- .../mediawiki/action/mediawiki.action.view.filepage.less | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/skinStyles/mediawiki/action/mediawiki.action.view.filepage.less b/skinStyles/mediawiki/action/mediawiki.action.view.filepage.less index de3485fd..21b3c336 100644 --- a/skinStyles/mediawiki/action/mediawiki.action.view.filepage.less +++ b/skinStyles/mediawiki/action/mediawiki.action.view.filepage.less @@ -85,8 +85,14 @@ >a>img { margin: 0; } + + tr { + display: flex; + flex-direction: column; + } .multipageimagenavbox { + margin-top: 0.8rem; display: flex; align-items: center; justify-content: space-between; @@ -168,4 +174,4 @@ .mw_metadata td { background-color: @dark-bg-20; } -} \ No newline at end of file +} From d84b74f6887d3f14f73802d95bf429bec6c54d5a Mon Sep 17 00:00:00 2001 From: github-actions Date: Tue, 7 Jan 2020 17:49:15 +0000 Subject: [PATCH 4/4] Github CI lint - eslint/stylelint --- resources/components/common.less | 2 +- .../mediawiki.action.view.filepage.less | 258 +++++++++--------- 2 files changed, 129 insertions(+), 131 deletions(-) diff --git a/resources/components/common.less b/resources/components/common.less index f2a3b0d0..b6c9f85e 100644 --- a/resources/components/common.less +++ b/resources/components/common.less @@ -510,7 +510,7 @@ a { line-height: inherit; overflow-wrap: break-word; } - + p:first-of-type { margin-top: 0; } diff --git a/skinStyles/mediawiki/action/mediawiki.action.view.filepage.less b/skinStyles/mediawiki/action/mediawiki.action.view.filepage.less index 21b3c336..6c47c0ae 100644 --- a/skinStyles/mediawiki/action/mediawiki.action.view.filepage.less +++ b/skinStyles/mediawiki/action/mediawiki.action.view.filepage.less @@ -7,171 +7,169 @@ @import '../../../resources/mixins.less'; #filetoc { - margin: 0; - padding: 0; - overflow: auto; - white-space: nowrap; - display: flex; - border-color: @base-80; - transition: @transition-margin, @transition-padding; + margin: 0; + padding: 0; + overflow: auto; + white-space: nowrap; + display: flex; + border-color: @base-80; + transition: @transition-margin, @transition-padding; - li { - padding: 0; - display: block; + li { + padding: 0; + display: block; - a { - padding: @margin-side / 2 @margin-side; - display: block; - transition: @transition-background-quick; + a { + padding: @margin-side / 2 @margin-side; + display: block; + transition: @transition-background-quick; - &:hover { - background-color: @base-80; - } - } - } + &:hover { + background-color: @base-80; + } + } + } } .fullImageLink { - margin: 0 @negative-margin; - max-width: @footer-width - 10px; // 1280px - image size 4 - background-color: @base-90; + margin: 0 @negative-margin; + max-width: @footer-width - 10px; // 1280px - image size 4 + background-color: @base-90; - >a { - display: block; - pointer-events: none; + > a { + display: block; + pointer-events: none; - >img { - margin: 0 auto; - max-width: 100%; - height: auto; - display: block; - .boxshadow(1); - } - } + > img { + margin: 0 auto; + max-width: 100%; + height: auto; + display: block; + .boxshadow(1); + } + } - .mw-filepage-resolutioninfo { - padding: @margin-side / 2 @margin-side; - border: 1px solid @base-80; - text-align: center; - transition: @transition-margin, @transition-padding; - } + .mw-filepage-resolutioninfo { + padding: @margin-side / 2 @margin-side; + border: 1px solid @base-80; + text-align: center; + transition: @transition-margin, @transition-padding; + } } .fullMedia { - padding: @margin-side / 2 @margin-side; - border: 1px solid @base-80; - border-top: 0; - background-color: @base-90; - font-size: smaller; - text-align: center; - transition: @transition-margin; + padding: @margin-side / 2 @margin-side; + border: 1px solid @base-80; + border-top: 0; + background-color: @base-90; + font-size: smaller; + text-align: center; + transition: @transition-margin; - .mw-mmv-filepage-buttons { - margin-top: @margin-side / 2; - display: flex; - justify-content: center; - } + .mw-mmv-filepage-buttons { + margin-top: @margin-side / 2; + display: flex; + justify-content: center; + } } .multipageimage { - display: flex; - justify-content: center; - overflow: visible; + display: flex; + justify-content: center; + overflow: visible; - .fullImageLink { - margin: 0 !important; - } + .fullImageLink { + margin: 0 !important; + } - >a>img { - margin: 0; - } - - tr { - display: flex; - flex-direction: column; - } + > a > img { + margin: 0; + } - .multipageimagenavbox { - margin-top: 0.8rem; - display: flex; - align-items: center; - justify-content: space-between; + tr { + display: flex; + flex-direction: column; + } - .thumb { - margin: 0 !important; + .multipageimagenavbox { + margin-top: 0.8rem; + display: flex; + align-items: center; + justify-content: space-between; - &:first-of-type { - order: -1; - } + .thumb { + margin: 0 !important; - .lazy { - filter: none !important; - } - } + &:first-of-type { + order: -1; + } - hr, - br { - display: none; - } - } + .lazy { + filter: none !important; + } + } + + hr, + br { + display: none; + } + } } -@media only screen and (max-width: @screen2 ) { - .fullImageLink { - /* stylelint-disable unit-no-unknown */ - margin: 0~'calc((100vw - @{page-width}) / -2)'; - /* stylelint-enable */ +@media only screen and ( max-width: @screen2 ) { + .fullImageLink { + /* stylelint-disable unit-no-unknown */ + margin: 0~'calc((100vw - @{page-width}) / -2)'; + /* stylelint-enable */ - .mw-filepage-resolutioninfo, - .fullMedia { - margin: 0; - } - } + .mw-filepage-resolutioninfo, + .fullMedia { + margin: 0; + } + } } -@media only screen and (max-width: @screen1 ) { +@media only screen and ( max-width: @screen1 ) { + #filetoc, + .fullImageLink, + .fullMedia { + margin: 0 -@margin-side; + } - #filetoc, - .fullImageLink, - .fullMedia { - margin: 0 -@margin-side; - } - - #filetoc { - padding: 0 @margin-side; - } + #filetoc { + padding: 0 @margin-side; + } } -@media (prefers-color-scheme: dark) { +@media ( prefers-color-scheme: dark ) { + #filetoc, + .fullMedia { + background-color: @dark-bg-10; + border-color: @dark-bg-20; + } - #filetoc, - .fullMedia { - background-color: @dark-bg-10; - border-color: @dark-bg-20; - } + .fullImageLink { + background-color: @dark-bg-10; - .fullImageLink { - background-color: @dark-bg-10; + .mw-filepage-resolutioninfo { + border-color: @dark-bg-20; + } + } - .mw-filepage-resolutioninfo { - border-color: @dark-bg-20; - } - } + #filetoc li a:hover { + background-color: @dark-bg-40; + } - #filetoc li a:hover { - background-color: @dark-bg-40; - } + .mw_metadata td, + .mw_metadata th { + border: 1px solid @dark-bg-50; + } - .mw_metadata td, - .mw_metadata th { - border: 1px solid @dark-bg-50; - } + .mw_metadata th { + background-color: @dark-bg-10; + } - .mw_metadata th { - background-color: @dark-bg-10; - } - - .mw_metadata td { - background-color: @dark-bg-20; - } + .mw_metadata td { + background-color: @dark-bg-20; + } }