Added some barebones CSS to display the user- and product-list in a somewhat acceptable way.

This commit is contained in:
s3lph 2018-07-11 15:32:07 +02:00
parent cf892211be
commit 4ba0165e7c
4 changed files with 43 additions and 5 deletions

31
static/css/matemat.css Normal file
View file

@ -0,0 +1,31 @@
.thumblist-item {
display: inline-block;
margin: 10px;
padding: 10px;
background: #f0f0f0;
text-decoration: none;
}
.thumblist-item a {
text-decoration: none;
}
.thumblist-item .imgcontainer {
width: 150px;
height: 150px;
position: relative;
}
.thumblist-item .imgcontainer img {
max-width: 150px;
max-height: 150px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.thumblist-title {
display: block;
font-weight: bolder;
}

View file

@ -3,6 +3,7 @@
<head>
{% block head %}
<title>Matemat</title>
<link rel="stylesheet" href="/css/matemat.css" />
{% endblock %}
</head>
<body>

View file

@ -10,9 +10,9 @@
{% block main %}
Your balance: {{ authuser.balance }}
<a href="/deposit?n=100">Deposit CHF 1</a>
<a href="/deposit?n=1000">Deposit CHF 10</a>
<br/>
<a href="/deposit?n=100">Deposit CHF 1</a><br/>
<a href="/deposit?n=1000">Deposit CHF 10</a><br/>
{% for product in products %}
<div class="thumblist-item">
@ -25,10 +25,13 @@ Your balance: {{ authuser.balance }}
{{ product.price_non_member }}
{% endif %}
; Stock: {{ product.stock }}</span><br/>
<img height="150" src="/img/thumbnails/products/{{ product.id }}.png" alt="Picture of {{ product.name }}" />
<div class="imgcontainer">
<img src="/img/thumbnails/products/{{ product.id }}.png" alt="Picture of {{ product.name }}" />
</div>
</a>
</div>
{% endfor %}
<br/>
<a href="/logout">Logout</a>
{{ super() }}

View file

@ -10,10 +10,13 @@
<div class="thumblist-item">
<a href="/touchkey?uid={{ user.id }}&username={{ user.name }}">
<span class="thumblist-title">{{ user.name }}</span><br/>
<img height="150" src="/img/thumbnails/users/{{ user.id }}.png" alt="Avatar of {{ user.name }}" />
<div class="imgcontainer">
<img src="/img/thumbnails/users/{{ user.id }}.png" alt="Avatar of {{ user.name }}" />
</div>
</a>
</div>
{% endfor %}
<br/>
<a href="/login">Password-based login</a>
{{ super() }}
{% endblock %}