client - forum page now responsive - tested on iOS

client/app/components/footer/footer.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-
+// import bottom_blizzlogo from '../../assets/bottom-blizzlogo.gif';
-import bottom_blizzlogo from '../../assets/bottom-blizzlogo.gif';
 
 import './footer.scss';
 
@@ -13,7 +12,8 @@ export class Footer extends React.Component<Props, State> {
   render() {
     return (
       <div className="bottom-bg">
-        <img src={bottom_blizzlogo}/>
+        {/*  don't show the blizzard logo for now */}
+        {/* <img src={bottom_blizzlogo}/> */}
       </div>
     );
   }

client/app/components/forum-nav/forum-nav.tsx

@@ -79,8 +79,8 @@ export class ForumNav extends React.Component<Props, State> {
     const imageSrc = selectedCategory ? this.getImageSrc() : undefined;
 
     return (
-      <div className="flex">
+      <div className="flex" style={{ overflow: 'hidden' }}>
-        <img src={imageSrc} />
+        <img className="hide-tiny" src={imageSrc} />
         <div className="forum-nav">
           <div className="forum-nav__title">
             <b>{get(selectedCategory, 'title')}</b>

client/app/components/header/header.scss

@@ -8,7 +8,7 @@ $topbg_height: 100px;
   text-align: center;
   z-index: 1;
 
-  @include breakpoint(smallOrLess) {
+  @include breakpoint(mediumOrLess) {
     img {
       height: 80px;
     }
@@ -83,21 +83,26 @@ $topbg_height: 100px;
   background-image: url('../../assets/linksbar-bg.gif');
   background-repeat: repeat-x;
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
+  position: relative;
 }
 
 .linksbar-image {
   height: 53px;
   width: 106px;
+  position: absolute;
+  top: 0;
 
   &__left {
     background-image: url('../../assets/linksbar-left.gif');
     background-repeat: no-repeat;
+    left: 0;
   }
 
   &__right {
     background-image: url('../../assets/linksbar-right.gif');
     background-repeat: no-repeat;
+    right: 0;
   }
 }

client/app/components/header/header.tsx

@@ -39,7 +39,7 @@ export class Header extends React.Component<Props, State> {
         <div className="linksbar">
           <div className="linksbar-image linksbar-image__left"/>
           <span className="grey">
-            <a href="#">News</a> | <a href="#">Game Info</a> | <a href="#">Forums</a> | <a href="#">Links/Files</a> | <a href="#">Support</a>
+            <Link to="/">Home</Link> | <Link to="/realms">Realms</Link> | <a href="mailto:classicwowforums@gmail.com">Contact</a>
           </span>
           <div className="linksbar-image linksbar-image__right"/>
         </div>

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

@@ -1,3 +1,9 @@
+.login-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
 .portrait-container {
   display: flex;
   flex-direction: column;

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

@@ -7,7 +7,6 @@ import { Oauth } from '../../util';
 import './login-button.scss';
 
 interface Props {
-  className?: string;
   userStore?: UserStore;
   onNavigate: (des: string) => any;
 }
@@ -25,7 +24,8 @@ export class LoginButton extends React.Component<Props, State> {
   renderPortrait() {
     const avatarSrc = CharacterService.getAvatar(this.props.userStore!.user!.character_avatar!);
     return (
-      <div className="portrait-container">
+      <div>
+        <div className="portrait-container hide-tiny">
           <div onClick={() => this.props.onNavigate('/user-account')} style={{ cursor: 'pointer' }}>
             {avatarSrc && <Portrait imageSrc={avatarSrc}/>}
           </div>
@@ -35,6 +35,8 @@ 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>
     );
   }
 
@@ -42,14 +44,14 @@ export class LoginButton extends React.Component<Props, State> {
     return (
       <div>
         <img src={require('../../assets/login-bot-left.gif')} />
-        <img src={require('../../assets/login-bot-login.gif')} style={{ cursor: 'pointer' }} onClick={this.login.bind(this)} />
+        <img src={require('../../assets/login-bot-login.gif')} style={{ cursor: 'pointer' }} onClick={this.login.bind(this)}/>
         <img src={require('../../assets/login-bot-right.gif')} />
       </div>
     );
   }
   render() {
     return (
-      <div className={this.props.className}>
+      <div className="login-button">
         {this.props.userStore!.user ? this.renderPortrait() : this.renderLoginButton()}
       </div>
     );

client/app/pages/forum/forum.scss

@@ -1,7 +1,10 @@
+@import '../../scss/mixins';
+
 $grey1: #252525;
 $grey2: #161616;
 
 .forum-header {
+  position: relative;
   height: 137px;
   display: flex;
   align-items: center;
@@ -40,6 +43,14 @@ $grey2: #161616;
   b {
     color: #E2D9B0;
   }
+
+  @include breakpoint(mediumOrLess) {
+    font-size: 10px;
+
+    a {
+      font-size: 10px;
+    }
+  }
 }
 
 .forum-table__header {
@@ -74,6 +85,7 @@ $grey2: #161616;
     border: 1px solid;
     border-color: #000000 #000000 #161616 #161616;
     position: relative;
+    word-break: break-word;
   }
 
   &--center {

client/app/pages/forum/forum.tsx

@@ -159,10 +159,8 @@ export class Forum extends React.Component<Props, State> {
     return (
       <div className="forum-header">
         <ForumNav categoryId={this.routeParams().categoryId} {...this.props}/>
-        <div style={{ height: '100%' }}>
         <LoginButton onNavigate={dest => this.props.history.push(dest)}/>
       </div>
-      </div>
     );
   }
 
@@ -170,18 +168,18 @@ export class Forum extends React.Component<Props, State> {
     return (
       <div>
         <form className="flex" style={{ marginBottom: 0 }} onSubmit={e => this.onSearch(e)}>
-          <img src={require('../../assets/forum-menu-left.gif')}/>
+          <img className="hide-tiny" src={require('../../assets/forum-menu-left.gif')}/>
           <img src={require('../../assets/forum-menu-newtopic.gif')}
             className="clickable"
             onClick={() => this.onNewTopic()}/>
           <img src={require('../../assets/forum-menu-right.gif')}/>
-          <img src={require('../../assets/forum-menu-search-left.gif')}/>
+          <img className="hide-tiny" src={require('../../assets/forum-menu-search-left.gif')}/>
-          <div className="forum-menu-search-bg">
+          <div className="forum-menu-search-bg hide-tiny">
             <input name="SearchText" onChange={event => this.setState({ searchText: event.target.value })}/>
           </div>
           <input type="image" name="submit"
             src={require('../../assets/forum-menu-search.gif')}
-            className="clickable" style={{ outline: 'none' }}/>
+            className="clickable hide-tiny" style={{ outline: 'none' }}/>
           <div className="forumliner-bg"/>
         </form>
 
@@ -210,16 +208,16 @@ export class Forum extends React.Component<Props, State> {
               </span>
             }
           </td>
-          <td className={`forum-cell forum-cell--body`}>
+          <td className="forum-cell forum-cell--body">
             <b className={authorBluePost}>{user.character_name || user.battletag}</b>
           </td>
-          <td className={`forum-cell forum-cell--body forum-cell--center`}>
+          <td className="forum-cell forum-cell--body forum-cell--center">
             <b>{reply_count}</b>
           </td>
-          <td className={`forum-cell forum-cell--body forum-cell--center`}>
+          <td className="forum-cell forum-cell--body forum-cell--center hide-tiny">
             <b>{view_count}</b>
           </td>
-          <td className={`forum-cell forum-cell--body`}>
+          <td className="forum-cell forum-cell--body hide-tiny">
             <div style={{ fontSize: '8pt' }}>
               by <b className={lastReplyBluePost}>{last_reply.character_name || last_reply.battletag}</b>
             </div>
@@ -272,13 +270,14 @@ export class Forum extends React.Component<Props, State> {
     return show ? <img src={imgSrc}/> : null;
   }
 
-  renderHeaderCell(columnHeader: ColumnHeader, center: boolean) {
+  renderHeaderCell(columnHeader: ColumnHeader, center: boolean, hideTiny?: boolean) {
     const { categoryId, page, threadsPerPage, sortBy, sortOrder } = this.routeParams();
     const newSortOrder = sortOrder === 'asc' ? 'desc' : 'asc';
     const centerClass = center ? 'forum-cell--center' : '';
+    const hideClass = hideTiny ? 'hide-tiny' : '';
 
     return (
-      <td className={`forum-cell forum-cell--header ${centerClass}`}>
+      <td className={`forum-cell forum-cell--header ${centerClass} ${hideClass}`}>
         <a onClick={() => this.navigateHere(categoryId, page, threadsPerPage, columnHeader, newSortOrder)}>
           <span>{columnHeader}</span>
           {this.renderSortingArrow(sortBy === columnHeader, sortOrder)}
@@ -303,8 +302,8 @@ export class Forum extends React.Component<Props, State> {
               {this.renderHeaderCell(ColumnHeader.subject, false)}
               {this.renderHeaderCell(ColumnHeader.author, true)}
               {this.renderHeaderCell(ColumnHeader.replies, true)}
-              {this.renderHeaderCell(ColumnHeader.views, true)}
+              {this.renderHeaderCell(ColumnHeader.views, true, true)}
-              {this.renderHeaderCell(ColumnHeader.lastPost, true)}
+              {this.renderHeaderCell(ColumnHeader.lastPost, true, true)}
             </tr>
 
             {/* body */}

client/app/pages/realms/realms.tsx

@@ -69,8 +69,8 @@ export class Realms extends React.Component<Props, State> {
           </div>
 
           <div style={{ margin: '15px 0' }}>
-            <div><b>Welcome to the World of Warcraft Realm Forums!</b></div>
+            <div><b>Welcome to the Realm Forums!</b></div>
-            <div>Use these forums to discuss topics related to World of Warcraft with player on your own Realm.</div>
+            <div>Use these forums to discuss topics related to World of Warcraft with players on your own Realm.</div>
           </div>
 
           <div className="flex flex--wrap">

client/app/pages/thread/thread.tsx

@@ -251,7 +251,7 @@ export class Thread extends React.Component<Props, State> {
         <div className="topic-bg">
           <div className="threadTopic-container">
             <div className="threadTopic">
-              <img src={require('../../assets/sticky.gif')} style={{ marginRight: '5px' }}/>
+              {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>
             </div>

client/app/scss/style.scss

@@ -1,4 +1,5 @@
 @import '~nprogress/nprogress.css';
+@import './mixins';
 
 $fontPrimary: #cccccc;
 $linkColor: #FFB019;
@@ -179,3 +180,17 @@ div {
 .page-link {
   margin: 0 5px;
 }
+
+.hide-tiny {
+  @include breakpoint(mediumOrLess) {
+    display: none;
+  }
+}
+
+.show-tiny {
+  display: none;
+
+  @include breakpoint(mediumOrLess) {
+    display: block;
+  }
+}