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

Add Notification js system

Browse source 
Load full image on first click of full resolution button
Change background image
Change way images load into the view
Add Lazy Loading
This commit is contained in:
Michał 2023-01-14 01:46:11 +00:00
parent a10a5a8793
commit 7605e5ab40
13 changed files with 214 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
gallery/__init__.py
View file

@ -5,7 +5,7 @@ print("""
| |_| | | | | | |_| | |__| __/ (_| \\__ \\
\\___/|_| |_|_|\\__, |_____\\___|\\__, |___/
|___/ |___/
Created by Fluffy Bean - Version 130123
Created by Fluffy Bean - Version 140123
""")
# Import base packages

2
gallery/api.py
View file

@ -47,7 +47,7 @@ def upload():
img_name = f"GWAGWA_{uuid4().__str__()}{img_ext}"
if not img_ext in current_app.config['ALLOWED_EXTENSIONS']:
return 'File extension not allowed: '+img_ext
abort(403)
# Save to database
try:

1
gallery/static/images/background.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 19 KiB

2
gallery/templates/error.html
View file

@ -1,7 +1,7 @@
{% extends 'layout.html' %}
{% block header %}
<img src="{{ url_for('static', filename='images/leaves.jpg') }}" alt="leaves" onload="imgFade(this)" style="display: none;"/>
<img src="{{ url_for('static', filename='images/background.svg') }}" onload="imgFade(this)" style="display: none;"/>
{% endblock %}
{% block content %}

2
gallery/templates/group.html
View file

@ -1,7 +1,7 @@
{% extends 'layout.html' %}
{% block header %}
<img src="{{ url_for('static', filename='images/leaves.jpg') }}" alt="leaves" onload="imgFade(this)" style="display: none;"/>
<img src="{{ url_for('static', filename='images/background.svg') }}" onload="imgFade(this)" style="opacity:0;">
{% endblock %}
{% block content %}

37
gallery/templates/image.html
View file

@ -1,15 +1,15 @@
{% extends 'layout.html' %}
{% block header %}
<img src="/api/uploads/{{ image['file_name'] }}/1000" alt="leaves" onload="imgFade(this)" style="display: none;"/>
<img src="/api/uploads/{{ image['file_name'] }}/1000" alt="leaves" onload="imgFade(this)" style="opacity:0;"/>
{% endblock %}
{% block content %}
<div class="image__fullscreen">
<img
src="/api/uploads/{{ image['file_name'] }}/0"
onload="imgFade(this)" style="display:none;"
onerror="this.style.display='none'"
src=""
onload="imgFade(this)"
style="opacity:0;"
/>
</div>
@ -18,7 +18,7 @@
<img
class="image__item"
src="/api/uploads/{{ image['file_name'] }}/1000"
onload="imgFade(this)" style="display:none;"
onload="imgFade(this)" style="opacity:0;"
onerror="this.src='/static/images/error.png'"
/>
</div>
@ -122,16 +122,29 @@
{% endif %}
</div>
<script>
/*
const url = new URL(window.location);
if (url.searchParams.get('i') == 'full') {
$('.image__fullscreen').addClass('image__fullscreen--active');
$('.image__fullscreen img').attr('src', '/api/uploads/{{ image['file_name'] }}/0');
} else {
$('.image__fullscreen').removeClass('image__fullscreen--active');
}
*/
$('.image__fullscreen').click(function() {
$('.image__fullscreen').removeClass('image__fullscreen--active');
//window.history.replaceState({}, '', `${url}`);
});
$('#img-fullscreen').click(function() {
$('.image__fullscreen').addClass('image__fullscreen--active');
$('.image__fullscreen img').attr('src', '/api/uploads/{{ image['file_name'] }}/0');
//window.history.replaceState({}, '', url+'?i=full');
});
$('#img-share').click(function() {
//navigator.clipboard.writeText(window.location.href);
console.log('Non https debug: Copied to clipboard');
addNotification("Copied link!", 4);
});
$('#img-info').click(function() {
@ -145,11 +158,15 @@
data: {
action: 'delete'
},
success: function(response) {
window.location.href = '/';
success: function (response) {
addNotification("Image was all in le head", 1);
setTimeout(function() {
window.location.href = '/';
}, 1000);
},
error: function(response) {
alert(response);
error: function (response) {
addNotification(`Image *clings*: ${response}`, 2);
}
});
});

