Use Bulma features

This commit is contained in:
Tom Hubrecht 2020-12-18 11:48:07 +01:00
parent 3d8a225ed1
commit 530d7f7365
5 changed files with 304 additions and 284 deletions

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

View file

@ -1,26 +1,30 @@
// Compilation command :
// Compilation command : sass --watch sass/main.scss:../elections/css/main.css
$text: black;
@import "bulma/bulma.sass";
$box-radius: 3px;
$primary: hsl(219, 33%, 17%); // Dark blue
$body-background-color: hsl(0, 0%, 86%); // Light grey
@import "../bulma/bulma.sass";
$primary_color: #1d2739;
$background_color: lightgrey;
html, body {
background: $background_color;
font-size: 18px;
}
// html, body {
// background: $background_color;
// font-size: 18px;
// }
#top-navbar {
#logo {
font-family: sans-serif;
font-weight: bold;
font-size: 40px;
}
// #top-navbar {
// #logo {
// font-family: sans-serif;
// font-weight: bold;
// font-size: 40px;
// }
background-color: $primary_color;
color: findColorInvert($primary_color);
padding: 1em 2em;
margin-bottom: 0;
}
// background-color: $primary_color;
// color: findColorInvert($primary_color);
// padding: 1em 2em;
// margin-bottom: 0;
// }

View file

@ -3,6 +3,7 @@
<!DOCTYPE html>
<html>
<head>
<title>{{ site.name }}</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
@ -19,10 +20,13 @@
{% block extra_head %}{% endblock extra_head %}
</head>
<body>
<nav class="level"id="top-navbar">
<div class="level-left" id="logo">Kadenios</div>
<div class="level-right" id="logout-button">
<nav class="level has-background-primary">
<div class="level-left pl-4">
<b class="title has-text-primary-light">Kadenios</b>
</div>
<div class="level-right pr-4">
<figure class="image is-64x64">
<a href="">
<img src="{% static "elections/images/logout.svg" %}" alt="logout">
@ -31,8 +35,8 @@
</div>
</nav>
{% block layout %}
<div class="columns">
<div class="column is-two-thirds is-offset-2">
<div class="columns is-centered">
<div class="column is-two-thirds">
<section class="section">
{% if messages %}
@ -55,4 +59,5 @@
</div>
{% endblock layout %}
</body>
</html>

View file

@ -0,0 +1,25 @@
{% extends "elections/base.html" %}
{% load i18n %}
{% block content %}
<h1 class="title">{{ election.name }}</h1>
<div class="message is-info">
<p class="message-body">{{ election.description }}</p>
</div>
<div class="container">
{% for q in questions %}
<div class="box">
<h3 class="subtitle">{{ q.text }}</h3>
{% for o in q.options.all %}
{{ o.text }}<br>
{% endfor %}
<a class="button is-outlined is-info is-light">{% trans "Voter" %}</a>
</div>
{% endfor %}
</div>
{% endblock %}