links: Creating a dialog and using it on the tour page v1 APPLIED

Rael Monge: 1
 Creating a dialog and using it on the tour page

 2 files changed, 95 insertions(+), 8 deletions(-)

[PATCH links] Creating a dialog and using it on the tour page Export this patch

---
 static/css/style.css        | 34 +++++++++++++++++-
 templates/feature_tour.html | 69 +++++++++++++++++++++++++++++++++----
 2 files changed, 95 insertions(+), 8 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 7910889..638b6e3 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -820,4 +820,36 @@ a.bullet-link:before {
   justify-content: center;
   margin-top: 16px;
   margin-bottom: 16px;
-}
\ No newline at end of file
+}
+
+.hide-dialog {
+  display: none;
+}
+
+.show-dialog {
+  display: flex;
+}
+
+.close-dialog-div {
+  z-index: -1;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+}
+
+#dialog-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: rgba(0,0,0,0.5);
+  height: 100%;
+  border: solid 1px black;
+  justify-content: center;
+  align-items: center;
+}
+
+#dialog-image {
+  max-width: 95%;
+  max-height: 95%;
+}
diff --git a/templates/feature_tour.html b/templates/feature_tour.html
index 6b95acf..c339f0f 100644
--- a/templates/feature_tour.html
+++ b/templates/feature_tour.html
@@ -34,7 +34,7 @@
             </div>
         </div>
         <div class="col-4">
-            <img class="tour-section-img" src="{{staticURL "img/example.png"}}"/>
+            <img class="tour-section-img" src="{{ staticURL "img/web/lt_analytics_small.png" }}"/>
         </div>
     </div>
     <div class="tour-section row">
@@ -56,7 +56,7 @@
             </div>
         </div>
         <div class="col-4">
-            <img class="tour-section-img" src="{{staticURL "img/example.png"}}"/>
+            <img class="tour-section-img" src="{{staticURL "img/web/lt_bookmarks_small.png"}}"/>
         </div>
     </div>
     <div class="tour-section row">
@@ -79,7 +79,7 @@
             </div>
         </div>
         <div class="col-4">
-            <img class="tour-section-img" src="{{staticURL "img/example.png"}}"/>
+            <img class="tour-section-img" src="{{staticURL "img/web/lt_collaborate_small.png"}}"/>
         </div>
     </div>
     <div class="tour-section row">
@@ -98,7 +98,7 @@
             </div>
         </div>
         <div class="col-4">
-            <img class="tour-section-img" src="{{staticURL "img/example.png"}}"/>
+            <img class="tour-section-img" src="{{staticURL "img/web/lt_graphql_small.png"}}"/>
         </div>
     </div>
     <div class="tour-section row">
@@ -118,7 +118,7 @@
             </div>
         </div>
         <div class="col-4">
-            <img class="tour-section-img" src="{{staticURL "img/example.png"}}"/>
+            <img class="tour-section-img" src="{{staticURL "img/web/lt_import_small.png"}}"/>
         </div>
     </div>
     <div class="tour-section row">
@@ -138,7 +138,7 @@
             </div>
         </div>
         <div class="col-4">
-            <img class="tour-section-img" src="{{staticURL "img/example.png"}}"/>
+            <img class="tour-section-img" src="{{staticURL "img/web/lt_integrations_small.png"}}"/>
         </div>
     </div>
     <div class="tour-section row">
@@ -157,8 +157,63 @@
             </div>
         </div>
         <div class="col-4">
-            <img class="tour-section-img" src="{{staticURL "img/example.png"}}"/>
+            <img class="tour-section-img" src="{{staticURL "img/web/lt_linklistings_small.png"}}"/>
+        </div>
+    </div>
+    <div class="tour-section row">
+        <div class="col-8">
+            <h3 class="tour-title">{{.pd.Data.import_export}}</h3>
+            <ul>
+                <li>{{.pd.Data.import_pinboard}}</li>
+                <li>{{.pd.Data.export_json}}</li>
+            </ul>
+            <div class="tour-description">
+                <p>
+                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro voluptate illo alias fugit
+                    nobis, accusamus, quae eius repellat quaerat.
+                </p>
+                <p>— Juan Perez, Netlandish Inc.</p>
+            </div>
+        </div>
+        <div class="col-4">
+            <img class="tour-section-img" src="{{staticURL "img/web/lt_linkshortening_small.png"}}"/>
         </div>
     </div>
 </section>
+
+<div id="dialog-container" class="hide-dialog">
+    <div class="close-dialog-div" onclick="closeDialog()"></div>
+    <img src="" alt="image from dialog" id="dialog-image">
+</div>
+  
 {{template "base_footer" .}}
+
+{{ define "extrajs" }}
+<script>
+    const openDialog = (photoName) => {
+        document.getElementById("dialog-image").src = "";
+        document.getElementById("dialog-image").src = "https://s3.amazonaws.com/linktaco/media/web/" + photoName;
+        document.getElementById("dialog-container").classList.remove("hide-dialog");
+        document.getElementById("dialog-container").classList.add("show-dialog");
+    };
+    const closeDialog = () => {
+        document.getElementById("dialog-container").classList.add("hide-dialog");
+        document.getElementById("dialog-container").classList.remove("show-dialog");
+    };
+
+    const images = document.getElementsByClassName("tour-section-img");
+
+    for(let i = 0; i < images.length; i++) {
+        images[i].addEventListener("click", (event) => {
+            openDialog(images[i].src.split("/").at(-1).replace("_small", ""));
+        });
+    }
+
+    document.addEventListener("keydown", (event) => {
+        const keyName = event.key;
+        if (keyName === "Escape") {
+            closeDialog();
+        }
+    });
+</script>
+{{ end }}
-- 
2.34.1

Peter Sanchez <peter@netlandish.com>

3 months ago

I made some slight changes for alignment reasons but thank you for the
patch! It's been applied.

Peter