aboutsummaryrefslogtreecommitdiff
path: root/motto
diff options
context:
space:
mode:
authorMarvin Borner2020-09-17 20:04:05 +0200
committerMarvin Borner2020-09-17 20:04:05 +0200
commit47800e5226ed3cddcacbd68d35bc9a14dbddc5eb (patch)
tree7fbb9c0b35299dca54f30c9413124fef817ecccc /motto
parent1573ad3d3a21bfb9ac828949d4df0063bbeb40ca (diff)
Some feature requests
Diffstat (limited to 'motto')
-rw-r--r--motto/public/add.svg2
-rw-r--r--motto/public/all.svg1
-rw-r--r--motto/public/heart.svg2
-rw-r--r--motto/public/index.html13
-rw-r--r--motto/public/reload.svg1
-rw-r--r--motto/public/script.js47
-rw-r--r--motto/public/shuffle.svg1
-rw-r--r--motto/public/skip.svg2
-rw-r--r--motto/public/style.css54
-rw-r--r--motto/public/x.svg2
10 files changed, 112 insertions, 13 deletions
diff --git a/motto/public/add.svg b/motto/public/add.svg
index 703c5b7..7e535dc 100644
--- a/motto/public/add.svg
+++ b/motto/public/add.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg> \ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#424242" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
diff --git a/motto/public/all.svg b/motto/public/all.svg
new file mode 100644
index 0000000..b1b93c2
--- /dev/null
+++ b/motto/public/all.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#424242" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
diff --git a/motto/public/heart.svg b/motto/public/heart.svg
index 37d67e8..52b6748 100644
--- a/motto/public/heart.svg
+++ b/motto/public/heart.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FFACE4" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg> \ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FA64C8" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
diff --git a/motto/public/index.html b/motto/public/index.html
index 100b2af..008087a 100644
--- a/motto/public/index.html
+++ b/motto/public/index.html
@@ -7,12 +7,21 @@
<title>Motto</title>
</head>
<body>
+ <div id="sebastian" class="sebastian fab" style="display: none">
+ <button id="go"><img src="x.svg"></img></button>
+ <ul id="overview">
+ </ul>
+ </div>
+
<div class="wrapper">
<div class="cards">
</div>
- <div class="fab">
- <button id="add" class="add_button"><img src="add.svg"></img></button>
+ <div class="blabla fab">
+ <button id="all" class="top_button"><img src="all.svg"></img></button>
+ <button id="aah" class="top_button"><img src="reload.svg"></img></button>
+ <button id="idc" class="top_button"><img src="shuffle.svg"></img></button>
+ <button id="add" class="top_button"><img src="add.svg"></img></button>
</div>
<div class="yay_or_nay fab">
diff --git a/motto/public/reload.svg b/motto/public/reload.svg
new file mode 100644
index 0000000..96647f8
--- /dev/null
+++ b/motto/public/reload.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#424242" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-cw"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
diff --git a/motto/public/script.js b/motto/public/script.js
index 7292cc3..d2950b7 100644
--- a/motto/public/script.js
+++ b/motto/public/script.js
@@ -90,6 +90,35 @@ function skipCard() {
event.preventDefault();
}
+function jumpTo(event) {
+ document.getElementById("sebastian").style.display = "none";
+ const cards = document.querySelectorAll(".card:not(.removed)");
+ let index = 0;
+ while (cards[index].getAttribute("data-id") != event.target.getAttribute("data-id")) {
+ index++;
+ skipCard();
+ }
+}
+
+function toggleOverview() {
+ const strange = document.getElementById("sebastian");
+ const off = strange.style.display == "none";
+ strange.style.display = off ? "block" : "none";
+ if (!off) return;
+ const overview_list = document.getElementById("overview");
+ overview_list.innerHTML = "";
+ const cards = document.querySelectorAll(".card:not(.removed)");
+ cards.forEach((element) => {
+ const li = document.createElement("li");
+ li.setAttribute("data-id", element.getAttribute("data-id"));
+ li.textContent = `${element.querySelectorAll("h1")[1].innerText} - ${element.querySelector("h2").innerText} (${
+ element.querySelectorAll("h2")[1].innerText
+ })`;
+ li.addEventListener("click", jumpTo);
+ overview_list.appendChild(li);
+ });
+}
+
function createButtonListener(yay) {
return function (event) {
const card = document.querySelectorAll(".card:not(.removed)")[0];
@@ -159,3 +188,21 @@ document.getElementById("add").addEventListener("click", () => {
const secondary = prompt("Was ist der zweite Teil?", "Wir sind super toll");
if (main && secondary) add(main, secondary);
});
+
+document.getElementById("idc").addEventListener("click", () => {
+ const wrapper = document.querySelector(".cards");
+ console.log(wrapper.children.length);
+ for (var i = wrapper.children.length; i >= 0; i--) wrapper.appendChild(wrapper.children[(Math.random() * i) | 0]);
+ initCards();
+});
+
+document.getElementById("aah").addEventListener("click", () => {
+ const elements = document.getElementsByClassName("removed");
+ for (var i = 0; i < elements.length; i++) {
+ elements[i].classList.remove("removed");
+ }
+ initCards();
+});
+
+document.getElementById("all").addEventListener("click", toggleOverview);
+document.getElementById("go").addEventListener("click", toggleOverview);
diff --git a/motto/public/shuffle.svg b/motto/public/shuffle.svg
new file mode 100644
index 0000000..4a56d61
--- /dev/null
+++ b/motto/public/shuffle.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#424242" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shuffle"><polyline points="16 3 21 3 21 8"></polyline><line x1="4" y1="20" x2="21" y2="3"></line><polyline points="21 16 21 21 16 21"></polyline><line x1="15" y1="15" x2="21" y2="21"></line><line x1="4" y1="4" x2="9" y2="9"></line></svg>
diff --git a/motto/public/skip.svg b/motto/public/skip.svg
index e002c24..2beb5b9 100644
--- a/motto/public/skip.svg
+++ b/motto/public/skip.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#CDD9DD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-skip-forward"><polygon points="5 4 15 12 5 20 5 4"></polygon><line x1="19" y1="5" x2="19" y2="19"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#424242" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-skip-forward"><polygon points="5 4 15 12 5 20 5 4"></polygon><line x1="19" y1="5" x2="19" y2="19"></line></svg>
diff --git a/motto/public/style.css b/motto/public/style.css
index 9de73ad..d9b1e02 100644
--- a/motto/public/style.css
+++ b/motto/public/style.css
@@ -1,6 +1,7 @@
*,
*:before,
*:after {
+ color: #424242;
box-sizing: border-box;
user-select: none;
padding: 0;
@@ -9,7 +10,8 @@
html,
body {
- background: #ccfbfe;
+ background-color: #eec0c6;
+ background-image: linear-gradient(315deg, #eec0c6 0%, #7ee8fa 74%);
font-family: sans-serif;
overflow: hidden;
}
@@ -60,8 +62,28 @@ body {
cursor: grabbing;
}
-.yay_or_nay {
+.sebastian {
+ display: none;
z-index: 100000;
+ width: 100vw;
+ height: 100vh;
+ overflow: scroll;
+ padding-top: 20px;
+ text-align: center;
+ transition: all 0.3s ease-in-out;
+}
+
+.sebastian li {
+ margin: 10px;
+}
+
+.sebastian button {
+ position: absolute;
+ right: 0;
+}
+
+.yay_or_nay {
+ z-index: 10000;
position: absolute;
bottom: 0;
flex: 0 0 100px;
@@ -70,6 +92,17 @@ body {
width: 100%;
}
+.blabla {
+ z-index: 100000;
+ position: absolute;
+ top: 0;
+ right: 0;
+ flex: 0 0 100px;
+ text-align: right;
+ padding-top: 20px;
+ width: 100%;
+}
+
.fab button {
z-index: 100000;
border-radius: 50%;
@@ -90,9 +123,16 @@ body {
vertical-align: middle;
}
-.add_button {
- position: absolute;
- right: 0;
- top: 0;
- bottom: unset;
+@media only screen and (max-width: 600px) {
+ .fab button {
+ margin: 10px;
+ }
+}
+
+@media only screen and (max-width: 400px) {
+ .fab button {
+ width: 50px;
+ height: 50px;
+ line-height: 30px;
+ }
}
diff --git a/motto/public/x.svg b/motto/public/x.svg
index f713136..7c925b2 100644
--- a/motto/public/x.svg
+++ b/motto/public/x.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#CDD6DD" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> \ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#424242" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>