neosubhamoy/neosubhamoy-portfolio
1
1
Fork 0
mirror of https://github.com/neosubhamoy/neosubhamoy-portfolio.git synced 2025-12-19 19:23:02 +05:30
Code Issues Wiki Activity

(feat): added share window opening animation and minnor icon styling fix

Browse Source
This commit is contained in:
Subhamoy Biswas
2023-11-24 21:33:27 +05:30
parent 4809a012c4
commit 63e53fc773
4 changed files with 49 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
htdocs/assets/_floatingbar.php
View File

@@ -100,7 +100,7 @@
</div> </div>
</div> </div>
</div> </div>
<div id="sharewindow" class="sharewindow w-[90vw] md:w-[44vw] mx-auto h-[45vh] md:h-[60vh] fixed inset-x-0 top-[20vh] z-40 flex-col items-center bg-bg_secondary rounded-xl overflow-y-scroll no-scrollbar hidden"> <div id="sharewindow" class="sharewindow w-[90vw] md:w-[50vw] mx-auto h-[45vh] md:h-[60vh] fixed inset-x-0 top-[20vh] z-40 flex-col items-center bg-bg_secondary rounded-xl hidden">
</div> </div>
<div id="floating-bar" class="fixed inset-x-0 bottom-[7vh] z-[50] flex justify-center items-center"> <div id="floating-bar" class="fixed inset-x-0 bottom-[7vh] z-[50] flex justify-center items-center">
@@ -110,6 +110,6 @@
<input id="searchinput" class="w-full mx-2 bg-bg_secondary caret-accent_primary outline-none hidden" type="text" placeholder="Type to Search Something . . ." name="search-input"> <input id="searchinput" class="w-full mx-2 bg-bg_secondary caret-accent_primary outline-none hidden" type="text" placeholder="Type to Search Something . . ." name="search-input">
</div> </div>
<button id="sharebutton" class="sharebutton bg-accent_primary px-[0.80rem] py-2 rounded-full mx-2 hover:shadow-[0px_0px_30px] hover:shadow-accent_primary_transparent transition transform duration-300"><i class="fa-solid fa-share-nodes text-bg_primary"></i></button> <button id="sharebutton" class="sharebutton bg-accent_primary px-[0.80rem] py-2 rounded-full mx-2 hover:shadow-[0px_0px_30px] hover:shadow-accent_primary_transparent transition transform duration-300"><i class="fa-solid fa-share-nodes text-bg_primary"></i></button>
<button id="closebutton" class="closebutton bg-accent_primary px-[0.80rem] py-2 rounded-full mx-2 hover:shadow-[0px_0px_30px] hover:shadow-accent_primary_transparent transition transform duration-300 hidden"><i class="fa-solid fa-xmark text-bg_primary"></i></button> <button id="closebutton" class="closebutton bg-accent_primary px-[0.85rem] py-2 rounded-full mx-2 hover:shadow-[0px_0px_30px] hover:shadow-accent_primary_transparent transition transform duration-300 hidden"><i class="fa-solid fa-xmark text-bg_primary"></i></button>
<button id="shareclosebutton" class="closebutton bg-accent_primary px-[0.80rem] py-2 rounded-full mx-2 hover:shadow-[0px_0px_30px] hover:shadow-accent_primary_transparent transition transform duration-300 hidden"><i class="fa-solid fa-xmark text-bg_primary"></i></button> <button id="shareclosebutton" class="closebutton bg-accent_primary px-[0.85rem] py-2 rounded-full mx-2 hover:shadow-[0px_0px_30px] hover:shadow-accent_primary_transparent transition transform duration-300 hidden"><i class="fa-solid fa-xmark text-bg_primary"></i></button>
</div> </div>

31
htdocs/assets/extra-style.css
View File

@@ -196,6 +196,24 @@ background: #38BDF8;
} }
} }
.floatingshare-window-show {
display: flex;
animation: shareWindowShow 0.5s ease-in-out;
}
@keyframes shareWindowShow {
from {
width: 25vw;
height: 30vh;
opacity: 0;
}
to {
width: 50vw;
height: 60vh;
opacity: 1;
}
}
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
@keyframes searchWindowShow { @keyframes searchWindowShow {
@@ -210,4 +228,17 @@ background: #38BDF8;
opacity: 1; opacity: 1;
} }
} }
@keyframes shareWindowShow {
from {
width: 25vw;
height: 30vh;
opacity: 0;
}
to {
width: 90vw;
height: 45vh;
opacity: 1;
}
}
} }

4
htdocs/assets/js/floatingbar-config.js
View File

@@ -306,7 +306,7 @@ function activate_share() {
windowWrapper.classList.add("flotingbar-window-wrapper-show"); windowWrapper.classList.add("flotingbar-window-wrapper-show");
shareBtn.classList.add("hidden"); shareBtn.classList.add("hidden");
shareCloseBtn.classList.remove("hidden"); shareCloseBtn.classList.remove("hidden");
shareWin.classList.remove("hidden"); shareWin.classList.add("floatingshare-window-show");
} }
@@ -315,7 +315,7 @@ function close_share() {
windowWrapper.classList.add("hidden"); windowWrapper.classList.add("hidden");
shareCloseBtn.classList.add("hidden"); shareCloseBtn.classList.add("hidden");
shareBtn.classList.remove("hidden"); shareBtn.classList.remove("hidden");
shareWin.classList.add("hidden"); shareWin.classList.remove("floatingshare-window-show");
} }
shareBtn.addEventListener("click", function () { shareBtn.addEventListener("click", function () {

21
htdocs/assets/style.css
View File

@@ -595,14 +595,14 @@ video {
top: 10rem; top: 10rem;
} }
.top-\[10vh\] {
top: 10vh;
}
.top-\[20\.5rem\] { .top-\[20\.5rem\] {
top: 20.5rem; top: 20.5rem;
} }
.top-\[20vh\] {
top: 20vh;
}
.top-\[30vh\] { .top-\[30vh\] {
top: 30vh; top: 30vh;
} }
@@ -611,10 +611,6 @@ video {
top: 4.7rem; top: 4.7rem;
} }
.top-\[20vh\] {
top: 20vh;
}
.z-10 { .z-10 {
z-index: 10; z-index: 10;
} }
@@ -1293,6 +1289,11 @@ video {
padding-bottom: 0.30rem; padding-bottom: 0.30rem;
} }
.px-\[0\.85rem\] {
padding-left: 0.85rem;
padding-right: 0.85rem;
}
.text-center { .text-center {
text-align: center; text-align: center;
} }
@@ -1613,6 +1614,10 @@ video {
.md\:w-\[44vw\] { .md\:w-\[44vw\] {
width: 44vw; width: 44vw;
} }
.md\:w-\[50vw\] {
width: 50vw;
}
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {