diff --git a/bin/Release/AppX/www/-/s/css_modules/mobile.css b/bin/Release/AppX/www/-/s/css_modules/mobile.css index 4088363c..26288544 100644 --- a/bin/Release/AppX/www/-/s/css_modules/mobile.css +++ b/bin/Release/AppX/www/-/s/css_modules/mobile.css @@ -14,6 +14,11 @@ margin: 0.5em 0 1em 0; } +table.infobox th, table.infobox td { /*Added GK*/ + border-bottom: 1px solid #eaecf0; + padding: 7px 10px; +} + .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6 { padding: 0.5em 0; } diff --git a/bin/Release/AppX/www/js/app.js b/bin/Release/AppX/www/js/app.js index ab7d117c..23918dbe 100644 --- a/bin/Release/AppX/www/js/app.js +++ b/bin/Release/AppX/www/js/app.js @@ -866,21 +866,31 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles cssArray$ += cssArray$.match(/-\/s\/css_modules\/content\.parsoid\.css/i) ? "" : '\r\n'; cssArray$ += cssArray$.match(/-\/s\/css_modules\/inserted_style_mobile\.css/i) ? "" : '\r\n'; cssArray$ += cssArray$.match(/-\/s\/css_modules\/mobile\.css/i) ? "" : '\r\n'; - htmlArticle = htmlArticle.replace(/(]*mw-body[^>]+style[^>]+padding\s*:\s*)1em/i, "$10 1em"); + //Allow images to float right or left htmlArticle = htmlArticle.replace(/class\s*=\s*["']\s*thumb\s+tright\s*["']\s*/ig, 'style="float: right; clear: right; margin-left: 1.4em;"'); htmlArticle = htmlArticle.replace(/class\s*=\s*["']\s*thumb\s+tleft\s*["']\s*/ig, 'style="float: left; clear: left; margin-right: 1.4em;"'); + //Add styling to image captions that is hard-coded in Wikipedia mobile htmlArticle = htmlArticle.replace(/class\s*=\s*["']\s*thumbcaption\s*["']\s*/ig, 'style="margin: 0.5em 0 0.5em; font-size: 0.8em; line-height: 1.5; padding: 0 !important; color: #54595d; width: auto !important;"'); - //Move info-box below lead - htmlArticle = htmlArticle.replace(/(]*infobox)[\s\S]+?<\/table>[^<]*)(]*>(?:(?=([^<]+))\3|<(?!p\b[^>]*>))*?<\/p>)/ig, "$2$1"); + //Move info-box below lead paragraph like on Wikipedia mobile + htmlArticle = htmlArticle.replace(/(]*infobox)[\s\S]+?<\/table>[^<]*)(]*>(?:(?=([^<]+))\3|<(?!p\b[^>]*>))*?<\/p>)/ig, "$2$1"); + //Set infobox styling hard-coded in Wikipedia mobile htmlArticle = htmlArticle.replace(/(table\s+(?=[^>]*class\s*=\s*["'][^"']*infobox)[^>]*style\s*=\s*["'][^"']+[^;'"]);?\s*["']/ig, '$1; position: relative; border: 1px solid #eaecf0; text-align: left; background-color: #f8f9fa;"'); + //Wrap

tags in
to control bottom border width if there's an infobox + htmlArticle = htmlArticle.match(/table\s+(?=[^>]*class\s*=\s*["'][^"']*infobox)/i) ? htmlArticle.replace(/()/ig, '
$1
') : htmlArticle; } if (cssSource == "desktop") { //If user has selected desktop display mode... + //Ensure white background colour htmlArticle = htmlArticle.replace(/class\s*=\s*["']\s*mw-body\s*["']\s*/ig, 'style="background-color: white; padding: 1em; border-width: 0px; max-width: 55.8em; margin: 0 auto 0 auto;"'); - htmlArticle = htmlArticle.replace(/]+titleHeading[^>]+>\s*<\/h1>\s*/ig, ""); //Void empty header title + //Void empty header title + htmlArticle = htmlArticle.replace(/]+titleHeading[^>]+>\s*<\/h1>\s*/ig, ""); + } + if (cssSource != "zimfile") { //For all cases except where user wants exactly what's in the zimfile... + //Reduce the hard-coded top padding to 0 + htmlArticle = htmlArticle.replace(/(]*mw-body[^>]+style[^>]+padding\s*:\s*)1em/i, "$10 1em"); } htmlArticle = htmlArticle.replace(/\s*(<\/head>)/i, cssArray$ + "$1"); console.log("All CSS resolved"); - injectHTML(htmlArticle); //This passes the revised HTML to the image and JS subroutine... + injectHTML(htmlArticle); //Pass the revised HTML to the image and JS subroutine... } else { //console.log("Waiting for " + (cssArray.length - blobArray.length) + " out of " + cssArray.length + " to resolve...") } diff --git a/bld/Release/PackageLayout/www/-/s/css_modules/mobile.css b/bld/Release/PackageLayout/www/-/s/css_modules/mobile.css index 4088363c..26288544 100644 --- a/bld/Release/PackageLayout/www/-/s/css_modules/mobile.css +++ b/bld/Release/PackageLayout/www/-/s/css_modules/mobile.css @@ -14,6 +14,11 @@ margin: 0.5em 0 1em 0; } +table.infobox th, table.infobox td { /*Added GK*/ + border-bottom: 1px solid #eaecf0; + padding: 7px 10px; +} + .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6 { padding: 0.5em 0; } diff --git a/bld/Release/PackageLayout/www/js/app.js b/bld/Release/PackageLayout/www/js/app.js index e517bdc9..23918dbe 100644 --- a/bld/Release/PackageLayout/www/js/app.js +++ b/bld/Release/PackageLayout/www/js/app.js @@ -858,7 +858,7 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles cssArray[i] = cssArray[i].replace(/(href\s*=\s*["'])([^"']+)/i, "$1" + blobArray[i]); //DEV note: do not attempt to add onload="URL.revokeObjectURL...)": it fires before the //stylesheet changes have been painted and causes a crash... - //Consider using oneTimeOnly= true when creating blob instead + //Use oneTimeOnly=true when creating blob instead (implemented above) } htmlArticle = htmlArticle.replace(regexpSheetHref, ""); //Void existing stylesheets var cssArray$ = "\r\n" + cssArray.join("\r\n") + "\r\n"; @@ -866,20 +866,31 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles cssArray$ += cssArray$.match(/-\/s\/css_modules\/content\.parsoid\.css/i) ? "" : '\r\n'; cssArray$ += cssArray$.match(/-\/s\/css_modules\/inserted_style_mobile\.css/i) ? "" : '\r\n'; cssArray$ += cssArray$.match(/-\/s\/css_modules\/mobile\.css/i) ? "" : '\r\n'; + //Allow images to float right or left htmlArticle = htmlArticle.replace(/class\s*=\s*["']\s*thumb\s+tright\s*["']\s*/ig, 'style="float: right; clear: right; margin-left: 1.4em;"'); htmlArticle = htmlArticle.replace(/class\s*=\s*["']\s*thumb\s+tleft\s*["']\s*/ig, 'style="float: left; clear: left; margin-right: 1.4em;"'); + //Add styling to image captions that is hard-coded in Wikipedia mobile htmlArticle = htmlArticle.replace(/class\s*=\s*["']\s*thumbcaption\s*["']\s*/ig, 'style="margin: 0.5em 0 0.5em; font-size: 0.8em; line-height: 1.5; padding: 0 !important; color: #54595d; width: auto !important;"'); - //Move info-box below lead - htmlArticle = htmlArticle.replace(/(]*infobox)[\s\S]+?<\/table>[^<]*)(]*>(?:(?=([^<]+))\3|<(?!p\b[^>]*>))*?<\/p>)/ig, "$2$1"); + //Move info-box below lead paragraph like on Wikipedia mobile + htmlArticle = htmlArticle.replace(/(]*infobox)[\s\S]+?<\/table>[^<]*)(]*>(?:(?=([^<]+))\3|<(?!p\b[^>]*>))*?<\/p>)/ig, "$2$1"); + //Set infobox styling hard-coded in Wikipedia mobile htmlArticle = htmlArticle.replace(/(table\s+(?=[^>]*class\s*=\s*["'][^"']*infobox)[^>]*style\s*=\s*["'][^"']+[^;'"]);?\s*["']/ig, '$1; position: relative; border: 1px solid #eaecf0; text-align: left; background-color: #f8f9fa;"'); + //Wrap

