Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/154220
Change subject: WIP: make Special:Notifications semantically correct
......................................................................
WIP: make Special:Notifications semantically correct
The dates are heading and there are multiple lists. This has been
annoying me for a while and results in inconsistent styling on mobile
as a result.
TODO: Add tests, talk to designers
Change-Id: I4f34a316159606a20c35efd24339a2c8f53a2111
---
M modules/special/ext.echo.special.js
M modules/special/ext.echo.special.less
M special/SpecialNotifications.php
3 files changed, 39 insertions(+), 29 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Echo
refs/changes/20/154220/1
diff --git a/modules/special/ext.echo.special.js
b/modules/special/ext.echo.special.js
index 3ccc63e..988c9e7 100644
--- a/modules/special/ext.echo.special.js
+++ b/modules/special/ext.echo.special.js
@@ -60,7 +60,7 @@
*/
loadMore: function () {
var api = new mw.Api( { ajax: { cache: false } } ),
- notifications, data, container, $li, that =
this, unread = [], apiData;
+ notifications, data, that = this, unread = [],
apiData;
apiData = {
'action' : 'query',
@@ -73,7 +73,8 @@
};
api.get( apiData ).done( function ( result ) {
- container = $( '#mw-echo-special-container' );
+ var openTag, $ul, $li,
+ $container = $(
'#mw-echo-special-container' );
notifications = result.query.notifications;
unread = [];
@@ -82,10 +83,15 @@
if ( that.header !==
data.timestamp.date ) {
that.header =
data.timestamp.date;
- $( '<li></li>' ).addClass(
'mw-echo-date-section' ).append( that.header ).appendTo( container );
+ if ( openTag ) {
+ $ul.appendTo(
$container );
+ }
+ openTag = true;
+ $( '<h2>' ).addClass(
'mw-echo-date-section' ).append( that.header ).appendTo( $container );
+ $ul = $( '<ul>' );
}
- $li = $( '<li></li>' )
+ $li = $( '<li>' )
.data( 'details', data )
.data( 'id', id )
.addClass(
'mw-echo-notification' )
@@ -95,7 +101,7 @@
'data-notification-type': data.type
} )
.append( data['*'] )
- .appendTo( container );
+ .appendTo( $ul );
if ( !data.read ) {
$li.addClass( 'mw-echo-unread'
);
@@ -109,6 +115,11 @@
}
} );
+ // Add any remaining lists
+ if ( openTag ) {
+ $ul.appendTo( $container );
+ }
+
that.notcontinue = notifications['continue'];
if ( unread.length > 0 ) {
that.markAsRead( unread );
diff --git a/modules/special/ext.echo.special.less
b/modules/special/ext.echo.special.less
index 282749c..0c895b7 100644
--- a/modules/special/ext.echo.special.less
+++ b/modules/special/ext.echo.special.less
@@ -56,33 +56,27 @@
}
}
-.mw-echo-date-section {
- font-weight: 800;
- font-size: 1.1em;
- text-transform: uppercase;
- border-bottom: 1px solid #C9C9C9;
- margin: 30px 0 5px 50px;
- color: #686868;
- max-width: 550px;
-}
-
-ul#mw-echo-special-container {
- list-style: none none;
- padding: 0;
- margin: 30px 0 0 0;
- max-width: 600px;
-
- // Helper class to be used to force single-line text capped by ellipsis
in container
- .mw-echo-title-heading {
- .truncated-text();
- }
-}
-
.mw-echo-notification {
padding: 15px 35px 10px 0;
}
#mw-echo-special-container {
+ h2 {
+ text-transform: uppercase;
+ }
+
+ ul {
+ list-style: none none;
+ padding: 0;
+ margin: 30px 0 0 0;
+ max-width: 600px;
+
+ // Helper class to be used to force single-line text capped by
ellipsis in container
+ .mw-echo-title-heading {
+ .truncated-text();
+ }
+ }
+
.mw-echo-notification {
background-color: transparent;
diff --git a/special/SpecialNotifications.php b/special/SpecialNotifications.php
index 69fdd81..b575178 100644
--- a/special/SpecialNotifications.php
+++ b/special/SpecialNotifications.php
@@ -71,6 +71,7 @@
$dateHeader = '';
$notices = '';
$unread = array();
+ $open = false;
foreach ( $notif as $row ) {
$class = 'mw-echo-notification';
if ( !isset( $row['read'] ) ) {
@@ -84,7 +85,11 @@
// Output the date header if it has not been displayed
if ( $dateHeader !== $row['timestamp']['date'] ) {
$dateHeader = $row['timestamp']['date'];
- $notices .= Html::rawElement( 'li', array(
'class' => 'mw-echo-date-section' ), $dateHeader );
+ if ( $open ) {
+ Html::closeElement( 'ul' );
+ }
+ $notices .= Html::rawElement( 'h2', array(
'class' => 'mw-echo-date-section' ), $dateHeader );
+ $notices .= Html::openElement( 'ul' );
}
$notices .= Html::rawElement(
@@ -98,7 +103,7 @@
$row['*']
);
}
- $html = Html::rawElement( 'ul', array( 'id' =>
'mw-echo-special-container' ), $notices );
+ $html = Html::rawElement( 'div', array( 'id' =>
'mw-echo-special-container' ), $notices );
// Build the more link
if ( $nextContinue ) {
--
To view, visit https://gerrit.wikimedia.org/r/154220
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I4f34a316159606a20c35efd24339a2c8f53a2111
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Echo
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
