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
*/
body {
html, body, .cryps {
width: 100%;
height: 100%;
margin: 0;
background-color: #000000;
font-family: 'Jura';
color: whitesmoke;
font-size: 16pt;
padding: 0 2em;
/*overflow: hidden;*/
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 {
@ -49,8 +68,31 @@ button.left:hover, button.left:focus {
/*
MENU
*/
.header {
header {
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 {
@ -85,31 +127,11 @@ button.left:hover, button.left:focus {
background-color: #000000
}
.cryps-title {
font-size: 200%;
display: inline;
}
.login {
display: inline;
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 {
fill: none;
stroke-width: 4px;

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

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

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

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

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

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