Skip to content

Commit 6df43d0

Browse files
jakuboskerajakuboskera
committed
feat: create simple UI for displaying tasks
1 parent d54748e commit 6df43d0

31 files changed

+30659
-1
lines changed

‎app/main/templates/index.html

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta name="description" content="TODO is a simple API with swagger documentation" />
8+
<title>TODO</title>
9+
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/toggle-bootstrap.css') }}">
10+
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/toggle-bootstrap-dark.css') }}">
11+
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/toggle-bootstrap-print.css') }}">
12+
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/all.min.css') }}" />
13+
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/main.css') }}" />
14+
</head>
15+
16+
<body class="bootstrap">
17+
<div class="dark-mode text-right mt-3 mb-5">
18+
<span class="icon-sun"></span>
19+
<label class="switch">
20+
<input type="checkbox" onclick="SwapThemes();" id="toggle-dark-mode">
21+
<span class="slider round"></span>
22+
</label>
23+
<span class="icon-moon-o mr-4"></span>
24+
25+
<span class="git-logo text-right mr-4"> <a href="https://github.com/jakuboskera/todo" target="_blank" rel="noopener noreferrer"><span class="fab fa-git-alt"></span
26+
></a></span>
27+
</div>
28+
<div class="row justify-content-center">
29+
<div class="col-md-6 text-center mb-5">
30+
<h1 class="heading-section">
31+
&#9745; TODO
32+
</h1>
33+
</div>
34+
</div>
35+
<div class="row justify-content-center">
36+
<div class="col-md-6 col-lg-4">
37+
{% if tasks | length > 0 %}
38+
<ul class="list-group list-group-flush ">
39+
{% for task in tasks %}
40+
<li class="list-group-item">{{ task.text }}</li>
41+
{% endfor %}
42+
</ul>
43+
{% else %}
44+
<h4 class="text-center">Nothing to do &#129303;</h4> {% endif %}
45+
</div>
46+
</div>
47+
</div>
48+
<footer class="fixed-bottom">
49+
<div class="footer-copyright text-center py-3 bg-light">
50+
<a href="/api/v1" class="nav-item nav-link">API v1</a> Made with <span style="color:#ec3935;">&#9829;</span> by
51+
<a href="https://github.com/jakuboskera" target="_blank" rel="noopener noreferrer">@jakuboskera</a>
52+
</div>
53+
</footer>
54+
<script src="{{ url_for('static', filename='js/jquery-3.5.1.slim.min.js') }}"></script>
55+
<script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
56+
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
57+
</body>
58+
59+
</html>

‎app/main/views.py

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
from flask import Blueprint
22
from flask import render_template
33

4+
from app.api.tasks import TaskList
5+
46
blueprint = Blueprint("main", __name__, template_folder="templates")
57

68

79
@blueprint.route("/")
810
def home():
9-
return '<p><a href="/api/v1">Go to API specification</a></p>'
11+
return render_template("index.html", tasks=TaskList().get())

‎app/static/css/all.min.css

+4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/static/css/main.css

+150
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
.switch {
2+
position: relative;
3+
display: inline-block;
4+
width: 53px;
5+
height: 30px;
6+
margin: 0px !important;
7+
}
8+
9+
.switch input {
10+
opacity: 0;
11+
width: 0;
12+
height: 0;
13+
}
14+
15+
.slider {
16+
position: absolute;
17+
cursor: pointer;
18+
top: 0;
19+
left: 0;
20+
right: 0;
21+
bottom: 0;
22+
background-color: #ccc;
23+
-webkit-transition: .4s;
24+
transition: .4s;
25+
}
26+
27+
.slider:before {
28+
position: absolute;
29+
content: "";
30+
height: 23px;
31+
width: 23px;
32+
left: 3.5px;
33+
bottom: 3.5px;
34+
background-color: white;
35+
-webkit-transition: .4s;
36+
transition: .4s;
37+
}
38+
39+
input:checked+.slider {
40+
background-color: #027BFF;
41+
}
42+
43+
input:focus+.slider {
44+
box-shadow: 0 0 1px #027BFF;
45+
}
46+
47+
input:checked+.slider:before {
48+
-webkit-transform: translateX(23px);
49+
-ms-transform: translateX(23px);
50+
transform: translateX(23px);
51+
}
52+
53+
.slider.round {
54+
border-radius: 30px;
55+
}
56+
57+
.slider.round:before {
58+
border-radius: 50%;
59+
}
60+
61+
.dark-mode {
62+
font-size: 24px;
63+
text-align: center;
64+
}
65+
66+
@font-face {
67+
font-family: 'icomoon';
68+
src: url('../fonts/icomoon.eot?q8c1il');
69+
src: url('../fonts/icomoon.eot?q8c1il#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?q8c1il') format('truetype'), url('../fonts/icomoon.woff?q8c1il') format('woff'), url('../fonts/icomoon.svg?q8c1il#icomoon') format('svg');
70+
font-weight: normal;
71+
font-style: normal;
72+
font-display: block;
73+
}
74+
75+
[class^="icon-"],
76+
[class*=" icon-"] {
77+
/* use !important to prevent issues with browser extensions that change fonts */
78+
font-family: 'icomoon' !important;
79+
speak: never;
80+
font-style: normal;
81+
font-weight: normal;
82+
font-variant: normal;
83+
text-transform: none;
84+
line-height: 1;
85+
/* Better Font Rendering =========== */
86+
-webkit-font-smoothing: antialiased;
87+
-moz-osx-font-smoothing: grayscale;
88+
}
89+
90+
.icon-moon-o:before {
91+
content: "\e900";
92+
}
93+
94+
.icon-sun:before {
95+
content: "\e9d4";
96+
}
97+
98+
.bootstrap-dark .navbar-toggler-icon {
99+
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
100+
}
101+
102+
.bootstrap .navbar-toggler-icon {
103+
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
104+
}
105+
106+
@media (max-width: 991.98px) {
107+
.dark-mode {
108+
margin-top: 10px;
109+
}
110+
}
111+
112+
body {
113+
margin: 0;
114+
font-size: 1rem;
115+
font-weight: 400;
116+
line-height: 1.5;
117+
color: #fff;
118+
text-align: left;
119+
height: 100vh;
120+
background-position: center;
121+
background-repeat: no-repeat;
122+
background-size: cover
123+
}
124+
125+
.heading-section {
126+
font-size: 48px;
127+
}
128+
129+
.git-logo span {
130+
font-size: 40px;
131+
/* color: #fff; */
132+
padding-top: 16px;
133+
transition: .3s all ease
134+
}
135+
136+
.bootstrap .git-logo span:hover {
137+
color: #0e1c42
138+
}
139+
140+
.bootstrap-dark .git-logo span:hover {
141+
color: #027BFF
142+
}
143+
144+
.fixed-bottom {
145+
position: fixed;
146+
right: 0;
147+
bottom: 0;
148+
left: 0;
149+
z-index: 1030
150+
}

0 commit comments

Comments
 (0)