From c4aa9c63f4b6ba92c28b0d64f66b2b2e450b521a Mon Sep 17 00:00:00 2001 From: flashwave Date: Sat, 17 Nov 2018 22:59:01 +0100 Subject: [PATCH] Restyle changelog log page. --- assets/less/classes/changelog.less | 190 ++++++++++++++++--------- assets/less/classes/forum/post.less | 8 +- assets/less/classes/input/upload.less | 2 +- assets/less/classes/settings/role.less | 2 +- public/changelog.php | 5 +- templates/changelog/change.twig | 125 +++++++--------- 6 files changed, 188 insertions(+), 144 deletions(-) diff --git a/assets/less/classes/changelog.less b/assets/less/classes/changelog.less index e9e7b975..3e67659b 100644 --- a/assets/less/classes/changelog.less +++ b/assets/less/classes/changelog.less @@ -141,32 +141,20 @@ } &__change { - margin: 1px; + display: flex; + margin-bottom: 2px; + + @media (max-width: @site-mobile-width) { + flex-direction: column; + } &__line { border: 1px solid var(--accent-colour); + background-color: var(--accent-colour); display: flex; align-items: stretch; flex: 1 0 auto; - } - - &__row, - &__column { - display: flex; - } - - &__column { - flex-direction: column; - - &--user-info { - justify-content: space-between; - flex: 0 0 auto; - } - - &--change-info { - flex: 1 1 auto; - overflow: hidden; - } + margin-bottom: 2px; } &__action { @@ -187,84 +175,156 @@ &__log { padding: 4px 12px; - font-size: 1.4em; + font-size: 1.5em; align-self: center; flex: 1 1 auto; overflow: hidden; + width: 100%; + height: 100%; &__text { word-wrap: break-word; } } - &__date { - border: 1px solid var(--accent-colour); + &__info { + + &__content { + width: 200px; + text-align: center; + display: flex; + flex-direction: column; + padding: 15px; + flex: 0 0 auto; + margin-right: 4px; + + @media (max-width: @site-mobile-width) { + flex-direction: row; + align-items: center; + width: 100%; + flex-wrap: wrap; + } + } + + &__background { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + mask-image: linear-gradient(270deg, transparent 10%, var(--background-colour) 100%); + -webkit-mask-image: linear-gradient(270deg, transparent 10%, var(--background-colour) 100%); + background: var(--background-pattern); + background-color: var(--accent-colour); + background-blend-mode: multiply; + + @media (max-width: @site-mobile-width) { + mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%); + -webkit-mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%); + } + } + + @media (max-width: @site-mobile-width) { + flex-direction: row; + margin: 0; + padding: 5px; + } + } + + &__user { + display: flex; + text-align: left; + align-items: center; + margin-bottom: 10px; + + &__details { + display: flex; + flex-direction: column; + } + + @media (max-width: @site-mobile-width) { + margin-bottom: 0; + margin-right: 10px; + } + } + + &__avatar { + width: 60px; + height: 60px; + margin-right: 10px; + + @media (max-width: @site-mobile-width) { + width: 50px; + height: 50px; + } + } + + &__username { + color: inherit; + font-size: 1.4em; + line-height: 1.5em; + text-decoration: none; + + &[href]:hover { + text-decoration: underline; + } + } + + &__userrole { + font-size: .9em; + line-height: 1.5em; color: inherit; text-decoration: none; - margin-right: 1px; - text-align: center; - padding: 2px; + + &[href]:hover { + text-decoration: underline; + } + + @media (max-width: @site-mobile-width) { + display: none; + } + } + + &__date { + color: inherit; + text-decoration: none; + font-size: 1.1em; + line-height: 1.5em; &:hover { text-decoration: underline; } } - &__user { - border: 1px solid var(--accent-colour); - padding: 2px; - display: flex; - align-items: center; - text-decoration: none; - color: inherit; - margin: 1px; - margin-left: 0; - - &__info { - margin: 2px 5px; - } - - &__title { - width: 120px; - word-wrap: break-word; - } - - &__avatar { - width: 60px; - height: 60px; - margin-right: 1px; - align-self: flex-start; - } - - &__name { - color: var(--user-colour); - font-size: 1.5em; - line-height: 1.2em; - } - } - &__text { - margin: 1px 0; - padding: 1px 3px; - border-top: 1px solid var(--accent-colour); - font-size: 1.2em; - line-height: 1.5em; + line-height: 1.2em; flex: 1 1 auto; word-wrap: break-word; + overflow: hidden; + margin: 2px; } &__tags { list-style: none; display: flex; flex-wrap: wrap; + margin-top: 10px; + justify-content: center; + + @media (max-width: @site-mobile-width) { + margin-top: 0; + margin-left: 10px; + } } &__tag { border: 1px solid var(--accent-colour); - margin-right: 1px; + background-color: var(--accent-colour); + margin: 1px; border-radius: 2px; &__link { + background-color: var(--background-colour-translucent); display: block; width: 100%; height: 100%; diff --git a/assets/less/classes/forum/post.less b/assets/less/classes/forum/post.less index 58cbe307..c9911d6f 100644 --- a/assets/less/classes/forum/post.less +++ b/assets/less/classes/forum/post.less @@ -46,7 +46,6 @@ } &__info { - background-image: linear-gradient(90deg, var(--user-colour), transparent); &__content { min-width: 150px; @@ -70,11 +69,14 @@ background: var(--background-pattern); background-color: var(--accent-colour); background-blend-mode: multiply; + + @media (max-width: @site-mobile-width) { + mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%); + -webkit-mask-image: linear-gradient(0deg, transparent 10%, var(--background-colour) 100%); + } } - @media (max-width: @site-mobile-width) { - background-image: linear-gradient(180deg, var(--user-colour), transparent); flex-direction: row; margin: 0; padding: 5px; diff --git a/assets/less/classes/input/upload.less b/assets/less/classes/input/upload.less index c99c1f21..4538ea9f 100644 --- a/assets/less/classes/input/upload.less +++ b/assets/less/classes/input/upload.less @@ -19,7 +19,7 @@ border-radius: 2px; box-shadow: inset 0 0 4px #111; transition: border-color .2s; - overflow: none; + overflow: hidden; word-wrap: break-word; } diff --git a/assets/less/classes/settings/role.less b/assets/less/classes/settings/role.less index 75f92152..8a8f88c6 100644 --- a/assets/less/classes/settings/role.less +++ b/assets/less/classes/settings/role.less @@ -3,7 +3,7 @@ background-color: var(--accent-colour); border-radius: 2px; margin: 2px; - overflow: none; + overflow: hidden; width: 200px; &__collection { diff --git a/public/changelog.php b/public/changelog.php index 2004438a..94e5bd64 100644 --- a/public/changelog.php +++ b/public/changelog.php @@ -22,7 +22,7 @@ if ($changelogChange > 0) { SELECT c.`change_id`, c.`change_created`, c.`change_log`, c.`change_text`, a.`action_name`, a.`action_colour`, a.`action_class`, - u.`user_id`, u.`username`, + u.`user_id`, u.`username`, u.`display_role` as `user_role`, DATE(`change_created`) as `change_date`, COALESCE(u.`user_title`, r.`role_title`) as `user_title`, COALESCE(u.`user_colour`, r.`role_colour`) as `user_colour` @@ -39,7 +39,8 @@ if ($changelogChange > 0) { $change = $getChange->execute() ? $getChange->fetch(PDO::FETCH_ASSOC) : []; if (!$change) { - http_response_code(404); + echo render_error(404); + return; } else { $getTags = db_prepare(' SELECT diff --git a/templates/changelog/change.twig b/templates/changelog/change.twig index 0c7293d9..bba589e1 100644 --- a/templates/changelog/change.twig +++ b/templates/changelog/change.twig @@ -2,89 +2,70 @@ {% from 'macros.twig' import container_title %} {% from '_layout/comments.twig' import comments_section %} -{% set is_valid = change|length > 0 %} -{% set title = 'Changelog » ' ~ (is_valid ? 'Change #' ~ change.change_id : 'Unknown Change') %} - -{% if is_valid %} - {% set canonical_url = '/changelog.php?c=' ~ change.change_id %} - {% set manage_link = '/manage/changelog.php?v=change&c=' ~ change.change_id %} - {% set description = change.change_log %} -{% endif %} +{% set title = 'Changelog » Change #' ~ change.change_id %} +{% set canonical_url = '/changelog.php?c=' ~ change.change_id %} +{% set manage_link = '/manage/changelog.php?v=change&c=' ~ change.change_id %} +{% set description = change.change_log %} {% block content %} -
- {{ container_title(title) }} +
+
+ {{ change.action_name }} +
-
- {% if is_valid %} -
-
-
- {{ change.action_name }} -
+
+
+ {{ change.change_log }} +
+
+
-
-
- {{ change.change_log }} -
+
+
+
+
+ {% if change.user_id is not null %} +
+ + + +
+ {{ change.username }} + {{ change.user_title }}
+ {% endif %} -
- -
- {{ change.user_title }} -
-
- +
+

{{ title }}

- - - -
- -
-
- {% if change.change_text|length >= 1 %} - {{ change.change_text|parse_text(constant('MSZ_PARSER_MARKDOWN'))|raw }} - {% else %} -

This change has no additional notes.

- {% endif %} -
- - -
-
-
+ {% if change.change_text|length >= 1 %} + {{ change.change_text|parse_text(constant('MSZ_PARSER_MARKDOWN'))|raw }} {% else %} -
- The requested change could not be found. -
+

This change has no additional notes.

{% endif %}