Fix mobile order page, show dish descriptions

This commit is contained in:
Midgard 2020-09-01 16:35:18 +02:00
parent 6651a8d513
commit 0b93307f1f
Signed by: midgard
GPG key ID: 511C112F1331BBB4

View file

@ -105,7 +105,7 @@
{% endif %} {% endif %}
<details {% if dish.id == selected_dish.id %}open="open"{% endif %}> <details {% if dish.id == selected_dish.id %}open="open"{% endif %}>
<summary class="spacecake"><span>{{ dish.name }}</span> <span class="tags"> {{ dish.tags | join(", ") }}</span><span class="spacer"></span><span>{{ dish.price_range() | price_range }}</span></summary> <summary class="spacecake"><span class="dish_name">{{ dish.name }}</span> <span class="tags"> {{ dish.tags | join(", ") }}</span><span class="description">{{ dish.description }}</span><span class="spacer"></span><span class="price">{{ dish.price_range() | price_range }}</span></summary>
{% for (choice_type, choice) in dish.choices %} {% for (choice_type, choice) in dish.choices %}
<div class="form-group select2-container select2"> <div class="form-group select2-container select2">
<label class="control-label" for="choice_{{ choice.id }}">{{ choice.name }}</label><br/> <label class="control-label" for="choice_{{ choice.id }}">{{ choice.name }}</label><br/>
@ -232,7 +232,8 @@
{%- endfor %} {%- endfor %}
<div class="footer"> <div class="footer">
Total {{ order.items.count() }} items — {{ total_price|euro }} Total {{ order.items.count() }} items — {{ total_price|euro }}
<a class="btn" href="{{ url_for('order_bp.items_showcase', order_id=order.id) }}">Shop view</a> &nbsp;
<a class="btn btn-sm" href="{{ url_for('order_bp.items_showcase', order_id=order.id) }}">Shop view</a>
</div> </div>
</div> </div>
</div> </div>
@ -312,15 +313,21 @@ body, h1, h2, h3, h4 {
table { table {
overflow-wrap: break-word; overflow-wrap: break-word;
} }
section { @media (min-width: 1200px) {
section {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-gap: 0 30px; grid-gap: 0 30px;
align-items: start; align-items: start;
}
} }
section.single_column { section.single_column {
grid-template-columns: unset; grid-template-columns: unset;
} }
.description {
color: #888;
margin-left: 1em;
}
header { header {
margin-bottom: 25px; margin-bottom: 25px;
} }
@ -432,6 +439,17 @@ li {
.footer { .footer {
margin-top: 1em; margin-top: 1em;
} }
summary {
line-height: 1.2;
margin: 0.6em 0;
}
summary .dish_name {
white-space: nowrap;
}
summary .dish_name, summary:before {
align-self: flex-start;
}
</style> </style>
{% endblock %} {% endblock %}
{% block scripts %} {% block scripts %}