Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Upgrade main stregsystem pages to modern HTML #481

Merged
merged 7 commits into from
Oct 2, 2024
Merged

Upgrade main stregsystem pages to modern HTML #481

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
35de0a4
Upgrade main stregsystem pages to modern HTML
atjn Aug 28, 2024
3e43690
Merge branch 'next' into main-css
atjn Sep 14, 2024
c4a1652
Merge branch 'next' into main-css
atjn Sep 16, 2024
79f4e00
Merge branch 'next' into main-css
atjn Sep 23, 2024
29fd2f0
Fix centering of front page text
atjn Sep 23, 2024
f489914
Merge branch 'next' into main-css
atjn Oct 2, 2024
a10e727
Center fix
atjn Oct 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions stregsystem/static/stregsystem/stregsystem.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,29 @@ header {
}
}

main {
padding: 1em;

& > :first-child {
margin-top: 0;
}
& > :last-child {
margin-bottom: 0;
}

&.center {
text-align: center;

& table {
text-align: initial;
}
& > table {
margin-left: auto;
margin-right: auto;
}
}
}

h1 { color: red }

/*div { border-color: red;
Expand All @@ -35,6 +58,13 @@ ol span {
font-weight: normal;
}

.horizontal-table {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 2em;
}

table.default {
border: 1px outset black;

Expand Down
143 changes: 74 additions & 69 deletions stregsystem/templates/stregsystem/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,99 +11,104 @@

{% block head %}
<style>
#products {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 30px;
margin-bottom: 26px;
#instructions {
display: inline-block;
text-align: initial;

& > p {
font-weight: bold;
text-align: center;
margin-top: 0;
margin-bottom: .3em;
}
}
#focusform {
margin-top: 1.5em;
margin-bottom: 1.5em;
}
</style>
{% endblock %}

{% block content %}

<main class="center">
<div id="instructions">
{% block instructions %}
<p>Du kan "sætte streger" på to forskellige måder:</p>
<ol>
<li><span>Indtast dit brugernavn nedenfor.
Du vil så blive præsenteret for en interaktiv menu.</span></li>
<li><span>Indtast dit brugernavn <em>og</em> et eller flere produkt
ID{#'er#} (adskilt med "space").
Købet vil blive<br>direkte registreret uden yderligere input.
Under feltet vil der vises en bekræftelse af købet.</span></li>
</ol>
{% endblock %}
</div>

<div id="instructions">
{% block instructions %}
<b>Du kan "sætte streger" på to forskellige måder:</b>
<ol>
<li><span>Indtast dit brugernavn nedenfor.
Du vil så blive præsenteret for en interaktiv menu.</span></li>
<li><span>Indtast dit brugernavn <em>og</em> et eller flere produkt
ID{#'er#} (adskilt med "space").
Købet vil blive direkte registreret uden yderligere input.
Under feltet vil der vises en bekræftelse af købet.</span></li>
</ol>
{% endblock %}
</div>

<form autocomplete="off" action="/{{room.id}}/sale/" method="post" id="focusform" name="focusform" onsubmit="document.getElementById('buybutton').disabled = true">{% csrf_token %}
{% block saleform %}
<p>
<label for="quickbuy">Quickbuy</label>
<input tabindex="1" type="text" size="20" id="quickbuy" name="quickbuy" autofocus />
<input tabindex="3" type="submit" value="Køb!" id="buybutton" />
</p>
{% endblock %}
</form>

<center>
<form autocomplete="off" action="/{{room.id}}/sale/" method="post" id="focusform" name="focusform" onsubmit="document.getElementById('buybutton').disabled = true">{% csrf_token %}
{% block saleform %}
<p>
<label for="quickbuy">Quickbuy</label>
<input tabindex="1" type="text" size="20" id="quickbuy" name="quickbuy" autofocus />
<input tabindex="3" type="submit" value="Køb!" id="buybutton" />
</p>
{% endblock %}
</form>
</center>

<center>
<div id="message">{% block message %}{% endblock %}</div>
</center>
<div id="message">{% block message %}{% endblock %}</div>

<div id="products">
{% block products %}
{% if product_list %}
{% autoescape off %}
<table class="default">
<tr>
<th>ID</th>
<th>Produkt</th>
<th>Pris</th>
</tr>
{% for product in product_list|partition:"2"|first %}
<tr>
<td>
{{product.id|product_id_and_alias_string}}
</td>
<td>{{product.name}}</td>
<td class="price">{{product.price|money}} kr</td>
</tr>
{% endfor %}
</table>
{% if product_list|partition:"2"|last %}
<div class="horizontal-table">
{% block products %}
{% if product_list %}
{% autoescape off %}
<table class="default">
<tr>
<th>ID</th>
<th>Produkt</th>
<th>Pris</th>
</tr>
{% for product in product_list|partition:"2"|last %}
{% for product in product_list|partition:"2"|first %}
<tr>
<td>{{product.id|product_id_and_alias_string}}</td>
<td>
{{product.id|product_id_and_alias_string}}
</td>
<td>{{product.name}}</td>
<td class="price">{{product.price|money}} kr</td>
</tr>
{% endfor %}
</table>
{% if product_list|partition:"2"|last %}
<table class="default">
<tr>
<th>ID</th>
<th>Produkt</th>
<th>Pris</th>
</tr>
{% for product in product_list|partition:"2"|last %}
<tr>
<td>{{product.id|product_id_and_alias_string}}</td>
<td>{{product.name}}</td>
<td class="price">{{product.price|money}} kr</td>
</tr>
{% endfor %}
</table>
{% endif %}
{% endautoescape %}
{% else %}
<p>Ingen produkter.</p>

{% endif %}
{% endautoescape %}
{% else %}
<p>Ingen produkter.</p>

{% endif %}
{% endblock %}
</div>
{% endblock %}
</div>

<script>
window.addEventListener("pageshow", (event) => {
document.getElementById('buybutton').disabled = false;
});
</script>
<script>
window.addEventListener("pageshow", (event) => {
document.getElementById('buybutton').disabled = false;
});
</script>
</main>

{% endblock %}

Loading
Loading