From 5906259db59fb8309fb23ec1d829dfb6a256d473 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Bedna=C5=99=C3=ADk?= <jan.bednarik@gmail.com>
Date: Fri, 26 Jun 2020 23:51:19 +0200
Subject: [PATCH] senat campaign: CSS update
---
.../senat_campaign/assets/css/style.css | 30 ++++---
.../senat_campaign/assets/js/scripts.js | 88 ++++++++++---------
.../templates/senat_campaign/base.html | 4 +-
3 files changed, 65 insertions(+), 57 deletions(-)
diff --git a/senat_campaign/static/senat_campaign/assets/css/style.css b/senat_campaign/static/senat_campaign/assets/css/style.css
index e0640c312..48a720d27 100644
--- a/senat_campaign/static/senat_campaign/assets/css/style.css
+++ b/senat_campaign/static/senat_campaign/assets/css/style.css
@@ -65,7 +65,7 @@ h6, h6.lead {
}
}
-h1.lead, h2.lead, h3.lead, h4.lead, h5.lead, h6.lead, .richtext h1, .richtext h2, .richtext h3, .richtext h4, .richtext h5, .richtext h6 {
+h1.lead, h2.lead, h3.lead, h4.lead, h5.lead, h6.lead {
font-family: "Bebas Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
line-height: 1;
text-transform: uppercase;
@@ -252,6 +252,20 @@ section {
background: #212121;
}
+@media screen and (max-width: 1199.99px) {
+ .navbar {
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ z-index: 1030;
+ }
+
+ main {
+ margin-top: 80px;
+ }
+}
+
.navbar-dark .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(255, 255, 255)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
@@ -262,9 +276,6 @@ section {
margin-right: -1rem;
}
-.navbar.sticky-top {
- top: -1px;
-}
.nav-link {
display: block;
@@ -1110,21 +1121,16 @@ article img {
-/* ALT PRIORITIES */
-
-.priority-alt {
- margin-bottom: 3rem;
-}
+/* ARTICLE CONTENT */
.priority-alt__icon {
- width: 5rem;
+ max-width: 8rem;
margin-right: 1.6rem;
- flex-shrink: 0;
}
.priority-alt__content {
display: flex;
align-items: center;
- margin-bottom: 1rem;
+ margin-bottom: 2rem;
}
diff --git a/senat_campaign/static/senat_campaign/assets/js/scripts.js b/senat_campaign/static/senat_campaign/assets/js/scripts.js
index 7d5ef1f5d..70500eb54 100644
--- a/senat_campaign/static/senat_campaign/assets/js/scripts.js
+++ b/senat_campaign/static/senat_campaign/assets/js/scripts.js
@@ -1,49 +1,51 @@
+(function ($) {
- // Scroll to an element
- function scrollToElement(elementId, margin, upOnly) {
+ // Initialization
+ "use strict";
+ var nav = $('nav');
+ var navHeight = nav.outerHeight();
- // Defaults
- if (margin === undefined) {
- margin = 30;
- }
- if (upOnly === undefined) {
- upOnly = 0;
- }
+ // Fancybox
+ $('[data-fancybox="gallery"]').fancybox({
+ buttons: [
+ // "zoom",
+ //"share",
+ //"slideShow",
+ //"fullScreen",
+ //"download",
+ // "thumbs",
+ "close"
+ ],
+ });
- // Target position and current position
- var targetOffset = $(elementId).offset().top - (margin);
- var currentOffset = $(window).scrollTop();
-
- if (upOnly == 1) {
- // Check if target position is higher, we don't scroll down
- if (targetOffset < currentOffset) {
- // Animate the body to the position
- $('html, body').animate({
- scrollTop: targetOffset
- }, 400);
- }
- } else {
+
+ // Scroll function
+ $('a.js-scroll-anchor[href*="#"]:not([href="#"])').on("click", function () {
+ if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
+ var target = $(this.hash);
+ target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
+ if (target.length) {
$('html, body').animate({
- scrollTop: targetOffset
- }, 400);
+ scrollTop: (target.offset().top - navHeight + 5)
+ }, 1000);
+ return false;
}
+ }
+ });
+
+
+ // Closes responsive menu when a scroll trigger link is clicked
+ $('.js-scroll-anchor').on("click", function () {
+ $('.navbar-collapse').collapse('hide');
+ });
+
+ // Activate scrollspy to add active class to navbar items on scroll
+ $('body').scrollspy({
+ target: '#mainNavigation',
+ offset: navHeight + 200
+ });
+ /*--/ End Scrolling nav /--*/
+
+ $(window).trigger('scroll');
- }
-
- // Universal scrolling
- $(document).on('click','.js-scroll-anchor', {} ,function(e){
- e.preventDefault();
- scrollToElement($(this).attr("href"), 79);
- });
-
- $('[data-fancybox="gallery"]').fancybox({
- buttons: [
- // "zoom",
- //"share",
- //"slideShow",
- //"fullScreen",
- //"download",
- // "thumbs",
- "close"
- ],
- });
+ })(jQuery);
diff --git a/senat_campaign/templates/senat_campaign/base.html b/senat_campaign/templates/senat_campaign/base.html
index 2cf07267a..7bf3ba084 100644
--- a/senat_campaign/templates/senat_campaign/base.html
+++ b/senat_campaign/templates/senat_campaign/base.html
@@ -39,7 +39,7 @@
{% endif %}
</head>
-<body id="top" data-spy="scroll" data-offset="120" data-target="#mainNavigation">
+<body id="top">
{% wagtailuserbar %}
@@ -62,7 +62,7 @@
</div>
</div>
- <nav class="navbar navbar-expand-xl navbar-dark sticky-top">
+ <nav class="navbar navbar-expand-xl navbar-dark">
<div class="container">
<!-- Candidate name -->
--
GitLab