mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2024-12-29 10:56:10 +00:00
Fixing inconsistent sass files
Removed useless styling Fixed date
This commit is contained in:
parent
99c1d81869
commit
56c82513ba
|
|
@ -5,7 +5,7 @@
|
|||
| |_| | | | | | |_| | |__| __/ (_| \__ \
|
||||
\___/|_| |_|_|\__, |_____\___|\__, |___/
|
||||
|___/ |___/
|
||||
Created by Fluffy Bean - Version 23.03.04
|
||||
Created by Fluffy Bean - Version 23.03.09
|
||||
"""
|
||||
|
||||
# Import system modules
|
||||
|
|
|
|||
|
|
@ -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'])
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
{% extends 'layout.html' %}
|
||||
|
||||
{% block wrapper_class %}error-wrapper{% endblock %}
|
||||
{% block content %}
|
||||
<span class="error-page">
|
||||
<h1>{{error}}</h1>
|
||||
<p>{{msg}}</p>
|
||||
</span>
|
||||
{% endblock %}
|
||||
|
|
@ -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;"
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
{% 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">
|
||||
<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;"
|
||||
|
|
@ -62,38 +62,34 @@
|
|||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="image-info__container">
|
||||
<div class="info-container" id="image-info">
|
||||
{% 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>
|
||||
</svg>
|
||||
</span>
|
||||
<div class="image-info__header">
|
||||
<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="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>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>
|
||||
</div>
|
||||
<div class="image-info__content">
|
||||
<div class="info-table">
|
||||
<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">
|
||||
<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="image-info__content">
|
||||
<div class="info-table">
|
||||
<table>
|
||||
<tr>
|
||||
<td>Image ID</td>
|
||||
|
|
@ -116,49 +112,39 @@
|
|||
</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>
|
||||
</svg>
|
||||
</span>
|
||||
<div class="info-tab">
|
||||
<div class="info-header">
|
||||
{% 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>
|
||||
</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>
|
||||
</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">
|
||||
<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>
|
||||
</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>
|
||||
</svg>
|
||||
<h2>{{tag}}</h2>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="image-info__content">
|
||||
<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>
|
||||
|
|
@ -181,20 +167,15 @@
|
|||
</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');
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -22,13 +22,27 @@
|
|||
<script src="{{ url_for('static', filename='js/ui/notifications.js') }}"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<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>
|
||||
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
96
gallery/themes/default/components/banner.sass
Normal 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
|
||||
112
gallery/themes/default/components/gallery.sass
Normal file
112
gallery/themes/default/components/gallery.sass
Normal 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
|
||||
|
|
@ -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
|
||||
51
gallery/themes/default/components/image-view/fullscreen.sass
Normal file
51
gallery/themes/default/components/image-view/fullscreen.sass
Normal 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
21
gallery/themes/default/components/image-view/image.sass
Normal 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
185
gallery/themes/default/components/image-view/info-tab.sass
Normal 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
66
gallery/themes/default/components/image-view/view.sass
Normal 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
|
||||
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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)
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue