1
0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-14 14:21:23 +00:00

[user notifications] modification for mobile (#4509)

This commit is contained in:
llj
2020-03-30 21:27:45 +08:00
committed by GitHub
parent d8d035b699
commit 6181619f0e
2 changed files with 15 additions and 9 deletions

View File

@@ -211,7 +211,7 @@ class NoticeItem extends React.Component {
<td className="text-center"> <td className="text-center">
<img src={avatar_url} width="32" height="32" className="avatar" alt="" /> <img src={avatar_url} width="32" height="32" className="avatar" alt="" />
</td> </td>
<td className="pr-8"> <td className="pr-1 pr-md-8">
<p className="m-0" dangerouslySetInnerHTML={{__html: notice}}></p> <p className="m-0" dangerouslySetInnerHTML={{__html: notice}}></p>
</td> </td>
<td> <td>

View File

@@ -119,8 +119,8 @@ class UserNotifications extends React.Component {
<div className="flex-auto container-fluid pt-4 pb-6 o-auto"> <div className="flex-auto container-fluid pt-4 pb-6 o-auto">
<div className="row"> <div className="row">
<div className="col-md-10 offset-md-1"> <div className="col-md-10 offset-md-1">
<div className="d-flex justify-content-between align-items-center op-bar"> <div className="d-flex justify-content-between align-items-center flex-wrap op-bar">
<h2 className="h4 m-0">{gettext('Notifications')}</h2> <h2 className="h4 m-0 my-1">{gettext('Notifications')}</h2>
<div> <div>
<button className="btn btn-secondary op-bar-btn" onClick={this.markAllRead}>{gettext('Mark all read')}</button> <button className="btn btn-secondary op-bar-btn" onClick={this.markAllRead}>{gettext('Mark all read')}</button>
<button className="btn btn-secondary op-bar-btn ml-2" onClick={this.clearAll}>{gettext('Clear')}</button> <button className="btn btn-secondary op-bar-btn ml-2" onClick={this.clearAll}>{gettext('Clear')}</button>
@@ -149,11 +149,6 @@ class Content extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.theadData = [
{width: '7%', text: ''},
{width: '73%', text: gettext('Message')},
{width: '20%', text: gettext('Time')}
];
} }
getPreviousPage = () => { getPreviousPage = () => {
@@ -178,12 +173,23 @@ class Content extends React.Component {
return <p className="error mt-6 text-center">{errorMsg}</p>; return <p className="error mt-6 text-center">{errorMsg}</p>;
} }
const isDesktop = Utils.isDesktop();
const theadData = isDesktop ? [
{width: '7%', text: ''},
{width: '73%', text: gettext('Message')},
{width: '20%', text: gettext('Time')}
] : [
{width: '15%', text: ''},
{width: '52%', text: gettext('Message')},
{width: '33%', text: gettext('Time')}
];
return ( return (
<React.Fragment> <React.Fragment>
<table className="table-hover"> <table className="table-hover">
<thead> <thead>
<tr> <tr>
{this.theadData.map((item, index) => { {theadData.map((item, index) => {
return <th key={index} width={item.width}>{item.text}</th>; return <th key={index} width={item.width}>{item.text}</th>;
})} })}
</tr> </tr>