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

client - forum page now responsive - other adjustments as well

Browse Source
This commit is contained in:
Mitchell
2018-01-27 18:25:12 -06:00
parent 7ec7416dad
commit a240b326ca
11 changed files with 130 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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