Commit Graph

6 Commits

Author SHA1 Message Date
Nicholas Ray 092a2957af Implement Page, Workspace, Content, and Article Toolbar Containers
This patch closely follows the desired guidelines/desired
styles Alex Hollender has put forth in his prototype, but uses
multiple containers to achieve this look since our DOM order/structure
is different than the DOM structure in the prototype. The following
containers are used, but unlike his prototype, they are sometimes used
more than once:

* Page Container: Contains every other container and limits the overall
max-width of the white part of the page.

* Workspace Container: Contains the sidebar and content container. The
sidebar is displaced ~30 pixels to the start (left) of the workspace
container at all times.

* Content Container: Contains the content. The max-width of this changes
depending on whether you are on a special page/history page vs. other
pages.

* Article Toolbar Container: Contains the article toolbar. The max-width
of this is always the same as the max-width of the article content as we
don't want the toolbar to move when going from the article page to the
history/special page.

Changes to be aware:

* To test locally, `$wgVectorLayoutMaxWidth = true;`. This design is
temporarily feature flagged and defaults to being "off".

* Note that layout-max-width.less is a temporary file made to meet the
feature flag requirement of T246420 (intended to derisk the deployment).
After the deploy, we should merge most if not all of the rules into
layout.less where the max-width design will become the default.

* Per Jon's code review comment, I have relaxed the indenting of
skin.mustache to make the diff easier to reason about. If desired, the
correct indenting can be achieved in a (much less risky) follow-up
commit.

Bug: T246420
Bug: T153043
Change-Id: Ie49f629bc705850c6996164a516957476c034048
2020-07-07 18:34:38 -06:00
Volker E df6ed76ec8 [modern] Fix rendering of `main` element in IE10 & 11
Adding ResourceLoader 'normalize' feature module to the modern styles.
Legacy Vector was not upgraded to use HTML5 semantic elements,
therefore does not need the module.
Similar to Demian's approach with reverted 'html5'
I8f1c79037d14b89982e449708f4f1cefacab4439

Bug: T256092
Change-Id: I420e5315aee74f59995c358083f969b059bfe3c0
Depends-On: I4601cc938f7a10dce4f643e22356f8c5a39e4ac9
2020-06-29 17:21:10 -07:00
Jdlrobson 05f00d2adc Revert "[modern] Fix broken rendering of `main` and `dialog` elements in IE9-11"
This reverts commit 3926ffa8ca.

Reason for revert: After consideration of the new task T256520 this shipping a normalize CSS feature seems like a much better approach
to solving this problem, particularly since `template` and `dialog`
are unused in our code.

Change-Id: I20391cc6c1f5a50127cd84bd7c0f17a20ab92528
2020-06-29 20:01:55 +00:00
AronDemian 3926ffa8ca [modern] Fix broken rendering of `main` and `dialog` elements in IE9-11
Adds the new ResourceLoader feature_file 'html5' to the modern styles.
The legacy layout was not upgraded to use HTML5 semantic elements,
therefore does not need these.

Bug: T256092
Depends-On: I3e4abb5fc8e55b7138fc1c86543777c845bed88e
Change-Id: I8f1c79037d14b89982e449708f4f1cefacab4439
2020-06-26 17:17:07 +00:00
jdlrobson 0c91442998 Pin bundlesizes to their exact values
Let's not let any of these values increase without us knowing

Bug: T244276
Change-Id: If6e88389846cd9a51faba4b074cf1054914e2953
2020-06-11 19:58:10 +00:00
Jan Drewniak a3acacc1a4 Add bundlesize test for ResourceLoader modules.
Adds a bundlesize test that measures the bytesize of
individual ResourceLoader modules.
This test depends on a running mediawiki instance as well as
the $MW_SERVER and $MW_SCRIPT_PATH environment variables.

ResourceLoader modules are fetched from a URL and piped
into a bundlesize command based on a custom configuration file.

The test can be run with `npm run test:size`.

Bug: T244276
Change-Id: I4f4534921ccbc6bd4f99229c8dd36b1279dde640
2020-06-11 19:51:20 +02:00