Fix for issue #345 and other improvements, notes in CHANGELOG.md

CHANGELOG.md

@@ -2,6 +2,8 @@
 * [bug, CSS] Addressing Issue #342 Search Button Alignment
 * [bug, compatibility] Removing fastclick.js as all modern touch devices handle delay now Issue #336
 * [code] Removing unused js from `/assets/scripts/vendor`
+* [CSS, enhancement] Images MW way which fixes Issue #345
+* [bug, js] Fix to foreground.js script, edit icon (temporary as a long term edit vs visual editor is needed with CSS)
 
 ## Version 2.2
 * [bug][compatibility] Fix for MW version 1.32 - wfRunHooks() to Hooks::run() 

assets/scripts/foreground.js

@@ -16,6 +16,7 @@ jQuery(document).ready(function() {
   // Append font-awesome icons
   jQuery('[id^=ca-nstab] a').prepend('<div class="drop-icon"><i class="fa fa-file fa-fw"></i></div>')
   jQuery('li#ca-talk a').prepend('<div class="drop-icon"><i class="fa fa-comments-o fa-fw"></i></div>')
+  jQuery('li#ca-edit a').prepend('<div class="drop-icon"><i class="fa fa-pencil-square-o fa-fw"></i></div>')
   jQuery('li#ca-form_edit a').prepend('<div class="drop-icon"><i class="fa fa-pencil-square fa-fw"></i></div>')
   jQuery('li#ca-formedit a').prepend('<div class="drop-icon"><i class="fa fa-pencil-square fa-fw"></i></div>')
   jQuery('li#ca-history a').prepend('<div class="drop-icon"><i class="fa fa-history fa-fw"></i></div>')

assets/stylesheets/foreground.css

@@ -1562,4 +1562,77 @@ td.htmlform-tip {
 .prefcache {
 	font-size: 90%;
 	margin-top: 1em;
+}
+
+/* Images the MediaWiki way */
+
+/* Images, Thumbs and Captions */
+.thumbinner {
+    border: 1px solid #c8ccd1;
+    padding: 3px;
+    background-color: #f8f9fa;
+    font-size: 94%;
+    text-align: center;
+    overflow: hidden;
+    margin: auto;
+    max-width: 100%;
+}
+.thumb.tright, .thumb.left {
+    max-width: 100%;
+}
+.thumbcaption {
+    border: 0;
+    line-height: 1.4em;
+    padding: 3px;
+    font-size: 94%;
+    text-align: left;
+}
+.magnify a {
+    display: block;
+    text-indent: 15px;
+    white-space: nowrap;
+    overflow: hidden;
+    width: 15px;
+    height: 11px;
+}
+.mw-content-ltr .magnify a {
+    background-image: url(/w/resources/src/mediawiki.skinning/images/magnify-clip-ltr.png);
+}
+
+/* Float right and left styles - Make all MW images responsive for mobile when floated  */
+ 
+.floatright, .tright,
+table.floatright {
+    margin: 0 0 .5em .5em;
+    border: 0;
+}
+ 
+.floatleft,.tleft
+table.floatleft {
+    margin: 0 .5em .5em 0;
+    border: 0;
+}
+
+.tnone {
+    margin: .5rem 0;
+    border: 0;
+}
+
+.floatnone img {
+    margin: .5rem 0;
+}
+
+/* Kill the float for smaller screens and make them align center. */
+
+@media only screen and (max-width: 640px) { 
+    .floatright,
+    table.floatright,
+    .floatleft,
+    table.floatleft,
+    .thumb.tleft,
+    .thumb.tright {
+        text-align: center;
+        float: none !important;
+        margin: .5em auto;
+    }
 }