flashii/misuzu
flashii/misuzu
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Display guidelines section on profile in edit mode.

Browse source
This commit is contained in:
flash 2018-09-27 08:39:49 +02:00
parent bdff37233e
commit 1d223ae0e5
4 changed files with 95 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
assets/less/classes/profile/guidelines.less Normal file
View file

@ -0,0 +1,46 @@
.profile__guidelines {
margin-bottom: 2px;
&__content {
display: flex;
flex-wrap: auto;
justify-content: space-evenly;
padding: 2px;
}
&__section {
width: 100%;
list-style: none;
}
&__line {
padding: 1px;
&--header {
font-size: 1.2em;
line-height: 1.5em;
font-weight: 700;
margin-bottom: 2px;
border-bottom: 1px solid var(--accent-colour);
padding-bottom: 2px;
}
&:not(&--header) {
margin-left: 1.3em;
list-style: square;
}
}
&__emphasis {
font-weight: 700;
}
&__link {
color: inherit;
text-decoration: underline dotted;
&:hover {
text-decoration: underline;
}
}
}

1
assets/less/main.less
View file

@ -100,6 +100,7 @@ body {
@import "classes/profile/header";
@import "classes/profile/accounts";
@import "classes/profile/about";
@import "classes/profile/guidelines";
// Changelog
@import "classes/changelog";

9
public/profile.php
View file

@ -139,6 +139,15 @@ switch ($mode) {
tpl_vars([
'friend_info' => $friendInfo,
]);
if ($isEditing) {
tpl_vars([
'guidelines' => [
'avatar' => $app->getAvatarProps(),
'background' => $app->getBackgroundProps(),
],
]);
}
}
tpl_vars([

43
templates/user/profile.twig
View file

@ -71,11 +71,46 @@
{% include 'user/_layout/header.twig' %}
<div class="warning">
<div class="warning__content">
The profile pages are still under much construction, more things will eventually populate the area where this container current exists.
{% if is_editing %}
<div class="container container--new profile__guidelines">
<div class="container__title">
Guidelines
</div>
<div class="profile__guidelines__content">
<ul class="profile__guidelines__section">
<li class="profile__guidelines__line profile__guidelines__line--header">General</li>
<li class="profile__guidelines__line">Keep things sane and generally suitable for all ages.</li>
<li class="profile__guidelines__line">Make sure to adhere to the <a href="/info.php/rules" class="profile__guidelines__link">rules</a>.</li>
</ul>
{% if perms.edit_avatar %}
<ul class="profile__guidelines__section">
<li class="profile__guidelines__line profile__guidelines__line--header">Avatar</li>
<li class="profile__guidelines__line">May not exceed the <span class="profile__guidelines__emphasis">{{ guidelines.avatar.max_size|byte_symbol(true) }}</span> file size limit.</li>
<li class="profile__guidelines__line">May not be larger than <span class="profile__guidelines__emphasis">{{ guidelines.avatar.max_width }}x{{ guidelines.avatar.max_height }}</span>.</li>
<li class="profile__guidelines__line">Will be centre cropped and scaled to <span class="profile__guidelines__emphasis">200x200</span>.</li>
<li class="profile__guidelines__line">Animated gif images are allowed.</li>
</ul>
{% endif %}
{% if perms.edit_background %}
<ul class="profile__guidelines__section">
<li class="profile__guidelines__line profile__guidelines__line--header">Background</li>
<li class="profile__guidelines__line">May not exceed the <span class="profile__guidelines__emphasis">{{ guidelines.background.max_size|byte_symbol(true) }}</span> file size limit.</li>
<li class="profile__guidelines__line">May not be larger than <span class="profile__guidelines__emphasis">{{ guidelines.background.max_width }}x{{ guidelines.background.max_height }}</span>.</li>
<li class="profile__guidelines__line">Gif images, in general, are only allowed when tiling.</li>
</ul>
{% endif %}
</div>
</div>
</div>
{% else %}
<div class="warning">
<div class="warning__content">
The profile pages are still under much construction, more things will eventually populate the area where this container current exists.
</div>
</div>
{% endif %}
<div class="profile__container">
<div class="profile__container__side">