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:
Michał Gdula 2023-03-26 01:04:13 +00:00
parent cdb3836dab
commit 2b795e520f
21 changed files with 194 additions and 164 deletions

View file

@ -1,29 +1,44 @@
{% extends 'layout.html' %}
{% block nav_groups %}selected{% endblock %}
{% block content %}
<div class="banner">
{% block head %}
<style>
{% if images %}
<img
src="/api/file/{{ images.0.file_name }}?w=1920&h=1080"
onload="imgFade(this)"
style="opacity:0; background-color:rgb({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }})"
/>
<span
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>
.banner-content p {
color: {{ text_colour }} !important;
}
.banner-content h1 {
color: {{ text_colour }} !important;
}
.banner-filter {
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) !important;
}
@media (max-width: 800px) {
.banner-filter {
background: linear-gradient(to bottom, rgb({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }}), transparent) !important;
}
}
{% endif %}
</style>
{% endblock %}
{% block content %}
<div class="banner {% if not images %}small{% endif %}">
{% if not images %}
<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 }})">By {{ group.author_username }} - {{ images|length }} Images</span></p>
<h1>{{ group.name }}</h1>
<p>By {{ group.author_username }}</p>
</div>
{% else %}
<img src="{{ url_for('static', filename='images/bg.svg') }}" onload="imgFade(this)" style="opacity:0;"/>
<span></span>
<img
src="/api/file/{{ images.0.file_name }}?r=1920x1080"
onload="imgFade(this)"
style="opacity:0;"
/>
<span class="banner-filter" ></span>
<div class="banner-content">
<p>{{ group.description }}</p>
<h1>{{ group.name }}</h1>
<p>By {{ group.author_username }} - {{ images|length }} Images</p>
<h1>{{ group.name }}</h1>
<p>{{ group.description }}</p>
</div>
{% endif %}
</div>
@ -49,11 +64,11 @@
</div>
{% else %}
<div class="big-text">
<h1>No image!</h1>
<h1>*crickets chirping*</h1>
{% if g.user %}
<p>You can get started by uploading an image!</p>
<p>Add some images to the group!</p>
{% else %}
<p>Login to start uploading images!</p>
<p>Login to start managing this image group!</p>
{% endif %}
</div>
{% endif %}

View file

@ -37,23 +37,19 @@
<p class="image-subtitle"></p>
<p class="image-title">{{ group.name }}</p>
</div>
<img src="{{ url_for('static', filename='images/error.png') }}" onload="imgFade(this)" style="opacity:0;"/>
<img src="{{ url_for('static', filename='error.png') }}" onload="imgFade(this)" style="opacity:0;"/>
</a>
{% endif %}
{% endfor %}
</div>
{% else %}
<div class="big-text">
<h1>No image groups!</h1>
<h1>*crickets chirping*</h1>
{% if g.user %}
<p>You can get started by creating a new image group!</p>
{% else %}
<p>Login to get started!</p>
<p>Login to start seeing anything here!</p>
{% endif %}
</div>
{% endif %}
{% endblock %}
{% block script %}
<script></script>
{% endblock %}