xevion/simple-viewer
1
0
Fork 0
mirror of https://github.com/Xevion/simple-viewer.git synced 2025-12-10 20:08:36 -06:00
Code Issues Packages Projects Releases Wiki Activity

improve flexbox icon's selector name and organization, apply to index icons and reorganize tags

Browse Source
This commit is contained in:
Xevion
2020-11-06 07:49:37 -06:00
parent b0df8057a8
commit 5692836bec
3 changed files with 40 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
viewer/static/css/main.scss
View File

@@ -103,19 +103,29 @@ html, body {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: flex-end; justify-content: flex-end; // Send all items to end
align-content: stretch; align-content: stretch;
align-items: flex-start; align-items: flex-start;
width: 100%;
div { div {
align-self: auto; align-self: auto;
} flex: 0 1 auto; // End child shrink
div:nth-child(1) { // First child grows to fill the start
flex: 1 1 auto; &:nth-child(1) {
} flex: 1 1 auto;
}
div:nth-child(2), div:nth-child(3) {
flex: 0 1 auto;
} }
} }
.icon-set {
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
align-content: stretch;
align-items: center;
padding: 0 0.5rem;
}

17
viewer/templates/browse.html
View File

@@ -7,17 +7,6 @@
.file-count { .file-count {
font-weight: 400; font-style: italic; font-size: 70%; font-weight: 400; font-style: italic; font-size: 70%;
} }
.action-set {
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-around;
align-content: stretch;
align-items: center;
padding: 0 0.5rem;
}
</style> </style>
{% endblock head %} {% endblock head %}
{% block content %} {% block content %}
@@ -32,13 +21,13 @@
</span> </span>
</p> </p>
</div> </div>
<div class="action-set"> <div class="icon-set">
<span class="action icon"> <span class="icon">
<a href="{% url 'index' %}"> <a href="{% url 'index' %}">
<i class="fas fa-arrow-up" aria-hidden="true"></i> <i class="fas fa-arrow-up" aria-hidden="true"></i>
</a> </a>
</span> </span>
<span class="action icon"> <span class="icon">
<a href="{% url 'refresh' directory.id %}"> <a href="{% url 'refresh' directory.id %}">
<i class="fas fa-sync"></i> <i class="fas fa-sync"></i>
</a> </a>

32
viewer/templates/index.html
View File

@@ -4,21 +4,27 @@
<div class="panel-heading">Directories</div> <div class="panel-heading">Directories</div>
{% if directories|length > 0 %} {% if directories|length > 0 %}
{% for served_directory in directories %} {% for served_directory in directories %}
<div class="panel-block is-flex"> <div class="panel-block">
<span class="panel-icon is-align-self-flex-start"> <span class="panel-icon">
<i class="fas fa-folder fa-lg" aria-hidden="true"></i> <i class="fas fa-folder fa-lg" aria-hidden="true"></i>
</span> </span>
<a href="{% url 'browse' served_directory.id %}" class="is-align-self-flex-end"> <div class="flex-container">
{{ served_directory.path }} <div>
{% if served_directory.regex %} <a href="{% url 'browse' served_directory.id %}" class="is-align-self-flex-end">
<span class="tag is-primary">Filtered</span> {{ served_directory.path }}
{% endif %} </a>
</a> {% if served_directory.regex %}
<a href="{% url 'delete' served_directory.id %}"> <span class="tag is-primary ml-3 mr-2">Filtered</span>
<span class="icon has-text-danger"> {% endif %}
<i class="fas fa-times fa-lg" aria-hidden="true"></i> </div>
</span> <div class="icon-set">
</a> <span class="icon">
<a class="has-text-danger" href="{% url 'delete' served_directory.id %}">
<i class="fas fa-times fa-lg" aria-hidden="true"></i>
</a>
</span>
</div>
</div>
</div> </div>
{% endfor %} {% endfor %}
{% else %} {% else %}