xevion/simple-viewer
1
0
Fork 0
mirror of https://github.com/Xevion/simple-viewer.git synced 2025-12-09 10:08:45 -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;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-end;
justify-content: flex-end; // Send all items to end
align-content: stretch;
align-items: flex-start;
width: 100%;
div {
align-self: auto;
}
flex: 0 1 auto; // End child shrink
div:nth-child(1) {
flex: 1 1 auto;
}
div:nth-child(2), div:nth-child(3) {
flex: 0 1 auto;
// First child grows to fill the start
&:nth-child(1) {
flex: 1 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 {
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>
{% endblock head %}
{% block content %}
@@ -32,13 +21,13 @@
</span>
</p>
</div>
<div class="action-set">
<span class="action icon">
<div class="icon-set">
<span class="icon">
<a href="{% url 'index' %}">
<i class="fas fa-arrow-up" aria-hidden="true"></i>
</a>
</span>
<span class="action icon">
<span class="icon">
<a href="{% url 'refresh' directory.id %}">
<i class="fas fa-sync"></i>
</a>

32
viewer/templates/index.html
View File

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