Use Bulma features
This commit is contained in:
Tom Hubrecht
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
|
|
@ -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;
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -3,56 +3,61 @@
|
|||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>{{ site.name }}</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
{# CSS #}
|
||||
<link rel="stylesheet" href="{% static "elections/css/main.css" %}">
|
||||
<link type="text/css" rel="stylesheet" href="{% static 'vendor/font-awesome/css/font-awesome.min.css' %}">
|
||||
<head>
|
||||
<title>{{ site.name }}</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
{# Javascript #}
|
||||
<script src="{% static 'vendor/jquery/jquery-3.3.1.min.js' %}"></script>
|
||||
{# <script src="{% static 'elections/js/main.js' %}"></script> #}
|
||||
{# CSS #}
|
||||
<link rel="stylesheet" href="{% static "elections/css/main.css" %}">
|
||||
<link type="text/css" rel="stylesheet" href="{% static 'vendor/font-awesome/css/font-awesome.min.css' %}">
|
||||
|
||||
{% 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">
|
||||
<figure class="image is-64x64">
|
||||
<a href="">
|
||||
<img src="{% static "elections/images/logout.svg" %}" alt="logout">
|
||||
</a>
|
||||
</figure>
|
||||
</div>
|
||||
</nav>
|
||||
{% block layout %}
|
||||
<div class="columns">
|
||||
<div class="column is-two-thirds is-offset-2">
|
||||
<section class="section">
|
||||
{# Javascript #}
|
||||
<script src="{% static 'vendor/jquery/jquery-3.3.1.min.js' %}"></script>
|
||||
{# <script src="{% static 'elections/js/main.js' %}"></script> #}
|
||||
|
||||
{% if messages %}
|
||||
{% for message in messages %}
|
||||
<div class="notification is-{{ message.level_tag|bulma_message_tag }}">
|
||||
{% if 'safe' in message.tags %}
|
||||
{{ message|safe }}
|
||||
{% else %}
|
||||
{{ message }}
|
||||
{% endif %}
|
||||
<button class="delete"></button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% block extra_head %}{% endblock extra_head %}
|
||||
</head>
|
||||
|
||||
{% block content %}
|
||||
{% endblock content %}
|
||||
</section>
|
||||
</div>
|
||||
<body>
|
||||
<nav class="level has-background-primary">
|
||||
<div class="level-left pl-4">
|
||||
<b class="title has-text-primary-light">Kadenios</b>
|
||||
</div>
|
||||
{% endblock layout %}
|
||||
</body>
|
||||
<div class="level-right pr-4">
|
||||
<figure class="image is-64x64">
|
||||
<a href="">
|
||||
<img src="{% static "elections/images/logout.svg" %}" alt="logout">
|
||||
</a>
|
||||
</figure>
|
||||
</div>
|
||||
</nav>
|
||||
{% block layout %}
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-two-thirds">
|
||||
<section class="section">
|
||||
|
||||
{% if messages %}
|
||||
{% for message in messages %}
|
||||
<div class="notification is-{{ message.level_tag|bulma_message_tag }}">
|
||||
{% if 'safe' in message.tags %}
|
||||
{{ message|safe }}
|
||||
{% else %}
|
||||
{{ message }}
|
||||
{% endif %}
|
||||
<button class="delete"></button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
{% block content %}
|
||||
{% endblock content %}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock layout %}
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
25
elections/templates/elections/election.html
Normal file
25
elections/templates/elections/election.html
Normal 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 %}
|
||||
Loading…
Reference in a new issue