Add support for checking Echo notifications (#129)

* Add support for checking Echo notifications

Echo is broken on ScratchWikiSkin2 "out-of-the-box" because it adds weird, broken elements into a dropdown.

Now we're filtering those and adding our own custom notifications button to the navbar. This will show if you have unread notifications, and if so, link you to Special:Notifications

In the future it would be nice to implement the pop-up instead of linking the user, and generating the link MW instead of hard-coding it, but I believe this is low-priority since it will fix itself.

* localize and add feet class

* update feet from id to class

* new comment

* removetest

* don't show for logged-out users

* Use "messages" instead of "notifications" to be consistent with Scratch
...to the extent Scratch is self-consistent. Looking at you, nav-"notifications".png!

* Code cleanup on Mrsrec's work

* Use Scratch-style notification indicator, incl. count

* SpecialPage::getTitleFor and $user->isRegistered()

* Prefer getLinkURL() and against PHP echo

* Update CREDITS
Need to include message envelope icon, and Scratch code lol

* Don't name stylesheets based on absolute width

* box-sizing: border-box to avoid weird (literal) edge cases

* Don't hardcode desktop width in JS

* Hide logo on REALLY narrow screens

The addition of the messages envelope makes the navbar overflow on
Chrome devtools "Mobile S" width. This commit hides the Scratch logo at
that point, under the assumption that the search bar, messages, pencil,
and user icons are all more important to keep.

The width value in question was chosen as the minimum width before the
navbar begins to overflow. (That value is language-independent because
there is no text in the navbar at that point.)

* Fix ResourceLoader warning

* Use ResourceLoader logo preload

* Check if $tab['class'] exists

The reason this check was initially omitted was because I mistakenly thought it was guaranteed to exist by the code above

---------

Co-authored-by: AbyxDev <[email protected]>

CREDITS

@@ -1,13 +1,15 @@
 Below are attributions to files that require attribution.
-
 * Mobile layout hamburger icon: https://commons.wikimedia.org/wiki/File:Hamburger_icon.svg (licensed under CC BY-SA 3.0) (color inverted with CSS)
 * Mobile layout "person" icon: https://www.iconfinder.com/icons/1954535/account_people_person_profile_user_icon (licensed under CC BY 3.0) (color inverted with CSS)
 * Pencil icon for edit tools: https://commons.wikimedia.org/wiki/File:White_pencil.png (public domain)
 * External link icon: https://en.scratch-wiki.info/wiki/File:Link_icon.png (licensed under CC BY-SA 4.0)
 
-The Scratch logo is a trademark of Scratch. The search bar glass icon and dropdown icons are licensed under CC BY-SA 2.0.
+The [https://scratch.mit.edu Scratch website] is licensed under CC BY-SA 2.0; the following was copied from it:
+* The Scratch logo is a trademark of Scratch.
+* The search bar glass icon, dropdown icon, and message envelope icon.
+* A significant amount of source code, especially HTML and CSS.
 
-Thanks to people who reported bugs during the skin's development and use.
+Thanks to the skin's [https://github.com/InternationalScratchWiki/ScratchWikiSkin2/graphs/contributors contributors] and people who reported bugs during the skin's development and use.
 
 Thanks to the skin's translators:
 * apple502j (Japanese)
@@ -22,3 +24,4 @@ Thanks to the skin's translators:
 * mtwoll (German)
 * LiFaytheGoblin (German)
 * ahmetlii (Turkish)
+* OragSam (Hungarian)

resources/css/main.css

@@ -176,7 +176,7 @@ dl dt {
     width: 800px;
 }
 
-.wikilogo {
+.mw-wiki-logo {
     background-repeat: no-repeat;
     height: 140px;
     display: block;
@@ -499,18 +499,21 @@ dl dt {
 }
 
 #navigation .account-nav .dropdown-toggle,
-#navigation .content-actions .dropdown-toggle {
+#navigation .content-actions .dropdown-toggle,
+#navigation .messages .dropdown-toggle {
     padding-top: 14px;
 }
 
 #navigation .account-nav .dropdown li,
-#navigation .content-actions .dropdown li {
+#navigation .content-actions .dropdown li,
+#navigation .messages .dropdown li {
     margin: 0;
     white-space: nowrap;
 }
 
 #navigation .account-nav>a,
-#navigation .content-actions>a {
+#navigation .content-actions>a,
+#navigation .messages>a {
     display: inline-block;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -545,6 +548,7 @@ dl dt {
 
 #navigation .account-nav .dropdown,
 #navigation .content-actions .dropdown,
+#navigation .messages .dropdown,
 #navigation .create .dropdown,
 #navigation .explore .dropdown,
 #navigation .discuss .dropdown,
@@ -618,6 +622,7 @@ dl dt {
 .box {
     display: inline-block;
     border: 1px solid #d9d9d9;
+    box-sizing: border-box;
     border-radius: 10px 10px 0 0;
     background-color: #fff;
     width: 100%;
@@ -713,13 +718,51 @@ dl dt {
     vertical-align: middle;
 }
 
+#navigation ul>li.messages>a {
+    /* @embed */
+    background-image: url('../nav-notifications.png');
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 45%;
+    transition: .15s ease background-size;
+    padding-right: 10px;
+    padding-left: 10px;
+    width: 30px;
+    overflow: hidden;
+    text-indent: 50px;
+    white-space: nowrap;
+}
+
+#navigation .messages>a:hover {
+    background-size: 50%;
+}
+
+#navigation .messages .message-count {
+    display: none;
+}
+
+#navigation .messages .message-count.show {
+    display: block;
+    position: absolute;
+    top: .5rem;
+    right: .25rem;
+    border-radius: 1rem;
+    background-color: #ffab1a;
+    padding: 0 .25rem;
+    text-indent: 0;
+    line-height: 1rem;
+    color: #fff;
+    font-size: .7rem;
+    font-weight: bold;
+}
+
 #lastmod {
     text-align: center;
     font-size: 11px;
     color: #6b6b6b;
 }
 
