diff --git a/resources/assets/less/yuuno/bem/profile.less b/resources/assets/less/yuuno/bem/profile.less index 91141f6..8e0561f 100644 --- a/resources/assets/less/yuuno/bem/profile.less +++ b/resources/assets/less/yuuno/bem/profile.less @@ -17,17 +17,6 @@ display: flex; align-items: center; - &:not(:first-child) { - // hackjob - pointer-events: none; - position: relative; - top: -100%; - } - - > * { - pointer-events: auto; - } - @media (max-width: 1064px) { background: rgba(211, 191, 255, .5); flex-flow: column; diff --git a/resources/assets/less/yuuno/bem/uploader.less b/resources/assets/less/yuuno/bem/uploader.less index 54c2b1f..5201b9e 100644 --- a/resources/assets/less/yuuno/bem/uploader.less +++ b/resources/assets/less/yuuno/bem/uploader.less @@ -1,25 +1,23 @@ -.uploader__label { +.uploader { display: block; - text-align: right; - width: 100%; - height: 100%; color: #fff; - font-size: 3em; - line-height: 1.4em; - transition: background .2s; - cursor: pointer; + background: fade(#000, 80%); + position: absolute; + right: 4px; + top: 4px; + padding: 2px; + border-radius: 6px; + font-size: 16px; - &:hover { - background: fade(#000, 50%); + &__change { + display: none; + } - &:before { - margin: 10px; - font-family: FontAwesome; - content: "\f044"; - } + &__button { + border-width: 0; + background: transparent; + color: #fff; + cursor: pointer; + padding: 4px; } } - -.uploader { - display: none; -} diff --git a/resources/views/yuuno/macros.twig b/resources/views/yuuno/macros.twig new file mode 100644 index 0000000..ff95237 --- /dev/null +++ b/resources/views/yuuno/macros.twig @@ -0,0 +1,8 @@ +{% macro profile_image_changer(url, query) %} +
+ + +
+{% endmacro %} diff --git a/resources/views/yuuno/user/profile.twig b/resources/views/yuuno/user/profile.twig index c37fea2..47f63d6 100644 --- a/resources/views/yuuno/user/profile.twig +++ b/resources/views/yuuno/user/profile.twig @@ -1,4 +1,5 @@ {% extends 'master.twig' %} +{% from 'macros.twig' import profile_image_changer as pic %} {% set profileHidden = profile.id == 0 or not profile.activated and (user.id != profile.id and not (user.perms.isMod or user.perms.isAdmin)) %} {% set noUserpage = profile.userPage|length < 1 %} @@ -138,16 +139,16 @@ newMode.className = 'profile-mode-current'; } - function handleImageChange(elem, cont) { - var ajax = new Sakura.AJAX(), - target = elem.getAttribute('data-target'), - formData = new FormData(), - file = elem.files[0]; + function handleImageChange(file, url, query) { + var ajax = new Sakura.AJAX, + formData = new FormData; formData.append('session', Sakura.Config.SessionId); formData.append('file', file, file.name); + ajax.SetFormData(formData); - ajax.SetUrl(target); + ajax.SetUrl(url); + ajax.AddCallback(200, function () { var result = ajax.JSON(); @@ -156,12 +157,48 @@ diag.Title = "Error"; diag.Text = result.error; diag.Display(); + } else { + refreshImage(url, query); } - - cont.style.backgroundImage = "url('" + target + "?" + Date.now() + ")"; }); + ajax.Start(Sakura.HTTPMethod.POST); } + + function handleImageDelete(url, query) { + var confirm = new Sakura.Dialogue; + + confirm.SetType(Sakura.DialogueType.ConfirmNegative); + confirm.Title = "Deleting image"; + confirm.Text = "Are you sure?"; + + confirm.AddCallback(Sakura.DialogueButton.Yes, function () { + var client = new Sakura.AJAX; + client.SetUrl(url + "?session=" + Sakura.Config.SessionId); + client.AddCallback(200, function () { + refreshImage(url, query); + }); + client.Start(Sakura.HTTPMethod.DELETE); + this.Close(); + }); + + confirm.Display(); + } + + function refreshImage(url, query) { + var elements = document.querySelectorAll(query); + + for (var i = 0; i < elements.length; i++) { + var element = elements[i], + url = url + "?" + Date.now(); + + if (element.tagName === "IMG") { + element.src = url; + } else { + element.style.backgroundImage = "url('" + url + ")"; + } + } + } {% endif %} {% endblock %} @@ -181,20 +218,19 @@ {% else %} + {% if (user.id == profile.id and not user.restricted and user.activated and user.perms.changeBackground) or user.perms.manageProfileImages %} + {{ pic(route('user.background', profile.id), '.container') }} + {% endif %}
- {% if (user.id == profile.id and not user.restricted and user.activated and user.perms.changeHeader) or user.perms.manageProfileImages %} - - {% endif %}
+ {% if (user.id == profile.id and not user.restricted and user.activated and user.perms.changeHeader) or user.perms.manageProfileImages %} + {{ pic(route('user.header', profile.id), '.profile__header') }} + {% endif %}
{% if (user.id == profile.id and not user.restricted and user.activated and user.perms.changeAvatar) or user.perms.manageProfileImages %} - + {{ pic(route('user.avatar', profile.id), '.avatar') }} {% endif %}
@@ -203,21 +239,21 @@
{% spaceless %} -
- Joined  -
-
- {% if profile.lastOnline < 1 %} - {{ profile.username }} hasn't logged in yet. - {% else %} - Last online  - {% endif %} -
- {% if profile.birthday != '0000-00-00' and profile.birthday|split('-')[0] > 0 %}
- Age {{ profile.birthday(true) }} years old + Joined 
- {% endif %} +
+ {% if profile.lastOnline < 1 %} + {{ profile.username }} hasn't logged in yet. + {% else %} + Last online  + {% endif %} +
+ {% if profile.birthday != '0000-00-00' and profile.birthday|split('-')[0] > 0 %} +
+ Age {{ profile.birthday(true) }} years old +
+ {% endif %} {% endspaceless %}