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

Adding screenshots js behaviors.

Browse Source
This commit is contained in:
Tristan Roux
2019-01-20 19:12:31 +01:00
parent 5ced32051e
commit 5aad39e960
5 changed files with 62 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
en/index.html
View File

@@ -12,6 +12,7 @@
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<header id="nav" style="height: 56px;"></header>
@@ -77,16 +78,16 @@
<div class="container-fluid" style="background-color: darkslategray;">
<div class="row align-items-center text-center text-light pt-3 pb-3">
<h1 class="pl-5">Screenshots</h1>
<div style="overflow-x: auto; white-space: nowrap;">
<img class="screenshot" src="../drawables/MusicApp/Screenshots/1.jpg">
<img class="screenshot" src="../drawables/MusicApp/Screenshots/2.jpg">
<img class="screenshot" src="../drawables/MusicApp/Screenshots/3.jpg">
<img class="screenshot" src="../drawables/MusicApp/Screenshots/4.jpg">
<img class="screenshot" src="../drawables/MusicApp/Screenshots/5.jpg">
<img class="screenshot" src="../drawables/MusicApp/Screenshots/6.jpg">
<img class="screenshot" src="../drawables/MusicApp/Screenshots/7.jpg">
<img class="screenshot" src="../drawables/MusicApp/Screenshots/8.jpg">
<img class="screenshot" src="../drawables/MusicApp/Screenshots/9.jpg">
<div class="screenshots">
<img class="screenshot" src="../drawables/MusicApp/Screenshots/1.jpg" ondragstart="return false;">
<img class="screenshot" src="../drawables/MusicApp/Screenshots/2.jpg" ondragstart="return false;">
<img class="screenshot" src="../drawables/MusicApp/Screenshots/3.jpg" ondragstart="return false;">
<img class="screenshot" src="../drawables/MusicApp/Screenshots/4.jpg" ondragstart="return false;">
<img class="screenshot" src="../drawables/MusicApp/Screenshots/5.jpg" ondragstart="return false;">
<img class="screenshot" src="../drawables/MusicApp/Screenshots/6.jpg" ondragstart="return false;">
<img class="screenshot" src="../drawables/MusicApp/Screenshots/7.jpg" ondragstart="return false;">
<img class="screenshot" src="../drawables/MusicApp/Screenshots/8.jpg" ondragstart="return false;">
<img class="screenshot" src="../drawables/MusicApp/Screenshots/9.jpg" ondragstart="return false;">
</div>
</div>
</div>
@@ -109,5 +110,6 @@
});
});
</script>
<script src="../js/horizontalScrolling.js"></script>
</body>
</html>

29
js/horizontalScrolling.js Normal file
View File

@@ -0,0 +1,29 @@
const sliders = document.querySelectorAll(".screenshots");
sliders.forEach((slider) =>
{
var sliding = false;
var startX;
slider.addEventListener("mousedown", (eventArg) =>
{
sliding = true;
startX = eventArg.pageX;
});
slider.addEventListener("mousemove", (eventArg) =>
{
if (sliding)
{
eventArg.preventDefault();
slider.scrollLeft += (startX - eventArg.pageX) * $(window).width() / (2 * slider.scrollWidth);
}
});
slider.addEventListener("mouseup", () =>
{
sliding = false;
});
slider.addEventListener("mouseleave", () => {
sliding = false;
});
});

9
scss/custom.css
View File

@@ -10428,6 +10428,15 @@ h2 {
padding-bottom: 1rem;
}
.screenshots {
overflow-x: auto;
white-space: nowrap;
}
.screenshots :hover {
cursor: pointer;
}
.screenshot {
display: inline-block;
height: 30rem;

2
scss/custom.css.map
View File

File diff suppressed because one or more lines are too long

11
scss/custom.scss
View File

@@ -31,6 +31,17 @@ h2
padding-bottom: 1rem;
}
.screenshots
{
overflow-x: auto;
white-space: nowrap;
:hover
{
cursor: pointer;
}
}
.screenshot
{
display: inline-block;