-#feet {
+.feet {
     list-style: none;
     display: block;
     text-align: center;
@@ -728,7 +771,7 @@ dl dt {
     margin-bottom: 20px;
 }
 
-#feet li {
+.feet li {
     list-style: none;
     display: inline;
     margin-right: 10px;

resources/css/mobile-981.5+.css → resources/css/mobile-00.css

@@ -1,6 +1,6 @@
 .inner {
     width: 982px;
 }
-#navigation .sidebar-toggle {
+#navigation .inner>ul>.sidebar-toggle {
     display: none;
-}
+}

resources/css/mobile-40.css

@@ -0,0 +1,3 @@
+#navigation .inner .logo {
+	display: none;
+}

skin.json

@@ -32,7 +32,7 @@
 			"class": "ResourceLoaderSkinModule",
 			"features": {
 				"content-links": true,
-				"content-thumbnails": true,
+				"content-media": true,
 				"interface-message-box": true,
 				"interface-category": true,
 				"content-tables": true,
@@ -54,16 +54,19 @@
 				"resources/css/mobile.css": {
 					"media": "only screen and (max-width: 981.4px)"
 				},
-				"resources/css/mobile-0-519.4.css": {
+				"resources/css/mobile-40.css": {
+					"media": "only screen and (max-width: 351.4px)"
+				},
+				"resources/css/mobile-30.css": {
 					"media": "only screen and (max-width: 519.4px)"
 				},
-				"resources/css/mobile-519.5-679.4.css": {
+				"resources/css/mobile-20.css": {
 					"media": "only screen and (min-width: 519.5px) and (max-width: 679.4px)"
 				},
-				"resources/css/mobile-679.5-981.4.css": {
+				"resources/css/mobile-10.css": {
 					"media": "only screen and (min-width: 679.5px) and (max-width: 981.4px)"
 				},
-				"resources/css/mobile-981.5+.css": {
+				"resources/css/mobile-00.css": {
 					"media": "only screen and (min-width: 981.5px)"
 				}
 			}