From 0661ca59184661340c9b5723c65ca181524c92ae Mon Sep 17 00:00:00 2001 From: flashwave Date: Sat, 28 Sep 2019 21:21:23 +0200 Subject: [PATCH] Goodbye background-image hacks! --- assets/less/avatar.less | 6 ++--- assets/typescript/Comments.tsx | 16 +++++++------ assets/typescript/misuzu.tsx | 27 ++++----------------- src/TwigMisuzu.php | 2 ++ templates/_layout/comments.twig | 15 +++++++----- templates/_layout/header.twig | 15 +++++++----- templates/auth/login.twig | 5 +++- templates/changelog/change.twig | 7 +++--- templates/forum/leaderboard.twig | 3 ++- templates/forum/macros.twig | 12 +++++----- templates/forum/posting.twig | 3 ++- templates/home/landing.twig | 12 +++++----- templates/macros.twig | 5 ++-- templates/manage/users/users.twig | 4 ++-- templates/news/macros.twig | 14 +++++------ templates/profile/_layout/header.twig | 12 ++++++---- templates/profile/index.twig | 2 +- templates/profile/master.twig | 2 +- templates/user/macros.twig | 19 +++++++++++---- utility.php | 34 +++++++++++++++++++++++++++ 20 files changed, 128 insertions(+), 87 deletions(-) diff --git a/assets/less/avatar.less b/assets/less/avatar.less index 9a62b3cc..1fa7ba61 100644 --- a/assets/less/avatar.less +++ b/assets/less/avatar.less @@ -2,13 +2,13 @@ flex-shrink: 0; background-color: @background-colour; background-color: var(--background-colour); - background-size: cover; - background-repeat: no-repeat; - background-position: center; display: block; border: 0; border-radius: 5%; box-sizing: content-box; box-shadow: 0 1px 4px #111; vertical-align: middle; + max-width: 100%; + max-height: 100%; + overflow: hidden; } diff --git a/assets/typescript/Comments.tsx b/assets/typescript/Comments.tsx index d147d6c8..d310178b 100644 --- a/assets/typescript/Comments.tsx +++ b/assets/typescript/Comments.tsx @@ -209,11 +209,12 @@ function commentConstruct(comment: CommentPostInfo, layer: number = 0): HTMLElem const commentElement: HTMLDivElement =
- + {comment.username} + { name: 'res', value: layer <= 1 ? 100 : 80 } + ])}/> +
+ -
-
+
+ +
diff --git a/assets/typescript/misuzu.tsx b/assets/typescript/misuzu.tsx index 29ae162c..e6c7c169 100644 --- a/assets/typescript/misuzu.tsx +++ b/assets/typescript/misuzu.tsx @@ -81,7 +81,7 @@ window.addEventListener('load', () => { if(loginForms.length > 0) { for(let i = 0; i < loginForms.length; i++) { const loginForm: HTMLFormElement = loginForms[i], - loginAvatar: HTMLElement = loginForm.getElementsByClassName('js-login-avatar')[0] as HTMLElement, + loginAvatar: HTMLImageElement = loginForm.getElementsByClassName('js-login-avatar')[0] as HTMLImageElement, loginUsername: HTMLInputElement = loginForm.getElementsByClassName('js-login-username')[0] as HTMLInputElement; // Initial bump, in case anything is prefilled. @@ -111,26 +111,9 @@ window.addEventListener('load', () => { commentsInit(); forumPostingInit(); forumPollsInit(); - - if(Math.round(Math.random() * 1000) > 900) - { - let ffxPos: number = -1000; - const ffx: HTMLElement = - Get Firefox! - ; - - const ffxInterval: number = setInterval(() => { - ffx.style.bottom = (ffxPos++).toString() + "px"; - if(ffxPos >= 10) - clearInterval(ffxInterval); - }, 100); - - document.body.append(ffx); - }}/> }); -function loginFormUpdateAvatar(avatarElement: HTMLElement, usernameElement: HTMLInputElement, force: boolean = false): void { +function loginFormUpdateAvatar(avatarElement: HTMLImageElement, usernameElement: HTMLInputElement, force: boolean = false): void { if(!force) { if(loginFormAvatarTimeout) return; @@ -148,10 +131,10 @@ function loginFormUpdateAvatar(avatarElement: HTMLElement, usernameElement: HTML if(xhr.readyState !== 4) return; - avatarElement.style.backgroundImage = "url('{0}')".replace('{0}', urlFormat('user-avatar', [ - { name: 'user', value: xhr.responseText }, + avatarElement.src = urlFormat('user-avatar', [ + { name: 'user', value: xhr.responseText.indexOf('<') !== -1 ? '0' : xhr.responseText }, { name: 'res', value: 100 }, - ])); + ]); }); xhr.open('GET', urlFormat('auth-resolve-user', [{name: 'username', value: encodeURIComponent(usernameElement.value)}])); xhr.send(); diff --git a/src/TwigMisuzu.php b/src/TwigMisuzu.php index 2e28c9f3..5878ef21 100644 --- a/src/TwigMisuzu.php +++ b/src/TwigMisuzu.php @@ -42,6 +42,8 @@ final class TwigMisuzu extends Twig_Extension { new Twig_Function('warning_has_duration', 'user_warning_has_duration'), new Twig_Function('url', 'url'), new Twig_Function('url_list', 'url_list'), + new Twig_Function('html_tag', 'html_tag'), + new Twig_Function('html_avatar', 'html_avatar'), new Twig_Function('changelog_action_name', 'changelog_action_name'), new Twig_Function('forum_may_have_children', 'forum_may_have_children'), new Twig_Function('forum_may_have_topics', 'forum_may_have_topics'), diff --git a/templates/_layout/comments.twig b/templates/_layout/comments.twig index a34f248a..c381eb5f 100644 --- a/templates/_layout/comments.twig +++ b/templates/_layout/comments.twig @@ -1,6 +1,7 @@ {% macro comments_input(category, user, perms, reply_to) %} {% set reply_mode = reply_to is not null %} + {% from 'macros.twig' import avatar %} {% from '_layout/input.twig' import input_hidden, input_csrf, input_checkbox %} -
+
+ {{ avatar(user.user_id, reply_mode ? 40 : 50, user.username) }}