caspervk/drakul
1
0
Fork 0
Code Releases Activity

Improve class-coloured buttons and signup-coloured badges.

Browse source
This commit is contained in:
Casper V. Kristensen 2019-10-27 13:30:26 +01:00
parent c7460432d6
commit d8c972ac4b
Signed by: caspervk
GPG key ID: 289CA03790535054
2 changed files with 134 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

164
drakul/base/static/css/main.css
View file

@ -1,16 +1,4 @@
/* https://django-crispy-forms.readthedocs.io/en/latest/crispy_tag_forms.html#change-required-fields */ /* WoW class-coloured text */
.asteriskField {
display: none;
}
.w-14 {
width: 14.285% !important; /* Like Bootstrap's .w-{25,50,75,100}, but for 1/7th of the width */
}
.o-50 {
opacity: 0.5;
}
.class-druid {color: #ff7d0a;} .class-druid {color: #ff7d0a;}
.class-hunter {color: #abd473;} .class-hunter {color: #abd473;}
.class-mage {color: #69ccf0;} .class-mage {color: #69ccf0;}
@ -21,75 +9,179 @@
.class-warlock {color: #9482c9;} .class-warlock {color: #9482c9;}
.class-warrior {color: #c79c6e;} .class-warrior {color: #c79c6e;}
.class-druid-bg {
/* WoW class-coloured buttons */
.btn-druid, .btn-class-1 {
color: #fff; color: #fff;
background-color: #ff7d0a; background-color: #ff7d0a;
border-color: #ff7d0a;
} }
.class-hunter-bg { .btn-druid:hover, .btn-class-1:hover {
color: #fff; color: #fff;
background-color: #abd473; background-color: #eb7c0a;
border-color: #eb7c0a;
} }
.class-mage-bg {
.btn-hunter, .btn-class-2 {
color: #212529;
background-color: #abd473;
border-color: #abd473;
}
.btn-hunter:hover, .btn-class-2:hover {
color: #212529;
background-color: #98c062;
border-color: #98c062;
}
.btn-mage, .btn-class-3 {
color: #fff; color: #fff;
background-color: #69ccf0; background-color: #69ccf0;
border-color: #69ccf0;
} }
.class-paladin-bg { .btn-mage:hover, .btn-class-3:hover {
color: #fff;
background-color: #67b8dc;
border-color: #67b8dc;
}
.btn-paladin, .btn-class-4 {
color: #fff; color: #fff;
background-color: #f58cba; background-color: #f58cba;
border-color: #f58cba;
} }
.class-priest-bg { .btn-paladin:hover, .btn-class-4:hover {
color: #343a40; color: #fff;
background-color: #e17aa7;
border-color: #e17aa7;
}
.btn-priest, .btn-class-5 {
color: #212529;
background-color: #ffffff; background-color: #ffffff;
border-color: #ced4da;
} }
.class-rogue-bg { .btn-priest:hover, .btn-class-5:hover {
color: #343a40; color: #212529;
background-color: #ebebeb;
border-color: #ced2d6;
}
.btn-rogue, .btn-class-6 {
color: #212529;
background-color: #fff569; background-color: #fff569;
border-color: #f5eb63;
} }
.class-shaman-bg { .btn-rogue:hover, .btn-class-6:hover {
color: #212529;
background-color: #ebe168;
border-color: #e1d761;
}
.btn-shaman, .btn-class-7 {
color: #fff; color: #fff;
background-color: #0070de; background-color: #0070de;
border-color: #0070de;
} }
.class-warlock-bg { .btn-shaman:hover, .btn-class-7:hover {
color: #fff;
background-color: #0065ca;
border-color: #0065ca;
}
.btn-warlock, .btn-class-8 {
color: #fff; color: #fff;
background-color: #9482c9; background-color: #9482c9;
border-color: #9482c9;
} }
.class-warrior-bg { .btn-warlock:hover, .btn-class-8:hover {
color: #fff;
background-color: #816fb5;
border-color: #816fb5;
}
.btn-warrior, .btn-class-9 {
color: #fff; color: #fff;
background-color: #c79c6e; background-color: #c79c6e;
border-color: #c79c6e;
}
.btn-warrior:hover, .btn-class-9:hover {
color: #fff;
background-color: #b3895c;
border-color: #b3895c;
} }
/* Response bg and text colors from https://getbootstrap.com/docs/4.3/utilities/colors/ */ /* Response bg and text colors from https://getbootstrap.com/docs/4.3/utilities/colors/ */
.response-status-signed-off-bg, .response-status-1-bg { .response-status-signed-off-bg, .response-status-1-bg { /* danger */
color: #fff; color: #fff;
background-color: #dc3545; background-color: #dc3545;
} }
.response-status-signed-up-bg, .response-status-2-bg { a.response-status-signed-off-bg:focus, a.response-status-1-bg:focus,
a.response-status-signed-off-bg:hover, a.response-status-1-bg:hover {
color: #fff;
background-color: #bd2130;
}
.response-status-signed-up-bg, .response-status-2-bg { /* info */
color: #fff; color: #fff;
background-color: #17a2b8; background-color: #17a2b8;
} }
.response-status-stand-by-bg, .response-status-3-bg { a.response-status-signed-up-bg:focus, a.response-status-2-bg:focus,
color: #343a40; a.response-status-signed-up-bg:hover, a.response-status-2-bg:hover {
color: #fff;
background-color: #117a8b;
}
.response-status-stand-by-bg, .response-status-3-bg { /* warning */
color: #212529;
background-color: #ffc107; background-color: #ffc107;
} }
.response-status-confirmed-bg, .response-status-4-bg { a.response-status-stand-by-bg:focus, a.response-status-3-bg:focus,
a.response-status-stand-by-bg:hover, a.response-status-3-bg:hover {
color: #212529;
background-color: #d39e00;
}
.response-status-confirmed-bg, .response-status-4-bg { /* success */
color: #fff; color: #fff;
background-color: #28a745; background-color: #28a745;
} }
.response-status-no-response-bg, .response-status-0-bg { a.response-status-confirmed-bg:focus, a.response-status-4-bg:focus,
a.response-status-confirmed-bg:hover, a.response-status-4-bg:hover {
color: #fff;
background-color: #1e7e34;
}
.response-status-no-response-bg, .response-status-0-bg { /* secondary */
color: #fff; color: #fff;
background-color: #6c757d; background-color: #6c757d;
} }
a.response-status-no-response-bg:focus, a.response-status-0-bg:focus,
.response-character-button { a.response-status-no-response-bg:hover, a.response-status-0-bg:hover {
width: 16ch; color: #545b62;
background-color: #545b62;
} }
.raid-response-form .form-group {
margin-bottom: 0; /* https://django-crispy-forms.readthedocs.io/en/latest/crispy_tag_forms.html#change-required-fields */
.asteriskField {
display: none;
} }
.raid-calendar td { .raid-calendar td {
height: 8rem; /* height works like min-height for td's */ height: 8rem; /* height works like min-height for td's */
padding: .5rem; padding: .5rem;
} }
.w-14 {
width: 14.285% !important; /* Like Bootstrap's .w-{25,50,75,100}, but for 1/7th of the width - used for calendar */
}
.o-50 {
opacity: 0.5;
}
.response-character-button {
width: 16ch;
}

11
drakul/raids/templates/raids/raid_detail.html
View file

@ -20,7 +20,7 @@
</div> </div>
{% if response_form %} {% if response_form %}
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body mb-n3">
<form class="raid-response-form" method="post" action="{% url 'raid_detail' raid.id %}"> <form class="raid-response-form" method="post" action="{% url 'raid_detail' raid.id %}">
{% crispy response_form %} {% crispy response_form %}
</form> </form>
@ -34,19 +34,18 @@
{% with status=status|default_if_none:"No Response" %} {% with status=status|default_if_none:"No Response" %}
<div class="card mb-2"> <div class="card mb-2">
<h6 class="card-header response-status-{{ status | slugify }}-bg">{{ status }} ({{ status_responses | length }})</h6> <h6 class="card-header response-status-{{ status | slugify }}-bg">{{ status }} ({{ status_responses | length }})</h6>
<div class="card-body"> <div class="card-body mb-n4">
{% regroup status_responses by get_role_display as role_responses_list %} {% regroup status_responses by get_role_display as role_responses_list %}
{% for role, role_responses in role_responses_list %} {% for role, role_responses in role_responses_list %}
{% if role is not None %} {% if role is not None %}
<h6 class="card-title">{{ role }} ({{ role_responses | length }})</h6> <h6 class="card-title border-bottom pb-2">{{ role }} ({{ role_responses | length }})</h6>
<hr>
{% endif %} {% endif %}
<div class="d-flex flex-wrap"> <div class="d-flex flex-wrap">
{% regroup role_responses by character.klass as class_responses_list %} {% regroup role_responses by character.klass as class_responses_list %}
{% for class, class_responses in class_responses_list %} {% for class, class_responses in class_responses_list %}
<div class="d-flex flex-column mr-3 mb-3"> <div class="d-flex flex-column mr-2 mb-4">
{% for response in class_responses %} {% for response in class_responses %}
<a class="btn btn-secondary response-character-button mb-1 class-{{ response.character.get_klass_display | lower }}-bg" role="button" href="#"> <a class="btn response-character-button mb-1 btn-class-{{ response.character.klass }}" role="button" href="#">
{{ response.character.name }} {{ response.character.name }}
{% if response.note is not None %}&#128489;{% endif %} {% if response.note is not None %}&#128489;{% endif %}
</a> </a>