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,
......@@ -63,3 +64,30 @@ section .container {
background-color: #e8462b;
border-color: #e8462b;
}
.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']) %}
<div class="messages">
{% with messages = get_flashed_messages() %}
{% for message in messages %}
<div class="alert alert-danger" role="alert">
{{ message }}
<div class="message">
<h4>{{ message }}</h4>
</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 %}
{% block content %}{% endblock %}
......
......@@ -3,14 +3,10 @@
{% 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">
......
{% 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>
......
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