raphael/calendarwatch_frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

adds favicon, changes menu

Browse Source
This commit is contained in:
Raphael Maenle 2020-05-21 10:18:40 +02:00
parent 4a8ac52201
commit 934c4f2a1d
8 changed files with 78 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app.db
View File

Binary file not shown.

BIN
docker/calendarwatch/.docker-entrypoint.sh.swp
View File

Binary file not shown.

3
docker/calendarwatch/docker-entrypoint.sh
View File

@ -2,9 +2,6 @@
cd /home/calendarwatch
# uwsgi --http-socket 0.0.0.0:8084 -w wsgi --protocol=https
python3 routine.py &
echo "routine has been started"
python3 server.py
echo "server has been started"

55
server/static/css/main.css
View File

@ -12,6 +12,61 @@
width: 200px;
}
/* top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
.topnav a {
float: left;
display: flex;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add an active class to highlight the current page */
.topnav a.active {
background-color: #4CAF50;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
/* The sidebar menu */
.sidenav {
height: 100%; /* Full-height: remove this if you want "auto" height */

9
server/static/js/index.js
View File

@ -0,0 +1,9 @@
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function menuBars() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}

BIN
server/static/res/favicon.ico Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

3
server/template/base.html
View File

@ -6,7 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="/static/css/main.css">
<title>Index</title>
<link rel="shortcut icon" type="image/jpg" href="/static/res/favicon.ico"/>
<title>Longitude</title>
</head>
<body>

12
server/template/sidebar.html
View File

@ -5,27 +5,33 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" type="image/jpg" href="/static/res/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="/static/css/main.css">
<script src="static/js/jquery-3.5.0.min.js"></script>
<script type="text/javascript" src="static/js/index.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="static/css/colorPick.css">
<!-- OPTIONAL DARK THEME -->
<link rel="stylesheet" href="static/css/colorPick.dark.theme.css">
<script src="static/js/colorPick.js"></script>
<title>Index</title>
<title>Logitude</title>
</head>
<body>
<!-- Side navigation -->
<div class="sidenav">
<div class="topnav" id="myTopnav">
<a href="/view">View</a>
<a href="/calendar">Calendar</a>
<a href="/account">Account</a>
<a href="/devices">Devices</a>
</div>
<a href="javascript:void(0);" class="icon" onclick="menuBars()">
<i class="fa fa-bars"></i>
</a>
</div>
<!-- Page content -->
<div class="main">