Merge pull request #46 from nopslip/richard-demo-implementation

Richard demo implementation
gitcoinco · Nov 1, 2020 · 6c1912c · 6c1912c
2 parents beb7471 + 7f9504b
commit 6c1912c
Show file tree

Hide file tree

Showing 7 changed files with 265 additions and 131 deletions.
diff --git a/app/assets/quadraticlands/css/app.css b/app/assets/quadraticlands/css/app.css
@@ -1100,6 +1100,27 @@ table thead td {
   color: var(--white);
 }
 
+#flashMessageContainer {
+  z-index: 10000;
+  position: fixed;
+  top: 1em;
+  right: 1em;
+  width: 300px;
+}
+#flashMessageContainer div {
+  display: block;
+  background-color: var(--aqua_light);
+  color: var(--space);
+  line-height: 1.3em;
+  margin-bottom: 0.5em;
+  padding: 0.5em 1em;
+  font-size: 75%;
+  font-family: "Space Mono", monospace;
+  font-weight: 400;
+  transition: all 1s linear;
+  animation: colorcycle 1s ease-in-out infinite;
+}
+
 /* section */
 section.column {
   margin-bottom: 6em;
@@ -1271,12 +1292,15 @@ section.quest main div.claim {
 section.quest main div.claim p {
   margin-bottom: initial;
 }
+section.quest main div.claim .claimAdress {
+  width: 100%;
+}
 section.quest main div.claim div.grid {
   display: grid;
   grid-template-columns: 1fr auto;
-  grid-row-gap: 0.3em;
+  grid-row-gap: 0.2em;
   font-family: "Space Mono", monospace;
-  line-height: 1.6em;
+  line-height: 1.5em;
 }
 section.quest main div.claim div.grid span.description {
   justify-self: start;
@@ -1496,13 +1520,12 @@ section#footer a:hover {
 
 .recieveadress {
   display: block;
-  padding: 1em 2em;
-  border: 1px solid var(--aqua_light);
+  padding: 0.5em 1em;
   color: var(--aqua_light);
   font-family: "Space Mono", monospace;
   background-color: var(--smoke);
   font-size: 100%;
-  text-align: right;
+  text-align: center;
   margin-bottom: 2em;
-  word-wrap: break-word;
+  word-break: break-all;
 }
diff --git a/app/assets/quadraticlands/js/app.js b/app/assets/quadraticlands/js/app.js
@@ -43,35 +43,51 @@ navWalletCloseOnClick.forEach(item => {
 
 
 
+// COLLAPSE
+//
+// find all classes .collapse 
+// 
+// click div.question
+// toggle visibility on div.awnser
+
+const collapse = document.querySelectorAll(".collapse");
+
+collapse.forEach(item => {
+	item.addEventListener("click", () => {
+		item.classList.toggle("visible");
+	});
+});
+
+
 
 
 // FLASH MESSAGE
 //
 // display all kind of errors and messages to a users client
 
-const flashMessageContainer = document.getElementById("flashMessageContainer");
 
-console.log("FLASH MESSAGE");
+function flashMessage(text, duration=8000){
 
+	const flashMessageContainer = document.getElementById("flashMessageContainer");
 
+	var msg = document.createElement("div");
+	msg.innerHTML = text;
+	flashMessageContainer.appendChild(msg);
 
+	setTimeout(() => {  
+		flashMessageContainer.removeChild(msg);
+	}, duration);
 
+}
+
+//test flash message 
+//setTimeout(() => {  flashMessage("eine sekunde"); }, 1000);
+//setTimeout(() => {  flashMessage("zehn sekunden",10000); }, 3000);
+//setTimeout(() => {  flashMessage("zwei sekunden",2000); }, 5000);
 
 
-// COLLAPSE
-//
-// find all classes .collapse 
-// 
-// click div.question
-// toggle visibility on div.awnser
 
-const collapse = document.querySelectorAll(".collapse");
 
-collapse.forEach(item => {
-	item.addEventListener("click", () => {
-		item.classList.toggle("visible");
-	});
-});
 
 
 

diff --git a/app/quadraticlands/templates/quadraticlands/components/base.html b/app/quadraticlands/templates/quadraticlands/components/base.html
@@ -24,6 +24,7 @@
   </head>
 
   <body>
+    {% include 'quadraticlands/components/flashmessage.html' %}
     {% include 'quadraticlands/components/particles.html' %}
     {% include 'quadraticlands/components/nav.html' %}
 

diff --git a/app/quadraticlands/templates/quadraticlands/components/flashmessage.html b/app/quadraticlands/templates/quadraticlands/components/flashmessage.html
@@ -0,0 +1 @@
+<div id="flashMessageContainer"></div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,6 +24,7 @@ @@
       </head>
       <body>
+        {% include 'quadraticlands/components/flashmessage.html' %}
         {% include 'quadraticlands/components/particles.html' %}
         {% include 'quadraticlands/components/nav.html' %}
@@ Expand Down @@