mirror of
https://github.com/prurigro/hypothetical.git
synced 2024-11-09 19:26:38 -05:00
Use the same surface to render both the default and active profile image so transparent pngs don't show the default image behind them
This commit is contained in:
parent
6afe85c2d9
commit
d7f3e449fb
3 changed files with 9 additions and 16 deletions
7
resources/assets/js/dashboard.js
vendored
7
resources/assets/js/dashboard.js
vendored
|
@ -630,7 +630,8 @@ function userProfileImageInit() {
|
||||||
$upload = $("#profile-image-upload"),
|
$upload = $("#profile-image-upload"),
|
||||||
$delete = $("#profile-image-delete"),
|
$delete = $("#profile-image-delete"),
|
||||||
$token = $("#token"),
|
$token = $("#token"),
|
||||||
$displayInner = $form.find(".image-display-inner").first();
|
$display = $form.find(".image-display").first(),
|
||||||
|
defaultImage = $display.data("default");
|
||||||
|
|
||||||
let file,
|
let file,
|
||||||
submitting = false;
|
submitting = false;
|
||||||
|
@ -660,7 +661,7 @@ function userProfileImageInit() {
|
||||||
submitting = false;
|
submitting = false;
|
||||||
|
|
||||||
if (/\.png\?version=/.test(response)) {
|
if (/\.png\?version=/.test(response)) {
|
||||||
$displayInner.css({ backgroundImage: `url(${response})` });
|
$display.css({ backgroundImage: `url(${response})` });
|
||||||
$delete.removeClass("inactive");
|
$delete.removeClass("inactive");
|
||||||
} else {
|
} else {
|
||||||
showAlert("Failed to upload image");
|
showAlert("Failed to upload image");
|
||||||
|
@ -687,7 +688,7 @@ function userProfileImageInit() {
|
||||||
}
|
}
|
||||||
}).always(function(response) {
|
}).always(function(response) {
|
||||||
if (response === "success") {
|
if (response === "success") {
|
||||||
$displayInner.css({ backgroundImage: "none" });
|
$display.css({ backgroundImage: `url(${defaultImage})` });
|
||||||
$delete.addClass("inactive");
|
$delete.addClass("inactive");
|
||||||
} else {
|
} else {
|
||||||
showAlert("Failed to delete profile image");
|
showAlert("Failed to delete profile image");
|
||||||
|
|
11
resources/assets/sass/dashboard.scss
vendored
11
resources/assets/sass/dashboard.scss
vendored
|
@ -820,17 +820,6 @@ body {
|
||||||
background-position: center center;
|
background-position: center center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
&-inner {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-position: center center;
|
|
||||||
background-size: cover;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-buttons {
|
.image-buttons {
|
||||||
|
|
|
@ -10,9 +10,12 @@
|
||||||
<div class="col-12 col-md-8">
|
<div class="col-12 col-md-8">
|
||||||
<form id="user-profile-image" class="edit-item user-profile-image">
|
<form id="user-profile-image" class="edit-item user-profile-image">
|
||||||
@set('profile_image', $user->profileImage())
|
@set('profile_image', $user->profileImage())
|
||||||
|
@set('default_image', App\User::$default_profile_image)
|
||||||
|
|
||||||
<div class="image-display" style="background-image: url('{{ App\User::$default_profile_image }}')">
|
<div
|
||||||
<div class="image-display-inner" style="background-image: url('{{ $profile_image !== null ? $profile_image : App\User::$default_profile_image }}')"></div>
|
class="image-display"
|
||||||
|
style="background-image: url('{{ $profile_image !== null ? $profile_image : $default_image }}')"
|
||||||
|
data-default="{{ $default_image }}">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="image-buttons">
|
<div class="image-buttons">
|
||||||
|
|
Loading…
Reference in a new issue