xle/django-exalted
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

The CSS continues... Episode III: Abilities. Features include ability types and support for custom abilities

Browse Source
This commit is contained in:
tcaxle
2020-04-17 23:25:06 +01:00
parent ae4327dd5b
commit a291e44b83
6 changed files with 995 additions and 797 deletions
Download Patch File Download Diff File Expand all files Collapse all files

443
templates/characterDetail.html
View File

@@ -24,424 +24,31 @@
{% endblock %}
{% block abilities %}
<h2>Abilities</h2>
</p>
<p style="margin:0" class="accordion w3-display-container w3-row-padding custom-hover-grey custom-hover-text-orange">
<span>Archery:</span>
<span class="w3-medium w3-display-right">
{% for dot in object.dotsArchery %}
{% if dot %}
<i class="fas fa-circle"></i>
{% else %}
<i class="far fa-circle"></i>
{% endif %}
{% endfor %}
&thinsp;
</span>
</p>
<div class="accordionPanel custom-border-grey w3-border-bottom w3-row-padding">
<p style="margin:0;"><i class="fas fa-level-up-alt fa-rotate-90"></i> Hello I describe the archery</p>
</div>
<p style="margin:0" class="accordion w3-display-container w3-row-padding custom-hover-grey custom-hover-text-orange">
<span>Athletics:</span>
<span class="w3-medium w3-display-right">
{% for dot in object.dotsAthletics %}
{% if dot %}
<i class="fas fa-circle"></i>
{% else %}
<i class="far fa-circle"></i>
{% endif %}
{% endfor %}
&thinsp;
</span>
</p>
<div class="accordionPanel custom-border-grey w3-border-bottom w3-row-padding">
<p style="margin:0;"><i class="fas fa-level-up-alt fa-rotate-90"></i> Description</p>
</div>
<p style="margin:0" class="accordion w3-display-container w3-row-padding custom-hover-grey custom-hover-text-orange">
<span>Awareness:</span>
<span class="w3-medium w3-display-right">
{% for dot in object.dotsAwareness %}
{% if dot %}
<i class="fas fa-circle"></i>
{% else %}
<i class="far fa-circle"></i>
{% endif %}
{% endfor %}
&thinsp;
</span>
</p>
<div class="accordionPanel custom-border-grey w3-border-bottom w3-row-padding">
<p style="margin:0;"><i class="fas fa-level-up-alt fa-rotate-90"></i> Description</p>
</div>
<p style="margin:0" class="accordion w3-display-container w3-row-padding custom-hover-grey custom-hover-text-orange">
<span>Brawl:</span>
<span class="w3-medium w3-display-right">
{% for dot in object.dotsBrawl %}
{% if dot %}
<i class="fas fa-circle"></i>
{% else %}
<i class="far fa-circle"></i>
{% endif %}
{% endfor %}
&thinsp;
</span>
</p>
<div class="accordionPanel custom-border-grey w3-border-bottom w3-row-padding">
<p style="margin:0;"><i class="fas fa-level-up-alt fa-rotate-90"></i> Description</p>
</div>
<p style="margin:0" class="accordion w3-display-container w3-row-padding custom-hover-grey custom-hover-text-orange">
<span>Bureaucracy:</span>
<span class="w3-medium w3-display-right">
{% for dot in object.dotsBureaucracy %}
{% if dot %}
<i class="fas fa-circle"></i>
{% else %}
<i class="far fa-circle"></i>
{% endif %}
{% endfor %}
&thinsp;
</span>
</p>
<div class="accordionPanel custom-border-grey w3-border-bottom w3-row-padding">
<p style="margin:0;"><i class="fas fa-level-up-alt fa-rotate-90"></i> Description</p>
</div>
<p style="margin:0" class="accordion w3-display-container w3-row-padding custom-hover-grey custom-hover-text-orange">
<span>Craft:</span>
<span class="w3-medium w3-display-right">
{% for dot in object.dotsCraft %}
{% if dot %}
<i class="fas fa-circle"></i>
{% else %}
<i class="far fa-circle"></i>
{% endif %}
{% endfor %}
&thinsp;
</span>
</p>
<div class="accordionPanel custom-border-grey w3-border-bottom w3-row-padding">
<p style="margin:0;"><i class="fas fa-level-up-alt fa-rotate-90"></i> Description</p>
</div>
<p style="margin:0" class="accordion w3-display-container w3-row-padding custom-hover-grey custom-hover-text-orange">
<span>Dodge:</span>
<span class="w3-medium w3-display-right">
{% for dot in object.dotsDodge %}
{% if dot %}
<i class="fas fa-circle"></i>
{% else %}
<i class="far fa-circle"></i>
{% endif %}
{% endfor %}
&thinsp;
</span>
</p>
<div class="accordionPanel custom-border-grey w3-border-bottom w3-row-padding">
<p style="margin:0;"><i class="fas fa-level-up-alt fa-rotate-90"></i> Description</p>
</div>
<p style="margin:0" class="accordion w3-display-container w3-row-padding custom-hover-grey custom-hover-text-orange">
<span>Integrity:</span>
<span class="w3-medium w3-display-right">
{% for dot in object.dotsIntegrity %}
{% if dot %}
<i class="fas fa-circle"></i>
{% else %}
<i class="far fa-circle"></i>
{% endif %}
{% endfor %}
&thinsp;
</span>
</p>
<div class="accordionPanel custom-border-grey w3-border-bottom w3-row-padding">
<p style="margin:0;"><i class="fas fa-level-up-alt fa-rotate-90"></i> Description</p>
</div>
<p style="margin:0" class="accordion w3-display-container w3-row-padding custom-hover-grey custom-hover-text-orange">
<span>Investigation:</span>
<span class="w3-medium w3-display-right">
{% for dot in object.dotsInvestigation %}
{% if dot %}
<i class="fas fa-circle"></i>
{% else %}
<i class="far fa-circle"></i>
{% endif %}
{% endfor %}
&thinsp;
</span>
</p>
<div class="accordionPanel custom-border-grey w3-border-bottom w3-row-padding">
<p style="margin:0;"><i class="fas fa-level-up-alt fa-rotate-90"></i> Description</p>
</div>
<p style="margin:0" class="accordion w3-display-container w3-row-padding custom-hover-grey custom-hover-text-orange">
<span>Larceny:</span>
<span class="w3-medium w3-display-right">
{% for dot in object.dotsLarceny %}
{% if dot %}
<i class="fas fa-circle"></i>
{% else %}
<i class="far fa-circle"></i>
{% endif %}
{% endfor %}
&thinsp;
</span>
</p>
<div class="accordionPanel custom-border-grey w3-border-bottom w3-row-padding">
<p style="margin:0;"><i class="fas fa-level-up-alt fa-rotate-90"></i> Description</p>
</div>
<p style="margin:0" class="accordion w3-display-container w3-row-padding custom-hover-grey custom-hover-text-orange">
<span>Linguistics:</span>
<span class="w3-medium w3-display-right">
{% for dot in object.dotsLinguistics %}
{% if dot %}
<i class="fas fa-circle"></i>
{% else %}
<i class="far fa-circle"></i>
{% endif %}
{% endfor %}
&thinsp;
</span>
</p>
<div class="accordionPanel custom-border-grey w3-border-bottom w3-row-padding">
<p style="margin:0;"><i class="fas fa-level-up-alt fa-rotate-90"></i> Description</p>
</div>
<p style="margin:0" class="accordion w3-display-container w3-row-padding custom-hover-grey custom-hover-text-orange">
<span>Lore:</span>
<span class="w3-medium w3-display-right">
{% for dot in object.dotsLore %}
{% if dot %}
<i class="fas fa-circle"></i>
{% else %}
<i class="far fa-circle"></i>
{% endif %}
{% endfor %}
&thinsp;
</span>
</p>
<div class="accordionPanel custom-border-grey w3-border-bottom w3-row-padding">
<p style="margin:0;"><i class="fas fa-level-up-alt fa-rotate-90"></i> Description</p>
</div>
<p style="margin:0" class="accordion w3-display-container w3-row-padding custom-hover-grey custom-hover-text-orange">
<span>Martial Arts:</span>
<span class="w3-medium w3-display-right">
{% for dot in object.dotsMartialArts %}
{% if dot %}
<i class="fas fa-circle"></i>
{% else %}
<i class="far fa-circle"></i>
{% endif %}
{% endfor %}
&thinsp;
</span>
</p>
<div class="accordionPanel custom-border-grey w3-border-bottom w3-row-padding">
<p style="margin:0;"><i class="fas fa-level-up-alt fa-rotate-90"></i> Description</p>
</div>
<p style="margin:0" class="accordion w3-display-container w3-row-padding custom-hover-grey custom-hover-text-orange">
<span>Medicine:</span>
<span class="w3-medium w3-display-right">
{% for dot in object.dotsMedicine %}
{% if dot %}
<i class="fas fa-circle"></i>
{% else %}
<i class="far fa-circle"></i>
{% endif %}
{% endfor %}
&thinsp;
</span>
</p>
<div class="accordionPanel custom-border-grey w3-border-bottom w3-row-padding">
<p style="margin:0;"><i class="fas fa-level-up-alt fa-rotate-90"></i> Description</p>
</div>
<p style="margin:0" class="accordion w3-display-container w3-row-padding custom-hover-grey custom-hover-text-orange">
<span>Melee:</span>
<span class="w3-medium w3-display-right">
{% for dot in object.dotsMelee %}
{% if dot %}
<i class="fas fa-circle"></i>
{% else %}
<i class="far fa-circle"></i>
{% endif %}
{% endfor %}
&thinsp;
</span>
</p>
<div class="accordionPanel custom-border-grey w3-border-bottom w3-row-padding">
<p style="margin:0;"><i class="fas fa-level-up-alt fa-rotate-90"></i> Description</p>
</div>
<p style="margin:0" class="accordion w3-display-container w3-row-padding custom-hover-grey custom-hover-text-orange">
<span>Occult:</span>
<span class="w3-medium w3-display-right">
{% for dot in object.dotsOccult %}
{% if dot %}
<i class="fas fa-circle"></i>
{% else %}
<i class="far fa-circle"></i>
{% endif %}
{% endfor %}
&thinsp;
</span>
</p>
<div class="accordionPanel custom-border-grey w3-border-bottom w3-row-padding">
<p style="margin:0;"><i class="fas fa-level-up-alt fa-rotate-90"></i> Description</p>
</div>
<p style="margin:0" class="accordion w3-display-container w3-row-padding custom-hover-grey custom-hover-text-orange">
<span>Performance:</span>
<span class="w3-medium w3-display-right">
{% for dot in object.dotsPerformance %}
{% if dot %}
<i class="fas fa-circle"></i>
{% else %}
<i class="far fa-circle"></i>
{% endif %}
{% endfor %}
&thinsp;
</span>
</p>
<div class="accordionPanel custom-border-grey w3-border-bottom w3-row-padding">
<p style="margin:0;"><i class="fas fa-level-up-alt fa-rotate-90"></i> Description</p>
</div>
<p style="margin:0" class="accordion w3-display-container w3-row-padding custom-hover-grey custom-hover-text-orange">
<span>Presence:</span>
<span class="w3-medium w3-display-right">
{% for dot in object.dotsPresence %}
{% if dot %}
<i class="fas fa-circle"></i>
{% else %}
<i class="far fa-circle"></i>
{% endif %}
{% endfor %}
&thinsp;
</span>
</p>
<div class="accordionPanel custom-border-grey w3-border-bottom w3-row-padding">
<p style="margin:0;"><i class="fas fa-level-up-alt fa-rotate-90"></i> Description</p>
</div>
<p style="margin:0" class="accordion w3-display-container w3-row-padding custom-hover-grey custom-hover-text-orange">
<span>Resistance:</span>
<span class="w3-medium w3-display-right">
{% for dot in object.dotsResistance %}
{% if dot %}
<i class="fas fa-circle"></i>
{% else %}
<i class="far fa-circle"></i>
{% endif %}
{% endfor %}
&thinsp;
</span>
</p>
<div class="accordionPanel custom-border-grey w3-border-bottom w3-row-padding">
<p style="margin:0;"><i class="fas fa-level-up-alt fa-rotate-90"></i> Description</p>
</div>
<p style="margin:0" class="accordion w3-display-container w3-row-padding custom-hover-grey custom-hover-text-orange">
<span>Ride:</span>
<span class="w3-medium w3-display-right">
{% for dot in object.dotsRide %}
{% if dot %}
<i class="fas fa-circle"></i>
{% else %}
<i class="far fa-circle"></i>
{% endif %}
{% endfor %}
&thinsp;
</span>
</p>
<div class="accordionPanel custom-border-grey w3-border-bottom w3-row-padding">
<p style="margin:0;"><i class="fas fa-level-up-alt fa-rotate-90"></i> Description</p>
</div>
<p style="margin:0" class="accordion w3-display-container w3-row-padding custom-hover-grey custom-hover-text-orange">
<span>Sail:</span>
<span class="w3-medium w3-display-right">
{% for dot in object.dotsSail %}
{% if dot %}
<i class="fas fa-circle"></i>
{% else %}
<i class="far fa-circle"></i>
{% endif %}
{% endfor %}
&thinsp;
</span>
</p>
<div class="accordionPanel custom-border-grey w3-border-bottom w3-row-padding">
<p style="margin:0;"><i class="fas fa-level-up-alt fa-rotate-90"></i> Description</p>
</div>
<p style="margin:0" class="accordion w3-display-container w3-row-padding custom-hover-grey custom-hover-text-orange">
<span>Socialize:</span>
<span class="w3-medium w3-display-right">
{% for dot in object.dotsSocialize %}
{% if dot %}
<i class="fas fa-circle"></i>
{% else %}
<i class="far fa-circle"></i>
{% endif %}
{% endfor %}
&thinsp;
</span>
</p>
<div class="accordionPanel custom-border-grey w3-border-bottom w3-row-padding">
<p style="margin:0;"><i class="fas fa-level-up-alt fa-rotate-90"></i> Description</p>
</div>
<p style="margin:0" class="accordion w3-display-container w3-row-padding custom-hover-grey custom-hover-text-orange">
<span>Stealth:</span>
<span class="w3-medium w3-display-right">
{% for dot in object.dotsStealth %}
{% if dot %}
<i class="fas fa-circle"></i>
{% else %}
<i class="far fa-circle"></i>
{% endif %}
{% endfor %}
&thinsp;
</span>
</p>
<div class="accordionPanel custom-border-grey w3-border-bottom w3-row-padding">
<p style="margin:0;"><i class="fas fa-level-up-alt fa-rotate-90"></i> Description</p>
</div>
<p style="margin:0" class="accordion w3-display-container w3-row-padding custom-hover-grey custom-hover-text-orange">
<span>Survival:</span>
<span class="w3-medium w3-display-right">
{% for dot in object.dotsSurvival %}
{% if dot %}
<i class="fas fa-circle"></i>
{% else %}
<i class="far fa-circle"></i>
{% endif %}
{% endfor %}
&thinsp;
</span>
</p>
<div class="accordionPanel custom-border-grey w3-border-bottom w3-row-padding">
<p style="margin:0;"><i class="fas fa-level-up-alt fa-rotate-90"></i> Description</p>
</div>
<p style="margin:0" class="accordion w3-display-container w3-row-padding custom-hover-grey custom-hover-text-orange">
<span>Thrown:</span>
<span class="w3-medium w3-display-right">
{% for dot in object.dotsThrown %}
{% if dot %}
<i class="fas fa-circle"></i>
{% else %}
<i class="far fa-circle"></i>
{% endif %}
{% endfor %}
&thinsp;
</span>
</p>
<div class="accordionPanel custom-border-grey w3-border-bottom w3-row-padding">
<p style="margin:0;"><i class="fas fa-level-up-alt fa-rotate-90"></i> Description</p>
</div>
<p style="margin:0" class="accordion w3-display-container w3-row-padding custom-hover-grey custom-hover-text-orange">
<span>War:</span>
<span class="w3-medium w3-display-right">
{% for dot in object.dotsWar %}
{% if dot %}
<i class="fas fa-circle"></i>
{% else %}
<i class="far fa-circle"></i>
{% endif %}
{% endfor %}
&thinsp;
</span>
</p>
<div class="accordionPanel custom-border-grey w3-border-bottom w3-row-padding">
<p style="margin:0;"><i class="fas fa-level-up-alt fa-rotate-90"></i> Description</p>
</div>
<h2>Abilities</h2>
{% for type, ownerships in object.abilitySet %}
<h3>{{ type }}</h3>
{% for ownership in ownerships %}
<p class="accordion hover-grey">
&thinsp;<i class="far fa-square"></i> {{ ownership.target.name }}
<span style="float: right">
{% for dot in ownership.dots %}
{% if dot %}
<i class="fas fa-circle"></i>
{% else %}
<i class="far fa-circle"></i>
{% endif %}
{% endfor %}
</span>
</p>
<p class="accordionPanel">&emsp;<i class="fas fa-level-up-alt fa-rotate-90"></i>
{% if ownership.target.description %}
{{ ownership.target.description }}
{% else %}
No description found.
{% endif %}
</p>
{% endfor %}
{% endfor %}
{% endblock %}
{% block attributes %}