HTTP Error HTML Dateien überarbeitet. Template HTML Datei genutzt. Readme angepasst.

README.md

@@ -11,7 +11,6 @@ to work properly. These are:
 *  start-page: The start-page, of course :) Change content to something nice
 *  impress: Fill with impress data
 *  contact: Contact information of the page owner
-*  404: Error page content
 
 There are also some sample-article, which only exist to demonstration purposes.
 
@@ -86,7 +85,7 @@ To start the application, run
 
 `manage.py runserver --insecure`
 
-The `--insecure` statement is necessary to provide static content and our nicer 404 page for error cases.
+The `--insecure` statement is necessary to provide static content and our nicer HTTP error page for error cases.
 Otherwise, an external web server would be necessary.
 
 ### Check if it worked

blog/fixtures/blog.json

@@ -44,21 +44,6 @@
       "slug": "start"
     }
   },
-  {
-    "model": "blog.blog",
-    "pk": 9,
-    "fields": {
-      "identifier": "404",
-      "title": "Artikel nicht gefunden",
-      "description": "<p>Das ist nicht der Artikel, den du suchst&nbsp;<img alt=\"sad\" src=\"http://127.0.0.1:8000/static/ckeditor/ckeditor/plugins/smiley/images/sad_smile.png\" style=\"height:23px; width:23px\" title=\"sad\" /></p>",
-      "date": "2020-06-22T18:16:09Z",
-      "image": "",
-      "created": "2020-06-22",
-      "edited": "2020-06-22",
-      "status": 1,
-      "slug": "404"
-    }
-  },
   {
     "model": "blog.blog",
     "pk": 10,

blog/static/blog/styles.css

@@ -61,9 +61,4 @@ footer a:hover {
 .color2 { color: #0433BF; }
 .color3 { color: #032CA6; }
 .color4 { color: #021859; }
-.color5 { color: #0B9ED9; }
-
-/* Error like 404 */
-.error h1,h2{
-    color: red;
-}
\ No newline at end of file
+.color5 { color: #0B9ED9; }
\ No newline at end of file

personal_blog/static/blog/all_blogs.js

-window.onload = () => {
-    document.getElementById("startpage_button").addEventListener("click", goHome);
-    document.getElementsByClassName("container blogcard")[0].addEventListener(
-        "click",goToDetails)
-}
-
-// Funktion prueft nach Klick auf Blog-Karte, welche ID, der Blogeintrag hat
-// und ruft damit entsprechende Detailansichtsseite auf
-function goToDetails(event) {
-    cardtarget = event.target;
-    getIDandgoToDetails(cardtarget);
-
-    function getIDandgoToDetails(cardtarget){
-        var targetClassName = cardtarget.className.toLowerCase();
-        if (targetClassName != ('card-deck' || 'container blogcard')){
-            if (cardtarget.hasAttribute('data-value')) {
-                var id = cardtarget.getAttribute('data-value');
-                openDetails(id);
-            }
-            else {
-                // Falls HTML-Element das data-value-Attribut nicht enthaelt,
-                // setzte cardtarget auf Vaterknoten. Danach rekursiver Aufruf.
-                var cardtarget = cardtarget.parentNode;
-                getIDandgoToDetails(cardtarget);
-            }
-        } else {
-            console.log('You clicked on the card deck area. ' +
-                'Please click on the blog-card directly in order to change' +
-                'detailed view!');}
-    }
-}
-
-function openDetails(id){
-    window.location.replace(id);
-}
-
-//TODO gohome doesn't work yet
-function goHome(){
-    window.location.replace(home);
-}
\ No newline at end of file

personal_blog/static/blog/styles.css

@@ -55,9 +55,4 @@ h4, h5, h6 {
 .color2 { color: #0433BF; }
 .color3 { color: #032CA6; }
 .color4 { color: #021859; }
-.color5 { color: #0B9ED9; }
-
-/* Error like 404 */
-.error h1,h2{
-    color: red;
-}
\ No newline at end of file
+.color5 { color: #0B9ED9; }
\ No newline at end of file

templates/400.html

 {% extends 'blog/all_blogs.html' %}
 {% load bootstrap4 %}
 
-{% block error %}
-    <div class="error">
-        <h1>Error 400</h1>
+{% block page-title %}
+    Error 400
+{% endblock %}
+
+{% block heading %}
+    <h1 class="display-2">Error 400</h1>
+{% endblock %}
+
+{% block content %}
+    <div class="container">
         <h2>Hmm?! Irgendwas stimmt mit deiner Anfrage nicht!</h2>
         <a href="{% url 'blog:all_blogs' %}" class="btn btn-primary">Home</a>
     </div>

templates/403.html

 {% extends 'blog/all_blogs.html' %}
 {% load bootstrap4 %}
 
-{% block error %}
-    <div class="error">
-        <h1>Error 403</h1>
+{% block page-title %}
+    Error 403
+{% endblock %}
+
+{% block heading %}
+    <h1 class="display-2">Error 403</h1>
+{% endblock %}
+
+{% block content %}
+    <div class="container">
         <h2>Der Zugriff wurde verweigert!</h2>
         <a href="{% url 'blog:all_blogs' %}" class="btn btn-primary">Home</a>
     </div>

templates/404.html

-{% extends 'blog/all_blogs.html' %}
+{% extends 'blog/base.html' %}
 {% load bootstrap4 %}
 
-{% block error %}
-    <div class="error">
-        <h1>Error 404</h1>
+{% block page-title %}
+    Error 404
+{% endblock %}
+
+{% block heading %}
+    <h1 class="display-2">Error 404</h1>
+{% endblock %}
+
+{% block content %}
+    <div class="container">
         <h2>Ups! Die Seite wurde leider nicht gefunden!</h2>
         <a href="{% url 'blog:all_blogs' %}" class="btn btn-primary">Home</a>
     </div>

templates/500.html

 {% extends 'blog/all_blogs.html' %}
 {% load bootstrap4 %}
 
-{% block error %}
-    <div class="error">
-        <h1>Error 500</h1>
+{% block page-title %}
+    Error 500
+{% endblock %}
+
+{% block heading %}
+    <h1 class="display-2">Error 500</h1>
+{% endblock %}
+
+{% block content %}
+    <div class="container">
         <h2>Hoppla! Der Server hat gerade schluckauf. Versuche es später noch einmal!</h2>
         <a href="{% url 'blog:all_blogs' %}" class="btn btn-primary">Home</a>
     </div>