diff --git a/aleksis/core/static/style.scss b/aleksis/core/static/style.scss index 2b30ab8960949c564ec8a48bc04f7dd1f4beb3b9..ef58a53c387b46b89c50f1780b6b818d9127fef4 100644 --- a/aleksis/core/static/style.scss +++ b/aleksis/core/static/style.scss @@ -517,39 +517,58 @@ th.orderable.desc > a { font-weight: 700; } -.alert h1 { +figure.alert > :not(.material-icons.left){ + margin-left: 39px; +} + +.alert figcaption { font-weight: 700; font-size: 17px; margin: auto; } -.alert > p, .alert > div { +div.alert > p, +div.alert > div, +figure.alert{ margin: 10px; padding: 10px; border-left: 5px solid; } -.alert.success > p, .alert.success > div { +div.alert.success > p, +div.alert.success > div, +figure.alert.success{ @extend .success; border-color: color("green", "base"); } -.alert.error > p, .alert.error > div { +div.alert.error > p, +div.alert.error > div, +figure.alert.error { @extend .error; border-color: color("red", "darken-4"); } -.alert.primary > p, .alert.primary > div, .alert.info > p, .alert.info > div { +div.alert.primary > p, +div.alert.primary > div, +figure.alert.primary, +div.alert.info > p, +div.alert.info > div, +figure.alert.info { background-color: #ececec; border-color: $primary-color; } -.alert.warning p, .alert.warning div { +div.alert.warning p, +div.alert.warning div, +figure.alert.warning { @extend .warning; border-color: color("orange", "darken-4"); } -main .alert p:first-child, main .alert div:first-child { +main div.alert p:first-child, +main div.alert div:first-child, +main figure.alert { margin-left: -10px; margin-right: -10px; } diff --git a/aleksis/core/templates/core/base.html b/aleksis/core/templates/core/base.html index 95712b2ab1599fe6203cb2d97e184da735f44374..332e641a0649bee0a21afbcfa0c9da06e0fea148 100644 --- a/aleksis/core/templates/core/base.html +++ b/aleksis/core/templates/core/base.html @@ -93,8 +93,7 @@ {% if messages %} {% for message in messages %} - <div class="alert {% if message.tags %}{{ message.tags }}{% else %}info{% endif %}"> - <p> + <figure class="alert {% if message.tags %}{{ message.tags }}{% else %}info{% endif %}"> {% if message.tags == "success" %} <i class="material-icons left">check_circle</i> {% elif message.tags == "info" %} @@ -105,8 +104,7 @@ <i class="material-icons left">error</i> {% endif %} {{ message }} - </p> - </div> + </figure> {% endfor %} {% endif %} diff --git a/aleksis/core/templates/core/index.html b/aleksis/core/templates/core/index.html index d1606fca9be70a4d4a98c1b6974f2b84f22948f5..b2c1f3f5f9375d23ccc19297c5876f4c215e5bc4 100644 --- a/aleksis/core/templates/core/index.html +++ b/aleksis/core/templates/core/index.html @@ -20,8 +20,7 @@ {% endif %} {% for notification in unread_notifications %} - <div class="alert primary scale-transition"> - <div> + <figure class="alert primary scale-transition"> <i class="material-icons left">info</i> <div class="right"> @@ -30,10 +29,9 @@ </a> </div> - <h1>{{ notification.title }}</h1> + <figcaption>{{ notification.title }}</figcaption> <p>{{ notification.description|linebreaks }}</p> - </div> - </div> + </figure> {% endfor %} {% include "core/partials/announcements.html" with announcements=announcements %} diff --git a/aleksis/core/templates/core/partials/announcements.html b/aleksis/core/templates/core/partials/announcements.html index b0032d0dd6888f9ebcd7e6f881501178fc17e2a9..e3dcd5165f4149e3d5fa2016487ef771ad84f12d 100644 --- a/aleksis/core/templates/core/partials/announcements.html +++ b/aleksis/core/templates/core/partials/announcements.html @@ -1,8 +1,7 @@ {% load i18n humanize %} {% for announcement in announcements %} - <div class="alert primary"> - <div> + <figure class="alert primary"> {% if show_interval %} <em class="right hide-on-small-and-down"> {% if announcement.valid_from.date == announcement.valid_until.date %} @@ -25,8 +24,8 @@ </p> {% endif %} + <figcaption>{{ announcement.title }}</figcaption> <p> - <h1>{{ announcement.title }}</h1> {{ announcement.description }} </p> @@ -43,6 +42,5 @@ {% endif %} </em> {% endif %} - </div> - </div> + </figure> {% endfor %}