mitchell/classic-wow-forums
1
0
Fork 0
mirror of https://github.com/mgerb/classic-wow-forums synced 2026-01-09 00:42:47 +00:00
Code Issues Releases Wiki Activity

client - forum page now responsive - tested on iOS

Browse Source
This commit is contained in:
Mitchell
2018-01-27 16:08:10 -06:00
parent b90860f251
commit 7ec7416dad
11 changed files with 76 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/app/components/footer/footer.tsx
View File

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

4
client/app/components/forum-nav/forum-nav.tsx
View File

@@ -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>

9
client/app/components/header/header.scss
View File

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

2
client/app/components/header/header.tsx
View File

@@ -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>

6
client/app/components/login-button/login-button.scss
View File

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

24
client/app/components/login-button/login-button.tsx
View File

@@ -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>
);

12
client/app/pages/forum/forum.scss
View File

@@ -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 {

29
client/app/pages/forum/forum.tsx
View File

@@ -159,9 +159,7 @@ 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>
<LoginButton onNavigate={dest => this.props.history.push(dest)}/>
</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')}/>
<div className="forum-menu-search-bg">
<img className="hide-tiny" src={require('../../assets/forum-menu-search-left.gif')}/>
<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.lastPost, true)}
{this.renderHeaderCell(ColumnHeader.views, true, true)}
{this.renderHeaderCell(ColumnHeader.lastPost, true, true)}
</tr>
{/* body */}

4
client/app/pages/realms/realms.tsx
View File

@@ -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>Use these forums to discuss topics related to World of Warcraft with player on your own Realm.</div>
<div><b>Welcome to the Realm Forums!</b></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">

2
client/app/pages/thread/thread.tsx
View File

@@ -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>

15
client/app/scss/style.scss
View File

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