jenkins-bot has submitted this change and it was merged. Change subject: Move styles related to content to typography*.less ......................................................................
Move styles related to content to typography*.less This will make it easier to share styles with mobile apps. See further patches. In the process remove tag selectors, which are too specific, from ul.gallery subrules. See https://trello.com/b/BW5L3PEn/mobile-app-sprint-31-main-article-browse-search for further information on motivation. Change-Id: I7547340664a3f4e52d217ca10acc68891a8f7f41 --- M includes/Resources.php M less/common/common.less D less/common/commonNew.less M less/common/typography.less M less/common/typographyNew.less 5 files changed, 210 insertions(+), 224 deletions(-) Approvals: Jdlrobson: Looks good to me, approved jenkins-bot: Verified diff --git a/includes/Resources.php b/includes/Resources.php index 1eeed75..a6bbd4d 100644 --- a/includes/Resources.php +++ b/includes/Resources.php @@ -156,7 +156,6 @@ 'mobile.styles.beta' => $wgMFMobileResourceBoilerplate + array( 'styles' => array( 'less/common/uiNew.less', - 'less/common/commonNew.less', 'less/common/typographyNew.less', 'less/common/secondaryPageActions.less', ), diff --git a/less/common/common.less b/less/common/common.less index cfbc4fe..c9bf4bd 100644 --- a/less/common/common.less +++ b/less/common/common.less @@ -124,40 +124,6 @@ min-width: 80%; } -a.external { - .background-image-svg( 'images/external-link-ltr-icon.svg', 'images/external-link-ltr-icon.png' ); - background-repeat: no-repeat; - background-position: center right; - padding-right: 13px; -} - -/* Galleries */ -/* FIXME: Doesn't support parameters in https://en.wikipedia.org/wiki/Help:Gallery_tag */ -/* See https://www.mediawiki.org/wiki/Help:Images#Rendering_a_gallery_of_images */ -ul.gallery { - li.gallerybox { - display: inline-block; - - div.thumb { - - img { - display: block; - margin: 0 auto; - } - } - - div.gallerytext { - overflow: hidden; - padding: 2px 4px; - word-wrap: break-word; - } - } -} - -pre { - white-space: pre-wrap; -} - a { text-decoration: none; color: #002bb8; @@ -181,26 +147,11 @@ color: @redBase; } -img.thumbborder { - border: 1px solid #ccc; -} - - /* Plainlinks - this can be used to switch * off special external link styling */ .plainlinks a { background: none !important; padding: 0 !important; -} - -strong, -b { - font-weight: bold; -} - -em, -i { - font-style: italic; } fieldset { @@ -228,135 +179,6 @@ li { display: inline-block; margin-right: 8px; - } -} - -// Code -// -// Use this solely for blocks of computer code. -// -// Markup: -// <code> -// body { -// color:red; -// } -// </code> -// -// Styleguide 1.4. -code, -// Preformatted text -// -// Use on text where whitespace is significant and the content should not be formatted. -// -// Markup: -// <pre> -// body { -// color:red; -// } -// </pre> -// -// Styleguide 1.5. -pre { - padding: 0.2em 0.5em; - font-family: monospace; - border: solid 1px #CCC; -} - -pre { - padding: 1em; -} - -.content { - // Deal with long links (bug 60387) - word-wrap: break-word; - - // Linker.php - .thumb { - .thumbinner { - margin: 5px auto; - max-width: 100%; - - > div { - float: none !important; - width: auto !important; - clear: both !important; - } - } - - .thumbcaption { - margin: 5px 10px 0; - text-align: center; - width: auto !important; - } - - /* bug 20030 */ - .noresize { - width: 100%; - overflow-x: auto; - - img { - max-width: none !important; - } - } - } - - // Prevent inline styles on images in wikitext - // Note we restrict to img's to avoid conflicts with VisualEditor shields - // See bug 62460 - a > img { - // make sure that images in articles don't cause a horizontal scrollbar - // on small screens - max-width: 100% !important; - height: auto !important; - } - - ul { - list-style: square inside; - } - - ol { - list-style: decimal inside; - } - - table { - margin: 1em 0; - - /* following 4 rules are needed for scrolling */ - overflow: auto; /* for browsers that don't support overflow-y */ - overflow-y: hidden; - overflow-x: auto; - display: block; - width: 100% !important; - - td, - th { - padding: 3px; - border: 1px @grayLight solid; - } - - th { - font-weight: bold; - background-color: #f2f2f2; - text-align: center; - } - - caption { - display: block; - text-align: left; - } - } - - // Hide the image magnification icon normally displayed in image captions - div.magnify { - display: none; - } - - // Generic class name needed - .return-link, - #mw-mf-last-modified { - display: block; - font-size: .9em; - margin-top: 1.5em; } } diff --git a/less/common/commonNew.less b/less/common/commonNew.less deleted file mode 100644 index 58b34d6..0000000 --- a/less/common/commonNew.less +++ /dev/null @@ -1,44 +0,0 @@ -@import "minerva.variables"; -@import "minerva.mixins"; - -.beta, .alpha { - .content { - // Thumbnails - // - // Thumbnail images should be rendered within a thumb class - // - // Markup: - // <div class="content"> - // <div class="thumb"><img src="common/images/arrow-left.png"></div> - // </div> - // - // Styleguide 1.6. - .thumb { - margin: .6em 0; - /* resets */ - border: none; - border-radius: 0; - background-color: transparent; - text-align: inherit; - - .thumbinner { - margin: 0 auto; - } - } - - // Although .thumbcaption is normally inside .thumb, it isn't in VisualEditor - .thumbcaption { - margin: 0; - font-size: .8em; - line-height: 1.5; - text-align: left; - padding: 0 !important; - color: @grayMedium; - } - - // Avoid line-height issues caused by sup - .sup { - line-height: 0; - } - } -} diff --git a/less/common/typography.less b/less/common/typography.less index 27e93de..4972d90 100644 --- a/less/common/typography.less +++ b/less/common/typography.less @@ -32,6 +32,8 @@ .content { margin: .8em @contentMargin 0; + // Deal with long links (bug 60387) + word-wrap: break-word; // Headings in mobile // @@ -80,6 +82,38 @@ border-radius: 5px; background: #f9f9f9; text-align: center; + + // Linker.php + .thumbinner { + margin: 5px auto; + max-width: 100%; + + > div { + float: none !important; + width: auto !important; + clear: both !important; + } + } + + .thumbcaption { + margin: 5px 10px 0; + text-align: center; + width: auto !important; + } + + /* bug 20030 */ + .noresize { + width: 100%; + overflow-x: auto; + + img { + max-width: none !important; + } + } + } + + .thumbborder { + border: 1px solid #ccc; } ol, @@ -89,6 +123,143 @@ margin-left: 1em; } } + + // Prevent inline styles on images in wikitext + // Note we restrict to img's to avoid conflicts with VisualEditor shields + // See bug 62460 + a > img { + // make sure that images in articles don't cause a horizontal scrollbar + // on small screens + max-width: 100% !important; + height: auto !important; + } + + ul { + list-style: square inside; + } + + ol { + list-style: decimal inside; + } + + table { + margin: 1em 0; + + /* following 4 rules are needed for scrolling */ + overflow: auto; /* for browsers that don't support overflow-y */ + overflow-y: hidden; + overflow-x: auto; + display: block; + width: 100% !important; + + td, + th { + padding: 3px; + border: 1px @grayLight solid; + } + + th { + font-weight: bold; + background-color: #f2f2f2; + text-align: center; + } + + caption { + display: block; + text-align: left; + } + } + + // Hide the image magnification icon normally displayed in image captions + div.magnify { + display: none; + } + + // Generic class name needed + .return-link, + #mw-mf-last-modified { + display: block; + font-size: .9em; + margin-top: 1.5em; + } +} + +strong, +b { + font-weight: bold; +} + +em, +i { + font-style: italic; +} + +a.external { + .background-image-svg( 'images/external-link-ltr-icon.svg', 'images/external-link-ltr-icon.png' ); + background-repeat: no-repeat; + background-position: center right; + padding-right: 13px; +} + +// Galleries +// +// FIXME: Doesn't support parameters in https://en.wikipedia.org/wiki/Help:Gallery_tag */ +// See https://www.mediawiki.org/wiki/Help:Images#Rendering_a_gallery_of_images */ +// +// Styleguide 1.3. +ul.gallery { + .gallerybox { + display: inline-block; + + .thumb { + img { + display: block; + margin: 0 auto; + } + } + + .gallerytext { + overflow: hidden; + padding: 2px 4px; + word-wrap: break-word; + } + } +} + +// Code +// +// Use this solely for blocks of computer code. +// +// Markup: +// <code> +// body { +// color:red; +// } +// </code> +// +// Styleguide 1.4. +code, +// Preformatted text +// +// Use on text where whitespace is significant and the content should not be formatted. +// +// Markup: +// <pre> +// body { +// color:red; +// } +// </pre> +// +// Styleguide 1.5. +pre { + padding: 0.2em 0.5em; + font-family: monospace; + border: solid 1px #CCC; +} + +pre { + white-space: pre-wrap; + padding: 1em; } dl { @@ -147,7 +318,7 @@ // Markup: // <blockquote>In the end, it's not the years in your life that count. It's the life in your years.</blockquote> // -// Styleguide 1.3. +// Styleguide 1.6. blockquote { quotes: "\201C" "\201D"; padding: 1em 0 1em 10px; diff --git a/less/common/typographyNew.less b/less/common/typographyNew.less index d057a9e..83b6caf 100644 --- a/less/common/typographyNew.less +++ b/less/common/typographyNew.less @@ -22,6 +22,44 @@ p { margin: .5em 0 1em 0; } + + // Thumbnails + // + // Thumbnail images should be rendered within a thumb class + // + // Markup: + // <div class="content"> + // <div class="thumb"><img src="common/images/arrow-left.png"></div> + // </div> + // + // Styleguide 1.6. + .thumb { + margin: .6em 0; + /* resets */ + border: none; + border-radius: 0; + background-color: transparent; + text-align: inherit; + + .thumbinner { + margin: 0 auto; + } + } + + // Although .thumbcaption is normally inside .thumb, it isn't in VisualEditor + .thumbcaption { + margin: 0; + font-size: .8em; + line-height: 1.5; + text-align: left; + padding: 0 !important; + color: @grayMedium; + } + + // Avoid line-height issues caused by sup + .sup { + line-height: 0; + } } blockquote { -- To view, visit https://gerrit.wikimedia.org/r/134473 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I7547340664a3f4e52d217ca10acc68891a8f7f41 Gerrit-PatchSet: 3 Gerrit-Project: mediawiki/extensions/MobileFrontend Gerrit-Branch: master Gerrit-Owner: JGonera <jgon...@wikimedia.org> Gerrit-Reviewer: Awjrichards <aricha...@wikimedia.org> Gerrit-Reviewer: JGonera <jgon...@wikimedia.org> Gerrit-Reviewer: Jdlrobson <jrob...@wikimedia.org> Gerrit-Reviewer: Kaldari <rkald...@wikimedia.org> Gerrit-Reviewer: Yuvipanda <yuvipa...@gmail.com> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
