forked from s3lph/matemat
Added some barebones CSS to display the user- and product-list in a somewhat acceptable way.
This commit is contained in:
parent
cf892211be
commit
4ba0165e7c
4 changed files with 43 additions and 5 deletions
31
static/css/matemat.css
Normal file
31
static/css/matemat.css
Normal 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;
|
||||||
|
}
|
|
@ -3,6 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
{% block head %}
|
{% block head %}
|
||||||
<title>Matemat</title>
|
<title>Matemat</title>
|
||||||
|
<link rel="stylesheet" href="/css/matemat.css" />
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
@ -10,9 +10,9 @@
|
||||||
{% block main %}
|
{% block main %}
|
||||||
|
|
||||||
Your balance: {{ authuser.balance }}
|
Your balance: {{ authuser.balance }}
|
||||||
|
<br/>
|
||||||
<a href="/deposit?n=100">Deposit CHF 1</a>
|
<a href="/deposit?n=100">Deposit CHF 1</a><br/>
|
||||||
<a href="/deposit?n=1000">Deposit CHF 10</a>
|
<a href="/deposit?n=1000">Deposit CHF 10</a><br/>
|
||||||
|
|
||||||
{% for product in products %}
|
{% for product in products %}
|
||||||
<div class="thumblist-item">
|
<div class="thumblist-item">
|
||||||
|
@ -25,10 +25,13 @@ Your balance: {{ authuser.balance }}
|
||||||
{{ product.price_non_member }}
|
{{ product.price_non_member }}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
; Stock: {{ product.stock }}</span><br/>
|
; 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>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
<br/>
|
||||||
<a href="/logout">Logout</a>
|
<a href="/logout">Logout</a>
|
||||||
|
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
|
|
|
@ -10,10 +10,13 @@
|
||||||
<div class="thumblist-item">
|
<div class="thumblist-item">
|
||||||
<a href="/touchkey?uid={{ user.id }}&username={{ user.name }}">
|
<a href="/touchkey?uid={{ user.id }}&username={{ user.name }}">
|
||||||
<span class="thumblist-title">{{ user.name }}</span><br/>
|
<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>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
<br/>
|
||||||
<a href="/login">Password-based login</a>
|
<a href="/login">Password-based login</a>
|
||||||
{{ super() }}
|
{{ super() }}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
Loading…
Reference in a new issue