LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

hide notification filter on mobile

Browse source
This commit is contained in:
Sean Yesmunt 2021-03-11 17:18:26 -05:00
parent 4cc2f28f3d
commit bd42418ff3
2 changed files with 55 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
ui/page/notifications/view.jsx
View file

@ -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,11 +72,17 @@ 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'}>
{unreadCount > 0 && (
<Button
icon={ICONS.EYE}
onClick={doReadNotifications}
button="secondary"
label={__('Mark all as read')}
/>
)}
<FormField <FormField
className={classnames('claim-search__dropdown', { className="notification__filter"
'claim-search__dropdown--selected': filterBy,
})}
type="select" type="select"
name="filter" name="filter"
value={filterBy || ALL_NOTIFICATIONS} value={filterBy || ALL_NOTIFICATIONS}
@ -98,26 +102,15 @@ export default function NotificationsPage(props: Props) {
))} ))}
</FormField> </FormField>
</div> </div>
{unreadCount > 0 && (
<Button
icon={ICONS.EYE}
onClick={doReadNotifications}
button="secondary"
label={__('Mark all as read')}
/>
)}
</div> </div>
</div>
<Card
isBodyList
body={
<>
{filteredNotifications && filteredNotifications.length > 0 ? ( {filteredNotifications && filteredNotifications.length > 0 ? (
<div className="card">
<div className="notification_list"> <div className="notification_list">
{filteredNotifications.map((notification, index) => { {filteredNotifications.map((notification, index) => {
return <Notification key={notification.id} notification={notification} />; return <Notification key={notification.id} notification={notification} />;
})} })}
</div> </div>
</div>
) : ( ) : (
<div className="main--empty"> <div className="main--empty">
<Yrbl <Yrbl
@ -138,9 +131,6 @@ export default function NotificationsPage(props: Props) {
</div> </div>
)} )}
</> </>
}
/>
</>
)} )}
</Page> </Page>
); );

8
ui/scss/component/_notification.scss
View file

@ -227,3 +227,11 @@ $contentMaxWidth: 35rem;
} }
} }
} }
.notification__filter {
display: none;
@media (min-width: $breakpoint-small) {
display: block;
}
}