[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[www] 02/02: remove sticky attribute of navbar, add first rough "jump to
|
From: |
gnunet |
|
Subject: |
[www] 02/02: remove sticky attribute of navbar, add first rough "jump to top" button (needs improvement!) |
|
Date: |
Sun, 17 Nov 2019 16:43:19 +0100 |
This is an automated email from the git hooks/post-receive script.
ng0 pushed a commit to branch master
in repository www.
commit f03141ac42d6c80084161cc5e595bc492e85b4f1
Author: ng0 <address@hidden>
AuthorDate: Sun Nov 17 15:39:52 2019 +0000
remove sticky attribute of navbar, add first rough "jump to top" button
(needs improvement!)
---
GNUmakefile | 2 +-
Makefile | 2 +-
common/base.j2 | 6 +++++-
common/footer.j2.inc | 5 +++++
common/header.j2.inc | 5 +++++
common/navigation.j2.inc | 2 +-
common/news.j2 | 3 +++
static/scroll.css | 49 ++++++++++++++++++++++++++++++++++++++++++++++++
static/scroll.js | 12 ++++++++++++
9 files changed, 82 insertions(+), 4 deletions(-)
diff --git a/GNUmakefile b/GNUmakefile
index 7265c5e..ffe9c28 100644
--- a/GNUmakefile
+++ b/GNUmakefile
@@ -19,7 +19,7 @@
include config.mk
-all: css locale template
+all: locale template
($(cp) rendered/static/robots.txt rendered/robots.txt)
($(cp) rendered/static/stage.robots.txt rendered/stage.robots.txt)
($(cp) rendered/static/robots.txt rendered/dist/robots.txt)
diff --git a/Makefile b/Makefile
index 4011559..cc73b41 100644
--- a/Makefile
+++ b/Makefile
@@ -20,7 +20,7 @@ _DIRLIST= dist static
# All: build HTML pages in all languages and compile the
# TypeScript logic in web-common.
-all: css locale template
+all: locale template
.for _lang in ${_LOCALELIST}
($(cp) rendered/static/robots.txt rendered/${_lang})
($(cp) rendered/static/stage.robots.txt rendered/${_lang})
diff --git a/common/base.j2 b/common/base.j2
index 7003422..f82e4f2 100644
--- a/common/base.j2
+++ b/common/base.j2
@@ -10,7 +10,11 @@
<body id="mybody">
{% include "common/navigation.j2.inc" %}
<div id="body_content" class="bg-near-white">
- {% block body_content %}{% endblock %}
+ <!-- jump to top, TODO: the link does not cover all of the button -->
+ <a href="#" id="jump-top" role="button">
+ <i class="fas fa-chevron-up"></i>
+ </a>
+ {% block body_content %}{% endblock %}
</div>
{% include "common/footer.j2.inc" %}
</body>
diff --git a/common/footer.j2.inc b/common/footer.j2.inc
index 6d4614b..68a3b6d 100644
--- a/common/footer.j2.inc
+++ b/common/footer.j2.inc
@@ -31,5 +31,10 @@
<a href="https://git.gnunet.org/www.git";>{{ _("Source code of this
site.") }}</a>
<a href="{{ url_localized('contact.html') }}">{{ _("Report issues with
this website.") }}</a>
</p>
+ <noscript>
+ <p>
+ <a href="#">back to top</a>
+ </p>
+ </noscript>
</div>
</footer>
diff --git a/common/header.j2.inc b/common/header.j2.inc
index 9301948..2f80985 100644
--- a/common/header.j2.inc
+++ b/common/header.j2.inc
@@ -44,6 +44,11 @@
<script src="{{ url_dist('js/bootstrap.min.js') }}"></script>
<link href="{{ url_static('navbar.css') }}" rel="stylesheet">
+ <link href="{{ url_dist('font-awesome/css/all.css') }}" rel="stylesheet">
+
+ <link href="{{ url_static('scroll.css') }}" rel="stylesheet">
+ <script src="{{ url_static('scroll.js') }}"></script>
+
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media
queries -->
<!--[if lt IE 9]>
<script
src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js";></script>
diff --git a/common/navigation.j2.inc b/common/navigation.j2.inc
index a353fd1..dd7bb86 100644
--- a/common/navigation.j2.inc
+++ b/common/navigation.j2.inc
@@ -15,7 +15,7 @@
}
</style>
</noscript>
-<nav class="navbar sticky-top navbar-expand-md bg-near-black">
+<nav class="navbar top navbar-expand-md bg-near-black">
<a class="navbar-brand" href="{{ url_localized('index.html') }}">
<img src="{{ url_static('images/gnunet-logo-dark-only-text.png') }}"
alt="GNUnet" height="25px" />
</a>
diff --git a/common/news.j2 b/common/news.j2
index 9cdb06f..7140076 100644
--- a/common/news.j2
+++ b/common/news.j2
@@ -10,6 +10,9 @@
<body id="mybody">
{% include "common/navigation.j2.inc" %}
<div id="body_content" class="bg-near-white">
+ <a href="#" id="jump-top" role="button">
+ <i class="fas fa-chevron-up"></i>
+ </a>
<div class="container-fluid">
<div class="container text-center">
<h1>News</h1>
diff --git a/static/scroll.css b/static/scroll.css
new file mode 100644
index 0000000..b36c841
--- /dev/null
+++ b/static/scroll.css
@@ -0,0 +1,49 @@
+#jump-top {
+ position: fixed;
+ bottom: 20px;
+ right: 20px;
+ background: rgb(0, 0, 0);
+ background: rgba(0, 0, 0, 0.7);
+ width: 50px;
+ height: 50px;
+ display: block;
+ text-decoration: none;
+ -webkit-border-radius: 35px;
+ -moz-border-radius: 35px;
+ border-radius: 35px;
+ display: none;
+ -webkit-transition: all 0.3s linear;
+ -moz-transition: all 0.3s ease;
+ -ms-transition: all 0.3s ease;
+ -o-transition: all 0.3s ease;
+ transition: all 0.3s ease;
+}
+#jump-top i {
+ color: #fff;
+ margin: 0;
+ position: relative;
+ left: 16px;
+ top: 13px;
+ font-size: 19px;
+ -webkit-transition: all 0.3s ease;
+ -moz-transition: all 0.3s ease;
+ -ms-transition: all 0.3s ease;
+ -o-transition: all 0.3s ease;
+ transition: all 0.3s ease;
+}
+
+#jump-top:hover {
+ background: rgba(0, 0, 0, 0.9);
+}
+#jump-top:hover i {
+ color: #fff;
+ top: 5px;
+}
+/*
+.jump-top {
+ position: fixed;
+ bottom: 35px;
+ right: 35px;
+ display: none;
+}
+*/
diff --git a/static/scroll.js b/static/scroll.js
new file mode 100644
index 0000000..1180588
--- /dev/null
+++ b/static/scroll.js
@@ -0,0 +1,12 @@
+$(window).scroll(function() {
+ if ($(this).scrollTop() >= 50) {
+ $('#jump-top').fadeIn(200);
+ } else {
+ $('#jump-top').fadeOut(200);
+ }
+});
+$('#jump-top').click(function() {
+ $('html').animate({
+ scrollTop : 0
+ }, 500);
+});
--
To stop receiving notification emails like this one, please contact
address@hidden.