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
|
|
@ -20,19 +20,31 @@ def groups():
|
|||
"""
|
||||
Group overview, shows all image groups
|
||||
"""
|
||||
# Get all groups
|
||||
group_list = db_session.query(db.Groups).all()
|
||||
|
||||
# For each group, get the 3 most recent images
|
||||
for group_item in group_list:
|
||||
thumbnail = db_session.query(db.GroupJunction.post_id)\
|
||||
group_item.author_username = db_session.query(db.Users.username)\
|
||||
.filter(db.Users.id == group_item.author_id)\
|
||||
.first()[0]
|
||||
|
||||
# Get the 3 most recent images
|
||||
group_images = db_session.query(db.GroupJunction.post_id)\
|
||||
.filter(db.GroupJunction.group_id == group_item.id)\
|
||||
.order_by(db.GroupJunction.date_added.desc())\
|
||||
.first()
|
||||
.limit(3)
|
||||
|
||||
if thumbnail:
|
||||
group_item.thumbnail = db_session.query(db.Posts.file_name, db.Posts.post_alt,
|
||||
db.Posts.image_colours, db.Posts.id)\
|
||||
.filter(db.Posts.id == thumbnail[0])\
|
||||
.first()
|
||||
# Add an empty list to the group item
|
||||
group_item.images = []
|
||||
# For each image, get the image data and add it to the group item
|
||||
for image in group_images:
|
||||
group_item.images.append(db_session.query(db.Posts.file_name,
|
||||
db.Posts.post_alt,
|
||||
db.Posts.image_colours,
|
||||
db.Posts.id)\
|
||||
.filter(db.Posts.id == image[0])\
|
||||
.first())
|
||||
|
||||
return render_template('groups/list.html', groups=group_list)
|
||||
|
||||
|
|
@ -88,14 +100,15 @@ def group_post(group_id, image_id):
|
|||
.filter(db.Users.id == img.author_id)\
|
||||
.first()[0]
|
||||
|
||||
group_list = db_session.query(db.GroupJunction.group_id)\
|
||||
groups = db_session.query(db.GroupJunction.group_id)\
|
||||
.filter(db.GroupJunction.post_id == image_id)\
|
||||
.all()
|
||||
|
||||
img.group_list = []
|
||||
for group_item in group_list:
|
||||
group_item = db_session.query(db.Groups).filter(db.Groups.id == group_item[0]).first()
|
||||
img.group_list.append(group_item)
|
||||
img.groups = []
|
||||
for group in groups:
|
||||
group = db_session.query(db.Groups).filter(db.Groups.id == group[0]).first()
|
||||
img.groups.append(group)
|
||||
|
||||
|
||||
next_url = db_session.query(db.GroupJunction.post_id)\
|
||||
.filter(db.GroupJunction.group_id == group_id)\
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -70,7 +70,6 @@
|
|||
|
||||
&.small
|
||||
height: 3.5rem
|
||||
|
||||
background-color: RGB($bg-100)
|
||||
|
||||
.banner-content
|
||||
|
|
|
|||
|
|
@ -2,23 +2,26 @@
|
|||
margin: 0
|
||||
padding: 0.25rem 0.5rem
|
||||
|
||||
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
gap: 0.25rem
|
||||
|
||||
font-size: 1rem
|
||||
font-size: 0.9rem
|
||||
font-weight: 500
|
||||
text-decoration: none
|
||||
|
||||
border-radius: $rad-inner
|
||||
background-color: RGB($primary)
|
||||
color: RGB($bg-100)
|
||||
border: none
|
||||
background-color: RGBA($primary, 0.1)
|
||||
color: RGB($primary)
|
||||
|
||||
cursor: pointer
|
||||
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out
|
||||
|
||||
svg
|
||||
width: 1.15rem
|
||||
height: 1.15rem
|
||||
height: 1.15rem
|
||||
|
||||
&:hover
|
||||
background-color: RGBA($primary, 0.3)
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@
|
|||
left: 0
|
||||
|
||||
width: 100%
|
||||
height: 3rem
|
||||
height: 5rem
|
||||
|
||||
z-index: +1
|
||||
|
||||
|
|
|
|||
|
|
@ -26,50 +26,40 @@
|
|||
padding: 0.5rem
|
||||
|
||||
width: 100%
|
||||
height: 100%
|
||||
height: 30%
|
||||
|
||||
position: absolute
|
||||
left: 0
|
||||
bottom: -1rem
|
||||
bottom: 0
|
||||
|
||||
display: flex
|
||||
flex-direction: column
|
||||
justify-content: flex-end
|
||||
|
||||
background-image: linear-gradient(to top, $bg-transparent, transparent)
|
||||
|
||||
z-index: +1
|
||||
|
||||
background-image: linear-gradient(to top, rgba($bg-100, 0.5), transparent)
|
||||
opacity: 0 // hide
|
||||
transition: all 0.3s cubic-bezier(.79, .14, .15, .86)
|
||||
|
||||
.image-title
|
||||
margin: 0
|
||||
z-index: +4
|
||||
transition: background-image 0.3s cubic-bezier(.79, .14, .15, .86), opacity 0.3s cubic-bezier(.79, .14, .15, .86)
|
||||
|
||||
font-size: 1rem
|
||||
font-weight: 600
|
||||
.image-title,
|
||||
.image-subtitle
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
color: RGB($fg-white)
|
||||
white-space: nowrap
|
||||
text-overflow: ellipsis
|
||||
overflow: hidden
|
||||
|
||||
text-overflow: ellipsis
|
||||
overflow: hidden
|
||||
color: RGB($fg-white)
|
||||
|
||||
opacity: 0 // hide
|
||||
transition: all 0.2s ease-in-out
|
||||
.image-title
|
||||
font-size: 0.9rem
|
||||
font-weight: 800
|
||||
|
||||
.image-subtitle
|
||||
margin: 0
|
||||
|
||||
font-size: 0.8rem
|
||||
font-weight: 500
|
||||
|
||||
color: RGB($fg-white)
|
||||
|
||||
text-overflow: ellipsis
|
||||
overflow: hidden
|
||||
|
||||
opacity: 0 // hide
|
||||
transition: all 0.2s ease-in-out
|
||||
.image-subtitle
|
||||
font-size: 0.8rem
|
||||
font-weight: 600
|
||||
|
||||
img
|
||||
width: 100%
|
||||
|
|
@ -99,15 +89,155 @@
|
|||
|
||||
&:hover
|
||||
.image-filter
|
||||
bottom: 0
|
||||
opacity: 1
|
||||
|
||||
.image-title,
|
||||
.image-subtitle
|
||||
background-image: linear-gradient(to top, rgba($bg-100, 0.69), transparent)
|
||||
opacity: 1
|
||||
|
||||
img
|
||||
transform: scale(1)
|
||||
|
||||
.group-item
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
height: auto
|
||||
|
||||
position: relative
|
||||
|
||||
border-radius: $rad
|
||||
|
||||
box-sizing: border-box
|
||||
overflow: hidden
|
||||
|
||||
.image-filter
|
||||
margin: 0
|
||||
padding: 0.5rem
|
||||
|
||||
width: 100%
|
||||
height: 30%
|
||||
|
||||
position: absolute
|
||||
left: 0
|
||||
bottom: 0
|
||||
|
||||
display: flex
|
||||
flex-direction: column
|
||||
justify-content: flex-end
|
||||
|
||||
background-image: linear-gradient(to top, rgba($bg-100, 0.8), transparent)
|
||||
|
||||
z-index: +4
|
||||
|
||||
.image-title,
|
||||
.image-subtitle
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
white-space: nowrap
|
||||
text-overflow: ellipsis
|
||||
overflow: hidden
|
||||
|
||||
color: RGB($fg-white)
|
||||
|
||||
.image-title
|
||||
font-size: 0.9rem
|
||||
font-weight: 800
|
||||
|
||||
.image-subtitle
|
||||
font-size: 0.8rem
|
||||
font-weight: 600
|
||||
|
||||
.images
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
position: absolute
|
||||
inset: 0
|
||||
|
||||
display: block
|
||||
|
||||
background-color: RGB($fg-white)
|
||||
|
||||
img
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
|
||||
object-fit: cover
|
||||
object-position: center
|
||||
|
||||
background-color: RGB($fg-white)
|
||||
border-radius: $rad-inner
|
||||
box-shadow: 0 0 0.4rem 0.25rem RGBA($bg-100, 0.25)
|
||||
filter: blur(0.5rem)
|
||||
opacity: 0
|
||||
|
||||
transition: all 0.2s cubic-bezier(.79, .14, .15, .86)
|
||||
|
||||
&.loaded
|
||||
filter: blur(0)
|
||||
opacity: 1
|
||||
|
||||
&.size-1
|
||||
.data-1
|
||||
transform: scale(0.8) rotate(3deg)
|
||||
|
||||
&.size-2
|
||||
.data-1
|
||||
transform: scale(0.7) rotate(-3deg) translate(10%, 10%)
|
||||
z-index: +2
|
||||
.data-2
|
||||
transform: scale(0.7) rotate(3deg) translate(-10%, -10%)
|
||||
z-index: +1
|
||||
|
||||
&.size-3
|
||||
.data-1
|
||||
transform: scale(0.6) rotate(3deg) translate(-25%, 25%)
|
||||
z-index: +3
|
||||
.data-2
|
||||
transform: scale(0.6) rotate(-5deg) translate(25%, 10%)
|
||||
z-index: +2
|
||||
.data-3
|
||||
transform: scale(0.6) rotate(-1deg) translate(-15%, -25%)
|
||||
z-index: +1
|
||||
|
||||
&:after
|
||||
content: ""
|
||||
display: block
|
||||
padding-bottom: 100%
|
||||
|
||||
&:hover
|
||||
.images
|
||||
img
|
||||
box-shadow: 0 0 0.4rem 0.25rem RGBA($bg-100, 0.1)
|
||||
|
||||
&.size-1
|
||||
.data-1
|
||||
transform: scale(0.9) rotate(0deg)
|
||||
|
||||
&.size-2
|
||||
.data-1
|
||||
transform: scale(0.75) rotate(-1deg) translate(12%, 14%)
|
||||
z-index: +2
|
||||
.data-2
|
||||
transform: scale(0.75) rotate(1deg) translate(-12%, -10%)
|
||||
z-index: +1
|
||||
|
||||
&.size-3
|
||||
.data-1
|
||||
transform: scale(0.65) rotate(1deg) translate(-24%, 24%)
|
||||
z-index: +3
|
||||
.data-2
|
||||
transform: scale(0.65) rotate(-2deg) translate(24%, 10%)
|
||||
z-index: +2
|
||||
.data-3
|
||||
transform: scale(0.65) rotate(0deg) translate(-15%, -25%)
|
||||
z-index: +1
|
||||
|
||||
@media (max-width: 800px)
|
||||
.gallery-grid
|
||||
|
|
|
|||
|
|
@ -109,6 +109,23 @@
|
|||
text-overflow: ellipsis
|
||||
overflow: hidden
|
||||
|
||||
.link
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
font-size: 1rem
|
||||
font-weight: 500
|
||||
text-align: center
|
||||
line-height: 1
|
||||
|
||||
color: RGB($primary)
|
||||
|
||||
cursor: pointer
|
||||
text-decoration: none
|
||||
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
|
||||
table
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
|
@ -177,13 +194,13 @@
|
|||
justify-content: center
|
||||
align-items: center
|
||||
|
||||
border-radius: 50%
|
||||
border: 1px solid RGB($white)
|
||||
border-radius: $rad-inner
|
||||
// border: 1px solid RGB($white)
|
||||
|
||||
.img-groups
|
||||
width: 100%
|
||||
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
gap: 0.5rem
|
||||
|
||||
@media (max-width: 1100px)
|
||||
|
|
|
|||
|
|
@ -113,19 +113,23 @@
|
|||
opacity: 1
|
||||
left: 3.9rem
|
||||
|
||||
&.selected::before
|
||||
content: ''
|
||||
display: block
|
||||
&.selected
|
||||
> svg
|
||||
color: RGB($primary)
|
||||
|
||||
position: absolute
|
||||
top: 3px
|
||||
left: 0
|
||||
&::before
|
||||
content: ''
|
||||
display: block
|
||||
|
||||
width: 3px
|
||||
height: calc(100% - 6px)
|
||||
position: absolute
|
||||
top: 3px
|
||||
left: 0
|
||||
|
||||
background-color: RGB($primary)
|
||||
border-radius: 0 $rad-inner $rad-inner 0
|
||||
width: 3px
|
||||
height: calc(100% - 6px)
|
||||
|
||||
background-color: RGB($primary)
|
||||
border-radius: 0 $rad-inner $rad-inner 0
|
||||
|
||||
@media (max-width: $breakpoint)
|
||||
.navigation
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue