Add support for Timeless skin in the ArchLinux extension #50

progandy · 2021-12-25T22:15:31Z

The switch to the new Vector skin caused some controversy among desktop wiki users. The Timeless skin is a more polished alternative responsive skin.
These changes should implement support for the Timeless skin in the ArchLinux extension.

Here are some images of what it should approximately look like:
https://abload.de/gallery.php?key=kSKQLkmd

It was not tested in an archwiki installation, but with this userscript on mediawiki.org:
https://gist.github.com/progandy/c3459f7e49c295e70563a44e0a27ba73

lahwaacz · 2021-12-26T06:46:25Z

Is the "MediaWiki" (probably $wgSitename) at the top left corner a feature of the skin? Can it be suppressed?

nl6720 · 2021-12-26T07:53:23Z

Is the "MediaWiki" (probably $wgSitename) at the top left corner a feature of the skin? Can it be suppressed?

It uses the timeless-sitetitle message which defaults to {{int:Sitetitle}}.

extensions/ArchLinux/modules/skins/timeless.less

nl6720 · 2021-12-26T08:12:55Z

Text in code blocks looks smaller because Timeless doesn't use the font-family: monospace,monospace; workaround (Vector added it a few releases back).

Since we're setting font-family in arch_common.less, it can be fixed for all skins there:

diff --git a/extensions/ArchLinux/modules/arch_common.less b/extensions/ArchLinux/modules/arch_common.less
index 2a6bebaa9..73121c5a6 100644
--- a/extensions/ArchLinux/modules/arch_common.less
+++ b/extensions/ArchLinux/modules/arch_common.less
@@ -49,7 +49,7 @@ body {
     code,
     tt {
         background-color: @code-background-color;
-        font-family: monospace;
+        font-family: monospace, monospace;
     }
 
     code,

extensions/ArchLinux/modules/skins/timeless.less

progandy · 2021-12-26T10:04:21Z

All changes done, I can squash them later.

Is the "MediaWiki" (probably $wgSitename) at the top left corner a feature of the skin? Can it be suppressed?

What do you propose as a change? Leave it as an empty space or extend the search bar to the left? Personally I like the wiki name (ArchWiki) being there, but if you two prefer it without I can hide it.

nl6720 · 2021-12-26T10:07:44Z

IMHO leave it as it is. We'll just edit MediaWiki:timeless-sitetitle to remove the title.

pierres · 2021-12-29T11:02:49Z

I am a little worried about maintenance when we add more and more custom CSS. We already support two Vector versions and Monobook. This makes upstream updates harder as there is no easy way to detected breaking changes.

In general I'd prefer to reduce our customization to a minimal set of patches to the new Vector theme.

nl6720 · 2022-01-03T18:39:48Z

@progandy, could you split off 37e8fef and 8446d46 into a separate PR so that they do not get held up by this PR?

progandy · 2022-01-03T20:00:04Z

@progandy, could you split off 37e8fef and 8446d46 into a separate PR so that they do not get held up by this PR?

Done. If you prefer not to merge the timeless skin, feel free to close this PR.

nl6720 · 2022-03-29T14:07:10Z

The split-off PR was merged. @progandy could you rebase?

lahwaacz · 2022-12-31T09:04:29Z

I noticed that Timeless renders page categories in the sidebar (just below language links), which feels awkward but there is probably no way to change that.

progandy · 2022-12-31T09:46:30Z

I noticed that Timeless renders page categories in the sidebar (just below language links), which feels awkward but there is probably no way to change that.

Edit: For screen sizes larger than 1340 pixels, there is a sidebar on the right with language and category links. That does not seem awkward to me.

For screen sizes <1100px The categories appear below the content. To make that permanent, the following css would work. You could also limit the change to the range of 1339 to 1100 pixels which has only a left sidebar.

#catlinks {
  display: block;
  padding: 1em;
}

#catlinks-sidebar {
  display: none;
}

lahwaacz

The responsive design is still quite inconsistent, because the Arch navbar changes at 845px, whereas Timeless changes to the most narrow style at 850px. But I guess there is no way to easily change the thresholds?

lahwaacz · 2022-12-31T09:51:32Z

extensions/ArchLinux/modules/skins/timeless.less

+    }
+    #menus-cover {
+        top: 65px;
+    }


Suggested change

}

}

#mw-content-block {

background: @body-background-color;

}

This makes a difference for the box with categories that are placed below the page with this screen width. Timeless adds background: #ffffff; for #mw-content-block in the smallest screen width, which causes a visual inconsistency.

lahwaacz · 2022-12-31T12:28:20Z

extensions/ArchLinux/modules/skins/timeless.less

+            color: @link-color-hover;
+        }
+    }
+}


Suggested change

}

}

/* reset special border of the page title */

.mw-body {

h1.firstHeading {

border-bottom: solid 3px #c8ccd1;

}

}

The native 4px @blue style does not look nice.

lahwaacz · 2022-12-31T12:29:31Z

extensions/ArchLinux/modules/skins/timeless.less

+            color: @link-color-hover;
+        }
+    }
+}


Suggested change

}

}

/* change MediaWiki's @blue color to Arch's blue */

.suggestions {

.suggestions-result-current {

background-color: @link-color-normal;

}

}

.tools-inline li {

&.selected {

border-bottom-color: @link-color-normal;

}

}

lahwaacz · 2022-12-31T13:06:53Z

The category links in the (left or right) sidebar are probably fine. Currently we have an override in MediaWiki/Common.css to place #catlinks at the top, but since the links are duplicated in the DOM and can be styled separately with #catlinks and #catlinks-sidebar, it would be possible to adjust it later.

progandy · 2022-12-31T17:04:45Z

The responsive design is still quite inconsistent, because the Arch navbar changes at 845px, whereas Timeless changes to the most narrow style at 850px. But I guess there is no way to easily change the thresholds?

It would be easier and maybe even a better idea to change the threshold for the arch navbar. I already increased it from 830px to 845px to prevent problems with the scrollbar: ad9454a This change would probably be useful for all other components of the arch site using the navbar like the fourm.

By the way, the homepage behaves differently from forum or wiki.

lahwaacz · 2022-12-31T18:07:45Z

By the way, the homepage behaves differently from forum or wiki.

Oh yes, we should find a way to integrate archlinux-common-style in the wiki... Its responsive design is still in a merge request, though.

nl6720 reviewed Dec 26, 2021

View reviewed changes

extensions/ArchLinux/modules/skins/timeless.less Outdated Show resolved Hide resolved

extensions/ArchLinux/modules/skins/timeless.less Outdated Show resolved Hide resolved

nl6720 suggested changes Dec 26, 2021

View reviewed changes

extensions/ArchLinux/modules/skins/timeless.less Outdated Show resolved Hide resolved

progandy force-pushed the timeless branch from e8c5a6b to 1ef29a9 Compare December 26, 2021 09:54

progandy force-pushed the timeless branch from 1ef29a9 to 8446d46 Compare December 27, 2021 13:30

nl6720 approved these changes Dec 29, 2021

View reviewed changes

progandy mentioned this pull request Jan 3, 2022

Stylefixes #51

Merged

progandy force-pushed the timeless branch from 8446d46 to 7a08fbc Compare January 3, 2022 19:57

Add Timeless skin support in ArchLinux extension

5add281

progandy force-pushed the timeless branch from 7a08fbc to 5add281 Compare December 29, 2022 09:44

nl6720 approved these changes Dec 29, 2022

View reviewed changes

lahwaacz reviewed Dec 31, 2022

View reviewed changes

Add support for Timeless skin in the ArchLinux extension #50

Add support for Timeless skin in the ArchLinux extension #50

progandy commented Dec 25, 2021

lahwaacz commented Dec 26, 2021

nl6720 commented Dec 26, 2021

nl6720 commented Dec 26, 2021

progandy commented Dec 26, 2021

nl6720 commented Dec 26, 2021

pierres commented Dec 29, 2021

nl6720 commented Jan 3, 2022

progandy commented Jan 3, 2022

nl6720 commented Mar 29, 2022

lahwaacz commented Dec 31, 2022

progandy commented Dec 31, 2022 •

edited

lahwaacz left a comment

lahwaacz Dec 31, 2022

lahwaacz Dec 31, 2022

lahwaacz Dec 31, 2022

lahwaacz commented Dec 31, 2022

progandy commented Dec 31, 2022 •

edited

lahwaacz commented Dec 31, 2022 •

edited

-    }
+    }
+    #mw-content-block {
+        background: @body-background-color;
+    }

-}
+}
+/* reset special border of the page title */
+.mw-body {
+    h1.firstHeading {
+        border-bottom: solid 3px #c8ccd1;
+    }
+}

-}
+}
+/* change MediaWiki's @blue color to Arch's blue */
+.suggestions {
+    .suggestions-result-current {
+        background-color: @link-color-normal;
+    }
+}
+.tools-inline li {
+    &.selected {
+        border-bottom-color: @link-color-normal;
+    }
+}

Add support for Timeless skin in the ArchLinux extension #50

Are you sure you want to change the base?

Add support for Timeless skin in the ArchLinux extension #50

Conversation

progandy commented Dec 25, 2021

lahwaacz commented Dec 26, 2021

nl6720 commented Dec 26, 2021

nl6720 commented Dec 26, 2021

progandy commented Dec 26, 2021

nl6720 commented Dec 26, 2021

pierres commented Dec 29, 2021

nl6720 commented Jan 3, 2022

progandy commented Jan 3, 2022

nl6720 commented Mar 29, 2022

lahwaacz commented Dec 31, 2022

progandy commented Dec 31, 2022 • edited

lahwaacz left a comment

Choose a reason for hiding this comment

lahwaacz Dec 31, 2022

Choose a reason for hiding this comment

lahwaacz Dec 31, 2022

Choose a reason for hiding this comment

lahwaacz Dec 31, 2022

Choose a reason for hiding this comment

lahwaacz commented Dec 31, 2022

progandy commented Dec 31, 2022 • edited

lahwaacz commented Dec 31, 2022 • edited

progandy commented Dec 31, 2022 •

edited

progandy commented Dec 31, 2022 •

edited

lahwaacz commented Dec 31, 2022 •

edited