client - forum page now responsive - other adjustments as well

client/app/components/login-button/login-button.tsx

@@ -35,7 +35,7 @@ export class LoginButton extends React.Component<Props, State> {
             <div><b>{this.props.userStore!.user!.character_name}</b></div>
           </div>
         </div>
-        <div className="show-tiny" style={{ padding: '10px' }}><a onClick={this.login.bind(this)}>Account</a></div>
+        <div className="hide-large" style={{ padding: '10px' }}><a onClick={() => this.props.onNavigate('/user-account')}>Account</a></div>
       </div>
     );
   }

client/app/components/portrait/portrait.scss

@@ -6,4 +6,9 @@
     top: 8px;
     left: 8px;
   }
+
+  &__tiny {
+    width: 40px;
+    height: auto;
+  }
 }

client/app/components/portrait/portrait.tsx

@@ -16,14 +16,20 @@ export class Portrait extends React.Component<Props, State> {
   render() {
     return (
       <div className="portrait" style={this.props.style}>
-        <img src={require('../../assets/portrait-top.gif')}/>
-        <div>
-          <img src={require('../../assets/level-circle.gif')} className="portrait__level-circle"/>
-          <img src={require('../../assets/portrait-left.gif')}/>
-          <img src={this.props.imageSrc}/>
-          <img src={require('../../assets/portrait-right.gif')}/>
+
+        <div className="hide-tiny">
+          <img src={require('../../assets/portrait-top.gif')}/>
+          <div>
+            <img src={require('../../assets/level-circle.gif')} className="portrait__level-circle"/>
+            <img src={require('../../assets/portrait-left.gif')}/>
+            <img src={this.props.imageSrc}/>
+            <img src={require('../../assets/portrait-right.gif')}/>
+          </div>
+          <img src={require('../../assets/portrait-bot.gif')}/>
         </div>
-        <img src={require('../../assets/portrait-bot.gif')}/>
+
+        <img className="hide-large portrait__tiny" src={this.props.imageSrc}/>
+
       </div>
     );
   }

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;
+}

client/app/pages/forum/forum.tsx

@@ -212,10 +212,10 @@ export class Forum extends React.Component<Props, State> {
             <b className={authorBluePost}>{user.character_name || user.battletag}</b>
           </td>
           <td className="forum-cell forum-cell--body forum-cell--center">
-            <b>{reply_count}</b>
+            <b>{reply_count.toLocaleString()}</b>
           </td>
           <td className="forum-cell forum-cell--body forum-cell--center hide-tiny">
-            <b>{view_count}</b>
+            <b>{view_count.toLocaleString()}</b>
           </td>
           <td className="forum-cell forum-cell--body hide-tiny">
             <div style={{ fontSize: '8pt' }}>
@@ -287,33 +287,44 @@ export class Forum extends React.Component<Props, State> {
   }
 
   renderTable() {
+    const table = (
+      <table className="forum-table">
+        <tbody>
+
+          {/* header */}
+          {this.renderHeaderFooter()}
+
+          <tr className="forum-table__header">
+            <td className={`forum-cell forum-cell--header forum-cell--center`} style={{ maxWidth: '50px' }}>
+              <img src={require('../../assets/flag.gif')}/>
+            </td>
+            {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)}
+          </tr>
+
+          {/* body */}
+          {this.renderThreadRows()}
+
+          {/* footer  */}
+          {this.renderHeaderFooter()}
+
+        </tbody>
+      </table>
+    );
+
+    const noThreadsMessage = (
+      <div className="no-threads-message">
+        <h2>There doesn't seem to be any topics
+          here. <a style={{ fontSize: 'initial' }} onClick={() => this.onNewTopic()}>Make the first one!</a>
+        </h2>
+      </div>
+    );
     return (
       <div style={{ padding: '0 3px' }}>
-        <table className="forum-table">
-          <tbody>
-
-            {/* header */}
-            {this.renderHeaderFooter()}
-
-            <tr className="forum-table__header">
-              <td className={`forum-cell forum-cell--header forum-cell--center`} style={{ maxWidth: '50px' }}>
-                <img src={require('../../assets/flag.gif')}/>
-              </td>
-              {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)}
-            </tr>
-
-            {/* body */}
-            {this.renderThreadRows()}
-
-            {/* footer  */}
-            {this.renderHeaderFooter()}
-
-          </tbody>
-        </table>
+        {this.state.threads.length > 0 ? table : noThreadsMessage}
         <div className="forumliner-bot-bg"/>
       </div>
     );

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;
 }

