added topic view on the left

markdownblog/blog/views.py

@@ -31,12 +31,16 @@ def viewblog(request, title) -> HttpResponse:
                              '{% autoescape off %}' +
                              html_form_md +
                              '{% endautoescape %}').render(Context({}))
-    context = {'post': post, 'html': rendered_html}
+    context = {'post': post, 'html': rendered_html, 'roottopics': Topic.objects.all().filter(rootTopic=None),
+               'allposts': Blogpost.objects.all()}
+
     return render(request, 'blog/viewpost.html', context)
 
 
 def index(request) -> HttpResponse:
-    return render(request, 'blog/index.html', {"debug": settings.DEBUG})
+    context = {'roottopics': Topic.objects.all().filter(rootTopic=None), 'allposts': Blogpost.objects.all(),
+               'debug': settings.DEBUG}
+    return render(request, 'blog/index.html', context)
 
 
 @login_required
@@ -62,7 +66,9 @@ def order(request) -> HttpResponse:
 
 @login_required
 def addpost(request) -> HttpResponse:
-    context = {'alltopics': Topic.objects.all().order_by('name').values(), 'markdown': ''}
+    context = {'alltopics': Topic.objects.all().order_by('name').values(), 'markdown': '',
+               'roottopics': Topic.objects.all().filter(rootTopic=None),
+               'allposts': Blogpost.objects.all()}
     if request.method == 'POST':
         title = request.POST['title']
         markdown = request.POST['markdown']

markdownblog/markdownblog/static/base.css

@@ -0,0 +1,17 @@
+.no-liststyle {
+    list-style-type: none !important;
+    padding-left: 0 !important;
+}
+
+.top-nav {
+    background-color: #35aca1
+}
+
+#root_list_left {
+    padding-left: revert !important;
+}
+
+.postlink {
+    margin-left: 1.5em !important;
+    color: #039be5 !important;
+}

markdownblog/markdownblog/static/images/logo.svg

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   fill="none"
+   height="126.68036"
+   viewBox="0 0 511.6087 126.68036"
+   width="511.6087"
+   version="1.1"
+   id="svg73"
+   sodipodi:docname="markdown-mark.svg"
+   inkscape:version="1.2 (dc2aedaf03, 2022-05-15)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs77" />
+  <sodipodi:namedview
+     id="namedview75"
+     pagecolor="#505050"
+     bordercolor="#ffffff"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#505050"
+     showgrid="false"
+     inkscape:zoom="2.2677881"
+     inkscape:cx="278.02422"
+     inkscape:cy="52.25356"
+     inkscape:window-width="1914"
+     inkscape:window-height="1021"
+     inkscape:window-x="0"
+     inkscape:window-y="56"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g71" />
+  <g
+     fill="#000000"
+     id="g71"
+     transform="translate(0,7.1053781e-5)">
+    <path
+       clip-rule="evenodd"
+       d="m 15,10 c -2.76139,0.0076 -5,2.2386 -5,5 v 98 c 0,2.761 2.23861,5.00757 5,5 l 481.60871,-1.31978 c 2.76099,-0.008 5,-2.239 5,-5 V 13.680223 c 0,-2.7614 -2.23901,-5.0075659 -5,-4.9999998 z M 0,15 C 0,6.71573 6.7157611,0.02270172 15,0 h 481.60871 c 8.28397,-0.022701 15,5.3959532 15,13.680223 v 97.999997 c 0,8.284 -6.71603,14.9773 -15,15 H 15 C 6.7157611,126.70292 0,121.284 0,113 Z"
+       fill-rule="evenodd"
+       id="path67"
+       sodipodi:nodetypes="ssssssssssssssssss" />
+    <path
+       d="M 30,98 V 30 H 50 L 70,55 90,30 h 20 V 98 H 90 V 59 L 70,84 50,59 v 39 z m 125,0 -30,-33 h 20 V 30 h 20 v 35 h 20 z"
+       id="path69" />
+    <text
+       xml:space="preserve"
+       style="font-size:100px;line-height:1.25;font-family:com;-inkscape-font-specification:com"
+       x="193.42607"
+       y="98.393074"
+       id="text166"><tspan
+         sodipodi:role="line"
+         id="tspan164"
+         x="193.42607"
+         y="98.393074"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:100px;font-family:'Gill Sans';-inkscape-font-specification:'Gill Sans Bold'">BLOG</tspan></text>
+  </g>
+</svg>

markdownblog/markdownblog/templates/base/base.html

@@ -11,27 +11,56 @@
     <!--Let browser know website is optimized for mobile-->
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
+    <link rel="stylesheet" href="{% static 'base.css' %}">
     {% block includehere %} {% endblock %}
 </head>
 <body>
 <header>
