New UI made

This commit is contained in:
Benjamyn Love 2020-02-25 23:44:56 +11:00
parent 2fb4ec77eb
commit d8dcd34db1
5 changed files with 149 additions and 41 deletions

View File

@ -50,4 +50,64 @@ body {
top: 2px; top: 2px;
right: 2px; right: 2px;
padding-left: 10px; padding-left: 10px;
} }
@media screen and (min-width: 600px) {
.main {
width: 90%;
flex-direction: row;
display: flex;
}
}
.list {
}
.navbutt {
width: 100%;
/* justify-content: center; */
display: flex;
}
@media screen and (min-width: 800px) {
.main {
width: 100%;
justify-content: center;
display: flex;
}
.form {
width: 100%;
/* justify-content: center; */
display: flex;
}
.navbutt {
width: 100%;
/* justify-content: center; */
display: flex;
}
.contain {
display: flex;
flex-direction: row;
justify-content: center;
}
.list {
/* width: 90%; */
flex-direction: row;
justify-content: center;
display: flex;
}
.innerContain {
display: flex;
flex-direction: column;
width: 90%;
}
}

View File

@ -1,4 +1,4 @@
<div> <div style="width: 100%">
<form action="/post" method="post"> <form action="/post" method="post">
<p style="display: inline">Item: </p> <p style="display: inline">Item: </p>
<input class="form-control" id="addbox" style="display: inline" type="text" name="item" value=""><br><br> <input class="form-control" id="addbox" style="display: inline" type="text" name="item" value=""><br><br>
@ -8,7 +8,6 @@
{% endfor %} {% endfor %}
</select> </select>
<div style="text-align: center; padding-bottom: 2px"><input class="btn btn-secondary" type="submit" <div style="text-align: center; padding-bottom: 2px"><input class="btn btn-secondary" type="submit"
style="text-align: center" name="addValue" value="Submit"> style="text-align: center" name="addValue" value="Submit"></div>
</form>
</form> </form>
</div> </div>

11
templates/footer.html Normal file
View File

@ -0,0 +1,11 @@
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

View File

@ -1,8 +1,8 @@
{% include "header.html" %} {% include "header.html" %}
<div class="contain">
<body> <div class="innerContain">
<h1 class="container" style="text-align: center">{{ data["title"] }}, {{data["session"]["username"].title()}} <div class="navbutt">
<div class="dropdown"> <div class="dropdown" style="position: relative; padding-top: 2px;">
<form action="/post" method="post" id="test"> <form action="/post" method="post" id="test">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@ -22,42 +22,28 @@
</div> </div>
</form> </form>
</div> </div>
</h1> <div style="padding-left: 2px; padding-right: 2px;">
<!-- <aside> -->
<div id="addForm">
{% include "addForm.html" %}
</div>
</div>
<!-- </aside> -->
<div class="container">
{% include "list.html" %}
</div>
<div id="logout">
<form action="/post" method="POST"> <form action="/post" method="POST">
<button type="submit" name="logout" class="btn btn-secondary"><i style="padding-top: 3px;" <button type="submit" name="logout" class="btn btn-secondary"><i class="material-icons">
class="material-icons">
exit_to_app exit_to_app
</i></button> </i></button>
</form> </form>
<div style="padding-top: 3px;">
<a href="admin">
<button onclick="window.location='admin'" class="btn btn-secondary"><i style="padding-top: 3px;"
class="material-icons">
vpn_key
</i></button></a>
</div>
<div>
</div>
</div> </div>
<!-- jQuery library --> <a href="admin">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <button onclick="window.location='admin'" class="btn btn-secondary"><i class="material-icons">
vpn_key
</i></button></a>
<h1 style="padding-left: 5px;">Welcome {{session["username"].title()}}</h1>
</div>
<div class="form">
<!-- Popper JS --> {% include "addForm.html" %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
</div>
<!-- Latest compiled JavaScript --> <div class="list">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> {% include "list.html" %}
</body> </div>
</div>
</html> </div>
</div>
{% include "footer.html" %}

52
templates/old_index.html Normal file
View File

@ -0,0 +1,52 @@
{% include "header.html" %}
<body>
<h1 class="container" style="text-align: center">{{ data["title"] }}, {{data["session"]["username"].title()}}
<div class="dropdown">
<form action="/post" method="post" id="test">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{% set id = session["list_ids"] %}
{% set actid = session["active_id"] %}
{% if actid == "0" %}
ALL
{% else %}
{{ id[actid] }}
{% endif %}
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="submit" value="0" id="" name="list">All</button>
{% for listid in data["list_ids"] %}
<button class="dropdown-item" type="submit" value="{{listid}}" name="list">{{id[listid]}}</button>
{% endfor %}
</div>
</form>
</div>
</h1>
<!-- <aside> -->
<div id="addForm">
{% include "addForm.html" %}
</div>
</div>
<!-- </aside> -->
<div class="container">
{% include "list.html" %}
</div>
<div id="logout">
<form action="/post" method="POST">
<button type="submit" name="logout" class="btn btn-secondary"><i style="padding-top: 3px;"
class="material-icons">
exit_to_app
</i></button>
</form>
<div style="padding-top: 3px;">
<a href="admin">
<button onclick="window.location='admin'" class="btn btn-secondary"><i style="padding-top: 3px;"
class="material-icons">
vpn_key
</i></button></a>
</div>
<div>
</div>
</div>