zoriya/RaccoonWebsite
1
0
Fork 0
mirror of https://github.com/zoriya/RaccoonWebsite.git synced 2025-12-05 23:46:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Finishing scroller script and style.

Browse Source
This commit is contained in:
Tristan Roux
2019-01-23 16:42:06 +01:00
parent 4ec7d05860
commit 07a72a49a2
5 changed files with 113 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
en/index.html
View File

@@ -78,8 +78,8 @@
<div class="container-fluid" style="background-color: darkslategray;">
<div class="row align-items-center text-center text-light pt-3 pb-3" style="position: relative;">
<h1 class="pl-5">Screenshots</h1>
<button id="left-scroll" style="position: absolute; left: 0; top: 50%; display: none;"><i class="fas fa-chevron-left"></i></button>
<button id="right-scroll" style="position: absolute; right: 0; top: 50%;"><i class="fas fa-chevron-right"></i></button>
<button class="scroller" id="left-scroll" style="left: 0; display: none;"><i class="fas fa-chevron-left"></i></button>
<button class="scroller" id="right-scroll" style="right: 0;"><i class="fas fa-chevron-right"></i></button>
<div class="screenshots">
<img class="screenshot" style="padding-left: 4rem;" src="../drawables/MusicApp/Screenshots/1.jpg" ondragstart="return false;">
<img class="screenshot" src="../drawables/MusicApp/Screenshots/2.jpg" ondragstart="return false;">

18
js/horizontalScrolling.js
View File

@@ -37,6 +37,21 @@ sliders.forEach((slider) =>
sliding = false;
});
slider.onscroll = function ()
{
if (slider.scrollLeft == 0)
document.getElementById("left-scroll").style.display = "none";
else
document.getElementById("left-scroll").style.display = "inline-block";
if (slider.scrollLeft + 10 >= slider.scrollWidth - slider.clientWidth)
document.getElementById("right-scroll").style.display = "none";
else
document.getElementById("right-scroll").style.display = "inline-block";
};
//Shouldn't do it here, but will say it's ok.
document.getElementById("left-scroll").onclick = function()
{
@@ -52,9 +67,6 @@ sliders.forEach((slider) =>
slider.scrollBy({ top: 0, left: slider.offsetWidth * 0.66, behavior: "smooth" });
document.getElementById("left-scroll").style.display = "inline-block";
console.log("Offset: " + (slider.scrollWidth - slider.clientWidth));
console.log("Scroll: " + slider.scrollLeft);
if (slider.scrollLeft + slider.offsetWidth * 0.66 + 10 >= slider.scrollWidth - slider.clientWidth)
document.getElementById("right-scroll").style.display = "none";
}

43
scss/custom.css
View File

@@ -10433,14 +10433,55 @@ h2 {
white-space: nowrap;
}
.screenshots :hover {
.screenshots:hover {
cursor: pointer;
}
.screenshots:hover::-webkit-scrollbar-thumb {
background-color: #999;
border-radius: 90px;
}
.screenshots:hover::-webkit-scrollbar-thumb:hover {
background-color: #867f7f;
}
.screenshots::-webkit-scrollbar {
height: 4px;
background: transparent;
}
.screenshot {
display: inline-block;
height: 30rem;
padding-left: 3rem;
padding-right: 3rem;
}
.scroller {
position: absolute;
top: 50%;
background-color: #E9E9EA;
border: none;
padding: 1.25rem;
padding-top: 2.5rem;
padding-bottom: 2.5rem;
border-radius: 12px;
}
.scroller:hover > .fas {
-webkit-transform: scale(1.4);
transform: scale(1.4);
cursor: pointer;
}
.scroller:hover ~ .screenshots::-webkit-scrollbar-thumb {
background-color: #999;
border-radius: 90px;
}
.scroller .fas {
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
/*# sourceMappingURL=custom.css.map */

2
scss/custom.css.map
View File

File diff suppressed because one or more lines are too long

54
scss/custom.scss
View File

@@ -36,9 +36,26 @@ h2
overflow-x: auto;
white-space: nowrap;
:hover
&:hover
{
cursor: pointer;
&::-webkit-scrollbar-thumb
{
background-color: #999;
border-radius: 90px;
&:hover
{
background-color: rgb(134, 127, 127);
}
}
}
&::-webkit-scrollbar
{
height: 4px;
background: transparent;
}
}
@@ -48,4 +65,39 @@ h2
height: 30rem;
padding-left: 3rem;
padding-right: 3rem;
}
.scroller
{
position: absolute;
top: 50%;
background-color: #E9E9EA;
border: none;
padding: 1.25rem;
padding-top: 2.5rem;
padding-bottom: 2.5rem;
border-radius: 12px;
&:hover
{
& > .fas
{
transform: scale(1.4);
cursor: pointer;
}
& ~ .screenshots
{
&::-webkit-scrollbar-thumb
{
background-color: #999;
border-radius: 90px;
}
}
}
.fas
{
transition: all .2s ease-in-out;
}
}