client/app/pages/thread/thread.tsx

@@ -149,7 +149,7 @@ export class Thread extends React.Component<Props, State> {
   renderUserInfo(reply: ReplyModel) {
     const { battletag, character_avatar, character_class, character_guild, character_name, character_realm, permissions } = reply.user;
     return (
-      <div className="reply__user-container">
+      <div className="reply__user-container hide-tiny">
         <Portrait imageSrc={CharacterService.getAvatar(character_avatar)}/>
         <div style={{ textAlign: 'center' }}>
           <div className="character-name">{character_name || battletag}</div>
@@ -162,6 +162,18 @@ export class Thread extends React.Component<Props, State> {
     );
   }
 
+  renderUserInfoTiny(reply: ReplyModel) {
+    const { battletag, character_class, character_guild, character_name, character_realm, permissions } = reply.user;
+
+    return (
+      <div className="reply__header hide-large">
+        <div className="character-name" style={{ paddingRight: '4px' }}>{character_name || battletag } -</div>
+        {permissions === 'admin' && <div className="blue">Admin Poster</div>}
+        {[character_class, character_guild, character_realm].filter(val => !!val).join(' - ')}
+      </div>
+    );
+  }
+
   renderEditbutton(reply: ReplyModel): any {
     if (get(this.props, 'userStore.user.id') === reply.user_id) {
       return <a style={{ paddingRight: '10px' }} onClick={() => this.onEditClick(reply)}>Edit</a>;
@@ -189,7 +201,9 @@ export class Thread extends React.Component<Props, State> {
             {this.renderUserInfo(reply)}
             <div className="flex-1">
 
-              <div className="reply__title">
+              {this.renderUserInfoTiny(reply)}
+
+              <div className="reply__title reply__header">
                 <div>
                   <b>{`${reply.index! + 1}. `}{index > 0 && 'Re: '}{this.state.thread!.title}</b>
                   <small style={{ paddingLeft: '5px' }}>| {this.getTimeFormat(reply.inserted_at)}</small>
@@ -252,8 +266,7 @@ export class Thread extends React.Component<Props, State> {
           <div className="threadTopic-container">
             <div className="threadTopic">
               {thread.sticky && <img src={require('../../assets/sticky.gif')} style={{ marginRight: '5px' }}/>}
-              <b>Topic: </b>
-              <small style={{ paddingLeft: '15px', color: 'white' }}>| {this.getTimeFormat(thread!.inserted_at)}</small>
+              <small style={{ color: 'white' }}>{this.getTimeFormat(thread!.inserted_at)}</small>
             </div>
           </div>
           <img src={require('../../assets/forum-index.gif')}

client/app/pages/user-account/user-account.scss

@@ -1,9 +1,19 @@
+@import '../../scss/mixins';
+
 .avatar-list {
   display: flex;
   flex-wrap: wrap;
   padding: 20px;
   padding-left: 10px;
 
+  &__image {
+
+    @include breakpoint(mediumOrLess) {
+      width: 40px;
+      height: auto;
+    }
+  }
+
   &__item {
     margin-left: 10px;
     margin-bottom: 10px;

client/app/pages/user-account/user-account.tsx

@@ -160,7 +160,7 @@ export class UserAccount extends React.Component<Props, State> {
             const avatarClass = this.state.selectedAvatarIndex === index ? 'avatar-list__item--selected' : '';
             return (
               <div key={index} className={`avatar-list__item ${avatarClass}`} onClick={() => this.onAvatarSelect(index)}>
-                <img src={val.imageSrc}/>
+                <img className="avatar-list__image" src={val.imageSrc}/>
               </div>
             );
           })}

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 ; }
+  }
 }

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;
   }
 }