roundabout,
created on Thursday, 5 September 2024, 10:57:46 (1725533866),
received on Thursday, 5 September 2024, 13:52:29 (1725544349)
Author identity: vlad <vlad.muntoiu@gmail.com>
bd879aedde7df056d3f7f337eaae40303bc90c5d
app.py
@@ -295,7 +295,7 @@ def profile(username):
@app.route("/upload")
def upload():
licences = Licence.query.all()
licences = Licence.query.order_by(Licence.free.desc(), Licence.pinned.desc(), Licence.title).all()
return flask.render_template("upload.html", licences=licences)
static/style.css
@@ -7,6 +7,7 @@
--text-softer: #0000009A;
--text-faint: #00000066;
--color-shape-label: #0097A7; --color-shape-label-text: #ffffff;
--shadow-card-inset: inset 0 3px 6px -4px rgba(0, 0, 0, 0.12), inset 0 3px 6px 0 rgba(0, 0, 0, 0.24), inset 0 1px 4px 0 rgba(0, 0, 0, 0.12);
/*view-transition-name: root;*/
}
@@ -216,3 +217,50 @@ iconify-icon {
}
}
*/
.multi-select {
display: flex;
flex-flow: column nowrap;
overflow-y: scroll;
box-shadow: var(--shadow-card-inset);
padding: 16px;
gap: 8px;
}
.licence-selection {
display: flex;
flex-flow: column nowrap;
}
.licence-selection-info {
margin-left: calc(var(--size-checkbox) + var(--gap-label-checkbox));
/* Align with the checkbox above */
}
.licence-selection-info > p {
font-weight: 300;
}
.licence-logo {
width: 128px;
float: right;
margin-left: 1ch;
}
.licence-title {
display: flex;
justify-content: space-between;
width: 100%;
}
.licence-title > .licence-name {
font: var(--h5-font);
font-weight: 400;
}
.icon-explainer {
display: grid;
gap: 4px 8px;
grid-template-columns: auto 1fr;
align-items: center;
}
templates/upload.html
@@ -16,6 +16,56 @@
Origin URL
<input type="url" name="origin_url" required>
</label>
<x-vbox>
Licence
<div class="multi-select" style="height: clamp(320px, 50vh, 640px)">
{% for licence in licences %}
<div class="licence-selection">
<label>
<input name="licence" type="checkbox" value="{{ licence.id }}">
{% if licence.pinned %}
<iconify-icon icon="mdi:pin" title="Pinned">Pinned</iconify-icon>
{% endif %}
{% if not licence.free %}
<iconify-icon icon="mdi:ban" title="Non-free">Non-free</iconify-icon>
{% endif %}
<span class="licence-title">
<span class="licence-name">
{{ licence.title }}
</span>
{% if licence.url %}
<a href="{{ licence.url }}" target="_blank">More information</a>
{% endif %}
</span>
</label>
<div class="licence-selection-info">
{% if licence.logo_url %}
{% if licence.url %}
<a href="{{ licence.url }}" target="_blank">
<img src="{{ licence.logo_url }}" alt="{{ licence.title }}" class="licence-logo">
</a>
{% else %}
<img src="{{ licence.logo_url }}" alt="{{ licence.title }}" class="licence-logo">
{% endif %}
{% endif %}
<p>{{ licence.description | safe }}</p>
</div>
</div>
{% endfor %}
</div>
<p>
You can select multiple licences, but you must select at least one, and at least
one must be free. Selecting multiple licences means users are free to choose any
of them — they <em>do not</em> have to comply with all of them.
</p>
<div class="icon-explainer">
<iconify-icon icon="mdi:pin" title="Pinned"></iconify-icon>
Recommended for new works
<iconify-icon icon="mdi:ban" title="Non-free"></iconify-icon>
Not a free software, open source or free culture licence
</div>
</x-vbox>
<label>
File
<input type="file" name="file" required>