Dr0ptp4kt has submitted this change and it was merged.
Change subject: Fix for stretched native header-footer issue.
......................................................................
Fix for stretched native header-footer issue.
Fixes the too-wide native header/footer issue on pages like:
- "Bern": see "Historic population" section - its graph can
now be scrolled side-to-side.
- "Goatfish": see "Timeline" section - the timeline can
scroll now too.
Fixes issue where edit pencils were sometimes staggered from
right margin. Now they maintain consistent margin.
Fixes issue where section text sometimes had extra whitespace
on the right.
Removed crufty experimental css style - upstream css was
updated recently to improve table borders.
Added margin above top section text per Vibha's spec.
Change-Id: Iff9e2785e5fc219329184d9f04f68c3095425c92
---
M wikipedia/Categories/MWKSection+DisplayHtml.m
M www/about.html
M www/abusefilter.html
M www/index.html
M www/js/transforms.js
M www/less/styleoverrides.less
6 files changed, 38 insertions(+), 76 deletions(-)
Approvals:
Dr0ptp4kt: Verified; Looks good to me, approved
Fjalapeno: Looks good to me, but someone else must approve
diff --git a/wikipedia/Categories/MWKSection+DisplayHtml.m
b/wikipedia/Categories/MWKSection+DisplayHtml.m
index 0dae566..5400f4f 100644
--- a/wikipedia/Categories/MWKSection+DisplayHtml.m
+++ b/wikipedia/Categories/MWKSection+DisplayHtml.m
@@ -11,10 +11,11 @@
BOOL isMainPage = [[SessionSingleton sharedInstance]
articleIsAMainArticle:[SessionSingleton sharedInstance].currentArticle];
return
- [NSString stringWithFormat:@"<div
id='section_heading_and_content_block_%ld'>%@<div
id='content_block_%ld'>%@</div></div>",
+ [NSString stringWithFormat:@"<div
id='section_heading_and_content_block_%ld'>%@<div id='content_block_%ld'
class='content_block'>%@%@</div></div>",
(long)self.sectionId,
(isMainPage ? @"" : [self getHeaderTag]),
(long)self.sectionId,
+ ((self.sectionId == 0) && !isMainPage) ? [self getEditPencilAnchor] :
@"",
html
];
}
@@ -25,14 +26,8 @@
if (self.sectionId == 0) {
// Lead section.
// The lead section is a special case because of the native component
used
- // for lead image styling. Its 'section_heading' can be a div (no need
for
- // 'H' tag) since it won't need to display any text. The title text is
now
- // shown by the native component.
- return
- [NSString stringWithFormat:@"%@<div class='section_heading'
data-id='0' id='0'>%@</div>",
- [self getLeadImagePlaceholderDiv],
- pencilAnchor
- ];
+ // for lead image styling. The title text is now shown by the native
component.
+ return [self getLeadImagePlaceholderDiv];
} else {
// Non-lead section.
NSInteger headingTagSize = [self getHeadingTagSize];
@@ -65,7 +60,8 @@
- (NSString*)getEditPencilAnchor {
return
- [NSString stringWithFormat:@"<a class='edit_section_button'
data-action='edit_section' data-id='%ld'></a>",
+ [NSString stringWithFormat:@"<a class='edit_section_button'
data-action='edit_section' data-id='%ld' id='edit_section_button_%ld'></a>",
+ (long)self.sectionId,
(long)self.sectionId
];
}
diff --git a/www/about.html b/www/about.html
index 88d8be6..c34e7e1 100644
--- a/www/about.html
+++ b/www/about.html
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
- <meta name="viewport" id="viewport" content="width=device-width,
initial-scale=1.0, user-scalable=yes, minimum-scale=1.0, maximum-scale=1.0">
+ <meta name="viewport" id="viewport" content="width=device-width,
user-scalable=no">
<style type="text/css">
diff --git a/www/abusefilter.html b/www/abusefilter.html
index 5e3f0e0..66e9eb9 100644
--- a/www/abusefilter.html
+++ b/www/abusefilter.html
@@ -3,7 +3,7 @@
<head>
<script src="bundle.js"></script>
- <meta name="viewport" id="viewport" content="width=device-width,
initial-scale=1.0, user-scalable=yes, minimum-scale=1.0, maximum-scale=1.0">
+ <meta name="viewport" id="viewport" content="width=device-width,
user-scalable=no">
<link href="abusefilter.css" rel="stylesheet" type="text/css"></link>
<base href="https://wikipedia.org";>
diff --git a/www/index.html b/www/index.html
index 81e4846..7c6b799 100644
--- a/www/index.html
+++ b/www/index.html
@@ -3,7 +3,7 @@
<head>
<script src="bundle.js"></script>
- <meta name="viewport" id="viewport" content="width=device-width,
initial-scale=1.0, user-scalable=yes, minimum-scale=1.0, maximum-scale=1.0">
+ <meta name="viewport" id="viewport" content="width=device-width,
user-scalable=no">
<link href="styles.css" rel="stylesheet" type="text/css"></link>
<link href="footer.css" rel="stylesheet" type="text/css"></link>
<link href="styleoverrides.css" rel="stylesheet" type="text/css"></link>
diff --git a/www/js/transforms.js b/www/js/transforms.js
index 45f471d..1478d42 100644
--- a/www/js/transforms.js
+++ b/www/js/transforms.js
@@ -16,6 +16,14 @@
var allPs = block_0.getElementsByTagName( "p" );
if(!allPs) return;
+ var edit_section_button_0 = content.getElementById(
"edit_section_button_0" );
+ if(!edit_section_button_0) return;
+
+ function moveAfter(newNode, referenceNode) {
+ // Based on: http://stackoverflow.com/a/4793630/135557
+
referenceNode.parentNode.insertBefore(newNode.parentNode.removeChild(newNode),
referenceNode.nextSibling);
+ }
+
for ( var i = 0; i < allPs.length; i++ ) {
var p = allPs[i];
@@ -57,9 +65,8 @@
if(pIsMostlyImage) continue;
*/
-
- // Move the P!
- block_0.insertBefore(p.parentNode.removeChild(p), block_0.firstChild);
+ // Move the P! Place it just after the lead section edit button.
+ moveAfter(p, edit_section_button_0);
// But only move one P!
break;
diff --git a/www/less/styleoverrides.less b/www/less/styleoverrides.less
index 33cde3f..035efff 100644
--- a/www/less/styleoverrides.less
+++ b/www/less/styleoverrides.less
@@ -12,65 +12,6 @@
-/* The edit pencil needs to be forced to be a bit bigger. */
-.edit_section_button {
- display:inline-block !important;
- width:38px !important;
- height:42px !important;
- background-size: 36px 36px !important;
- background-repeat: no-repeat !important;
- background-position:center !important;
-}
-
-
-
-
-
-/* - - - - - - - - - - - - - - - - - - -
-
-Experimental attempt at getting rid of hideous gray and black borders
everywhere
-while still retaining visual separation between elements.
-
-I like to think this makes 10 things look better for every 1 it doesn't...
-
-Forces consistent, white spacing with specific elements. Note: this has no
effect
-if border-style was none. Used 3px to maintain visual separation. Used white
to
-convert all hideous gray borders into far less hideous white spacing. White
has an
-added benefit of making nested borders not look so awful as they blend with
each
-other and the background.
-*/
-
-table,tr,tbody,td,th,div,span {
- border-width: 2px !important;
- border-color: #fff !important;
-}
-td {
- /*
- Only if the background color isn't set, set a slight gray. This is done to
work
- in conjunction with experimental white border styling. (If we don't do a
slight
- gray for unset td background colors, the white border styling doesn't
stand out
- against the body tag's white background.)
- */
- background-color: #f7f7f7; /* Don't use important keyword for this one! */
-}
-hr:not(.mw-footer-divider) {
- border-width: 0px !important;
- height: 2px !important;
- background-color: #fff !important;
-}
-img {
- border-width: 1px !important;
- border-color: #fff !important;
-}
-/* - - - - - - - - - - - - - - - - - - -
*/
-
-
-
-
-
-
-
-
-
/* Lead Image Styling overrides */
/* Hats off! This info will appear within native interface elements. */
@@ -79,5 +20,23 @@
/* Override the top margin - needed so the lead image spacer can control top
margin. */
.content {margin-top:0px;}
+
+
+
+
+/*
+Ensure things which are too wide for the screen can be scrolled sideways and
don't
+cause the web view to extend wider than the device width. Needed because the
+native header and footer uses the web view width to determine its own width.
+*/
+.content_block {
+ clear:both;
+ overflow-X: auto;
+}
+
/* Override top padding on first edit pencil so it roughly aligns with first 2
lines of text. */
-#section_heading_and_content_block_0 .section_heading
.edit_section_button{margin-top:6px;}
+#edit_section_button_0{
+ margin-top:6px;
+}
+
+#section_heading_and_content_block_0 {margin-top:13px;}
--
To view, visit https://gerrit.wikimedia.org/r/194450
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Iff9e2785e5fc219329184d9f04f68c3095425c92
Gerrit-PatchSet: 3
Gerrit-Project: apps/ios/wikipedia
Gerrit-Branch: master
Gerrit-Owner: Mhurd <[email protected]>
Gerrit-Reviewer: Bgerstle <[email protected]>
Gerrit-Reviewer: Dr0ptp4kt <[email protected]>
Gerrit-Reviewer: Fjalapeno <[email protected]>
Gerrit-Reviewer: Mhurd <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
