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

Добавил прозрачности кнопке загрузки, убрал повторяющиеся классы у 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())} {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%;" <div style="position:relative;width:100%;"
onmouseover=" onmouseover="
groupAvatarChange.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; avatarChange.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
groupAvatarChange.style.opacity = '1'; avatarChange.style.opacity = '1';
_avatarDelete.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; _avatarDelete.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
_avatarDelete.style.opacity = '1'; _avatarDelete.style.opacity = '1';
deleteButton.style.opacity = '1'; deleteButton.style.opacity = '0.7';
" "
onmouseleave=" onmouseleave="
groupAvatarChange.style.backgroundColor = 'rgba(0, 0, 0, 0)'; avatarChange.style.backgroundColor = 'rgba(0, 0, 0, 0)';
groupAvatarChange.style.opacity = '0'; avatarChange.style.opacity = '0';
_avatarDelete.style.backgroundColor = 'rgba(0, 0, 0, 0)'; _avatarDelete.style.backgroundColor = 'rgba(0, 0, 0, 0)';
_avatarDelete.style.opacity = '0'; _avatarDelete.style.opacity = '0';
deleteButton.style.opacity = '0'; deleteButton.style.opacity = '0';
"> ">
{if !is_null($thisUser) && $club->canBeModifiedBy($thisUser)} {if !is_null($thisUser) && $club->canBeModifiedBy($thisUser)}
{if is_null($avatarPhoto) == true} {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} {else}
<a id="_avatarDelete" href="/photo{$club->getAvatarPhoto()->getPrettyId()}/delete"> <a id="_avatarDelete" href="/photo{$club->getAvatarPhoto()->getPrettyId()}/delete">
<img id="deleteButton" src="/assets/packages/static/openvk/img/delete.png" style="opacity:0;"></a> <img id="deleteButton" src="/assets/packages/static/openvk/img/delete.png"></a>
<ul id="groupAvatarChange"> <ul id="avatarChange">
<li> <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>
<!--<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>--> <!--<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> </ul>
@ -130,11 +130,10 @@
{/if}> {/if}>
<img id="clubAvatar" src="{$club->getAvatarUrl('normal')}" style="width: 100%; image-rendering: -webkit-optimize-contrast;"></a> <img id="clubAvatar" src="{$club->getAvatarUrl('normal')}" style="width: 100%; image-rendering: -webkit-optimize-contrast;"></a>
<script> <script>
//_newAvatarPicture.style.marginTop = clubAvatar.height-30+"px";
window.addEventListener("load", event => { window.addEventListener("load", event => {
let image = clubAvatar; let image = clubAvatar;
groupAvatarChange.style.marginTop = image.height-33+"px"; avatarChange.style.marginTop = image.height-33+"px";
groupAvatarChange.style.width = image.width/1.25+"px" avatarChange.style.width = image.width/1.25+"px"
}); });
</script> </script>
</div> </div>

View file

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

View file

@ -17,7 +17,7 @@
{ {
opacity:0; opacity:0;
} }
#avatarChange, #_avatarDelete, #groupAvatarChange { #avatarChange, #_avatarDelete, #_newPicture, #deleteButton, #_avatarDelete {
-webkit-transition: all 200ms ease-in-out; -webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out;
@ -40,6 +40,7 @@ div#avatarAll:hover #avatarChange {
} }
#uploadIcon #uploadIcon
{ {
opacity:75%;
position:absolute; position:absolute;
left:0; left:0;
margin-left:20px; margin-left:20px;
@ -63,24 +64,3 @@ div#avatarAll:hover #avatarChange {
{ {
color:#5680a0; 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;
}