Galleries/PythonGallery
1
0
Fork 0
mirror of https://github.com/Derpy-Leggies/OnlyLegs.git synced 2025-06-29 19:46:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make image groupings prettier

Browse source 
Fix image view from a group not showing the groups its in
Make drag target bigger for upload tab
Tags are now correctly overflowing
This commit is contained in:
Michał Gdula 2023-04-01 16:16:07 +00:00
parent cf65b8d309
commit 0e24004c0b
10 changed files with 260 additions and 116 deletions
Download patch file Download diff file Expand all files Collapse all files

12
gallery/templates/groups/group.html
View file

@ -11,11 +11,11 @@
}
.banner-filter {
background: linear-gradient(to right, rgb({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }}), transparent) !important;
background: linear-gradient(90deg, rgb({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }}), rgba({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }}, 0.3)) !important;
}
@media (max-width: 800px) {
.banner-filter {
background: linear-gradient(to bottom, rgb({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }}), transparent) !important;
background: linear-gradient(180deg, rgba({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }}, 0.8), rgba({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }}, 0.5)) !important;
}
}
{% endif %}
@ -29,12 +29,8 @@
<p>By {{ group.author_username }}</p>
</div>
{% else %}
<img
src="/api/file/{{ images.0.file_name }}?r=prev"
onload="imgFade(this)"
style="opacity:0;"
/>
<span class="banner-filter" ></span>
<img src="{{ url_for('api.file', file_name=images.0.file_name ) }}?r=prev" onload="imgFade(this)" style="opacity:0;"/>
<span class="banner-filter"></span>
<div class="banner-content">
<p>By {{ group.author_username }} - {{ images|length }} Images</p>
<h1>{{ group.name }}</h1>

32
gallery/templates/groups/list.html
View file

@ -23,23 +23,21 @@
{% if groups %}
<div class="gallery-grid">
{% for group in groups %}
{% if group.thumbnail %}
<a id="group-{{ group.id }}" class="gallery-item" href="{{ url_for('group.group', group_id=group.id) }}" style="background-color: rgb({{ group.thumbnail.image_colours.0.0 }}, {{ group.thumbnail.image_colours.0.1 }}, {{ group.thumbnail.image_colours.0.2 }})">
<div class="image-filter">
<p class="image-subtitle"></p>
<p class="image-title">{{ group.name }}</p>
</div>
<img data-src="{{ group.thumbnail.file_name }}" onload="this.classList.add('loaded');" id="lazy-load"/>
</a>
{% else %}
<a id="group-{{ group.id }}" class="gallery-item" href="{{ url_for('group.group', group_id=group.id) }}">
<div class="image-filter">
<p class="image-subtitle"></p>
<p class="image-title">{{ group.name }}</p>
</div>
<img src="{{ url_for('static', filename='error.png') }}" onload="this.classList.add('loaded');"/>
</a>
{% endif %}
<a id="group-{{ group.id }}" class="group-item" href="{{ url_for('group.group', group_id=group.id) }}">
<div class="image-filter">
<p class="image-subtitle">By {{ group.author_username }}</p>
<p class="image-title">{{ group.name }}</p>
</div>
<div class="images size-{{ group.images|length }}">
{% if group.images|length > 0 %}
{% for image in group.images %}
<img data-src="{{ image.file_name }}" onload="this.classList.add('loaded');" id="lazy-load" class="data-{{ loop.index }}"/>
{% endfor %}
{% else %}
<img src="{{ url_for('static', filename='error.png') }}" class="loaded"/>
{% endif %}
</div>
</a>
{% endfor %}
</div>
{% else %}