diff options
Diffstat (limited to 'ui/src')
-rw-r--r-- | ui/src/components/community.tsx | 4 | ||||
-rw-r--r-- | ui/src/components/main.tsx | 93 | ||||
-rw-r--r-- | ui/src/components/navbar.tsx | 2 | ||||
-rw-r--r-- | ui/src/components/sidebar.tsx | 151 | ||||
-rw-r--r-- | ui/src/components/user.tsx | 110 | ||||
-rw-r--r-- | ui/src/css/main.css | 4 | ||||
-rw-r--r-- | ui/src/index.tsx | 2 |
7 files changed, 194 insertions, 172 deletions
diff --git a/ui/src/components/community.tsx b/ui/src/components/community.tsx index b9f9c8b2..0a982a84 100644 --- a/ui/src/components/community.tsx +++ b/ui/src/components/community.tsx @@ -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> diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx index a21be250..32631811 100644 --- a/ui/src/components/main.tsx +++ b/ui/src/components/main.tsx @@ -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> diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx index 732527d7..59330168 100644 --- a/ui/src/components/navbar.tsx +++ b/ui/src/components/navbar.tsx @@ -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> diff --git a/ui/src/components/sidebar.tsx b/ui/src/components/sidebar.tsx index 8d804343..9c24bed3 100644 --- a/ui/src/components/sidebar.tsx +++ b/ui/src/components/sidebar.tsx @@ -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> + <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> ); } diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx index 39a13e16..8b78917e 100644 --- a/ui/src/components/user.tsx +++ b/ui/src/components/user.tsx @@ -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> - <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> ) } @@ -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> } diff --git a/ui/src/css/main.css b/ui/src/css/main.css index 249c7a26..729604a9 100644 --- a/ui/src/css/main.css +++ b/ui/src/css/main.css @@ -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; diff --git a/ui/src/index.tsx b/ui/src/index.tsx index 41381513..7f837355 100644 --- a/ui/src/index.tsx +++ b/ui/src/index.tsx @@ -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} /> |