mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2025-02-13 17:00:05 +00:00
Rename layout to base and clean up HTML
This commit is contained in:
parent
d9714da918
commit
3c09fb494b
|
@ -1,11 +1,11 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
<title>{{ config.WEBSITE_CONF.name }}</title>
|
<title>{{ config.WEBSITE_CONF.name }}</title>
|
||||||
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<meta name="description" content="{{ config.WEBSITE_CONF.motto }}"/>
|
<meta name="description" content="{{ config.WEBSITE_CONF.motto }}"/>
|
||||||
<meta name="author" content="{{ config.WEBSITE_CONF.author }}"/>
|
<meta name="author" content="{{ config.WEBSITE_CONF.author }}"/>
|
||||||
|
|
||||||
|
@ -16,8 +16,6 @@
|
||||||
<meta name="twitter:title" content="{{ config.WEBSITE_CONF.name }}"/>
|
<meta name="twitter:title" content="{{ config.WEBSITE_CONF.name }}"/>
|
||||||
<meta name="twitter:description" content="{{ config.WEBSITE_CONF.motto }}"/>
|
<meta name="twitter:description" content="{{ config.WEBSITE_CONF.motto }}"/>
|
||||||
|
|
||||||
<link rel="manifest" href="static/manifest.json"/>
|
|
||||||
|
|
||||||
<!-- phosphor icons!!! -->
|
<!-- phosphor icons!!! -->
|
||||||
<script src="https://unpkg.com/@phosphor-icons/web"></script>
|
<script src="https://unpkg.com/@phosphor-icons/web"></script>
|
||||||
|
|
||||||
|
@ -32,26 +30,15 @@
|
||||||
type="image/svg+xml"
|
type="image/svg+xml"
|
||||||
media="(prefers-color-scheme: dark)"/>
|
media="(prefers-color-scheme: dark)"/>
|
||||||
|
|
||||||
<link
|
<link rel="manifest" href="static/manifest.json"/>
|
||||||
rel="prefetch"
|
<link rel="prefetch" href="{{url_for('static', filename='fonts/font.css')}}" type="stylesheet"/>
|
||||||
href="{{url_for('static', filename='fonts/font.css')}}"
|
{% assets "scripts" %} <script type="text/javascript" src="{{ ASSET_URL }}"></script> {% endassets %}
|
||||||
type="stylesheet"/>
|
{% assets "styles" %} <link rel="stylesheet" href="{{ ASSET_URL }}" type="text/css" defer> {% endassets %}
|
||||||
|
|
||||||
{% assets "scripts" %}
|
|
||||||
<script type="text/javascript" src="{{ ASSET_URL }}"></script>
|
|
||||||
{% endassets %}
|
|
||||||
|
|
||||||
{% assets "styles" %}
|
|
||||||
<link rel="stylesheet" href="{{ ASSET_URL }}" type="text/css" defer>
|
|
||||||
{% endassets %}
|
|
||||||
|
|
||||||
{% block head %}{% endblock %}
|
{% block head %}{% endblock %}
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="notifications"></div>
|
<div class="notifications"></div>
|
||||||
|
|
||||||
<button class="top-of-page" aria-label="Jump to top of page"><i class="ph ph-arrow-up"></i></button>
|
<button class="top-of-page" aria-label="Jump to top of page"><i class="ph ph-arrow-up"></i></button>
|
||||||
{% if request.path == "/" %}<button class="info-button" aria-label="Show info on gallery"><i class="ph ph-question"></i></button>{% endif %}
|
|
||||||
|
|
||||||
<div class="pop-up">
|
<div class="pop-up">
|
||||||
<span class="pop-up__click-off" onclick="popupDissmiss()"></span>
|
<span class="pop-up__click-off" onclick="popupDissmiss()"></span>
|
||||||
|
@ -61,63 +48,56 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="wrapper">
|
<nav>
|
||||||
|
<a href="{{ url_for('gallery.index') }}{% block page_index %}{% endblock %}" class="navigation-item {% block nav_home %}{% endblock %}" aria-label="Home Page">
|
||||||
|
<i class="ph-fill ph-images-square"></i>
|
||||||
|
</a>
|
||||||
|
|
||||||
<div class="navigation">
|
<a href="{{ url_for('group.groups') }}" class="navigation-item {% block nav_groups %}{% endblock %}" aria-label="Photo Groups">
|
||||||
<!--<img src="{{url_for('static', filename='icon.png')}}" alt="Logo" class="logo" onload="this.style.opacity=1;" style="opacity:0">-->
|
<i class="ph-fill ph-package"></i>
|
||||||
|
</a>
|
||||||
|
|
||||||
<a href="{{ url_for('gallery.index') }}{% block page_index %}{% endblock %}" class="navigation-item {% block nav_home %}{% endblock %}" aria-label="Home Page">
|
{% if current_user.is_authenticated %}
|
||||||
<i class="ph-fill ph-images-square"></i>
|
<button class="navigation-item {% block nav_upload %}{% endblock %}" onclick="toggleUploadTab()" aria-label="Upload Photo">
|
||||||
<span class="tool-tip">Home<i class="ph-fill ph-caret-left"></i></span>
|
<i class="ph-fill ph-upload"></i>
|
||||||
|
</button>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<span class="navigation-spacer"></span>
|
||||||
|
|
||||||
|
{% if current_user.is_authenticated %}
|
||||||
|
<a href="{{ url_for('profile.profile') }}" class="navigation-item {% block nav_profile %}{% endblock %}" aria-label="Profile Page">
|
||||||
|
{% if current_user.picture %}
|
||||||
|
<span class="nav-pfp">
|
||||||
|
<picture>
|
||||||
|
<source srcset="{{ url_for('media_api.media', path='pfp/' + current_user.picture) }}?r=pfp&e=webp">
|
||||||
|
<source srcset="{{ url_for('media_api.media', path='pfp/' + current_user.picture) }}?r=pfp&e=png">
|
||||||
|
<img
|
||||||
|
src="{{ url_for('media_api.media', path='pfp/' + current_user.picture) }}?r=icon"
|
||||||
|
alt="Profile picture"
|
||||||
|
onload="imgFade(this)"
|
||||||
|
style="opacity:0;"
|
||||||
|
/>
|
||||||
|
</picture>
|
||||||
|
</span>
|
||||||
|
{% else %}
|
||||||
|
<i class="ph-fill ph-folder-simple-user"></i>
|
||||||
|
{% endif %}
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="{{ url_for('group.groups') }}" class="navigation-item {% block nav_groups %}{% endblock %}" aria-label="Photo Groups">
|
<a href="{{ url_for('settings.general') }}" class="navigation-item {% block nav_settings %}{% endblock %}" aria-label="Gallery Settings">
|
||||||
<i class="ph-fill ph-package"></i>
|
<i class="ph-fill ph-gear-fine"></i>
|
||||||
<span class="tool-tip">Groups<i class="ph-fill ph-caret-left"></i></span>
|
|
||||||
</a>
|
</a>
|
||||||
|
{% else %}
|
||||||
|
<button class="navigation-item {% block nav_login %}{% endblock %}" onclick="showLogin()" aria-label="Sign up or Login">
|
||||||
|
<i class="ph-fill ph-sign-in"></i>
|
||||||
|
</button>
|
||||||
|
{% endif %}
|
||||||
|
</nav>
|
||||||
|
|
||||||
{% if current_user.is_authenticated %}
|
<header>{% block header %}{% endblock %}</header>
|
||||||
<button class="navigation-item {% block nav_upload %}{% endblock %}" onclick="toggleUploadTab()" aria-label="Upload Photo">
|
|
||||||
<i class="ph-fill ph-upload"></i>
|
|
||||||
<span class="tool-tip">Upload<i class="ph-fill ph-caret-left"></i></span>
|
|
||||||
</button>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<span class="navigation-spacer"></span>
|
|
||||||
|
|
||||||
{% if current_user.is_authenticated %}
|
|
||||||
<a href="{{ url_for('profile.profile') }}" class="navigation-item {% block nav_profile %}{% endblock %}" aria-label="Profile Page">
|
|
||||||
{% if current_user.picture %}
|
|
||||||
<span class="nav-pfp">
|
|
||||||
<picture>
|
|
||||||
<source srcset="{{ url_for('media_api.media', path='pfp/' + current_user.picture) }}?r=pfp&e=webp">
|
|
||||||
<source srcset="{{ url_for('media_api.media', path='pfp/' + current_user.picture) }}?r=pfp&e=png">
|
|
||||||
<img
|
|
||||||
src="{{ url_for('media_api.media', path='pfp/' + current_user.picture) }}?r=icon"
|
|
||||||
alt="Profile picture"
|
|
||||||
onload="imgFade(this)"
|
|
||||||
style="opacity:0;"
|
|
||||||
/>
|
|
||||||
</picture>
|
|
||||||
</span>
|
|
||||||
{% else %}
|
|
||||||
<i class="ph-fill ph-folder-simple-user"></i>
|
|
||||||
{% endif %}
|
|
||||||
<span class="tool-tip">Profile<i class="ph-fill ph-caret-left"></i></span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<a href="{{ url_for('settings.general') }}" class="navigation-item {% block nav_settings %}{% endblock %}" aria-label="Gallery Settings">
|
|
||||||
<i class="ph-fill ph-gear-fine"></i>
|
|
||||||
<span class="tool-tip">Settings<i class="ph-fill ph-caret-left"></i></span>
|
|
||||||
</a>
|
|
||||||
{% else %}
|
|
||||||
<button class="navigation-item {% block nav_login %}{% endblock %}" onclick="showLogin()" aria-label="Sign up or Login">
|
|
||||||
<i class="ph-fill ph-sign-in"></i>
|
|
||||||
<span class="tool-tip">Login<i class="ph-fill ph-caret-left"></i></span>
|
|
||||||
</button>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<main>
|
||||||
{% if current_user.is_authenticated %}
|
{% if current_user.is_authenticated %}
|
||||||
<div class="upload-panel">
|
<div class="upload-panel">
|
||||||
<span class="click-off" onclick="closeUploadTab()"></span>
|
<span class="click-off" onclick="closeUploadTab()"></span>
|
||||||
|
@ -142,20 +122,8 @@
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<div class="content">
|
{% block content %}{% endblock %}
|
||||||
{% block content %}
|
</main>
|
||||||
{% endblock %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
// Show notifications on page load
|
|
||||||
{% for message in get_flashed_messages() %}
|
|
||||||
addNotification('{{ message[0] }}', {{ message[1] }});
|
|
||||||
{% endfor %}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{% block script %}{% endblock %}
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
keepSquare();
|
keepSquare();
|
||||||
|
@ -204,10 +172,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
window.onresize = () => {
|
window.onload = () => { keepSquare(); }
|
||||||
keepSquare();
|
window.onresize = () => { keepSquare(); }
|
||||||
makeGrid();
|
|
||||||
}
|
|
||||||
window.onscroll = () => {
|
window.onscroll = () => {
|
||||||
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
|
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
|
||||||
topOfPage.classList.add('show');
|
topOfPage.classList.add('show');
|
||||||
|
@ -223,6 +189,12 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
{% for message in get_flashed_messages() %}
|
||||||
|
addNotification('{{ message[0] }}', {{ message[1] }});
|
||||||
|
{% endfor %}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
{% block script %}{% endblock %}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -1,7 +1,7 @@
|
||||||
{% extends 'layout.html' %}
|
{% extends 'base.html' %}
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<span class="error-page">
|
<div class="error-page">
|
||||||
<h1>{{error}}</h1>
|
<h1>{{error}}</h1>
|
||||||
<p>{{msg}}</p>
|
<p>{{msg}}</p>
|
||||||
</span>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
@ -1,5 +1,7 @@
|
||||||
{% extends 'layout.html' %}
|
{% extends 'base.html' %}
|
||||||
|
{% from 'macros/image.html' import gallery_item %}
|
||||||
{% block nav_groups %}selected{% endblock %}
|
{% block nav_groups %}selected{% endblock %}
|
||||||
|
|
||||||
{% block head %}
|
{% block head %}
|
||||||
{% if images %}
|
{% if images %}
|
||||||
<meta property="og:image" content="{{ url_for('media_api.media', path='uploads/' + images.0.filename) }}"/>
|
<meta property="og:image" content="{{ url_for('media_api.media', path='uploads/' + images.0.filename) }}"/>
|
||||||
|
@ -170,16 +172,21 @@
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
{% if images %}
|
{% if images %}
|
||||||
.banner::after {
|
:root { --bg-100: {{ images.0.colours.0.0 }}, {{ images.0.colours.0.1 }}, {{ images.0.colours.0.2 }} }
|
||||||
box-shadow: 0 calc(var(--rad) * -1) 0 0 rgb{{ images.0.colours.0 }};
|
|
||||||
}
|
body {
|
||||||
.banner-content p {
|
background: rgb{{ images.0.colours.0 }} !important;
|
||||||
color: {{ text_colour }} !important;
|
color: {{ text_colour }} !important;
|
||||||
}
|
}
|
||||||
.banner-content h1 {
|
main {
|
||||||
color: {{ text_colour }} !important;
|
background: rgba(var(--white), 0.6) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.banner-header,
|
||||||
|
.banner-info,
|
||||||
|
.banner-subtitle {
|
||||||
|
color: {{ text_colour }} !important;
|
||||||
|
}
|
||||||
.banner-content .link {
|
.banner-content .link {
|
||||||
background-color: {{ text_colour }} !important;
|
background-color: {{ text_colour }} !important;
|
||||||
color: rgb{{ images.0.colours.0 }} !important;
|
color: rgb{{ images.0.colours.0 }} !important;
|
||||||
|
@ -189,28 +196,22 @@
|
||||||
color: {{ text_colour }} !important;
|
color: {{ text_colour }} !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner-filter {
|
|
||||||
background: linear-gradient(90deg, rgb{{ images.0.colours.0 }}, rgba({{ images.0.colours.1.0 }}, {{ images.0.colours.1.1 }}, {{ images.0.colours.1.2 }}, 0.3)) !important;
|
@media (min-width: 800px) {
|
||||||
|
.banner-filter {
|
||||||
|
background: linear-gradient(90deg, rgb{{ images.0.colours.0 }}, rgba({{ images.0.colours.1.0 }}, {{ images.0.colours.1.1 }}, {{ images.0.colours.1.2 }}, 0.3)) !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@media (max-width: 800px) {
|
@media (max-width: 800px) {
|
||||||
.banner-filter {
|
.banner-filter {
|
||||||
background: linear-gradient(180deg, rgba{{ images.0.colours.0 }}, rgba({{ images.0.colours.1.0 }}, {{ images.0.colours.1.1 }}, {{ images.0.colours.1.2 }}, 0.5)) !important;
|
background: linear-gradient(180deg, rgba({{ images.0.colours.1.0 }}, {{ images.0.colours.1.1 }}, {{ images.0.colours.1.2 }}, 0.4), rgba({{ images.0.colours.0.0 }}, {{ images.0.colours.0.1 }}, {{ images.0.colours.0.2 }}, 0.3)) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.navigation {
|
|
||||||
background-color: rgb{{ images.0.colours.0 }} !important;
|
|
||||||
}
|
|
||||||
.navigation-item > i {
|
|
||||||
color: {{ text_colour }} !important;
|
|
||||||
}
|
|
||||||
.navigation-item.selected::before {
|
|
||||||
background-color: {{ text_colour }} !important;
|
|
||||||
}
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</style>
|
</style>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% block content %}
|
|
||||||
|
{% block header %}
|
||||||
{% if images %}
|
{% if images %}
|
||||||
<div class="banner">
|
<div class="banner">
|
||||||
<picture>
|
<picture>
|
||||||
|
@ -219,9 +220,7 @@
|
||||||
<img
|
<img
|
||||||
src="{{ url_for('media_api.media', path='uploads/' + images.0.filename) }}?r=prev"
|
src="{{ url_for('media_api.media', path='uploads/' + images.0.filename) }}?r=prev"
|
||||||
alt="{% if images.0.alt %}{{ images.0.alt }}{% else %}Group Banner{% endif %}"
|
alt="{% if images.0.alt %}{{ images.0.alt }}{% else %}Group Banner{% endif %}"
|
||||||
onload="imgFade(this)"
|
onload="imgFade(this)" style="opacity:0;"
|
||||||
style="opacity:0;"
|
|
||||||
fetchpriority="low"
|
|
||||||
/>
|
/>
|
||||||
</picture>
|
</picture>
|
||||||
<span class="banner-filter"></span>
|
<span class="banner-filter"></span>
|
||||||
|
@ -261,27 +260,12 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
{% if images %}
|
{% if images %}
|
||||||
<div class="gallery-grid">
|
<div class="gallery-grid">
|
||||||
{% for image in images %}
|
{% for image in images %}{{ gallery_item(image) }}{% endfor %}
|
||||||
<a id="image-{{ image.id }}" class="gallery-item" href="{{ url_for('group.group_post', group_id=group.id, image_id=image.id) }}" style="background-color: rgb{{ image.colours.0 }}">
|
|
||||||
<div class="image-filter">
|
|
||||||
<p class="image-title"><span class="time">{{ image.created_at }}</span></p>
|
|
||||||
</div>
|
|
||||||
<picture>
|
|
||||||
<source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb&e=webp">
|
|
||||||
<source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb&e=png">
|
|
||||||
<img
|
|
||||||
src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb"
|
|
||||||
alt="{% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %}"
|
|
||||||
onload="imgFade(this)"
|
|
||||||
style="opacity:0;"
|
|
||||||
fetchpriority="low"
|
|
||||||
/>
|
|
||||||
</picture>
|
|
||||||
</a>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
<div class="big-text">
|
<div class="big-text">
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
{% extends 'layout.html' %}
|
{% extends 'base.html' %}
|
||||||
{% block page_index %}
|
{% block page_index %}
|
||||||
{% if return_page %}?page={{ return_page }}{% endif %}{% endblock %}
|
{% if return_page %}?page={{ return_page }}{% endif %}{% endblock %}
|
||||||
|
|
||||||
{% block head %}
|
{% block head %}
|
||||||
<meta property="og:image" content="{{ url_for('media_api.media', path='uploads/' + image.filename) }}"/>
|
<meta property="og:image" content="{{ url_for('media_api.media', path='uploads/' + image.filename) }}"/>
|
||||||
<meta name="twitter:image" content="{{ url_for('media_api.media', path='uploads/' + image.filename) }}">
|
<meta name="twitter:image" content="{{ url_for('media_api.media', path='uploads/' + image.filename) }}">
|
||||||
|
@ -10,14 +11,16 @@
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
function fullscreen() {
|
function fullscreen() {
|
||||||
let info = document.querySelector('.info-container');
|
let info = document.querySelector('.info-container');
|
||||||
let wrapper = document.querySelector('.image-grid');
|
let image = document.querySelector('.image-container');
|
||||||
|
|
||||||
if (info.classList.contains('collapsed')) {
|
if (info.classList.contains('collapsed')) {
|
||||||
info.classList.remove('collapsed');
|
info.classList.remove('collapsed');
|
||||||
wrapper.classList.remove('collapsed');
|
image.classList.remove('collapsed');
|
||||||
|
document.cookie = "image-info=0"
|
||||||
} else {
|
} else {
|
||||||
info.classList.add('collapsed');
|
info.classList.add('collapsed');
|
||||||
wrapper.classList.add('collapsed');
|
image.classList.add('collapsed');
|
||||||
|
document.cookie = "image-info=1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -68,45 +71,17 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.background span {
|
.background::after {
|
||||||
background-image: linear-gradient(to top, rgba({{ image.colours.0.0 }}, {{ image.colours.0.1 }}, {{ image.colours.0.2 }}, 0.8),
|
background-image: linear-gradient(to top, rgba({{ image.colours.0.0 }}, {{ image.colours.0.1 }}, {{ image.colours.0.2 }}, 0.8),
|
||||||
rgba({{ image.colours.1.0 }}, {{ image.colours.1.1 }}, {{ image.colours.1.2 }}, 0.2));
|
rgba({{ image.colours.1.0 }}, {{ image.colours.1.1 }}, {{ image.colours.1.2 }}, 0.2));
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% block content %}
|
|
||||||
<div class="background">
|
{% block header %}
|
||||||
<picture>
|
<div class="banner-small">
|
||||||
<source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev&e=webp">
|
<div class="banner-content">
|
||||||
<source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev&e=png">
|
<h1 class="banner-header">{{ config.WEBSITE_CONF.name }}</h1>
|
||||||
<img
|
|
||||||
src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev"
|
|
||||||
alt="{{ image.alt }}"
|
|
||||||
onload="imgFade(this)"
|
|
||||||
style="opacity:0;"
|
|
||||||
/>
|
|
||||||
</picture>
|
|
||||||
<span></span>
|
|
||||||
</div>
|
|
||||||
<div class="image-grid">
|
|
||||||
<div class="image-block">
|
|
||||||
<div class="image-container">
|
|
||||||
<picture>
|
|
||||||
<source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev&e=webp">
|
|
||||||
<source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev&e=png">
|
|
||||||
<img
|
|
||||||
src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev"
|
|
||||||
alt="{{ image.alt }}"
|
|
||||||
onload="imgFade(this)"
|
|
||||||
style="opacity:0;"
|
|
||||||
onerror="this.src='{{ url_for('static', filename='error.png')}}'"
|
|
||||||
{% if "File" in image.exif %}
|
|
||||||
width="{{ image.exif.File.Width.raw }}"
|
|
||||||
height="{{ image.exif.File.Height.raw }}"
|
|
||||||
{% endif %}
|
|
||||||
/>
|
|
||||||
</picture>
|
|
||||||
</div>
|
|
||||||
<div class="pill-row">
|
<div class="pill-row">
|
||||||
{% if next_url %}<div><a class="pill-item" href="{{ next_url }}"><i class="ph ph-arrow-left"></i></a></div>{% endif %}
|
{% if next_url %}<div><a class="pill-item" href="{{ next_url }}"><i class="ph ph-arrow-left"></i></a></div>{% endif %}
|
||||||
<div>
|
<div>
|
||||||
|
@ -123,61 +98,78 @@
|
||||||
{% if prev_url %}<div><a class="pill-item" href="{{ prev_url }}"><i class="ph ph-arrow-right"></i></a></div>{% endif %}
|
{% if prev_url %}<div><a class="pill-item" href="{{ prev_url }}"><i class="ph ph-arrow-right"></i></a></div>{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-container">
|
</div>
|
||||||
<div class="info-tab">
|
{% endblock %}
|
||||||
<div class="info-header">
|
|
||||||
<i class="ph ph-info"></i>
|
{% block content %}
|
||||||
<h2>Info</h2>
|
<div class="background">
|
||||||
<button class="collapse-indicator"><i class="ph ph-caret-down"></i></button>
|
<picture>
|
||||||
</div>
|
<source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev&e=webp">
|
||||||
<div class="info-table">
|
<source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev&e=png">
|
||||||
<table>
|
<img src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev" alt="{{ image.alt }}" onload="imgFade(this)" style="opacity:0;"/>
|
||||||
<tr>
|
</picture>
|
||||||
<td>Author</td>
|
</div>
|
||||||
<td>
|
|
||||||
<img
|
<div class="image-container {% if close_tab %}collapsed{% endif %}">
|
||||||
src="{{ url_for('media_api.media', path='pfp/' + image.author.picture) }}"
|
<picture>
|
||||||
alt="Profile Picture"
|
<source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev&e=webp">
|
||||||
class="pfp"
|
<source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev&e=png">
|
||||||
onload="imgFade(this)"
|
<img
|
||||||
style="opacity: 0;"
|
src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=prev"
|
||||||
/>
|
alt="{{ image.alt }}"
|
||||||
<a href="{{ url_for('profile.profile', id=image.author.id) }}" class="link">{{ image.author.username }}</a>
|
onload="imgFade(this)"
|
||||||
</td>
|
style="opacity:0;"
|
||||||
</tr>
|
{% if "File" in image.exif %}
|
||||||
<tr>
|
width="{{ image.exif.File.Width.raw }}"
|
||||||
<td>Upload date</td>
|
height="{{ image.exif.File.Height.raw }}"
|
||||||
<td><span class="time">{{ image.created_at }}</span></td>
|
{% endif %}
|
||||||
</tr>
|
/>
|
||||||
{% if image.description %}
|
</picture>
|
||||||
<tr>
|
</div>
|
||||||
<td>Description</td>
|
|
||||||
<td>{{ image.description }}</td>
|
<div class="info-container {% if close_tab %}collapsed{% endif %}">
|
||||||
</tr>
|
<details open>
|
||||||
{% endif %}
|
<summary>
|
||||||
</table>
|
<i class="ph ph-info"></i><h2>Info</h2><span style="width: 100%"></span>
|
||||||
<div class="img-colours">
|
<i class="ph ph-caret-down collapse-indicator"></i>
|
||||||
{% for col in image.colours %}
|
</summary>
|
||||||
<button style="background-color: rgb{{ col }}" onclick="copyToClipboard('rgb{{ col }}')">
|
|
||||||
<i class="ph-fill ph-paint-bucket" style="{{ col|colour_contrast }}"></i>
|
<table>
|
||||||
</button>
|
<tr>
|
||||||
{% endfor %}
|
<td>Author</td>
|
||||||
</div>
|
<td>
|
||||||
{% if image.groups %}
|
<img src="{{ url_for('media_api.media', path='pfp/' + image.author.picture) }}" alt="Profile Picture" class="pfp" onload="imgFade(this)" style="opacity: 0;"/>
|
||||||
<div class="img-groups">
|
<a href="{{ url_for('profile.profile', id=image.author.id) }}" class="link">{{ image.author.username }}</a>
|
||||||
{% for group in image.groups %}
|
</td>
|
||||||
<a href="{{ url_for('group.group', group_id=group.id) }}" class="tag-icon">
|
</tr>
|
||||||
<i class="ph ph-package"></i>{{ group['name'] }}
|
<tr>
|
||||||
</a>
|
<td>Upload date</td>
|
||||||
{% endfor %}
|
<td><span class="time">{{ image.created_at }}</span></td>
|
||||||
</div>
|
</tr>
|
||||||
{% endif %}
|
{% if image.description %}
|
||||||
</div>
|
<tr>
|
||||||
|
<td>Description</td>
|
||||||
|
<td>{{ image.description }}</td>
|
||||||
|
</tr>
|
||||||
|
{% endif %}
|
||||||
|
</table>
|
||||||
|
<div class="img-colours">
|
||||||
|
{% for col in image.colours %}
|
||||||
|
<button style="background-color: rgb{{ col }}" onclick="copyToClipboard('rgb{{ col }}')"><i class="ph-fill ph-paint-bucket" style="{{ col|colour_contrast }}"></i></button>
|
||||||
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
{% for tag in image.exif %}
|
{% if image.groups %}
|
||||||
<div class="info-tab">
|
<div class="img-groups">
|
||||||
<div class="info-header">
|
{% for group in image.groups %}
|
||||||
{% if tag == 'Photographer' %}
|
<a href="{{ url_for('group.group', group_id=group.id) }}" class="tag-icon"><i class="ph ph-package"></i>{{ group['name'] }}</a>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</details>
|
||||||
|
{% for tag in image.exif %}
|
||||||
|
<details open>
|
||||||
|
<summary>
|
||||||
|
{% if tag == 'Photographer' %}
|
||||||
<i class="ph ph-person"></i><h2>Photographer</h2>
|
<i class="ph ph-person"></i><h2>Photographer</h2>
|
||||||
{% elif tag == 'Camera' %}
|
{% elif tag == 'Camera' %}
|
||||||
<i class="ph ph-camera"></i><h2>Camera</h2>
|
<i class="ph ph-camera"></i><h2>Camera</h2>
|
||||||
|
@ -188,63 +180,55 @@
|
||||||
{% else %}
|
{% else %}
|
||||||
<i class="ph ph-file-image"></i><h2>{{ tag }}</h2>
|
<i class="ph ph-file-image"></i><h2>{{ tag }}</h2>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<button class="collapse-indicator"><i class="ph ph-caret-down"></i></button>
|
<span style="width: 100%"></span>
|
||||||
</div>
|
<i class="ph ph-caret-down collapse-indicator"></i>
|
||||||
<div class="info-table">
|
</summary>
|
||||||
<table>
|
<table>
|
||||||
{% for subtag in image.exif[tag] %}
|
{% for subtag in image.exif[tag] %}
|
||||||
<tr>
|
<tr>
|
||||||
<td>{{ subtag }}</td>
|
<td>{{ subtag }}</td>
|
||||||
{% if image.exif[tag][subtag]['formatted'] %}
|
{% if image.exif[tag][subtag]['formatted'] %}
|
||||||
{% if image.exif[tag][subtag]['type'] == 'date' %}
|
{% if image.exif[tag][subtag]['type'] == 'date' %}
|
||||||
<td><span class="time">{{ image.exif[tag][subtag]['formatted'] }}</span></td>
|
<td><span class="time">{{ image.exif[tag][subtag]['formatted'] }}</span></td>
|
||||||
{% else %}
|
{% else %}
|
||||||
<td>{{ image.exif[tag][subtag]['formatted'] }}</td>
|
<td>{{ image.exif[tag][subtag]['formatted'] }}</td>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% elif image.exif[tag][subtag]['raw'] %}
|
{% elif image.exif[tag][subtag]['raw'] %}
|
||||||
<td>{{ image.exif[tag][subtag]['raw'] }}</td>
|
<td>{{ image.exif[tag][subtag]['raw'] }}</td>
|
||||||
{% else %}
|
{% else %}
|
||||||
<td class="empty-table">Oops, an error</td>
|
<td class="empty-table">Oops, an error</td>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</tr>
|
</tr>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</details>
|
||||||
</div>
|
{% endfor %}
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block script %}
|
{% block script %}
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
let infoTab = document.querySelectorAll('.info-tab');
|
function getCookie(cname) {
|
||||||
|
let name = cname + "=";
|
||||||
for (let i = 0; i < infoTab.length; i++) {
|
let ca = document.cookie.split(';');
|
||||||
const tab = infoTab[i];
|
for(let i = 0; i < ca.length; i++) {
|
||||||
|
let c = ca[i];
|
||||||
tab.querySelector('.collapse-indicator').addEventListener('click', function() {
|
while (c.charAt(0) == ' ') {
|
||||||
tab.classList.toggle('collapsed');
|
c = c.substring(1);
|
||||||
});
|
|
||||||
|
|
||||||
/*
|
|
||||||
const tabHeader = tab.querySelector('.info-header');
|
|
||||||
const tabContent = tab.querySelector('.info-table');
|
|
||||||
|
|
||||||
const tabHeight = tabHeader.offsetHeight + tabContent.offsetHeight;
|
|
||||||
|
|
||||||
tab.style.height = tabHeight + 'px';
|
|
||||||
|
|
||||||
tab.querySelector('.collapse-indicator').addEventListener('click', function() {
|
|
||||||
if (tab.classList.contains('collapsed')) {
|
|
||||||
tab.style.height = tabHeight + 'px';
|
|
||||||
tab.classList.remove('collapsed');
|
|
||||||
} else {
|
|
||||||
tab.style.height = tabHeader.offsetHeight + 'px';
|
|
||||||
tab.classList.add('collapsed');
|
|
||||||
}
|
}
|
||||||
});
|
if (c.indexOf(name) == 0) {
|
||||||
*/
|
return c.substring(name.length, c.length);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return "";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
if (getCookie("image-info")) {
|
||||||
|
document.querySelector('.info-container').classList.add('collapsed');
|
||||||
|
document.querySelector('.image-container').classList.add('collapsed');
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
*/
|
||||||
</script>
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
|
@ -1,16 +1,17 @@
|
||||||
{% extends 'layout.html' %}
|
{% extends 'base.html' %}
|
||||||
|
{% from 'macros/image.html' import gallery_item %}
|
||||||
{% block head %}
|
{% block head %}
|
||||||
<meta property="og:image" content="{{ url_for('static', filename='icon.png') }}"/>
|
<meta property="og:image" content="{{ url_for('static', filename='icon.png') }}"/>
|
||||||
<meta name="twitter:image" content="{{ url_for('static', filename='icon.png') }}"/>
|
<meta name="twitter:image" content="{{ url_for('static', filename='icon.png') }}"/>
|
||||||
<meta name="twitter:card" content="summary"/>
|
<meta name="twitter:card" content="summary"/>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% block nav_home %}selected{% endblock %}
|
|
||||||
{% block content %}
|
{% block header %}
|
||||||
<div class="banner-small">
|
<div class="banner-small">
|
||||||
<div class="banner-content">
|
<div class="banner-content">
|
||||||
<h1 class="banner-header">{{ config.WEBSITE_CONF.name }}</h1>
|
<h1 class="banner-header">{{ config.WEBSITE_CONF.name }}</h1>
|
||||||
{% if total_images == 0 %}
|
{% if not total_images %}
|
||||||
<p class="banner-info">0 images D:</p>
|
<p class="banner-info">0 images!</p>
|
||||||
{% elif total_images == 69 %}
|
{% elif total_images == 69 %}
|
||||||
<p class="banner-info">{{ total_images }} images, nice</p>
|
<p class="banner-info">{{ total_images }} images, nice</p>
|
||||||
{% else %}
|
{% else %}
|
||||||
|
@ -20,39 +21,33 @@
|
||||||
{% if pages > 1 %}
|
{% if pages > 1 %}
|
||||||
<div class="pill-row">
|
<div class="pill-row">
|
||||||
<div>
|
<div>
|
||||||
{% if pages > 4 %}<a class="pill-item" href="{{ url_for('gallery.index') }}"><i class="ph ph-arrow-line-left"></i></a>{% endif %}
|
{% if pages > 4 %}
|
||||||
<a class="pill-item" href="{% if (page - 1) > 1 %} {{ url_for('gallery.index', page=page-1) }} {% else %} {{ url_for('gallery.index') }} {% endif %}"><i class="ph ph-arrow-left"></i></a>
|
<a class="pill-item" href="{{ url_for('gallery.index') }}"><i class="ph ph-caret-double-left"></i></a>
|
||||||
|
{% else %}
|
||||||
|
<button class="pill-item disabled"><i class="ph ph-caret-double-left"></i></button>
|
||||||
|
{% endif %}
|
||||||
|
<a class="pill-item" href="{% if (page - 1) > 1 %} {{ url_for('gallery.index', page=page - 1) }} {% else %} {{ url_for('gallery.index') }} {% endif %}"><i class="ph ph-caret-left"></i></a>
|
||||||
</div>
|
</div>
|
||||||
<span class="pill-text">{{ page }} / {{ pages }}</span>
|
<span class="pill-text">{{ page }} / {{ pages }}</span>
|
||||||
<div>
|
<div>
|
||||||
<a class="pill-item" href="{% if (page + 1) < pages %} {{ url_for('gallery.index', page=page+1) }} {% else %} {{ url_for('gallery.index', page=pages) }} {% endif %}"><i class="ph ph-arrow-right"></i></a>
|
<a class="pill-item" href="{% if (page + 1) < pages %} {{ url_for('gallery.index', page=page + 1) }} {% else %} {{ url_for('gallery.index', page=pages) }} {% endif %}"><i class="ph ph-caret-right"></i></a>
|
||||||
{% if pages > 4 %}<a class="pill-item" href="{{ url_for('gallery.index', page=pages) }}"><i class="ph ph-arrow-line-right"></i></a>{% endif %}
|
{% if pages > 4 %}
|
||||||
|
<a class="pill-item" href="{{ url_for('gallery.index', page=pages) }}"><i class="ph ph-caret-double-right"></i></a>
|
||||||
|
{% else %}
|
||||||
|
<button class="pill-item disabled"><i class="ph ph-caret-double-right"></i></button>
|
||||||
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block nav_home %}selected{% endblock %}
|
||||||
|
{% block content %}
|
||||||
{% if images %}
|
{% if images %}
|
||||||
<div class="gallery-grid" style="position: relative;">
|
<div class="gallery-grid">
|
||||||
{% for image in images %}
|
{% for image in images %}{{ gallery_item(image) }}{% endfor %}
|
||||||
<a id="image-{{ image.id }}" class="gallery-item" href="{{ url_for('image.image', image_id=image.id) }}" style="background-color: rgb{{ image.colours.0 }}; position: absolute; margin: 0;">
|
|
||||||
<div class="image-filter">
|
|
||||||
<p class="image-title"><span class="time">{{ image.created_at }}</span></p>
|
|
||||||
</div>
|
|
||||||
<picture>
|
|
||||||
<source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb&e=webp">
|
|
||||||
<source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb&e=png">
|
|
||||||
<img
|
|
||||||
src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb"
|
|
||||||
alt="{% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %}"
|
|
||||||
onload="imgFade(this)"
|
|
||||||
style="opacity:0;"
|
|
||||||
fetchpriority="low"
|
|
||||||
/>
|
|
||||||
</picture>
|
|
||||||
</a>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
<div class="big-text">
|
<div class="big-text">
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
{% extends 'layout.html' %}
|
{% extends 'base.html' %}
|
||||||
{% block nav_groups %}selected{% endblock %}
|
{% block nav_groups %}selected{% endblock %}
|
||||||
|
|
||||||
{% block head %}
|
{% block head %}
|
||||||
{% if images %}<meta name="theme-color" content="rgb{{ images.0.colours.0 }}"/>{% endif %}
|
{% if images %}<meta name="theme-color" content="rgb{{ images.0.colours.0 }}"/>{% endif %}
|
||||||
|
|
||||||
|
@ -92,7 +93,8 @@
|
||||||
</script>
|
</script>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% block content %}
|
|
||||||
|
{% block header %}
|
||||||
<div class="banner-small">
|
<div class="banner-small">
|
||||||
<div class="banner-content">
|
<div class="banner-content">
|
||||||
<h1 class="banner-header">{{ config.WEBSITE_CONF.name }}</h1>
|
<h1 class="banner-header">{{ config.WEBSITE_CONF.name }}</h1>
|
||||||
|
@ -112,11 +114,18 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
{% if groups %}
|
{% if groups %}
|
||||||
<div class="gallery-grid">
|
<div class="gallery-grid">
|
||||||
{% for group in groups %}
|
{% for group in groups %}
|
||||||
<a id="group-{{ group.id }}" class="group-item" href="{{ url_for('group.group', group_id=group.id) }}" {% if group.images|length > 0 %} style="background-color: rgba{{ group.images.0.colours.0 }};" {% endif %}>
|
<a
|
||||||
|
class="group-item square"
|
||||||
|
id="group-{{ group.id }}"
|
||||||
|
href="{{ url_for('group.group', group_id=group.id) }}"
|
||||||
|
{% if group.images|length > 0 %} style="background-color: rgba{{ group.images.0.colours.0 }};"{% endif %}
|
||||||
|
>
|
||||||
<div class="image-filter">
|
<div class="image-filter">
|
||||||
<p class="image-subtitle">By {{ group.author.username }}</p>
|
<p class="image-subtitle">By {{ group.author.username }}</p>
|
||||||
<p class="image-title">{{ group.name }}</p>
|
<p class="image-title">{{ group.name }}</p>
|
||||||
|
|
|
@ -1,4 +1,7 @@
|
||||||
{% extends 'layout.html' %}
|
{% extends 'base.html' %}
|
||||||
|
{% from 'macros/image.html' import gallery_item %}
|
||||||
|
{% block nav_profile %}{% if user.id == current_user.id %}selected{% endif %}{% endblock %}
|
||||||
|
|
||||||
{% block head %}
|
{% block head %}
|
||||||
{% if user.picture %}
|
{% if user.picture %}
|
||||||
<meta property="og:image" content="{{ url_for('media_api.media', path='pfp/' + user.picture) }}"/>
|
<meta property="og:image" content="{{ url_for('media_api.media', path='pfp/' + user.picture) }}"/>
|
||||||
|
@ -22,8 +25,8 @@
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% block nav_profile %}{% if user.id == current_user.id %}selected{% endif %}{% endblock %}
|
|
||||||
{% block content %}
|
{% block header %}
|
||||||
<div class="banner">
|
<div class="banner">
|
||||||
{% if user.banner %}
|
{% if user.banner %}
|
||||||
<img src="{{ url_for('static', filename='icon.png') }}" alt="Profile Banner" onload="imgFade(this)" style="opacity:0;"/>
|
<img src="{{ url_for('static', filename='icon.png') }}" alt="Profile Banner" onload="imgFade(this)" style="opacity:0;"/>
|
||||||
|
@ -67,28 +70,13 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
{% if images %}
|
{% if images %}
|
||||||
<h1 class="gallery-header">Images</h1>
|
<h1 class="gallery-header">Images</h1>
|
||||||
<div class="gallery-grid">
|
<div class="gallery-grid">
|
||||||
{% for image in images %}
|
{% for image in images %}{{ gallery_item(image) }}{% endfor %}
|
||||||
<a id="image-{{ image.id }}" class="gallery-item" href="{{ url_for('image.image', image_id=image.id) }}" style="background-color: rgb{{ image.colours.0 }}">
|
|
||||||
<div class="image-filter">
|
|
||||||
<p class="image-title"><span class="time">{{ image.created_at }}</span></p>
|
|
||||||
</div>
|
|
||||||
<picture>
|
|
||||||
<source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb&e=webp">
|
|
||||||
<source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb&e=png">
|
|
||||||
<img
|
|
||||||
src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb"
|
|
||||||
alt="{% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %}"
|
|
||||||
onload="imgFade(this)"
|
|
||||||
style="opacity:0;"
|
|
||||||
fetchpriority="low"
|
|
||||||
/>
|
|
||||||
</picture>
|
|
||||||
</a>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
<div class="big-text">
|
<div class="big-text">
|
||||||
|
@ -97,4 +85,3 @@
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
{% extends 'layout.html' %}
|
{% extends 'base.html' %}
|
||||||
|
|
||||||
{% block nav_settings %}selected{% endblock %}
|
{% block nav_settings %}selected{% endblock %}
|
||||||
{% block content %}
|
|
||||||
|
{% block header %}
|
||||||
<div class="banner-small">
|
<div class="banner-small">
|
||||||
<div class="banner-content">
|
<div class="banner-content">
|
||||||
<h1 class="banner-header">Settings</h1>
|
<h1 class="banner-header">Settings</h1>
|
||||||
|
@ -13,7 +13,9 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
<div class="info-tab" id="profileSettings" style="margin: 0.5rem 0.5rem 0 0.5rem">
|
<div class="info-tab" id="profileSettings" style="margin: 0.5rem 0.5rem 0 0.5rem">
|
||||||
<div class="info-header">
|
<div class="info-header">
|
||||||
<i class="ph ph-info"></i>
|
<i class="ph ph-info"></i>
|
||||||
|
|
Loading…
Reference in a new issue