binaryatrocity
/
acks-tools
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

Navbar updates

master
Brandon Cornejo 4 years ago
parent
d07b9a0055
commit
4fa529b0a3
2 changed files with 74 additions and 59 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 77
      acks/templates/base.html
  2. 34
      acks/templates/lair_gallery.html

77
acks/templates/base.html
View File

@ -1,19 +1,25 @@
{% set navigation_bar = [
('/', 'index', 'Home'),
('/handbook', 'handbook', 'Handbook'),
('/worldmap', 'worldmap', 'Maps'),
('.header', 'generate', 'Generate'),
('.header', 'other', 'Other'),
{% set player_bar = [
('/npc/spells', 'spells', 'Spells'), ('/npc/spells', 'spells', 'Spells'),
('/worldmap', 'worldmap', 'Maps'),
('https://reddit.com/r/PalismaACKS/wiki', 'redditwiki', 'Wiki'),
] %}
{% set judge_bar = [
('/lairs', 'lairs', 'Lairs'),
('http://autarch.co/treasure', 'treasure', 'Treasure'),
('/quest/list', 'questlist', 'Quests'), ('/quest/list', 'questlist', 'Quests'),
('/npc/party', 'npcparty', 'Generate Party'),
('/npc/single', 'npcsingle', 'Generate NPC'),
('/wiki', 'wiki', 'Wiki'), ('/wiki', 'wiki', 'Wiki'),
('/lairs', lairs', 'Lairs'),
]%} ]%}
{% set generation_bar = [
('/npc/party', 'npcparty', 'NPC Party'),
('/npc/single', 'npcsingle', 'Single NPC'),
('http://autarch.co/treasure', 'treasure', 'Treasure'),
{% set navigation_bar = [
('/', 'index', 'Home'),
('/handbook', 'handbook', 'Handbook'),
(player_bar, 'section', 'Player Resources'),
(judge_bar, 'section', 'Judge Resources'),
('https://reddit.com/r/PalismaACKS', 'subreddit', '/r/PalismaACKS'),
] %} ] %}
{% set active_page = active_page|default('index') %} {% set active_page = active_page|default('index') %}
<!doctype html> <!doctype html>
@ -33,7 +39,20 @@
<script src="https://cdn.jsdelivr.net/npm/uikit@3.2.4/dist/js/uikit.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/uikit@3.2.4/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.2.4/dist/js/uikit-icons.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/uikit@3.2.4/dist/js/uikit-icons.min.js"></script>
{% block head %} {% endblock %}
<style>
h1 strong {
display: block;
font-size: 50%;
opacity: 0.65;
}
.uk-navbar-nav > li > a {
font-size: 1em;
text-transform: none;
}
</style>
{% block head %}
{% endblock %}
</head> </head>
<body> <body>
<nav class="uk-navbar-container" uk-navbar> <nav class="uk-navbar-container" uk-navbar>
@ -44,26 +63,24 @@
<div class="uk-navbar-center uk-visible@m"> <div class="uk-navbar-center uk-visible@m">
<ul class="uk-navbar-nav"> <ul class="uk-navbar-nav">
{% for href, id, label in navigation_bar %} {% for href, id, label in navigation_bar %}
<li {% if id == active_page %} class="uk-active" {% endif %}>
{% if id == 'generate' %}
{% if id == 'section' %}
<li>
<a href="">{{ label|e }}</a> <a href="">{{ label|e }}</a>
<div class="uk-navbar-dropdown"> <div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav"> <ul class="uk-nav uk-navbar-dropdown-nav">
{% for ghref, gid, glabel in generation_bar %}
{% for phref, pid, plabel in href %}
<li> <li>
<a href="{{ ghref | e }}" {% if gid == 'treasure' %}target="_blank"{% endif %}>
{{ glabel|e }}
</a>
<a href="{{ phref|e }}">{{ plabel|e }}</a>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
</li>
{% else %} {% else %}
{% if href != '.header' %}
<li {% if id == active_page %} class="uk-active" {% endif %}>
<a href="{{ href|e }}">{{ label|e }}</a> <a href="{{ href|e }}">{{ label|e }}</a>
{% endif %}
{% endif %}
</li> </li>
{% endif %}
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
@ -72,17 +89,14 @@
<div class="uk-offcanvas-bar uk-flex uk-flex-column"> <div class="uk-offcanvas-bar uk-flex uk-flex-column">
<ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical"> <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical">
{% for href, id, label in navigation_bar %} {% for href, id, label in navigation_bar %}
{% if href == '.header' %}
<li class="uk-nav-header">{{ label|e }}</li>
{% if id == 'generate' %}
{% for ghref, gid, glabel in generation_bar %}
<li {% if gid == active_page %} class="uk-active" {% endif %}>
<a href="{{ ghref | e }}" {% if gid == 'treasure' %}target="_blank"{% endif %}>
{{ glabel|e }}
</a>
{% if id == 'section' %}
<li class="uk-nav-header uk-margin-large-top">{{ label|e }}</li>
{% for phref, pid, plabel in href %}
<li {% if pid == active_page %} class="uk-active" {% endif %}>
<a href="{{ phref|e }}">{{ plabel|e }}</a>
</li> </li>
{% endfor %} {% endfor %}
{% endif %}
<li class="uk-margin-large-bottom"/>
{% else %} {% else %}
<li {% if id == active_page %} class="uk-active" {% endif %}> <li {% if id == active_page %} class="uk-active" {% endif %}>
<a href="{{ href|e }}">{{ label|e }}</a> <a href="{{ href|e }}">{{ label|e }}</a>
@ -101,5 +115,8 @@
ACKS &amp; related &copy; <a href="http://www.autarch.co/">Autarch</a>. ACKS &amp; related &copy; <a href="http://www.autarch.co/">Autarch</a>.
</div> </div>
</footer> </footer>
{% block scripts %}
{% endblock %}
</body> </body>
</html> </html>

34
acks/templates/lair_gallery.html
View File

@ -1,7 +1,7 @@
{% extends "base.html" %} {% extends "base.html" %}
{% set active_page = "lairs" %} {% set active_page = "lairs" %}
{% block title %}Maps{% endblock %}
{% block title %}Dynamic Lairs{% endblock %}
{% block content %} {% block content %}
<div class="uk-flex uk-flex-center uk-margin-bottom uk-margin-top"> <div class="uk-flex uk-flex-center uk-margin-bottom uk-margin-top">
<h1 class="uk-text-center"><strong>Adventurer Conqueror King</strong>Dynamic Lairs</h1> <h1 class="uk-text-center"><strong>Adventurer Conqueror King</strong>Dynamic Lairs</h1>
@ -11,6 +11,7 @@
<!-- Animal Lairs --> <!-- Animal Lairs -->
<h2 class="uk-text-center"><strong>Animal Lairs</strong></h2> <h2 class="uk-text-center"><strong>Animal Lairs</strong></h2>
<div uk-slider> <div uk-slider>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
<div class="uk-position-relative"> <div class="uk-position-relative">
<div class="uk-slider-container uk-light"> <div class="uk-slider-container uk-light">
<ul id="animal-lairs" class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m"> <ul id="animal-lairs" class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
@ -22,12 +23,12 @@
<a class="uk-position-center-left-out" href="#" uk-slidenav-previous uk-slider-item="previous"></a> <a class="uk-position-center-left-out" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right-out" href="#" uk-slidenav-next uk-slider-item="next"></a> <a class="uk-position-center-right-out" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div> </div>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div> </div>
<!-- Humanoid Lairs --> <!-- Humanoid Lairs -->
<h2 class="uk-text-center"><strong>Humanoid Lairs</strong></h2> <h2 class="uk-text-center"><strong>Humanoid Lairs</strong></h2>
<div uk-slider> <div uk-slider>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
<div class="uk-position-relative"> <div class="uk-position-relative">
<div class="uk-slider-container uk-light"> <div class="uk-slider-container uk-light">
<ul id="humanoid-lairs" class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m"> <ul id="humanoid-lairs" class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
@ -39,28 +40,12 @@
<a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a> <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a> <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
</div> </div>
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
</div> </div>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/lightgallery.js@1.4.0/dist/js/lightgallery.min.js" integrity="sha256-0Zhc9IDI5elFpwJZlvdAM4u/6qlxi4qIOUlHDVl5wjU=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/lg-thumbnail.js@1.2.0/dist/lg-thumbnail.min.js" integrity="sha256-h70L9O3prxviKHrPHwrId33HakkgnURiB1KBHDyZOJc=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/lg-fullscreen.js@1.2.0/dist/lg-fullscreen.min.js" integrity="sha256-5VFY2GRRpY51CgT/ku3jPvpWybxJ2n+pbDNz05amGwk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/lg-zoom.js@1.3.0/dist/lg-zoom.min.js" integrity="sha256-pw9GIEB9jGoek+S5xfa2Uz/8dZVjZsIYVJxy3jK3qgI=" crossorigin="anonymous"></script>
<script type="text/javascript">
lightGallery(document.getElementById('animal-lairs'));
lightGallery(document.getElementById('humanoid-lairs'));
</script>
{% endblock %} {% endblock %}
{% block head %} {% block head %}
<style> <style>
h1 strong {
display: block;
font-size: 50%;
opacity: 0.65;
}
li.gallery-img-li { li.gallery-img-li {
overflow: hidden; overflow: hidden;
border-radius: 4px; border-radius: 4px;
@ -78,3 +63,16 @@ li.gallery-img-li > img {
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery.js@1.4.0/dist/css/lightgallery.min.css" integrity="sha256-s47mXWRWvrLQNL9VRQX0ykfkIVSLfNJuingF/SZztsM=" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery.js@1.4.0/dist/css/lightgallery.min.css" integrity="sha256-s47mXWRWvrLQNL9VRQX0ykfkIVSLfNJuingF/SZztsM=" crossorigin="anonymous">
{% endblock %} {% endblock %}
{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/lightgallery.js@1.4.0/dist/js/lightgallery.min.js" integrity="sha256-0Zhc9IDI5elFpwJZlvdAM4u/6qlxi4qIOUlHDVl5wjU=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/lg-thumbnail.js@1.2.0/dist/lg-thumbnail.min.js" integrity="sha256-h70L9O3prxviKHrPHwrId33HakkgnURiB1KBHDyZOJc=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/lg-fullscreen.js@1.2.0/dist/lg-fullscreen.min.js" integrity="sha256-5VFY2GRRpY51CgT/ku3jPvpWybxJ2n+pbDNz05amGwk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/lg-zoom.js@1.3.0/dist/lg-zoom.min.js" integrity="sha256-pw9GIEB9jGoek+S5xfa2Uz/8dZVjZsIYVJxy3jK3qgI=" crossorigin="anonymous"></script>
<script type="text/javascript">
lightGallery(document.getElementById('animal-lairs'));
lightGallery(document.getElementById('humanoid-lairs'));
</script>
{% endblock %}
Write Preview
Loading…
Cancel
Save