diff --git a/assets/less/classes/profile/guidelines.less b/assets/less/classes/profile/guidelines.less new file mode 100644 index 00000000..3138d2bc --- /dev/null +++ b/assets/less/classes/profile/guidelines.less @@ -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; + } + } +} diff --git a/assets/less/main.less b/assets/less/main.less index f3794dbc..6dfa81ec 100644 --- a/assets/less/main.less +++ b/assets/less/main.less @@ -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"; diff --git a/public/profile.php b/public/profile.php index ef33abbf..befb492a 100644 --- a/public/profile.php +++ b/public/profile.php @@ -139,6 +139,15 @@ switch ($mode) { tpl_vars([ 'friend_info' => $friendInfo, ]); + + if ($isEditing) { + tpl_vars([ + 'guidelines' => [ + 'avatar' => $app->getAvatarProps(), + 'background' => $app->getBackgroundProps(), + ], + ]); + } } tpl_vars([ diff --git a/templates/user/profile.twig b/templates/user/profile.twig index efee628c..bf2c624f 100644 --- a/templates/user/profile.twig +++ b/templates/user/profile.twig @@ -71,11 +71,46 @@ {% include 'user/_layout/header.twig' %} -
-
- The profile pages are still under much construction, more things will eventually populate the area where this container current exists. + {% if is_editing %} +
+
+ Guidelines +
+ +
+
    +
  • General
  • +
  • Keep things sane and generally suitable for all ages.
  • +
  • Make sure to adhere to the rules.
  • +
+ + {% if perms.edit_avatar %} +
    +
  • Avatar
  • +
  • May not exceed the {{ guidelines.avatar.max_size|byte_symbol(true) }} file size limit.
  • +
  • May not be larger than {{ guidelines.avatar.max_width }}x{{ guidelines.avatar.max_height }}.
  • +
  • Will be centre cropped and scaled to 200x200.
  • +
  • Animated gif images are allowed.
  • +
+ {% endif %} + + {% if perms.edit_background %} +
    +
  • Background
  • +
  • May not exceed the {{ guidelines.background.max_size|byte_symbol(true) }} file size limit.
  • +
  • May not be larger than {{ guidelines.background.max_width }}x{{ guidelines.background.max_height }}.
  • +
  • Gif images, in general, are only allowed when tiling.
  • +
+ {% endif %} +
-
+ {% else %} +
+
+ The profile pages are still under much construction, more things will eventually populate the area where this container current exists. +
+
+ {% endif %}