pedf
/
spolky
Archived
1
0
Fork 0
Code Pull Requests Releases Activity

mrtky

Browse Source
master
Lukáš Hozda 4 years ago
parent 1b72d46fe1
commit 657a125177
5 changed files with 82 additions and 34 deletions
Show Stats Download Patch File Download Diff File

11
src/components/up.svelte
Unescape Escape View File

@ -1,12 +1,19 @@
<style>
.up-arrow {
position: fixed;
width: 1em;
height: 1em;
width: 3vw;
height: 3vw;
top: 80vh;
right: 5vw;
cursor: pointer;
}
@media screen and (max-width: 800px) {
.up-arrow {
width: 70px;
height: 70px;
}
}
</style>
<script>

81
src/routes/index.svelte
Unescape Escape View File

@ -278,7 +278,8 @@
import Logo from '../components/logo.svelte';
import anime from 'animejs/lib/anime.es.js';
import { onMount, afterUpdate } from 'svelte';
//import { watchResize } from 'svelte-watch-resize';
import { scale } from 'svelte/transition';
import { quintOut } from 'svelte/easing'; //import { watchResize } from 'svelte-watch-resize';
let clicked = false;
let what = {
@ -287,7 +288,8 @@
"zapojit" : [ 0, 0, 0, 0 ],
"zalozit" : [ 0, 0, 0, 0 ],
"oborovky" : [ 0, 0, 0, 0 ],
}
};
let obobo = [[ 0, 0, 0, 0 ], [0, 0, 0, 0]];
function clicked_fun() {
clicked = !clicked;
@ -308,7 +310,17 @@
what["plusko"] = [ plusko.clientHeight, plusko.clientWidth, plusko.offsetLeft, plusko.offsetTop ];
console.log(what);
}, 150);
}, 70);
} else {
setTimeout(() => {
let cinnosti = document.getElementById("cinnosti");
let plusko = document.getElementById("plusko")
obobo[0] = [ cinnosti.clientHeight, cinnosti.clientWidth, cinnosti.offsetLeft, cinnosti.offsetTop ];
obobo[1] = [ plusko.clientHeight, plusko.clientWidth, plusko.offsetLeft, plusko.offsetTop ];
console.log(obobo);
}, 70);
}
}
@ -371,35 +383,50 @@
}
function resize() {
if (document.querySelector("#predseda")) {
let predseda = document.getElementById("predseda");
let prebiram = document.getElementById("prebiram");
let zapojit = document.getElementById("zapojit");
let zalozit = document.getElementById("zalozit");
let oborovky = document.getElementById("oborovky");
let plusko = document.getElementById("plusko")
if (clicked) {
let predseda = document.getElementById("predseda");
let prebiram = document.getElementById("prebiram");
let zapojit = document.getElementById("zapojit");
let zalozit = document.getElementById("zalozit");
let oborovky = document.getElementById("oborovky");
let plusko = document.getElementById("plusko")
what["predseda"] = [ predseda.clientHeight, predseda.clientWidth, predseda.offsetLeft, predseda.offsetTop ];
what["prebiram"] = [ prebiram.clientHeight, prebiram.clientWidth, prebiram.offsetLeft, prebiram.offsetTop ];
what["zapojit"] = [ zapojit.clientHeight, zapojit.clientWidth, zapojit.offsetLeft, zapojit.offsetTop ];
what["zalozit"] = [ zalozit.clientHeight, zalozit.clientWidth, zalozit.offsetLeft, zalozit.offsetTop ];
what["oborovky"] = [ oborovky.clientHeight, oborovky.clientWidth, oborovky.offsetLeft, oborovky.offsetTop ];
what["plusko"] = [ plusko.clientHeight, plusko.clientWidth, plusko.offsetLeft, plusko.offsetTop ];
what["predseda"] = [ predseda.clientHeight, predseda.clientWidth, predseda.offsetLeft, predseda.offsetTop ];
what["prebiram"] = [ prebiram.clientHeight, prebiram.clientWidth, prebiram.offsetLeft, prebiram.offsetTop ];
what["zapojit"] = [ zapojit.clientHeight, zapojit.clientWidth, zapojit.offsetLeft, zapojit.offsetTop ];
what["zalozit"] = [ zalozit.clientHeight, zalozit.clientWidth, zalozit.offsetLeft, zalozit.offsetTop ];
what["oborovky"] = [ oborovky.clientHeight, oborovky.clientWidth, oborovky.offsetLeft, oborovky.offsetTop ];
what["plusko"] = [ plusko.clientHeight, plusko.clientWidth, plusko.offsetLeft, plusko.offsetTop ];
console.log(what);
console.log(what);
} else {
let cinnosti = document.getElementById("cinnosti");
let plusko = document.getElementById("plusko")
obobo[0] = [ cinnosti.clientHeight, cinnosti.clientWidth, cinnosti.offsetLeft, cinnosti.offsetTop ];
obobo[1] = [ plusko.clientHeight, plusko.clientWidth, plusko.offsetLeft, plusko.offsetTop ];
console.log(obobo);
}
}
onMount(() => {
if (window.innerWidth <= 800)
clicked = true;
let cinnosti = document.getElementById("cinnosti");
let plusko = document.getElementById("plusko")
obobo[0] = [ cinnosti.clientHeight, cinnosti.clientWidth, cinnosti.offsetLeft, cinnosti.offsetTop ];
obobo[1] = [ plusko.clientHeight, plusko.clientWidth, plusko.offsetLeft, plusko.offsetTop ];
console.log(obobo);
})
</script>
<svelte:head>
<title>Spolky a SORky PedF UK | Chci se zapojit</title>
</svelte:head>
<!--<svelte:window use:watchResize={resize}/>-->
<svelte:window on:resize={resize}/>
<Logo keep={true}/>
@ -416,7 +443,7 @@
</div>
{#if clicked }
<div class="labels">
<div class="labels" transition:scale="{{duration: 700, opacity: 0.1, start: 0.2, easing: quintOut}}">
<svg width="1200" height="800" style="position: absolute; left: 0; top: 0">
<line
x1="{what['predseda'][1] + what['predseda'][2]}"
@ -523,7 +550,21 @@
</div>
</div>
{:else }
<span class="label" id="cinnosti">Činnosti ve spolcích</span>
<div class="labels" transition:scale="{{duration: 700, opacity: 0.1, start: 0.2, easing: quintOut}}">
<span class="label" id="cinnosti" transition:scale="{{duration: 700, opacity: 0.1, start: 0.2, easing: quintOut}}" style="left: 50%; position: absolute; transform: translateX(-50%)">
Činnosti ve spolcích
</span>
<svg width="1200" height="800" style="position: absolute; left: 0; top: 0">
<line
x1="{600}"
y1="{obobo[0][3]}"
x2="{600}"
y2="{400}"
stroke="black"
stroke-dasharray="5,5"
/>
</svg>
</div>
{/if}
<canvas id="dots">
</canvas>

2
src/routes/oborovky.svelte
Unescape Escape View File

@ -286,7 +286,7 @@
<h5>
</div>
<div class="col-5">
<video class="smol-video" controls>
<video class="smol-video" controls playsinline>
<source src="/video/8_stepan.mp4" type="video/webm">
Your browser does not support video.
</video>

8
src/routes/predseda.svelte
Unescape Escape View File

@ -96,7 +96,7 @@
<h5>
</div>
<div class="col-5">
<video class="smol-video" controls>
<video class="smol-video" controls playsinline>
<source src="/video/3_nela.mp4" type="video/webm">
Your browser does not support video.
</video>
@ -323,7 +323,7 @@
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<video class="smol-video" controls style="width: 100%">
<video class="smol-video" controls style="width: 100%" playsinline>
<source src="/video/5_lenka.mp4" type="video/webm">
Your browser does not support video.
</video>
@ -332,7 +332,7 @@
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<video class="smol-video" controls style="width: 100%">
<video class="smol-video" controls style="width: 100%" playsinline>
<source src="/video/4_holka_pozvanka.mp4" type="video/webm">
Your browser does not support video.
</video>
@ -341,7 +341,7 @@
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<video class="smol-video" controls style="width: 100%">
<video class="smol-video" controls style="width: 100%" playsinline>
<source src="/video/12_petr_22.mp4" type="video/webm">
Your browser does not support video.
</video>

14
src/routes/zapojit-se.svelte
Unescape Escape View File

@ -187,7 +187,7 @@
<!-- Full-width images with number and caption text -->
<div class="mySlides2 fade">
<div class="numbertext">1 / 3</div>
<video class="smol-video" controls style="width: 100%">
<video class="smol-video" controls style="width: 100%" playsinline>
<source src="/video/7_jana.mp4" type="video/webm">
Your browser does not support video.
</video>
@ -196,7 +196,7 @@
<div class="mySlides2 fade">
<div class="numbertext">2 / 3</div>
<video class="smol-video" controls style="width: 100%">
<video class="smol-video" controls style="width: 100%" playsinline>
<source src="/video/8_stepan.mp4" type="video/webm">
Your browser does not support video.
</video>
@ -205,7 +205,7 @@
<div class="mySlides2 fade">
<div class="numbertext">3 / 3</div>
<video class="smol-video" controls style="width: 100%">
<video class="smol-video" controls style="width: 100%" playsinline>
<source src="/video/1_verca_1.mp4" type="video/webm">
Your browser does not support video.
</video>
@ -243,7 +243,7 @@
<!-- Full-width images with number and caption text -->
<div class="mySlides3 fade">
<div class="numbertext">1 / 4</div>
<video class="smol-video" controls style="width: 100%">
<video class="smol-video" controls style="width: 100%" playsinline>
<source src="/video/4_holka_pozvanka.mp4" type="video/webm">
Your browser does not support video.
</video>
@ -252,7 +252,7 @@
<div class="mySlides3 fade">
<div class="numbertext">2 / 4</div>
<video class="smol-video" controls style="width: 100%">
<video class="smol-video" controls style="width: 100%" playsinline>
<source src="/video/6_petr.mp4" type="video/webm">
Your browser does not support video.
</video>
@ -261,7 +261,7 @@
<div class="mySlides3 fade">
<div class="numbertext">3 / 4</div>
<video class="smol-video" controls style="width: 100%">
<video class="smol-video" controls style="width: 100%" playsinline>
<source src="/video/11_lenka_2.mp4" type="video/webm">
Your browser does not support video.
</video>
@ -269,7 +269,7 @@
</div>
<div class="mySlides3 fade">
<div class="numbertext">4 / 4</div>
<video class="smol-video" controls style="width: 100%">
<video class="smol-video" controls style="width: 100%" playsinline>
<source src="/video/9_devce.mp4" type="video/webm">
Your browser does not support video.
</video>