mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2025-01-06 06:46:11 +00:00
Michał
d36699bd1f
Correctly link user to their posts and groups Change the table names to Group, Post and User Remove unused Bans and Logs table, possibly will return later
249 lines
17 KiB
HTML
249 lines
17 KiB
HTML
{% extends 'layout.html' %}
|
|
{% block page_index %}
|
|
{% if return_page %}?page={{ return_page }}{% endif %}{% endblock %}
|
|
{% block head %}
|
|
<meta property="og:image" content="{{ url_for('api.file', file_name=image.filename) }}"/>
|
|
<meta name="theme-color" content="rgb({{ image.colours.0.0 }}{{ image.colours.0.1 }}{{ image.colours.0.2 }})"/>
|
|
|
|
<script type="text/javascript">
|
|
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);
|
|
}
|
|
}
|
|
function fullscreen() {
|
|
let info = document.querySelector('.info-container');
|
|
let wrapper = document.querySelector('.image-grid');
|
|
|
|
if (info.classList.contains('collapsed')) {
|
|
info.classList.remove('collapsed');
|
|
wrapper.classList.remove('collapsed');
|
|
} else {
|
|
info.classList.add('collapsed');
|
|
wrapper.classList.add('collapsed');
|
|
}
|
|
}
|
|
|
|
{% if current_user.id == image.author.id %}
|
|
function imageDelete() {
|
|
cancelBtn = document.createElement('button');
|
|
cancelBtn.classList.add('btn-block');
|
|
cancelBtn.innerHTML = 'nuuuuuuuu';
|
|
cancelBtn.onclick = popupDissmiss;
|
|
|
|
deleteBtn = document.createElement('button');
|
|
deleteBtn.classList.add('btn-block');
|
|
deleteBtn.classList.add('critical');
|
|
deleteBtn.innerHTML = 'Dewww eeeet!';
|
|
deleteBtn.onclick = deleteConfirm;
|
|
|
|
popUpShow('DESTRUCTION!!!!!!',
|
|
'Do you want to delete this image along with all of its data??? ' +
|
|
'This action is irreversible!',
|
|
null,
|
|
[cancelBtn, deleteBtn]);
|
|
}
|
|
function deleteConfirm() {
|
|
popupDissmiss();
|
|
|
|
fetch('{{ url_for('api.delete_image', image_id=image['id']) }}', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
action: 'delete'
|
|
})
|
|
}).then(function(response) {
|
|
if (response.ok) {
|
|
window.location.href = '/';
|
|
} else {
|
|
addNotification(`Image *clings*`, 2);
|
|
}
|
|
});
|
|
}
|
|
|
|
function imageEdit() {
|
|
addNotification("Not an option, oops!", 3);
|
|
}
|
|
{% endif %}
|
|
</script>
|
|
|
|
<style>
|
|
.background span {
|
|
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">
|
|
<img src="{{ url_for('api.file', file_name=image.filename) }}?r=prev" alt="{{ image.alt }}" onload="imgFade(this)" style="opacity:0;"/>
|
|
<span></span>
|
|
</div>
|
|
|
|
<div class="image-grid">
|
|
<div class="image-block">
|
|
<div class="image-container">
|
|
<img
|
|
src="{{ url_for('api.file', file_name=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 %}
|
|
/>
|
|
</div>
|
|
|
|
<div class="pill-row">
|
|
{% if next_url %}
|
|
<div>
|
|
<a class="pill-item" href="{{ next_url }}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path></svg>
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
<div>
|
|
<button class="pill-item" onclick="fullscreen()" id="fullscreenImage">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"></path></svg>
|
|
</button>
|
|
<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="M216,112v96a16,16,0,0,1-16,16H56a16,16,0,0,1-16-16V112A16,16,0,0,1,56,96H80a8,8,0,0,1,0,16H56v96H200V112H176a8,8,0,0,1,0-16h24A16,16,0,0,1,216,112ZM93.66,69.66,120,43.31V136a8,8,0,0,0,16,0V43.31l26.34,26.35a8,8,0,0,0,11.32-11.32l-40-40a8,8,0,0,0-11.32,0l-40,40A8,8,0,0,0,93.66,69.66Z"></path></svg>
|
|
</button>
|
|
<a class="pill-item" href="/api/file/{{ image.filename }}" download onclick="addNotification('Download started!', 4)">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Zm-42.34-61.66a8,8,0,0,1,0,11.32l-24,24a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L120,164.69V120a8,8,0,0,1,16,0v44.69l10.34-10.35A8,8,0,0,1,157.66,154.34Z"></path></svg>
|
|
</a>
|
|
</div>
|
|
{% if current_user.id == image.author.id %}
|
|
<div>
|
|
<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-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"></path></svg>
|
|
</button>
|
|
<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.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z"></path></svg>
|
|
</button>
|
|
</div>
|
|
{% endif %}
|
|
{% if prev_url %}
|
|
<div>
|
|
<a class="pill-item" href="{{ prev_url }}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg>
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-container">
|
|
<div class="info-tab">
|
|
<div class="info-header">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"></path></svg>
|
|
<h2>Info</h2>
|
|
<button class="collapse-indicator">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
|
|
<path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="info-table">
|
|
<table>
|
|
<tr>
|
|
<td>Author</td>
|
|
<td><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 %}
|
|
<span style="background-color: rgb({{col.0}}, {{col.1}}, {{col.2}})"></span>
|
|
{% 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">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M216,72H131.31L104,44.69A15.86,15.86,0,0,0,92.69,40H40A16,16,0,0,0,24,56V200.62A15.4,15.4,0,0,0,39.38,216H216.89A15.13,15.13,0,0,0,232,200.89V88A16,16,0,0,0,216,72ZM40,56H92.69l16,16H40ZM216,200H40V88H216Z"></path></svg>
|
|
{{ group['name'] }}
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% for tag in image.exif %}
|
|
<div class="info-tab">
|
|
<div class="info-header">
|
|
{% if tag == 'Photographer' %}
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M160,40a32,32,0,1,0-32,32A32,32,0,0,0,160,40ZM128,56a16,16,0,1,1,16-16A16,16,0,0,1,128,56Zm90.34,78.05L173.17,82.83a32,32,0,0,0-24-10.83H106.83a32,32,0,0,0-24,10.83L37.66,134.05a20,20,0,0,0,28.13,28.43l16.3-13.08L65.55,212.28A20,20,0,0,0,102,228.8l26-44.87,26,44.87a20,20,0,0,0,36.41-16.52L173.91,149.4l16.3,13.08a20,20,0,0,0,28.13-28.43Zm-11.51,16.77a4,4,0,0,1-5.66,0c-.21-.2-.42-.4-.65-.58L165,121.76A8,8,0,0,0,152.26,130L175.14,217a7.72,7.72,0,0,0,.48,1.35,4,4,0,1,1-7.25,3.38,6.25,6.25,0,0,0-.33-.63L134.92,164a8,8,0,0,0-13.84,0L88,221.05a6.25,6.25,0,0,0-.33.63,4,4,0,0,1-2.26,2.07,4,4,0,0,1-5-5.45,7.72,7.72,0,0,0,.48-1.35L103.74,130A8,8,0,0,0,91,121.76L55.48,150.24c-.23.18-.44.38-.65.58a4,4,0,1,1-5.66-5.65c.12-.12.23-.24.34-.37L94.83,93.41a16,16,0,0,1,12-5.41h42.34a16,16,0,0,1,12,5.41l45.32,51.39c.11.13.22.25.34.37A4,4,0,0,1,206.83,150.82Z"></path></svg>
|
|
<h2>Photographer</h2>
|
|
{% elif tag == 'Camera' %}
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M208,56H180.28L166.65,35.56A8,8,0,0,0,160,32H96a8,8,0,0,0-6.65,3.56L75.71,56H48A24,24,0,0,0,24,80V192a24,24,0,0,0,24,24H208a24,24,0,0,0,24-24V80A24,24,0,0,0,208,56Zm8,136a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V80a8,8,0,0,1,8-8H80a8,8,0,0,0,6.66-3.56L100.28,48h55.43l13.63,20.44A8,8,0,0,0,176,72h32a8,8,0,0,1,8,8ZM128,88a44,44,0,1,0,44,44A44.05,44.05,0,0,0,128,88Zm0,72a28,28,0,1,1,28-28A28,28,0,0,1,128,160Z"></path></svg>
|
|
<h2>Camera</h2>
|
|
{% elif tag == 'Software' %}
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M24,96v72a8,8,0,0,0,8,8h80a8,8,0,0,1,0,16H96v16h16a8,8,0,0,1,0,16H64a8,8,0,0,1,0-16H80V192H32A24,24,0,0,1,8,168V96A24,24,0,0,1,32,72h80a8,8,0,0,1,0,16H32A8,8,0,0,0,24,96ZM208,64H176a8,8,0,0,0,0,16h32a8,8,0,0,0,0-16Zm0,32H176a8,8,0,0,0,0,16h32a8,8,0,0,0,0-16Zm40-48V208a16,16,0,0,1-16,16H152a16,16,0,0,1-16-16V48a16,16,0,0,1,16-16h80A16,16,0,0,1,248,48ZM232,208V48H152V208h80Zm-40-40a12,12,0,1,0,12,12A12,12,0,0,0,192,168Z"></path></svg>
|
|
<h2>Software</h2>
|
|
{% elif tag == 'File' %}
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M110.66,147.56a8,8,0,0,0-13.32,0L76.49,178.85l-9.76-15.18a8,8,0,0,0-13.46,0l-36,56A8,8,0,0,0,24,232H152a8,8,0,0,0,6.66-12.44ZM38.65,216,60,182.79l9.63,15a8,8,0,0,0,13.39.11l21-31.47L137.05,216Zm175-133.66-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v96a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48V216h-8a8,8,0,0,0,0,16h8a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160Z"></path></svg>
|
|
<h2>File</h2>
|
|
{% else %}
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M110.66,147.56a8,8,0,0,0-13.32,0L76.49,178.85l-9.76-15.18a8,8,0,0,0-13.46,0l-36,56A8,8,0,0,0,24,232H152a8,8,0,0,0,6.66-12.44ZM38.65,216,60,182.79l9.63,15a8,8,0,0,0,13.39.11l21-31.47L137.05,216Zm175-133.66-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v96a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48V216h-8a8,8,0,0,0,0,16h8a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160Z"></path></svg>
|
|
<h2>{{ tag }}</h2>
|
|
{% endif %}
|
|
<button class="collapse-indicator">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
|
|
<path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
|
|
</svg>
|
|
</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>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block script %}
|
|
<script type="text/javascript">
|
|
let infoTab = document.querySelectorAll('.info-tab');
|
|
|
|
for (let i = 0; i < infoTab.length; i++) {
|
|
infoTab[i].querySelector('.collapse-indicator').addEventListener('click', function() {
|
|
infoTab[i].classList.toggle('collapsed');
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock %} |