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">
-        <img src={imageSrc} />
+      <div className="flex" style={{ overflow: 'hidden' }}>
+        <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,15 +24,18 @@ 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 onClick={() => this.props.onNavigate('/user-account')} style={{ cursor: 'pointer' }}>
-          {avatarSrc && <Portrait imageSrc={avatarSrc}/>}
-        </div>
-        <div style={{ textAlign: 'center' }}>
-          {!avatarSrc && <p><a onClick={() => this.props.onNavigate('/user-account')}>Account</a></p>}
-          <div><b>{this.props.userStore!.user!.battletag}</b></div>
-          <div><b>{this.props.userStore!.user!.character_name}</b></div>
+      <div>
+        <div className="portrait-container hide-tiny">
+          <div onClick={() => this.props.onNavigate('/user-account')} style={{ cursor: 'pointer' }}>
+            {avatarSrc && <Portrait imageSrc={avatarSrc}/>}
+          </div>
+          <div style={{ textAlign: 'center' }}>
+            {!avatarSrc && <p><a onClick={() => this.props.onNavigate('/user-account')}>Account</a></p>}
+            <div><b>{this.props.userStore!.user!.battletag}</b></div>
+            <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>
     );