mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2025-06-29 11:36:16 +00:00
Move contrast checking into Python
Change banner size dependent on group content Tidy up inline JS for some files Correct spelling
This commit is contained in:
parent
cdb3836dab
commit
2b795e520f
21 changed files with 194 additions and 164 deletions
|
|
@ -1,33 +1,96 @@
|
|||
{% extends 'layout.html' %}
|
||||
|
||||
{% block head %}
|
||||
<meta property="og:image" content="/api/file/{{ image.file_name }}"/>
|
||||
<meta name="theme-color" content="#{{ image.image_colours.0.0 }}{{ image.image_colours.0.1 }}{{ image.image_colours.0.2 }}"/>
|
||||
{% endblock %}
|
||||
|
||||
{% block wrapper_class %}image-wrapper{% endblock %}
|
||||
{% block head %}
|
||||
<meta property="og:image" content="{{ url_for('api.file', file_name=image.file_name) }}"/>
|
||||
<meta name="theme-color" content="#{{ image.image_colours.0.0 }}{{ image.image_colours.0.1 }}{{ image.image_colours.0.2 }}"/>
|
||||
|
||||
<script>
|
||||
function imageFullscreenOff() {
|
||||
document.querySelector("html").style.overflow = "auto";
|
||||
let fullscreen = document.querySelector('.image-fullscreen')
|
||||
|
||||
fullscreen.classList.remove('active');
|
||||
|
||||
setTimeout(function() {
|
||||
fullscreen.style.display = 'none';
|
||||
}, 200);
|
||||
}
|
||||
function imageFullscreenOn() {
|
||||
document.querySelector("html").style.overflow = "hidden";
|
||||
let fullscreen = document.querySelector('.image-fullscreen')
|
||||
|
||||
fullscreen.querySelector('img').src = '{{ url_for('api.file', file_name=image.file_name) }}';
|
||||
fullscreen.style.display = 'flex';
|
||||
|
||||
setTimeout(function() {
|
||||
fullscreen.classList.add('active');
|
||||
}, 10);
|
||||
}
|
||||
function imageShare() {
|
||||
try {
|
||||
navigator.clipboard.writeText(window.location.href)
|
||||
addNotification("Copied link!", 4);
|
||||
} catch (err) {
|
||||
addNotification("Failed to copy link! Are you on HTTP?", 2);
|
||||
}
|
||||
}
|
||||
|
||||
{% if g.user['id'] == image['author_id'] %}
|
||||
function imageDelete() {
|
||||
popUpShow(
|
||||
'DESTRUCTION!!!!!!',
|
||||
'Do you want to delete this image along with all of its data??? This action is irreversible!',
|
||||
'<button class="btn-block" onclick="popupDissmiss()">Nuuu</button>' +
|
||||
'<button class="btn-block critical" onclick="deleteConfirm()">Dewww eeeet!</button>'
|
||||
);
|
||||
}
|
||||
function deleteConfirm() {
|
||||
popupDissmiss();
|
||||
|
||||
$.ajax({
|
||||
url: '{{ url_for('api.delete_image', image_id=image['id']) }}',
|
||||
type: 'post',
|
||||
data: {
|
||||
action: 'delete'
|
||||
},
|
||||
success: function (response) {
|
||||
window.location.href = '/';
|
||||
},
|
||||
error: function (response) {
|
||||
addNotification(`Image *clings*: ${response}`, 2);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function imageEdit() {
|
||||
addNotification("Not an option, oops!", 3);
|
||||
}
|
||||
{% endif %}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.background span {
|
||||
background-image: linear-gradient(to top, rgba({{ image.image_colours.0.0 }}, {{ image.image_colours.0.1 }}, {{ image.image_colours.0.2 }}, 1), transparent);
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
{% block content %}
|
||||
<div class="background">
|
||||
<img src="/api/file/{{ image.file_name }}?r=prev" alt="{{ image.post_alt }}" onload="imgFade(this)" style="opacity:0;"/>
|
||||
<span style="background-image: linear-gradient(to top, rgba({{ image.image_colours.0.0 }}, {{ image.image_colours.0.1 }}, {{ image.image_colours.0.2 }}, 1), transparent);"></span>
|
||||
<img src="{{ url_for('api.file', file_name=image.file_name) }}?r=prev" alt="{{ image.post_alt }}" onload="imgFade(this)" style="opacity:0;"/>
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
<div class="image-fullscreen">
|
||||
<div class="image-fullscreen" onclick="imageFullscreenOff()">
|
||||
<img src="" alt="{{ image.post_alt }}" onload="imgFade(this);" style="opacity:0;" />
|
||||
</div>
|
||||
|
||||
<div class="image-grid">
|
||||
<div class="image-container" id="image-container">
|
||||
<img
|
||||
src="/api/file/{{ image.file_name }}?r=prev"
|
||||
src="{{ url_for('api.file', file_name=image.file_name) }}?r=prev"
|
||||
alt="{{ image.post_alt }}"
|
||||
onload="imgFade(this)" style="opacity:0;"
|
||||
onerror="this.src='/static/images/error.png'"
|
||||
{% if "File" in image.image_exif %}
|
||||
width="{{ image.image_exif.File.Width.raw }}"
|
||||
height="{{ image.image_exif.File.Height.raw }}"
|
||||
{% endif %}
|
||||
onerror="this.src='{{ url_for('static', filename='error.png')}}'"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -44,14 +107,14 @@
|
|||
</div>
|
||||
{% endif %}
|
||||
<div>
|
||||
<button class="pill-item" id="img-fullscreen">
|
||||
<button class="pill-item" onclick="imageFullscreenOn()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M117.66,138.34a8,8,0,0,1,0,11.32L83.31,184l18.35,18.34A8,8,0,0,1,96,216H48a8,8,0,0,1-8-8V160a8,8,0,0,1,13.66-5.66L72,172.69l34.34-34.35A8,8,0,0,1,117.66,138.34ZM208,40H160a8,8,0,0,0-5.66,13.66L172.69,72l-34.35,34.34a8,8,0,0,0,11.32,11.32L184,83.31l18.34,18.35A8,8,0,0,0,216,96V48A8,8,0,0,0,208,40Z"></path></svg>
|
||||
<span class="tool-tip">
|
||||
Fullscreen
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,48,88H208a8,8,0,0,1,5.66,13.66Z"></path></svg>
|
||||
</span>
|
||||
</button>
|
||||
<button class="pill-item" id="img-share">
|
||||
<button class="pill-item" onclick="imageShare()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M212,200a36,36,0,1,1-69.85-12.25l-53-34.05a36,36,0,1,1,0-51.4l53-34a36.09,36.09,0,1,1,8.67,13.45l-53,34.05a36,36,0,0,1,0,24.5l53,34.05A36,36,0,0,1,212,200Z"></path></svg>
|
||||
<span class="tool-tip">
|
||||
Share
|
||||
|
|
@ -68,14 +131,14 @@
|
|||
</div>
|
||||
{% if image.author_id == g.user.id %}
|
||||
<div>
|
||||
<button class="pill-item pill__critical" id="img-delete">
|
||||
<button class="pill-item pill__critical" onclick="imageDelete()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM112,168a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm0-120H96V40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8Z"></path></svg>
|
||||
<span class="tool-tip">
|
||||
Delete
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,48,88H208a8,8,0,0,1,5.66,13.66Z"></path></svg>
|
||||
</span>
|
||||
</button>
|
||||
<button class="pill-item pill__critical" id="img-edit">
|
||||
<button class="pill-item pill__critical" onclick="imageEdit()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM51.31,160l90.35-90.35,16.68,16.69L68,176.68ZM48,179.31,76.69,208H48Zm48,25.38L79.31,188l90.35-90.35h0l16.68,16.69Z"></path></svg>
|
||||
<span class="tool-tip">
|
||||
Edit
|
||||
|
|
@ -215,76 +278,11 @@
|
|||
|
||||
{% block script %}
|
||||
<script>
|
||||
var infoTab = document.querySelectorAll('.info-tab');
|
||||
for (var i = 0; i < infoTab.length; i++) {
|
||||
let infoTab = document.querySelectorAll('.info-tab');
|
||||
for (let i = 0; i < infoTab.length; i++) {
|
||||
infoTab[i].querySelector('.info-header').addEventListener('click', function() {
|
||||
this.parentNode.classList.toggle('collapsed');
|
||||
});
|
||||
}
|
||||
|
||||
$('.image-fullscreen').click(function() {
|
||||
// un-Stop scrolling
|
||||
document.querySelector("html").style.overflow = "auto";
|
||||
let fullscreen = document.querySelector('.image-fullscreen')
|
||||
|
||||
fullscreen.classList.remove('active');
|
||||
|
||||
setTimeout(function() {
|
||||
fullscreen.style.display = 'none';
|
||||
}, 200);
|
||||
});
|
||||
$('#img-fullscreen').click(function() {
|
||||
// Stop scrolling
|
||||
document.querySelector("html").style.overflow = "hidden";
|
||||
let fullscreen = document.querySelector('.image-fullscreen')
|
||||
|
||||
fullscreen.querySelector('img').src = '/api/file/{{ image.file_name }}';
|
||||
fullscreen.style.display = 'flex';
|
||||
|
||||
setTimeout(function() {
|
||||
fullscreen.classList.add('active');
|
||||
}, 10);
|
||||
});
|
||||
|
||||
$('#img-share').click(function() {
|
||||
try {
|
||||
navigator.clipboard.writeText(window.location.href);
|
||||
addNotification("Copied link!", 4);
|
||||
} catch (err) {
|
||||
addNotification("Failed to copy link! Are you on HTTP?", 2);
|
||||
}
|
||||
});
|
||||
|
||||
{% if g.user['id'] == image['author_id'] %}
|
||||
$('#img-delete').click(function() {
|
||||
popUpShow(
|
||||
'DESTRUCTION!!!!!!',
|
||||
'Do you want to delete this image along with all of its data??? This action is irreversible!',
|
||||
'<button class="btn-block" onclick="popupDissmiss()">Nuuu</button>' +
|
||||
'<button class="btn-block critical" onclick="deleteImage()">Dewww eeeet!</button>'
|
||||
);
|
||||
});
|
||||
function deleteImage() {
|
||||
popupDissmiss();
|
||||
|
||||
$.ajax({
|
||||
url: '{{ url_for('api.delete_image', image_id=image['id']) }}',
|
||||
type: 'post',
|
||||
data: {
|
||||
action: 'delete'
|
||||
},
|
||||
success: function (response) {
|
||||
window.location.href = '/';
|
||||
},
|
||||
error: function (response) {
|
||||
addNotification(`Image *clings*: ${response}`, 2);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$('#img-edit').click(function() {
|
||||
window.location.href = '/image/{{ image.id }}/edit';
|
||||
});
|
||||
{% endif %}
|
||||
</script>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue