Moved file to correct place & improved CSS a bit

This commit is contained in:
Julien Constant 2022-06-15 15:32:16 +02:00
parent 066ca5bada
commit 85788977fe
No known key found for this signature in database
GPG Key ID: 816E7C070117E5B7
2 changed files with 36 additions and 18 deletions

View File

@ -1,4 +1,8 @@
$padding: 15px; $padding: 1.5rem;
$padding_smaller: .5rem;
$gap: .25rem;
$border: .01rem solid black;
$min_col_width: 100px;
.error { .error {
color: red !important; color: red !important;
@ -7,7 +11,7 @@ $padding: 15px;
.radio-btn { .radio-btn {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 5px; gap: $gap;
> input, > input,
> label { > label {
@ -19,6 +23,10 @@ $padding: 15px;
} }
} }
.election_vote {
overflow-x: scroll !important;
}
.election_table { .election_table {
width: 100%; width: 100%;
@ -35,10 +43,12 @@ $padding: 15px;
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
align-items: center; align-items: center;
justify-content: space-between; justify-content: center;
padding: $padding; padding: $padding;
border: 0.5px solid black; border: $border;
border-collapse: collapse; border-collapse: collapse;
position: relative;
min-width: $min_col_width;
>a{ >a{
margin-left: $padding; margin-left: $padding;
@ -51,6 +61,9 @@ $padding: 15px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: absolute;
right: $gap;
top: $gap;
&:hover { &:hover {
background-color: #ddd; background-color: #ddd;
@ -68,7 +81,7 @@ $padding: 15px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
background-color: lightgrey; background-color: lightgrey;
&:hover { &:hover {
background-color: lightgrey; background-color: lightgrey;
} }
@ -96,7 +109,7 @@ $padding: 15px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
gap: 5px; gap: $gap;
> button, > button,
> button > i, > button > i,
@ -140,11 +153,12 @@ $padding: 15px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
border: 0.5px solid black; border: $border;
border-collapse: collapse; border-collapse: collapse;
background-color: #fff; background-color: #fff;
padding: $padding; padding: $padding_smaller;
margin: 0; margin: 0;
min-width: $min_col_width;
>.candidates { >.candidates {
margin: 0; margin: 0;
@ -152,7 +166,7 @@ $padding: 15px;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
gap: 10px; gap: $gap;
>.candidate { >.candidate {
display: flex; display: flex;
@ -160,12 +174,16 @@ $padding: 15px;
align-items: center; align-items: center;
list-style-type: none; list-style-type: none;
gap: 10px; gap: $gap;
>input[type="radio"]:checked + label, >input[type="radio"]:checked + label,
>input[type="checkbox"]:checked + label { >input[type="checkbox"]:checked + label {
background-color: lightgray; background-color: lightgray;
border-radius: 10px; border-radius: 10px;
>figure>.edit_btns>a:hover{
background-color: #fff;
}
} }
>label>figure, >label>figure,
@ -174,7 +192,7 @@ $padding: 15px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 10px; gap: $gap;
padding: 10px; padding: 10px;
>img { >img {
@ -195,9 +213,9 @@ $padding: 15px;
position: absolute; position: absolute;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
top: 5px; top: $gap;
right: 5px; right: $gap;
gap: 5px; gap: $gap;
> a { > a {
width: 20px; width: 20px;
@ -212,7 +230,7 @@ $padding: 15px;
justify-content: center; justify-content: center;
&:hover { &:hover {
background-color: #fff; background-color: #d8d8d8;
} }
} }
} }
@ -234,7 +252,7 @@ $padding: 15px;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 5px; gap: $gap;
} }
.button { .button {

View File

@ -6,7 +6,7 @@
{% block head %} {% block head %}
{{ super() -}} {{ super() -}}
<link rel="stylesheet" href="{{ scss('core/election.scss') }}"> <link rel="stylesheet" href="{{ scss('election/election.scss') }}">
{%- endblock %} {%- endblock %}
{% block content %} {% block content %}
@ -38,7 +38,7 @@
</p> </p>
{%- endif %} {%- endif %}
</section> </section>
<section class="election__vote"> <section class="election_vote">
<form action="{{ url('election:vote', election.id) }}" method="post" class="election__vote-form" name="vote-form" id="vote-form"> <form action="{{ url('election:vote', election.id) }}" method="post" class="election__vote-form" name="vote-form" id="vote-form">
{% csrf_token %} {% csrf_token %}
<table class="election_table"> <table class="election_table">