mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo
synced 2024-11-24 07:54:13 +00:00
b6b19e1a2f
Compared to the previous approach using table layouts, it is much easier to control which elements are allowed to extend to maximum available width, and to provide alternative layouts for mobile. There should be no visual changes. It doesn't require using `white-space: nowrap` to prevent elements from being squished, which will help with T237244. (These styles are only loaded on Special:Notifications, they don't apply to the flyout.) Bug: T237244 Change-Id: I09e692e427f61fabd53b3824a1ed7e4f8e76fad4
80 lines
1.2 KiB
Plaintext
80 lines
1.2 KiB
Plaintext
@import 'mediawiki.skin.variables.less';
|
|
@import '../echo.variables.less';
|
|
|
|
.mw-echo-ui-notificationsInboxWidget {
|
|
width: 100%;
|
|
max-width: @specialpage-width;
|
|
position: relative;
|
|
|
|
&-row {
|
|
display: flex;
|
|
align-items: start;
|
|
gap: 1em;
|
|
}
|
|
|
|
&-toolbarWrapper {
|
|
height: 3.5em;
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
padding-top: 0.5em;
|
|
margin-top: -0.5em;
|
|
top: 0;
|
|
z-index: 2;
|
|
background-color: @background-color-base;
|
|
box-shadow: 0 2px 0 0 rgba( 0, 0, 0, 0.1 );
|
|
}
|
|
|
|
&-cell {
|
|
&-placeholder {
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
|
|
&-main {
|
|
flex-grow: 1;
|
|
|
|
&-toolbar {
|
|
&-top {
|
|
.mw-echo-ui-notificationsInboxWidget-row {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media all and ( max-width: ( @specialpage-hd-width - 1 ) ) {
|
|
// Override for the top toolbar so we get
|
|
// filters and pagination under one another
|
|
&-main {
|
|
&-toolbar {
|
|
&-top {
|
|
.mw-echo-ui-notificationsInboxWidget-row {
|
|
flex-wrap: wrap;
|
|
text-align: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
&-settings {
|
|
.oo-ui-popupWidget-popup {
|
|
text-align: left;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-cell-placeholder {
|
|
width: 100%;
|
|
}
|
|
|
|
&-sidebar {
|
|
display: none;
|
|
}
|
|
|
|
&-toolbarWrapper {
|
|
height: 7em;
|
|
}
|
|
}
|
|
}
|