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;
<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>
<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>
)
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>
)
}
</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>
<div>
<hr />
<div className="md-div" dangerouslySetInnerHTML={mdToHtml(this.state.site.site.description)} />
- <hr />
</div>
}
</div>
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>
)
}
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'}
<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>
// 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>
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>
+ <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)} />
+ </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>
}
- </>
- }
- {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>
+ <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>
}
- </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)} />
</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>
+ </div>
+ {community.description &&
+ <div class="card border-secondary">
+ <div class="card-body">
+ <div className="md-div" dangerouslySetInnerHTML={mdToHtml(community.description)} />
+ </div>
</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>
);
}
{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 &&
}
{this.paginator()}
</div>
- <div class="col-12 col-md-3">
+ <div class="col-12 col-md-4">
{this.userInfo()}
{this.isCurrentUser &&
this.userSettings()
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>
)
}
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>
- <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 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>
- </form>
+ </div>
</div>
)
}
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>
)
}
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>
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>
}
z-index: 2000;
}
-.navbar-bg {
- background-color: #222;
-}
-
blockquote {
border-left: 3px solid #ccc;
margin: 0.5em 5px;
<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} />
projects / lemmy.git / commitdiff