Adding cards for sidebars in UI.
This commit is contained in:
parent
ee9d053251
commit
297755e757
7 changed files with 197 additions and 175 deletions
|
|
@ -6,7 +6,7 @@ import { WebSocketService } from '../services';
|
|||
import { PostListings } from './post-listings';
|
||||
import { Sidebar } from './sidebar';
|
||||
import { msgOp, routeSortTypeToEnum, fetchLimit } from '../utils';
|
||||
import { T } from 'inferno-i18next';
|
||||
import { T, i18n } from 'inferno-i18next';
|
||||
|
||||
interface State {
|
||||
community: CommunityI;
|
||||
|
|
@ -134,7 +134,7 @@ export class Community extends Component<any, State> {
|
|||
<option disabled><T i18nKey="sort_type">#</T></option>
|
||||
<option value={SortType.Hot}><T i18nKey="hot">#</T></option>
|
||||
<option value={SortType.New}><T i18nKey="new">#</T></option>
|
||||
<option disabled>──────────</option>
|
||||
<option disabled>──────</option>
|
||||
<option value={SortType.TopDay}><T i18nKey="top_day">#</T></option>
|
||||
<option value={SortType.TopWeek}><T i18nKey="week">#</T></option>
|
||||
<option value={SortType.TopMonth}><T i18nKey="month">#</T></option>
|
||||
|
|
|
|||
|
|
@ -134,25 +134,30 @@ export class Main extends Component<any, MainState> {
|
|||
<div>
|
||||
{!this.state.loading &&
|
||||
<div>
|
||||
{this.trendingCommunities()}
|
||||
{UserService.Instance.user && this.state.subscribedCommunities.length > 0 &&
|
||||
<div>
|
||||
<h5>
|
||||
<T i18nKey="subscribed_to_communities">#<Link class="text-white" to="/communities">#</Link></T>
|
||||
</h5>
|
||||
<ul class="list-inline">
|
||||
{this.state.subscribedCommunities.map(community =>
|
||||
<li class="list-inline-item"><Link to={`/c/${community.community_name}`}>{community.community_name}</Link></li>
|
||||
)}
|
||||
</ul>
|
||||
<div class="card border-secondary mb-3">
|
||||
<div class="card-body">
|
||||
{this.trendingCommunities()}
|
||||
{UserService.Instance.user && this.state.subscribedCommunities.length > 0 &&
|
||||
<div>
|
||||
<h5>
|
||||
<T i18nKey="subscribed_to_communities">#<Link class="text-white" to="/communities">#</Link></T>
|
||||
</h5>
|
||||
<ul class="list-inline">
|
||||
{this.state.subscribedCommunities.map(community =>
|
||||
<li class="list-inline-item"><Link to={`/c/${community.community_name}`}>{community.community_name}</Link></li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
<Link class="btn btn-sm btn-secondary btn-block"
|
||||
to="/create_community">
|
||||
<T i18nKey="create_a_community">#</T>
|
||||
</Link>
|
||||
</div>
|
||||
}
|
||||
<Link class="btn btn-sm btn-secondary btn-block mb-3"
|
||||
to="/create_community">
|
||||
<T i18nKey="create_a_community">#</T>
|
||||
</Link>
|
||||
{this.sidebar()}
|
||||
</div>
|
||||
{this.sidebar()}
|
||||
{this.landing()}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
|
|
@ -175,15 +180,16 @@ export class Main extends Component<any, MainState> {
|
|||
|
||||
sidebar() {
|
||||
return (
|
||||
<div>
|
||||
{!this.state.showEditSite ?
|
||||
this.siteInfo() :
|
||||
<SiteForm
|
||||
site={this.state.site.site}
|
||||
onCancel={this.handleEditCancel}
|
||||
/>
|
||||
}
|
||||
{this.landing()}
|
||||
<div class="card border-secondary mb-3">
|
||||
<div class="card-body">
|
||||
{!this.state.showEditSite ?
|
||||
this.siteInfo() :
|
||||
<SiteForm
|
||||
site={this.state.site.site}
|
||||
onCancel={this.handleEditCancel}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -208,17 +214,17 @@ export class Main extends Component<any, MainState> {
|
|||
</ul>
|
||||
}
|
||||
<ul class="my-2 list-inline">
|
||||
<li className="list-inline-item badge badge-light">
|
||||
<li className="list-inline-item badge badge-secondary">
|
||||
<T i18nKey="number_of_users" interpolation={{count: this.state.site.site.number_of_users}}>#</T>
|
||||
</li>
|
||||
<li className="list-inline-item badge badge-light">
|
||||
<li className="list-inline-item badge badge-secondary">
|
||||
<T i18nKey="number_of_posts" interpolation={{count: this.state.site.site.number_of_posts}}>#</T>
|
||||
</li>
|
||||
<li className="list-inline-item badge badge-light">
|
||||
<li className="list-inline-item badge badge-secondary">
|
||||
<T i18nKey="number_of_comments" interpolation={{count: this.state.site.site.number_of_comments}}>#</T>
|
||||
</li>
|
||||
<li className="list-inline-item">
|
||||
<Link className="badge badge-light" to="/modlog">
|
||||
<Link className="badge badge-secondary" to="/modlog">
|
||||
<T i18nKey="modlog">#</T>
|
||||
</Link>
|
||||
</li>
|
||||
|
|
@ -235,7 +241,6 @@ export class Main extends Component<any, MainState> {
|
|||
<div>
|
||||
<hr />
|
||||
<div className="md-div" dangerouslySetInnerHTML={mdToHtml(this.state.site.site.description)} />
|
||||
<hr />
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
|
@ -244,17 +249,19 @@ export class Main extends Component<any, MainState> {
|
|||
|
||||
landing() {
|
||||
return (
|
||||
<div>
|
||||
<h5>
|
||||
<T i18nKey="powered_by" class="d-inline">#</T>
|
||||
<svg class="icon mx-2"><use xlinkHref="#icon-mouse">#</use></svg>
|
||||
<a href={repoUrl}>Lemmy<sup>beta</sup></a>
|
||||
</h5>
|
||||
<p>
|
||||
<T i18nKey="landing_0">#<a href="https://en.wikipedia.org/wiki/Link_aggregation">#</a><a href="https://en.wikipedia.org/wiki/Fediverse">#</a><br></br><code>#</code><br></br><b>#</b><br></br><a href={repoUrl}>#</a><br></br><a href="https://www.rust-lang.org">#</a><a href="https://actix.rs/">#</a><a href="https://www.infernojs.org">#</a><a href="https://www.typescriptlang.org/">#</a>
|
||||
</T>
|
||||
</p>
|
||||
<div class="card border-secondary">
|
||||
<div class="card-body">
|
||||
<h5>
|
||||
<T i18nKey="powered_by" class="d-inline">#</T>
|
||||
<svg class="icon mx-2"><use xlinkHref="#icon-mouse">#</use></svg>
|
||||
<a href={repoUrl}>Lemmy<sup>beta</sup></a>
|
||||
</h5>
|
||||
<p>
|
||||
<T i18nKey="landing_0">#<a href="https://en.wikipedia.org/wiki/Link_aggregation">#</a><a href="https://en.wikipedia.org/wiki/Fediverse">#</a><br></br><code>#</code><br></br><b>#</b><br></br><a href={repoUrl}>#</a><br></br><a href="https://www.rust-lang.org">#</a><a href="https://actix.rs/">#</a><a href="https://www.infernojs.org">#</a><a href="https://www.typescriptlang.org/">#</a>
|
||||
</T>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
@ -275,7 +282,7 @@ export class Main extends Component<any, MainState> {
|
|||
|
||||
selects() {
|
||||
return (
|
||||
<div className="mb-2">
|
||||
<div className="mb-3">
|
||||
<div class="btn-group btn-group-toggle">
|
||||
<label className={`btn btn-sm btn-secondary
|
||||
${this.state.type_ == ListingType.Subscribed && 'active'}
|
||||
|
|
@ -302,7 +309,7 @@ export class Main extends Component<any, MainState> {
|
|||
<option disabled><T i18nKey="sort_type">#</T></option>
|
||||
<option value={SortType.Hot}><T i18nKey="hot">#</T></option>
|
||||
<option value={SortType.New}><T i18nKey="new">#</T></option>
|
||||
<option disabled>──────────</option>
|
||||
<option disabled>─────</option>
|
||||
<option value={SortType.TopDay}><T i18nKey="top_day">#</T></option>
|
||||
<option value={SortType.TopWeek}><T i18nKey="week">#</T></option>
|
||||
<option value={SortType.TopMonth}><T i18nKey="month">#</T></option>
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ export class Navbar extends Component<any, NavbarState> {
|
|||
// TODO class active corresponding to current page
|
||||
navbar() {
|
||||
return (
|
||||
<nav class="container navbar navbar-expand-md navbar-light navbar-bg p-0 px-3">
|
||||
<nav class="container-fluid navbar navbar-expand-md navbar-light shadow p-0 px-3">
|
||||
<Link title={version} class="navbar-brand" to="/">
|
||||
{this.state.siteName}
|
||||
</Link>
|
||||
|
|
|
|||
|
|
@ -54,85 +54,90 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
|
|||
let community = this.props.community;
|
||||
return (
|
||||
<div>
|
||||
<h5 className="mb-0">{community.title}
|
||||
{community.removed &&
|
||||
<small className="ml-2 text-muted font-italic"><T i18nKey="removed">#</T></small>
|
||||
}
|
||||
{community.deleted &&
|
||||
<small className="ml-2 text-muted font-italic"><T i18nKey="deleted">#</T></small>
|
||||
}
|
||||
</h5>
|
||||
<Link className="text-muted" to={`/c/${community.name}`}>/c/{community.name}</Link>
|
||||
<ul class="list-inline mb-1 text-muted small font-weight-bold">
|
||||
{this.canMod &&
|
||||
<>
|
||||
<li className="list-inline-item">
|
||||
<span class="pointer" onClick={linkEvent(this, this.handleEditClick)}><T i18nKey="edit">#</T></span>
|
||||
</li>
|
||||
{this.amCreator &&
|
||||
<li className="list-inline-item">
|
||||
<span class="pointer" onClick={linkEvent(this, this.handleDeleteClick)}>
|
||||
{!community.deleted ? i18n.t('delete') : i18n.t('restore')}
|
||||
</span>
|
||||
</li>
|
||||
}
|
||||
</>
|
||||
}
|
||||
{this.canAdmin &&
|
||||
<li className="list-inline-item">
|
||||
{!this.props.community.removed ?
|
||||
<span class="pointer" onClick={linkEvent(this, this.handleModRemoveShow)}><T i18nKey="remove">#</T></span> :
|
||||
<span class="pointer" onClick={linkEvent(this, this.handleModRemoveSubmit)}><T i18nKey="restore">#</T></span>
|
||||
}
|
||||
</li>
|
||||
<div class="card border-secondary mb-3">
|
||||
<div class="card-body">
|
||||
<h5 className="mb-0">
|
||||
<span>{community.title}</span>
|
||||
{community.removed &&
|
||||
<small className="ml-2 text-muted font-italic"><T i18nKey="removed">#</T></small>
|
||||
}
|
||||
{community.deleted &&
|
||||
<small className="ml-2 text-muted font-italic"><T i18nKey="deleted">#</T></small>
|
||||
}
|
||||
</h5>
|
||||
<Link className="text-muted" to={`/c/${community.name}`}>/c/{community.name}</Link>
|
||||
<ul class="list-inline mb-1 text-muted small font-weight-bold">
|
||||
{this.canMod &&
|
||||
<>
|
||||
<li className="list-inline-item">
|
||||
<span class="pointer" onClick={linkEvent(this, this.handleEditClick)}><T i18nKey="edit">#</T></span>
|
||||
</li>
|
||||
{this.amCreator &&
|
||||
<li className="list-inline-item">
|
||||
<span class="pointer" onClick={linkEvent(this, this.handleDeleteClick)}>
|
||||
{!community.deleted ? i18n.t('delete') : i18n.t('restore')}
|
||||
</span>
|
||||
</li>
|
||||
}
|
||||
</>
|
||||
}
|
||||
{this.canAdmin &&
|
||||
<li className="list-inline-item">
|
||||
{!this.props.community.removed ?
|
||||
<span class="pointer" onClick={linkEvent(this, this.handleModRemoveShow)}><T i18nKey="remove">#</T></span> :
|
||||
<span class="pointer" onClick={linkEvent(this, this.handleModRemoveSubmit)}><T i18nKey="restore">#</T></span>
|
||||
}
|
||||
</li>
|
||||
|
||||
}
|
||||
</ul>
|
||||
{this.state.showRemoveDialog &&
|
||||
<form onSubmit={linkEvent(this, this.handleModRemoveSubmit)}>
|
||||
<div class="form-group row">
|
||||
<label class="col-form-label"><T i18nKey="reason">#</T></label>
|
||||
<input type="text" class="form-control mr-2" placeholder={i18n.t('optional')} value={this.state.removeReason} onInput={linkEvent(this, this.handleModRemoveReasonChange)} />
|
||||
}
|
||||
</ul>
|
||||
{this.state.showRemoveDialog &&
|
||||
<form onSubmit={linkEvent(this, this.handleModRemoveSubmit)}>
|
||||
<div class="form-group row">
|
||||
<label class="col-form-label"><T i18nKey="reason">#</T></label>
|
||||
<input type="text" class="form-control mr-2" placeholder={i18n.t('optional')} value={this.state.removeReason} onInput={linkEvent(this, this.handleModRemoveReasonChange)} />
|
||||
</div>
|
||||
{/* TODO hold off on expires for now */}
|
||||
{/* <div class="form-group row"> */}
|
||||
{/* <label class="col-form-label">Expires</label> */}
|
||||
{/* <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.removeExpires} onInput={linkEvent(this, this.handleModRemoveExpiresChange)} /> */}
|
||||
{/* </div> */}
|
||||
<div class="form-group row">
|
||||
<button type="submit" class="btn btn-secondary"><T i18nKey="remove_community">#</T></button>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
<ul class="my-1 list-inline">
|
||||
<li className="list-inline-item"><Link className="badge badge-secondary" to="/communities">{community.category_name}</Link></li>
|
||||
<li className="list-inline-item badge badge-secondary"><T i18nKey="number_of_subscribers" interpolation={{count: community.number_of_subscribers}}>#</T></li>
|
||||
<li className="list-inline-item badge badge-secondary"><T i18nKey="number_of_posts" interpolation={{count: community.number_of_posts}}>#</T></li>
|
||||
<li className="list-inline-item badge badge-secondary"><T i18nKey="number_of_comments" interpolation={{count: community.number_of_comments}}>#</T></li>
|
||||
<li className="list-inline-item"><Link className="badge badge-secondary" to={`/modlog/community/${this.props.community.id}`}><T i18nKey="modlog">#</T></Link></li>
|
||||
</ul>
|
||||
<ul class="list-inline small">
|
||||
<li class="list-inline-item">{i18n.t('mods')}: </li>
|
||||
{this.props.moderators.map(mod =>
|
||||
<li class="list-inline-item"><Link class="text-info" to={`/u/${mod.user_name}`}>{mod.user_name}</Link></li>
|
||||
)}
|
||||
</ul>
|
||||
<Link class={`btn btn-sm btn-secondary btn-block mb-3 ${(community.deleted || community.removed) && 'no-click'}`}
|
||||
to={`/create_post/c/${community.name}`}><T i18nKey="create_a_post">#</T></Link>
|
||||
<div>
|
||||
{community.subscribed
|
||||
? <button class="btn btn-sm btn-secondary btn-block" onClick={linkEvent(community.id, this.handleUnsubscribe)}><T i18nKey="unsubscribe">#</T></button>
|
||||
: <button class="btn btn-sm btn-secondary btn-block" onClick={linkEvent(community.id, this.handleSubscribe)}><T i18nKey="subscribe">#</T></button>
|
||||
}
|
||||
</div>
|
||||
{/* TODO hold off on expires for now */}
|
||||
{/* <div class="form-group row"> */}
|
||||
{/* <label class="col-form-label">Expires</label> */}
|
||||
{/* <input type="date" class="form-control mr-2" placeholder={i18n.t('expires')} value={this.state.removeExpires} onInput={linkEvent(this, this.handleModRemoveExpiresChange)} /> */}
|
||||
{/* </div> */}
|
||||
<div class="form-group row">
|
||||
<button type="submit" class="btn btn-secondary"><T i18nKey="remove_community">#</T></button>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
<ul class="my-1 list-inline">
|
||||
<li className="list-inline-item"><Link className="badge badge-light" to="/communities">{community.category_name}</Link></li>
|
||||
<li className="list-inline-item badge badge-light"><T i18nKey="number_of_subscribers" interpolation={{count: community.number_of_subscribers}}>#</T></li>
|
||||
<li className="list-inline-item badge badge-light"><T i18nKey="number_of_posts" interpolation={{count: community.number_of_posts}}>#</T></li>
|
||||
<li className="list-inline-item badge badge-light"><T i18nKey="number_of_comments" interpolation={{count: community.number_of_comments}}>#</T></li>
|
||||
<li className="list-inline-item"><Link className="badge badge-light" to={`/modlog/community/${this.props.community.id}`}><T i18nKey="modlog">#</T></Link></li>
|
||||
</ul>
|
||||
<ul class="list-inline small">
|
||||
<li class="list-inline-item">{i18n.t('mods')}: </li>
|
||||
{this.props.moderators.map(mod =>
|
||||
<li class="list-inline-item"><Link class="text-info" to={`/u/${mod.user_name}`}>{mod.user_name}</Link></li>
|
||||
)}
|
||||
</ul>
|
||||
<Link class={`btn btn-sm btn-secondary btn-block mb-3 ${(community.deleted || community.removed) && 'no-click'}`}
|
||||
to={`/create_post/c/${community.name}`}><T i18nKey="create_a_post">#</T></Link>
|
||||
<div>
|
||||
{community.subscribed
|
||||
? <button class="btn btn-sm btn-secondary btn-block mb-3" onClick={linkEvent(community.id, this.handleUnsubscribe)}><T i18nKey="unsubscribe">#</T></button>
|
||||
: <button class="btn btn-sm btn-secondary btn-block mb-3" onClick={linkEvent(community.id, this.handleSubscribe)}><T i18nKey="subscribe">#</T></button>
|
||||
}
|
||||
</div>
|
||||
{community.description &&
|
||||
<div>
|
||||
<hr />
|
||||
<div className="md-div" dangerouslySetInnerHTML={mdToHtml(community.description)} />
|
||||
<hr />
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
{community.description &&
|
||||
<div class="card border-secondary">
|
||||
<div class="card-body">
|
||||
<div className="md-div" dangerouslySetInnerHTML={mdToHtml(community.description)} />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -123,7 +123,7 @@ export class User extends Component<any, UserState> {
|
|||
{this.state.loading ?
|
||||
<h5><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h5> :
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-9">
|
||||
<div class="col-12 col-md-8">
|
||||
<h5>/u/{this.state.user.name}</h5>
|
||||
{this.selects()}
|
||||
{this.state.view == View.Overview &&
|
||||
|
|
@ -140,7 +140,7 @@ export class User extends Component<any, UserState> {
|
|||
}
|
||||
{this.paginator()}
|
||||
</div>
|
||||
<div class="col-12 col-md-3">
|
||||
<div class="col-12 col-md-4">
|
||||
{this.userInfo()}
|
||||
{this.isCurrentUser &&
|
||||
this.userSettings()
|
||||
|
|
@ -232,19 +232,24 @@ export class User extends Component<any, UserState> {
|
|||
let user = this.state.user;
|
||||
return (
|
||||
<div>
|
||||
<h5>{user.name}</h5>
|
||||
<div>{i18n.t('joined')} <MomentTime data={user} /></div>
|
||||
<table class="table table-bordered table-sm mt-2">
|
||||
<tr>
|
||||
<td><T i18nKey="number_of_points" interpolation={{count: user.post_score}}>#</T></td>
|
||||
<td><T i18nKey="number_of_posts" interpolation={{count: user.number_of_posts}}>#</T></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><T i18nKey="number_of_points" interpolation={{count: user.comment_score}}>#</T></td>
|
||||
<td><T i18nKey="number_of_comments" interpolation={{count: user.number_of_comments}}>#</T></td>
|
||||
</tr>
|
||||
</table>
|
||||
<hr />
|
||||
<div class="card border-secondary mb-3">
|
||||
<div class="card-body">
|
||||
<h5>{user.name}</h5>
|
||||
<div>{i18n.t('joined')} <MomentTime data={user} /></div>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-sm mt-2 mb-0">
|
||||
<tr>
|
||||
<td><T i18nKey="number_of_points" interpolation={{count: user.post_score}}>#</T></td>
|
||||
<td><T i18nKey="number_of_posts" interpolation={{count: user.number_of_posts}}>#</T></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><T i18nKey="number_of_points" interpolation={{count: user.comment_score}}>#</T></td>
|
||||
<td><T i18nKey="number_of_comments" interpolation={{count: user.number_of_comments}}>#</T></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -252,23 +257,27 @@ export class User extends Component<any, UserState> {
|
|||
userSettings() {
|
||||
return (
|
||||
<div>
|
||||
<h5><T i18nKey="settings">#</T></h5>
|
||||
<form onSubmit={linkEvent(this, this.handleUserSettingsSubmit)}>
|
||||
<div class="form-group row">
|
||||
<div class="col-12">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" checked={this.state.userSettingsForm.show_nsfw} onChange={linkEvent(this, this.handleUserSettingsShowNsfwChange)}/>
|
||||
<label class="form-check-label"><T i18nKey="show_nsfw">#</T></label>
|
||||
<div class="card border-secondary mb-3">
|
||||
<div class="card-body">
|
||||
<h5><T i18nKey="settings">#</T></h5>
|
||||
<form onSubmit={linkEvent(this, this.handleUserSettingsSubmit)}>
|
||||
<div class="form-group row">
|
||||
<div class="col-12">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" checked={this.state.userSettingsForm.show_nsfw} onChange={linkEvent(this, this.handleUserSettingsShowNsfwChange)}/>
|
||||
<label class="form-check-label"><T i18nKey="show_nsfw">#</T></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group row mb-0">
|
||||
<div class="col-12">
|
||||
<button type="submit" class="btn btn-secondary">{this.state.userSettingsLoading ?
|
||||
<svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> : capitalizeFirstLetter(i18n.t('save'))}</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="form-group row">
|
||||
<div class="col-12">
|
||||
<button type="submit" class="btn btn-secondary">{this.state.userSettingsLoading ?
|
||||
<svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> : capitalizeFirstLetter(i18n.t('save'))}</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -276,16 +285,20 @@ export class User extends Component<any, UserState> {
|
|||
moderates() {
|
||||
return (
|
||||
<div>
|
||||
{this.state.moderates.length > 0 &&
|
||||
<div>
|
||||
<h5><T i18nKey="moderates">#</T></h5>
|
||||
<ul class="list-unstyled">
|
||||
{this.state.moderates.map(community =>
|
||||
<li><Link to={`/c/${community.community_name}`}>{community.community_name}</Link></li>
|
||||
)}
|
||||
</ul>
|
||||
<div class="card border-secondary mb-3">
|
||||
<div class="card-body">
|
||||
{this.state.moderates.length > 0 &&
|
||||
<div>
|
||||
<h5><T i18nKey="moderates">#</T></h5>
|
||||
<ul class="list-unstyled mb-0">
|
||||
{this.state.moderates.map(community =>
|
||||
<li><Link to={`/c/${community.community_name}`}>{community.community_name}</Link></li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -294,14 +307,15 @@ export class User extends Component<any, UserState> {
|
|||
return (
|
||||
<div>
|
||||
{this.state.follows.length > 0 &&
|
||||
<div>
|
||||
<hr />
|
||||
<h5><T i18nKey="subscribed">#</T></h5>
|
||||
<ul class="list-unstyled">
|
||||
{this.state.follows.map(community =>
|
||||
<li><Link to={`/c/${community.community_name}`}>{community.community_name}</Link></li>
|
||||
)}
|
||||
</ul>
|
||||
<div class="card border-secondary mb-3">
|
||||
<div class="card-body">
|
||||
<h5><T i18nKey="subscribed">#</T></h5>
|
||||
<ul class="list-unstyled mb-0">
|
||||
{this.state.follows.map(community =>
|
||||
<li><Link to={`/c/${community.community_name}`}>{community.community_name}</Link></li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
|
@ -310,7 +324,7 @@ export class User extends Component<any, UserState> {
|
|||
|
||||
paginator() {
|
||||
return (
|
||||
<div class="mt-2">
|
||||
<div class="my-2">
|
||||
{this.state.page > 1 &&
|
||||
<button class="btn btn-sm btn-secondary mr-1" onClick={linkEvent(this, this.prevPage)}><T i18nKey="prev">#</T></button>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -96,10 +96,6 @@ body, .text-white, .navbar-brand, .badge-light, .btn-secondary {
|
|||
z-index: 2000;
|
||||
}
|
||||
|
||||
.navbar-bg {
|
||||
background-color: #222;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 3px solid #ccc;
|
||||
margin: 0.5em 5px;
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ class Index extends Component<any, any> {
|
|||
<Provider i18next={i18n}>
|
||||
<BrowserRouter>
|
||||
<Navbar />
|
||||
<div class="mt-1 p-0">
|
||||
<div class="mt-3 p-0">
|
||||
<Switch>
|
||||
<Route path={`/home/type/:type/sort/:sort/page/:page`} component={Main} />
|
||||
<Route exact path={`/`} component={Main} />
|
||||
|
|
|
|||
Loading…
Reference in a new issue