Restyle changelog log page.
This commit is contained in:
parent
a2f3e2f966
commit
c4aa9c63f4
6 changed files with 188 additions and 144 deletions
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
background-color: var(--accent-colour);
|
||||
border-radius: 2px;
|
||||
margin: 2px;
|
||||
overflow: none;
|
||||
overflow: hidden;
|
||||
width: 200px;
|
||||
|
||||
&__collection {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
<div class="container">
|
||||
{{ container_title(title) }}
|
||||
<div class="container changelog__change__line" style="{{ change.action_colour|html_colour('--accent-colour') }}">
|
||||
<div class="changelog__change__action {{ change.action_class is defined and change.action_class is not null ? ' changelog__change__action--' ~ change.action_class : '' }} changelog__change__action--{{ change.action_colour|colour_contrast }}">
|
||||
{{ change.action_name }}
|
||||
</div>
|
||||
|
||||
<div class="changelog__content">
|
||||
{% if is_valid %}
|
||||
<div class="changelog__change" id="#c{{ change.change_id }}">
|
||||
<div class="changelog__change__line"
|
||||
style="{{ change.action_colour|html_colour('--accent-colour') }}">
|
||||
<div class="changelog__change__action {{ change.action_class is defined and change.action_class is not null ? ' changelog__change__action--' ~ change.action_class : '' }} changelog__change__action--{{ change.action_colour|colour_contrast }}"
|
||||
style="{{ change.action_colour|html_colour('--accent-colour') }}">
|
||||
{{ change.action_name }}
|
||||
</div>
|
||||
<div class="changelog__change__log">
|
||||
<div class="changelog__change__log__text">
|
||||
{{ change.change_log }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="changelog__change__log">
|
||||
<div class="changelog__change__log__text">
|
||||
{{ change.change_log }}
|
||||
</div>
|
||||
<div class="container changelog__change" style="{% if change.user_colour is not null %}{{ change.user_colour|html_colour('--accent-colour') }}{% endif %}">
|
||||
<div class="changelog__change__info">
|
||||
<div class="changelog__change__info__background"></div>
|
||||
<div class="changelog__change__info__content">
|
||||
{% if change.user_id is not null %}
|
||||
<div class="changelog__change__user">
|
||||
<a class="avatar changelog__change__avatar"
|
||||
style="background-image:url('/profile.php?u={{ change.user_id }}&m=avatar');"
|
||||
href="/profile.php?u={{ change.user_id }}">
|
||||
</a>
|
||||
|
||||
<div class="changelog__change__user__details">
|
||||
<a class="changelog__change__username" href="/profile.php?u={{ change.user_id }}">{{ change.username }}</a>
|
||||
<a class="changelog__change__userrole" href="/members.php?r={{ change.user_role }}">{{ change.user_title }}</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="changelog__change__row">
|
||||
<div class="changelog__change__column changelog__change__column--user-info">
|
||||
<a class="changelog__change__user" href="/profile.php?u={{ change.user_id }}">
|
||||
<div class="avatar changelog__change__user__avatar"
|
||||
style="background-image:url('/profile.php?u={{ change.user_id }}&m=avatar')">
|
||||
</div>
|
||||
<a class="changelog__change__date" href="/changelog.php?d={{ change.change_date }}">
|
||||
Created
|
||||
<time datetime="{{ change.change_created|date('c') }}" title="{{ change.change_created|date('r') }}">
|
||||
{{ change.change_created|time_diff }}
|
||||
</time>
|
||||
</a>
|
||||
|
||||
<div class="changelog__change__user__info">
|
||||
<div class="changelog__change__user__name" style="{{ change.user_colour|html_colour }}">
|
||||
{{ change.username }}
|
||||
</div>
|
||||
{% if tags|length > 0 %}
|
||||
<ul class="changelog__change__tags">
|
||||
{% for tag in tags %}
|
||||
<li class="changelog__change__tag" title="{{ tag.tag_description }}">
|
||||
<a href="/changelog.php?t={{ tag.tag_id }}" class="changelog__change__tag__link">
|
||||
{{ tag.tag_name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="changelog__change__user__title">
|
||||
{{ change.user_title }}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="changelog__change__text markdown">
|
||||
<h1>{{ title }}</h1>
|
||||
|
||||
<a class="changelog__change__date"
|
||||
href="/changelog.php?d={{ change.change_date }}">
|
||||
<time datetime="{{ change.change_created|date('c') }}"
|
||||
title="{{ change.change_created|date('r') }}">
|
||||
{{ change.change_created|time_diff }}
|
||||
</time>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="changelog__change__column changelog__change__column--change-info">
|
||||
<div class="changelog__change__text markdown">
|
||||
{% if change.change_text|length >= 1 %}
|
||||
{{ change.change_text|parse_text(constant('MSZ_PARSER_MARKDOWN'))|raw }}
|
||||
{% else %}
|
||||
<p>This change has no additional notes.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<ul class="changelog__change__tags">
|
||||
{% for tag in tags %}
|
||||
<li class="changelog__change__tag"
|
||||
title="{{ tag.tag_description }}">
|
||||
<a href="/changelog.php?t={{ tag.tag_id }}" class="changelog__change__tag__link">
|
||||
{{ tag.tag_name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if change.change_text|length >= 1 %}
|
||||
{{ change.change_text|parse_text(constant('MSZ_PARSER_MARKDOWN'))|raw }}
|
||||
{% else %}
|
||||
<div class="changelog__none">
|
||||
The requested change could not be found.
|
||||
</div>
|
||||
<p>This change has no additional notes.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue