added basic styling to templates

This commit is contained in:
Lorenz Padberg 2022-04-13 14:33:07 +02:00
parent 024358917c
commit ef81bee960
4 changed files with 30 additions and 16 deletions

View File

@ -10,5 +10,8 @@
},
"devDependencies": {
"cypress": "^9.4.1"
},
"dependencies": {
"tailwindcss": "^3.0.24"
}
}

View File

@ -15,7 +15,7 @@
<!-- Your stuff: Third-party CSS libraries go here -->
<!-- This file stores project-specific CSS -->
<link href="{% static 'css/project.min.css' %}" rel="stylesheet">
<link href="{% static 'css/tailwind-output.css' %}" rel="stylesheet">
<link href="{% static 'css/output.css' %}" rel="stylesheet">
{% endblock %}
<!-- Le javascript
================================================== -->

View File

@ -5,19 +5,18 @@
{% block body_class %}template-cicle{% endblock %}
{% block content %}
<div>
<div class="w-full flex mt-6">
<div class="bg-white flex-col w-1/3 m-5">
<div><a href="{% pageurl page.get_parent.get_parent %}">Zurück zum Lernpfad</a></div>
<h1>{{ page.title }}</h1>
<div>{{ page.description }}</div>
<div>{{ page.goals }}</div>
<h1 class="font-bold text-5xl mt-6 mb-4">{{ page.title }}</h1>
<div class="mt4">{{ page.description }}</div>
<div class="mt-4">{{ page.goals }}</div>
</div>
<br>
<div class="intro">{{ page.intro|richtext }}</div>
<div class="bg-gray-50 flex-col w-2/3">
{% for learning_sequence in page.get_children %}
<div>
<h2>{{ learning_sequence.title }}</h2>
<div class="p-6 max-w-sm mx-auto bg-white shadow-lg m-4">
<h2 class="font-bold">{{ learning_sequence.title }}</h2>
{% for learning_unit in learning_sequence.get_children %}
<div>
<h3>{{ learning_unit.title }}</h3>
@ -25,5 +24,8 @@
{% endfor %}
</div>
{% endfor %}
</div>
</div>
{% endblock %}

View File

@ -5,15 +5,24 @@
{% block body_class %}template-learningpath{% endblock %}
{% block content %}
<h1>{{ page.title }}</h1>
<h1 class="font-bold text-5xl">{{ page.title }}</h1>
<div class="intro">{{ page.intro|richtext }}</div>
<div class="intro">{{ page.intro|richtext }}</div>
<div class="flex flex-row w-full h-max-80 bg-gray-50 m-4 divide-x-4">
{% for topic in page.get_children %}
<h2>{{ topic.title }}</h2>
{% for circle in topic.get_children %}
<h2><a href="{% pageurl circle %}">{{ circle.title }}</a></h2>
{% endfor %}
<div class="bg-gray-50-600 m-4">
<h2 class="font-bold">{{ topic.title }}</h2>
<div class="flex flex-row">
{% for circle in topic.get_children %}
<div class="h-36 w-36 bg-gray-400 m-5">
<h2><a href="{% pageurl circle %}">{{ circle.title }}</a></h2>
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
{% endblock %}