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",
|
||||
"Lucida Console", "Courier New", monospace;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 40rem;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
h1,
|
||||
h3 {
|
||||
text-align: center;
|
||||
|
|
@ -27,9 +31,11 @@
|
|||
}
|
||||
|
||||
ul {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
list-style: none;
|
||||
align-content: flex-start;
|
||||
padding: 0 1em;
|
||||
margin: 1em auto;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -37,18 +43,17 @@
|
|||
}
|
||||
|
||||
li {
|
||||
max-width: 13rem;
|
||||
width: 13em;
|
||||
width: auto;
|
||||
margin: 0.2em;
|
||||
padding: 1em;
|
||||
|
||||
order: 0;
|
||||
border-color: #2c2c2c;
|
||||
border-color: #aaa;
|
||||
border-radius: 4px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
align-self: flex-start;
|
||||
|
|
@ -111,7 +116,7 @@
|
|||
.reserve-button {
|
||||
color: white;
|
||||
background: transparent;
|
||||
border: white solid 1px;
|
||||
border: #2c2c2c solid 1px;
|
||||
padding: 0.8em 1em 1em 1em;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
|
|
@ -145,6 +150,7 @@
|
|||
|
||||
.details {
|
||||
height: 0;
|
||||
transition: height 1s !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -157,16 +163,85 @@
|
|||
cursor: pointer;
|
||||
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>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<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>
|
||||
{% 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 '' }}">
|
||||
{% if item.image %}<img
|
||||
src="{{ item.image }}"
|
||||
|
|
@ -188,7 +263,7 @@
|
|||
<input type="hidden" name="name" value="" />
|
||||
{% if item.reservation %}
|
||||
<button type="submit" class="reserve-button">
|
||||
Unreserve
|
||||
Reservierung aufheben
|
||||
</button>
|
||||
{% else %}
|
||||
<button type="submit" class="reserve-button">
|
||||
|
|
@ -212,6 +287,7 @@
|
|||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
function toggleDetails(id) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue