Firewalkers
/
MockCarAPI
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Move css to seperate file and retheme admin page

This commit is contained in:
Anjuman 2020-12-21 14:10:49 +05:30
parent 46fc7a7a63
commit 4d66f92aac
2 changed files with 109 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
static/admin.css Normal file
View File

@ -0,0 +1,82 @@
* {
font-family: 'Roboto', sans-serif;
}
header{
padding: 50px;
}
body{
background-image: url("https://images.unsplash.com/photo-1528459584353-5297db1a9c01?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1075&q=80");
}
.input[type=text]{
width:100%;
border:2px solid #aaa;
border-radius:4px;
margin:8px 0;
outline:none;
padding:8px;
box-sizing:border-box;
transition:.3s;
}
input[type=text]:focus{
border-color:dodgerBlue;
box-shadow:0 0 8px 0 dodgerBlue;
}
h1{
text-align: center;
}
.table-dec{
display: flex;
justify-content: center;
width: 100%;
}
.content-table {
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
min-width: 400px;
border-radius: 5px 5px 0 0;
overflow: hidden;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.content-table thead tr {
width:100%;
background-color: #009879;
color: #ffffff;
text-align: left;
font-weight: bold;
}
.content-table th,
.content-table td {
padding: 12px 15px;
}
.content-table tbody tr {
border-bottom: 1px solid #dddddd;
}
.content-table tbody tr:nth-of-type(even) {
background-color: rgba(243, 243, 243, 0.7);
}
.content-table tbody tr:last-of-type {
border-bottom: 2px solid #009879;
}
.content-table tbody tr.active-row {
font-weight: bold;
color: #009879;
}
.change {
width: 100%;
display: flex;
justify-content: space-evenly;
}

68
templates/admin.html
View File

@ -4,52 +4,38 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mock Car API Admin</title>
<style type="text/css" media="screen">
body {
margin: 5em;
}
h1 {
text-align: center;
}
table {
width: 100%;
text-align: center;
margin-top: 1em;
}
table, tr, td {
border: black 1px solid;
border-collapse: collapse;
}
.change {
width: 100%;
display: flex;
justify-content: space-evenly;
}
</style>
<link rel="stylesheet" href="{{ url_for('static', filename='admin.css')}}" type="text/css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,100&display=swap" rel="stylesheet">
</head>
<body>
<h1>Mock Data API</h1>
<header>
<h1>Mock Data API</h1>
</header>
<div class="change">
<input type="text" name="key" id="key" placeholder="Key">
<input type="text" name="value" id="value" placeholder="Valid JSON values">
<input class="input-box" type="text" name="key" id="key" placeholder="Key">
<input class="input-box" type="text" name="value" id="value" placeholder="Valid JSON values">
</div>
<div class='button-dec'>
<button type="submit" id="#submit" onclick="updateData()">Change / Add</button>
</div>
<table>
<tr>
<td>Key</td>
<td>Value</td>
</tr>
{% for key, value in data.items() %}
<tr>
<td>{{ key }}</td>
<td>{{ value }}</td>
</tr>
{% endfor %}
</table>
<div class="table-dec">
<table class="content-table">
<thead>
<tr>
<td>Key</td>
<td>Value</td>
</tr>
</thead>
{% for key, value in data.items() %}
<tr>
<td>{{ key }}</td>
<td>{{ value }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<script charset="utf-8">
function updateData() {
const key = document.querySelector("#key").value;