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

Adding a lot of front end prettying.

Browse source 
- Re-did litely theme.
- Increased spacing.
- Fixed up navbar to not full width.
- Made login/sign up stand out.
- Made thumbnails have a light background.
- Removed btn-sm, made almost all buttons bigger.
- Made all badges lighter.
- Made card backgrounds transparent.
- Fixes #888
This commit is contained in:
Dessalines 2020-07-23 02:10:22 -04:00
parent 01cc8654e2
commit 76fec39670
24 changed files with 274 additions and 258 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
ui/assets/css/main.css vendored
View file

@ -2,6 +2,11 @@
border: 0px; border: 0px;
} }
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: .75rem !important;
padding-left: .75rem !important;
}
.pointer { .pointer {
cursor: pointer; cursor: pointer;
} }
@ -134,12 +139,14 @@ blockquote {
.thumbnail { .thumbnail {
object-fit: cover; object-fit: cover;
min-height: 60px;
max-height: 80px; max-height: 80px;
width: 100%; width: 100%;
} }
svg.thumbnail { .thumbnail svg {
height: 40px; height: 1.25rem;
width: 1.25rem;
} }
.no-s-hows { .no-s-hows {

21
ui/assets/css/themes/_variables.litely.scss vendored
View file

@ -1,17 +1,17 @@
$white: #ffffff; $white: #ffffff;
$orange: #faa077; $orange: #f1641e;
$cyan: #02bdc2; $cyan: #02bdc2;
$green: #d4e9d7; $green: #00C853;
$secondary: $green; $secondary: $green;
$body-color: $gray-700; $body-color: $gray-700;
$link-color: theme-color("danger");; $link-color: theme-color("primary");;
$primary: $orange; $primary: $orange;
$red: #d8486a; $red: #d8486a;
$border-radius: 1.5rem; $border-radius: 0.5rem;
$border-radius-lg: 1.5rem; $border-radius-lg: 0.5rem;
$border-radius-sm: 1rem; $border-radius-sm: 1rem;
$font-family-sans-serif: Guardian-EgypTT,serif,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; $font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Droid Sans","Segoe UI","Helvetica",Arial,sans-serif;
$headings-color: $gray-700; $headings-color: $gray-700;
$input-btn-focus-color: rgba($component-active-bg, .75); $input-btn-focus-color: rgba($component-active-bg, .75);
$form-feedback-valid-color: theme-color("info"); $form-feedback-valid-color: theme-color("info");
@ -21,10 +21,13 @@ $navbar-dark-toggler-border-color: rgba($black, .1);
$navbar-light-active-color: $gray-900; $navbar-light-active-color: $gray-900;
$card-color: $gray-700; $card-color: $gray-700;
$card-cap-color: $gray-700; $card-cap-color: $gray-700;
$info: darken($green, 25%);; $info: $blue;
$body-bg: #f2f0f0; $body-bg: #fff;
$success: darken($green, 25%);; $success: $indigo;
$danger: darken($primary, 25%); $danger: darken($primary, 25%);
$navbar-light-hover-color: $gray-900; $navbar-light-hover-color: $gray-900;
$card-bg: $gray-100; $card-bg: $gray-100;
$border-color: $gray-700; $border-color: $gray-700;
$mark-bg: rgb(255, 252, 239);
$font-weight-bold: 600;
$rounded-pill: 0.25rem;

2
ui/assets/css/themes/litely.min.css vendored
View file

File diff suppressed because one or more lines are too long

4
ui/src/components/comment-node.tsx vendored
View file

@ -204,7 +204,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
</> </>
)} )}
<button <button
class="btn btn-sm text-muted" class="btn text-muted"
onClick={linkEvent(this, this.handleCommentCollapse)} onClick={linkEvent(this, this.handleCommentCollapse)}
> >
{this.state.collapsed ? ( {this.state.collapsed ? (
@ -220,7 +220,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
{/* This is an expanding spacer for mobile */} {/* This is an expanding spacer for mobile */}
<div className="mr-lg-4 flex-grow-1 flex-lg-grow-0 unselectable pointer mx-2"></div> <div className="mr-lg-4 flex-grow-1 flex-lg-grow-0 unselectable pointer mx-2"></div>
<button <button
className={`btn btn-sm p-0 unselectable pointer ${this.scoreColor}`} className={`btn p-0 unselectable pointer ${this.scoreColor}`}
onClick={linkEvent(node, this.handleCommentUpvote)} onClick={linkEvent(node, this.handleCommentUpvote)}
data-tippy-content={this.pointsTippy} data-tippy-content={this.pointsTippy}
> >

4
ui/src/components/communities.tsx vendored
View file

@ -157,7 +157,7 @@ export class Communities extends Component<any, CommunitiesState> {
<div class="mt-2"> <div class="mt-2">
{this.state.page > 1 && ( {this.state.page > 1 && (
<button <button
class="btn btn-sm btn-secondary mr-1" class="btn btn-secondary mr-1"
onClick={linkEvent(this, this.prevPage)} onClick={linkEvent(this, this.prevPage)}
> >
{i18n.t('prev')} {i18n.t('prev')}
@ -166,7 +166,7 @@ export class Communities extends Component<any, CommunitiesState> {
{this.state.communities.length > 0 && ( {this.state.communities.length > 0 && (
<button <button
class="btn btn-sm btn-secondary" class="btn btn-secondary"
onClick={linkEvent(this, this.nextPage)} onClick={linkEvent(this, this.nextPage)}
> >
{i18n.t('next')} {i18n.t('next')}

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

@ -271,7 +271,7 @@ export class Community extends Component<any, State> {
<div class="my-2"> <div class="my-2">
{this.state.page > 1 && ( {this.state.page > 1 && (
<button <button
class="btn btn-sm btn-secondary mr-1" class="btn btn-secondary mr-1"
onClick={linkEvent(this, this.prevPage)} onClick={linkEvent(this, this.prevPage)}
> >
{i18n.t('prev')} {i18n.t('prev')}
@ -279,7 +279,7 @@ export class Community extends Component<any, State> {
)} )}
{this.state.posts.length > 0 && ( {this.state.posts.length > 0 && (
<button <button
class="btn btn-sm btn-secondary" class="btn btn-secondary"
onClick={linkEvent(this, this.nextPage)} onClick={linkEvent(this, this.nextPage)}
> >
{i18n.t('next')} {i18n.t('next')}

4
ui/src/components/data-type-select.tsx vendored
View file

@ -35,7 +35,7 @@ export class DataTypeSelect extends Component<
return ( return (
<div class="btn-group btn-group-toggle"> <div class="btn-group btn-group-toggle">
<label <label
className={`pointer btn btn-sm btn-secondary className={`pointer btn btn-outline-secondary
${this.state.type_ == DataType.Post && 'active'} ${this.state.type_ == DataType.Post && 'active'}
`} `}
> >
@ -48,7 +48,7 @@ export class DataTypeSelect extends Component<
{i18n.t('posts')} {i18n.t('posts')}
</label> </label>
<label <label
className={`pointer btn btn-sm btn-secondary ${ className={`pointer btn btn-outline-secondary ${
this.state.type_ == DataType.Comment && 'active' this.state.type_ == DataType.Comment && 'active'
}`} }`}
> >

2
ui/src/components/iframely-card.tsx vendored
View file

@ -29,7 +29,7 @@ export class IFramelyCard extends Component<
return ( return (
<> <>
{post.embed_title && !this.state.expanded && ( {post.embed_title && !this.state.expanded && (
<div class="card mt-3 mb-2"> <div class="card bg-transparent border-secondary mt-3 mb-2">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<div class="card-body"> <div class="card-body">

16
ui/src/components/inbox.tsx vendored
View file

@ -147,7 +147,7 @@ export class Inbox extends Component<any, InboxState> {
return ( return (
<div class="btn-group btn-group-toggle"> <div class="btn-group btn-group-toggle">
<label <label
className={`btn btn-sm btn-secondary pointer className={`btn btn-outline-secondary pointer
${this.state.unreadOrAll == UnreadOrAll.Unread && 'active'} ${this.state.unreadOrAll == UnreadOrAll.Unread && 'active'}
`} `}
> >
@ -160,7 +160,7 @@ export class Inbox extends Component<any, InboxState> {
{i18n.t('unread')} {i18n.t('unread')}
</label> </label>
<label <label
className={`btn btn-sm btn-secondary pointer className={`btn btn-outline-secondary pointer
${this.state.unreadOrAll == UnreadOrAll.All && 'active'} ${this.state.unreadOrAll == UnreadOrAll.All && 'active'}
`} `}
> >
@ -180,7 +180,7 @@ export class Inbox extends Component<any, InboxState> {
return ( return (
<div class="btn-group btn-group-toggle"> <div class="btn-group btn-group-toggle">
<label <label
className={`btn btn-sm btn-secondary pointer btn-outline-light className={`btn btn-outline-secondary pointer
${this.state.messageType == MessageType.All && 'active'} ${this.state.messageType == MessageType.All && 'active'}
`} `}
> >
@ -193,7 +193,7 @@ export class Inbox extends Component<any, InboxState> {
{i18n.t('all')} {i18n.t('all')}
</label> </label>
<label <label
className={`btn btn-sm btn-secondary pointer btn-outline-light className={`btn btn-outline-secondary pointer
${this.state.messageType == MessageType.Replies && 'active'} ${this.state.messageType == MessageType.Replies && 'active'}
`} `}
> >
@ -206,7 +206,7 @@ export class Inbox extends Component<any, InboxState> {
{i18n.t('replies')} {i18n.t('replies')}
</label> </label>
<label <label
className={`btn btn-sm btn-secondary pointer btn-outline-light className={`btn btn-outline-secondary pointer
${this.state.messageType == MessageType.Mentions && 'active'} ${this.state.messageType == MessageType.Mentions && 'active'}
`} `}
> >
@ -219,7 +219,7 @@ export class Inbox extends Component<any, InboxState> {
{i18n.t('mentions')} {i18n.t('mentions')}
</label> </label>
<label <label
className={`btn btn-sm btn-secondary pointer btn-outline-light className={`btn btn-outline-secondary pointer
${this.state.messageType == MessageType.Messages && 'active'} ${this.state.messageType == MessageType.Messages && 'active'}
`} `}
> >
@ -326,7 +326,7 @@ export class Inbox extends Component<any, InboxState> {
<div class="mt-2"> <div class="mt-2">
{this.state.page > 1 && ( {this.state.page > 1 && (
<button <button
class="btn btn-sm btn-secondary mr-1" class="btn btn-secondary mr-1"
onClick={linkEvent(this, this.prevPage)} onClick={linkEvent(this, this.prevPage)}
> >
{i18n.t('prev')} {i18n.t('prev')}
@ -334,7 +334,7 @@ export class Inbox extends Component<any, InboxState> {
)} )}
{this.unreadCount() > 0 && ( {this.unreadCount() > 0 && (
<button <button
class="btn btn-sm btn-secondary" class="btn btn-secondary"
onClick={linkEvent(this, this.nextPage)} onClick={linkEvent(this, this.nextPage)}
> >
{i18n.t('next')} {i18n.t('next')}

4
ui/src/components/listing-type-select.tsx vendored
View file

@ -36,7 +36,7 @@ export class ListingTypeSelect extends Component<
return ( return (
<div class="btn-group btn-group-toggle"> <div class="btn-group btn-group-toggle">
<label <label
className={`btn btn-sm btn-secondary className={`btn btn-outline-secondary
${this.state.type_ == ListingType.Subscribed && 'active'} ${this.state.type_ == ListingType.Subscribed && 'active'}
${UserService.Instance.user == undefined ? 'disabled' : 'pointer'} ${UserService.Instance.user == undefined ? 'disabled' : 'pointer'}
`} `}
@ -51,7 +51,7 @@ export class ListingTypeSelect extends Component<
{i18n.t('subscribed')} {i18n.t('subscribed')}
</label> </label>
<label <label
className={`pointer btn btn-sm btn-secondary ${ className={`pointer btn btn-outline-secondary ${
this.state.type_ == ListingType.All && 'active' this.state.type_ == ListingType.All && 'active'
}`} }`}
> >

26
ui/src/components/main.tsx vendored
View file

@ -195,7 +195,7 @@ 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 bg-transparent border-secondary mb-3">
<div class="card-body"> <div class="card-body">
{this.trendingCommunities()} {this.trendingCommunities()}
{UserService.Instance.user && {UserService.Instance.user &&
@ -226,7 +226,7 @@ export class Main extends Component<any, MainState> {
</div> </div>
)} )}
<Link <Link
class="btn btn-sm btn-secondary btn-block" class="btn btn-secondary btn-block"
to="/create_community" to="/create_community"
> >
{i18n.t('create_a_community')} {i18n.t('create_a_community')}
@ -295,7 +295,7 @@ export class Main extends Component<any, MainState> {
siteInfo() { siteInfo() {
return ( return (
<div> <div>
<div class="card border-secondary mb-3"> <div class="card bg-transparent border-secondary mb-3">
<div class="card-body"> <div class="card-body">
<h5 class="mb-0">{`${this.state.siteRes.site.name}`}</h5> <h5 class="mb-0">{`${this.state.siteRes.site.name}`}</h5>
{this.canAdmin && ( {this.canAdmin && (
@ -315,32 +315,32 @@ export class Main extends Component<any, MainState> {
)} )}
<ul class="my-2 list-inline"> <ul class="my-2 list-inline">
{/* {/*
<li className="list-inline-item badge badge-secondary"> <li className="list-inline-item badge badge-light">
{i18n.t('number_online', { count: this.state.siteRes.online })} {i18n.t('number_online', { count: this.state.siteRes.online })}
</li> </li>
*/} */}
<li className="list-inline-item badge badge-secondary"> <li className="list-inline-item badge badge-light">
{i18n.t('number_of_users', { {i18n.t('number_of_users', {
count: this.state.siteRes.site.number_of_users, count: this.state.siteRes.site.number_of_users,
})} })}
</li> </li>
<li className="list-inline-item badge badge-secondary"> <li className="list-inline-item badge badge-light">
{i18n.t('number_of_communities', { {i18n.t('number_of_communities', {
count: this.state.siteRes.site.number_of_communities, count: this.state.siteRes.site.number_of_communities,
})} })}
</li> </li>
<li className="list-inline-item badge badge-secondary"> <li className="list-inline-item badge badge-light">
{i18n.t('number_of_posts', { {i18n.t('number_of_posts', {
count: this.state.siteRes.site.number_of_posts, count: this.state.siteRes.site.number_of_posts,
})} })}
</li> </li>
<li className="list-inline-item badge badge-secondary"> <li className="list-inline-item badge badge-light">
{i18n.t('number_of_comments', { {i18n.t('number_of_comments', {
count: this.state.siteRes.site.number_of_comments, count: this.state.siteRes.site.number_of_comments,
})} })}
</li> </li>
<li className="list-inline-item"> <li className="list-inline-item">
<Link className="badge badge-secondary" to="/modlog"> <Link className="badge badge-light" to="/modlog">
{i18n.t('modlog')} {i18n.t('modlog')}
</Link> </Link>
</li> </li>
@ -364,7 +364,7 @@ export class Main extends Component<any, MainState> {
</div> </div>
</div> </div>
{this.state.siteRes.site.description && ( {this.state.siteRes.site.description && (
<div class="card border-secondary mb-3"> <div class="card bg-transparent border-secondary mb-3">
<div class="card-body"> <div class="card-body">
<div <div
className="md-div" className="md-div"
@ -381,7 +381,7 @@ export class Main extends Component<any, MainState> {
landing() { landing() {
return ( return (
<div class="card border-secondary"> <div class="card bg-transparent border-secondary">
<div class="card-body"> <div class="card-body">
<h5> <h5>
{i18n.t('powered_by')} {i18n.t('powered_by')}
@ -517,7 +517,7 @@ export class Main extends Component<any, MainState> {
<div class="my-2"> <div class="my-2">
{this.state.page > 1 && ( {this.state.page > 1 && (
<button <button
class="btn btn-sm btn-secondary mr-1" class="btn btn-secondary mr-1"
onClick={linkEvent(this, this.prevPage)} onClick={linkEvent(this, this.prevPage)}
> >
{i18n.t('prev')} {i18n.t('prev')}
@ -525,7 +525,7 @@ export class Main extends Component<any, MainState> {
)} )}
{this.state.posts.length > 0 && ( {this.state.posts.length > 0 && (
<button <button
class="btn btn-sm btn-secondary" class="btn btn-secondary"
onClick={linkEvent(this, this.nextPage)} onClick={linkEvent(this, this.nextPage)}
> >
{i18n.t('next')} {i18n.t('next')}

2
ui/src/components/markdown-textarea.tsx vendored
View file

@ -125,7 +125,7 @@ export class MarkdownTextArea extends Component<
/> />
{this.state.previewMode && ( {this.state.previewMode && (
<div <div
className="card card-body md-div" className="card bg-transparent border-secondary card-body md-div"
dangerouslySetInnerHTML={mdToHtml(this.state.content)} dangerouslySetInnerHTML={mdToHtml(this.state.content)}
/> />
)} )}

4
ui/src/components/modlog.tsx vendored
View file

@ -384,14 +384,14 @@ export class Modlog extends Component<any, ModlogState> {
<div class="mt-2"> <div class="mt-2">
{this.state.page > 1 && ( {this.state.page > 1 && (
<button <button
class="btn btn-sm btn-secondary mr-1" class="btn btn-secondary mr-1"
onClick={linkEvent(this, this.prevPage)} onClick={linkEvent(this, this.prevPage)}
> >
{i18n.t('prev')} {i18n.t('prev')}
</button> </button>
)} )}
<button <button
class="btn btn-sm btn-secondary" class="btn btn-secondary"
onClick={linkEvent(this, this.nextPage)} onClick={linkEvent(this, this.nextPage)}
> >
{i18n.t('next')} {i18n.t('next')}

10
ui/src/components/navbar.tsx vendored
View file

@ -150,13 +150,14 @@ 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-fluid navbar navbar-expand-md navbar-light shadow p-0 px-3"> <nav class="navbar navbar-expand-lg navbar-light shadow-sm p-0 px-3">
<div class="container">
<Link title={this.state.version} class="navbar-brand" to="/"> <Link title={this.state.version} class="navbar-brand" to="/">
{this.state.siteName} {this.state.siteName}
</Link> </Link>
{this.state.isLoggedIn && ( {this.state.isLoggedIn && (
<Link <Link
class="ml-auto p-0 navbar-toggler nav-link" class="ml-auto p-0 navbar-toggler nav-link border-0"
to="/inbox" to="/inbox"
title={i18n.t('inbox')} title={i18n.t('inbox')}
> >
@ -171,7 +172,7 @@ export class Navbar extends Component<any, NavbarState> {
</Link> </Link>
)} )}
<button <button
class="navbar-toggler" class="navbar-toggler border-0"
type="button" type="button"
aria-label="menu" aria-label="menu"
onClick={linkEvent(this, this.expandNavbar)} onClick={linkEvent(this, this.expandNavbar)}
@ -314,7 +315,7 @@ export class Navbar extends Component<any, NavbarState> {
<ul class="navbar-nav my-2"> <ul class="navbar-nav my-2">
<li className="nav-item"> <li className="nav-item">
<Link <Link
class="nav-link" class="btn btn-success"
to="/login" to="/login"
title={i18n.t('login_sign_up')} title={i18n.t('login_sign_up')}
> >
@ -324,6 +325,7 @@ export class Navbar extends Component<any, NavbarState> {
</ul> </ul>
)} )}
</div> </div>
</div>
</nav> </nav>
); );
} }

26
ui/src/components/post-listing.tsx vendored
View file

@ -240,9 +240,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
title={post.url} title={post.url}
rel="noopener" rel="noopener"
> >
<svg class="icon thumbnail"> <div class="thumbnail rounded bg-light d-flex justify-content-center">
<svg class="icon d-flex align-items-center">
<use xlinkHref="#icon-external-link"></use> <use xlinkHref="#icon-external-link"></use>
</svg> </svg>
</div>
</a> </a>
); );
} }
@ -253,9 +255,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
to={`/post/${post.id}`} to={`/post/${post.id}`}
title={i18n.t('comments')} title={i18n.t('comments')}
> >
<svg class="icon thumbnail"> <div class="thumbnail rounded bg-light d-flex justify-content-center">
<svg class="icon d-flex align-items-center">
<use xlinkHref="#icon-message-square"></use> <use xlinkHref="#icon-message-square"></use>
</svg> </svg>
</div>
</Link> </Link>
); );
} }
@ -298,7 +302,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
)} )}
</div> </div>
{!this.state.imageExpanded && ( {!this.state.imageExpanded && (
<div class="col-3 col-sm-2 pr-0 mt-1"> <div class="col-3 col-sm-2 pr-0">
<div class="position-relative">{this.thumbnail()}</div> <div class="position-relative">{this.thumbnail()}</div>
</div> </div>
)} )}
@ -562,7 +566,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<> <>
<li className="list-inline-item"> <li className="list-inline-item">
<button <button
class="btn btn-sm btn-link btn-animate text-muted" class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleSavePostClick)} onClick={linkEvent(this, this.handleSavePostClick)}
data-tippy-content={ data-tippy-content={
post.saved ? i18n.t('unsave') : i18n.t('save') post.saved ? i18n.t('unsave') : i18n.t('save')
@ -579,7 +583,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</li> </li>
<li className="list-inline-item"> <li className="list-inline-item">
<Link <Link
class="btn btn-sm btn-link btn-animate text-muted" class="btn btn-link btn-animate text-muted"
to={`/create_post${this.crossPostParams}`} to={`/create_post${this.crossPostParams}`}
title={i18n.t('cross_post')} title={i18n.t('cross_post')}
> >
@ -594,7 +598,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<> <>
<li className="list-inline-item"> <li className="list-inline-item">
<button <button
class="btn btn-sm btn-link btn-animate text-muted" class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleEditClick)} onClick={linkEvent(this, this.handleEditClick)}
data-tippy-content={i18n.t('edit')} data-tippy-content={i18n.t('edit')}
> >
@ -605,7 +609,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</li> </li>
<li className="list-inline-item"> <li className="list-inline-item">
<button <button
class="btn btn-sm btn-link btn-animate text-muted" class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleDeleteClick)} onClick={linkEvent(this, this.handleDeleteClick)}
data-tippy-content={ data-tippy-content={
!post.deleted !post.deleted
@ -628,7 +632,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
{!this.state.showAdvanced && this.props.showBody ? ( {!this.state.showAdvanced && this.props.showBody ? (
<li className="list-inline-item"> <li className="list-inline-item">
<button <button
class="btn btn-sm btn-link btn-animate text-muted" class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleShowAdvanced)} onClick={linkEvent(this, this.handleShowAdvanced)}
data-tippy-content={i18n.t('more')} data-tippy-content={i18n.t('more')}
> >
@ -642,7 +646,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
{this.props.showBody && post.body && ( {this.props.showBody && post.body && (
<li className="list-inline-item"> <li className="list-inline-item">
<button <button
class="btn btn-sm btn-link btn-animate text-muted" class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleViewSource)} onClick={linkEvent(this, this.handleViewSource)}
data-tippy-content={i18n.t('view_source')} data-tippy-content={i18n.t('view_source')}
> >
@ -660,7 +664,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<> <>
<li className="list-inline-item"> <li className="list-inline-item">
<button <button
class="btn btn-sm btn-link btn-animate text-muted" class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleModLock)} onClick={linkEvent(this, this.handleModLock)}
data-tippy-content={ data-tippy-content={
post.locked post.locked
@ -679,7 +683,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
</li> </li>
<li className="list-inline-item"> <li className="list-inline-item">
<button <button
class="btn btn-sm btn-link btn-animate text-muted" class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleModSticky)} onClick={linkEvent(this, this.handleModSticky)}
data-tippy-content={ data-tippy-content={
post.stickied post.stickied

2
ui/src/components/post-listings.tsx vendored
View file

@ -32,7 +32,7 @@ export class PostListings extends Component<PostListingsProps, any> {
enableDownvotes={this.props.enableDownvotes} enableDownvotes={this.props.enableDownvotes}
enableNsfw={this.props.enableNsfw} enableNsfw={this.props.enableNsfw}
/> />
<hr class="my-2" /> <hr class="my-3" />
</> </>
)) ))
) : ( ) : (

10
ui/src/components/post.tsx vendored
View file

@ -225,7 +225,7 @@ export class Post extends Component<any, PostState> {
<> <>
<div class="btn-group btn-group-toggle mr-3 mb-2"> <div class="btn-group btn-group-toggle mr-3 mb-2">
<label <label
className={`btn btn-sm btn-secondary pointer ${ className={`btn btn-outline-secondary pointer ${
this.state.commentSort === CommentSortType.Hot && 'active' this.state.commentSort === CommentSortType.Hot && 'active'
}`} }`}
> >
@ -238,7 +238,7 @@ export class Post extends Component<any, PostState> {
/> />
</label> </label>
<label <label
className={`btn btn-sm btn-secondary pointer ${ className={`btn btn-outline-secondary pointer ${
this.state.commentSort === CommentSortType.Top && 'active' this.state.commentSort === CommentSortType.Top && 'active'
}`} }`}
> >
@ -251,7 +251,7 @@ export class Post extends Component<any, PostState> {
/> />
</label> </label>
<label <label
className={`btn btn-sm btn-secondary pointer ${ className={`btn btn-outline-secondary pointer ${
this.state.commentSort === CommentSortType.New && 'active' this.state.commentSort === CommentSortType.New && 'active'
}`} }`}
> >
@ -264,7 +264,7 @@ export class Post extends Component<any, PostState> {
/> />
</label> </label>
<label <label
className={`btn btn-sm btn-secondary pointer ${ className={`btn btn-outline-secondary pointer ${
this.state.commentSort === CommentSortType.Old && 'active' this.state.commentSort === CommentSortType.Old && 'active'
}`} }`}
> >
@ -279,7 +279,7 @@ export class Post extends Component<any, PostState> {
</div> </div>
<div class="btn-group btn-group-toggle mb-2"> <div class="btn-group btn-group-toggle mb-2">
<label <label
className={`btn btn-sm btn-secondary pointer ${ className={`btn btn-outline-secondary pointer ${
this.state.commentViewType === CommentViewType.Chat && 'active' this.state.commentViewType === CommentViewType.Chat && 'active'
}`} }`}
> >

10
ui/src/components/private-message.tsx vendored
View file

@ -131,7 +131,7 @@ export class PrivateMessage extends Component<
<> <>
<li className="list-inline-item"> <li className="list-inline-item">
<button <button
class="btn btn-link btn-sm btn-animate text-muted" class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleMarkRead)} onClick={linkEvent(this, this.handleMarkRead)}
data-tippy-content={ data-tippy-content={
message.read message.read
@ -150,7 +150,7 @@ export class PrivateMessage extends Component<
</li> </li>
<li className="list-inline-item"> <li className="list-inline-item">
<button <button
class="btn btn-link btn-sm btn-animate text-muted" class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleReplyClick)} onClick={linkEvent(this, this.handleReplyClick)}
data-tippy-content={i18n.t('reply')} data-tippy-content={i18n.t('reply')}
> >
@ -165,7 +165,7 @@ export class PrivateMessage extends Component<
<> <>
<li className="list-inline-item"> <li className="list-inline-item">
<button <button
class="btn btn-link btn-sm btn-animate text-muted" class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleEditClick)} onClick={linkEvent(this, this.handleEditClick)}
data-tippy-content={i18n.t('edit')} data-tippy-content={i18n.t('edit')}
> >
@ -176,7 +176,7 @@ export class PrivateMessage extends Component<
</li> </li>
<li className="list-inline-item"> <li className="list-inline-item">
<button <button
class="btn btn-link btn-sm btn-animate text-muted" class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleDeleteClick)} onClick={linkEvent(this, this.handleDeleteClick)}
data-tippy-content={ data-tippy-content={
!message.deleted !message.deleted
@ -197,7 +197,7 @@ export class PrivateMessage extends Component<
)} )}
<li className="list-inline-item"> <li className="list-inline-item">
<button <button
class="btn btn-link btn-sm btn-animate text-muted" class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleViewSource)} onClick={linkEvent(this, this.handleViewSource)}
data-tippy-content={i18n.t('view_source')} data-tippy-content={i18n.t('view_source')}
> >

6
ui/src/components/search.tsx vendored
View file

@ -207,7 +207,7 @@ export class Search extends Component<any, SearchState> {
<select <select
value={this.state.type_} value={this.state.type_}
onChange={linkEvent(this, this.handleTypeChange)} onChange={linkEvent(this, this.handleTypeChange)}
class="custom-select custom-select-sm w-auto" class="custom-select w-auto"
> >
<option disabled>{i18n.t('type')}</option> <option disabled>{i18n.t('type')}</option>
<option value={SearchType.All}>{i18n.t('all')}</option> <option value={SearchType.All}>{i18n.t('all')}</option>
@ -402,7 +402,7 @@ export class Search extends Component<any, SearchState> {
<div class="mt-2"> <div class="mt-2">
{this.state.page > 1 && ( {this.state.page > 1 && (
<button <button
class="btn btn-sm btn-secondary mr-1" class="btn btn-secondary mr-1"
onClick={linkEvent(this, this.prevPage)} onClick={linkEvent(this, this.prevPage)}
> >
{i18n.t('prev')} {i18n.t('prev')}
@ -411,7 +411,7 @@ export class Search extends Component<any, SearchState> {
{this.resultsCount() > 0 && ( {this.resultsCount() > 0 && (
<button <button
class="btn btn-sm btn-secondary" class="btn btn-secondary"
onClick={linkEvent(this, this.nextPage)} onClick={linkEvent(this, this.nextPage)}
> >
{i18n.t('next')} {i18n.t('next')}

22
ui/src/components/sidebar.tsx vendored
View file

@ -75,7 +75,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
} }
return ( return (
<div> <div>
<div class="card border-secondary mb-3"> <div class="card bg-transparent border-secondary mb-3">
<div class="card-body"> <div class="card-body">
<h5 className="mb-0"> <h5 className="mb-0">
<span>{community.title}</span> <span>{community.title}</span>
@ -177,33 +177,33 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
)} )}
<ul class="my-1 list-inline"> <ul class="my-1 list-inline">
{/* {/*
<li className="list-inline-item badge badge-secondary"> <li className="list-inline-item badge badge-light">
{i18n.t('number_online', { count: this.props.online })} {i18n.t('number_online', { count: this.props.online })}
</li> </li>
*/} */}
<li className="list-inline-item badge badge-secondary"> <li className="list-inline-item badge badge-light">
{i18n.t('number_of_subscribers', { {i18n.t('number_of_subscribers', {
count: community.number_of_subscribers, count: community.number_of_subscribers,
})} })}
</li> </li>
<li className="list-inline-item badge badge-secondary"> <li className="list-inline-item badge badge-light">
{i18n.t('number_of_posts', { {i18n.t('number_of_posts', {
count: community.number_of_posts, count: community.number_of_posts,
})} })}
</li> </li>
<li className="list-inline-item badge badge-secondary"> <li className="list-inline-item badge badge-light">
{i18n.t('number_of_comments', { {i18n.t('number_of_comments', {
count: community.number_of_comments, count: community.number_of_comments,
})} })}
</li> </li>
<li className="list-inline-item"> <li className="list-inline-item">
<Link className="badge badge-secondary" to="/communities"> <Link className="badge badge-light" to="/communities">
{community.category_name} {community.category_name}
</Link> </Link>
</li> </li>
<li className="list-inline-item"> <li className="list-inline-item">
<Link <Link
className="badge badge-secondary" className="badge badge-light"
to={`/modlog/community/${this.props.community.id}`} to={`/modlog/community/${this.props.community.id}`}
> >
{i18n.t('modlog')} {i18n.t('modlog')}
@ -228,7 +228,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
</ul> </ul>
{/* TODO the to= needs to be able to handle community_ids as well, since they're federated */} {/* TODO the to= needs to be able to handle community_ids as well, since they're federated */}
<Link <Link
class={`btn btn-sm btn-secondary btn-block mb-3 ${ class={`btn btn-secondary btn-block mb-3 ${
(community.deleted || community.removed) && 'no-click' (community.deleted || community.removed) && 'no-click'
}`} }`}
to={`/create_post?community=${community.name}`} to={`/create_post?community=${community.name}`}
@ -238,14 +238,14 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
<div> <div>
{community.subscribed ? ( {community.subscribed ? (
<button <button
class="btn btn-sm btn-secondary btn-block" class="btn btn-secondary btn-block"
onClick={linkEvent(community.id, this.handleUnsubscribe)} onClick={linkEvent(community.id, this.handleUnsubscribe)}
> >
{i18n.t('unsubscribe')} {i18n.t('unsubscribe')}
</button> </button>
) : ( ) : (
<button <button
class="btn btn-sm btn-secondary btn-block" class="btn btn-secondary btn-block"
onClick={linkEvent(community.id, this.handleSubscribe)} onClick={linkEvent(community.id, this.handleSubscribe)}
> >
{i18n.t('subscribe')} {i18n.t('subscribe')}
@ -255,7 +255,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
</div> </div>
</div> </div>
{community.description && ( {community.description && (
<div class="card border-secondary"> <div class="card bg-transparent border-secondary">
<div class="card-body"> <div class="card-body">
<div <div
className="md-div" className="md-div"

2
ui/src/components/sort-select.tsx vendored
View file

@ -35,7 +35,7 @@ export class SortSelect extends Component<SortSelectProps, SortSelectState> {
<select <select
value={this.state.sort} value={this.state.sort}
onChange={linkEvent(this, this.handleSortChange)} onChange={linkEvent(this, this.handleSortChange)}
class="custom-select custom-select-sm w-auto mr-2" class="custom-select w-auto mr-2"
> >
<option disabled>{i18n.t('sort_type')}</option> <option disabled>{i18n.t('sort_type')}</option>
{!this.props.hideHot && ( {!this.props.hideHot && (

4
ui/src/components/user-details.tsx vendored
View file

@ -205,7 +205,7 @@ export class UserDetails extends Component<UserDetailsProps, UserDetailsState> {
<div class="my-2"> <div class="my-2">
{this.props.page > 1 && ( {this.props.page > 1 && (
<button <button
class="btn btn-sm btn-secondary mr-1" class="btn btn-secondary mr-1"
onClick={linkEvent(this, this.prevPage)} onClick={linkEvent(this, this.prevPage)}
> >
{i18n.t('prev')} {i18n.t('prev')}
@ -213,7 +213,7 @@ export class UserDetails extends Component<UserDetailsProps, UserDetailsState> {
)} )}
{this.state.comments.length + this.state.posts.length > 0 && ( {this.state.comments.length + this.state.posts.length > 0 && (
<button <button
class="btn btn-sm btn-secondary" class="btn btn-secondary"
onClick={linkEvent(this, this.nextPage)} onClick={linkEvent(this, this.nextPage)}
> >
{i18n.t('next')} {i18n.t('next')}

5
ui/src/components/user-listing.tsx vendored
View file

@ -43,11 +43,10 @@ export class UserListing extends Component<UserListingProps, any> {
return ( return (
<> <>
<Link className="text-body font-weight-bold" to={link}> <Link className="text-info" to={link}>
{user.avatar && showAvatars() && ( {user.avatar && showAvatars() && (
<img <img
height="32" style="width: 2rem; height: 2rem;"
width="32"
src={pictrsAvatarThumbnail(user.avatar)} src={pictrsAvatarThumbnail(user.avatar)}
class="rounded-circle mr-2" class="rounded-circle mr-2"
/> />

23
ui/src/components/user.tsx vendored
View file

@ -132,6 +132,7 @@ export class User extends Component<any, UserState> {
open_registration: undefined, open_registration: undefined,
enable_nsfw: undefined, enable_nsfw: undefined,
}, },
version: undefined,
}, },
}; };
@ -266,7 +267,7 @@ export class User extends Component<any, UserState> {
return ( return (
<div class="btn-group btn-group-toggle"> <div class="btn-group btn-group-toggle">
<label <label
className={`btn btn-sm btn-secondary pointer btn-outline-light className={`btn btn-outline-secondary pointer
${this.state.view == UserDetailsView.Overview && 'active'} ${this.state.view == UserDetailsView.Overview && 'active'}
`} `}
> >
@ -279,7 +280,7 @@ export class User extends Component<any, UserState> {
{i18n.t('overview')} {i18n.t('overview')}
</label> </label>
<label <label
className={`btn btn-sm btn-secondary pointer btn-outline-light className={`btn btn-outline-secondary pointer
${this.state.view == UserDetailsView.Comments && 'active'} ${this.state.view == UserDetailsView.Comments && 'active'}
`} `}
> >
@ -292,7 +293,7 @@ export class User extends Component<any, UserState> {
{i18n.t('comments')} {i18n.t('comments')}
</label> </label>
<label <label
className={`btn btn-sm btn-secondary pointer btn-outline-light className={`btn btn-outline-secondary pointer
${this.state.view == UserDetailsView.Posts && 'active'} ${this.state.view == UserDetailsView.Posts && 'active'}
`} `}
> >
@ -305,7 +306,7 @@ export class User extends Component<any, UserState> {
{i18n.t('posts')} {i18n.t('posts')}
</label> </label>
<label <label
className={`btn btn-sm btn-secondary pointer btn-outline-light className={`btn btn-outline-secondary pointer
${this.state.view == UserDetailsView.Saved && 'active'} ${this.state.view == UserDetailsView.Saved && 'active'}
`} `}
> >
@ -350,7 +351,7 @@ 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 bg-transparent border-secondary mb-3">
<div class="card-body"> <div class="card-body">
<h5> <h5>
<ul class="list-inline mb-0"> <ul class="list-inline mb-0">
@ -447,7 +448,7 @@ export class User extends Component<any, UserState> {
userSettings() { userSettings() {
return ( return (
<div> <div>
<div class="card border-secondary mb-3"> <div class="card bg-transparent border-secondary mb-3">
<div class="card-body"> <div class="card-body">
<h5>{i18n.t('settings')}</h5> <h5>{i18n.t('settings')}</h5>
<form onSubmit={linkEvent(this, this.handleUserSettingsSubmit)}> <form onSubmit={linkEvent(this, this.handleUserSettingsSubmit)}>
@ -459,7 +460,7 @@ export class User extends Component<any, UserState> {
class="pointer ml-4 text-muted small font-weight-bold" class="pointer ml-4 text-muted small font-weight-bold"
> >
{!this.checkSettingsAvatar ? ( {!this.checkSettingsAvatar ? (
<span class="btn btn-sm btn-secondary"> <span class="btn btn-secondary">
{i18n.t('upload_avatar')} {i18n.t('upload_avatar')}
</span> </span>
) : ( ) : (
@ -499,7 +500,7 @@ export class User extends Component<any, UserState> {
<select <select
value={this.state.userSettingsForm.lang} value={this.state.userSettingsForm.lang}
onChange={linkEvent(this, this.handleUserSettingsLangChange)} onChange={linkEvent(this, this.handleUserSettingsLangChange)}
class="ml-2 custom-select custom-select-sm w-auto" class="ml-2 custom-select w-auto"
> >
<option disabled>{i18n.t('language')}</option> <option disabled>{i18n.t('language')}</option>
<option value="browser">{i18n.t('browser_default')}</option> <option value="browser">{i18n.t('browser_default')}</option>
@ -514,7 +515,7 @@ export class User extends Component<any, UserState> {
<select <select
value={this.state.userSettingsForm.theme} value={this.state.userSettingsForm.theme}
onChange={linkEvent(this, this.handleUserSettingsThemeChange)} onChange={linkEvent(this, this.handleUserSettingsThemeChange)}
class="ml-2 custom-select custom-select-sm w-auto" class="ml-2 custom-select w-auto"
> >
<option disabled>{i18n.t('theme')}</option> <option disabled>{i18n.t('theme')}</option>
{themes.map(theme => ( {themes.map(theme => (
@ -775,7 +776,7 @@ export class User extends Component<any, UserState> {
return ( return (
<div> <div>
{this.state.moderates.length > 0 && ( {this.state.moderates.length > 0 && (
<div class="card border-secondary mb-3"> <div class="card bg-transparent border-secondary mb-3">
<div class="card-body"> <div class="card-body">
<h5>{i18n.t('moderates')}</h5> <h5>{i18n.t('moderates')}</h5>
<ul class="list-unstyled mb-0"> <ul class="list-unstyled mb-0">
@ -798,7 +799,7 @@ export class User extends Component<any, UserState> {
return ( return (
<div> <div>
{this.state.follows.length > 0 && ( {this.state.follows.length > 0 && (
<div class="card border-secondary mb-3"> <div class="card bg-transparent border-secondary mb-3">
<div class="card-body"> <div class="card-body">
<h5>{i18n.t('subscribed')}</h5> <h5>{i18n.t('subscribed')}</h5>
<ul class="list-unstyled mb-0"> <ul class="list-unstyled mb-0">