summaryrefslogtreecommitdiff
path: root/rannak/mangud/partorg/kuulsused
diff options
context:
space:
mode:
Diffstat (limited to 'rannak/mangud/partorg/kuulsused')
-rw-r--r--rannak/mangud/partorg/kuulsused/index.html165
-rw-r--r--rannak/mangud/partorg/kuulsused/script.js70
-rw-r--r--rannak/mangud/partorg/kuulsused/styles.css59
3 files changed, 209 insertions, 85 deletions
diff --git a/rannak/mangud/partorg/kuulsused/index.html b/rannak/mangud/partorg/kuulsused/index.html
index 4dfe755..b0503a2 100644
--- a/rannak/mangud/partorg/kuulsused/index.html
+++ b/rannak/mangud/partorg/kuulsused/index.html
@@ -2,8 +2,8 @@
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=, initial-scale=1.0">
- <title>Kuusused</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Kuulsused</title>
<link rel="stylesheet" href="styles.css">
<!-- Bootstrap - CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
@@ -12,7 +12,7 @@
<body class="bg-dark text-white">
<div class="container text-center text-white align-items-center pb-5">
- <h1 class="pb-1 pt-2">Kuulsused</h1>
+ <h1 class="pb-1 pt-2">Olulised isikud</h1>
<p>Vii kokku inimese nimi ja nägu.</p>
<div class="row">
@@ -59,78 +59,115 @@
</div>
- <!-- Esimene rida -->
- <div class="lists">
- <div class="row">
- <div class="col imgBox text-center">
- <img src="pildid/laar.jpg" alt="Mart Laar img">
- <p>
- "1990-1992 Eesti Vabariigi Ülemnõukogu liige. Eesti muinsuskaitse seltsi, Eesti komitee, Eesti kongressi liige."
- </p>
- <div id="laar" class="list"></div>
- </div>
+<div class="mainer">
- <div class="list col startBasket text-center">
- <div id="laar" class="list-item" draggable="true">Mart Laar</div>
- <div id="lauristin" class="list-item" draggable="true">Marju Lauristin</div>
- <div id="ruutel" class="list-item" draggable="true">Arnold Rüütel</div>
- <div id="savisaar" class="list-item" draggable="true">Edgar Savisaar</div>
- <div id="kogan" class="list-item" draggable="true">Jevgeni Kogan</div>
- <div id="valk" class="list-item" draggable="true">Heinz Valk</div>
- </div>
- <div class="col imgBox text-center">
- <img src="pildid/lauristin.jpg" alt="Marju Lauristin img">
- <p>
- "1990-1992 EV Ülemnõukogu liige, juhataja asetäitja, 1990 Eesti Komitee liige"
- </p>
+ <div class="list col startBasket text-center">
+ <div id="laar" class="list-item" draggable="true">Mart Laar</div>
+ <div id="lauristin" class="list-item" draggable="true">Marju Lauristin</div>
+ <div id="ruutel" class="list-item" draggable="true">Arnold Rüütel</div>
+ <div id="savisaar" class="list-item" draggable="true">Edgar Savisaar</div>
+ <div id="kogan" class="list-item" draggable="true">Jevgeni Kogan</div>
+ <div id="valk" class="list-item" draggable="true">Heinz Valk</div>
+ </div>
+
+ <!-- Carousell -->
+
+ <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
+
+ <div class="carousel-indicators">
+ <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+ <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
+ <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
+ <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3" aria-label="Slide 4"></button>
+ <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="4" aria-label="Slide 5"></button>
+ <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="5" aria-label="Slide 6"></button>
+ </div>
+
+ <div class="carousel-inner">
+
+ <div class="carousel-item active">
+ <img src="pildid/laar.jpg" class="d-block" alt="Mart Laar img">
+ <div class="text">
+ <p>
+ 1990-1992 Eesti Vabariigi Ülemnõukogu liige. Eesti muinsuskaitse seltsi, Eesti komitee, Eesti kongressi liige.
+ </p>
+ </div>
+ <div id="laar" class="list"></div>
+ </div>
+
+ <div class="carousel-item">
+ <img src="pildid/lauristin.jpg" class="d-block" alt="Marju Lauristin img">
+ <div class="text">
+ <p>
+ 1990-1992 EV Ülemnõukogu liige, juhataja asetäitja, 1990 Eesti Komitee liige
+ </p>
+ </div>
<div id="lauristin" class="list"></div>
- </div>
+ </div>
- </div>
- </div>
- <!-- Teine rida -->
+ <div class="carousel-item">
+ <img src="pildid/ruutel.jpg" class="d-block" alt="Arnold Rüütel img">
+ <div class="text">
+ <p>
+ 1990-1992 ENSV/ EV Ülemnõukogu esimees.
+ </p>
+ </div>
+ <div id="ruutel" class="list"></div>
+ </div>
- <div class="lists">
- <div class="row">
- <div class="col-3 imgBox text-center">
- <img src="pildid/ruutel.jpg" alt="Arnold Rüütel img">
- <p>
- "1990-1992 ENSV/ EV Ülemnõukogu esimees."
- </p>
- <div id="ruutel" class="list"></div>
- </div>
+ <div class="carousel-item">
+ <img src="pildid/savisaar.jpg" class="d-block" alt="Savisaar img">
+ <div class="text">
+ <p>
+ Üks Rahvarinde loojatest, 1990 Eesti NSV Valitsuse esimees, 20.08.1991 Eesti Vabariigi peaministri kohusetäitja.
+ </p>
+ </div>
+ <div id="savisaar" class="list"></div>
+ </div>
+
+
+ <div class="carousel-item">
+ <img src="pildid/valk.jpg" class="d-block" alt="Heniz img">
+ <div class="text">
+ <p>
+ Kunstnik, Rahvarinde üks asutajaliikmeid, suurepärane kõnepidaja, andis meie revolutsioonile nime.
+ </p>
+ </div>
+ <div id="valk" class="list"></div>
+ </div>
- <div class="col-3 imgBox text-center">
- <img src="pildid/savisaar.jpg" alt="Savisaar img">
- <p>
- "üks Rahvarinde loojatest, 1990 Eesti NSV Valitsuse esimees, 20.08.1991 Eesti Vabariigi peaministri kohusetäitja"
- </p>
- <div id="savisaar" class="list"></div>
- </div>
- <div class="col-3 imgBox text-center">
- <img src="pildid/valk.jpg" alt="Heniz img">
- <p>
- "kunstnik, Rahvarinde üks asutajaliikmeid, suurepärane kõnepidaja, andis meie revolutsioonile nime."
- </p>
- <div id="valk" class="list"></div>
- </div>
+ <div class="carousel-item">
+ <img src="pildid/kogan.jpg" class="d-block" alt="Kogan img">
+ <div class="text">
+ <p>
+ Interrinde üks loojatest (1988) ning hiljem selle esimees. NSVL Rahvasaadikute kongressi liige, osales impeeriumimeelse saadikuterühma “Sojuz” tegevuses.
+ </p>
+ </div>
+ <div id="kogan" class="list"></div>
+ </div>
+
+ </div>
+
+
+ <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
+ <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+ <span class="visually-hidden">Previous</span>
+ </button>
+
+ <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
+ <span class="carousel-control-next-icon" aria-hidden="true"></span>
+ <span class="visually-hidden">Next</span>
+ </button>
+
+ </div>
+
+</div>
- <div class="col imgBox text-center">
- <img src="pildid/kogan.jpg" alt="Kogan img">
- <p>
- "Interrinde üks loojatest (1988) ning hiljem selle esimees. NSVL Rahvasaadikute kongressi liige, osales impeeriumimeelse saadikuterühma “Sojuz” tegevuses."
- </p>
- <div id="kogan" class="list"></div>
- </div>
-
- </div>
- </div>
-
<script src="script.js"></script>
<!-- JavaScript Bundle with Popper -->
diff --git a/rannak/mangud/partorg/kuulsused/script.js b/rannak/mangud/partorg/kuulsused/script.js
index 60c3ffa..1ab5cef 100644
--- a/rannak/mangud/partorg/kuulsused/script.js
+++ b/rannak/mangud/partorg/kuulsused/script.js
@@ -4,11 +4,15 @@ document.addEventListener('DOMContentLoaded', () => {
});
+
const list_items = document.querySelectorAll(".list-item");
const lists = document.querySelectorAll(".list");
let draggedItem = null;
+
+// Draggable Items
+
for (let i=0; i < list_items.length; i++){
const item = list_items[i];
@@ -16,25 +20,36 @@ for (let i=0; i < list_items.length; i++){
item.addEventListener("dragstart", e => {
draggedItem = item;
setTimeout(() => (item.style.display = "none"), 0);
+
});
+
item.addEventListener("dragend", e => {
+
setTimeout(() => {
draggedItem.style.display = "block";
draggedItem = null}, 0);
checkIfAllGood();
});
- for (let j=0; j < lists.length; j++){
- const list = lists[j];
- /* Event Listeners */
+}
+
+
+
+
+// Dropping spots
+
+for (let j=0; j < lists.length; j++){
+ const list = lists[j];
+
+ /* Event Listeners */
- list.addEventListener("dragenter",e => (e.preventDefault()));
+ list.addEventListener("dragenter",e => (e.preventDefault()));
list.addEventListener("dragover",e => {
e.preventDefault();
- list.style.backgroundColor = "rgba(0,0,0,0.5)";
+ list.style.backgroundColor = "rgba(0,0,0,0.9)";
});
@@ -46,12 +61,46 @@ for (let i=0; i < list_items.length; i++){
list.addEventListener("drop",e => {
if (list.children.length == 0 || list.className.includes("startBasket"))
list.append(draggedItem);
- list.style.backgroundColor = "rgba(0,0,0,0.5)";
+ list.style.backgroundColor = "rgba(0,0,0,0.3)";
})
- }
-
}
+
+
+// Smooth scroll stuff
+
+// const ekraaniPikkus = window.innerHeight;
+// let d;
+// if (ekraaniPikkus > 800)
+// d = ekraaniPikkus / 8;
+// else
+// d = ekraaniPikkus / 4;
+//
+// console.log(ekraaniPikkus);
+// console.log(document.body.scrollHeight);
+// const maxScroll = document.body.scrollHeight;
+//
+// window.ondragover = function(e){
+// console.log("Pos: ",e.clientY);
+// console.log(d);
+// console.log("X: ", e.y);
+// //console.log(e);
+//
+// if (e.clientY > (ekraaniPikkus - d)){
+// console.log("Should scroll down");
+// if (maxScroll > e.y+d)
+// window.scrollTo(0, e.y + d);
+// else
+// window.scrollTo(0, maxScroll);
+// }
+// else if (e.clientY < (d))
+// window.scrollTo(0, e.y - d);
+// }
+
+
+
+
+
function checkIfAllGood(){
let rightDone = [];
@@ -73,3 +122,8 @@ function checkIfAllGood(){
btn.onclick = () => location.href = "../plakat";
}
}
+
+
+
+/* The Scrolling on thing while dragging */
+// window.scrollTo(0, 500);
diff --git a/rannak/mangud/partorg/kuulsused/styles.css b/rannak/mangud/partorg/kuulsused/styles.css
index f4fb4c8..108bde9 100644
--- a/rannak/mangud/partorg/kuulsused/styles.css
+++ b/rannak/mangud/partorg/kuulsused/styles.css
@@ -65,21 +65,51 @@ button:disabled{
}
-/* Other */
+/* Mainer */
+.mainer {
+ display: flex;
+ align-items: center;
+ border: 3px solid white;
+ border-radius: 10px;
+ margin: .7rem;
+ min-height: 80%;
+}
+
+.mainer .startBasket {
+ width: 40%;
+ padding: 1rem;
+}
+
+
+
+/* Carousel */
+.carousel {
+ border-left: 5px solid white;
+ padding: 1rem !important;
+ margin: auto !important;
+ width: 60% !important;
+ height: auto !important;
-.row {
- margin: 0 5% !important;
}
-img {
- max-width: 15rem !important;
+.carousel-item{text-align: center !important;}
+.carousel-item .text{padding-top: 10px !important;}
+
+.carousel-item img{
+ margin: auto !important;
+ max-width: 35% !important;
height: auto !important;
- padding: .3rem;
}
-
-.lists .list .list-item {
+.carousel-item .list {
+ background-color: rgba(0, 0, 0, 0.3);
+ min-height: 3.7rem;
+ margin: .5rem;
+ border-radius: 8px !important;
+}
+
+.list-item {
background-color: #b2beb5 !important;
color: #21201E;
margin: 0.5rem 0;
@@ -88,11 +118,14 @@ img {
cursor: pointer;
}
-.lists .list {
- background-color: rgba(0, 0, 0, 0.3);
- min-height: 2.5rem;
- margin: .5rem;
- border-radius: 8px !important;
+
+
+/* Other */
+
+.modal-header img {
+ max-width: 15rem !important;
+ height: auto !important;
+ padding: .3rem;
}
.startBasket {
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-23 03:15:19 +0000