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>
|
||||
{% block head %}
|
||||
<title>Matemat</title>
|
||||
<link rel="stylesheet" href="/css/matemat.css" />
|
||||
{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
@ -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() }}
|
||||
|
|
|
@ -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 %}
|
||||
|
|
Loading…
Reference in a new issue