-    <nav class="top-nav" style="background-color: #35aca1">
+    <nav class="top-nav">
         <a href="#" data-target="slide-out" class="sidenav-trigger full hide-on-large-only" id="open-sidenav-toggle">
             <i class="material-icons">menu</i>
         </a>
     </nav>
-    <ul id="slide-out" class="sidenav sidenav-fixed" style="padding-left: 0 !important">
+    <ul id="slide-out" class="sidenav sidenav-fixed no-liststyle">
+        <li class="no-liststyle">
+            <div class="background">
+                <a href="{% url 'index' %}">
+                    <img class="no-liststyle" src="{% static 'images/logo.svg' %}" alt="website logo"
+                         style="width: 80%; display: block; margin: 0.5em auto 0.5em;">
+                </a>
+            </div>
+        </li>
+        <ul id="root_list_left">
+            {% for topic in roottopics %}
+                {% include "blog/tree_view_list_only.html" %}
+            {% endfor %}
+            <ul id="list_posts_{{ topic.id }}" class="no-liststyle">
+                {% for post in allposts %}
+                    {% if post.topic == None %}
+                        <li id="list_elem_post_{{ post.id }}" class="no-liststyle">
+                            <a href="{% url 'readpost' title=post.title %}" class="no-liststyle postlink">{{ post }}</a>
+                        </li>
+                    {% endif %}
+                {% endfor %}
+
+            </ul>
+        </ul>
+        <li class="no-liststyle">
+            <div class="divider"></div>
+        </li>
         {% if user.is_authenticated %}
-            <li class="no-liststyle"><a class="waves-effect" href="{% url 'addpost' %}"><i class="material-icons">add</i>New post</a></li>
+            <li class="no-liststyle"><a class="waves-effect" href="{% url 'addpost' %}"><i
-            <li class="no-liststyle"><a class="waves-effect" href="{% url 'order' %}"><i class="material-icons">reorder</i>Manage posts</a>
+                    class="material-icons">add</i>New post</a></li>
+            <li class="no-liststyle"><a class="waves-effect" href="{% url 'order' %}"><i
+                    class="material-icons">reorder</i>Manage posts</a>
             </li>
             <li class="no-liststyle">
                 <div class="divider"></div>
             </li>
-            <li class="no-liststyle"><a class="waves-effect" href="{% url 'admin:index' %}"><i
+            <li class="no-liststyle"><a class="waves-effect" href="{% url 'admin:index' %}"><i class="material-icons">
-                    class="material-icons">admin_panel_settings</i>Admin
+                admin_panel_settings</i>Admin panel</a></li>
-                panel</a></li>
+            <li class="no-liststyle"><a class="waves-effect" href="{% url 'logout' %}"><i
-            <li class="no-liststyle"><a class="waves-effect" href="{% url 'logout' %}"><i class="material-icons">logout</i>Logout</a></li>
+                    class="material-icons">logout</i>Logout</a></li>
             {% if debug %}
                 <li class="no-liststyle">
                     <div class="divider"></div>
@@ -44,7 +73,8 @@
                 </li>
             {% endif %}
         {% else %}
-            <li class="no-liststyle"><a class="waves-effect" href="{% url 'login' %}"><i class="material-icons">login</i>Login</a></li>
+            <li class="no-liststyle"><a class="waves-effect" href="{% url 'login' %}"><i
+                    class="material-icons">login</i>Login</a></li>
         {% endif %}
     </ul>
 </header>

markdownblog/markdownblog/templates/blog/index.html

@@ -3,7 +3,6 @@
     Willkommen!
 {% endblock %}
 {% block includehere %}
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
 {% endblock %}
 {% block content %}
     <h1>Willkommen!</h1>

markdownblog/markdownblog/templates/blog/tree_view_list_only.html

@@ -0,0 +1,21 @@
+{% load tree_utils %}
+<li class="no-liststyle"> {{ topic.name }}
+    <ul class="no-liststyle">
+        {% for post in allposts %}
+            {% if post.topic.id == topic.id %}
+                <li class="no-liststyle">
+                    <a href="{% url 'readpost' title=post.title %}" class="no-liststyle postlink">{{ post }}</a>
+                </li>
+            {% endif %}
+        {% endfor %}
+    </ul>
+    {% if topic|has_children %}
+        <ul class="no-liststyle">
+            {% for child in topic|all_children %}
+                {% with topic=child template_name="blog/tree_view_list_only.html" %}
+                    {% include template_name %}
+                {% endwith %}
+            {% endfor %}
+        </ul>
+    {% endif %}
+</li>

markdownblog/markdownblog/templates/blog/viewpost.html

@@ -12,7 +12,9 @@
 {% endblock %}
 {% block content %}
     {% autoescape off %}
-        {{ html }}
+        <div class="col s10 offset-s1">
+            {{ html }}
+        </div>
     {% endautoescape %}
     <script>
         MathJax = {