diff --git a/assets/less/mio/classes/avatar.less b/assets/less/mio/classes/avatar.less index f7025824..56786dca 100644 --- a/assets/less/mio/classes/avatar.less +++ b/assets/less/mio/classes/avatar.less @@ -8,4 +8,5 @@ border: 1px solid #9475b2; max-height: 200px; max-width: 200px; + box-sizing: content-box; } diff --git a/assets/less/mio/classes/settings/avatar.less b/assets/less/mio/classes/settings/avatar.less index 4027df0e..fdbe540a 100644 --- a/assets/less/mio/classes/settings/avatar.less +++ b/assets/less/mio/classes/settings/avatar.less @@ -1,37 +1,15 @@ -@mio-settings-avatar-mobile: 700px; - .settings__avatar { - display: flex; - min-height: 200px; - justify-content: space-between; + text-align: center; + display: block; - @media (max-width: @mio-settings-avatar-mobile) { - flex-direction: column-reverse; - - &__sections { - text-align: center; - } + &__label { + cursor: pointer; + display: block; + width: 202px; } - &__form { - display: inline-block; - margin-bottom: 2px; - } - - &__requirements { - text-align: left; - display: inline-block; - border: 3px double #9475b2; - padding: .5em 2em; - - &__list { - list-style: square; - } - } - - &__forms { - padding-top: 2px; - flex-grow: 1; + &__input { + display: none; } &__preview { @@ -39,10 +17,56 @@ flex-shrink: 0; min-width: 200px; min-height: 200px; - display: inline-block; + } - &__container { - text-align: center; + &__name { + background-color: #9475b2; + color: #306; + text-overflow: ellipsis; + overflow: hidden; + padding: 0 4px; + border-bottom: 1px solid #306; + } + + &__buttons { + display: flex; + } + + &__button { + flex: 1 1 auto; + border-width: 0; + padding: 5px; + cursor: pointer; + font-family: inherit; + background-color: #9475b2; + color: #306; + font-weight: 700; + + &:not(&--disabled) { + &:hover { + background-color: #a586c3; + } + + &:active { + background-color: #8364a1; + } + } + + &--delete:not(&--disabled) { + &:hover { + background-color: #b00; + color: #400; + } + + &:active { + background-color: #900; + color: #400; + } + } + + &--disabled { + background-color: #888; + color: #222; } } } diff --git a/assets/less/mio/classes/settings/content.less b/assets/less/mio/classes/settings/content.less index 657d189c..caad50bd 100644 --- a/assets/less/mio/classes/settings/content.less +++ b/assets/less/mio/classes/settings/content.less @@ -5,7 +5,7 @@ margin: 1px; } - &--avatar { + &--images { margin: 2px; } } diff --git a/assets/less/mio/classes/settings/images.less b/assets/less/mio/classes/settings/images.less new file mode 100644 index 00000000..fd76eb66 --- /dev/null +++ b/assets/less/mio/classes/settings/images.less @@ -0,0 +1,34 @@ +@mio-settings-images-mobile: 700px; + +.settings__images { + display: flex; + min-height: 200px; + justify-content: space-between; + + @media (max-width: @mio-settings-images-mobile) { + flex-direction: column-reverse; + + &__sections { + text-align: center; + } + } + + &__requirements { + text-align: left; + display: inline-block; + border: 3px double #9475b2; + padding: .5em 2em; + + &__list { + list-style: square; + } + } + + &__requirement { + &--header { + font-weight: 700; + list-style: none; + margin-left: -1em; + } + } +} diff --git a/assets/less/mio/main.less b/assets/less/mio/main.less index 54204c48..1df927c8 100644 --- a/assets/less/mio/main.less +++ b/assets/less/mio/main.less @@ -61,6 +61,7 @@ body { @import "classes/settings/errors"; @import "classes/settings/pagination"; @import "classes/settings/account"; +@import "classes/settings/images"; @import "classes/settings/avatar"; @import "classes/settings/login-history"; @import "classes/settings/sessions"; diff --git a/public/settings.php b/public/settings.php index 9766d186..8529dde3 100644 --- a/public/settings.php +++ b/public/settings.php @@ -17,7 +17,7 @@ $settingsModes = [ 'title' => 'Account', 'allow' => perms_check($userPerms, MSZ_USER_PERM_EDIT_PROFILE), ], - 'avatar' => [ + 'images' => [ 'title' => 'Avatar', 'allow' => perms_check($userPerms, MSZ_USER_PERM_CHANGE_AVATAR), ], @@ -32,6 +32,11 @@ $settingsModes = [ ]; $settingsMode = $_GET['m'] ?? null; +if ($settingsMode === 'avatar') { + header('Location: ?m=images'); + return; +} + $settingsNavigation = []; foreach ($settingsModes as $key => $value) { @@ -223,51 +228,55 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') { } break; - case 'avatar': - if (isset($_POST['delete'])) { - if (!tmp_csrf_verify($_POST['delete'])) { - $settingsErrors[] = $csrfErrorString; - break; - } - - user_avatar_delete($app->getUserId()); + case 'images': + if (!tmp_csrf_verify($_POST['csrf'] ?? '')) { + $settingsErrors[] = $csrfErrorString; break; } - if (isset($_POST['upload'])) { - if (!tmp_csrf_verify($_POST['upload'])) { - $settingsErrors[] = $csrfErrorString; - break; - } + if (!empty($_POST['avatar']) && is_array($_POST['avatar']) && !empty($_POST['avatar']['mode'])) { + switch ($_POST['avatar']['mode']) { + case 'delete': + user_avatar_delete($app->getUserId()); + break; - if ($_FILES['avatar']['error'] !== UPLOAD_ERR_OK) { - $settingsErrors[] = sprintf( - $avatarErrorStrings['upload'][$_FILES['avatar']['error']] - ?? $avatarErrorStrings['upload']['default'], - $_FILES['avatar']['error'], - byte_symbol($avatarFileSizeMax, true), - $avatarWidthMax, - $avatarHeightMax - ); - break; - } + case 'upload': + if (empty($_FILES['avatar']) + || !is_array($_FILES['avatar']) + || empty($_FILES['avatar']['name']['file'])) { + break; + } - $setAvatar = user_avatar_set_from_path($app->getUserId(), $_FILES['avatar']['tmp_name']); + if ($_FILES['avatar']['error']['file'] !== UPLOAD_ERR_OK) { + $settingsErrors[] = sprintf( + $avatarErrorStrings['upload'][$_FILES['avatar']['error']['file']] + ?? $avatarErrorStrings['upload']['default'], + $_FILES['avatar']['error']['file'], + byte_symbol($avatarFileSizeMax, true), + $avatarWidthMax, + $avatarHeightMax + ); + break; + } - if ($setAvatar !== MSZ_USER_AVATAR_NO_ERRORS) { - $settingsErrors[] = sprintf( - $avatarErrorStrings['set'][$setAvatar] - ?? $avatarErrorStrings['set']['default'], - $setAvatar, - byte_symbol($avatarFileSizeMax, true), - $avatarWidthMax, - $avatarHeightMax - ); + $setAvatar = user_avatar_set_from_path( + $app->getUserId(), + $_FILES['avatar']['tmp_name']['file'] + ); + + if ($setAvatar !== MSZ_USER_AVATAR_NO_ERRORS) { + $settingsErrors[] = sprintf( + $avatarErrorStrings['set'][$setAvatar] + ?? $avatarErrorStrings['set']['default'], + $setAvatar, + byte_symbol($avatarFileSizeMax, true), + $avatarWidthMax, + $avatarHeightMax + ); + } + break; } - break; } - - $settingsErrors[] = "You shouldn't have done that."; break; case 'sessions': @@ -327,7 +336,7 @@ switch ($settingsMode) { ]); break; - case 'avatar': + case 'images': $userHasAvatar = File::exists($app->getStore('avatars/original')->filename($avatarFileName)); $tpl->vars([ 'avatar_user_id' => $app->getUserId(), diff --git a/views/mio/master.twig b/views/mio/master.twig index f5680e47..b62b324f 100644 --- a/views/mio/master.twig +++ b/views/mio/master.twig @@ -32,7 +32,7 @@
Hey, {{ current_user.username }}!
- +
    diff --git a/views/mio/settings/avatar.twig b/views/mio/settings/avatar.twig deleted file mode 100644 index c1cf69cc..00000000 --- a/views/mio/settings/avatar.twig +++ /dev/null @@ -1,42 +0,0 @@ -{% extends '@mio/settings/master.twig' %} - -{% block settings_content %} -
    -
    -
    -
      -
    • Your avatar may not be larger than {{ avatar_max_width }}x{{ avatar_max_height }}.
      • -
    • The avatar will be centre cropped to be 200x200.
      • -
    • Your avatar may not exceed the {{ avatar_max_filesize|byte_symbol(true) }} filesize limit.
      • -
    • Animated gif images are allowed.
      • -
    • Keep things sane and suitable for all ages.
      • -
    -
    -
    -
    - - - -
    - -
    - -
    -
    -
    -
    -
    -
    -
    - -{% endblock %} diff --git a/views/mio/settings/images.twig b/views/mio/settings/images.twig new file mode 100644 index 00000000..9963c689 --- /dev/null +++ b/views/mio/settings/images.twig @@ -0,0 +1,77 @@ +{% extends '@mio/settings/master.twig' %} + +{% block settings_content %} +
    + + + +
    +
    +
      +
    • Guidelines
      • +
    • Keep things sane and suitable for all ages.
      • +
    • Image may not exceed the {{ avatar_max_filesize|byte_symbol(true) }} filesize limit.
      • +
    • Avatar
      • +
    • May not be larger than {{ avatar_max_width }}x{{ avatar_max_height }}.
      • +
    • Will be centre cropped to be 200x200.
      • +
    • Animated gif images are allowed.
      • +
    +
    +
    + +
    + + +
    + + +
    +
    +
    + +{% endblock %}