mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2025-06-29 03:26: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
|
Group overview, shows all image groups
|
||||||
"""
|
"""
|
||||||
|
# Get all groups
|
||||||
group_list = db_session.query(db.Groups).all()
|
group_list = db_session.query(db.Groups).all()
|
||||||
|
|
||||||
|
# For each group, get the 3 most recent images
|
||||||
for group_item in group_list:
|
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)\
|
.filter(db.GroupJunction.group_id == group_item.id)\
|
||||||
.order_by(db.GroupJunction.date_added.desc())\
|
.order_by(db.GroupJunction.date_added.desc())\
|
||||||
.first()
|
.limit(3)
|
||||||
|
|
||||||
if thumbnail:
|
# Add an empty list to the group item
|
||||||
group_item.thumbnail = db_session.query(db.Posts.file_name, db.Posts.post_alt,
|
group_item.images = []
|
||||||
db.Posts.image_colours, db.Posts.id)\
|
# For each image, get the image data and add it to the group item
|
||||||
.filter(db.Posts.id == thumbnail[0])\
|
for image in group_images:
|
||||||
.first()
|
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)
|
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)\
|
.filter(db.Users.id == img.author_id)\
|
||||||
.first()[0]
|
.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)\
|
.filter(db.GroupJunction.post_id == image_id)\
|
||||||
.all()
|
.all()
|
||||||
|
|
||||||
img.group_list = []
|
img.groups = []
|
||||||
for group_item in group_list:
|
for group in groups:
|
||||||
group_item = db_session.query(db.Groups).filter(db.Groups.id == group_item[0]).first()
|
group = db_session.query(db.Groups).filter(db.Groups.id == group[0]).first()
|
||||||
img.group_list.append(group_item)
|
img.groups.append(group)
|
||||||
|
|
||||||
|
|
||||||
next_url = db_session.query(db.GroupJunction.post_id)\
|
next_url = db_session.query(db.GroupJunction.post_id)\
|
||||||
.filter(db.GroupJunction.group_id == group_id)\
|
.filter(db.GroupJunction.group_id == group_id)\
|
||||||
|
|
|
||||||
|
|
@ -11,11 +11,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner-filter {
|
.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) {
|
@media (max-width: 800px) {
|
||||||
.banner-filter {
|
.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 %}
|
{% endif %}
|
||||||
|
|
@ -29,12 +29,8 @@
|
||||||
<p>By {{ group.author_username }}</p>
|
<p>By {{ group.author_username }}</p>
|
||||||
</div>
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
<img
|
<img src="{{ url_for('api.file', file_name=images.0.file_name ) }}?r=prev" onload="imgFade(this)" style="opacity:0;"/>
|
||||||
src="/api/file/{{ images.0.file_name }}?r=prev"
|
<span class="banner-filter"></span>
|
||||||
onload="imgFade(this)"
|
|
||||||
style="opacity:0;"
|
|
||||||
/>
|
|
||||||
<span class="banner-filter" ></span>
|
|
||||||
<div class="banner-content">
|
<div class="banner-content">
|
||||||
<p>By {{ group.author_username }} - {{ images|length }} Images</p>
|
<p>By {{ group.author_username }} - {{ images|length }} Images</p>
|
||||||
<h1>{{ group.name }}</h1>
|
<h1>{{ group.name }}</h1>
|
||||||
|
|
|
||||||
|
|
@ -23,23 +23,21 @@
|
||||||
{% if groups %}
|
{% if groups %}
|
||||||
<div class="gallery-grid">
|
<div class="gallery-grid">
|
||||||
{% for group in groups %}
|
{% for group in groups %}
|
||||||
{% if group.thumbnail %}
|
<a id="group-{{ group.id }}" class="group-item" href="{{ url_for('group.group', group_id=group.id) }}">
|
||||||
<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">
|
||||||
<div class="image-filter">
|
<p class="image-subtitle">By {{ group.author_username }}</p>
|
||||||
<p class="image-subtitle"></p>
|
<p class="image-title">{{ group.name }}</p>
|
||||||
<p class="image-title">{{ group.name }}</p>
|
</div>
|
||||||
</div>
|
<div class="images size-{{ group.images|length }}">
|
||||||
<img data-src="{{ group.thumbnail.file_name }}" onload="this.classList.add('loaded');" id="lazy-load"/>
|
{% if group.images|length > 0 %}
|
||||||
</a>
|
{% for image in group.images %}
|
||||||
{% else %}
|
<img data-src="{{ image.file_name }}" onload="this.classList.add('loaded');" id="lazy-load" class="data-{{ loop.index }}"/>
|
||||||
<a id="group-{{ group.id }}" class="gallery-item" href="{{ url_for('group.group', group_id=group.id) }}">
|
{% endfor %}
|
||||||
<div class="image-filter">
|
{% else %}
|
||||||
<p class="image-subtitle"></p>
|
<img src="{{ url_for('static', filename='error.png') }}" class="loaded"/>
|
||||||
<p class="image-title">{{ group.name }}</p>
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
<img src="{{ url_for('static', filename='error.png') }}" onload="this.classList.add('loaded');"/>
|
</a>
|
||||||
</a>
|
|
||||||
{% endif %}
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
|
|
|
||||||
|
|
@ -197,45 +197,29 @@
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-table">
|
<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>
|
<table>
|
||||||
<tr>
|
|
||||||
<td>Image ID</td>
|
|
||||||
<td>{{ image['id'] }}</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
<tr>
|
||||||
<td>Author</td>
|
<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>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Upload date</td>
|
<td>Upload date</td>
|
||||||
<td><span class="time">{{ image.created_at }}</span></td>
|
<td><span class="time">{{ image.created_at }}</span></td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</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">
|
<div class="img-groups">
|
||||||
{% for group in image.groups %}
|
{% for group in image.groups %}
|
||||||
<a href="/group/{{ group.id }}" class="tag-icon">
|
<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="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>
|
<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'] }}
|
{{ group['name'] }}
|
||||||
</a>
|
</a>
|
||||||
{% endfor %}
|
{% 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>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -70,7 +70,6 @@
|
||||||
|
|
||||||
&.small
|
&.small
|
||||||
height: 3.5rem
|
height: 3.5rem
|
||||||
|
|
||||||
background-color: RGB($bg-100)
|
background-color: RGB($bg-100)
|
||||||
|
|
||||||
.banner-content
|
.banner-content
|
||||||
|
|
|
||||||
|
|
@ -2,23 +2,26 @@
|
||||||
margin: 0
|
margin: 0
|
||||||
padding: 0.25rem 0.5rem
|
padding: 0.25rem 0.5rem
|
||||||
|
|
||||||
|
|
||||||
display: flex
|
display: flex
|
||||||
align-items: center
|
align-items: center
|
||||||
justify-content: center
|
justify-content: center
|
||||||
gap: 0.25rem
|
gap: 0.25rem
|
||||||
|
|
||||||
font-size: 1rem
|
font-size: 0.9rem
|
||||||
font-weight: 500
|
font-weight: 500
|
||||||
text-decoration: none
|
text-decoration: none
|
||||||
|
|
||||||
border-radius: $rad-inner
|
border-radius: $rad-inner
|
||||||
background-color: RGB($primary)
|
|
||||||
color: RGB($bg-100)
|
|
||||||
border: none
|
border: none
|
||||||
|
background-color: RGBA($primary, 0.1)
|
||||||
|
color: RGB($primary)
|
||||||
|
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
|
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out
|
||||||
|
|
||||||
svg
|
svg
|
||||||
width: 1.15rem
|
width: 1.15rem
|
||||||
height: 1.15rem
|
height: 1.15rem
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background-color: RGBA($primary, 0.3)
|
||||||
|
|
|
||||||
|
|
@ -85,7 +85,7 @@
|
||||||
left: 0
|
left: 0
|
||||||
|
|
||||||
width: 100%
|
width: 100%
|
||||||
height: 3rem
|
height: 5rem
|
||||||
|
|
||||||
z-index: +1
|
z-index: +1
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -26,50 +26,40 @@
|
||||||
padding: 0.5rem
|
padding: 0.5rem
|
||||||
|
|
||||||
width: 100%
|
width: 100%
|
||||||
height: 100%
|
height: 30%
|
||||||
|
|
||||||
position: absolute
|
position: absolute
|
||||||
left: 0
|
left: 0
|
||||||
bottom: -1rem
|
bottom: 0
|
||||||
|
|
||||||
display: flex
|
display: flex
|
||||||
flex-direction: column
|
flex-direction: column
|
||||||
justify-content: flex-end
|
justify-content: flex-end
|
||||||
|
|
||||||
background-image: linear-gradient(to top, $bg-transparent, transparent)
|
background-image: linear-gradient(to top, rgba($bg-100, 0.5), transparent)
|
||||||
|
|
||||||
z-index: +1
|
|
||||||
|
|
||||||
opacity: 0 // hide
|
opacity: 0 // hide
|
||||||
transition: all 0.3s cubic-bezier(.79, .14, .15, .86)
|
|
||||||
|
|
||||||
.image-title
|
z-index: +4
|
||||||
margin: 0
|
transition: background-image 0.3s cubic-bezier(.79, .14, .15, .86), opacity 0.3s cubic-bezier(.79, .14, .15, .86)
|
||||||
|
|
||||||
font-size: 1rem
|
.image-title,
|
||||||
font-weight: 600
|
.image-subtitle
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
|
||||||
color: RGB($fg-white)
|
white-space: nowrap
|
||||||
|
text-overflow: ellipsis
|
||||||
|
overflow: hidden
|
||||||
|
|
||||||
text-overflow: ellipsis
|
color: RGB($fg-white)
|
||||||
overflow: hidden
|
|
||||||
|
|
||||||
opacity: 0 // hide
|
.image-title
|
||||||
transition: all 0.2s ease-in-out
|
font-size: 0.9rem
|
||||||
|
font-weight: 800
|
||||||
|
|
||||||
.image-subtitle
|
.image-subtitle
|
||||||
margin: 0
|
font-size: 0.8rem
|
||||||
|
font-weight: 600
|
||||||
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
|
|
||||||
|
|
||||||
img
|
img
|
||||||
width: 100%
|
width: 100%
|
||||||
|
|
@ -99,15 +89,155 @@
|
||||||
|
|
||||||
&:hover
|
&:hover
|
||||||
.image-filter
|
.image-filter
|
||||||
bottom: 0
|
background-image: linear-gradient(to top, rgba($bg-100, 0.69), transparent)
|
||||||
opacity: 1
|
|
||||||
|
|
||||||
.image-title,
|
|
||||||
.image-subtitle
|
|
||||||
opacity: 1
|
opacity: 1
|
||||||
|
|
||||||
img
|
img
|
||||||
transform: scale(1)
|
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)
|
@media (max-width: 800px)
|
||||||
.gallery-grid
|
.gallery-grid
|
||||||
|
|
|
||||||
|
|
@ -109,6 +109,23 @@
|
||||||
text-overflow: ellipsis
|
text-overflow: ellipsis
|
||||||
overflow: hidden
|
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
|
table
|
||||||
margin: 0
|
margin: 0
|
||||||
padding: 0
|
padding: 0
|
||||||
|
|
@ -177,13 +194,13 @@
|
||||||
justify-content: center
|
justify-content: center
|
||||||
align-items: center
|
align-items: center
|
||||||
|
|
||||||
border-radius: 50%
|
border-radius: $rad-inner
|
||||||
border: 1px solid RGB($white)
|
// border: 1px solid RGB($white)
|
||||||
|
|
||||||
.img-groups
|
.img-groups
|
||||||
width: 100%
|
width: 100%
|
||||||
|
|
||||||
display: flex
|
display: flex
|
||||||
|
flex-wrap: wrap
|
||||||
gap: 0.5rem
|
gap: 0.5rem
|
||||||
|
|
||||||
@media (max-width: 1100px)
|
@media (max-width: 1100px)
|
||||||
|
|
|
||||||
|
|
@ -113,19 +113,23 @@
|
||||||
opacity: 1
|
opacity: 1
|
||||||
left: 3.9rem
|
left: 3.9rem
|
||||||
|
|
||||||
&.selected::before
|
&.selected
|
||||||
content: ''
|
> svg
|
||||||
display: block
|
color: RGB($primary)
|
||||||
|
|
||||||
position: absolute
|
&::before
|
||||||
top: 3px
|
content: ''
|
||||||
left: 0
|
display: block
|
||||||
|
|
||||||
width: 3px
|
position: absolute
|
||||||
height: calc(100% - 6px)
|
top: 3px
|
||||||
|
left: 0
|
||||||
|
|
||||||
background-color: RGB($primary)
|
width: 3px
|
||||||
border-radius: 0 $rad-inner $rad-inner 0
|
height: calc(100% - 6px)
|
||||||
|
|
||||||
|
background-color: RGB($primary)
|
||||||
|
border-radius: 0 $rad-inner $rad-inner 0
|
||||||
|
|
||||||
@media (max-width: $breakpoint)
|
@media (max-width: $breakpoint)
|
||||||
.navigation
|
.navigation
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue