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 { ...@@ -4,6 +4,7 @@ body #container {
margin: auto; margin: auto;
padding: 20px 50px 40px; padding: 20px 50px 40px;
width: 80%; width: 80%;
position: relative;
} }
body #container h1, body #container h1,
...@@ -62,4 +63,31 @@ section .container { ...@@ -62,4 +63,31 @@ section .container {
.btn-primary { .btn-primary {
background-color: #e8462b; background-color: #e8462b;
border-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 @@ ...@@ -31,20 +31,15 @@
</div> </div>
</nav> </nav>
{% with messages = get_flashed_messages(category_filter=['error']) %} <div class="messages">
{% for message in messages %} {% with messages = get_flashed_messages() %}
<div class="alert alert-danger" role="alert"> {% for message in messages %}
{{ message }} <div class="message">
</div> <h4>{{ message }}</h4>
{% endfor %} </div>
{% endwith %} {% endfor %}
{% with messages = get_flashed_messages(category_filter=['success']) %} {% endwith %}
{% for message in messages %} </div>
<div class="alert alert-success" role="alert">
{{ message }}
</div>
{% endfor %}
{% endwith %}
{% block content %}{% endblock %} {% block content %}{% endblock %}
......
...@@ -3,23 +3,19 @@ ...@@ -3,23 +3,19 @@
{% block title %} AMIV Burger Creator {% endblock %} {% block title %} AMIV Burger Creator {% endblock %}
{% block content %} {% block content %}
<p class="lead">
Create your a burger for the 125th anniversary of the AMIV!
</p>
<form method="POST"> <form method="POST">
<div id="creator"> <div id="creator">
<!-- Info Section --> <!-- 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"> <div class="container">
<h2 class="text-center text-uppercase text-white">Create a Burger</h2> <h2 class="text-center text-uppercase text-white">Create a Burger</h2>
<hr class="star-light"> <hr class="star-light">
<div class="text-center"> <div class="text-center">
<h5> <h5>
You can create your own AMIV anniversary burger below. You can create your own AMIV anniversary burger below.
Everyone can vote on the submitted burgers to decide which one is the best. 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 --> The most popular burger will be available at the canteen Polyterasse on <!-- TODO -->
</h5> </h5>
</div> </div>
</div> </div>
</section> </section>
......
{% extends 'base.html' %} {% block content %} {% extends 'base.html' %}
<p class="lead"> {% block title %} AMIV Burger Creator {% endblock %}
Create your a burger for the 125th anniversary of the AMIV!
</p>
<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"> <div class="container">
<h2 class="text-center text-uppercase text-white">Pick your Favourites</h2> <h2 class="text-center text-uppercase text-white">Pick your Favourites</h2>
<hr class="star-light"> <hr class="star-light">
...@@ -29,13 +28,13 @@ ...@@ -29,13 +28,13 @@
<div class="list-group"> <div class="list-group">
{% for burger in burger_list %} {% 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 --> <!-- Ranking -->
<h3 class="text-secondary mr-3"> <h3 class="text-secondary mr-3 burger__ranking">
{{ loop.index }}. {{ loop.index }}.
</h3> </h3>
<div class="d-flex align-items-center justify-content-between"> <div class="burger__info">
<!-- Name & Ingredients --> <!-- Name & Ingredients -->
<div class="text-left w-50"> <div class="text-left w-50">
<h4 class="text-primary">{{ burger.name }}</h4> <h4 class="text-primary">{{ burger.name }}</h4>
...@@ -60,7 +59,7 @@ ...@@ -60,7 +59,7 @@
</div> </div>
<!-- Voting --> <!-- Voting -->
<div> <div class="burger__voting">
<h4 class="text-secondary mb-3">{{ burger.vote_count }} Votes</h4> <h4 class="text-secondary mb-3">{{ burger.vote_count }} Votes</h4>
<form action="/vote" method="POST"> <form action="/vote" method="POST">
{% if not burger.vote_id %} {% if not burger.vote_id %}
...@@ -73,7 +72,7 @@ ...@@ -73,7 +72,7 @@
<input type="hidden" name="burger_id" value="{{ burger.id }}"> <input type="hidden" name="burger_id" value="{{ burger.id }}">
</form> </form>
</div> </div>
</li> </div>
{% endfor %} {% endfor %}
</div> </div>
......
Supports Markdown
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