12
gallery/templates/index.html
View file

@ -1,12 +1,12 @@
{% extends 'layout.html' %}
{% block header %}
<img src="{{ url_for('static', filename='images/leaves.jpg') }}" alt="leaves" onload="imgFade(this)" style="display: none;"/>
<img src="{{ url_for('static', filename='images/background.svg') }}" onload="imgFade(this)" style="opacity:0;"/>
{% endblock %}
{% block content %}
<div class="app">
<h1>Gallery</h1>
<!--<h1>Gallery</h1>-->
<div id="gallery" class="gallery">
{% for image in images %}
<a class="gallery__item" href="/image/{{ image['id'] }}">
@ -15,7 +15,13 @@
<h2>{{ image['file_name'] }}</h2>
</div>
<span class="gallery__item-filter"></span>
<img class="gallery__item-image" src="/api/uploads/{{ image['file_name'] }}/400" onload="imgFade(this)" style="display:none;">
<img
class="gallery__item-image"
src="/api/uploads/{{ image['file_name'] }}/400"
onload="imgFade(this)"
style="opacity:0;"
loading="lazy"
/>
</a>
{% endfor %}
</div>

69
gallery/templates/layout.html
View file

@ -9,7 +9,7 @@
</script>
</head>
<body>
<div class="notification-list"></div>
<div class="sniffle"></div>
<nav id="navRoot">
<div>
<a href="{{url_for('gallery.index')}}">
@ -84,7 +84,72 @@
}
function imgFade(obj) {
$(obj).fadeIn(621);
$(obj).animate({opacity: 1}, 500);
}
function addNotification(text='Sample notification', type=4) {
var container = document.querySelector('.sniffle');
// Create notification element
var div = document.createElement('div');
div.classList.add('sniffle__notification');
div.onclick = function() {
if (div.parentNode) {
div.style.opacity = 0;
div.style.transform = 'translateX(100%)';
setTimeout(function() {
container.removeChild(div);
}, 500);
}
};
// Create icon element and append to notification
var icon = document.createElement('span');
icon.classList.add('sniffle__notification-icon');
if (type == 1) {
div.classList.add('sniffle__notification--success');
icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -7 24 24" fill="currentColor">\
<path d="M5.486 9.73a.997.997 0 0 1-.707-.292L.537 5.195A1 1 0 1 1 1.95 3.78l3.535 3.535L11.85.952a1 1 0 0 1 1.415 1.414L6.193 9.438a.997.997 0 0 1-.707.292z"></path>\
</svg>';
} else if (type == 2) {
div.classList.add('sniffle__notification--error');
icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-6 -6 24 24" fill="currentColor">\
<path d="M7.314 5.9l3.535-3.536A1 1 0 1 0 9.435.95L5.899 4.485 2.364.95A1 1 0 1 0 .95 2.364l3.535 3.535L.95 9.435a1 1 0 1 0 1.414 1.414l3.535-3.535 3.536 3.535a1 1 0 1 0 1.414-1.414L7.314 5.899z"></path>\
</svg>';
} else if (type == 3) {
div.classList.add('sniffle__notification--warning');
icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -3 24 24" fill="currentColor">\
<path d="M12.8 1.613l6.701 11.161c.963 1.603.49 3.712-1.057 4.71a3.213 3.213 0 0 1-1.743.516H3.298C1.477 18 0 16.47 0 14.581c0-.639.173-1.264.498-1.807L7.2 1.613C8.162.01 10.196-.481 11.743.517c.428.276.79.651 1.057 1.096zm-2.22.839a1.077 1.077 0 0 0-1.514.365L2.365 13.98a1.17 1.17 0 0 0-.166.602c0 .63.492 1.14 1.1 1.14H16.7c.206 0 .407-.06.581-.172a1.164 1.164 0 0 0 .353-1.57L10.933 2.817a1.12 1.12 0 0 0-.352-.365zM10 14a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm0-9a1 1 0 0 1 1 1v4a1 1 0 0 1-2 0V6a1 1 0 0 1 1-1z"></path>\
</svg>';
} else if (type == 4) {
div.classList.add('sniffle__notification--info');
icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">\
<path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-10a1 1 0 0 1 1 1v5a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm0-1a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>\
</svg>';
}
div.appendChild(icon);
// Create text element and append to notification
var gwagwa = document.createElement('span');
gwagwa.classList.add('sniffle__notification-text');
gwagwa.innerHTML = text;
div.appendChild(gwagwa);
// Append notification to container
container.appendChild(div);
// Remove notification after 6.9 seconds
setTimeout(function() {
if (div.parentNode) {
div.style.opacity = 0;
div.style.transform = 'translateX(100%)';
setTimeout(function() {
container.removeChild(div);
}, 500);
}
}, 2500);
}
</script>
</body>

