templates, css & views nochmal überarbeitet

mensaviewer/templates/comment/delete.html

@@ -1,5 +1,10 @@
 {% extends 'base.html' %}
 
+
+{% block title %}Delete Comment{% endblock %}
+
+{% block header %}<h1>Delete comment by {{ object.author }}</h1>{% endblock %}
+
 {% block content %}
 
 <form class="model-form" method="post">

mensaviewer/templates/comment/detail.html

@@ -1,12 +1,18 @@
 {% extends 'base.html' %}
 
+
+{% block title %}Comment{% endblock %}
+
+{% block header %}<h1>Comment by {{ comment.author }}</h1>{% endblock %}
+
 {% block content %}
 
 <div class="detail-container">
-  <h1>By {{ comment.author }}</h1>
-  <h3>Timestamp: {{ comment.timestamp }}</h3>
   <h3>Menu: <a href="{% url 'mensaviewer:menu_detail' comment.menu.pk %}">{{ comment.menu.name }}</a></h3>
-  <h3>Text: {{ comment.text }}</h3>
+  <p>Timestamp: {{ comment.timestamp }}</p>
+  <hr>
+  <p>Text: </p>
+  <p>{{ comment.text }}</p>
 </div>
 
 {% endblock %}

mensaviewer/templates/comment/edit.html

@@ -1,5 +1,10 @@
 {% extends 'base.html' %}
 
+
+{% block title %}Edit Comment{% endblock %}
+
+{% block header %}<h1>Edit Comment</h1>{% endblock %}
+
 {% block content %}
 
 <form class="model-form" method="post">

mensaviewer/templates/comment/list.html

@@ -1,8 +1,11 @@
 {% extends 'base.html' %}
 
-{% block content %}
 
-<h1>Comments</h1>
+{% block title %}Comments{% endblock %}
+
+{% block header %}<h1>Comments</h1>{% endblock %}
+
+{% block content %}
 
 <table class="comment-list">
   <tr>
@@ -11,6 +14,7 @@
     </td>
   </tr>
   <tr>
+    <th>Text</th>
     <th>Author</th>
     <th>Timestamp</th>
     <th>Menu</th>
@@ -19,8 +23,9 @@
   </tr>
   {% for comment in object_list %}
   <tr>
+    <td><a href="{% url 'mensaviewer:comment_detail' comment.pk %}">{{ comment.text }}</a></td>
     <td>{{ comment.author }}</td>
-    <td>{{ comment.timestamp }}</td>
+    <td class="fit-width">{{ comment.timestamp }}</td>
     <td><a href="{% url 'mensaviewer:menu_detail' comment.menu.pk %}">{{ comment.menu }}</a></td>
     <td class="fit-width"><a href="{% url 'mensaviewer:comment_update' comment.pk %}">Edit</a></td>
     <td class="fit-width"><a href="{% url 'mensaviewer:comment_delete' comment.pk %}">Delete</a></td>

mensaviewer/templates/custom.html

@@ -16,6 +16,7 @@
     </label>
     {% endfor %}
   </div>
+  <hr>
   <div class="status-filter">
     {% for status_value in status_values %}
     <label>
@@ -24,6 +25,7 @@
     </label>
     {% endfor %}
   </div>
+  <hr>
   <div class="location-filter">
     {% for location in locations %}
     <label>
@@ -41,15 +43,19 @@
     <h2>{{ day }}</h2>
 
     {% for menu in menus %}
-    <div class="menu {% if menu.mensa_id == 1 %}a-mensa{% elif menu.mensa_id == 6 %}b-mensa{% endif %}">
-      <a href="{% url 'mensaviewer:menu_detail' menu.pk %}">{{ menu.name }}</a>
-      <p>{{ menu.art }}</p>
-      <p>{{ menu.price }}</p>
+    <div class="menu">
+      <p>{{ menu.art }} - <a href="{% url 'mensaviewer:location_detail' menu.location.pk %}">{{ menu.location.name }}</a></p>
+      <hr>
+      <h4><a href="{% url 'mensaviewer:menu_detail' menu.pk %}">{{ menu.name }}</a></h4>
+      <h5>{{ menu.price }}</h5>
       <p>{{ menu.types }}</p>
       <p>{{ menu.allergens }}</p>
