diff --git a/assets/less/animations.less b/assets/less/animations.less new file mode 100644 index 00000000..87216d9d --- /dev/null +++ b/assets/less/animations.less @@ -0,0 +1,9 @@ +@keyframes background-slide { + 0% { + background-position: 0 0; + } + + 100% { + background-position: var(--background-width) var(--background-height); + } +} diff --git a/assets/less/classes/input/select.less b/assets/less/classes/input/select.less index 0f04365d..2bc19fb4 100644 --- a/assets/less/classes/input/select.less +++ b/assets/less/classes/input/select.less @@ -1,4 +1,5 @@ .input__select { + margin: 1px 0; border: 1px solid #222; padding: 5px 10px; background: #222; diff --git a/assets/less/classes/input/upload.less b/assets/less/classes/input/upload.less index 83a2aa5d..c99c1f21 100644 --- a/assets/less/classes/input/upload.less +++ b/assets/less/classes/input/upload.less @@ -1,7 +1,31 @@ .input__upload { - display: none; + display: inline-block; + cursor: pointer; + margin: 1px 0; - &__label { - .input__button(); + &__input { + display: inline-block; + position: absolute; + z-index: -1000; + } + + &__selection { + text-align: center; + font-size: 1.2em; + border: 1px solid #222; + padding: 5px 10px; + background: #222; + color: #fff; + border-radius: 2px; + box-shadow: inset 0 0 4px #111; + transition: border-color .2s; + overflow: none; + word-wrap: break-word; + } + + &:focus-within &__selection, + &__input:focus ~ &__selection, + &__input:active ~ &__selection { + border-color: var(--accent-colour); } } diff --git a/assets/less/main.less b/assets/less/main.less index f4a64887..f2217863 100644 --- a/assets/less/main.less +++ b/assets/less/main.less @@ -39,6 +39,7 @@ body { background-color: var(--background-colour); font: 12px/20px @mio-font-regular; color: var(--text-colour); + background-attachment: fixed; &__wrapper { max-width: var(--site-max-width); @@ -48,26 +49,34 @@ body { } &--bg-blend { + background-color: var(--accent-colour); background-blend-mode: multiply; } - /*&--bg-slide { - }*/ + &--bg-slide { + animation: background-slide infinite linear 2s; + } &--bg-cover { - background-repeat: no-repeat; + background-size: cover; + } + + &--bg-contain { + background-size: contain; } &--bg-stretch { background-size: 100% 100%; - background-repeat: no-repeat; } &--bg-tile { - background-repeat: repeat; + background-size: auto; } } +// Misc +@import "animations"; + // Input elements @import "classes/input/button"; @import "classes/input/select"; diff --git a/public/profile.php b/public/profile.php index c993e045..b8c2860c 100644 --- a/public/profile.php +++ b/public/profile.php @@ -262,7 +262,7 @@ switch ($mode) { SELECT u.`user_id`, u.`username`, u.`user_country`, u.`created_at`, u.`last_seen`, - u.`user_about_parser`, u.`user_about_content`, + u.`user_about_parser`, u.`user_about_content`, u.`user_background_settings`, %1$s, COALESCE(u.`user_title`, r.`role_title`) as `user_title`, COALESCE(u.`user_colour`, r.`role_colour`) as `user_colour`, @@ -303,13 +303,27 @@ switch ($mode) { $getProfile->bindValue('user_id', $userId); $profile = $getProfile->execute() ? $getProfile->fetch(PDO::FETCH_ASSOC) : []; + $backgroundPath = build_path(MSZ_STORAGE, 'backgrounds/original', "{$profile['user_id']}.msz"); + + if (is_file($backgroundPath)) { + $backgroundInfo = getimagesize($backgroundPath); + + if ($backgroundInfo) { + tpl_var('site_background', [ + 'url' => "/profile.php?m=background&u={$userId}", + 'width' => $backgroundInfo[0], + 'height' => $backgroundInfo[1], + 'settings' => $profile['user_background_settings'], + ]); + } + } + echo tpl_render('user.profile', [ 'profile' => $profile, 'profile_notices' => $notices, 'can_edit' => $canEdit, 'is_editing' => $isEditing, 'profile_fields' => user_session_active() ? user_profile_fields_display($profile, !$isEditing) : [], - 'has_background' => is_file(build_path(MSZ_STORAGE, 'backgrounds/original', "{$profile['user_id']}.msz")), 'friend_info' => user_session_active() ? user_relation_info(user_session_current('user_id', 0), $profile['user_id']) : [], ]); break; diff --git a/src/Users/background.php b/src/Users/background.php index 5e339f7e..9f52ad82 100644 --- a/src/Users/background.php +++ b/src/Users/background.php @@ -10,18 +10,21 @@ define('MSZ_USER_BACKGROUND_ATTACHMENT_NONE', 0); define('MSZ_USER_BACKGROUND_ATTACHMENT_COVER', 1); define('MSZ_USER_BACKGROUND_ATTACHMENT_STRETCH', 2); define('MSZ_USER_BACKGROUND_ATTACHMENT_TILE', 3); +define('MSZ_USER_BACKGROUND_ATTACHMENT_CONTAIN', 4); define('MSZ_USER_BACKGROUND_ATTACHMENTS', [ MSZ_USER_BACKGROUND_ATTACHMENT_NONE, MSZ_USER_BACKGROUND_ATTACHMENT_COVER, MSZ_USER_BACKGROUND_ATTACHMENT_STRETCH, MSZ_USER_BACKGROUND_ATTACHMENT_TILE, + MSZ_USER_BACKGROUND_ATTACHMENT_CONTAIN, ]); define('MSZ_USER_BACKGROUND_ATTACHMENTS_NAMES', [ MSZ_USER_BACKGROUND_ATTACHMENT_COVER => 'cover', MSZ_USER_BACKGROUND_ATTACHMENT_STRETCH => 'stretch', MSZ_USER_BACKGROUND_ATTACHMENT_TILE => 'tile', + MSZ_USER_BACKGROUND_ATTACHMENT_CONTAIN => 'contain', ]); define('MSZ_USER_BACKGROUND_ATTRIBUTE_BLEND', 0x10); @@ -80,9 +83,11 @@ function user_background_delete(int $userId): void define('MSZ_USER_BACKGROUND_TYPE_PNG', IMAGETYPE_PNG); define('MSZ_USER_BACKGROUND_TYPE_JPG', IMAGETYPE_JPEG); +define('MSZ_USER_BACKGROUND_TYPE_GIF', IMAGETYPE_GIF); define('MSZ_USER_BACKGROUND_TYPES', [ MSZ_USER_BACKGROUND_TYPE_PNG, MSZ_USER_BACKGROUND_TYPE_JPG, + MSZ_USER_BACKGROUND_TYPE_GIF, ]); function user_background_is_allowed_type(int $type): bool diff --git a/templates/_layout/comments.twig b/templates/_layout/comments.twig index 15da4aab..cfb8dbeb 100644 --- a/templates/_layout/comments.twig +++ b/templates/_layout/comments.twig @@ -44,6 +44,8 @@ {% endmacro %} {% macro comments_entry(comment, indent, category, user, perms) %} + {% from '_layout/input.twig' import input_checkbox_raw %} + {% if comment.comment_deleted is null or comment.comment_replies|length > 0 %}
@@ -114,7 +116,7 @@
{% from _self import comments_entry, comments_input %} {% if user|default(null) is not null and category|default(null) is not null and perms|default(null) is not null and perms.can_comment %} - + {{ input_checkbox_raw('', false, 'comment__reply-toggle', '', false, {'id':'comment-reply-toggle-' ~ comment.comment_id}) }} {{ comments_input(category, user, perms, comment) }} {% endif %} {% if comment.comment_replies is defined and comment.comment_replies|length > 0 %} diff --git a/templates/_layout/header.twig b/templates/_layout/header.twig index 173012d4..6b4525f3 100644 --- a/templates/_layout/header.twig +++ b/templates/_layout/header.twig @@ -1,3 +1,4 @@ +{% from '_layout/input.twig' import input_checkbox_raw %} {% set in_manage = manage_menu is defined %}
- + {{ input_checkbox_raw('', false, 'header__menu-toggle', '', false, {'id':'toggle-mobile-header-menu'}) }} - + {{ input_checkbox_raw('', false, 'header__user-toggle', '', false, {'id':'toggle-mobile-header-user'}) }}
{% if current_user is defined %} - 0 %}name="{{ name }}"{% endif %} {% if checked %}checked{% endif %} - {% if value|length > 0 %}value="{{ value }}"{% endif %}> + {% if value|length > 0 %}value="{{ value }}"{% endif %} + {% for name, value in attributes|default([]) %} + {{ name }}{% if value|length > 0 %}="{{ value }}"{% endif %} + {% endfor %}> +{% endspaceless %} +{% endmacro %} + +{% macro input_checkbox(name, text, checked, class, value, radio, attributes) %} +{% from _self import input_checkbox_raw %} +{% spaceless %} + {% endspaceless %} {% endmacro %} + +{% macro input_file_raw(name, class, accepts, attributes) %} +{% spaceless %} + 0 %}name="{{ name }}"{% endif %} + class="{{ class|length > 0 ? class : 'input__upload__input' }}" + {% if accepts|length > 0 %}accept="{{ accepts|join(',') }}"{% endif %} + {% for name, value in attributes|default([]) %} + {{ name }}{% if value|length > 0 %}="{{ value }}"{% endif %} + {% endfor %}> +{% endspaceless %} +{% endmacro %} + +{% macro input_file(name, class, accepts, attributes) %} +{% from _self import input_file_raw %} +{% spaceless %} + +{% endspaceless %} +{% endmacro %} diff --git a/templates/manage/users/view.twig b/templates/manage/users/view.twig index c073036b..20add17a 100644 --- a/templates/manage/users/view.twig +++ b/templates/manage/users/view.twig @@ -1,7 +1,7 @@ {% extends 'manage/users/master.twig' %} {% from 'macros.twig' import container_title %} {% from 'manage/macros.twig' import permissions_table %} -{% from '_layout/input.twig' import input_csrf, input_text, input_checkbox %} +{% from '_layout/input.twig' import input_csrf, input_text, input_checkbox, input_file %} {% set site_link = '/profile.php?u=' ~ view_user.user_id %} @@ -76,7 +76,7 @@ diff --git a/templates/master.twig b/templates/master.twig index 39c2e5eb..7d344a44 100644 --- a/templates/master.twig +++ b/templates/master.twig @@ -6,17 +6,19 @@ {% include '_layout/meta.twig' %} - {% if site_background_url is defined %} + {% if site_background is defined %} {% endif %} {% include '_layout/header.twig' %} diff --git a/templates/user/_layout/header.twig b/templates/user/_layout/header.twig index eab0d5a1..6efd00d9 100644 --- a/templates/user/_layout/header.twig +++ b/templates/user/_layout/header.twig @@ -1,7 +1,8 @@ +{% from '_layout/input.twig' import input_checkbox_raw %} +
- {% if is_editing and perms.edit_avatar %}
{% endif %}