games/factorio-server-manager
games/factorio-server-manager
1
0
Fork 0
mirror of https://github.com/OpenFactorioServerManager/factorio-server-manager.git synced 2025-01-06 03:54:06 +02:00
Code Issues Releases Activity

add more depth to design

Browse Source
This commit is contained in:
Jan Naahs 2020-06-18 01:23:33 +02:00
parent b0d8e7a3ac
commit d6d49acfbe
6 changed files with 55 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
ui/App/components/Layout.jsx
View File

@ -40,7 +40,7 @@ const Layout = ({children, handleLogout, serverStatus, setServerStatus}) => {
exact={true}
to={to}
activeClassName="bg-orange"
className={`bg-gray-light hover:bg-orange text-black font-bold py-2 px-4 w-full block${last ? '' : ' mb-1'}`}
className={`hover:glow-orange accentuated bg-gray-light hover:bg-orange text-black font-bold py-2 px-4 w-full block${last ? '' : ' mb-1'}`}
>{children}</NavLink>)
}
@ -56,18 +56,18 @@ const Layout = ({children, handleLogout, serverStatus, setServerStatus}) => {
{/*Sidebar*/}
<div
className="w-full border-r border-black md:w-1/6 bg-gray-dark fixed bottom-0 md:top-0 md:left-0 h-16 md:h-screen">
<div className="py-4 px-2 border-b-2 border-black items-center text-center">
className="w-full md:w-1/6 bg-gray-dark fixed bottom-0 md:top-0 md:left-0 h-16 md:h-screen">
<div className="py-4 px-2 accentuated items-center text-center">
<img src="/images/factorio.jpg" className="inline h-8" alt="Factorio Logo"/>
<span className="text-dirty-white pl-2 text-xl">Factorio Server Manager</span>
</div>
<div className="py-4 px-2 border-b-2 border-black">
<div className="py-4 px-2 accentuated">
<h1 className="text-dirty-white text-lg mb-2 mx-4">Server Status</h1>
<div className="mx-4 mb-4 text-center">
<Status info={serverStatus}/>
</div>
</div>
<div className="py-4 px-2 border-b-2 border-black">
<div className="py-4 px-2 accentuated">
<h1 className="text-dirty-white text-lg mb-2 mx-4">Server Management</h1>
<div className="text-white text-center rounded-sm bg-black shadow-inner mx-4 p-1">
<Link to="/">Controls</Link>
@ -79,18 +79,19 @@ const Layout = ({children, handleLogout, serverStatus, setServerStatus}) => {
<Link to="/logs" last={true}>Logs</Link>
</div>
</div>
<div className="py-4 px-2 border-b-2 border-black">
<div className="py-4 px-2 accentuated">
<h1 className="text-dirty-white text-lg mb-2 mx-4">Administration</h1>
<div className="text-white text-center rounded-sm bg-black shadow-inner mx-4 p-1">
<Link to="/user-management">User Management</Link>
<Link to="/help" last={true}>Help</Link>
</div>
</div>
<div className="py-4 px-2 border-b-2 border-black">
<div className="py-4 px-2 accentuated">
<div className="text-white text-center rounded-sm bg-black shadow-inner mx-4 p-1">
<Button type="danger" className="w-full" onClick={handleLogout}>Logout</Button>
</div>
</div>
<div className="accentuated h-full"/>
</div>
</div>
);

8
ui/App/elements/Button.jsx
View File

@ -6,17 +6,17 @@ const Button = ({ children, type, onClick, isSubmit, className }) => {
switch (type) {
case 'success':
color = 'bg-green hover:bg-green-light';
color = 'bg-green hover:glow-green hover:bg-green-light';
break;
case 'danger':
color = 'bg-red hover:bg-red-light';
color = 'bg-red hover:glow-red hover:bg-red-light';
break;
default:
color = 'bg-gray-light hover:bg-orange'
color = 'bg-gray-light hover:glow-orange hover:bg-orange'
}
return (
<button onClick={onClick} className={`${className} ${color} text-black font-bold py-2 px-4`}
<button onClick={onClick} className={`${className} ${color} accentuated text-black font-bold py-2 px-4`}
type={isSubmit ? 'submit' : 'button'}>
{children}
</button>

2
ui/App/elements/ButtonLink.jsx
View File

@ -2,7 +2,7 @@ import React from "react";
const ButtonLink = () => {
return (
<button className="bg-green hover:bg-green-light text-black font-bold py-2 px-4 w-full"
<button className="accentuated bg-green hover:glow-green hover:bg-green-light text-black font-bold py-2 px-4 w-full"
type="submit">
Sign In
</button>

2
ui/App/elements/Panel.jsx
View File

@ -2,7 +2,7 @@ import React from "react";
const Panel = ({title, content, actions}) => {
return (
<div className="rounded-sm bg-gray-dark shadow-xl pb-4">
<div className="accentuated rounded-sm bg-gray-dark shadow-xl pb-4">
<div className="px-4 py-2 text-xl text-dirty-white font-bold">
{title}
</div>

2
ui/App/views/Login.jsx
View File

@ -57,7 +57,7 @@ const Login = ({handleLogin}) => {
{errors.password && <span className="block text-red">Password is required</span>}
</div>
<div className="text-center">
<Button type="success" isSubmit={true}>Sign In</Button>
<Button type="success" className="w-full" isSubmit={true}>Sign In</Button>
</div>
</div>
</form>

40
ui/index.scss
View File

@ -5,4 +5,44 @@
.bg-banner {
background-image: url("/images/factorio-main-banner.jpg");
background-position: center center;
}
.accentuated-t {
border-top: 2px solid rgba(255, 255, 255, 0.1);
}
.accentuated-r {
border-right: 2px solid rgba(0, 0, 0, 0.2);
}
.accentuated-b {
border-bottom: 2px solid rgba(0, 0, 0, 0.3);
}
.accentuated-l {
border-left: 2px solid rgba(0, 0, 0, 0.1);
}
.accentuated {
@apply .accentuated-t .accentuated-r .accentuated-b .accentuated-l
}
.accentuated-x {
@apply .accentuated-r .accentuated-l
}
.accentuated-y {
@apply .accentuated-t .accentuated-b
}
.hover\:glow-orange:hover {
box-shadow: 0 0 3px 1px rgba(227, 152, 39, 0.8);
}
.hover\:glow-green:hover {
box-shadow: 0 0 3px 1px rgba(94, 182, 99, 0.8);
}
.hover\:glow-red:hover {
box-shadow: 0 0 3px 1px rgba(254, 90, 90, 0.8);
}