diff options
author | Darshan Baral <darshanbaral@gmail.com> | 2019-06-10 04:57:05 +0300 |
---|---|---|
committer | Darshan Baral <darshanbaral@gmail.com> | 2019-06-10 04:57:05 +0300 |
commit | 1ffa696b4a19841727178914acc29afe485abd13 (patch) | |
tree | 3b00d0d072098f107d9ef1348c0fd44d80590606 | |
parent | 9a7441889c82bc56eed0a3721580900b7d9d980c (diff) |
Added share button
-rw-r--r-- | layouts/_default/baseof.html | 3 | ||||
-rw-r--r-- | layouts/_default/single.html | 23 | ||||
-rw-r--r-- | layouts/partials/header.html | 2 | ||||
-rw-r--r-- | layouts/partials/sidebar.html | 27 | ||||
-rw-r--r-- | static/css/kitab.css | 9 | ||||
-rw-r--r-- | static/js/myFunctions.js | 20 |
6 files changed, 57 insertions, 27 deletions
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 989e22b..a3c74ab 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -3,9 +3,10 @@ {{ partial "head.html" . }} <body class="container" style="max-width: 1024px;"> {{ partial "header" . }} - <main class="mt-3"> + <main class="mt-3" style="margin-left: 32px;"> {{ block "main" . }} {{ end }} </main> + {{ partial "sidebar" . }} </body> </html> diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 16f2213..5e4e31a 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -1,29 +1,8 @@ {{ define "main" }}
<div class="mb-2">
<h2>{{ .Title }}</h2>
- <div class="rounded p-2 shadow" style="margin-left: 32px;">
+ <div class="rounded p-2 shadow">
{{ .Content }}
</div>
-
- <div class="toTop" style="width: 25px;">
- {{ partial "previousChapter" . }}
- {{ partial "nextChapter" . }}
- <p class="navMenu menuItem mb-1 mt-1 text-left">
- <i
- class="fas fa-chevron-circle-up"
- title="Scroll to top"
- onclick="scrollToTop()"
- ></i>
- </p>
- <p class="about text-left mb-0">
- <a href="https://github.com/darshanbaral/kitab">
- <small class="text-secondary">kitab</small>
- <br />
- </a>
- <a href="https://www.darshanbaral.com/">
- <small class="text-secondary">d.b</small>
- </a>
- </p>
- </div>
</div>
{{ end }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 4045ad4..f8ce3fa 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,7 +1,7 @@ <nav>
<div class="d-flex flex-row mt-2 border-bottom">
<div class="menuItem navMenu mr-2">
- <a href="{{ `/` | relURL }}"><i class="fas fa-home"></i></a>
+ <a href="{{ `/` | relURL }}"><i title="Home" class="fas fa-home"></i></a>
</div>
<div class="dropdown">
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html new file mode 100644 index 0000000..cd9069e --- /dev/null +++ b/layouts/partials/sidebar.html @@ -0,0 +1,27 @@ +<div class="toTop" style="width: 25px;"> + {{ partial "previousChapter" . }} + {{ partial "nextChapter" . }} + <p class="navMenu menuItem mb-1 mt-1 text-left"> + <i + class="fas fa-chevron-circle-up" + title="Scroll to top" + onclick="scrollToTop()" + ></i> + </p> + <p class="navMenu menuItem mb-1 mt-1 text-left"> + <i + title="Copy URL to share" + class="fas fa-share-alt" + onclick="copyUrl({{ .URL | absURL }})" + ></i> + </p> + <p class="about text-left mb-0"> + <a href="https://github.com/darshanbaral/kitab"> + <small class="text-secondary">kitab</small> + <br /> + </a> + <a href="https://www.darshanbaral.com/"> + <small class="text-secondary">d.b</small> + </a> + </p> +</div> diff --git a/static/css/kitab.css b/static/css/kitab.css index 4b6065d..e6e764d 100644 --- a/static/css/kitab.css +++ b/static/css/kitab.css @@ -1,6 +1,3 @@ -html {
- width: 100vw;
-}
* {
font-family: "Roboto", sans-serif;
}
@@ -66,3 +63,9 @@ a:hover { padding-left: 15px;
text-indent: -15px;
}
+#copiedMessage {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transition: all 1s;
+}
diff --git a/static/js/myFunctions.js b/static/js/myFunctions.js index 2bcca8e..d3bbf13 100644 --- a/static/js/myFunctions.js +++ b/static/js/myFunctions.js @@ -5,3 +5,23 @@ let scrollToTop = () => { window.scrollTo(0, c - c / 8);
}
};
+
+function copyUrl(text) {
+ let copyFrom = document.createElement("textarea");
+ copyFrom.textContent = text;
+ document.body.appendChild(copyFrom);
+ copyFrom.select();
+ document.execCommand("copy");
+ copyFrom.blur();
+ document.body.removeChild(copyFrom);
+
+ let copiedMessage = document.createElement("div");
+ copiedMessage.id = "copiedMessage";
+ copiedMessage.textContent = "Link copied to clipboard";
+ copiedMessage.classList.add("bg-warning", "shadow", "p-4", "d-block");
+ document.body.appendChild(copiedMessage);
+
+ setTimeout(function() {
+ copiedMessage.style.opacity = 0;
+ }, 500);
+}
|