-      <p>{{ menu.likes }}</p>
-      <a href="{% url 'mensaviewer:like' menu.pk %}?next={{ request.path }}">Like</a>
-      <a href="{% url 'mensaviewer:dislike' menu.pk %}?next={{ request.path }}">Dislike</a>
+      <hr>
+      <p>Rating: {{ menu.likes }}</p>
+      <p>
+        <a href="{% url 'mensaviewer:like' menu.pk %}?next={{ request.path }}">Like</a> |
+        <a href="{% url 'mensaviewer:dislike' menu.pk %}?next={{ request.path }}">Dislike</a>
+      </p>
     </div>
     {% endfor %}
 

mensaviewer/templates/flensburg.html

@@ -16,6 +16,7 @@
     </label>
     {% endfor %}
   </div>
+  <hr>
   <div class="status-filter">
     {% for status_value in status_values %}
     <label>
@@ -34,15 +35,18 @@
 
     {% for menu in menus %}
     <div class="menu {% if menu.location.mensa_id == '1' %}a-mensa{% elif menu.location.mensa_id == '6' %}b-mensa{% endif %}">
-      <p>{{ menu.art }} - {{ menu.location.name }}</p>
+      <p>{{ menu.art }} - <a href="{% url 'mensaviewer:location_detail' menu.location.pk %}">{{ menu.location.name }}</a></p>
       <hr>
       <h4><a href="{% url 'mensaviewer:menu_detail' menu.pk %}">{{ menu.name }}</a></h4>
-      <p>{{ menu.price }}</p>
+      <h5>{{ menu.price }}</h5>
       <p>{{ menu.types }}</p>
       <p>{{ menu.allergens }}</p>
-      <a href="{% url 'mensaviewer:like' menu.pk %}?next={{ request.path }}">Like</a>
-      <span>{{ menu.likes }}</span>
-      <a href="{% url 'mensaviewer:dislike' menu.pk %}?next={{ request.path }}">Dislike</a>
+      <hr>
+      <p>Rating: {{ menu.likes }}</p>
+      <p>
+        <a href="{% url 'mensaviewer:like' menu.pk %}?next={{ request.path }}">Like</a> |
+        <a href="{% url 'mensaviewer:dislike' menu.pk %}?next={{ request.path }}">Dislike</a>
+      </p>
     </div>
     {% endfor %}
 

mensaviewer/templates/location/delete.html

@@ -1,5 +1,10 @@
 {% extends 'base.html' %}
 
+
+{% block title %}Delete Location{% endblock %}
+
+{% block header %}<h1>Delete location {{ object.name }}</h1>{% endblock %}
+
 {% block content %}
 
 <form class="model-form" method="post">

mensaviewer/templates/location/detail.html

@@ -1,28 +1,64 @@
 {% extends 'base.html' %}
 
+
+{% block title %}{{ location.city }} |{{ location.name }}{% endblock %}
+
+{% block header %}<h1>{{ location.city }} |{{ location.name }}</h1>{% endblock %}
+
 {% block content %}
 
 <div class="detail-container">
-  <h1>{{ location.name }}</h1>
-  <h3>City: {{ location.city }}</h3>
-  <h3>ID: {{ location.mensa_id }}</h3>
-  <a href="{% url 'mensaviewer:news_add' location.pk %}">Add News</a>
-  <a href="{% url 'mensaviewer:menu_add' location.pk %}">Add Menu</a>
+  <p>
+    <a class="btn" href="{% url 'mensaviewer:news_add' location.pk %}">Add News</a>
+    <a class="btn" href="{% url 'mensaviewer:menu_add' location.pk %}">Add Menu</a>
+    <a class="btn" href="{% url 'mensaviewer:location_update' location.pk %}">Edit</a>
+    <a class="btn" href="{% url 'mensaviewer:location_delete' location.pk %}">Delete</a>
+  </p>
   <div class="related-items">
     <h2>News</h2>
