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