From a240b326cabf803cae8b1d80fbc8459c285d6ebc Mon Sep 17 00:00:00 2001 From: Mitchell Date: Sat, 27 Jan 2018 18:25:12 -0600 Subject: [PATCH] client - forum page now responsive - other adjustments as well --- .../components/login-button/login-button.tsx | 2 +- client/app/components/portrait/portrait.scss | 5 ++ client/app/components/portrait/portrait.tsx | 20 ++++-- client/app/pages/forum/forum.scss | 14 +++- client/app/pages/forum/forum.tsx | 65 +++++++++++-------- client/app/pages/thread/thread.scss | 31 +++++++-- client/app/pages/thread/thread.tsx | 21 ++++-- .../app/pages/user-account/user-account.scss | 10 +++ .../app/pages/user-account/user-account.tsx | 2 +- client/app/scss/_mixins.scss | 5 ++ client/app/scss/style.scss | 7 +- 11 files changed, 130 insertions(+), 52 deletions(-) diff --git a/client/app/components/login-button/login-button.tsx b/client/app/components/login-button/login-button.tsx index f27dc66..8b70eae 100644 --- a/client/app/components/login-button/login-button.tsx +++ b/client/app/components/login-button/login-button.tsx @@ -35,7 +35,7 @@ export class LoginButton extends React.Component {
{this.props.userStore!.user!.character_name}
-
Account
+
this.props.onNavigate('/user-account')}>Account
); } diff --git a/client/app/components/portrait/portrait.scss b/client/app/components/portrait/portrait.scss index cdc1c37..8307d1f 100644 --- a/client/app/components/portrait/portrait.scss +++ b/client/app/components/portrait/portrait.scss @@ -6,4 +6,9 @@ top: 8px; left: 8px; } + + &__tiny { + width: 40px; + height: auto; + } } diff --git a/client/app/components/portrait/portrait.tsx b/client/app/components/portrait/portrait.tsx index ac3a27e..41ff82f 100644 --- a/client/app/components/portrait/portrait.tsx +++ b/client/app/components/portrait/portrait.tsx @@ -16,14 +16,20 @@ export class Portrait extends React.Component { render() { return (
- -
- - - - + +
+ +
+ + + + +
+
- + + +
); } diff --git a/client/app/pages/forum/forum.scss b/client/app/pages/forum/forum.scss index a8dc410..57c4e5c 100644 --- a/client/app/pages/forum/forum.scss +++ b/client/app/pages/forum/forum.scss @@ -100,11 +100,12 @@ $grey2: #161616; &__mod-controls { display: none; position: absolute; - top: -10px; - right: 5px; + top: -20px; + right: -100px; background: #161616; padding: 5px; border: 1px solid $grey1; + z-index: 1; a + a { padding-left: 10px; @@ -125,3 +126,12 @@ $grey2: #161616; color: #B1B1B1; } } + +.no-threads-message { + display: flex; + align-items: center; + justify-content: center; + background: rgba(0, 0, 0, 0.5); + text-align: center; + padding: 30px; +} diff --git a/client/app/pages/forum/forum.tsx b/client/app/pages/forum/forum.tsx index 8f2e319..bab5a68 100644 --- a/client/app/pages/forum/forum.tsx +++ b/client/app/pages/forum/forum.tsx @@ -212,10 +212,10 @@ export class Forum extends React.Component { {user.character_name || user.battletag} - {reply_count} + {reply_count.toLocaleString()} - {view_count} + {view_count.toLocaleString()}
@@ -287,33 +287,44 @@ export class Forum extends React.Component { } renderTable() { + const table = ( + + + + {/* header */} + {this.renderHeaderFooter()} + + + + {this.renderHeaderCell(ColumnHeader.subject, false)} + {this.renderHeaderCell(ColumnHeader.author, true)} + {this.renderHeaderCell(ColumnHeader.replies, true)} + {this.renderHeaderCell(ColumnHeader.views, true, true)} + {this.renderHeaderCell(ColumnHeader.lastPost, true, true)} + + + {/* body */} + {this.renderThreadRows()} + + {/* footer */} + {this.renderHeaderFooter()} + + +
+ +
+ ); + + const noThreadsMessage = ( +
+

There doesn't seem to be any topics + here. this.onNewTopic()}>Make the first one! +

+
+ ); return (
- - - - {/* header */} - {this.renderHeaderFooter()} - - - - {this.renderHeaderCell(ColumnHeader.subject, false)} - {this.renderHeaderCell(ColumnHeader.author, true)} - {this.renderHeaderCell(ColumnHeader.replies, true)} - {this.renderHeaderCell(ColumnHeader.views, true, true)} - {this.renderHeaderCell(ColumnHeader.lastPost, true, true)} - - - {/* body */} - {this.renderThreadRows()} - - {/* footer */} - {this.renderHeaderFooter()} - - -
- -
+ {this.state.threads.length > 0 ? table : noThreadsMessage}
); diff --git a/client/app/pages/thread/thread.scss b/client/app/pages/thread/thread.scss index 808feec..e12e626 100644 --- a/client/app/pages/thread/thread.scss +++ b/client/app/pages/thread/thread.scss @@ -1,3 +1,5 @@ +@import '../../scss/mixins'; + .topic-bg { background-image: url('../../assets/topic-bg.gif'); background-repeat: repeat-x; @@ -63,16 +65,27 @@ padding: 4px; width: 150px; border-right: 1px solid #000000; + + @include breakpoint(mediumOrLess) { + width: 100px; + } + } + + &__header { + display: flex; + align-items: center; + min-height: 26px; + border-bottom: 1px solid #000000; + padding: 3px 6px; + + @include breakpoint(mediumOrLess) { + font-size: 10px; + } } &__title { - display: flex; - align-items: center; - justify-content: space-between; - height: 26px; - border-bottom: 1px solid #000000; - padding: 0 6px; color: white; + justify-content: space-between; &__button { cursor: pointer; @@ -80,6 +93,11 @@ & + & { margin-left: 3px; } + + @include breakpoint(mediumOrLess) { + width: 50px; + height: auto; + } } } @@ -98,4 +116,5 @@ .character-name { color: #FFAC04; font-weight: bold; + white-space: nowrap; } diff --git a/client/app/pages/thread/thread.tsx b/client/app/pages/thread/thread.tsx index f6d6ff7..30fb4c7 100644 --- a/client/app/pages/thread/thread.tsx +++ b/client/app/pages/thread/thread.tsx @@ -149,7 +149,7 @@ export class Thread extends React.Component { renderUserInfo(reply: ReplyModel) { const { battletag, character_avatar, character_class, character_guild, character_name, character_realm, permissions } = reply.user; return ( -
+
{character_name || battletag}
@@ -162,6 +162,18 @@ export class Thread extends React.Component { ); } + renderUserInfoTiny(reply: ReplyModel) { + const { battletag, character_class, character_guild, character_name, character_realm, permissions } = reply.user; + + return ( +
+
{character_name || battletag } -
+ {permissions === 'admin' &&
Admin Poster
} + {[character_class, character_guild, character_realm].filter(val => !!val).join(' - ')} +
+ ); + } + renderEditbutton(reply: ReplyModel): any { if (get(this.props, 'userStore.user.id') === reply.user_id) { return this.onEditClick(reply)}>Edit; @@ -189,7 +201,9 @@ export class Thread extends React.Component { {this.renderUserInfo(reply)}
-
+ {this.renderUserInfoTiny(reply)} + +
{`${reply.index! + 1}. `}{index > 0 && 'Re: '}{this.state.thread!.title} | {this.getTimeFormat(reply.inserted_at)} @@ -252,8 +266,7 @@ export class Thread extends React.Component {
{thread.sticky && } - Topic: - | {this.getTimeFormat(thread!.inserted_at)} + {this.getTimeFormat(thread!.inserted_at)}
{ const avatarClass = this.state.selectedAvatarIndex === index ? 'avatar-list__item--selected' : ''; return (
this.onAvatarSelect(index)}> - +
); })} diff --git a/client/app/scss/_mixins.scss b/client/app/scss/_mixins.scss index f7e2814..4bac0f8 100644 --- a/client/app/scss/_mixins.scss +++ b/client/app/scss/_mixins.scss @@ -2,7 +2,12 @@ @if $point == smallOrLess { @media (max-width: 420px) { @content ; } } + @else if $point == mediumOrLess { @media (max-width: 540px) { @content ; } } + + @else if $point == mediumOrMore { + @media (min-width: 541px) { @content ; } + } } diff --git a/client/app/scss/style.scss b/client/app/scss/style.scss index 3a94548..3c12cf3 100644 --- a/client/app/scss/style.scss +++ b/client/app/scss/style.scss @@ -187,10 +187,9 @@ div { } } -.show-tiny { - display: none; +.hide-large { - @include breakpoint(mediumOrLess) { - display: block; + @include breakpoint(mediumOrMore) { + display: none; } }