added divider and spoiler for tags

This commit is contained in:
Xevion
2019-07-01 21:29:33 -05:00
parent 161380d235
commit 60c499d471
2 changed files with 29 additions and 16 deletions

View File

@@ -12,7 +12,7 @@
{% block head %} {% block head %}
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-divider@2.0.1/dist/css/bulma-divider.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script> <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<style type="text/css"> <style type="text/css">
/* Single line word breaking for content */ /* Single line word breaking for content */
@@ -26,6 +26,7 @@
} }
</style> </style>
{% endblock head %} {% endblock head %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-divider@2.0.1/dist/css/bulma-divider.min.css">
</head> </head>
<body> <body>
@@ -35,7 +36,9 @@
Xevion Xevion
</a> </a>
<a role="button" id="navbar-burger-id" class="navbar-burger burger" onclick="document.querySelector('.navbar-menu').classList.toggle('is-active');" aria-label="menu" aria-expanded="false"> <a role="button" id="navbar-burger-id" class="navbar-burger burger"
onclick="document.querySelector('.navbar-menu').classList.toggle('is-active');" aria-label="menu"
aria-expanded="false">
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
<span aria-hidden="true"></span> <span aria-hidden="true"></span>

View File

@@ -36,8 +36,8 @@
<label for="tags">Tags</label> <label for="tags">Tags</label>
<p class="control has-icons-left"> <p class="control has-icons-left">
<input class="input" type="search" name="tags" value="{{ tags }}""/> <input class="input" type="search" name="tags" value="{{ tags }}""/>
<span class="icon is-small is-left"> <span class=" icon is-small is-left">
<i class="fas fa-search"></i> <i class="fas fa-search"></i>
</span> </span>
</p> </p>
</div> </div>
@@ -45,7 +45,8 @@
<div class="field"> <div class="field">
<label for="count">Count</label> <label for="count">Count</label>
<p class="control has-icons-left"> <p class="control has-icons-left">
<input class="input" type="number" min="0" max="1000" name="count" value="{{ count or 50}}" /> <input class="input" type="number" min="0" max="1000" name="count"
value="{{ count or 50}}" />
<span class="icon is-small is-left"> <span class="icon is-small is-left">
<i class="fas fa-equals"></i> <i class="fas fa-equals"></i>
</span> </span>
@@ -54,7 +55,8 @@
<div class="field"> <div class="field">
<label for="page">Page</label> <label for="page">Page</label>
<p class="control has-icons-left"> <p class="control has-icons-left">
<input class="input" type="number" min="0" max="1000" name="page" value="{{ page or 0 }}" /> <input class="input" type="number" min="0" max="1000" name="page"
value="{{ page or 0 }}" />
<span class="icon is-small is-left"> <span class="icon is-small is-left">
<i class="fas fa-flask"></i> <i class="fas fa-flask"></i>
</span> </span>
@@ -62,15 +64,18 @@
</div> </div>
<div class="field"> <div class="field">
<label for="base64">Use base64 encoding?</label> <label for="base64">Use base64 encoding?</label>
<input type="checkbox" name="base64" value="true" {% if base64 %}checked{% endif %}/> <input type="checkbox" name="base64" value="true"
{% if base64 %}checked{% endif %} />
</div> </div>
<div class="field"> <div class="field">
<label for="showsample">Show fullsize (instead of thumbnail image)?</label> <label for="showsample">Show fullsize (instead of thumbnail image)?</label>
<input type="checkbox" name="showfull" value="true" {% if showfull %}checked{% endif %}/> <input type="checkbox" name="showfull" value="true"
{% if showfull %}checked{% endif %} />
</div> </div>
<div class="field"> <div class="field">
<label for="showtags">Show tags of image?</label> <label for="showtags">Show tags of image?</label>
<input type="checkbox" name="showtags" value="true" {% if showtags %}checked{% endif %}/> <input type="checkbox" name="showtags" value="true"
{% if showtags %}checked{% endif %} />
</div> </div>
<div class="columns is-centered"> <div class="columns is-centered">
<div class="column is-4"> <div class="column is-4">
@@ -78,7 +83,8 @@
</div> </div>
<div class="column is-5"></div> <div class="column is-5"></div>
<div class="column"> <div class="column">
<a class="button is-info is-outlined" href="{{ request.path + '/help' }}">Help</a> <a class="button is-info is-outlined"
href="{{ request.path + '/help' }}">Help</a>
</div> </div>
</div> </div>
</form> </form>
@@ -93,7 +99,7 @@
<div class="card"> <div class="card">
<div class="card-header"> <div class="card-header">
<div class="card-header-title"> <div class="card-header-title">
Image #{{ image.index }} <a href="{{ image.view }}"><sup class="sup" >source</sup></a> Image #{{ image.index }} <a href="{{ image.view }}"><sup class="sup">source</sup></a>
</div> </div>
</div> </div>
<div class="card-image"> <div class="card-image">
@@ -114,11 +120,15 @@
{% if showtags %} {% if showtags %}
<div class="card-content"> <div class="card-content">
<div class="content word-break resize-font"> <div class="content word-break resize-font">
{% for tag in image.tags %} <details>
<span class="pad-tag tag"> <summary>Show Tags</summary>
{{ tag }} <div class="is-divider" data-content="Tags ({{ image.tags|length }})"></div>
</span> {% for tag in image.tags %}
{% endfor %} <span class="pad-tag tag">
{{ tag }}
</span>
{% endfor %}
</details>
</div> </div>
</div> </div>
{% endif %} {% endif %}