From bb9b52babc37981cc4c7afeb559fccee1140c4f4 Mon Sep 17 00:00:00 2001 From: Sunny Rahul Date: Mon, 11 Jul 2022 19:49:11 +0200 Subject: [PATCH 1/3] modal svg fix --- assets/styles/column.scss | 2 +- layouts/partials/head.html | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/assets/styles/column.scss b/assets/styles/column.scss index 52f9b49cf..3758a51e5 100644 --- a/assets/styles/column.scss +++ b/assets/styles/column.scss @@ -27,7 +27,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 */ diff --git a/layouts/partials/head.html b/layouts/partials/head.html index e3bc5484a..d2182ea3b 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -127,7 +127,7 @@ {{end}} - // draw graph in modal // not working + // draw graph in hidden // not working // const containerModal = document.getElementById("graph-container-modal") // // retry if the graph is not ready @@ -174,7 +174,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"; } } @@ -198,12 +198,12 @@ // 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 (x), close the modal span.onclick = function() { - modal.style.display = "none"; + modal.style.visibility = "hidden"; } {{end}} From a8238b107774bb0d559837a8219b2930f8e66588 Mon Sep 17 00:00:00 2001 From: Sunny Rahul Date: Mon, 11 Jul 2022 23:10:46 +0200 Subject: [PATCH 2/3] fix multiple svg in graph --- layouts/partials/head.html | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/layouts/partials/head.html b/layouts/partials/head.html index d2182ea3b..8f0585355 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -128,12 +128,13 @@ {{end}} // draw graph in hidden // not working + const containerModal = document.getElementById("graph-container-modal") + // retry if the graph is not ready + if (!containerModal) return requestAnimationFrame(render) + // clear the graph in case there is anything within it + containerModal.textContent = "" + - // const containerModal = document.getElementById("graph-container-modal") - // // 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}}, From 26772f858ef8376f9a8c80f55f73824048e2108e Mon Sep 17 00:00:00 2001 From: Sunny Rahul Date: Tue, 12 Jul 2022 01:21:07 +0200 Subject: [PATCH 3/3] replace modal button to inline button in graph --- assets/styles/base.scss | 17 +++++++++++++ assets/styles/column.scss | 25 ++++++++++++++++++++ layouts/_default/single.html | 1 - layouts/partials/graph.html | 11 ++++++++- layouts/partials/head.html | 2 +- static/graph.svg | 46 ++++++++++++++++++++++++++++++++++++ 6 files changed, 99 insertions(+), 3 deletions(-) create mode 100644 static/graph.svg diff --git a/assets/styles/base.scss b/assets/styles/base.scss index 1669cdfa2..4de5ed70b 100644 --- a/assets/styles/base.scss +++ b/assets/styles/base.scss @@ -345,8 +345,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; @@ -608,3 +624,4 @@ header { padding: 0 1em; } } + diff --git a/assets/styles/column.scss b/assets/styles/column.scss index 3758a51e5..977caf5b5 100644 --- a/assets/styles/column.scss +++ b/assets/styles/column.scss @@ -63,3 +63,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); +} + diff --git a/layouts/_default/single.html b/layouts/_default/single.html index b10830274..4a08e9c05 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -62,7 +62,6 @@