Merge pull request #3 from y1450/svg-fix

modal svg fix

assets/styles/base.scss

@@ -352,8 +352,24 @@ hr {
       }
     }
   }
+  .graph-grid{
+    display : grid;
+    grid-row:1/1;
+    grid-column:1/1;
+    grid-template-columns: 1fr;
+    & > svg {
+      margin-bottom: -5px;
+
+    }
+  }
+  .graph-grid>*{
+    grid-row:1/1;
+    grid-column:1/1;
+  }
 
   & #graph-container {
+    grid-row:1/1;
+    grid-column:1/1;
     border: var(--outlinegray) 1px solid;
     border-radius: 5px;
     box-sizing: border-box;
@@ -615,3 +631,4 @@ header {
     padding: 0 1em;
   }
 }
+

assets/styles/column.scss

@@ -43,7 +43,7 @@ a.active{
 }
 /* The Modal (background) */
 .modal {
-  display: none; /* Hidden by default */
+  visibility: hidden; /* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 1; /* Sit on top */
   padding-top: 100px; /* Location of the box */
@@ -79,3 +79,28 @@ a.active{
   text-decoration: none;
   cursor: pointer;
 }
+#global-graph-toggle-button
+{
+  float:right;
+   background-color: Transparent;
+   background-repeat:no-repeat;
+  border: none;  
+  padding:0.5em;
+}
+
+
+.icon {
+  display: inline-block;
+  width: 18px;
+  min-width:18px;
+  height: 18px;
+}
+#global-graph-svg{
+  background: black;
+  mask: url(graph.svg);
+  cursor:pointer;
+}
+#global-graph-svg:hover{
+  background: var(--primary);
+}
+

layouts/_default/single.html

@@ -62,7 +62,6 @@
       <aside data-sm1-2 data-md1-2 data-lg1-4 data-lg3 data-m3 data-sm3 data-xs2>
         <div class="sticky">
           <div class="page-end vertical">
-            <button id="myBtn">Open Modal</button>
             <div id="myModal" class="modal">
               <div class="modal-content">
                 <span class="close">&times;</span>

layouts/partials/graph.html

@@ -4,7 +4,16 @@
   crossorigin="anonymous"
 ></script>
 <h3>Interactive Graph</h3>
-<div id="graph-container"></div>
+<div class="graph-grid">
+<div>
+<button id="global-graph-toggle-button">
+<span id="global-graph-svg" class="icon"></span>
+</button>
+</div>
+<div id="graph-container">
+</div>
+</div>
+
 <style>
   :root {
     --g-node: var(--secondary);

layouts/partials/head.html

@@ -116,16 +116,11 @@
       {{end}}
       
       {{if $.Site.Data.config.enableColumnLayout}}
-
+      const containerModal = document.getElementById("graph-container-modal")
-
+      // retry if the graph is not ready
-      // draw graph in modal // not working
+      if (!containerModal) return requestAnimationFrame(render)
-
+      // clear the graph in case there is anything within it
-      // const containerModal = document.getElementById("graph-container-modal")
+      containerModal.textContent = ""
-      // // retry if the graph is not ready
-      // if (!containerModal) return requestAnimationFrame(render)
-      // // clear the graph in case there is anything within it
-      // containerModal.textContent = ""
-
       drawGraph(
           {{strings.TrimRight "/" .Site.BaseURL}},
           true,
@@ -166,7 +161,7 @@
       // When the user clicks anywhere outside of the modal, close it
       window.onclick = function(event) {
         if (event.target == modal) {
-          modal.style.display = "none";
+          modal.style.visibility = "hidden";
         }
       }
 
@@ -178,19 +173,19 @@
         var modal = document.getElementById("myModal");
 
         // Get the button that opens the modal
-        var btn = document.getElementById("myBtn");
+        var btn = document.getElementById("global-graph-toggle-button");
 
         // Get the <span> element that closes the modal
         var span = document.getElementsByClassName("close")[0];
 
         // When the user clicks the button, open the modal
         btn.onclick = function() {
-          modal.style.display = "block";
+          modal.style.visibility = "visible";
         }
 
         // When the user clicks on <span> (x), close the modal
         span.onclick = function() {
-          modal.style.display = "none";
+          modal.style.visibility = "hidden";
         }
       {{end}}
 

static/graph.svg

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 55 55" style="enable-background:new 0 0 55 55;" xml:space="preserve">
+<path d="M49,0c-3.309,0-6,2.691-6,6c0,1.035,0.263,2.009,0.726,2.86l-9.829,9.829C32.542,17.634,30.846,17,29,17
+	s-3.542,0.634-4.898,1.688l-7.669-7.669C16.785,10.424,17,9.74,17,9c0-2.206-1.794-4-4-4S9,6.794,9,9s1.794,4,4,4
+	c0.74,0,1.424-0.215,2.019-0.567l7.669,7.669C21.634,21.458,21,23.154,21,25s0.634,3.542,1.688,4.897L10.024,42.562
+	C8.958,41.595,7.549,41,6,41c-3.309,0-6,2.691-6,6s2.691,6,6,6s6-2.691,6-6c0-1.035-0.263-2.009-0.726-2.86l12.829-12.829
+	c1.106,0.86,2.44,1.436,3.898,1.619v10.16c-2.833,0.478-5,2.942-5,5.91c0,3.309,2.691,6,6,6s6-2.691,6-6c0-2.967-2.167-5.431-5-5.91
+	v-10.16c1.458-0.183,2.792-0.759,3.898-1.619l7.669,7.669C41.215,39.576,41,40.26,41,41c0,2.206,1.794,4,4,4s4-1.794,4-4
+	s-1.794-4-4-4c-0.74,0-1.424,0.215-2.019,0.567l-7.669-7.669C36.366,28.542,37,26.846,37,25s-0.634-3.542-1.688-4.897l9.665-9.665
+	C46.042,11.405,47.451,12,49,12c3.309,0,6-2.691,6-6S52.309,0,49,0z M11,9c0-1.103,0.897-2,2-2s2,0.897,2,2s-0.897,2-2,2
+	S11,10.103,11,9z M6,51c-2.206,0-4-1.794-4-4s1.794-4,4-4s4,1.794,4,4S8.206,51,6,51z M33,49c0,2.206-1.794,4-4,4s-4-1.794-4-4
+	s1.794-4,4-4S33,46.794,33,49z M29,31c-3.309,0-6-2.691-6-6s2.691-6,6-6s6,2.691,6,6S32.309,31,29,31z M47,41c0,1.103-0.897,2-2,2
+	s-2-0.897-2-2s0.897-2,2-2S47,39.897,47,41z M49,10c-2.206,0-4-1.794-4-4s1.794-4,4-4s4,1.794,4,4S51.206,10,49,10z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>