tags in
to control bottom border width if there's an infobox + htmlArticle = htmlArticle.match(/table\s+(?=[^>]*class\s*=\s*["'][^"']*infobox)/i) ? htmlArticle.replace(/()/ig, '
$1
') : htmlArticle; } if (cssSource == "desktop") { //If user has selected desktop display mode... + //Ensure white background colour htmlArticle = htmlArticle.replace(/class\s*=\s*["']\s*mw-body\s*["']\s*/ig, 'style="background-color: white; padding: 1em; border-width: 0px; max-width: 55.8em; margin: 0 auto 0 auto;"'); - htmlArticle = htmlArticle.replace(/]+titleHeading[^>]+>\s*<\/h1>\s*/ig, ""); //Void empty header title + //Void empty header title + htmlArticle = htmlArticle.replace(/]+titleHeading[^>]+>\s*<\/h1>\s*/ig, ""); + } + if (cssSource != "zimfile") { //For all cases except where user wants exactly what's in the zimfile... + //Reduce the hard-coded top padding to 0 + htmlArticle = htmlArticle.replace(/(]*mw-body[^>]+style[^>]+padding\s*:\s*)1em/i, "$10 1em"); } htmlArticle = htmlArticle.replace(/\s*(<\/head>)/i, cssArray$ + "$1"); console.log("All CSS resolved"); - injectHTML(htmlArticle); //This passes the revised HTML to the image and JS subroutine... + injectHTML(htmlArticle); //Pass the revised HTML to the image and JS subroutine... } else { //console.log("Waiting for " + (cssArray.length - blobArray.length) + " out of " + cssArray.length + " to resolve...") } diff --git a/www/-/s/css_modules/mobile.css b/www/-/s/css_modules/mobile.css index 4088363c..26288544 100644 --- a/www/-/s/css_modules/mobile.css +++ b/www/-/s/css_modules/mobile.css @@ -14,6 +14,11 @@ margin: 0.5em 0 1em 0; } +table.infobox th, table.infobox td { /*Added GK*/ + border-bottom: 1px solid #eaecf0; + padding: 7px 10px; +} + .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6 { padding: 0.5em 0; } diff --git a/www/js/app.js b/www/js/app.js index ee147e9a..23918dbe 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -872,9 +872,11 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles //Add styling to image captions that is hard-coded in Wikipedia mobile htmlArticle = htmlArticle.replace(/class\s*=\s*["']\s*thumbcaption\s*["']\s*/ig, 'style="margin: 0.5em 0 0.5em; font-size: 0.8em; line-height: 1.5; padding: 0 !important; color: #54595d; width: auto !important;"'); //Move info-box below lead paragraph like on Wikipedia mobile - htmlArticle = htmlArticle.replace(/(]*infobox)[\s\S]+?<\/table>[^<]*)(]*>(?:(?=([^<]+))\3|<(?!p\b[^>]*>))*?<\/p>)/ig, "$2$1"); + htmlArticle = htmlArticle.replace(/(]*infobox)[\s\S]+?<\/table>[^<]*)(]*>(?:(?=([^<]+))\3|<(?!p\b[^>]*>))*?<\/p>)/ig, "$2$1"); //Set infobox styling hard-coded in Wikipedia mobile htmlArticle = htmlArticle.replace(/(table\s+(?=[^>]*class\s*=\s*["'][^"']*infobox)[^>]*style\s*=\s*["'][^"']+[^;'"]);?\s*["']/ig, '$1; position: relative; border: 1px solid #eaecf0; text-align: left; background-color: #f8f9fa;"'); + //Wrap

tags in
to control bottom border width if there's an infobox + htmlArticle = htmlArticle.match(/table\s+(?=[^>]*class\s*=\s*["'][^"']*infobox)/i) ? htmlArticle.replace(/()/ig, '
$1
') : htmlArticle; } if (cssSource == "desktop") { //If user has selected desktop display mode... //Ensure white background colour