2
gallery/templates/profile.html
View file

@ -1,7 +1,7 @@
{% extends 'layout.html' %}
{% block header %}
<img src="{{ url_for('static', filename='images/leaves.jpg') }}" alt="leaves" onload="imgFade(this)" style="display: none;"/>
<img src="{{ url_for('static', filename='images/background.svg') }}" onload="imgFade(this)" style="opacity:0;"/>
{% endblock %}
{% block content %}

2
gallery/templates/settings.html
View file

@ -1,7 +1,7 @@
{% extends 'layout.html' %}
{% block header %}
<img src="{{ url_for('static', filename='images/leaves.jpg') }}" alt="leaves" onload="imgFade(this)" style="display: none;"/>
<img src="{{ url_for('static', filename='images/background.svg') }}" onload="imgFade(this)" style="opacity:0;"/>
{% endblock %}
{% block content %}

15
gallery/templates/upload.html
View file

@ -1,7 +1,7 @@
{% extends 'layout.html' %}
{% block header %}
<img src="{{ url_for('static', filename='images/leaves.jpg') }}" alt="leaves" onload="imgFade(this)" style="display: none;"/>
<img src="{{ url_for('static', filename='images/background.svg') }}" onload="imgFade(this)" style="opacity:0;"/>
{% endblock %}
{% block content %}
@ -40,7 +40,7 @@
// Check for empty upload
if ($("#file").val() === "") {
alert('Gwha! Pls provide image');
addNotification("Please select a file to upload", 2);
} else {
// Make form
var formData = new FormData();
@ -58,7 +58,16 @@
contentType: false,
processData: false,
success: function (response) {
alert(response)
addNotification("File uploaded successfully!", 1);
},
error: function (response) {
if (response.status === 500) {
addNotification('Error uploading file, blame the server', 2);
} else if (response.status === 400 || response.status === 404 || response.status === 403) {
addNotification('Error uploading file, blame yourself', 2);
} else {
addNotification('Error uploading file, blame someone', 2);
}
}
});

91
gallery/user/themes/default/style.scss
View file

@ -9,6 +9,97 @@
@import 'buttons/btn';
@import 'buttons/up';
.sniffle {
margin: 0;
padding: 0;
width: 450px;
height: auto;
position: fixed;
top: 0.3rem;
right: 0.3rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
z-index: 6969;
}
.sniffle__notification {
margin: 0;
padding: 0;
width: 450px;
height: auto;
display: flex;
flex-direction: row;
position: relative;
background-color: $black300;
border-radius: $rad;
color: $white100;
box-sizing: border-box;
overflow: hidden;
transition: all 0.5s ease-in-out;
}
.sniffle__notification--success {
background-color: $green;
}
.sniffle__notification--error {
background-color: $red;
}
.sniffle__notification--warning {
background-color: $yellow;
}
.sniffle__notification--info {
background-color: $blue;
}
.sniffle__notification-icon {
margin: 0;
padding: 1rem;
width: auto;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba($black100, 0.2);
svg {
width: 1.25rem;
height: 1.25rem;
fill: $white100;
}
}
.sniffle__notification-text {
margin: 0;
padding: 1rem;
width: auto;
height: auto;
display: flex;
flex-direction: column;
justify-self: center;
align-self: center;
font-family: $font-body;
font-size: 1rem;
font-weight: 600;
line-height: 1;
text-align: left;
color: $white100;
}
.app {
margin: 0 0 0 3.5rem;
padding: 0.5rem;

2
setup.py
View file

@ -2,7 +2,7 @@ from setuptools import find_packages, setup
setup(
name='onlylegs',
version='130123',
version='140123',
packages=find_packages(),
include_package_data=True,
install_requires=[