-    {% for news_article in location.news_articles %}
-    <div class="news-article">
-      <h3><a href="{% url 'mensaviewer:news_detail' news_article.pk %}">{{ news_article.title }}</a></h3>
-    </div>
-    {% endfor %}
+
+    <table class="news-list">
+      <tr>
+        <th>Title</th>
+        <th>Author</th>
+        <th>Timestamp</th>
+        <th>Menu</th>
+        <th></th>
+        <th></th>
+      </tr>
+      {% for newsarticle in location.news_articles %}
+      <tr>
+        <td><a href="{% url 'mensaviewer:news_detail' newsarticle.pk %}">{{ newsarticle.title }}</a></td>
+        <td>{{ newsarticle.author }}</td>
+        <td>{{ newsarticle.timestamp }}</td>
+        <td><a href="{% url 'mensaviewer:location_detail' newsarticle.location.pk %}">{{ newsarticle.location.city }} - {{ newsarticle.location.name }}</a></td>
+        <td class="fit-width"><a href="{% url 'mensaviewer:news_update' newsarticle.pk %}">Edit</a></td>
+        <td class="fit-width"><a href="{% url 'mensaviewer:news_delete' newsarticle.pk %}">Delete</a></td>
+      </tr>
+      {% endfor %}
+    </table>
   </div>
   <div class="related-items">
     <h2>Menus</h2>
-    {% for menu in location.menus %}
-    <div class="menu">
-      <h3><a href="{% url 'mensaviewer:menu_detail' menu.pk %}">{{ menu.name }}</a></h3>
-    </div>
-    {% endfor %}
+
+    <table class="menu-list">
+      <tr>
+        <th>Name</th>
+        <th>Location</th>
+        <th>Day</th>
+        <th>Edit</th>
+        <th>Delete</th>
+      </tr>
+      {% for menu in location.menus %}
+      <tr>
+        <td><a href="{% url 'mensaviewer:menu_detail' menu.pk %}">{{ menu.name }}</a></td>
+        <td><a href="{% url 'mensaviewer:location_detail' menu.location.pk %}">{{ menu.location.name }}</a></td>
+        <td>{{ menu.day }}</td>
+        <td class="fit-width"><a href="{% url 'mensaviewer:menu_update' menu.pk %}">Edit</a></td>
+        <td class="fit-width"><a href="{% url 'mensaviewer:menu_delete' menu.pk %}">Delete</a></td>
+      </tr>
+      {% endfor %}
+    </table>
   </div>
 </div>
 

mensaviewer/templates/location/edit.html

@@ -1,5 +1,10 @@
 {% extends 'base.html' %}
 
+
+{% block title %}Edit Location{% endblock %}
+
+{% block header %}<h1>Edit location {{ object.name }}</h1>{% endblock %}
+
 {% block content %}
 
 <form class="model-form" method="post">

mensaviewer/templates/location/list.html

@@ -1,8 +1,11 @@
 {% extends 'base.html' %}
 
-{% block content %}
 
-<h1>Locations</h1>
+{% block title %}Locations{% endblock %}
+
+{% block header %}<h1>Locations</h1>{% endblock %}
+
+{% block content %}
 
 <table class="location-list">
   <tr>

mensaviewer/templates/menu/delete.html

@@ -1,5 +1,10 @@
 {% extends 'base.html' %}
 
+
+{% block title %}Delete Menu{% endblock %}
+
+{% block header %}<h1>Delete menu {{ object.name }}</h1>{% endblock %}
+
 {% block content %}
 
 <form class="model-form" method="post">

mensaviewer/templates/menu/detail.html

@@ -1,27 +1,68 @@
 {% extends 'base.html' %}
 
+
+{% block title %}{{ menu.name }}{% endblock %}
+
+{% block header %}<h1>{{ menu.name }}</h1>{% endblock %}
+
 {% block content %}
 
 <div class="detail-container">
