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