Поправил css и добавил нужные отступы

This commit is contained in:
makar0nny 2023-05-03 17:14:10 +03:00
parent 235c9ec4e0
commit b59dd001f9
4 changed files with 75 additions and 82 deletions

View file

@ -250,13 +250,16 @@ final class GroupPresenter extends OpenVKPresenter
$this->flash("succ", "Изменения сохранены", "Новые данные появятся в вашей группе."); $this->flash("succ", "Изменения сохранены", "Новые данные появятся в вашей группе.");
} }
} }
function renderEditAvatar(int $id)
function renderEditAvatar(int $id): void
{ {
$this->assertUserLoggedIn(); $this->assertUserLoggedIn();
$this->willExecuteWriteAction(); $this->willExecuteWriteAction();
$club = $this->clubs->get($id); $club = $this->clubs->get($id);
if(!$club ||!$club->canBeModifiedBy($this->user->identity)) if(!$club || !$club->canBeModifiedBy($this->user->identity))
{ {
$this->flashFail("err", "Неизвестная ошибка", "Не удалось сохранить фотографию."); $this->flashFail("err", "Неизвестная ошибка", "Не удалось сохранить фотографию.");
} }
if($_FILES["ava"]["error"] === UPLOAD_ERR_OK) { if($_FILES["ava"]["error"] === UPLOAD_ERR_OK) {
@ -278,9 +281,11 @@ final class GroupPresenter extends OpenVKPresenter
(new Albums)->getClubAvatarAlbum($club)->addPhoto($photo); (new Albums)->getClubAvatarAlbum($club)->addPhoto($photo);
} catch(ISE $ex) { } catch(ISE $ex) {
$name = $album->getName(); $name = $album->getName();
$this->flashFail("err", "Неизвестная ошибка", "Не удалось сохранить фотографию."); $this->flashFail("err", "Неизвестная ошибка", "Не удалось сохранить фотографию.");
} }
} }
$this->flash("succ", "Фотография сохранена", "Новые данные появятся в вашей группе."); $this->flash("succ", "Фотография сохранена", "Новые данные появятся в вашей группе.");
$this->redirect("/club$id"); $this->redirect("/club$id");
} }

View file

@ -96,30 +96,18 @@
<div class="right_small_block"> <div class="right_small_block">
{var $avatarPhoto = $club->getAvatarPhoto()} {var $avatarPhoto = $club->getAvatarPhoto()}
{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 id="avatarAll" style="position:relative;width:100%;">
onmouseover="
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 = '0.7';
"
onmouseleave="
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($thisUser) && $club->canBeModifiedBy($thisUser)}
{if is_null($avatarPhoto) == true} {if is_null($avatarPhoto) == true}
<a href="/club{$club->getId()}/al_avatars" id="_newPicture" class="newpict">{_add_photo}</a> <a href="/club{$club->getId()}/al_avatars" id="_newAvatarPicture" class="newpict">{_add_photo}</a>
{else} {else}
<a id="_avatarDelete" href="/photo{$club->getAvatarPhoto()->getPrettyId()}/delete"> <div id="avatarDeleteBlock">
<a id="_avatarDelete" href="/photo{$club->getAvatarPhoto()->getPrettyId()}/delete">
<img id="deleteButton" src="/assets/packages/static/openvk/img/delete.png"></a> <img id="deleteButton" src="/assets/packages/static/openvk/img/delete.png"></a>
<ul id="avatarChange"> </div>
<ul id="avatarOptionsBlock">
<li> <li>
<img src="/assets/packages/static/openvk/img/upload.png" id="uploadIcon"><a href="/club{$club->getId()}/al_avatars" id="_newPicture"> {tr("new_photo")}</a> <img src="/assets/packages/static/openvk/img/upload.png" id="_newAvatarPicture2"><a href="/club{$club->getId()}/al_avatars" id="_newAvatarPicture"> {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,10 +118,11 @@
{/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;
avatarChange.style.marginTop = image.height-33+"px"; avatarOptionsBlock.style.marginTop = image.height-33+"px";
avatarChange.style.width = image.width/1.25+"px" avatarOptionsBlock.style.width = image.width/1.25+"px"
}); });
</script> </script>
</div> </div>

View file

@ -70,38 +70,19 @@
<div class="left_small_block"> <div class="left_small_block">
<div style="margin-left: auto;margin-right: auto;display: table;"> <div style="margin-left: auto;margin-right: auto;display: table;">
<div <div id="avatarAll">
{if !is_null($thisUser) && $user->getId() == $thisUser->getId()} onmouseover=" <div n:if="!is_null($thisUser) && $user->getId() == $thisUser->getId()">
{if is_null($user->getAvatarPhoto()) == false && $user->getAvatarPhoto()->getURL() != "$serverUrl/assets/packages/static/openvk/img/camera_200.png"} <div id="avatarDeleteBlock">
_avatarDelete.style.backgroundColor='rgba(0, 0, 0, 0.7)'; <div id="av" n:if="is_null($user->getAvatarPhoto()) == false && $user->getAvatarPhoto()->getURL() != '$serverUrl/assets/packages/static/openvk/img/camera_200.png'">
deleteButton.style.opacity='0.7';
{/if}
avatarChange.style.backgroundColor='rgba(0, 0, 0, 0.7)';
avatarChange.style.opacity='100%';
"
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';
{/if}
avatarChange.style.backgroundColor='rgba(0, 0, 0, 0)';
avatarChange.style.opacity='0';
"{/if}>
<div n:if="!is_null($thisUser) && $user->getId() == $thisUser->getId()">
<div id="avatarEdit">
<div n:if="is_null($user->getAvatarPhoto()) == false && $user->getAvatarPhoto()->getURL() != '$serverUrl/assets/packages/static/openvk/img/camera_200.png'">
<a id="_avatarDelete" href="/photo{$user->getAvatarPhoto()->getPrettyId()}/delete"> <a id="_avatarDelete" href="/photo{$user->getAvatarPhoto()->getPrettyId()}/delete">
<img id="deleteButton" src="/assets/packages/static/openvk/img/delete.png"></a> <img id="deleteButton" src="/assets/packages/static/openvk/img/delete.png"></a>
</div>
</div> </div>
</div> <ul id="avatarOptionsBlock">
<ul id="avatarChange"> <li><img src="/assets/packages/static/openvk/img/upload.png" id="uploadIcon">
<li><img src="/assets/packages/static/openvk/img/upload.png" id="uploadIcon"> <a href="/al_avatars" id="_newPicture"> {tr("new_photo")}</a>
<a href="/al_avatars" id="_newPicture" onmouseover="_newPicture.style.color = '#D9D9D9';" onmouseleave="_newPicture.style.color = '#B2B2B2';"> {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>-->
<!--в опенвк не предвидится смена минатюры-->
</ul> </ul>
</div> </div>
<a href="{$user->getAvatarLink()|nocheck}"> <a href="{$user->getAvatarLink()|nocheck}">
<img src="{$user->getAvatarUrl('normal')}" <img src="{$user->getAvatarUrl('normal')}"
@ -111,8 +92,8 @@
<script> <script>
window.addEventListener("load", event => { window.addEventListener("load", event => {
let image = avatarImage; let image = avatarImage;
avatarChange.style.marginTop = image.height-32+"px"; avatarOptionsBlock.style.marginTop = image.height-32+"px";
avatarChange.style.width = image.width/1.25+"px" avatarOptionsBlock.style.width = image.width/1.25+"px"
}); });
</script> </script>
</div> </div>

View file

@ -1,46 +1,53 @@
/*avatar controls*/ /*avatar controls*/
#avatarEdit #deleteButton
{
opacity:0.8;
}
#avatarOptionsBlock, #avatarDeleteBlock, #_newPicture, #_newAvatarPicture {
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
#avatarDeleteBlock
{ {
position: relative; position: relative;
background-color:rgba(27, 27, 27, 0.8);
opacity:0;
}
#avatarOptionsBlock
{
position:absolute;
width:100px;
background-color:rgba(27, 27, 27, 0.8);
list-style-type: none;
font-size:11px;
margin-bottom:20px;
padding-top:10px;
padding-bottom:10px;
opacity:0;
} }
#_avatarDelete #_avatarDelete
{ {
position:absolute; position:absolute;
right:0; right:0;
top:0; top:0;
background-color:rgba(51, 51, 51, 0); background-color:rgba(0, 0, 0, 0.7);
border-radius: 0px 0px 3px 3px; border-radius: 0px 0px 3px 3px;
padding:2px; padding:2px;
padding-left:3px; padding-left:3px;
opacity:1;
} }
#deleteButton div#avatarAll:hover #avatarDeleteBlock {
{ opacity: 1 !important;
opacity:0; visibility: visible;
} }
#avatarChange, #_avatarDelete, #_newPicture, #deleteButton, #_avatarDelete { div#avatarAll:hover #avatarOptionsBlock {
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
#avatarChange
{
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%;
}
div#avatarAll:hover #avatarChange {
opacity: 1 !important; opacity: 1 !important;
visibility: visible; visibility: visible;
} }
#uploadIcon #uploadIcon
{ {
opacity:50%;
position:absolute; position:absolute;
left:0; left:0;
margin-left:20px; margin-left:20px;
@ -59,8 +66,19 @@ div#avatarAll:hover #avatarChange {
text-align:center; text-align:center;
left:20%; left:20%;
top:75%; top:75%;
color:#5680a0 !important;
} }
.newpict:hover #_newAvatarPicture2
{ {
color:#5680a0; position:absolute;
left:0;
margin-left:20px;
}
#_newAvatarPicture
{
color:#B2B2B2;
}
#_newAvatarPicture:hover
{
color:#D9D9D9;
} }