tronnet/ProxmoxAAS-Dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

change nav styling and responsiveness

Browse Source 
Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2023-04-25 21:25:03 +00:00
parent 927ae672a6
commit 701f254424
5 changed files with 122 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
account.html
View File

@ -10,12 +10,16 @@
<script src="scripts/account.js" type="module"></script> <script src="scripts/account.js" type="module"></script>
</head> </head>
<body> <body>
<header class="w3-black w3-bar"> <header>
<nav class="w3-large w3-bar" id="nav"> <nav id="hamnav">
<h1 class="w3-bar-item w3-mobile w3-hide-small" style="font-size: 18px; margin: 0px; background-color: #0f0; color: #000;">tronnet</h1> <h1 style="font-size: 18px; margin: 0px; background-color: #0f0; color: #000;">tronnet</h1>
<a class="w3-bar-item w3-mobile w3-button" href="index.html">Instances</a> <label for="hamburger">&#9776;</label>
<a class="w3-bar-item w3-mobile w3-button" href="account.html" aria-current="true">Account</a> <input type="checkbox" id="hamburger">
<a class="w3-bar-item w3-mobile w3-button" href="login.html">Logout</a> <div id="hamitems">
<a href="index.html">Instances</a>
<a href="account.html" aria-current="true">Account</a>
<a href="login.html">Logout</a>
</div>
</nav> </nav>
</header> </header>
<main class="w3-container"> <main class="w3-container">

16
config.html
View File

@ -11,12 +11,16 @@
<script src="scripts/config.js" type="module"></script> <script src="scripts/config.js" type="module"></script>
</head> </head>
<body> <body>
<header class="w3-black w3-bar"> <header>
<nav class="w3-large w3-bar" id="nav"> <nav id="hamnav">
<h1 class="w3-bar-item w3-mobile w3-hide-small" style="font-size: 18px; margin: 0px; background-color: #0f0; color: #000;">tronnet</h1> <h1 style="font-size: 18px; margin: 0px; background-color: #0f0; color: #000;">tronnet</h1>
<a class="w3-bar-item w3-mobile w3-button" href="index.html" aria-current="true">Instances</a> <label for="hamburger">&#9776;</label>
<a class="w3-bar-item w3-mobile w3-button" href="account.html">Account</a> <input type="checkbox" id="hamburger">
<a class="w3-bar-item w3-mobile w3-button" href="login.html">Logout</a> <div id="hamitems">
<a href="index.html" aria-current="true">Instances</a>
<a href="account.html">Account</a>
<a href="login.html">Logout</a>
</div>
</nav> </nav>
</header> </header>
<main class="w3-container"> <main class="w3-container">

84
css/style.css
View File

@ -3,6 +3,10 @@
--success-color: #0f0; --success-color: #0f0;
} }
* {
box-sizing: border-box;
}
h1, h2, h3, h3, h4, h5, h6, p, a, label, button, input, select, td { h1, h2, h3, h3, h4, h5, h6, p, a, label, button, input, select, td {
font-family: monospace; font-family: monospace;
} }
@ -46,3 +50,83 @@ img {
.none { .none {
display: none; display: none;
} }
nav {
overflow: hidden;
color: white;
background-color: black;
font-size: larger;
}
nav a, nav h1, nav label {
text-align: left;
padding: 14px 16px;
text-decoration: none;
}
#hamitems a:hover {
background-color: white;
color: black;
}
#hamitems a[aria-current="true"] {
background-color: white;
color: black;
}
#hamitems:hover a[aria-current="true"] {
background-color: black;
color: white;
}
#hamitems:hover a[aria-current="true"]:hover {
background-color: white;
color: black;
}
#hamnav label, #hamburger {
display: none;
}
@media screen and (min-width: 600px){
nav {
display: flex;
align-items: center;
}
#hamitems {
display: flex;
}
}
@media screen and (max-width: 600px){
nav {
display: grid;
grid-template-columns: 1fr auto;
}
#hamitems {
display: block;
grid-column: 1 / span 2;
}
#hamitems a {
box-sizing: border-box;
display: block;
text-align: center;
width: 100%;
border-top: 1px solid #888;
}
#hamnav label {
display: inline-block;
}
#hamitems {
display: none;
}
#hamnav input:checked ~ #hamitems {
display: block;
}
}

16
index.html
View File

@ -11,12 +11,16 @@
<script src="scripts/instance.js" type="module"></script> <script src="scripts/instance.js" type="module"></script>
</head> </head>
<body> <body>
<header class="w3-black w3-bar"> <header>
<nav class="w3-large w3-bar" id="nav"> <nav id="hamnav">
<h1 class="w3-bar-item w3-mobile w3-hide-small" style="font-size: 18px; margin: 0px; background-color: #0f0; color: #000;">tronnet</h1> <h1 style="font-size: 18px; margin: 0px; background-color: #0f0; color: #000;">tronnet</h1>
<a class="w3-bar-item w3-mobile w3-button" href="index.html" aria-current="true">Instances</a> <label for="hamburger">&#9776;</label>
<a class="w3-bar-item w3-mobile w3-button" href="account.html">Account</a> <input type="checkbox" id="hamburger">
<a class="w3-bar-item w3-mobile w3-button" href="login.html">Logout</a> <div id="hamitems">
<a href="index.html" aria-current="true">Instances</a>
<a href="account.html">Account</a>
<a href="login.html">Logout</a>
</div>
</nav> </nav>
</header> </header>
<main class="w3-container"> <main class="w3-container">

12
login.html
View File

@ -10,10 +10,14 @@
<script src="scripts/login.js" type="module"></script> <script src="scripts/login.js" type="module"></script>
</head> </head>
<body class="w3-display-container" style="min-height: 100vh;"> <body class="w3-display-container" style="min-height: 100vh;">
<header class="w3-black w3-bar"> <header>
<nav class="w3-large w3-bar" id="nav"> <nav id="hamnav">
<h1 class="w3-bar-item w3-mobile w3-hide-small" style="font-size: 18px; margin: 0px; background-color: #0f0; color: #000;">tronnet</h1> <h1 style="font-size: 18px; margin: 0px; background-color: #0f0; color: #000;">tronnet</h1>
<a class="w3-bar-item w3-mobile w3-button w3-hide-small" href="login.html" aria-current="true">Login</a> <label for="hamburger">&#9776;</label>
<input type="checkbox" id="hamburger">
<div id="hamitems">
<a href="login.html" aria-current="true">Login</a>
</div>
</nav> </nav>
</header> </header>
<main class="w3-container w3-display-middle w3-mobile"> <main class="w3-container w3-display-middle w3-mobile">