Merge pull request #54 from coder12git/fix-modal

[Docs Feature] Picture in Modal

README.md

@@ -48,7 +48,12 @@ The significant keys in the YAML frontmatter are:
 
 <div>&nbsp;</div>
 
-## Join the Layer5 community!
+### Uploading Images to the site
+To display images in a pop-up modal, use the following syntax: `![alt text](/path/to/image.svg)`. 
+
+**Note-> For images to show correctly on subpages, always provide the complete image path**
+
+<hr/>
 
 <a name="contributing"></a><a name="community"></a>
 Our projects are community-built and welcome collaboration. 👍 Be sure to see the <a href="https://docs.google.com/document/d/17OPtDE_rdnPQxmk2Kauhm3GwXF1R5dZ3Cj8qZLKdo5E/edit">Layer5 Community Welcome Guide</a> for a tour of resources available to you and jump into our <a href="http://slack.layer5.io">Slack</a>!

assets/scss/_elements_project.scss

@@ -76,6 +76,9 @@ div.tip {
     padding-bottom: 10px;
     padding-top: 10px;
   }
+  .image-center-no-shadow{
+    width: 100%;
+  }
 
   .align-right {
     display: block;

assets/scss/_image-modal_project.scss

@@ -7,20 +7,19 @@
 .modal {
   display: none;
   position: fixed;
-  z-index: 1;
+  z-index: 9999999;
   padding-top: 4em;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
-  background-color: black;
+  background: rgba(0,0,0,0.85);
 }
 
 /* Modal Content */
-.modal-content {
+.modal-cont {
   position: relative;
-  background-color: black;
   margin: auto;
   padding: 0;
   width: 90%;
@@ -40,16 +39,16 @@
   color: white;
   background-color: black;
   position: absolute;
-  top: .5em;
-  right: .5em;
-  font-size: 2em;
-  font-weight: bold;
+  top: 5px;
+  right: 5px;
+  font-size: 2.5em;
   height: 1em;
   width: 1em;
   text-indent: 10em;
   overflow: hidden;
   border: 0;
-}
+  z-index: 99;
+} 
 
 .modal-close::after {
   position: absolute;

content/en/cloud/_index.md

@@ -6,7 +6,7 @@ menu: {main: {weight: 2}}
 cascade: 
     type: docs
 ---
-{{< figure src="layer5-cloud-provider.svg"  class="image-center-shadow" >}}
+![layer5-cloud-provider](layer5-cloud-provider.svg "image-center-shadow")
 {{% pageinfo %}}
 
 ## Understanding the Meshery Ecosystem

content/en/cloud/concepts/_index.md

@@ -5,7 +5,7 @@ description: >
   An overview of Layer5 Cloud concepts and their relationships to one another.
 ---
 
-{{< figure src="concepts-overview.svg"  class="image-center-shadow" >}}
+![concepts-overview](concepts-overview.svg "image-center-shadow")
 
 <!--
 {{% pageinfo %}}

content/en/cloud/security/_index.md

@@ -7,8 +7,10 @@ categories: [Security]
 tags: [permissions]
 ---
 
-{{< figure src="roles-overview.svg" >}}
-{{< figure src="images/role-provider-admin.svg" link="images/role-provider-admin.svg"  width="100%"  >}}
+![roles](roles-overview.svg "image-center-no-shadow")
+
+![provider](images/role-provider-admin.svg#float-left "image-center-no-shadow")
+
 
 
 <!-- Think about your project’s features and use cases. Use these to choose your core tasks. Each granular use case (enable x, configure y) should have a corresponding tasks page or tasks page section. Users should be able to quickly refer to your core tasks when they need to find out how to do one specific thing, rather than having to look for the instructions in a bigger tutorial or example. Think of your tasks pages as a cookbook with different procedures your users can combine to create something more substantial.

content/en/cloud/self-hosted/_index.md

@@ -5,8 +5,7 @@ description: >
   Keep your MeshMap designs internal to your workplace. Get remote support from Layer5 when you need it.
 ---
 
-{{< figure src="images/self-hosted.svg" link="images/self-hosted.svg" class="image-right-no-shadow" >}}
-
+![self-hosted](images/self-hosted.svg "image-right-no-shadow")
 
 ## On-premises Deployment of Layer5 Cloud
 
@@ -18,13 +17,12 @@ Whitelabeling is supported by Layer5 Cloud. The following diagram illustrates th
 
 ## Considerations of Self-Hosted Deployments
 
-{{< figure src="images/self-hosted-deployment.svg" link="images/self-hosted-deployment.svg" class="image-center-no-shadow" >}}
+![self-hosted-deployment](images/self-hosted-deployment.svg "image-center-no-shadow")
 
 ## Considerations of Peer-to-Peer Communication and Central Coordination
 
 
-{{< figure src="images/meshmap-collaboration-networking.svg" link="images/meshmap-collaboration-networking.svg" class="image-center-no-shadow" >}}
-
+![meshmap-collaboration-networking](images/meshmap-collaboration-networking.svg "image-center-no-shadow")
 
 
 ## Consideration for Air-Gapped Deployments

layouts/_default/_markup/render-image.html

@@ -5,8 +5,8 @@
 <!-- Id for the image on the page is set to a random 6 numbers, chosen from 1 to 500 -->
 <!-- Onclick opens the modal, and displays/overlays the the image that has the id for the 
   clicked image. -->
-<!-- from: https://gist.github.com/zjeaton/0cdd7e4bed9d292ab6f3d76b0369f16d -->
+<!-- attribution appreciated. github: zjeaton web: https://froglegs.co -->
 
 <div class="md__image">
-    <img id="{{ first 6 (shuffle (seq 1 500)) }}" src="{{ .Destination | safeURL }}" onclick="openModal(this.id)" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
+  <img id="{{ first 6 (shuffle (seq 1 500)) }}" src="{{ .Destination | safeURL }}" onclick="openModal(this.id)" alt="{{ .Text }}" {{ with .Title}} class="{{ . }}" {{ end }} />
 </div>

layouts/_default/baseof.html

@@ -14,6 +14,6 @@
       {{ partial "footer.html" . }}
     </div>
     {{ partialCached "scripts.html" . }}
-    {{ partialCached "image-modal.html" . }}
+    {{ partial "image-modal.html" . }}
   </body>
 </html>

layouts/docs/baseof.html

@@ -28,5 +28,6 @@
       {{ partial "footer.html" . }}
     </div>
     {{ partial "scripts.html" . }}
+    {{ partial "image-modal.html" . }}
   </body>
 </html>

layouts/partials/image-modal.html

@@ -5,32 +5,32 @@
 
 <!-- The Modal -->
 <div id="myModal" class="modal">
-    <button class="modal-close" onclick="closeModal()">close</button>
-    <div class="modal-content">
-      <img class="modal-pic" id="modalPic" onclick="closeModal()" style="max-width: 100%; max-height: 80vh; margin: auto;">
-    </div>
+  <button class="modal-close" onclick="closeModal()">close</button>
+  <div class="modal-cont">
+    <img class="modal-pic" id="modalPic" onclick="closeModal()" style="max-width: 100%; max-height: 80vh; margin: auto;">
   </div>
-
-  <script>
-  // Open the Modal
-  function openModal(clicked_id) {
-    var src = document.getElementById(clicked_id).src;
-    if (src.includes("#")) {
-      src = src.substring(0, src.indexOf( "#" ));
-    };
-    document.getElementById("modalPic").src = src;
-    document.getElementById("myModal").style.display = "block";
-    // Ensures the site footer is not shown if front of the modal. Remove if this is not an issue or
-    // there is no footer. "site-footer" id can also be changed appropriately.
-    document.getElementById("site-footer").style.display = "hidden";
-  }
-
-  // Close the Modal
-  function closeModal() { 
-    // prevents flashing last modal image while new id is loading on open
-    document.getElementById("modalPic").src = "";
-    document.getElementById("myModal").style.display = "none";
-    // See note above regarding the footer 
-    document.getElementById("site-footer").style.display = "block";
-  }
-  </script>
+</div>
+
+<script>
+// Open the Modal
+function openModal(clicked_id) {
+  var src = document.getElementById(clicked_id).src;
+  if (src.includes("#")) {
+    src = src.substring(0, src.indexOf( "#" ));
+  };
+  document.getElementById("modalPic").src = src;
+  document.getElementById("myModal").style.display = "block";
+  // Ensures the site footer is not shown if front of the modal. Remove if this is not an issue or
+  // there is no footer. "site-footer" id can also be changed appropriately.
+  document.getElementById("site-footer").style.display = "hidden";
+}
+
+// Close the Modal
+function closeModal() { 
+  // prevents flashing last modal image while new id is loading on open
+  document.getElementById("modalPic").src = "";
+  document.getElementById("myModal").style.display = "none";
+  // See note above regarding the footer 
+  document.getElementById("site-footer").style.display = "block";
+}
+</script>