Better layout for spirit dispositions

master
Wynd 2025-01-31 15:40:23 +02:00
parent d06a629aff
commit 0c51132528
5 changed files with 46 additions and 37 deletions

View File

@ -1,18 +1,20 @@
<h2>Dispositions</h2> <h2>Dispositions</h2>
{% for route in board.get_dispositions() %} <div class="dispositions">
<div class="route"> {% for route in board.get_dispositions() %}
<div> <div class="route">
<div class="disposition {{+ route.color +}}"></div> <div>
<span>{{ route.name }}</span> <div class="disposition {{+ route.color +}}"></div>
<span>{{ route.name }}</span>
</div>
<ul>
{% for tip in route.tips %}
<li>
<div class="disposition {{+ tip.to_color +}}"></div>
{{+ tip.to +}} ➔ {{+ tip.tip +}}
</li>
{% endfor %}
</ul>
</div> </div>
<ul> {% endfor %}
{% for tip in route.tips %} </div>
<li>
<div class="disposition {{+ tip.to_color +}}"></div>
{{+ tip.to +}} ➔ {{+ tip.tip +}}
</li>
{% endfor %}
</ul>
</div>
{% endfor %}

View File

@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>{% block title %}{% endblock %}</title> <title>{% block title %}{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style> <style>
body { body {
position: relative; position: relative;

View File

@ -1,6 +1,6 @@
{% extends "layouts/base.html" %} {% extends "layouts/base.html" %}
{% block title %}Commands{% endblock %} {% block title %}BBS - Command Melding{% endblock %}
{% block head %} {% block head %}
<style> <style>

View File

@ -1,6 +1,6 @@
{% extends "layouts/base.html" %} {% extends "layouts/base.html" %}
{% block title %}Abilities{% endblock %} {% block title %}DDD - Spirit Boards{% endblock %}
{% block head %} {% block head %}
<style> <style>
@ -36,33 +36,39 @@
} }
} }
div.route { .dispositions {
display: flex; display: flex;
align-items: center; flex-wrap: wrap;
& div { div.route {
display: flex; display: flex;
align-items: center; align-items: center;
} width: 40%;
& .disposition { & div {
width: 32px; display: flex;
height: 32px; align-items: center;
margin-right: 5px; }
display: inline-block;
vertical-align: middle;
}
& span { & .disposition {
font-size: 18px; width: 32px;
} height: 32px;
margin-right: 5px;
display: inline-block;
vertical-align: middle;
}
& ul { & span {
list-style: disclosure-closed; font-size: 18px;
line-height: 2.5; }
& li { & ul {
display: list-item; list-style: disclosure-closed;
line-height: 2.5;
& li {
display: list-item;
}
} }
} }
} }

View File

@ -1,6 +1,6 @@
{% extends "layouts/base.html" %} {% extends "layouts/base.html" %}
{% block title %}Recipes{% endblock %} {% block title %}KH3 - Food Simulator{% endblock %}
{% block head %} {% block head %}
<style> <style>