Ratstail91/kingdombattles
Archived
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Basic crappy styling

Browse Source
This commit is contained in:
Kayne Ruse
2019-05-09 15:24:20 +10:00
parent de92a0e4f7
commit 84ce324365
9 changed files with 197 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles/shared.css
+78 -3
View File
@@ -6,17 +6,20 @@
}
body {
font: 13pt Helvetica, Arial;
font: 12pt Helvetica, Arial;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
background-color: #000000;
color: white;
}
h1 {
font: 24pt;
color: red;
}
h2 {
@@ -65,11 +68,12 @@ footer {
flex-direction: column;
padding: 0 10px;
min-height: 100vh;
margin: 0 10%;
}
@media screen and (min-width: 768px) {
@media screen and (max-width: 768px) {
.central {
margin: 0 10%;
margin: 0;
}
}
@@ -104,3 +108,74 @@ footer {
background: #ff6666;
}
/* custom styling */
/* Homepage structure */
.homePage {
flex: 1;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
}
@media screen and (max-width: 480px) {
.homePage {
flex-direction: column;
}
}
/* left panel */
.sidePanel {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
min-width: 320px;
width: 320px;
}
@media screen and (max-width: 480px) {
.sidePanel {
align-self: stretch;
width: auto;
}
}
.panel.left, .panel.center {
align-items: center;
}
.panel.left .warning, .panel.center .warning {
align-self: stretch;
}
.panel.left form, .panel.center form {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-end;
align-self: stretch;
}
.panel.left form button, .panel.center form button {
align-self: stretch;
margin-top: .2em;
margin-bottom: .2em;
}
@media screen and (max-width: 480px) {
.panel.left h1, .panel.center h1 {
font-size: 16px;
}
}
/* New panel */
.newsPanel {
margin-left: 15px;
}
/* bits and pieces */
.logoutButton {
align-self: stretch;
}
src/components/pages/home.jsx
+53 -23
View File
@@ -15,27 +15,61 @@ class Home extends React.Component {
super(props);
this.state = {
changedPassword: false,
signedUp: false,
signupSent: false,
signupMsg: '',
recoverSent: false,
recoverMsg: ''
};
}
//rendering function
render() {
//DEBUGGING: well this is goofy
//get the correct side panel
let SidePanel;
if (this.props.id) { //logged in
SidePanel = () => {
if (this.state.signedUp) {
this.setState({ signedUp: false });
if (this.props.id) {
SidePanel = this.LoggedInSidePanel.bind(this);
} else {
SidePanel = this.LoggedOutSidePanel.bind(this);
}
//TODO: news column
//return the home page
return (
<div className='page'>
<h1 style={{textAlign: 'center', fontSize: '50px', margin: '30px'}}>KINGDOM BATTLES!</h1>
<div className='homePage'>
<SidePanel />
<br />
<div className='newsPanel'>
<h1 className='centered'>News</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
);
}
//panel functions
LoggedInSidePanel() {
//reset the other mode
if (this.state.signupSent) {
this.setState({ signupSent: false });
}
if (this.state.recoverSent) {
this.setState({ recoverSent: false });
}
//build the password change panel
let PasswordChangePanel;
if (!this.state.changedPassword) {
@@ -48,26 +82,29 @@ class Home extends React.Component {
}
}
//finally return the side panel
return (
<div>
<p>You are logged in.</p>
<div className='sidePanel'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<PasswordChangePanel />
<Logout />
</div>
);
};
} else { //not logged in
SidePanel = () => {
}
LoggedOutSidePanel() {
//reset the other mode
if (this.state.changedPassword) {
this.setState({ changedPassword: false });
}
//build the signup panel
let SignupPanel;
if (!this.state.signedUp) {
if (!this.state.signupSent) {
SignupPanel = () => {
return (
<Signup onSignup={(msg) => this.setState( {signedUp: true, signupMsg: msg} )} />
<Signup onSignup={(msg) => this.setState( {signupSent: true, signupMsg: msg} )} />
);
}
} else {
@@ -78,6 +115,7 @@ class Home extends React.Component {
}
}
//build the recover panel
let RecoverPanel;
if (!this.state.recoverSent) {
@@ -95,22 +133,14 @@ class Home extends React.Component {
}
}
//finally return the side panel
return (
<div>
<div className='sidePanel'>
<SignupPanel />
<Login />
<RecoverPanel />
</div>
);
};
}
return (
<div className='page'>
<p>This is the home page.</p>
<SidePanel />
</div>
);
}
}
src/components/pages/password_reset.jsx
+2 -2
View File
@@ -30,9 +30,9 @@ class PasswordReset extends React.Component {
}
return (
<div className='page'>
<div className='page' style={{justifyContent: 'center'}}>
<Panel />
<Link to='/'>Return Home</Link>
<Link to='/' className='centered'>Return Home</Link>
</div>
);
}
src/components/panels/login.jsx
+1 -1
View File
@@ -19,7 +19,7 @@ class Login extends React.Component {
};
return (
<div className='panel'>
<div className='panel left'>
<h1>Login</h1>
<div className='warning' style={warningStyle}>
src/components/panels/logout.jsx
+1 -1
View File
@@ -9,7 +9,7 @@ class Logout extends React.Component {
render() {
return (
<button type='submit' onClick={(e) => this.submit(e)}>Logout</button>
<button className='logoutButton' type='submit' onClick={(e) => this.submit(e)}>Logout</button>
);
}
src/components/panels/password_change.jsx
+1 -1
View File
@@ -18,7 +18,7 @@ class PasswordChange extends React.Component {
};
return (
<div className='panel'>
<div className='panel left'>
<h1>Change Password</h1>
<div className='warning' style={warningStyle}>
src/components/panels/password_recover.jsx
+1 -1
View File
@@ -16,7 +16,7 @@ class PasswordRecover extends React.Component {
};
return (
<div className='panel'>
<div className='panel left'>
<h1>Recover Password</h1>
<div className='warning' style={warningStyle}>
src/components/panels/password_reset.jsx
+1 -1
View File
@@ -19,7 +19,7 @@ class PasswordReset extends React.Component {
};
return (
<div className='panel'>
<div className='panel center'>
<h1>Change Password</h1>
<div className='warning' style={warningStyle}>
src/components/panels/signup.jsx
+1 -1
View File
@@ -19,7 +19,7 @@ export default class Signup extends React.Component {
};
return (
<div className='panel'>
<div className='panel left'>
<h1>Sign Up</h1>
<div className='warning' style={warningStyle}>