mitchell/classic-wow-forums
1
0
Fork 0
mirror of https://github.com/mgerb/classic-wow-forums synced 2026-01-11 09:32:51 +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

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>