clara/mdblog
1
0
Fork 0
Code Issues 3 Pull requests Projects Releases Packages Wiki Activity Actions

implemented topic tree view

Browse source
This commit is contained in:
CDaut 2022-06-17 21:06:34 +02:00 • committed by CDaut
parent deae2d39e5
commit 9dc9705406
4 changed files with 41 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

4
markdownblog/markdownblog/static/order_style.css
View file

@ -6,6 +6,6 @@
box-shadow: 3px 3px 11px 4px rgb(231, 231, 231);
-webkit-box-shadow: 3px 3px 11px 4px rgb(231, 231, 231);
-moz-box-shadow: 3px 3px 11px 4px rgb(231, 231, 231);
padding: 0.5em;
margin: 0.5em;
padding: 0.5em 0.5em 0.5em 1em;
margin: 0.5em 0.5em 0.5em 0;
}

2
markdownblog/markdownblog/templates/base/base.html
View file

@ -15,7 +15,7 @@
</head>
<body>
<header>
<nav class="top-nav">
<nav class="top-nav" style="background-color: #22db90">
<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>

32
markdownblog/markdownblog/templates/blog/order.html
View file

@ -7,9 +7,39 @@
<link rel="stylesheet" href="{% static 'order_style.css' %}">
{% endblock %}
{% block content %}
<ul>
<div class="col s8 offset-s2">
<ul id="root_list" class="topic_list" ondrop="drop(event)" ondragover="allowDrop(event)"
ondragleave="resetbgColor(event)">
{% for topic in roottopics %}
{% include "blog/tree_view_template.html" %}
{% endfor %}
</ul>
</div>
<script type="text/javascript">
function resetbgColor(ev) {
ev.preventDefault();
ev.target.style.backgroundColor = "";
}
function allowDrop(ev) {
ev.preventDefault();
ev.target.style.backgroundColor = "#37FF3733";
Array.from(ev.target.children).forEach(elem => {
elem.style.backgroundColor = "white";
}
);
}
function drag(ev) {
ev.dataTransfer.setData("targetObject", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var targetOject = ev.dataTransfer.getData("targetObject");
ev.target.appendChild(document.getElementById(targetOject));
ev.target.style.backgroundColor = "";
}
</script>
{% endblock %}

5
markdownblog/markdownblog/templates/blog/tree_view_template.html
View file

@ -1,7 +1,8 @@
{% load tree_utils %}
<li class="topic_list_element"> {{ topic.name }}
<li class="topic_list_element" draggable="true" ondragstart="drag(event)"
id="list_elem_{{ topic.id }}"> {{ topic.name }}
{% if topic|has_children %}
<ul class="topic_list">
<ul class="topic_list" ondrop="drop(event)" ondragover="allowDrop(event)" id="list_{{ topic.id }}">
{% for child in topic|all_children %}
{% with topic=child template_name="blog/tree_view_template.html" %}
{% include template_name %}