Trying to improve stuff v.v
This commit is contained in:
parent
e31ebcb8f8
commit
2a07064deb
1 changed files with 87 additions and 11 deletions
|
|
@ -15,11 +15,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
transition: height 1s !important;
|
|
||||||
font-family: "Fira Code", "Fira Mono", "Roboto Mono",
|
font-family: "Fira Code", "Fira Mono", "Roboto Mono",
|
||||||
"Lucida Console", "Courier New", monospace;
|
"Lucida Console", "Courier New", monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
max-width: 40rem;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
h3 {
|
h3 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
@ -27,9 +31,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: column;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
align-content: flex-start;
|
||||||
padding: 0 1em;
|
padding: 0 1em;
|
||||||
margin: 1em auto;
|
margin: 1em auto;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
@ -37,18 +43,17 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
max-width: 13rem;
|
width: auto;
|
||||||
width: 13em;
|
|
||||||
margin: 0.2em;
|
margin: 0.2em;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
|
|
||||||
order: 0;
|
order: 0;
|
||||||
border-color: #2c2c2c;
|
border-color: #aaa;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
align-self: flex-start;
|
align-self: flex-start;
|
||||||
|
|
@ -111,7 +116,7 @@
|
||||||
.reserve-button {
|
.reserve-button {
|
||||||
color: white;
|
color: white;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: white solid 1px;
|
border: #2c2c2c solid 1px;
|
||||||
padding: 0.8em 1em 1em 1em;
|
padding: 0.8em 1em 1em 1em;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
@ -145,6 +150,7 @@
|
||||||
|
|
||||||
.details {
|
.details {
|
||||||
height: 0;
|
height: 0;
|
||||||
|
transition: height 1s !important;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -157,16 +163,85 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
color: #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 6pt;
|
||||||
|
box-shadow: 4px 4px 15px #555, 2px 2px 13px #333 inset;
|
||||||
|
transition: box-shadow 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
box-shadow: 4px 4px 13px #888, 2px 2px 13px #333 inset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:active {
|
||||||
|
box-shadow: 1px 1px 3px #888, 2px 2px 3px #333 inset;
|
||||||
|
transition: box-shadow 0.1s !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unselectable {
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<main>
|
||||||
<h1>{{ wishlist.config.title }}</h1>
|
<h1>{{ wishlist.config.title }}</h1>
|
||||||
|
|
||||||
<p>ToDo: Erklärung</p>
|
<div id="welcome">
|
||||||
|
Bitte Name eingeben um Wunschliste zu sehen. Dieser wird zu deinen Reservierungen hinterlegt.
|
||||||
|
<br />
|
||||||
|
<input id="name" name="name" type="text" placeholder="Dein Name" /> <span id="register-btn"
|
||||||
|
class="button unselectable">Wunschliste
|
||||||
|
anzeigen</span>
|
||||||
|
</div>
|
||||||
|
{% if wishlist.items.items()|selectattr("reservation")|list %}
|
||||||
|
<h3>Deine Reservierungen</h3>
|
||||||
<ul>
|
<ul>
|
||||||
{% for item_id, item in wishlist.items.items() %}
|
{% for item_id, item in wishlist.items.items() if item.reservation %}
|
||||||
|
<li class="{{ 'reserved-item' if item.reservation else '' }}">
|
||||||
|
{% if item.image %}<img src="{{ item.image }}" alt="{{ item.name }}" />{% endif %}
|
||||||
|
<div class="item-name">{{ item.name }}</div>
|
||||||
|
<form method="POST" action="/reservation/update">
|
||||||
|
<input type="hidden" name="wishlist_id" value="{{ wishlist.config.id }}" />
|
||||||
|
<input type="hidden" name="item_id" value="{{ item.id }}" />
|
||||||
|
<input type="hidden" name="reserved" value="{{ 'false' if item.reservation else 'true' }}" />
|
||||||
|
<input type="hidden" name="name" value="" />
|
||||||
|
{% if item.reservation %}
|
||||||
|
<button type="submit" class="reserve-button">
|
||||||
|
Reservierung aufheben
|
||||||
|
</button>
|
||||||
|
{% else %}
|
||||||
|
<button type="submit" class="reserve-button">
|
||||||
|
Reservieren
|
||||||
|
</button>
|
||||||
|
{% endif %}
|
||||||
|
</form>
|
||||||
|
<div>
|
||||||
|
<p class="price">Ca. {{ "%.2f"|format(item.price) }}€</p>
|
||||||
|
<div class="details-button" onclick="toggleDetails('details-{{ item_id }}')">
|
||||||
|
Mehr Details
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="details-{{ item_id }}" class="details">
|
||||||
|
<p>{{ item.description }}</p>
|
||||||
|
<a href="{{ item.shop }}" target="_blank">Shop Link</a>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
{% endif %}
|
||||||
|
<h3>Verfügbare Geschenke</h3>
|
||||||
|
<ul>
|
||||||
|
{% for item_id, item in wishlist.items.items() if not item.reservation %}
|
||||||
<li class="{{ 'reserved-item' if item.reservation else '' }}">
|
<li class="{{ 'reserved-item' if item.reservation else '' }}">
|
||||||
{% if item.image %}<img
|
{% if item.image %}<img
|
||||||
src="{{ item.image }}"
|
src="{{ item.image }}"
|
||||||
|
|
@ -188,7 +263,7 @@
|
||||||
<input type="hidden" name="name" value="" />
|
<input type="hidden" name="name" value="" />
|
||||||
{% if item.reservation %}
|
{% if item.reservation %}
|
||||||
<button type="submit" class="reserve-button">
|
<button type="submit" class="reserve-button">
|
||||||
Unreserve
|
Reservierung aufheben
|
||||||
</button>
|
</button>
|
||||||
{% else %}
|
{% else %}
|
||||||
<button type="submit" class="reserve-button">
|
<button type="submit" class="reserve-button">
|
||||||
|
|
@ -212,6 +287,7 @@
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
|
</main>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
function toggleDetails(id) {
|
function toggleDetails(id) {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue