Commit graph

26 commits

Author SHA1 Message Date
Volker E 33655c75e7 Follow overhauled color palette
Replacing colors with ones from the overhauled WCAG 2.0 level AA
compliant color palette https://phabricator.wikimedia.org/M82
Applying Less variables where possible for better flexibility
in future design maintenance.
Also introducing some variables from WikimediaUI Base.

Bug: T147365
Depends-on: I16bdfbdada252ee27d5a0de11e0930347315b699
Change-Id: Ic05ed15b44d86752c686d80efc4f2ed2a1e71b41
2016-11-01 22:31:28 +00:00
Volker E 675d454bad build: Extend stylelint to further rules
Extending stylelint to include further general rules
and remove obsolete .csslintrc file.

Change-Id: I6957cc3731c39f495e985c9dbd40363102e2e6f0
2016-10-05 14:52:29 -07:00
Volker E 6d2e560c1e Introduce stylelint
Introducing stylelint with configuration rules compliant to
Wikimedia CSS Coding Standards 'stylelint-config-wikimedia', nullifying
some for now and making majority pass.

Change-Id: I2c4acee41c9b56d9b00e2a2c5b7ab0ab5de454ce
2016-10-04 18:15:02 -07:00
Volker E 819545ed7e Add box-sizing mixin
Replacing standard `box-sizing` with MediaWiki's Less mixin, which also
features prefixed properties for older browsers like Firefox 28 and below.

Change-Id: Iafb88b192045fb7df6bbe6954a166a198d04c5cf
2016-10-03 13:21:54 -07:00
jenkins-bot c01b053025 Merge "Remove js-truncation of descriptions in Special:Notifications desktop" 2016-09-10 02:49:02 +00:00
Moriel Schottlender a834420533 Remove js-truncation of descriptions in Special:Notifications desktop
In order for the special page to be responsive, the descriptions can't
be truncated in the JS. If they are, they take a bigger portion
of the screen, sometimes going out of its confines.

The popup should still truncate descriptions.

Change-Id: I533f29c00482f6cfbb7b1c9c7417715e3c5809bf
2016-09-09 12:44:03 -07:00
Moriel Schottlender 22d83568f7 Break more rules in break-word so long words can wrap in notifications
Change-Id: Ib0cde96438175f2bc136bd89d4a2717785cecba0
2016-09-07 16:32:37 -07:00
Moriel Schottlender df38f142ef Followup I3daae156d: Don't truncate body text for small screens
We already took away the truncation of header text, the body should
follow for narrow screens and wrap, instead of using the ellipses
truncation.

Change-Id: I3504599044e1c94ccec55c420d455b9370dae474
2016-09-02 11:27:56 -07:00
Ed Sanders b54576564b Fix notification page width responsiveness issues
Have the page hide the sidebar at 982px, when there is
not enough room for both (and when vector switches down to SD).

Make inbox responsive when resizing.

Change-Id: I3daae156d1ebb0619090d466caa5138d0d98e937
2016-09-01 18:02:06 -07:00
jenkins-bot ac62a9361c Merge "Fix line-height for notification item text" 2016-08-31 02:41:02 +00:00
Moriel Schottlender a4aa79fa50 Add the best CSS rule to notifications: word-break: break-word;
Add word-break: break-word; so we make sure even long names or titles
without spaces are broken/wrapped where they need to.

Bug: T142662
Change-Id: I166e834495972ec49eb98e301ab9be85f40f5a5e
2016-08-30 17:23:32 -07:00
Moriel Schottlender 07dde93247 Fix line-height for notification item text
Bug: T140523
Change-Id: I6a1a174ed70324da50970ecfb35ebba21ea703dd
2016-08-30 15:12:07 -07:00
jenkins-bot 4e99a5095f Merge "Add dynamic secondary actions to notification items" 2016-08-23 17:43:08 +00:00
Moriel Schottlender 480ce92bd8 Add dynamic secondary actions to notification items
Allow extensions to add dynamic actions that perform some
API request and display a confirmation message.

Bug: T132975
Change-Id: Ib16d57c3f1a11a9749564c6e2112bf1ca32c55e8
2016-08-22 16:04:48 -07:00
Roan Kattouw b9b1363ca6 Make dotdotdot menu not be extremely wide
Work around new styles introduced in oojs-ui in I77cd5212c.

