hamcha/staxman-old
1
0
Fork 0
Code Issues 9 Pull requests Releases Packages Activity Actions

some styling that kinda sucks

Browse source
This commit is contained in:
Hamcha 2023-11-18 23:17:05 +01:00
parent 5c5d0b354b
commit f8e3a0b6ee
3 changed files with 170 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
templates/base.html
View file

@ -1,11 +1,74 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{% block title %}{{ title }} - staxman{% endblock %}</title>
</head>
<body>
{% block content %}{% endblock %}
</body>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{% block title %}{{ title }} - staxman{% endblock %}</title>
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<style>
:root {
background-color: #13131E;
color: #E0DFFE;
font-family: Inter, sans-serif;
}
a[href],
a[href]:visited {
color: #FFC53D;
&:hover {
color: #e28d0e;
}
}
body {
display: flex;
align-items: center;
flex-direction: column;
}
nav {
display: flex;
width: 100%;
background-color: #171625;
& a {
flex: 1;
display: flex;
text-decoration: none;
padding: 5px 8px;
justify-content: center;
max-width: 100px;
box-shadow: inset 0 -2px #202248;
font-size: 11pt;
text-transform: uppercase;
&[href],
&[href]:visited {
color: #B1A9FF;
}
&:hover {
background-color: #1E160F;
box-shadow: inset 0 -2px #7E451D;
}
}
}
body>* {
width: 100%;
max-width: 1000px;
}
</style>
</head>
<body>
<nav>
<a href="/">Overview</a>
</nav>
{% block content %}{% endblock %}
</body>
</html>

5
templates/home.html
View file

@ -1,6 +1,6 @@
{% extends "base.html" %}
{% block title %}Home{% endblock %}
{% block title %}Overview{% endblock %}
{% block content %}
<main>
@ -10,4 +10,7 @@
{% endfor %}
</ul>
</main>
<style scoped>
</style>
{% endblock %}

101
templates/stack/get-one.html
View file

@ -4,12 +4,99 @@
{% block content %}
<main>
<h1>{{stack_name}}</h1>
<textarea>{{file_contents}}</textarea>
<ul>
{% for container in containers %}
<li>{{container.name}} ({{container.image}}) : {{ container.state }}</li>
{% endfor %}
</ul>
<h1>Stack details for <span class="stack-name">{{stack_name}}</span></h1>
<h2>Status</h2>
<table class="containers">
<thead>
<tr>
<th>Name</th>
<th>State</th>
<th>Image</th>
</tr>
</thead>
<tbody>
{% for container in containers %}
<tr>
<td>{{container.name}}</td>
<td class="status {{container.state}}">{{container.state}}</td>
<td>{{container.image}}</td>
</tr>
{% endfor %}
</tbody>
</table>
<h2>Editor</h2>
<textarea id="editor">{{file_contents}}</textarea>
</main>
<style scoped>
main {
display: flex;
flex-direction: column;
gap: 1rem;
}
h2 {
text-transform: uppercase;
margin: 0;
padding: 0;
}
pre {
margin: 0;
padding: 0;
}
.containers {
background-color: #171625;
border: 3px solid #5958B1;
border-radius: 3px;
& th,
& td {
padding: 3px 5px;
}
& th {
font-weight: bold;
}
& thead {
background-color: #202248;
}
& .status {
text-align: center;
font-weight: bold;
color: white;
&.exited {
background-color: #E5484D;
}
&.running {
background-color: #46A758;
}
}
}
.stack-name {
color: #E796F3;
}
.ace_editor {
min-height: 50vh;
border: 3px solid #5958B1;
border-radius: 3px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.31.2/ace.min.js"
integrity="sha512-4qIbBlcJOvbOmEB50FfnviJ9jOCen2yhi4skodkbTLU/uJJdULPxlX2R9Enf1oOBleUK9KD3fGmMcnItFQdNeA=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/dracula");
editor.session.setMode("ace/mode/nix");
</script>
{% endblock %}