Add ownership checks to groups

Fix contrast checking
Add coloured highlights to images
Update top-of-page button icon
This commit is contained in:
Michał Gdula 2023-03-10 17:38:24 +00:00
parent feadaba8a1
commit e192554a0b
8 changed files with 81 additions and 38 deletions

View file

@ -14,20 +14,25 @@
class="banner-filter"
style="background: linear-gradient(to right, rgb({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }}), transparent)"
></span>
<div class="banner-content">
<p><span id="contrast-check" data-color="rgb({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }})">{{ group.description }}</span></p>
<h1><span id="contrast-check" data-color="rgb({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }})">{{ group.name }}</span></h1>
<p><span id="contrast-check" data-color="rgb({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }})">{{ images|length }} Images</span></p>
</div>
{% else %}
<img src="{{ url_for('static', filename='images/bg.svg') }}" onload="imgFade(this)" style="opacity:0;"/>
<span></span>
<div class="banner-content">
<p>{{ group.description }}</p>
<h1>{{ group.name }}</h1>
<p>{{ images|length }} Images</p>
</div>
{% endif %}
<div class="banner-content">
<p>{{ group.description }}</p>
<h1>{{ group.name }}</h1>
<p>{{ images|length }} Images</p>
</div>
</div>
<form action="/api/group/modify" method="post" enctype="multipart/form-data">
<input type="text" name="group_id" placeholder="group id" value="{{ group.id }}">
<input type="text" name="images" placeholder="image id">
<form id="modifyGroup">
<input type="text" name="group" placeholder="group id" value="{{ group.id }}">
<input type="text" name="image" placeholder="image id">
<input type="text" name="action" placeholder="add/remove" value="add">
<button type="submit">Submit</button>
</form>
@ -36,9 +41,9 @@
<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.image_colours.0.0 }}, {{ image.image_colours.0.1 }}, {{ image.image_colours.0.2 }})">
<span>
<span class="image-filter" style="background: linear-gradient(to top, rgb({{ image.image_colours.0.0 }}, {{ image.image_colours.0.1 }}, {{ image.image_colours.0.2 }}), transparent)">
<p></p>
<h2><span class="time">{{ image.created_at }}</span></h2>
<h2><span id="contrast-check" data-color="rgb({{ image.image_colours.0.0 }}, {{ image.image_colours.0.1 }}, {{ image.image_colours.0.2 }})"><span class="time">{{ image.created_at }}</span></span></h2>
</span>
<img data-src="{{ image.file_name }}" onload="imgFade(this)" style="opacity:0;" id="lazy-load"/>
</a>
@ -57,5 +62,30 @@
{% endblock %}
{% block script %}
<script></script>
<script>
// /api/group/modify
modForm = document.querySelector('#modifyGroup');
modForm.addEventListener('submit', function (event) {
event.preventDefault();
const formData = new FormData();
formData.append('group', modForm.group.value);
formData.append('image', modForm.image.value);
formData.append('action', modForm.action.value);
$.ajax({
url: '/api/group/modify',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function (data) {
addNotification('Image added to group', 1);
}
})
})
</script>
{% endblock %}

View file

@ -24,7 +24,8 @@
<div class="gallery-grid">
{% for group in groups %}
<a id="group-{{ group.id }}" class="gallery-item" href="{{ url_for('group.group', group_id=group.id) }}">
<span>
<span class="image-filter">
<p></p>
<h2>{{ group.name }}</h2>
</span>
{% if group.thumbnail %}

View file

@ -18,9 +18,9 @@
<div class="gallery-grid">
{% for image in images %}
<a id="image-{{ image.id }}" class="gallery-item" href="/image/{{ image.id }}" style="background-color: rgb({{ image.image_colours.0.0 }}, {{ image.image_colours.0.1 }}, {{ image.image_colours.0.2 }})">
<span>
<span class="image-filter" style="background: linear-gradient(to top, rgb({{ image.image_colours.0.0 }}, {{ image.image_colours.0.1 }}, {{ image.image_colours.0.2 }}), transparent)">
<p></p>
<h2><span class="time">{{ image.created_at }}</span></h2>
<h2><span id="contrast-check" data-color="rgb({{ image.image_colours.0.0 }}, {{ image.image_colours.0.1 }}, {{ image.image_colours.0.2 }})"><span class="time">{{ image.created_at }}</span></span></h2>
</span>
<img data-src="{{ image.file_name }}" onload="imgFade(this)" style="opacity:0;" id="lazy-load"/>
</a>

View file

@ -14,9 +14,7 @@
<body>
<div class="notifications"></div>
<svg class="jumpUp" xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor">
<path d="M11 8.414V14a1 1 0 0 1-2 0V8.414L6.464 10.95A1 1 0 1 1 5.05 9.536l4.243-4.243a.997.997 0 0 1 1.414 0l4.243 4.243a1 1 0 1 1-1.414 1.414L11 8.414zM10 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 16z"></path>
</svg>
<svg class="jumpUp" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M224,120H176v88a8,8,0,0,1-8,8H88a8,8,0,0,1-8-8V120H32l96-96Z" opacity="0.2"></path><path d="M229.66,114.34l-96-96a8,8,0,0,0-11.32,0l-96,96A8,8,0,0,0,32,128H72v80a16,16,0,0,0,16,16h80a16,16,0,0,0,16-16V128h40a8,8,0,0,0,5.66-13.66ZM176,112a8,8,0,0,0-8,8v88H88V120a8,8,0,0,0-8-8H51.31L128,35.31,204.69,112Z"></path></svg>
<div class="pop-up">
<span class="pop-up__click-off" onclick="popupDissmiss()"></span>