Bonus: remove useless styles targeting the dotdotdot popup
in NotificationItemWidget.less: it's not even a popupWidget
any more and it's located in an overlay anyway, so these
styles didn't do anything.

Change-Id: Ifb16b7bb0b01c1eb2551ba4c173042cc759e9b02
2016-08-19 14:48:29 -07:00
Roan Kattouw 3cbddb546b Make excerpts in bundles not italic, but still grey
Bug: T141034
Change-Id: I34c376a97e222257ae660149e0fb8172128eb8c0
2016-08-16 11:48:01 -07:00
Moriel Schottlender 9468ff0e1d Don't truncate bundled item content in mobile view
Bug: T140523
Change-Id: I8223d5596825bdd80c3c961576b46c7f2d4654cd
2016-08-04 13:03:35 -07:00
Roan Kattouw ebd995072f Use body color (gray) for <em>s in bundle headers
Bundles only have a header, no body, so when we include excerpts
in bundle headers, we wrap them in <em> tags. This change
makes these excerpts the same color as the excerpts in the
non-bundled case.

Bug: T139960
Bug: T141034
Change-Id: I6a14274b42ba672ab1366c0dd106ea0847db6404
2016-07-22 16:58:39 -07:00
Roan Kattouw d36c0ab123 Fix truncation of notification headers
We need a fixed-width CSS table with a number of fixed-width
cells and one cell that takes up the remaining width, with
text truncation. This is a pain to do with CSS tables,
but this trick I found on StackOverflow[1] works well:
wrap the contents of the cell in a div that's position: relative;,
containing another div that's position: absolute; width: 100%;

[1] http://stackoverflow.com/questions/7569436/css-constrain-a-table-with-long-cell-contents-to-page-width

Bug: T140349
Change-Id: I507f915f06185c767d7a5c8edbff6c341e07b6e2
2016-07-18 17:06:48 -07:00
Stephane Bisson db838e42ce Keep bundled notification compact header on one line
Bug: T139321
Change-Id: I4b0a7173bc06a0760efff544bcc28a59ba72ce7f
2016-07-06 20:44:00 +00:00
Moriel Schottlender 984441f8d9 Pad the content so it doesn't stretch beyond the markread button
Bug: T136572
Change-Id: I1db8289722526184b64dbb3e92827988a0e04afc
2016-06-30 15:45:34 -07:00
Roan Kattouw 4ca406e4e8 NotificationItemWidget: Apply hover colors
Also remove OptionWidget-related styles that no longer apply.

Bug: T138917
Change-Id: I9e748549bcfa5aac5a68f0c51cbbe4c0a4537676
2016-06-29 11:55:30 +02:00
Moriel Schottlender f84808b83a Change mark as read buttons to circles
Allow for mark read and mark unread through the side button, and
change its style according to spec in the ticket.

Bug: T126214
Change-Id: I78a93c0545bbe2d7c11a0c62557cd2e97e9d3866
2016-06-21 11:54:00 -07:00
Moriel Schottlender 070656731d Adjust styling for Special:Notification items
The items should resemble the popup items, but the styles clashed
with the popup's cross-wiki notification item, so the image size
was smaller and the border was incomplete.

Bug: T136572
Change-Id: I3c3f825d469ccee1e711da21f627eeb9491e9480
2016-05-31 11:30:35 -07:00
Bartosz Dziewoński cc9e667c49 Avoid calc() in CSS
* Use `margin: A` with `padding: B` rather than `padding: calc(A + B)`.
* Remove a `display: inline-block` which necessitated `width: 100%`.

I think this results in the same rendering, but please test carefully,
as I didn't check it for all the possible notifications.

(There is one more calc() in mw.echo.badge.less that can't be avoided.)

Bug: T135936
Change-Id: Ic01f16c8469c3b9d45d2885108ec6260e967731a
2016-05-26 22:52:44 +00:00
Moriel Schottlender 8e76bc4126 Refactoring Echo's front end for MVC
Changing the way Echo's front-end architecture works to work with
model-view-controller methodology.

Change-Id: I97862402c41bc04dd41cd08d79f19ff677340249
2016-05-18 12:28:45 -07:00
Renamed from modules/ooui/styles/mw.echo.ui.NotificationItemWidget.less (Browse further)