-  <h1>{{ menu.name }}</h1>
-  <p>Art: {{ menu.art }}</p>
-  <p>Price for Students: {{ menu.get_price.Student }}</p>
-  <p>Price for Employees: {{ menu.get_price.Employee }}</p>
-  <p>Price for Guests: {{ menu.get_price.Guest }}</p>
-  <p>Allergens: {{ menu.get_allergens }}</p>
-  <p>Types: {{ menu.get_types }}</p>
-  <p>Rating: {{ menu.likes }}</p>
-  <p>Location and Date: {{ menu.location.city }} {{ menu.location.name }} | {{ menu.day }}</p>
-  <a href="{% url 'mensaviewer:like' menu.id %}?next={{ request.path }}">Like</a>
-  <a href="{% url 'mensaviewer:dislike' menu.id %}?next={{ request.path }}">Dislike</a>
-  <a href="{% url 'mensaviewer:comment_add' menu.id %}">Comment</a>
+  <p>
+    <a class="btn" href="{% url 'mensaviewer:like' menu.id %}?next={{ request.path }}">Like</a>
+    <a class="btn" href="{% url 'mensaviewer:dislike' menu.id %}?next={{ request.path }}">Dislike</a>
+    <a class="btn" href="{% url 'mensaviewer:comment_add' menu.id %}">Comment</a>
+  </p>
+  <h3>Prices</h3>
+  <table>
+    <tr>
+      <th>Students</th>
+      <th>Employees</th>
+      <th>Guests</th>
+    </tr>
+    <tr>
+      <td>{{ menu.get_price.Student }}</td>
+      <td>{{ menu.get_price.Employee }}</td>
+      <td>{{ menu.get_price.Guest }}</td>
+    </tr>
+  </table>
+  <h4>Art</h4>
+  <p>{{ menu.art }}</p>
+  <hr>
+  <h4>Allergens</h4>
+  <p>{{ menu.get_allergens }}</p>
+  <hr>
+  <h4>Types</h4>
+  <p>{{ menu.get_types }}</p>
+  <hr>
+  <h4>Rating</h4>
+  <p>{{ menu.likes }}</p>
+  <hr>
+  <h4>Location and Date</h4>
+  <p><a href="{% url 'mensaviewer:location_detail' menu.location.pk %}">{{ menu.location.city }} {{ menu.location.name }}</a> | {{ menu.day }}</p>
+  <hr>
   <div class="related-items">
-    {% for comment in menu.comments %}
-    <div class="comment">
-      <h3>{{ comment.author }}</h3>
-      <p>{{ comment.text }}</p>
-    </div>
-    {% endfor %}
+    <h3>Comments</h3>
+    <table class="comment-list">
+      <tr>
+        <th>Text</th>
+        <th>Author</th>
+        <th>Timestamp</th>
+        <th>Menu</th>
+        <th></th>
+        <th></th>
+      </tr>
+      {% for comment in menu.comments %}
+      <tr>
+        <td><a href="{% url 'mensaviewer:comment_detail' comment.pk %}">{{ comment.text }}</a></td>
+        <td>{{ comment.author }}</td>
+        <td class="fit-width">{{ comment.timestamp }}</td>
+        <td><a href="{% url 'mensaviewer:menu_detail' comment.menu.pk %}">{{ comment.menu }}</a></td>
+        <td class="fit-width"><a href="{% url 'mensaviewer:comment_update' comment.pk %}">Edit</a></td>
+        <td class="fit-width"><a href="{% url 'mensaviewer:comment_delete' comment.pk %}">Delete</a></td>
+      </tr>
+      {% endfor %}
+    </table>
   </div>
 </div>
 

mensaviewer/templates/menu/edit.html

@@ -1,5 +1,10 @@
 {% extends 'base.html' %}
 
+
+{% block title %}Edit Menu{% endblock %}
+
+{% block header %}<h1>Edit Menu {{ object.name }}</h1>{% endblock %}
+
 {% block content %}
 
 <form class="model-form" method="post">

mensaviewer/templates/menu/list.html

@@ -1,8 +1,11 @@
 {% extends 'base.html' %}
 
-{% block content %}
 
-<h1>Menus</h1>
+{% block title %}Menus{% endblock %}
+
+{% block header %}<h1>Menus</h1>{% endblock %}
+
+{% block content %}
 
 <table class="menu-list">
   <tr>

mensaviewer/templates/news/delete.html

@@ -1,5 +1,10 @@
 {% extends 'base.html' %}
 
+
+{% block title %}Delete News{% endblock %}
+
+{% block header %}<h1>Delete news article {{ object.title }}</h1>{% endblock %}
+
 {% block content %}
 
 <form class="model-form" method="post">

mensaviewer/templates/news/detail.html

@@ -1,12 +1,23 @@
 {% extends 'base.html' %}
 
+
+{% block title %}{{ newsarticle.title }}{% endblock %}
+
+{% block header %}<h1>{{ newsarticle.title }}</h1>{% endblock %}
+
 {% block content %}
 
 <div class="detail-container">
-  <h1>By {{ newsarticle.author }}</h1>
-  <h3>Timestamp: {{ newsarticle.timestamp }}</h3>
-  <h3>Location: <a href="{% url 'mensaviewer:location_detail' newsarticle.location.pk %}">{{ newsarticle.location.name }}</a></h3>
-  <h3>Text: {{ newsarticle.text }}</h3>
+  <h1>Written by {{ newsarticle.author }}</h1>
+  <hr>
+  <h4>Timestamp</h4>
+  <p>{{ newsarticle.timestamp }}</p>
+  <hr>
+  <h4>Location</h4>
+  <p><a href="{% url 'mensaviewer:location_detail' newsarticle.location.pk %}">{{ newsarticle.location.name }}</a></p>
+  <hr>
+  <h4>Text</h4>
+  <p>{{ newsarticle.text }}</p>
 </div>
 
 {% endblock %}

mensaviewer/templates/news/edit.html

@@ -1,5 +1,10 @@
 {% extends 'base.html' %}
 
+
+{% block title %}Edit News Article{% endblock %}
+
+{% block header %}<h1>Edit news article {{ object.title }}</h1>{% endblock %}
+
 {% block content %}
 
 <form class="model-form" method="post">

mensaviewer/templates/news/list.html

@@ -1,8 +1,11 @@
 {% extends 'base.html' %}
 
-{% block content %}
 
-<h1>News Articles</h1>
+{% block title %}News Articles{% endblock %}
+
+{% block header %}<h1>News Articles</h1>{% endblock %}
+
+{% block content %}
 
 <table class="news-list">
   <tr>

mensaviewer/views.py

@@ -16,13 +16,15 @@ def flensburg(request):
 
     checked_types = request.GET.getlist('type')
     status = request.GET.get('status')
-    selected_locations = Location.objects.filter(mensa_id__in=[1, 6])
+    selected_locations = Location.objects.filter(mensa_id__in=[7, 14])
+    if not selected_locations.exists():
+        Location(city="Flensburg", name="Hauptmensa", mensa_id=7).save()
+        Location(city="Flensburg", name="B-Mensa", mensa_id=14).save()
     context = {
         'types': [(TYPES[type], type) for type in TYPES],
         'checked_types': checked_types,
         'status_values': STATUS_VALUES,
         'status': status,
-        'locations': Location.objects.all(),
         'menu_data': load_data(selected_locations, checked_types, status),
     }
     response = render(request, "flensburg.html", context)

static/base.css

@@ -9,6 +9,10 @@ body {
   color: #EEEDFF;
 }
 
+hr {
+  opacity: 0.2;
+}
+
 h1, h2, h3 {
   margin: 0;
   padding: 1em;
@@ -46,7 +50,6 @@ nav a:hover {
 
 nav hr {
   width: 16em;
-  opacity: 0.1;
 }
 
 a {
@@ -149,6 +152,10 @@ td {
   text-align: right;
 }
 
+.filter-form hr {
+  width: 100%;
+}
+
 input[type="submit"], button {
   cursor: pointer;
 }
@@ -174,36 +181,46 @@ input[type="submit"]:active, button:active {
   flex-flow: column;
 }
 
-.menu {
+.related-items {
+  margin: 2em;
+}
+
+.comment {
+  border-radius: 0.2em;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  margin: 0.5em;
+  padding: 1em;
+}
+
+.menu, .news-article {
   padding: 1em;
   margin: 0.2em;
-  border-radius: 0.5em;
+  margin-bottom: 0.8em;
+  border-radius: 0.2em;
+  border: 1px solid rgba(0, 0, 0, 0.3);
   box-shadow: inset 0px 0px 1em rgba(0, 0, 0, 0.2);
   background-color: rgba(0, 0, 0, 0.2);
   display: flex;
   flex-direction: column;
 }
 
-.menu * {
-  margin: 0;
-}
-
 .menu hr {
-  opacity: 0.2;
+  width: 100%;
 }
 
 .menu p {
   font-size: 12px;
+  margin: 0;
 }
 
 .menu a {
-  display: inline-block;
+  display: inline;
 }
 
 .a-mensa {
-  background-color: rgba(16, 64, 16, 0.2);
+  background-color: rgba(40, 29, 40, 0.7);
 }
 
 .b-mensa {
-  background-color: rgba(16, 16, 64, 0.2);
+  background-color: rgba(29, 40, 40, 0.7);
 }