commit fe9df280727c571f78d01b63ccddccf6852f17b6
parent 208f81550eca2319f5f70c7ac61f83a579cb73e7
Author: NibbaNamedHassan <[email protected]>
Date: Mon, 27 Jun 2022 14:43:18 +0200
new UI
Diffstat:
5 files changed, 85 insertions(+), 162 deletions(-)
diff --git a/run-server.py b/run-server.py
@@ -1,4 +1,4 @@
from server.app import socket, app
if __name__ == '__main__':
- socket.run(app, "0.0.0.0", 80, debug=True)
+ socket.run(app, "0.0.0.0", 8000, debug=True)
diff --git a/server/routes.py b/server/routes.py
@@ -81,6 +81,11 @@ def index():
def about():
return render_template('about.html', title='Over ons')
+""" home.html route """
[email protected]("/home")
+def about():
+ return render_template('home.html', title='Home')
+
""" register.html route """
@app.route("/register", methods=['GET', 'POST'])
def register():
diff --git a/server/static/main.css b/server/static/main.css
@@ -1,85 +1,58 @@
-body {
- background: #fafafa;
- color: #333333;
- margin-top: 5rem;
- font-family: 'Source Sans Pro';
+body{
+ background: #eee;
}
-code {
- font-family: 'Source Code Pro';
- color: inherit;
+#side_nav{
+ background: #000;
+ width: 250px;
+ min-height: 1024px;
}
-h1, h2, h3, h4, h5, h6 {
- color: #444444;
-}
+nav{
+ margin-bottom: 10px;
-nav {
}
-nav code {
- font-size: 16pt;
+.content{
+ min-height: 100vh;
+ width: 100%;
}
+hr.h-color{
+ background:#eee
-nav a {
- color: rgb(0, 0, 0);
}
-nav a:hover {
- color: rgb(0, 0, 0);
- text-decoration: underline;
-}
+.col-7 {
-/*nav a.active {
- color: #fff;
- font-weight: 600;
-}*/
+ padding-top: 15px;
-.content-section {
- background: #ffffff;
- padding: 10px 20px;
- border: 1px solid #dddddd;
- border-radius: 3px;
- margin-bottom: 20px;
}
+.sidebar li.active{
+ background:#eee;
+ border-radius: 8px;
-.article-title {
- color: #444444;
}
-a.article-title:hover {
- color: #428bca;
- text-decoration: none;
+.sidebar li.active a, .sidebar li.active a:hover {
+color:#000
}
-.article-content {
- white-space: pre-line;
+.sidebar li a{
+color:#fff;
}
-.article-img {
- height: 65px;
- width: 65px;
- margin-right: 16px;
-}
-.article-metadata {
- padding-bottom: 1px;
- margin-bottom: 4px;
- border-bottom: 1px solid #e3e3e3
+.content-section {
+ background: #ffffff;
+ padding: 10px 20px;
+ border: 1px solid #dddddd;
+ border-radius: 3px;
+ margin-bottom: 20px;
}
-.article-metadata a:hover {
- color: #333;
- text-decoration: none;
-}
-.article-svg {
- width: 25px;
- height: 25px;
- vertical-align: middle;
-}
.account-img {
height: 125px;
@@ -100,8 +73,15 @@ a.article-title:hover {
height: 300px;
}
-#sidebar {
- min-width: 250px;
- max-width: 250px;
- min-height: 100vh;
-}
-\ No newline at end of file
+@media(max-width: 767px){
+ #side_nav{
+ margin-left: -250px;
+ position: fixed;
+ min-height: 100vh;
+ z-index: 1;
+ }
+ #side_nav.active{
+ margin-left: 0;
+ }
+ }
+
diff --git a/server/templates/home.html b/server/templates/home.html
diff --git a/server/templates/layout.html b/server/templates/layout.html
@@ -58,105 +58,40 @@
</head>
<body>
- <nav class="navbar fixed-top bg-light">
- <div class="container">
- <a class="navbar-brand" href="{{ url_for('index') }}">
- <img src="/static/logo.svg" alt="" width="50%" height="50%">
- </a>
- <ul class="nav nav-pills">
- {% if not current_user.is_authenticated %}
- <li class="nav-item">
- <a class="nav-link active" href="{{ url_for('login') }}">Login</a>
- </li>
-
- <li class="nav-item">
- <a class="nav-link" href="{{ url_for('register') }}">Registeren</a>
- </li>
- {% else %}
- <li class="nav-item">
- <a class="nav-link active" href="{{ url_for('logout') }}">Logout</a>
- </li>
- {% endif %}
- </ul>
- </div>
- </nav>
-
- <div class="container" style="padding-top:20px;">
- <div class="row">
- <!-- sidebar -->
- <div class="col-3">
- <ul class="nav nav-pills flex-column nav-justified">
- {% if current_user.is_authenticated %}
- <!--<li class="nav-item">
- <a class="nav-link" href="{{ url_for('account') }}"><b>{{current_user.name}}</b></a>
- </li>-->
- <li class="nav-item">
- <a class="nav-link" href="{{ url_for('traps') }}">Dashboard</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="{{ url_for('trap_connect') }}">Koppel een val</a>
- </li>
- {% if current_user.contact %}
- <li class="nav-item">
- <a class="nav-link" href="{{ url_for('contact') }}">Contact opnemen</a>
- </li>
- {% endif %}
- {% if current_user.type.name == 'ADMIN' %}
- <li class="nav-item">
- <a class="nav-link" href="{{ url_for('admin') }}">Gebruikers beheerden</a>
- </li>
- {% endif %}
- {% endif %}
- <li class="nav-item">
- <a class="nav-link" href="{{ url_for('about') }}">Over ons</a>
- </li>
- {% if current_user.is_authenticated %}
- <div class="dropdown-divider"></div>
- <div class="dropdown">
- <li class="nav-item">
- <a class="nav-link dropdown-toggle" href="#" role="button" id="account-dropdown"
- data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
- <b>{{current_user.name}}</b>
- </a>
-
- <div class="dropdown-menu" aria-labelledby="account-dropdown">
- <a class="dropdown-item" href="{{ url_for('account') }}">Instellingen</a>
- <div class="dropdown-divider"></div>
- <a class="dropdown-item" href="{{ url_for('logout') }}">Uitloggen</a>
- </div>
- </li>
- </div>
- {% endif %}
- </ul>
- </div>
- <!--
- <ul class="nav nav-pills flex-column" id="myTab" role="tablist">
- <li class="nav-item">
- <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
- </li>
- </ul>
+
+
+ <div class="main-container d-flex">
+ <div class="sidebar" id="side_nav">
+ <div class="header-box px-2 pt-3 pb-4">
+ <h1 class="fs-4"><span class="bg-white text-dark rounded shadow px-2 me-2">B</span> <span class="text-white">BENNI</span></h1>
- <div class="tab-content">
- <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...1</div>
- <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">..2.</div>
- <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">.4..</div>
- <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">.3..</div>
- </div>
- -->
- <script>
- $(function () {
- $('#myTab li:last-child a').tab('show')
- })
- </script>
+ </div>
+
+ <ul class="list-unstyled px-2">
+ {% if current_user.is_authenticated %}
+ <li class=""><a href="{{ url_for('traps') }}" class="text-decoration-none px-3 py-2 d-block"><i class="far fa-tachometer-alt"></i>Dashboard</a></li>
+ <li class=""><a href="{{ url_for('trap_connect') }}" class="text-decoration-none px-3 py-2 d-block"><i class="far fa-plug"></i>Koppel een val</a></li>
+ <li class=""><a href="{{ url_for('contact') }}" class="text-decoration-none px-3 py-2 d-block"><i class="far fa-address-book"></i>Contact opnemen</a></li>
+ {% endif %}
+
+ <li class=""><a href="#" class="text-decoration-none px-3 py-2 d-block"><i class="far fa-map-marker-question"></i>Home</a></li>
+ <li class=""><a href="{{ url_for('about') }}" class="text-decoration-none px-3 py-2 d-block"><i class="far fa-map-marker-question"></i>Over ons</a></li>
+
+ </ul>
+ <hr class="h-color mx-2">
+
+ <ul class="list-unstyled px-2">
+ {% if current_user.is_authenticated %}
+ <li class=""><a href="{{ url_for('account') }}" class="text-decoration-none px-3 py-2 d-block"><i class="far fa-cogs"></i>Instellingen</a></li>
+ <li class=""><a href="{{ url_for('logout') }}" class="text-decoration-none px-3 py-2 d-block"><i class="fas fa-sign-out"></i>Uitloggen</a></li>
+ {% else %}
+ <li class=""><a href="{{ url_for('login') }}" class="text-decoration-none px-3 py-2 d-block"><i class="fas fa-sign-out"></i>Inloggen</a></li>
+ <li class=""><a href="{{ url_for('register') }}" class="text-decoration-none px-3 py-2 d-block"><i class="fas fa-sign-out"></i>Registeren</a></li>
+ {% endif %}
+ </ul>
+ <hr class="h-color mx-2">
+
+ </div>
<!-- content-->
<div class="col-7">
{% for category, message in get_flashed_messages(with_categories=true) %}
@@ -166,8 +101,12 @@
{% endfor %}
{% block content %}{% endblock %}
</div>
- </div>
- </div>
+
+
+ <script> src="https:://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"</script>
+ <script> src="https://ajax/googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"</script>
+
+
</body>
</html>
\ No newline at end of file
