Добавил прозрачности иконке загрузки, исправил кринж

Добавил прозрачности кнопке загрузки, убрал повторяющиеся классы у CSS, исправил кринж который я понаделал
This commit is contained in:
makar0nny 2023-04-30 10:28:29 +03:00
parent fe89c92d07
commit 353efccca8
3 changed files with 17 additions and 39 deletions

View file

@ -98,28 +98,28 @@
{var $avatarLink = ((is_null($avatarPhoto) ? FALSE : $avatarPhoto->isAnonymous()) ? "/photo" . ("s/" . base_convert((string) $avatarPhoto->getId(), 10, 32)) : $club->getAvatarLink())}
<div style="position:relative;width:100%;"
onmouseover="
groupAvatarChange.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
groupAvatarChange.style.opacity = '1';
avatarChange.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
avatarChange.style.opacity = '1';
_avatarDelete.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
_avatarDelete.style.opacity = '1';
deleteButton.style.opacity = '1';
deleteButton.style.opacity = '0.7';
"
onmouseleave="
groupAvatarChange.style.backgroundColor = 'rgba(0, 0, 0, 0)';
groupAvatarChange.style.opacity = '0';
avatarChange.style.backgroundColor = 'rgba(0, 0, 0, 0)';
avatarChange.style.opacity = '0';
_avatarDelete.style.backgroundColor = 'rgba(0, 0, 0, 0)';
_avatarDelete.style.opacity = '0';
deleteButton.style.opacity = '0';
">
{if !is_null($thisUser) && $club->canBeModifiedBy($thisUser)}
{if is_null($avatarPhoto) == true}
<a href="/club{$club->getId()}/edit" id="_newAvatarPicture" class="newpict">{_add_photo}</a>
<a href="/club{$club->getId()}/al_avatars" id="_newPicture" class="newpict">{_add_photo}</a>
{else}
<a id="_avatarDelete" href="/photo{$club->getAvatarPhoto()->getPrettyId()}/delete">
<img id="deleteButton" src="/assets/packages/static/openvk/img/delete.png" style="opacity:0;"></a>
<ul id="groupAvatarChange">
<img id="deleteButton" src="/assets/packages/static/openvk/img/delete.png"></a>
<ul id="avatarChange">
<li>
<img src="/assets/packages/static/openvk/img/upload.png" id="_newAvatarPicture2"><a href="/club{$club->getId()}/al_avatars" id="_newAvatarPicture" style="color:#B2B2B2;" onmouseover="_newAvatarPicture.style.color = '#D9D9D9';" onmouseleave="_newAvatarPicture.style.color = '#B2B2B2';"> {tr("new_photo")}</a>
<img src="/assets/packages/static/openvk/img/upload.png" id="uploadIcon"><a href="/club{$club->getId()}/al_avatars" id="_newPicture"> {tr("new_photo")}</a>
</li>
<!--<li><img src="/assets/packages/static/openvk/img/miniature.png"><a href="javascript:alert('')" id="_changeMiniature" style="color:#B2B2B2;" onmouseover="_changeMiniature.style.color = '#D9D9D9';" onmouseleave="_changeMiniature.style.color = '#B2B2B2';">{tr("change_miniature")}</a></li>-->
</ul>
@ -130,11 +130,10 @@
{/if}>
<img id="clubAvatar" src="{$club->getAvatarUrl('normal')}" style="width: 100%; image-rendering: -webkit-optimize-contrast;"></a>
<script>
//_newAvatarPicture.style.marginTop = clubAvatar.height-30+"px";
window.addEventListener("load", event => {
let image = clubAvatar;
groupAvatarChange.style.marginTop = image.height-33+"px";
groupAvatarChange.style.width = image.width/1.25+"px"
avatarChange.style.marginTop = image.height-33+"px";
avatarChange.style.width = image.width/1.25+"px"
});
</script>
</div>

View file

@ -74,7 +74,7 @@
{if !is_null($thisUser) && $user->getId() == $thisUser->getId()} onmouseover="
{if is_null($user->getAvatarPhoto()) == false && $user->getAvatarPhoto()->getURL() != "$serverUrl/assets/packages/static/openvk/img/camera_200.png"}
_avatarDelete.style.backgroundColor='rgba(0, 0, 0, 0.7)';
deleteButton.style.opacity='100%';
deleteButton.style.opacity='0.7';
{/if}
avatarChange.style.backgroundColor='rgba(0, 0, 0, 0.7)';
avatarChange.style.opacity='100%';
@ -82,11 +82,10 @@
onmouseleave="
{if is_null($user->getAvatarPhoto()) == false && $user->getAvatarPhoto()->getURL() != "$serverUrl/assets/packages/static/openvk/img/camera_200.png"}
_avatarDelete.style.backgroundColor='rgba(0, 0, 0, 0)';
deleteButton.style.opacity='0%';
deleteButton.style.opacity='0';
{/if}
avatarChange.style.backgroundColor='rgba(0, 0, 0, 0)';
avatarChange.style.opacity='0%';
//pizdec
avatarChange.style.opacity='0';
"{/if}>
<div n:if="!is_null($thisUser) && $user->getId() == $thisUser->getId()">
<div id="avatarEdit">

View file

@ -17,7 +17,7 @@
{
opacity:0;
}
#avatarChange, #_avatarDelete, #groupAvatarChange {
#avatarChange, #_avatarDelete, #_newPicture, #deleteButton, #_avatarDelete {
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
@ -40,6 +40,7 @@ div#avatarAll:hover #avatarChange {
}
#uploadIcon
{
opacity:75%;
position:absolute;
left:0;
margin-left:20px;
@ -63,24 +64,3 @@ div#avatarAll:hover #avatarChange {
{
color:#5680a0;
}
#groupAvatarChange
{
position:absolute;
width:100px;
background-color:rgba(51, 51, 51, 0);
list-style-type: none;
font-size:11px;
padding-top:10px;
padding-bottom:10px;
opacity:0%;
}
#_newAvatarPicture2
{
position:absolute;
left:0;
margin-left:20px;
}
#_newAvatarPicture:hover
{
color:#D9D9D9;
}