failed-galleries/python-gallery
1
0
Fork 0
mirror of https://github.com/Derpy-Leggies/OnlyLegs.git synced 2024-12-29 10:56:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixing inconsistent sass files

Browse source 
Removed useless styling
Fixed date
This commit is contained in:
Michał 2023-03-08 13:36:35 +00:00
parent 99c1d81869
commit 56c82513ba
31 changed files with 805 additions and 1009 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
gallery/__init__.py
View file

@ -5,7 +5,7 @@
| |_| | | | | | |_| | |__| __/ (_| \__ \
\___/|_| |_|_|\__, |_____\___|\__, |___/
|___/ |___/
Created by Fluffy Bean - Version 23.03.04
Created by Fluffy Bean - Version 23.03.09
"""
# Import system modules

7
gallery/routing.py
View file

@ -41,12 +41,13 @@ def image(image_id):
Image view, shows the image and its metadata
"""
img = db_session.query(db.Posts).filter(db.Posts.id == image_id).first()
author = db_session.query(db.Users.username).filter(db.Users.id == img.author_id).first()[0]
img.author_username = author
if img is None:
abort(404, 'Image not found')
author = db_session.query(db.Users.username).filter(db.Users.id == img.author_id).first()[0]
img.author_username = author
return render_template('image.html', image=img, exif=img.image_exif)
@blueprint.route('/group', methods=['GET', 'POST'])

7
gallery/templates/error.html
View file

@ -1,7 +1,8 @@
{% extends 'layout.html' %}
{% block wrapper_class %}error-wrapper{% endblock %}
{% block content %}
<h1>{{error}}</h1>
<p>{{msg}}</p>
<span class="error-page">
<h1>{{error}}</h1>
<p>{{msg}}</p>
</span>
{% endblock %}

16
gallery/templates/group.html
View file

@ -1,29 +1,27 @@
{% extends 'layout.html' %}
{% block header %}
{% block nav_groups %}navigation-item__selected{% endblock %}
{% block content %}
<div class="banner">
<img src="{{ url_for('static', filename='images/bg.svg') }}" onload="imgFade(this)" style="opacity:0;"/>
<span></span>
<div class="banner__content">
<div class="banner-content">
{% block banner_subtitle%}{% endblock %}
<h1>Groups</h1>
<p>gwa gwa</p>
</div>
</div>
{% endblock %}
{% block nav_groups %}navigation-item__selected{% endblock %}
{% block content %}
<div class="gallery">
<div class="gallery-grid">
{% for group in groups %}
<a id="group-{{ group['id'] }}" class="gallery__item" href="/group/{{ group['id'] }}">
<span class="gallery__item-info">
<a id="group-{{ group['id'] }}" class="gallery-item" href="/group/{{ group['id'] }}">
<span>
<p>{{ group['id'] }}</p>
<h2><span class="time">{{ group['created_at'] }}</span></h2>
</span>
<img
class="gallery__item-group"
data-src="{{ group['file_name'] }}"
onload="imgFade(this)"
style="opacity:0;"

323
gallery/templates/image.html
View file

@ -1,200 +1,181 @@
{% extends 'layout.html' %}
{% block header %}
<div class="background-decoration">
<img src="/api/uploads/{{ image['file_name'] }}?w=1000&h=1000" onload="imgFade(this)" style="opacity:0;"/>
<span style="background-image: linear-gradient(to top, rgba({{ image['image_colours'][0][0] }}, {{ image['image_colours'][0][1] }}, {{ image['image_colours'][0][2] }}, 1), transparent);"></span>
</div>
{% endblock %}
{% block wrapper_class %}image-wrapper{% endblock %}
{% block content %}
<div class="background">
<img src="/api/uploads/{{ image['file_name'] }}?w=1000&h=1000" onload="imgFade(this)" style="opacity:0;"/>
<span style="background-image: linear-gradient(to top, rgba({{ image['image_colours'][0][0] }}, {{ image['image_colours'][0][1] }}, {{ image['image_colours'][0][2] }}, 1), transparent);"></span>
</div>
<div class="image-fullscreen">
<img src="" onload="imgFade(this);" style="opacity:0;" />
</div>
<div class="image-container">
<img
src="/api/uploads/{{ image['file_name'] }}?w=1000&h=1000"
onload="imgFade(this)" style="opacity:0;"
onerror="this.src='/static/images/error.png'"
width="{{ exif['File']['Width']['raw'] }}"
height="{{ exif['File']['Height']['raw'] }}"
/>
</div>
<div class="pill-row" id="image-tools">
<div>
<button class="pill-item" id="img-fullscreen">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -4 24 24" fill="currentColor">
<path d="M12.586 2H11a1 1 0 0 1 0-2h4a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0V3.414L9.414 8 14 12.586V11a1 1 0 0 1 2 0v4a1 1 0 0 1-1 1h-4a1 1 0 0 1 0-2h1.586L8 9.414 3.414 14H5a1 1 0 0 1 0 2H1a1 1 0 0 1-1-1v-4a1 1 0 0 1 2 0v1.586L6.586 8 2 3.414V5a1 1 0 1 1-2 0V1a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H3.414L8 6.586 12.586 2z"></path>
</svg>
<span class="tool-tip">Fullscreen</span>
</button>
<button class="pill-item" id="img-share">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -3 24 24" fill="currentColor">
<path d="M3.19 9.345a.97.97 0 0 1 1.37 0 .966.966 0 0 1 0 1.367l-2.055 2.052a1.932 1.932 0 0 0 0 2.735 1.94 1.94 0 0 0 2.74 0l4.794-4.787a.966.966 0 0 0 0-1.367.966.966 0 0 1 0-1.368.97.97 0 0 1 1.37 0 2.898 2.898 0 0 1 0 4.103l-4.795 4.787a3.879 3.879 0 0 1-5.48 0 3.864 3.864 0 0 1 0-5.47L3.19 9.344zm11.62-.69a.97.97 0 0 1-1.37 0 .966.966 0 0 1 0-1.367l2.055-2.052a1.932 1.932 0 0 0 0-2.735 1.94 1.94 0 0 0-2.74 0L7.962 7.288a.966.966 0 0 0 0 1.367.966.966 0 0 1 0 1.368.97.97 0 0 1-1.37 0 2.898 2.898 0 0 1 0-4.103l4.795-4.787a3.879 3.879 0 0 1 5.48 0 3.864 3.864 0 0 1 0 5.47L14.81 8.656z"></path>
</svg>
<span class="tool-tip">Share</span>
</button>
<a class="pill-item" id="img-download" href="/api/uploads/{{ image['file_name'] }}/0" download>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 24 24" fill="currentColor">
<path d="M8 6.641l1.121-1.12a1 1 0 0 1 1.415 1.413L7.707 9.763a.997.997 0 0 1-1.414 0L3.464 6.934A1 1 0 1 1 4.88 5.52L6 6.641V1a1 1 0 1 1 2 0v5.641zM1 12h12a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"></path>
</svg>
<span class="tool-tip">Download</span>
</a>
<div class="image-grid">
<div class="image-container" id="image-container">
<img
src="/api/uploads/{{ image['file_name'] }}?w=1000&h=1000"
onload="imgFade(this)" style="opacity:0;"
onerror="this.src='/static/images/error.png'"
width="{{ exif['File']['Width']['raw'] }}"
height="{{ exif['File']['Height']['raw'] }}"
/>
</div>
{% if g.user['id'] == image['author_id'] %}
<div>
<button class="pill-item pill__critical" id="img-delete">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -2 24 24" fill="currentColor">
<path d="M6 2V1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h4a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-.133l-.68 10.2a3 3 0 0 1-2.993 2.8H5.826a3 3 0 0 1-2.993-2.796L2.137 7H2a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h4zm10 2H2v1h14V4zM4.141 7l.687 10.068a1 1 0 0 0 .998.932h6.368a1 1 0 0 0 .998-.934L13.862 7h-9.72zM7 8a1 1 0 0 1 1 1v7a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm4 0a1 1 0 0 1 1 1v7a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1z"></path>
</svg>
<span class="tool-tip">Delete</span>
</button>
<button class="pill-item pill__critical" id="img-edit">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2.5 -2.5 24 24" fill="currentColor">
<path d="M12.238 5.472L3.2 14.51l-.591 2.016 1.975-.571 9.068-9.068-1.414-1.415zM13.78 3.93l1.414 1.414 1.318-1.318a.5.5 0 0 0 0-.707l-.708-.707a.5.5 0 0 0-.707 0L13.781 3.93zm3.439-2.732l.707.707a2.5 2.5 0 0 1 0 3.535L5.634 17.733l-4.22 1.22a1 1 0 0 1-1.237-1.241l1.248-4.255 12.26-12.26a2.5 2.5 0 0 1 3.535 0z"></path>
</svg>
<span class="tool-tip">Edit</span>
</button>
</div>
{% endif %}
</div>
<div class="image-info__container">
{% if image['post_description'] %}
<div class="image-info">
<span class="image-info__collapse" id="collapse-info">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
<path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
<div class="pill-row" id="image-tools">
<div>
<button class="pill-item" id="img-fullscreen">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -4 24 24" fill="currentColor">
<path d="M12.586 2H11a1 1 0 0 1 0-2h4a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0V3.414L9.414 8 14 12.586V11a1 1 0 0 1 2 0v4a1 1 0 0 1-1 1h-4a1 1 0 0 1 0-2h1.586L8 9.414 3.414 14H5a1 1 0 0 1 0 2H1a1 1 0 0 1-1-1v-4a1 1 0 0 1 2 0v1.586L6.586 8 2 3.414V5a1 1 0 1 1-2 0V1a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H3.414L8 6.586 12.586 2z"></path>
</svg>
</span>
<div class="image-info__header">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -2 24 24" fill="currentColor">
<path d="M3 0h10a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3zm0 2a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3zm2 1h6a1 1 0 0 1 0 2H5a1 1 0 1 1 0-2zm0 12h2a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm0-4h6a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm0-4h6a1 1 0 0 1 0 2H5a1 1 0 1 1 0-2z"></path>
<span class="tool-tip">Fullscreen</span>
</button>
<button class="pill-item" id="img-share">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -3 24 24" fill="currentColor">
<path d="M3.19 9.345a.97.97 0 0 1 1.37 0 .966.966 0 0 1 0 1.367l-2.055 2.052a1.932 1.932 0 0 0 0 2.735 1.94 1.94 0 0 0 2.74 0l4.794-4.787a.966.966 0 0 0 0-1.367.966.966 0 0 1 0-1.368.97.97 0 0 1 1.37 0 2.898 2.898 0 0 1 0 4.103l-4.795 4.787a3.879 3.879 0 0 1-5.48 0 3.864 3.864 0 0 1 0-5.47L3.19 9.344zm11.62-.69a.97.97 0 0 1-1.37 0 .966.966 0 0 1 0-1.367l2.055-2.052a1.932 1.932 0 0 0 0-2.735 1.94 1.94 0 0 0-2.74 0L7.962 7.288a.966.966 0 0 0 0 1.367.966.966 0 0 1 0 1.368.97.97 0 0 1-1.37 0 2.898 2.898 0 0 1 0-4.103l4.795-4.787a3.879 3.879 0 0 1 5.48 0 3.864 3.864 0 0 1 0 5.47L14.81 8.656z"></path>
</svg>
<h2>Description</h2>
</div>
<div class="image-info__content">
<p>{{ image['post_description'] }}</p>
</div>
</div>
{% endif %}
<div class="image-info">
<span class="image-info__collapse" id="collapse-info">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
<path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
</svg>
</span>
<div class="image-info__header">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">
<path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-10a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm0-1a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>
</svg>
<h2>Info</h2>
</div>
<div class="image-info__content">
<table>
<tr>
<td>Image ID</td>
<td>{{ image['id'] }}</td>
</tr>
<tr>
<td>Author</td>
<td>{{ image['author_username'] }}</td>
</tr>
<tr>
<td>Upload date</td>
<td><span class="time">{{ image['created_at'] }}</span></td>
</tr>
</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>
</div>
</div>
{% for tag in exif %}
<div class="image-info">
<span class="image-info__collapse" id="collapse-info">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
<path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
<span class="tool-tip">Share</span>
</button>
<a class="pill-item" id="img-download" href="/api/uploads/{{ image['file_name'] }}/0" download>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 24 24" fill="currentColor">
<path d="M8 6.641l1.121-1.12a1 1 0 0 1 1.415 1.413L7.707 9.763a.997.997 0 0 1-1.414 0L3.464 6.934A1 1 0 1 1 4.88 5.52L6 6.641V1a1 1 0 1 1 2 0v5.641zM1 12h12a1 1 0 0 1 0 2H1a1 1 0 0 1 0-2z"></path>
</svg>
</span>
{% if tag == 'Photographer' %}
<div class="image-info__header">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -2 24 24" fill="currentColor">
<path d="M3.534 10.07a1 1 0 1 1 .733 1.86A3.579 3.579 0 0 0 2 15.26V17a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1.647a3.658 3.658 0 0 0-2.356-3.419 1 1 0 1 1 .712-1.868A5.658 5.658 0 0 1 14 15.353V17a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3v-1.74a5.579 5.579 0 0 1 3.534-5.19zM7 0a4 4 0 0 1 4 4v2a4 4 0 1 1-8 0V4a4 4 0 0 1 4-4zm0 2a2 2 0 0 0-2 2v2a2 2 0 1 0 4 0V4a2 2 0 0 0-2-2z"></path>
<span class="tool-tip">Download</span>
</a>
</div>
{% if g.user['id'] == image['author_id'] %}
<div>
<button class="pill-item pill__critical" id="img-delete">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -2 24 24" fill="currentColor">
<path d="M6 2V1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h4a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2h-.133l-.68 10.2a3 3 0 0 1-2.993 2.8H5.826a3 3 0 0 1-2.993-2.796L2.137 7H2a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h4zm10 2H2v1h14V4zM4.141 7l.687 10.068a1 1 0 0 0 .998.932h6.368a1 1 0 0 0 .998-.934L13.862 7h-9.72zM7 8a1 1 0 0 1 1 1v7a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm4 0a1 1 0 0 1 1 1v7a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1z"></path>
</svg>
<h2>Photographer</h2>
</div>
{% elif tag == 'Camera' %}
<div class="image-info__header">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -4 24 24" fill="currentColor">
<path d="M5.676 5H4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1.676l-.387-1.501A2.002 2.002 0 0 0 12 2H8a2 2 0 0 0-1.937 1.499L5.676 5zm-1.55-2C4.57 1.275 6.136 0 8 0h4a4.002 4.002 0 0 1 3.874 3H16a4 4 0 0 1 4 4v5a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4h.126zM10 13a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6-3a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path>
<span class="tool-tip">Delete</span>
</button>
<button class="pill-item pill__critical" id="img-edit">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2.5 -2.5 24 24" fill="currentColor">
<path d="M12.238 5.472L3.2 14.51l-.591 2.016 1.975-.571 9.068-9.068-1.414-1.415zM13.78 3.93l1.414 1.414 1.318-1.318a.5.5 0 0 0 0-.707l-.708-.707a.5.5 0 0 0-.707 0L13.781 3.93zm3.439-2.732l.707.707a2.5 2.5 0 0 1 0 3.535L5.634 17.733l-4.22 1.22a1 1 0 0 1-1.237-1.241l1.248-4.255 12.26-12.26a2.5 2.5 0 0 1 3.535 0z"></path>
</svg>
<h2>Camera</h2>
</div>
{% elif tag == 'Software' %}
<div class="image-info__header">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -4 24 24" fill="currentColor">
<path d="M2 13v1h3V2H2v9h1v2H2zM1 0h5a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zm9 3h8a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm0 2v6h8V5h-8zm2 9h4a1 1 0 0 1 0 2h-4a1 1 0 0 1 0-2z"></path>
</svg>
<h2>Software</h2>
</div>
{% elif tag == 'File' %}
<div class="image-info__header">
<span class="tool-tip">Edit</span>
</button>
</div>
{% endif %}
</div>
<div class="info-container" id="image-info">
{% if image['post_description'] %}
<div class="info-tab">
<div class="info-header">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -2 24 24" fill="currentColor">
<path d="M14 8.322V2H2v12h3.576l3.97-5.292A3 3 0 0 1 14 8.322zm0 3.753l-1.188-2.066a1 1 0 0 0-1.667-.101L8.076 14H14v-1.925zM14 16H2v2h12v-2zM2 0h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm4 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path>
<path d="M3 0h10a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3zm0 2a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H3zm2 1h6a1 1 0 0 1 0 2H5a1 1 0 1 1 0-2zm0 12h2a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm0-4h6a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2zm0-4h6a1 1 0 0 1 0 2H5a1 1 0 1 1 0-2z"></path>
</svg>
<h2>File</h2>
</div>
{% else %}
<div class="image-info__header">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">
<path d="M14.95 7.879l-.707-.707a1 1 0 0 1 1.414-1.415l.707.707 1.414-1.414-2.828-2.828L2.222 14.95l2.828 2.828 1.414-1.414L5.05 14.95a1 1 0 0 1 1.414-1.414L7.88 14.95l1.414-1.414-.707-.708A1 1 0 0 1 10 11.414l.707.707 1.414-1.414-1.414-1.414a1 1 0 0 1 1.414-1.414l1.415 1.414 1.414-1.414zM.808 13.536L13.536.808a2 2 0 0 1 2.828 0l2.828 2.828a2 2 0 0 1 0 2.828L6.464 19.192a2 2 0 0 1-2.828 0L.808 16.364a2 2 0 0 1 0-2.828z"></path>
<h2>Description</h2>
<svg class="collapse-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
<path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
</svg>
<h2>{{tag}}</h2>
</div>
{% endif %}
<div class="image-info__content">
<table>
{% for subtag in exif[tag] %}
<tr>
<td>{{subtag}}</td>
{% if exif[tag][subtag]['formatted'] %}
{% if exif[tag][subtag]['type'] == 'date' %}
<td><span class="time">{{exif[tag][subtag]['formatted']}}</span></td>
{% else %}
<td>{{exif[tag][subtag]['formatted']}}</td>
{% endif %}
{% elif exif[tag][subtag]['raw'] %}
<td>{{exif[tag][subtag]['raw']}}</td>
{% else %}
<td class="empty-table">Oops, an error</td>
{% endif %}
</tr>
{% endfor %}
</table>
<div class="info-table">
<p>{{ image['post_description'] }}</p>
</div>
</div>
</div>
{% endfor %}
{% endif %}
<div class="info-tab">
<div class="info-header">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">
<path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-10a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm0-1a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>
</svg>
<h2>Info</h2>
<svg class="collapse-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
<path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
</svg>
</div>
<div class="info-table">
<table>
<tr>
<td>Image ID</td>
<td>{{ image['id'] }}</td>
</tr>
<tr>
<td>Author</td>
<td>{{ image['author_username'] }}</td>
</tr>
<tr>
<td>Upload date</td>
<td><span class="time">{{ image['created_at'] }}</span></td>
</tr>
</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>
</div>
</div>
{% for tag in exif %}
<div class="info-tab">
<div class="info-header">
{% if tag == 'Photographer' %}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -2 24 24" fill="currentColor">
<path d="M3.534 10.07a1 1 0 1 1 .733 1.86A3.579 3.579 0 0 0 2 15.26V17a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1.647a3.658 3.658 0 0 0-2.356-3.419 1 1 0 1 1 .712-1.868A5.658 5.658 0 0 1 14 15.353V17a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3v-1.74a5.579 5.579 0 0 1 3.534-5.19zM7 0a4 4 0 0 1 4 4v2a4 4 0 1 1-8 0V4a4 4 0 0 1 4-4zm0 2a2 2 0 0 0-2 2v2a2 2 0 1 0 4 0V4a2 2 0 0 0-2-2z"></path>
</svg>
<h2>Photographer</h2>
{% elif tag == 'Camera' %}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -4 24 24" fill="currentColor">
<path d="M5.676 5H4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1.676l-.387-1.501A2.002 2.002 0 0 0 12 2H8a2 2 0 0 0-1.937 1.499L5.676 5zm-1.55-2C4.57 1.275 6.136 0 8 0h4a4.002 4.002 0 0 1 3.874 3H16a4 4 0 0 1 4 4v5a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4h.126zM10 13a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6-3a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path>
</svg>
<h2>Camera</h2>
{% elif tag == 'Software' %}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -4 24 24" fill="currentColor">
<path d="M2 13v1h3V2H2v9h1v2H2zM1 0h5a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1a1 1 0 0 1 1-1zm9 3h8a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm0 2v6h8V5h-8zm2 9h4a1 1 0 0 1 0 2h-4a1 1 0 0 1 0-2z"></path>
</svg>
<h2>Software</h2>
{% elif tag == 'File' %}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-4 -2 24 24" fill="currentColor">
<path d="M14 8.322V2H2v12h3.576l3.97-5.292A3 3 0 0 1 14 8.322zm0 3.753l-1.188-2.066a1 1 0 0 0-1.667-.101L8.076 14H14v-1.925zM14 16H2v2h12v-2zM2 0h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm4 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path>
</svg>
<h2>File</h2>
{% else %}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">
<path d="M14.95 7.879l-.707-.707a1 1 0 0 1 1.414-1.415l.707.707 1.414-1.414-2.828-2.828L2.222 14.95l2.828 2.828 1.414-1.414L5.05 14.95a1 1 0 0 1 1.414-1.414L7.88 14.95l1.414-1.414-.707-.708A1 1 0 0 1 10 11.414l.707.707 1.414-1.414-1.414-1.414a1 1 0 0 1 1.414-1.414l1.415 1.414 1.414-1.414zM.808 13.536L13.536.808a2 2 0 0 1 2.828 0l2.828 2.828a2 2 0 0 1 0 2.828L6.464 19.192a2 2 0 0 1-2.828 0L.808 16.364a2 2 0 0 1 0-2.828z"></path>
</svg>
<h2>{{tag}}</h2>
{% endif %}
<svg class="collapse-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
<path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
</svg>
</div>
<div class="info-table">
<table>
{% for subtag in exif[tag] %}
<tr>
<td>{{subtag}}</td>
{% if exif[tag][subtag]['formatted'] %}
{% if exif[tag][subtag]['type'] == 'date' %}
<td><span class="time">{{exif[tag][subtag]['formatted']}}</span></td>
{% else %}
<td>{{exif[tag][subtag]['formatted']}}</td>
{% endif %}
{% elif exif[tag][subtag]['raw'] %}
<td>{{exif[tag][subtag]['raw']}}</td>
{% else %}
<td class="empty-table">Oops, an error</td>
{% endif %}
</tr>
{% endfor %}
</table>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
{% block script %}
<script>
var infoCollapse = document.querySelectorAll('#collapse-info');
for (var i = 0; i < infoCollapse.length; i++) {
infoCollapse[i].addEventListener('click', function() {
this.parentNode.classList.toggle('image-info__collapsed');
});
}
var infoHeader = document.querySelectorAll('.image-info__header');
for (var i = 0; i < infoHeader.length; i++) {
infoHeader[i].addEventListener('click', function() {
this.parentNode.classList.toggle('image-info__collapsed');
var infoTab = document.querySelectorAll('.info-tab');
for (var i = 0; i < infoTab.length; i++) {
infoTab[i].querySelector('.info-header').addEventListener('click', function() {
this.parentNode.classList.toggle('collapsed');
});
}

21
gallery/templates/index.html
View file

@ -1,31 +1,27 @@
{% extends 'layout.html' %}
{% block header %}
{% block nav_home %}navigation-item__selected{% endblock %}
{% block content %}
<div class="banner">
<img src="{{ url_for('static', filename='images/bg.svg') }}" onload="imgFade(this)" style="opacity:0;"/>
<span></span>
<div class="banner__content">
{% block banner_subtitle%}{% endblock %}
<div class="banner-content">
<p>{{ motto }}</p>
<h1>{{ name }}</h1>
<p>Serving {{ image_count }} images</p>
</div>
</div>
{% endblock %}
{% block nav_home %}navigation-item__selected{% endblock %}
{% block wrapper_class %}index-wrapper{% endblock %}
{% block content %}
<div class="gallery">
<div class="gallery-grid">
{% for image in images %}
<a id="image-{{ image['id'] }}" class="gallery__item" href="/image/{{ image['id'] }}" style="background-color: rgb({{ image['image_colours'][0][0] }}, {{ image['image_colours'][0][1] }}, {{ image['image_colours'][0][2] }})">
<span class="gallery__item-info">
<a id="image-{{ image['id'] }}" class="gallery-item" href="/image/{{ image['id'] }}" style="background-color: rgb({{ image['image_colours'][0][0] }}, {{ image['image_colours'][0][1] }}, {{ image['image_colours'][0][2] }})">
<span>
<p></p>
<h2><span class="time">{{ image['created_at'] }}</span></h2>
</span>
<img
class="gallery__item-image"
data-src="{{ image['file_name'] }}"
onload="imgFade(this)"
style="opacity:0;"
@ -38,7 +34,8 @@
{% block script %}
<script>
function loadOnView() {
var images = document.querySelectorAll('.gallery__item-image');
var images = document.querySelectorAll('.gallery-item img');
for (var i = 0; i < images.length; i++) {
var image = images[i];
if (image.getBoundingClientRect().top < window.innerHeight && image.getBoundingClientRect().bottom > 0) {

41
gallery/templates/layout.html
View file

@ -22,12 +22,26 @@
<script src="{{ url_for('static', filename='js/ui/notifications.js') }}"></script>
</head>
<body>
<div class="wrapper">
<div class="notifications"></div>
<div class="notifications"></div>
<svg class="jumpUp" xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">
<path d="M11 8.414V14a1 1 0 0 1-2 0V8.414L6.464 10.95A1 1 0 1 1 5.05 9.536l4.243-4.243a.997.997 0 0 1 1.414 0l4.243 4.243a1 1 0 1 1-1.414 1.414L11 8.414zM10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"></path>
</svg>
<svg class="jumpUp" xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">
<path d="M11 8.414V14a1 1 0 0 1-2 0V8.414L6.464 10.95A1 1 0 1 1 5.05 9.536l4.243-4.243a.997.997 0 0 1 1.414 0l4.243 4.243a1 1 0 1 1-1.414 1.414L11 8.414zM10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"></path>
</svg>
<div class="pop-up">
<span class="pop-up__click-off" onclick="popupDissmiss()"></span>
<div class="pop-up-wrapper">
<div class="pop-up-content">
<h3>Title</h3>
<p>Very very very drawn out example description</p>
</div>
<div class="pop-up-controlls">
<button class="pop-up__btn" onclick="popupDissmiss()">Cancel</button>
</div>
</div>
</div>
<div class="wrapper">
<div class="navigation">
<img src="{{url_for('static', filename='images/icon.png')}}" alt="Logo" class="logo" onload="imgFade(this)" style="opacity:0;">
@ -81,26 +95,11 @@
{% endif %}
</div>
{% block header %}{% endblock %}
<div class="content {% block wrapper_class %}{% endblock %}">
<div class="content">
{% block content %}
{% endblock %}
</div>
<div class="pop-up">
<span class="pop-up__click-off" onclick="popupDissmiss()"></span>
<div class="pop-up-wrapper">
<div class="pop-up-content">
<h3>Title</h3>
<p>Very very very drawn out example description</p>
</div>
<div class="pop-up-controlls">
<button class="pop-up__btn" onclick="popupDissmiss()">Cancel</button>
</div>
</div>
</div>
<div class="upload-panel">
<span class="click-off" onclick="closeUploadTab()"></span>
<div class="container">

27
gallery/templates/profile.html
View file

@ -1,25 +1,18 @@
{% extends 'layout.html' %}
{% block header %}
<div class="background-decoration">
<img src="{{ url_for('static', filename='images/background.svg') }}" onload="imgFade(this)" style="opacity:0;"/>
<span></span>
</div>
{% endblock %}
{% block nav_profile %}navigation-item__selected{% endblock %}
{% block content %}
<div class="banner">
<img src="{{ url_for('static', filename='images/bg.svg') }}" onload="imgFade(this)" style="opacity:0;"/>
<span></span>
<div class="banner-content">
<h1>Profile</h1>
<p>Hello {{ g.user['username'] }}</p>
</div>
</div>
<h1>User</h1>
<p>{{user_id}}</p>
<ul>
{% if g.user %}
<li><span>{{ g.user['username'] }}</span>
<li><a href="{{ url_for('auth.logout') }}">Log Out</a>
{% else %}
<li><a href="{{ url_for('auth.register') }}">Register</a>
<li><a href="{{ url_for('auth.login') }}">Log In</a>
{% endif %}
</ul>
{% endblock %}

11
gallery/templates/settings/settings_layout.html
View file

@ -1,21 +1,18 @@
{% extends 'layout.html' %}
{% block header %}
{% block nav_settings %}navigation-item__selected{% endblock %}
{% block content %}
<div class="banner">
<img src="{{ url_for('static', filename='images/leaves.jpg') }}" onload="imgFade(this)" style="opacity:0;"/>
<img src="{{ url_for('static', filename='images/bg.svg') }}" onload="imgFade(this)" style="opacity:0;"/>
<span></span>
<div class="banner__content">
<div class="banner-content">
{% block banner_subtitle%}{% endblock %}
<h1>Settings</h1>
<p>All the red buttons in one place, what could go wrong?</p>
</div>
</div>
{% endblock %}
{% block nav_settings %}navigation-item__selected{% endblock %}
{% block wrapper_class %}settings-wrapper{% endblock %}
{% block content %}
<div class="settings-nav">
<a href="{{ url_for('settings.general') }}" class="settings-nav__item {% block settings_general %}{% endblock %}">General</a>
<a href="{{ url_for('settings.server') }}" class="settings-nav__item {% block settings_server %}{% endblock %}">Server</a>

96
gallery/themes/default/components/banner.sass Normal file
View file

@ -0,0 +1,96 @@
.banner
width: 100%
height: 40vh
position: relative
background-color: $black
color: $black
overflow: hidden
transition: opacity 0.3s ease-in-out
img
position: absolute
top: 0
left: 0
width: 100%
height: 100%
background-color: $black
object-fit: cover
object-position: center center
span
position: absolute
top: 0
left: 0
width: 100%
height: 100%
background: linear-gradient(to right, rgba($primary, 1), rgba($primary, 0))
z-index: +1
.banner-content
padding: 1rem
width: 100%
height: inherit
position: relative
display: flex
flex-direction: column
justify-content: flex-end
gap: 0.5rem
z-index: +2
h1
margin: 0
padding: 0
font-size: 6.9rem
font-weight: 700
line-height: 1
text-align: left
color: $black
p
margin: 0
padding: 0
font-size: 1rem
font-weight: 600
line-height: 1
text-align: left
color: $black
@media (max-width: $breakpoint)
.banner
width: 100vw
height: 25vh
span
background-image: linear-gradient(to bottom, rgba($primary, 1), rgba($primary, 0))
.banner-content
padding: 0.5rem
display: flex
justify-content: center
align-items: center
h1
font-size: 3.5rem
text-align: center
p
font-size: 1.1rem
text-align: center

0
gallery/themes/default/buttons/jumpUp.sass → gallery/themes/default/components/buttons/jumpUp.sass
View file

0
gallery/themes/default/buttons/pill.sass → gallery/themes/default/components/buttons/pill.sass
View file

0
gallery/themes/default/ui/notification.sass → gallery/themes/default/components/elements/notification.sass
View file

0
gallery/themes/default/ui/pop-up.sass → gallery/themes/default/components/elements/pop-up.sass
View file

0
gallery/themes/default/ui/upload-panel.sass → gallery/themes/default/components/elements/upload-panel.sass
View file

112
gallery/themes/default/components/gallery.sass Normal file
View file

@ -0,0 +1,112 @@
.gallery-grid
margin: 0
padding: 0.5rem
width: 100%
display: grid
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
gap: 0.5rem
.gallery-item
margin: 0
padding: 0
height: auto
position: relative
border-radius: $rad
box-sizing: border-box
overflow: hidden
span
margin: 0
padding: 0.5rem
width: 100%
height: 100%
position: absolute
left: 0
bottom: 0
display: flex
flex-direction: column
justify-content: flex-end
background-image: linear-gradient(to bottom, rgba($black, 0), rgba($black, 0.8))
z-index: +1
opacity: 0 // hide
transform: scale(1.05) // scale up
transition: all 0.3s cubic-bezier(.79, .14, .15, .86)
h2
margin: 0
padding: 0
font-size: 1rem
font-weight: 600
color: $primary
text-overflow: ellipsis
overflow: hidden
opacity: 0 // hide
transition: all 0.2s ease-in-out
p
margin: 0
padding: 0
font-size: 0.8rem
font-weight: 500
color: $white
text-overflow: ellipsis
overflow: hidden
opacity: 0 // hide
transition: all 0.2s ease-in-out
img
width: 100%
height: 100%
position: absolute
top: 0
left: 0
right: 0
bottom: 0
object-fit: cover
object-position: center
background-color: $white
transition: all 0.3s cubic-bezier(.79, .14, .15, .86)
&:after
content: ""
display: block
padding-bottom: 100%
&:hover
span
opacity: 1
transform: scale(1)
h2, p
opacity: 1
img
transform: scale(1.1)
@media (max-width: 800px)
.gallery-grid
grid-template-columns: auto auto auto

8
gallery/themes/default/ui/background.sass → gallery/themes/default/components/image-view/background.sass
View file

@ -1,7 +1,4 @@
.background-decoration
margin: 0
padding: 0
.background
width: 100%
height: 100vh
@ -17,6 +14,7 @@
user-select: none
overflow: hidden
z-index: 1
img
position: absolute
@ -42,4 +40,4 @@
width: 100%
height: 100%
z-index: +1
z-index: +1

51
gallery/themes/default/components/image-view/fullscreen.sass Normal file
View file

@ -0,0 +1,51 @@
.image-fullscreen
margin: 0
padding: 0 0 0 3.5rem
width: 100%
height: 100dvh
position: fixed
top: -100%
left: 0
display: flex
opacity: 0 // hide
background-color: rgba($black, 0.8)
z-index: 21
box-sizing: border-box
img
margin: auto
padding: 0
width: auto
height: auto
max-width: 100%
max-height: 100%
object-fit: contain
object-position: center
transform: scale(0.8)
.image-fullscreen__active
top: 0
opacity: 1 // show
transition: opacity 0.3s cubic-bezier(.79, .14, .15, .86)
img
transform: scale(1)
transition: transform 0.2s cubic-bezier(.68,-0.55,.27,1.55)
.image-fullscreen__hide
opacity: 0 // hide
transition: opacity 0.2s cubic-bezier(.79, .14, .15, .86)
img
transform: scaleY(0) // scale(0.8)
transition: transform 0.2s ease

21
gallery/themes/default/components/image-view/image.sass Normal file
View file

@ -0,0 +1,21 @@
.image-container
margin: auto
padding: 0.5rem
width: 100%
height: 100%
display: flex
overflow: hidden
img
margin: auto
padding: 0
width: auto
height: auto
max-width: 100%
max-height: 100%
object-fit: contain
object-position: center

185
gallery/themes/default/components/image-view/info-tab.sass Normal file
View file

@ -0,0 +1,185 @@
.info-container
width: 100%
height: 100%
display: flex
flex-direction: column
background-color: $black
overflow-y: auto
.info-tab
width: 100%
max-height: 100%
display: flex
flex-direction: column
position: relative
background-color: $black
border-radius: $rad
transition: max-height 0.3s cubic-bezier(.79, .14, .15, .86)
&.collapsed
height: 2.5rem
.collapse-indicator
transform: rotate(90deg)
.info-table
padding: 0
opacity: 0
.collapse-indicator
width: 1.25rem
height: 1.25rem
position: absolute
top: 0.6rem
right: 0.6rem
color: $primary
z-index: +2
transition: transform 0.15s cubic-bezier(.79, .14, .15, .86)
user-select: none
.info-header
margin: 0
padding: 0.5rem
width: 100%
height: 2.5rem
display: flex
justify-content: start
align-items: center
gap: 0.5rem
position: sticky
top: 0
z-index: +1
background: $black2
svg
margin: 0
padding: 0
width: 1.25rem
height: 1.25rem
fill: $primary
h2
margin: 0
padding: 0
font-size: 1.25rem
font-weight: 600
color: $primary
text-overflow: ellipsis
overflow: hidden
.info-table
margin: 0
padding: 0.5rem
display: flex
flex-direction: column
gap: 0.5rem
color: $white
overflow-x: hidden
transition: opacity 0.3s cubic-bezier(.79, .14, .15, .86)
p
margin: 0
padding: 0
font-size: 1rem
font-weight: 500
text-overflow: ellipsis
overflow: hidden
table
margin: 0
padding: 0
max-width: 100%
overflow-x: hidden
border-collapse: collapse
tr
margin: 0
padding: 0
width: 100%
white-space: nowrap
td
padding-bottom: 0.5rem
td:first-child
padding-right: 0.5rem
width: 50%
max-width: 0
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
font-size: 1rem
font-weight: 500
td:last-child
padding: 0
width: 50%
max-width: 0
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
font-size: 1rem
font-weight: 500
td.empty-table
opacity: 0.3
tr:last-of-type td
padding-bottom: 0
.img-colours
margin: 0
padding: 0
width: 100%
display: flex
gap: 0.5rem
span
margin: 0
padding: 0
width: 100%
height: 2rem
display: flex
justify-content: center
align-items: center
border-radius: $rad

66
gallery/themes/default/components/image-view/view.sass Normal file
View file

@ -0,0 +1,66 @@
@import 'background'
@import 'fullscreen'
@import 'info-tab'
@import 'image'
.image-grid
padding: 0
position: relative
display: grid
grid-template-areas: 'info image' 'info tools'
grid-template-columns: 25rem 1fr
grid-template-rows: 1fr auto
gap: 0
height: 100vh
z-index: 3
#image-info
grid-area: info
#image-tools
grid-area: tools
padding: 0 0 0.5rem 0
#image-container
grid-area: image
@media (max-width: 1100px)
.image-grid
padding: 0.5rem
display: flex
flex-direction: column
gap: 0.5rem
height: auto
.image-container
margin: 0 auto
padding: 0
max-height: 69vh
img
max-height: 69vh
#image-tools
padding: 0
.info-container
gap: 0.5rem
background: transparent
.info-header
border-radius: $rad $rad 0 0
.info-tab.collapsed .info-header
border-radius: $rad
@media (max-width: $breakpoint)
.image-fullscreen
padding: 0 0 3.5rem 0

0
gallery/themes/default/ui/navigation.sass → gallery/themes/default/components/navigation.sass
View file

70
gallery/themes/default/style.sass
View file

@ -4,18 +4,18 @@
@import "variables"
@import "animations"
@import "ui/notification"
@import "ui/pop-up"
@import "ui/upload-panel"
@import "components/elements/notification"
@import "components/elements/pop-up"
@import "components/elements/upload-panel"
@import "ui/navigation"
@import "ui/content"
@import "ui/background"
@import "ui/banner"
@import "ui/gallery"
@import "components/navigation"
@import "components/banner"
@import "components/gallery"
@import "buttons/jumpUp"
@import "buttons/pill"
@import "components/buttons/jumpUp"
@import "components/buttons/pill"
@import "components/image-view/view"
// Reset
*
@ -36,9 +36,57 @@ html, body
.wrapper
margin: 0
padding: 0
padding: 0 0 0 3.5rem
min-height: 100vh
display: flex
flex-direction: column
background-color: $white
color: $black
.error-page
width: 100%
height: 100vh
display: flex
flex-direction: column
justify-content: center
align-items: center
background-color: $black
h1
margin: 0 2rem
font-size: 6.9rem
font-weight: 900
text-align: center
color: $primary
p
margin: 0 2rem
max-width: 40rem
font-size: 1.25rem
font-weight: 400
text-align: center
color: $white
@media (max-width: $breakpoint)
.wrapper
padding: 0 0 3.5rem 0
.error-page
height: calc(100vh - 3.5rem)
h1
font-size: 4.5rem
p
max-width: 100%
font-size: 1rem

104
gallery/themes/default/ui/banner.sass
View file

@ -1,104 +0,0 @@
.banner
margin: 0
padding: 0
width: calc(100vw - 3.5rem)
height: 40vh
position: relative
top: 0
left: 3.5rem
background-color: $black
color: $black
overflow: hidden
transition: opacity 0.3s ease-in-out
img
position: absolute
top: 0
left: 0
width: 100%
height: 100%
background-color: $black
object-fit: cover
object-position: center center
span
position: absolute
top: 0
left: 0
width: 100%
height: 100%
background: linear-gradient(to right, rgba($primary, 1), rgba($primary, 0))
z-index: +1
.banner__content
margin: 0
padding: 1rem
width: 100%
height: 100%
position: relative
display: flex
flex-direction: column
justify-content: flex-end
gap: 0.5rem
z-index: +2
h1
margin: 0
padding: 0
font-size: 6.9rem
font-weight: 700
line-height: 1
text-align: left
color: $black
p
margin: 0
padding: 0
font-size: 1rem
font-weight: 600
line-height: 1
text-align: left
color: $black
@media (max-width: $breakpoint)
.banner
width: 100vw
height: 25vh
left: 0
span
background-image: linear-gradient(to bottom, rgba($primary, 1), rgba($primary, 0))
.banner__content
padding: 0.5rem
display: flex
justify-content: center
align-items: center
h1
font-size: 3.5rem
text-align: center
p
font-size: 1.1rem
text-align: center

16
gallery/themes/default/ui/content.sass
View file

@ -1,16 +0,0 @@
@import "wrappers/index"
@import "wrappers/image"
@import "wrappers/settings"
@import "wrappers/error"
.content
width: calc(100% - 3.5rem)
min-height: 100vh
position: relative
left: 3.5rem
@media (max-width: $breakpoint)
.content
width: 100%
left: 0

115
gallery/themes/default/ui/gallery.sass
View file

@ -1,115 +0,0 @@
.gallery
margin: 0
padding: 0
width: 100%
display: grid
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
gap: 0.5rem
@media (max-width: 800px)
.gallery
grid-template-columns: auto auto auto
.gallery__item
margin: 0
padding: 0
height: auto
position: relative
// background: linear-gradient(to right, darken($white, 1%) 15%, darken($white, 10%) 35%, darken($white, 1%) 50%)
// background-size: 1000px 640px
// animation: imgLoading 1.8s linear infinite forwards
border-radius: $rad
box-sizing: border-box
overflow: hidden
&:after
content: ""
display: block
padding-bottom: 100%
&:hover
.gallery__item-info
opacity: 1
transform: scale(1)
h2, p
opacity: 1
.gallery__item-image
transform: scale(1.1)
.gallery__item-info
margin: 0
padding: 0.5rem
width: 100%
height: 100%
position: absolute
left: 0
bottom: 0
display: flex
flex-direction: column
justify-content: flex-end
background-image: linear-gradient(to bottom, rgba($black, 0), rgba($black, 0.8))
z-index: +1
opacity: 0 // hide
transform: scale(1.05) // scale up
transition: all 0.3s cubic-bezier(.79, .14, .15, .86)
h2
margin: 0
padding: 0
font-size: 1rem
font-weight: 600
color: $primary
text-overflow: ellipsis
overflow: hidden
opacity: 0 // hide
transition: all 0.2s ease-in-out
p
margin: 0
padding: 0
font-size: 0.8rem
font-weight: 500
color: $white
text-overflow: ellipsis
overflow: hidden
opacity: 0 // hide
transition: all 0.2s ease-in-out
.gallery__item-image
width: 100%
height: 100%
position: absolute
top: 0
left: 0
right: 0
bottom: 0
object-fit: cover
object-position: center
background-color: $white
transition: all 0.3s cubic-bezier(.79, .14, .15, .86)

35
gallery/themes/default/ui/wrappers/error.sass
View file

@ -1,35 +0,0 @@
.error-wrapper
display: flex
flex-direction: column
justify-content: center
align-items: center
background-color: $black
h1
margin: 0 2rem
font-size: 6.9rem
font-weight: 900
text-align: center
color: $primary
p
margin: 0 2rem
max-width: 40rem
font-size: 1.25rem
font-weight: 400
text-align: center
color: $white
@media (max-width: $breakpoint)
.error-wrapper
h1
font-size: 4.5rem
p
max-width: 100%
font-size: 1rem

351
gallery/themes/default/ui/wrappers/image.sass
View file

@ -1,351 +0,0 @@
.image-wrapper
padding: 0
display: grid
grid-template-areas: 'info image' 'info tools'
grid-template-columns: 25rem 1fr
grid-template-rows: 1fr auto
gap: 0
height: 100vh
.image-fullscreen
margin: 0
padding: 0 0 0 3.5rem
width: 100%
height: 100dvh
position: fixed
top: -100%
left: 0
display: flex
opacity: 0 // hide
background-color: rgba($black, 0.8)
z-index: 21
box-sizing: border-box
img
margin: auto
padding: 0
width: auto
height: auto
max-width: 100%
max-height: 100%
object-fit: contain
object-position: center
transform: scale(0.8)
.image-fullscreen__active
top: 0
opacity: 1 // show
transition: opacity 0.3s cubic-bezier(.79, .14, .15, .86)
img
transform: scale(1)
transition: transform 0.2s cubic-bezier(.68,-0.55,.27,1.55)
.image-fullscreen__hide
opacity: 0 // hide
transition: opacity 0.2s cubic-bezier(.79, .14, .15, .86)
img
transform: scaleY(0) // scale(0.8)
transition: transform 0.2s ease
.image-container
margin: auto
padding: 0.5rem
width: 100%
height: 100%
display: flex
overflow: hidden
grid-area: image
img
margin: auto
padding: 0
width: auto
height: auto
max-width: 100%
max-height: 100%
object-fit: contain
object-position: center
// box-shadow: 0 0 0.5rem rgba($black, 0.5)
.image-info__container
margin: 0
padding: 0
width: 100%
height: 100%
display: flex
flex-direction: column
background-color: $black
overflow-y: auto
grid-area: info
.image-info
margin: 0
padding: 0
width: 100%
display: flex
flex-direction: column
position: relative
background-color: $black
border-radius: $rad
.image-info__collapse
margin: 0
padding: 0
width: 1.25rem
height: 1.25rem
display: flex
justify-content: center
align-items: center
position: absolute
top: 0.6rem
right: 0.6rem
cursor: pointer
z-index: +2
transition: transform 0.15s cubic-bezier(.79, .14, .15, .86)
svg
margin: 0
padding: 0
fill: $primary
.image-info__header
margin: 0
padding: 0.5rem
width: 100%
height: 2.5rem
display: flex
justify-content: start
align-items: center
gap: 0.5rem
position: sticky
top: 0
z-index: +1
background-image: linear-gradient(to right, rgba($black2, 1), rgba($black, 1))
svg
margin: 0
padding: 0
width: 1.25rem
height: 1.25rem
fill: $primary
h2
margin: 0
padding: 0
font-size: 1.25rem
font-weight: 600
color: $primary
text-overflow: ellipsis
overflow: hidden
.image-info__content
margin: 0
padding: 0.5rem
display: flex
flex-direction: column
gap: 0.5rem
color: $white
overflow-x: hidden
transition: opacity 0.3s cubic-bezier(.79, .14, .15, .86)
p
margin: 0
padding: 0
font-size: 1rem
font-weight: 500
text-overflow: ellipsis
overflow: hidden
table
margin: 0
padding: 0
max-width: 100%
overflow-x: hidden
border-collapse: collapse
tr
margin: 0
padding: 0
width: 100%
white-space: nowrap
td
padding-bottom: 0.5rem
td:first-child
padding-right: 0.5rem
width: 50%
max-width: 0
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
font-size: 1rem
font-weight: 500
td:last-child
padding: 0
width: 50%
max-width: 0
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
font-size: 1rem
font-weight: 500
td.empty-table
opacity: 0.3
tr:last-of-type td
padding-bottom: 0
.img-colours
margin: 0
padding: 0
width: 100%
display: flex
gap: 0.5rem
span
margin: 0
padding: 0
width: 100%
height: 2rem
display: flex
justify-content: center
align-items: center
border-radius: $rad
.image-info__collapsed
height: 2.5rem
.image-info__collapse
transform: rotate(90deg)
.image-info__content
padding: 0
opacity: 0
#image-tools
margin-bottom: 0.5rem
grid-area: tools
@media (max-width: 1100px)
.image-wrapper
padding: 0.5rem
display: flex !important
flex-direction: column
gap: 0.5rem
height: auto
.image-container
margin: 0 auto
padding: 0
max-height: 69vh
img
max-height: 69vh
#image-tools
margin: 0
.image-info__container
margin: 0
padding: 0
width: 100%
height: auto
display: flex
flex-direction: column
gap: 0.5rem
background: none
.image-info__container
border-radius: $rad
.image-info__header
border-radius: $rad $rad 0 0
.image-info__collapsed
.image-info__header
border-radius: $rad
@media (max-width: $breakpoint)
.image-fullscreen
padding: 0 0 3.5rem 0
.image-wrapper
padding-bottom: 4rem
.image-info__header
background-image: none
background-color: $black2

12
gallery/themes/default/ui/wrappers/index.sass
View file

@ -1,12 +0,0 @@
.index-wrapper
padding: 0.5rem
position: relative
display: flex
flex-direction: column
gap: 0.5rem
@media (max-width: $breakpoint)
.index-wrapper
padding-bottom: 4rem

115
gallery/themes/default/ui/wrappers/settings.sass
View file

@ -1,115 +0,0 @@
@mixin settings-btn($color, $fill: false)
@if $fill
color: $white
background-color: $color
border: 2px solid $color
&:hover
background-color: $white
color: $color
@else
color: $color
background-color: $white
border: 2px solid $color
&:hover
background-color: $color
color: $white
@mixin settings-log($color)
font-size: 1rem
font-weight: 600
color: $white
background-color: $black
background-image: linear-gradient(120deg, rgba($color, 0.3), rgba($color, 0));
//border-left: 3px solid $color
.settings-wrapper
margin: 0
padding: 0.5rem
display: flex
flex-direction: column
gap: 0
.settings-nav
width: 100%
height: auto
position: sticky
top: 0
left: 0
display: flex
flex-direction: row
justify-content: center
gap: 0.5rem
background-color: $white
.settings-nav__item
margin: 0
padding: 0.5rem
width: 100%
height: 2.5rem
display: flex
justify-content: center
align-items: center
font-size: 1rem
font-weight: 600
text-align: center
line-height: 1
text-decoration: none
border-radius: $rad
cursor: pointer
transition: background-color 0.2s ease, color 0.2s ease
@include settings-btn($black)
&:focus
outline: none
.settings-nav__item-selected
@include settings-btn($black, true)
.settings-list
margin: 0
padding: 0
width: 100%
height: auto
display: flex
flex-direction: column
gap: 0.5rem
.log
margin: 0
padding: 1rem
height: auto
display: flex
flex-direction: column
gap: 0.5rem
border-radius: $rad
@include settings-log($critical)
@media (max-width: 450px)
.settings-nav
position: relative
flex-direction: column
gap: 0.5rem
.settings-wrapper
padding-bottom: 4rem

2
pyproject.toml
View file

@ -1,6 +1,6 @@
[tool.poetry]
name = "onlylegs"
version = "23.03.03"
version = "23.03.09"
description = "Gallery built for fast and simple image management"
authors = ["Fluffy-Bean <michal-gdula@protonmail.com>"]
license = "MIT"