mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2025-06-29 11:36:16 +00:00
Make image groupings prettier
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:
parent
cf65b8d309
commit
0e24004c0b
10 changed files with 260 additions and 116 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -197,45 +197,29 @@
|
|||
</svg>
|
||||
</div>
|
||||
<div class="info-table">
|
||||
<div class="img-colours">
|
||||
{% for col in image.image_colours %}
|
||||
<span style="background-color: rgb({{col.0}}, {{col.1}}, {{col.2}})"></span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<table>
|
||||
<tr>
|
||||
<td>Image ID</td>
|
||||
<td>{{ image['id'] }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Author</td>
|
||||
<td>{{ image.author_username }}</td>
|
||||
<td><a href="{{ url_for('gallery.profile_id', user_id=image.author_id ) }}" class="link">{{ image.author_username }}</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Upload date</td>
|
||||
<td><span class="time">{{ image.created_at }}</span></td>
|
||||
</tr>
|
||||
</table>
|
||||
{% if group and image.author_id == g.user.id %}
|
||||
<div class="img-colours">
|
||||
{% for col in image.image_colours %}
|
||||
<span style="background-color: rgb({{col.0}}, {{col.1}}, {{col.2}})"></span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% if image.groups %}
|
||||
<div class="img-groups">
|
||||
{% for group in image.groups %}
|
||||
<a href="/group/{{ group.id }}" class="tag-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M224,88V200.89a7.11,7.11,0,0,1-7.11,7.11H40a8,8,0,0,1-8-8V64a8,8,0,0,1,8-8H93.33a8,8,0,0,1,4.8,1.6l27.74,20.8a8,8,0,0,0,4.8,1.6H216A8,8,0,0,1,224,88Z" opacity="0.2"></path><path d="M216,72H130.67L102.93,51.2a16.12,16.12,0,0,0-9.6-3.2H40A16,16,0,0,0,24,64V200a16,16,0,0,0,16,16H216.89A15.13,15.13,0,0,0,232,200.89V88A16,16,0,0,0,216,72Zm0,128H40V64H93.33l27.74,20.8a16.12,16.12,0,0,0,9.6,3.2H216Z"></path></svg>
|
||||
<a href="{{ url_for('group.group', group_id=group.id) }}" class="tag-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M216,72H131.31L104,44.69A15.86,15.86,0,0,0,92.69,40H40A16,16,0,0,0,24,56V200.62A15.4,15.4,0,0,0,39.38,216H216.89A15.13,15.13,0,0,0,232,200.89V88A16,16,0,0,0,216,72ZM40,56H92.69l16,16H40ZM216,200H40V88H216Z"></path></svg>
|
||||
{{ group['name'] }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
|
||||
<button class="tag-icon" id="#img-group">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
{% elif image.author_id == g.user.id %}
|
||||
<div class="img-groups">
|
||||
<button class="tag-icon" id="#img-group">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue