hide notification filter on mobile
This commit is contained in:
Sean Yesmunt
parent
4cc2f28f3d
commit
bd42418ff3
2 changed files with 55 additions and 57 deletions
|
|
@ -2,7 +2,6 @@
|
||||||
import * as ICONS from 'constants/icons';
|
import * as ICONS from 'constants/icons';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Page from 'component/page';
|
import Page from 'component/page';
|
||||||
import Card from 'component/common/card';
|
|
||||||
import Spinner from 'component/spinner';
|
import Spinner from 'component/spinner';
|
||||||
import { FormField } from 'component/common/form';
|
import { FormField } from 'component/common/form';
|
||||||
import Notification from 'component/notification';
|
import Notification from 'component/notification';
|
||||||
|
|
@ -10,7 +9,6 @@ import Button from 'component/button';
|
||||||
import usePersistedState from 'effects/use-persisted-state';
|
import usePersistedState from 'effects/use-persisted-state';
|
||||||
import Yrbl from 'component/yrbl';
|
import Yrbl from 'component/yrbl';
|
||||||
import * as NOTIFICATIONS from 'constants/notifications';
|
import * as NOTIFICATIONS from 'constants/notifications';
|
||||||
import classnames from 'classnames';
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
notifications: Array<Notification>,
|
notifications: Array<Notification>,
|
||||||
|
|
@ -74,30 +72,7 @@ export default function NotificationsPage(props: Props) {
|
||||||
<h1 className="card__title">{__('Notifications')}</h1>
|
<h1 className="card__title">{__('Notifications')}</h1>
|
||||||
<div className="claim-list__alt-controls--wrap">
|
<div className="claim-list__alt-controls--wrap">
|
||||||
{fetching && <Spinner type="small" />}
|
{fetching && <Spinner type="small" />}
|
||||||
<div className={'claim-search__input-container'}>
|
|
||||||
<FormField
|
|
||||||
className={classnames('claim-search__dropdown', {
|
|
||||||
'claim-search__dropdown--selected': filterBy,
|
|
||||||
})}
|
|
||||||
type="select"
|
|
||||||
name="filter"
|
|
||||||
value={filterBy || ALL_NOTIFICATIONS}
|
|
||||||
onChange={(e) => setFilterBy(e.target.value)}
|
|
||||||
>
|
|
||||||
{NOTIFICATION_FILTER_TYPES.map((type) => (
|
|
||||||
<option key={type} value={type}>
|
|
||||||
{/* i18fixme */}
|
|
||||||
{type === ALL_NOTIFICATIONS && __('All')}
|
|
||||||
{type === NOTIFICATIONS.NOTIFICATION_CREATOR_SUBSCRIBER && __('Followers')}
|
|
||||||
{type === NOTIFICATIONS.NOTIFICATION_COMMENT && __('Comments')}
|
|
||||||
{type === NOTIFICATIONS.NOTIFICATION_REPLY && __('Comment replies')}
|
|
||||||
{type === NOTIFICATIONS.DAILY_WATCH_AVAILABLE && __('Daily watch availability')}
|
|
||||||
{type === NOTIFICATIONS.DAILY_WATCH_REMIND && __('Daily watch reminders')}
|
|
||||||
{type === NOTIFICATIONS.NEW_CONTENT && __('New content')}
|
|
||||||
</option>
|
|
||||||
))}
|
|
||||||
</FormField>
|
|
||||||
</div>
|
|
||||||
{unreadCount > 0 && (
|
{unreadCount > 0 && (
|
||||||
<Button
|
<Button
|
||||||
icon={ICONS.EYE}
|
icon={ICONS.EYE}
|
||||||
|
|
@ -106,40 +81,55 @@ export default function NotificationsPage(props: Props) {
|
||||||
label={__('Mark all as read')}
|
label={__('Mark all as read')}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
<FormField
|
||||||
|
className="notification__filter"
|
||||||
|
type="select"
|
||||||
|
name="filter"
|
||||||
|
value={filterBy || ALL_NOTIFICATIONS}
|
||||||
|
onChange={(e) => setFilterBy(e.target.value)}
|
||||||
|
>
|
||||||
|
{NOTIFICATION_FILTER_TYPES.map((type) => (
|
||||||
|
<option key={type} value={type}>
|
||||||
|
{/* i18fixme */}
|
||||||
|
{type === ALL_NOTIFICATIONS && __('All')}
|
||||||
|
{type === NOTIFICATIONS.NOTIFICATION_CREATOR_SUBSCRIBER && __('Followers')}
|
||||||
|
{type === NOTIFICATIONS.NOTIFICATION_COMMENT && __('Comments')}
|
||||||
|
{type === NOTIFICATIONS.NOTIFICATION_REPLY && __('Comment replies')}
|
||||||
|
{type === NOTIFICATIONS.DAILY_WATCH_AVAILABLE && __('Daily watch availability')}
|
||||||
|
{type === NOTIFICATIONS.DAILY_WATCH_REMIND && __('Daily watch reminders')}
|
||||||
|
{type === NOTIFICATIONS.NEW_CONTENT && __('New content')}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</FormField>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Card
|
{filteredNotifications && filteredNotifications.length > 0 ? (
|
||||||
isBodyList
|
<div className="card">
|
||||||
body={
|
<div className="notification_list">
|
||||||
<>
|
{filteredNotifications.map((notification, index) => {
|
||||||
{filteredNotifications && filteredNotifications.length > 0 ? (
|
return <Notification key={notification.id} notification={notification} />;
|
||||||
<div className="notification_list">
|
})}
|
||||||
{filteredNotifications.map((notification, index) => {
|
</div>
|
||||||
return <Notification key={notification.id} notification={notification} />;
|
</div>
|
||||||
})}
|
) : (
|
||||||
|
<div className="main--empty">
|
||||||
|
<Yrbl
|
||||||
|
title={__('No notifications')}
|
||||||
|
subtitle={
|
||||||
|
<p>
|
||||||
|
{isFiltered
|
||||||
|
? __('Try selecting another filter.')
|
||||||
|
: __("You don't have any notifications yet, but they will be here when you do!")}
|
||||||
|
</p>
|
||||||
|
}
|
||||||
|
actions={
|
||||||
|
<div className="section__actions">
|
||||||
|
<Button button="primary" icon={ICONS.HOME} label={__('Go Home')} navigate="/" />
|
||||||
</div>
|
</div>
|
||||||
) : (
|
}
|
||||||
<div className="main--empty">
|
/>
|
||||||
<Yrbl
|
</div>
|
||||||
title={__('No notifications')}
|
)}
|
||||||
subtitle={
|
|
||||||
<p>
|
|
||||||
{isFiltered
|
|
||||||
? __('Try selecting another filter.')
|
|
||||||
: __("You don't have any notifications yet, but they will be here when you do!")}
|
|
||||||
</p>
|
|
||||||
}
|
|
||||||
actions={
|
|
||||||
<div className="section__actions">
|
|
||||||
<Button button="primary" icon={ICONS.HOME} label={__('Go Home')} navigate="/" />
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</Page>
|
</Page>
|
||||||
|
|
|
||||||
|
|
@ -227,3 +227,11 @@ $contentMaxWidth: 35rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.notification__filter {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
@media (min-width: $breakpoint-small) {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue