grishka/lemmy
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Adding cards for sidebars in UI.

Browse source
This commit is contained in:
Dessalines 2019-08-19 19:37:32 -07:00
parent 1b72e0c0e3
commit 21a7243491
7 changed files with 197 additions and 175 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/src/components/community.tsx
View file

@ -6,7 +6,7 @@ import { WebSocketService } from '../services';
import { PostListings } from './post-listings'; import { PostListings } from './post-listings';
import { Sidebar } from './sidebar'; import { Sidebar } from './sidebar';
import { msgOp, routeSortTypeToEnum, fetchLimit } from '../utils'; import { msgOp, routeSortTypeToEnum, fetchLimit } from '../utils';
import { T } from 'inferno-i18next'; import { T, i18n } from 'inferno-i18next';
interface State { interface State {
community: CommunityI; community: CommunityI;
@ -134,7 +134,7 @@ export class Community extends Component<any, State> {
<option disabled><T i18nKey="sort_type">#</T></option> <option disabled><T i18nKey="sort_type">#</T></option>
<option value={SortType.Hot}><T i18nKey="hot">#</T></option> <option value={SortType.Hot}><T i18nKey="hot">#</T></option>
<option value={SortType.New}><T i18nKey="new">#</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.TopDay}><T i18nKey="top_day">#</T></option>
<option value={SortType.TopWeek}><T i18nKey="week">#</T></option> <option value={SortType.TopWeek}><T i18nKey="week">#</T></option>
<option value={SortType.TopMonth}><T i18nKey="month">#</T></option> <option value={SortType.TopMonth}><T i18nKey="month">#</T></option>

29
ui/src/components/main.tsx
View file

@ -134,6 +134,8 @@ export class Main extends Component<any, MainState> {
<div> <div>
{!this.state.loading && {!this.state.loading &&
<div> <div>
<div class="card border-secondary mb-3">
<div class="card-body">
{this.trendingCommunities()} {this.trendingCommunities()}
{UserService.Instance.user && this.state.subscribedCommunities.length > 0 && {UserService.Instance.user && this.state.subscribedCommunities.length > 0 &&
<div> <div>
@ -147,11 +149,14 @@ export class Main extends Component<any, MainState> {
</ul> </ul>
</div> </div>
} }
<Link class="btn btn-sm btn-secondary btn-block mb-3" <Link class="btn btn-sm btn-secondary btn-block"
to="/create_community"> to="/create_community">
<T i18nKey="create_a_community">#</T> <T i18nKey="create_a_community">#</T>
</Link> </Link>
</div>
</div>
{this.sidebar()} {this.sidebar()}
{this.landing()}
</div> </div>
} }
</div> </div>
@ -175,7 +180,8 @@ export class Main extends Component<any, MainState> {
sidebar() { sidebar() {
return ( return (
<div> <div class="card border-secondary mb-3">
<div class="card-body">
{!this.state.showEditSite ? {!this.state.showEditSite ?
this.siteInfo() : this.siteInfo() :
<SiteForm <SiteForm
@ -183,7 +189,7 @@ export class Main extends Component<any, MainState> {
onCancel={this.handleEditCancel} onCancel={this.handleEditCancel}
/> />
} }
{this.landing()} </div>
</div> </div>
) )
} }
@ -208,17 +214,17 @@ export class Main extends Component<any, MainState> {
</ul> </ul>
} }
<ul class="my-2 list-inline"> <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> <T i18nKey="number_of_users" interpolation={{count: this.state.site.site.number_of_users}}>#</T>
</li> </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> <T i18nKey="number_of_posts" interpolation={{count: this.state.site.site.number_of_posts}}>#</T>
</li> </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> <T i18nKey="number_of_comments" interpolation={{count: this.state.site.site.number_of_comments}}>#</T>
</li> </li>
<li className="list-inline-item"> <li className="list-inline-item">
<Link className="badge badge-light" to="/modlog"> <Link className="badge badge-secondary" to="/modlog">
<T i18nKey="modlog">#</T> <T i18nKey="modlog">#</T>
</Link> </Link>
</li> </li>
@ -235,7 +241,6 @@ export class Main extends Component<any, MainState> {
<div> <div>
<hr /> <hr />
<div className="md-div" dangerouslySetInnerHTML={mdToHtml(this.state.site.site.description)} /> <div className="md-div" dangerouslySetInnerHTML={mdToHtml(this.state.site.site.description)} />
<hr />
</div> </div>
} }
</div> </div>
@ -244,7 +249,8 @@ export class Main extends Component<any, MainState> {
landing() { landing() {
return ( return (
<div> <div class="card border-secondary">
<div class="card-body">
<h5> <h5>
<T i18nKey="powered_by" class="d-inline">#</T> <T i18nKey="powered_by" class="d-inline">#</T>
<svg class="icon mx-2"><use xlinkHref="#icon-mouse">#</use></svg> <svg class="icon mx-2"><use xlinkHref="#icon-mouse">#</use></svg>
@ -255,6 +261,7 @@ export class Main extends Component<any, MainState> {
</T> </T>
</p> </p>
</div> </div>
</div>
) )
} }
@ -275,7 +282,7 @@ export class Main extends Component<any, MainState> {
selects() { selects() {
return ( return (
<div className="mb-2"> <div className="mb-3">
<div class="btn-group btn-group-toggle"> <div class="btn-group btn-group-toggle">
<label className={`btn btn-sm btn-secondary <label className={`btn btn-sm btn-secondary
${this.state.type_ == ListingType.Subscribed && 'active'} ${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 disabled><T i18nKey="sort_type">#</T></option>
<option value={SortType.Hot}><T i18nKey="hot">#</T></option> <option value={SortType.Hot}><T i18nKey="hot">#</T></option>
<option value={SortType.New}><T i18nKey="new">#</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.TopDay}><T i18nKey="top_day">#</T></option>
<option value={SortType.TopWeek}><T i18nKey="week">#</T></option> <option value={SortType.TopWeek}><T i18nKey="week">#</T></option>
<option value={SortType.TopMonth}><T i18nKey="month">#</T></option> <option value={SortType.TopMonth}><T i18nKey="month">#</T></option>

2
ui/src/components/navbar.tsx
View file

@ -76,7 +76,7 @@ export class Navbar extends Component<any, NavbarState> {
// TODO class active corresponding to current page // TODO class active corresponding to current page
navbar() { navbar() {
return ( 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="/"> <Link title={version} class="navbar-brand" to="/">
{this.state.siteName} {this.state.siteName}
</Link> </Link>

27
ui/src/components/sidebar.tsx
View file

@ -54,7 +54,10 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
let community = this.props.community; let community = this.props.community;
return ( return (
<div> <div>
<h5 className="mb-0">{community.title} <div class="card border-secondary mb-3">
<div class="card-body">
<h5 className="mb-0">
<span>{community.title}</span>
{community.removed && {community.removed &&
<small className="ml-2 text-muted font-italic"><T i18nKey="removed">#</T></small> <small className="ml-2 text-muted font-italic"><T i18nKey="removed">#</T></small>
} }
@ -105,11 +108,11 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
</form> </form>
} }
<ul class="my-1 list-inline"> <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"><Link className="badge badge-secondary" 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-secondary"><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-secondary"><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 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-light" to={`/modlog/community/${this.props.community.id}`}><T i18nKey="modlog">#</T></Link></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>
<ul class="list-inline small"> <ul class="list-inline small">
<li class="list-inline-item">{i18n.t('mods')}: </li> <li class="list-inline-item">{i18n.t('mods')}: </li>
@ -121,15 +124,17 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
to={`/create_post/c/${community.name}`}><T i18nKey="create_a_post">#</T></Link> to={`/create_post/c/${community.name}`}><T i18nKey="create_a_post">#</T></Link>
<div> <div>
{community.subscribed {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" 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> : <button class="btn btn-sm btn-secondary btn-block" onClick={linkEvent(community.id, this.handleSubscribe)}><T i18nKey="subscribe">#</T></button>
} }
</div> </div>
</div>
</div>
{community.description && {community.description &&
<div> <div class="card border-secondary">
<hr /> <div class="card-body">
<div className="md-div" dangerouslySetInnerHTML={mdToHtml(community.description)} /> <div className="md-div" dangerouslySetInnerHTML={mdToHtml(community.description)} />
<hr /> </div>
</div> </div>
} }
</div> </div>

34
ui/src/components/user.tsx
View file

@ -123,7 +123,7 @@ export class User extends Component<any, UserState> {
{this.state.loading ? {this.state.loading ?
<h5><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h5> : <h5><svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg></h5> :
<div class="row"> <div class="row">
<div class="col-12 col-md-9"> <div class="col-12 col-md-8">
<h5>/u/{this.state.user.name}</h5> <h5>/u/{this.state.user.name}</h5>
{this.selects()} {this.selects()}
{this.state.view == View.Overview && {this.state.view == View.Overview &&
@ -140,7 +140,7 @@ export class User extends Component<any, UserState> {
} }
{this.paginator()} {this.paginator()}
</div> </div>
<div class="col-12 col-md-3"> <div class="col-12 col-md-4">
{this.userInfo()} {this.userInfo()}
{this.isCurrentUser && {this.isCurrentUser &&
this.userSettings() this.userSettings()
@ -232,9 +232,12 @@ export class User extends Component<any, UserState> {
let user = this.state.user; let user = this.state.user;
return ( return (
<div> <div>
<div class="card border-secondary mb-3">
<div class="card-body">
<h5>{user.name}</h5> <h5>{user.name}</h5>
<div>{i18n.t('joined')} <MomentTime data={user} /></div> <div>{i18n.t('joined')} <MomentTime data={user} /></div>
<table class="table table-bordered table-sm mt-2"> <div class="table-responsive">
<table class="table table-bordered table-sm mt-2 mb-0">
<tr> <tr>
<td><T i18nKey="number_of_points" interpolation={{count: user.post_score}}>#</T></td> <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> <td><T i18nKey="number_of_posts" interpolation={{count: user.number_of_posts}}>#</T></td>
@ -244,7 +247,9 @@ export class User extends Component<any, UserState> {
<td><T i18nKey="number_of_comments" interpolation={{count: user.number_of_comments}}>#</T></td> <td><T i18nKey="number_of_comments" interpolation={{count: user.number_of_comments}}>#</T></td>
</tr> </tr>
</table> </table>
<hr /> </div>
</div>
</div>
</div> </div>
) )
} }
@ -252,6 +257,8 @@ export class User extends Component<any, UserState> {
userSettings() { userSettings() {
return ( return (
<div> <div>
<div class="card border-secondary mb-3">
<div class="card-body">
<h5><T i18nKey="settings">#</T></h5> <h5><T i18nKey="settings">#</T></h5>
<form onSubmit={linkEvent(this, this.handleUserSettingsSubmit)}> <form onSubmit={linkEvent(this, this.handleUserSettingsSubmit)}>
<div class="form-group row"> <div class="form-group row">
@ -262,7 +269,7 @@ export class User extends Component<any, UserState> {
</div> </div>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="form-group row mb-0">
<div class="col-12"> <div class="col-12">
<button type="submit" class="btn btn-secondary">{this.state.userSettingsLoading ? <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> <svg class="icon icon-spinner spin"><use xlinkHref="#icon-spinner"></use></svg> : capitalizeFirstLetter(i18n.t('save'))}</button>
@ -270,16 +277,20 @@ export class User extends Component<any, UserState> {
</div> </div>
</form> </form>
</div> </div>
</div>
</div>
) )
} }
moderates() { moderates() {
return ( return (
<div> <div>
<div class="card border-secondary mb-3">
<div class="card-body">
{this.state.moderates.length > 0 && {this.state.moderates.length > 0 &&
<div> <div>
<h5><T i18nKey="moderates">#</T></h5> <h5><T i18nKey="moderates">#</T></h5>
<ul class="list-unstyled"> <ul class="list-unstyled mb-0">
{this.state.moderates.map(community => {this.state.moderates.map(community =>
<li><Link to={`/c/${community.community_name}`}>{community.community_name}</Link></li> <li><Link to={`/c/${community.community_name}`}>{community.community_name}</Link></li>
)} )}
@ -287,6 +298,8 @@ export class User extends Component<any, UserState> {
</div> </div>
} }
</div> </div>
</div>
</div>
) )
} }
@ -294,15 +307,16 @@ export class User extends Component<any, UserState> {
return ( return (
<div> <div>
{this.state.follows.length > 0 && {this.state.follows.length > 0 &&
<div> <div class="card border-secondary mb-3">
<hr /> <div class="card-body">
<h5><T i18nKey="subscribed">#</T></h5> <h5><T i18nKey="subscribed">#</T></h5>
<ul class="list-unstyled"> <ul class="list-unstyled mb-0">
{this.state.follows.map(community => {this.state.follows.map(community =>
<li><Link to={`/c/${community.community_name}`}>{community.community_name}</Link></li> <li><Link to={`/c/${community.community_name}`}>{community.community_name}</Link></li>
)} )}
</ul> </ul>
</div> </div>
</div>
} }
</div> </div>
) )
@ -310,7 +324,7 @@ export class User extends Component<any, UserState> {
paginator() { paginator() {
return ( return (
<div class="mt-2"> <div class="my-2">
{this.state.page > 1 && {this.state.page > 1 &&
<button class="btn btn-sm btn-secondary mr-1" onClick={linkEvent(this, this.prevPage)}><T i18nKey="prev">#</T></button> <button class="btn btn-sm btn-secondary mr-1" onClick={linkEvent(this, this.prevPage)}><T i18nKey="prev">#</T></button>
} }

4
ui/src/css/main.css
View file

@ -96,10 +96,6 @@ body, .text-white, .navbar-brand, .badge-light, .btn-secondary {
z-index: 2000; z-index: 2000;
} }
.navbar-bg {
background-color: #222;
}
blockquote { blockquote {
border-left: 3px solid #ccc; border-left: 3px solid #ccc;
margin: 0.5em 5px; margin: 0.5em 5px;

2
ui/src/index.tsx
View file

@ -39,7 +39,7 @@ class Index extends Component<any, any> {
<Provider i18next={i18n}> <Provider i18next={i18n}>
<BrowserRouter> <BrowserRouter>
<Navbar /> <Navbar />
<div class="mt-1 p-0"> <div class="mt-3 p-0">
<Switch> <Switch>
<Route path={`/home/type/:type/sort/:sort/page/:page`} component={Main} /> <Route path={`/home/type/:type/sort/:sort/page/:page`} component={Main} />
<Route exact path={`/`} component={Main} /> <Route exact path={`/`} component={Main} />