Commit b1a38687 authored by Mathis Dedial's avatar Mathis Dedial
Browse files

Various UI improvements

parent abf3cf9a
Pipeline #2686 skipped with stage
......@@ -4,6 +4,7 @@ body #container {
margin: auto;
padding: 20px 50px 40px;
width: 80%;
position: relative;
}
body #container h1,
......@@ -62,4 +63,31 @@ section .container {
.btn-primary {
background-color: #e8462b;
border-color: #e8462b;
}
\ No newline at end of file
}
.top-section {
/* Make sure that content doesn't disappear behind the top bar */
margin-top: 106px;
}
.burger {
display: flex;
align-items: center;
}
.burger__ranking {
flex-grow: 0; /* don't grow */
flex-shrink: 0; /* don't shrink */
flex-basis: 10%;
}
.burger__info {
display: flex;
align-items: center;
}
.burger__voting {
flex-grow: 0; /* don't grow */
flex-shrink: 0; /* don't shrink */
flex-basis: 15%;
}
......@@ -31,20 +31,15 @@
</div>
</nav>
{% with messages = get_flashed_messages(category_filter=['error']) %}
{% for message in messages %}
<div class="alert alert-danger" role="alert">
{{ message }}
</div>
{% endfor %}
{% endwith %}
{% with messages = get_flashed_messages(category_filter=['success']) %}
{% for message in messages %}
<div class="alert alert-success" role="alert">
{{ message }}
</div>
{% endfor %}
{% endwith %}
<div class="messages">
{% with messages = get_flashed_messages() %}
{% for message in messages %}
<div class="message">
<h4>{{ message }}</h4>
</div>
{% endfor %}
{% endwith %}
</div>
{% block content %}{% endblock %}
......
......@@ -3,23 +3,19 @@
{% block title %} AMIV Burger Creator {% endblock %}
{% block content %}
<p class="lead">
Create your a burger for the 125th anniversary of the AMIV!
</p>
<form method="POST">
<div id="creator">
<!-- Info Section -->
<section class="bg-primary text-white text-center" id="info">
<section class="bg-primary text-white text-center top-section" id="info">
<div class="container">
<h2 class="text-center text-uppercase text-white">Create a Burger</h2>
<hr class="star-light">
<div class="text-center">
<h5>
You can create your own AMIV anniversary burger below.
Everyone can vote on the submitted burgers to decide which one is the best.
The most popular burger will be available at the canteen Polyterasse on <!-- TODO -->
</h5>
<h5>
You can create your own AMIV anniversary burger below.
Everyone can vote on the submitted burgers to decide which one is the best.
The most popular burger will be available at the canteen Polyterasse on <!-- TODO -->
</h5>
</div>
</div>
</section>
......
{% extends 'base.html' %} {% block content %}
{% extends 'base.html' %}
<p class="lead">
Create your a burger for the 125th anniversary of the AMIV!
</p>
{% block title %} AMIV Burger Creator {% endblock %}
<section class="bg-primary text-white text-center" id="info">
{% block content %}
<section class="bg-primary text-white text-center top-section" id="info">
<div class="container">
<h2 class="text-center text-uppercase text-white">Pick your Favourites</h2>
<hr class="star-light">
......@@ -29,13 +28,13 @@
<div class="list-group">
{% for burger in burger_list %}
<li class="list-group-item d-flex align-items-center justify-content-between">
<div class="list-group-item burger">
<!-- Ranking -->
<h3 class="text-secondary mr-3">
<h3 class="text-secondary mr-3 burger__ranking">
{{ loop.index }}.
</h3>
<div class="d-flex align-items-center justify-content-between">
<div class="burger__info">
<!-- Name & Ingredients -->
<div class="text-left w-50">
<h4 class="text-primary">{{ burger.name }}</h4>
......@@ -60,7 +59,7 @@
</div>
<!-- Voting -->
<div>
<div class="burger__voting">
<h4 class="text-secondary mb-3">{{ burger.vote_count }} Votes</h4>
<form action="/vote" method="POST">
{% if not burger.vote_id %}
......@@ -73,7 +72,7 @@
<input type="hidden" name="burger_id" value="{{ burger.id }}">
</form>
</div>
</li>
</div>
{% endfor %}
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment