Skip to content
GitLab
Commit 1aef9a7a authored by dorothee.kueppers's avatar dorothee.kueppers
Browse files

Zwischenstand selection Seite

parent f771b73e
Hide whitespace changes
Inline Side-by-side
oos_2020_todo/settings.py
View file @ 1aef9a7a
......@@ -125,3 +125,8 @@ RECURRENCE_USE_TZ = True
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
# STATICFILES_DIRS = [
# os.path.join(BASE_DIR, "static"),
# # '/var/www/static/',
# ]
oos_2020_todo/urls.py
View file @ 1aef9a7a
......@@ -14,9 +14,11 @@ Including another URLconf
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.conf.urls import url
from django.conf.urls.static import static
from django.contrib import admin
from django.urls import path
from django.views.i18n import JavaScriptCatalog
from django.conf import settings
from todo.views import get_landing_page, get_selection_page, add_todo, get_impressum, get_show_todo, get_archiv
......@@ -31,9 +33,12 @@ urlpatterns = [
path('todo/archiv', get_archiv, name='archv'),
]
if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
# according to https://django-recurrence.readthedocs.io/en/latest/installation.html
js_info_dict = {
'packages': ('recurrence', ),
'packages': ('recurrence',),
}
urlpatterns += [
......
static/css/main.css
View file @ 1aef9a7a
......@@ -2,7 +2,56 @@
/* background: lightgrey;*/
/*}*/
div.form-control.recurrence-widget{
div.form-control.recurrence-widget {
height: max-content;
margin-bottom: 16px;
}
.list-group-item.select-todo-grid {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
}
.select-todo-grid .todo-text {
grid-column-start: 1;
}
.select-todo-grid .todo-due {
grid-row-start: 2;
grid-column-start: 2;
font-size: small;
justify-self: end;
width: fit-content;
}
.select-todo-grid .todo-duration {
grid-column-start: 2;
justify-self: end;
width: fit-content;
}
.todo-late {
background: indianred;
color: floralwhite;
}
.todo-late:hover, .todo-late:active,
.todo-today:hover, .todo-today:active {
color: darkslategray;
}
.todo-soon:hover, .todo-soon:active,
.todo-someday:hover, .todo-someday:active {
color: darkslategray;
}
.todo-today {
background: orange;
color: floralwhite;
}
.todo-soon, .todo-someday {
background: darkseagreen;
color: floralwhite;
}
\ No newline at end of file
templates/todo/base.html
View file @ 1aef9a7a
......@@ -9,7 +9,6 @@
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
<link rel="stylesheet" href="{% static 'css/main.css' %}">
<script type='text/javascript' src={% static 'js/selectionpage.js' %}></script>
</head>
<body>
{# fix for https://github.com/django-recurrence/django-recurrence/issues/47 #}
......@@ -68,6 +67,7 @@
<nav class="navbar fixed-bottom navbar-light bg-light">
<a class="navbar-brand" href="/impressum">Impressum</a>
</nav>
<script type='text/javascript' src={% static 'js/selectionpage.js' %}></script>
{% endblock %}
</body>
</html>
\ No newline at end of file
templates/todo/selection_page.html
View file @ 1aef9a7a
......@@ -3,11 +3,11 @@
{% load bootstrap4 %}
{% block content %}
<script src='../../todo/static/js/selectionpage.js'></script>
<script type="text/javascript"></script>
<div class="row">
<form action="" enctype="multipart/form-data" method="POST">
{% csrf_token %}
<div class="col-sm todo-box">
<div class="col-sm" class="todo-box">
<form action="" enctype="multipart/form-data" method="POST">
{% csrf_token %}
<div class="row justify-content-center">
<h3>Wie viel Zeit hast du?</h3>
</div>
......@@ -17,15 +17,29 @@
<div class="row justify-content-center">
<input type="submit" class="btn btn-danger" value="submit">
</div>
</div>
</form>
<div>
<ul class="list-group">
<li class="list-group-item">Meine todos</li>
{% for todo in todos_selection %}
<div class="todo-text">{{ todo.0.text }}</div>
<div class="todo-due">{{ todo.1 }}</div>
<div class="todo-duration">{{ todo.0.duration }} Minuten</div>
{% endfor %}
</ul>
</div>
</form>
</div>
<div class="col-sm" id="todo-choices">
<div class="row justify-content-center">
<h3>Welche Todos willst du gleich erledigen?</h3>
</div>
<div class="row justify-content-center">
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<div class="card-header todo-late" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne"
<button class="btn btn-link todo-late" data-toggle="collapse" data-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">
Dinge, die eigentlich schon getan sein sollten
</button>
......@@ -34,19 +48,25 @@
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
data-parent="#accordion">
<div class="card-body">
<div class="card-body" id="body-late">
<div class="list-group list group-flush">
{% for todo in todos_late %}
<li class="list-group-item">{{ todo.0.text }}, {{ todo.1 }}</li>
<div class="list-group-item list-group-item-action select-todo-grid">
<div class="todo-text">{{ todo.0.text }}</div>
<div class="todo-due">{{ todo.1 }}</div>
<div class="todo-duration">{{ todo.0.duration }} Minuten</div>
<div class="todo-id" hidden>{{ todo.0.id }}</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<div class="card-header todo-today" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo"
<button class="btn btn-link collapsed todo-today" data-toggle="collapse"
data-target="#collapseTwo"
aria-expanded="false" aria-controls="collapseTwo">
Dinge, die heute zu erledigen sind
</button>
......@@ -54,20 +74,23 @@
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
<ul class="list-group list group-flush">
<div class="list-group list group-flush">
{% for todo in todos_today %}
<button type="button" class="list-group-item list-group-item-action">
{{ todo.0.text }}, {{ todo.1 }}
</button>
<div class="list-group-item list-group-item-action select-todo-grid">
<div class="todo-text">{{ todo.0.text }}</div>
<div class="todo-due">{{ todo.1 }}</div>
<div class="todo-duration">{{ todo.0.duration }} Minuten</div>
<div class="todo-id" hidden>{{ todo.0.id }}</div>
</div>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<div class="card-header todo-soon" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse"
<button class="btn btn-link collapsed todo-soon" data-toggle="collapse"
data-target="#collapseThree" aria-expanded="false"
aria-controls="collapseThree">
Dinge, die bald zu erledigen sind
......@@ -77,18 +100,23 @@
<div id="collapseThree" class="collapse" aria-labelledby="headingThree"
data-parent="#accordion">
<div class="card-body">
<ul class="list-group list group-flush">
<div class="list-group list group-flush">
{% for todo in todos_soon %}
<li class="list-group-item">{{ todo.0.text }}, {{ todo.1 }}</li>
<div class="list-group-item list-group-item-action select-todo-grid">
<div class="todo-text">{{ todo.0.text }}</div>
<div class="todo-due">{{ todo.1 }}</div>
<div class="todo-duration">{{ todo.0.duration }} Minuten</div>
<div class="todo-id" hidden>{{ todo.0.id }}</div>
</div>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingFour">
<div class="card-header todo-someday" id="headingFour">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse"
<button class="btn btn-link collapsed todo-someday" data-toggle="collapse"
data-target="#collapseFour" aria-expanded="false"
aria-controls="collapseFour">
Dinge, die keinen Zeitdruck haben
......@@ -100,7 +128,10 @@
<div class="card-body">
<ul class="list-group list group-flush">
{% for todo in todos_someday %}
<li class="list-group-item">{{ todo.text }}</li>
<div class="list-group-item list-group-item-action select-todo-grid">
<div class="todo-text">{{ todo.text }}</div>
<div class="todo-id" hidden>{{ todo.id }}</div>
</div>
{% endfor %}
</ul>
</div>
......
todo/static/css/main.css
View file @ 1aef9a7a
......@@ -2,7 +2,56 @@
/* background: lightgrey;*/
/*}*/
div.form-control.recurrence-widget{
div.form-control.recurrence-widget {
height: max-content;
margin-bottom: 16px;
}
.list-group-item.select-todo-grid {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
}
.select-todo-grid .todo-text {
grid-column-start: 1;
}
.select-todo-grid .todo-due {
grid-row-start: 2;
grid-column-start: 2;
font-size: small;
justify-self: end;
width: fit-content;
}
.select-todo-grid .todo-duration {
grid-column-start: 2;
justify-self: end;
width: fit-content;
}
.todo-late {
background: indianred;
color: floralwhite;
}
.todo-late:hover, .todo-late:active,
.todo-today:hover, .todo-today:active {
color: darkslategray;
}
.todo-soon:hover, .todo-soon:active,
.todo-someday:hover, .todo-someday:active {
color: darkslategray;
}
.todo-today {
background: orange;
color: floralwhite;
}
.todo-soon, .todo-someday {
background: darkseagreen;
color: floralwhite;
}
\ No newline at end of file
todo/static/js/selectionpage.js
View file @ 1aef9a7a
$('#todo-choices').visibility = false;
\ No newline at end of file
// hide todo elements before setting timer
// $('#todo-choices').hide();
let element;
//event listener for choosing todos
$('.select-todo-grid').on('click', e => {
let node = e.target.closest(".select-todo-grid");
let id = node.lastElementChild.textContent;
let group = node.parentElement.id;
switch (group) {
case 'todo-late':
break;
default:
}
let clonedNode = node.cloneNode(true)
node.style.display = "none";
});
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment