~netlandish/links

6bc6d006f46523fe91e8ba5ff9fe6d8c6f587947 — Rael Monge 4 months ago 65b536b 
Creating a dialog and using it on the tour page
patch browse .tar.gz 
3 files changed, 96 insertions(+), 8 deletions(-)

M core/routes.go
M static/css/style.css
M templates/feature_tour.html

M core/routes.go => core/routes.go +1 -0
@@ 340,6 340,7 @@ func (s *Service) FeatureTour(c echo.Context) error {
	pd.Data["integrations"] = lt.Translate("Integrations")
	pd.Data["api_powered"] = lt.Translate("API Powered")
	pd.Data["import_export"] = lt.Translate("Import Export")
	pd.Data["analytics"] = lt.Translate("Analytics")

	pd.Data["public_private"] = lt.Translate("Public/Private")
	pd.Data["description"] = lt.Translate("Description")


M static/css/style.css => static/css/style.css +33 -1
@@ 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%;
}


M templates/feature_tour.html => templates/feature_tour.html +62 -7
@@ 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_bookmarks_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_linkshortening_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_linklistings_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_collaborate_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_integrations_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_graphql_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_import_small.png"}}"/>
        </div>
    </div>
    <div class="tour-section row">
        <div class="col-8">
            <h3 class="tour-title">{{.pd.Data.analytics}}</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_analytics_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 }}