ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

header

Browse Source
This commit is contained in:
ntr 2019-04-01 15:01:47 +11:00
parent f9582aeb8b
commit 3bb4f1adec
4 changed files with 49 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
html-client/cryps.css
View File

@ -1,14 +1,33 @@
/* /*
GLOBAL GLOBAL
*/ */
body { html, body, .cryps {
width: 100%;
height: 100%;
margin: 0;
background-color: #000000; background-color: #000000;
font-family: 'Jura'; font-family: 'Jura';
color: whitesmoke; color: whitesmoke;
font-size: 16pt; font-size: 16pt;
padding: 0 2em;
/*overflow: hidden;*/
user-select: none; user-select: none;
/*overflow: hidden;*/
}
html {
box-sizing: border-box;
margin: 0;
padding: 0;
height: 100%;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* main container */
.cryps {
padding: 0 2em;
} }
button, input { button, input {
@ -49,8 +68,31 @@ button.left:hover, button.left:focus {
/* /*
MENU MENU
*/ */
.header { header {
margin-bottom: 1em; margin-bottom: 1em;
display: flex;
flex-flow: row;
}
.header-title {
flex: 1;
font-size: 2em;
}
.header-username {
letter-spacing: 0.25em;
font-size: 2em;
display: inline;
}
.header-status {
text-align: right;
}
.header-status svg {
margin-left: 1em;
height: 1em;
background-color: black;
} }
.menu-cryps { .menu-cryps {
@ -85,31 +127,11 @@ button.left:hover, button.left:focus {
background-color: #000000 background-color: #000000
} }
.cryps-title {
font-size: 200%;
display: inline;
}
.login { .login {
display: inline; display: inline;
margin-right: 0; margin-right: 0;
} }
.header-username {
display: inline;
letter-spacing: 0.25em;
}
.header-status {
text-align: right;
}
.header-status svg {
margin-left: 1em;
height: 1em;
background-color: black;
}
.ping-path { .ping-path {
fill: none; fill: none;
stroke-width: 4px; stroke-width: 4px;

4
html-client/src/components/body.component.jsx
View File

@ -1,10 +1,8 @@
// eslint-disable-next-line // eslint-disable-next-line
const preact = require('preact'); const preact = require('preact');
const { connect } = require('preact-redux'); const { connect } = require('preact-redux');
const actions = require('../actions');
const InstanceListContainer = require('./instance.list.container'); const InstanceListContainer = require('./instance.list.container');
const CrypSpawnContainer = require('./cryp.spawn.container');
const CrypListContainer = require('./cryp.list.container'); const CrypListContainer = require('./cryp.list.container');
const GameContainer = require('./game.container'); const GameContainer = require('./game.container');
const InstanceContainer = require('./instance.container'); const InstanceContainer = require('./instance.container');
@ -42,8 +40,6 @@ function renderBody(props) {
return ( return (
<div> <div>
<div className="background"/>
<CrypSpawnContainer />
<section className="row" > <section className="row" >
<div className="six columns"> <div className="six columns">
<CrypListContainer /> <CrypListContainer />

4
html-client/src/components/header.component.jsx
View File

@ -5,8 +5,8 @@ const LoginContainer = require('./login.container');
function renderHeader() { function renderHeader() {
return ( return (
<header className="row header"> <header>
<h1 className="cryps-title six columns"> <h1 className="header-title">
cryps.gg cryps.gg
</h1> </h1>
<LoginContainer /> <LoginContainer />

2
html-client/src/main.jsx
View File

@ -46,7 +46,7 @@ document.fonts.load('16pt "Jura"').then(() => {
}; };
const Cryps = () => ( const Cryps = () => (
<section> <section className='cryps' >
<Header /> <Header />
<Body /> <Body />
</section> </section>