From 3c09fb494b9a4ef64c7b4807e07de38f07b8d230 Mon Sep 17 00:00:00 2001 From: Fluffy-Bean <michal-gdula@protonmail.com> Date: Mon, 29 May 2023 10:42:17 +0000 Subject: [PATCH] Rename layout to base and clean up HTML --- onlylegs/templates/{layout.html => base.html} | 148 ++++------ onlylegs/templates/error.html | 6 +- onlylegs/templates/group.html | 68 ++--- onlylegs/templates/image.html | 270 ++++++++---------- onlylegs/templates/index.html | 51 ++-- onlylegs/templates/list.html | 15 +- onlylegs/templates/profile.html | 31 +- onlylegs/templates/settings.html | 8 +- 8 files changed, 265 insertions(+), 332 deletions(-) rename onlylegs/templates/{layout.html => base.html} (58%) diff --git a/onlylegs/templates/layout.html b/onlylegs/templates/base.html similarity index 58% rename from onlylegs/templates/layout.html rename to onlylegs/templates/base.html index 890c792..59c3b06 100644 --- a/onlylegs/templates/layout.html +++ b/onlylegs/templates/base.html @@ -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> \ No newline at end of file diff --git a/onlylegs/templates/error.html b/onlylegs/templates/error.html index 9d76c79..7e9c20c 100644 --- a/onlylegs/templates/error.html +++ b/onlylegs/templates/error.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 %} diff --git a/onlylegs/templates/group.html b/onlylegs/templates/group.html index c7c3827..211c1b5 100644 --- a/onlylegs/templates/group.html +++ b/onlylegs/templates/group.html @@ -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"> diff --git a/onlylegs/templates/image.html b/onlylegs/templates/image.html index e8b0f8b..b747708 100644 --- a/onlylegs/templates/image.html +++ b/onlylegs/templates/image.html @@ -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 %} \ No newline at end of file diff --git a/onlylegs/templates/index.html b/onlylegs/templates/index.html index e85cafb..eead3a8 100644 --- a/onlylegs/templates/index.html +++ b/onlylegs/templates/index.html @@ -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"> diff --git a/onlylegs/templates/list.html b/onlylegs/templates/list.html index 7ada8f9..8d8eb2e 100644 --- a/onlylegs/templates/list.html +++ b/onlylegs/templates/list.html @@ -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> diff --git a/onlylegs/templates/profile.html b/onlylegs/templates/profile.html index 9dd8dff..4fbf9ca 100644 --- a/onlylegs/templates/profile.html +++ b/onlylegs/templates/profile.html @@ -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 %} - diff --git a/onlylegs/templates/settings.html b/onlylegs/templates/settings.html index 271911b..c68695a 100644 --- a/onlylegs/templates/settings.html +++ b/onlylegs/templates/settings.html @@ -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>