diff options
author | Ralf Geschke <ralf@kuerbis.org> | 2018-11-10 22:35:13 +0300 |
---|---|---|
committer | Ralf Geschke <ralf@kuerbis.org> | 2018-11-10 22:35:13 +0300 |
commit | 38f0abe4a0138bb28e6b73f745b948b8eecc1dd5 (patch) | |
tree | 029c2b163e2f3074a653f920d1e767fdad321536 | |
parent | 1049a48ebd1061cc8398d1ccab1b397ccc0c1e64 (diff) |
Work in progress on default header elements, test some Go template functions & features
-rw-r--r-- | layouts/_default/baseof.html | 21 | ||||
-rw-r--r-- | layouts/partials/bottom.html | 4 | ||||
-rw-r--r-- | layouts/partials/footer_container.html | 2 | ||||
-rw-r--r-- | layouts/partials/head.html | 104 | ||||
-rw-r--r-- | layouts/partials/header_default.html | 143 | ||||
-rw-r--r-- | layouts/partials/header_fixed_top.html | 12 | ||||
-rw-r--r-- | layouts/partials/navbar_items.html | 29 | ||||
-rw-r--r-- | layouts/partials/subfooter_container.html | 2 | ||||
-rw-r--r-- | static/css/custom.css | 8 | ||||
-rw-r--r-- | static/js/functions.js | 134 |
10 files changed, 335 insertions, 124 deletions
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index aa0a673..e059869 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -3,13 +3,20 @@ {{- partial "head.html" . -}} <body> - {{- partial "header.html" . -}} - <div class="container"> - <div class="row"> - <div class="col-md" id="content"> - {{- block "main" . }}{{- end }} - </div> + {{ if .Site.Params.Navbar.FixedTop }} + {{- partial "header_fixed_top.html" . -}} + {{ else }} + {{- partial "header_default.html" . -}} + {{ end }} + + <div id="main"> + <div class="container"> + <div class="row"> + <div class="col-md" id="content"> + {{- block "main" . }}{{- end }} + </div> + </div> </div> </div> @@ -17,6 +24,8 @@ {{ partial "footer_container.html" . }} {{ partial "subfooter_container.html" . }} {{ end }} + + <div id="media-width-detection-element"></div> </body> {{- partial "bottom.html" . -}} diff --git a/layouts/partials/bottom.html b/layouts/partials/bottom.html index ec23294..45da5e2 100644 --- a/layouts/partials/bottom.html +++ b/layouts/partials/bottom.html @@ -1,3 +1,3 @@ -<script src="{{ .Site.BaseURL }}js/jquery-3.3.1.min.js"></script> + <script src="{{ .Site.BaseURL }}js/popper.js"></script> -<script src="{{ .Site.BaseURL }}js/bootstrap.min.js"></script>
\ No newline at end of file +<script src="{{ .Site.BaseURL }}js/bootstrap.min.js"></script> diff --git a/layouts/partials/footer_container.html b/layouts/partials/footer_container.html index 5b2498e..7c271f0 100644 --- a/layouts/partials/footer_container.html +++ b/layouts/partials/footer_container.html @@ -1,5 +1,5 @@ <div class="footer-container" style=""> - <div class="container" style="padding-top: 20px;"> + <div class="container"> <footer> diff --git a/layouts/partials/head.html b/layouts/partials/head.html index d9c7453..4065cb2 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -18,17 +18,107 @@ <link rel="icon" type="image/x-icon" href="{{ .Site.BaseURL }}{{ .Site.Params.Favicon }}" /> {{ end }} + +<script type="text/javascript"> + var azbalacHeaderImage = [{"url":"{{ .Site.BaseURL }}{{ .Site.Params.Theme.Header.Image }}", + "height": '{{ .Site.Params.Theme.Header.Height }}', + "width": '{{ .Site.Params.Theme.Header.Width }}'},"","",""]; +</script> +<script src="{{ .Site.BaseURL }}js/jquery-3.3.1.min.js"></script> +<script src="{{ .Site.BaseURL }}js/functions.js"></script> + <style> -/* Move down content because we have a fixed navbar that is 50px tall */ -{{ if .Site.Params.Navbar.fixedTop }} - {{ $paddingTop := 60 }} - {{ if .Site.Params.Navbar.AdjustHeader }} - {{ $paddingTop = add 60 .Site.Params.Navbar.AdjustHeader }} - {{ end }} body { - padding-top: {{ $paddingTop }}px; + {{ if .Site.Params.Navbar.fixedTop }} + /* Move down content because we have a fixed navbar that is 60px tall */ + + {{ $paddingTop := 60 }} + {{ if .Site.Params.Navbar.AdjustHeader }} + {{ $paddingTop = add 60 .Site.Params.Navbar.AdjustHeader }} + {{ end }} + padding-top: {{ $paddingTop }}px; + {{ end }} + + {{ if .Site.Params.Theme.BackgroundColor }} + background-color: {{ .Site.Params.Theme.BackgroundColor }}; + {{ end }} + + {{ $backgroundImage := .Site.Params.Theme.BackgroundImage }} + {{ if $backgroundImage }} + background-image: url("{{ .Site.BaseURL }}{{ $backgroundImage }}"); + {{ $backgroundRepeat := "repeat" }} + {{ if .Site.Params.Theme.BackgroundImageRepeat }} + {{ $backgroundRepeat = .Site.Params.Theme.BackgroundImageRepeat }} + {{ end }} + background-repeat: {{ $backgroundRepeat }}; + {{ end }} + + } +{{ if .Site.Params.Theme.Footer.BackgroundColor }} +.footer-container { background-color: {{ .Site.Params.Theme.Footer.BackgroundColor }}; } +{{ end }} +{{ if .Site.Params.Theme.Footer.FontColor }} +.footer-container { color: {{ .Site.Params.Theme.Footer.FontColor }}; } {{ end }} +{{ if .Site.Params.Theme.Footer.LinkColor }} +.footer-container a { color: {{ .Site.Params.Theme.Footer.LinkColor }}; } +{{ end }} +{{ if .Site.Params.Theme.Subfooter.BackgroundColor }} +.subfooter-container { background-color: {{ .Site.Params.Theme.Subfooter.BackgroundColor }}; } +{{ end }} +{{ if .Site.Params.Theme.Subfooter.FontColor }} +.subfooter-container { color: {{ .Site.Params.Theme.Subfooter.FontColor }}; } +{{ end }} +{{ if .Site.Params.Theme.Sobfooter.LinkColor }} +.subfooter-container a { color: {{ .Site.Params.Theme.Subfooter.LinkColor }}; } +{{ end }} + + + + </style> +{{ if not .Site.Params.Navbar.FixedTop }} + {{ if and .Site.Params.Theme.Header.header_background_transp .Site.Params.Theme.Header.header_color_bg }} + <script type="text/javascript"> + var azbalacSettingHeaderColor = { 'bg': '{{ .Site.Params.Theme.Header.header_color_bg }}', + 'transp': '{{ .Site.Params.Theme.Header.header_background_transp }}' + }; + </script> + <style type="text/css"> + #site-header-text a, #site-description { + + background: {{ .Site.Params.Theme.Header.header_color_bg}}; /* fallback color */ + background: {{ .Site.Params.Theme.Header.header_color_bg }}{{ .Site.Params.Theme.Header.header_background_transp_hex }}; + + } + </style> + {{ end }} + {{ if .Site.Params.Theme.Header.OverlayDistanceBetween }} + <style type="text/css"> + #site-header-box-title { + margin-bottom: '{{ .Site.Params.Theme.Header.OverlayDistanceBetween }}px'; + } + </style> + {{ end }} + {{ if or .Site.Params.Theme.Header.OverlayDistanceVertical .Site.Params.Theme.Header.OverlayDistanceHorizontal }} + <style type="text/css"> + #site-header-container-overlay { + {{ if (eq .Site.Params.Theme.Header.OverlayAlignment "lt") or (eq .Site.Params.Theme.Header.OverlayAlignment "lb") }} + left: {{ .Site.Params.Theme.Header.OverlayDistanceHorizontal }}px; + {{ else if (eq .Site.Params.Theme.Header.OverlayAlignment "mt") or ( eq .Site.Params.Theme.Header.OverlayAlignment "mb") }} + + {{ else if (eq .Site.Params.Theme.Header.OverlayAlignment "rt") or ( eq .Site.Params.Theme.Header.OverlayAlignment "rb") }} + right: {{ .Site.Params.Theme.Header.OverlayDistanceHorizontal }}px; + {{ end }} + {{ if (eq .Site.Params.Theme.Header.OverlayAlignment "lt") or (eq .Site.Params.Theme.Header.OverlayAlignment "mt") or (eq .Site.Params.Theme.Header.OverlayAlignment "rt") }} + top: {{ .Site.Params.Theme.Header.OverlayDistanceVertical }}px; + {{ else if ( eq .Site.Params.Theme.Header.OverlayAlignment "lb") or ( eq .Site.Params.Theme.Header.OverlayAlignment "mb") or ( eq .Site.Params.Theme.Header.OverlayAlignment "rb") }} + bottom: {{ .Site.Params.Theme.Header.OverlayDistanceVertical }}px; + {{ end }} + } + </style> + {{ end }} +{{ end }} </head>
\ No newline at end of file diff --git a/layouts/partials/header_default.html b/layouts/partials/header_default.html new file mode 100644 index 0000000..5ee5eca --- /dev/null +++ b/layouts/partials/header_default.html @@ -0,0 +1,143 @@ + +{{/* +$content['headerOptions']['header_color_bg'] = get_theme_mod('azbalac_setting_header_color_bg','#000000'); // default black +$content['headerOptions']['header_background_transp'] = get_option('azbalac_setting_header_background_transp',70); // default 70% +$content['headerOptions']['header_background_transp_hex'] = dechex(round(255 / 100 * $content['headerOptions']['header_background_transp'])); +$content['headerOptions']['header_alignment'] = get_option('azbalac_setting_header_alignment',1); +switch (intval($content['headerOptions']['header_alignment'])) { + case 2: // top, center + $headerContainerClass = ' fixed-top '; + $headerBoxClassTitle = ' d-flex justify-content-center '; + $headerBoxClassSubtitle = ' d-flex justify-content-center '; + + break; + case 3: // top, right + $headerContainerClass = ' fixed-top '; + $headerBoxClassTitle = ' d-flex justify-content-end '; + $headerBoxClassSubtitle = ' d-flex justify-content-end '; + break; + case 4: // bottom, left + $headerContainerClass = ' fixed-bottom '; + $headerBoxClassTitle = ' d-flex justify-content-start '; + $headerBoxClassSubtitle = ' d-flex justify-content-start '; + break; + case 5: // bottom, center + $headerContainerClass = ' fixed-bottom '; + $headerBoxClassTitle = ' d-flex justify-content-center '; + $headerBoxClassSubtitle = ' d-flex justify-content-center'; + break; + case 6: // bottom, right + $headerContainerClass = ' fixed-bottom '; + $headerBoxClassTitle = ' d-flex justify-content-end '; + $headerBoxClassSubtitle = ' d-flex justify-content-end '; + break; + case 1: // top, left (default) + default: + $headerContainerClass = ' fixed-top '; + $headerBoxClassTitle = ' d-flex justify-content-start '; + $headerBoxClassSubtitle = ' d-flex justify-content-start '; + break; +} + +$content['headerOptions']['header_container'] = ['container_class' => $headerContainerClass, +'box_class_title' => $headerBoxClassTitle, +'box_class_subtitle' => $headerBoxClassSubtitle]; + + +*/}} + + {{ $overlayBackgroundColor := "#000000" }} +{{ if .Site.Params.Theme.Header.OverlayBackgroundColor }} + {{ $overlayBackgroundColor = .Site.Params.Theme.Header.OverlayBackgroundColor }} +{{ end }} +{{ $overlayTransparency := 70 }} {{/* default transparency 70% */}} +{{ if .Site.Params.Theme.Header.OverlayTransparency }} + {{ $overlayTransparency = int .Site.Params.Theme.Header.OverlayTransparency }} +{{ end }} + +{{ $overlayBackgroundTranspHex := math.Round (mul (div 255.0 100.0) $overlayTransparency) }} + +{{ $foo := "#4488ff" }} +{{ $foo = trim $foo "#" }} +{{ $foo }} +<p> +{{ $rr := substr $foo 0 2 }} +{{ $gg := substr $foo 2 2 }} +{{ $bb := substr $foo 4 2 }} +{{ int (printf "0x%s" $rr) }} || {{ int (printf "0x%s" $gg) }} || {{ int (printf "0x%s" $bb) }} +<p> +{{ printf "0x%s" "ff" }} +<p> +{{ int (printf "0x%s" "ff") }} +<p> +{{ $overlayBackgroundTranspHex }} + + + +<div id="header" role="banner" style="{{ if .Site.Params.Theme.Header.BackgroundColor }}background-color: +{{ .Site.Params.Theme.Header.BackgroundColor }};{{ end }} +{{ if .Site.Params.Theme.Header.FontColor }}color: {{ .Site.Params.Theme.Header.FontColor }};{{ end }}"> + + <div class="container"> + <header class="masthead"> + <div> + <div id="site-header-container-above" class="row align-items-center"> + {{ if not .Site.Params.Theme.Header.TitleOnImage }} + <div class="col"> + {{ if .Site.Params.Theme.Header.DisplayHeaderText }} + <h1 id="site-header-text"><a class="header-url" style="{{ if .Site.Params.Theme.Header.FontColorTitle }}color: {{ .Site.Params.Theme.Header.FontColorTitle }};{{ end }}" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1> + {{ if .Site.Params.Subtitle }}<h2 class="azbalac-subtitle-above" id="site-description" style="{{ if .Site.Params.Theme.Header.FontColorSubtitle }}color: {{ .Site.Params.Theme.Header.FontColorSubtitle }};{{ end }}">{{ .Site.Params.Subtitle }}</h2>{{ end }} + {{ else }} + + {{ end }} + </div> + + {{ end }} + </div> + </div> + + + + + <div id="site-header-above"> + <a href="{{ .Site.BaseURL }}" rel="home"><img id="site-header-image" src="{{ .Site.BaseURL }}{{ .Site.Params.Theme.Header.Image }}" width="1" height="1" data-width="{{ .Site.Params.Theme.Header.Width }}" data-height="{{ .Site.Params.Theme.Header.Height }}" alt="{{ .Site.Params.Theme.Header.AltText }}"> + </a> + + {{ if and .Site.Params.Theme.Header.TitleOnImage .Site.Params.Theme.Header.DisplayHeaderText }} + + <div id="site-header-container-overlay" class="position-absolute {{ .Site.Params.Theme.Header.header_container.container_class }}"> + <div id="site-header-box-title" class="{{ .Site.Params.Theme.Header.header_container.box_class_title }}"> + <h1 class="azbalac-title" id="site-header-text"><a class="header-url" style="{{ if .Site.Params.Theme.Header.FontColorTitle }}color: {{ .Site.Params.Theme.Header.FontColorTitle }};{{ end }}" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1> + </div> + {{ if .Site.Params.Subtitle }} + <div id="site-header-box-subtitle" class="{{ .Site.Params.Theme.Header.header_container.box_class_subtitle }}"> + <h2 class="azbalac-subtitle" id="site-description" style="{{ if .Site.Params.Theme.Header.headerStyles.colorFgSubtitle }}color: {{ .Site.Params.Theme.Header.headerStyles.colorFgSubtitle }};{{ end }}">{{ .Site.Params.Subtitle }}</h2> + </div>{{ end }} + </div> + {{ end }} + + </div> + + + <nav id="navbarMain" class="navbar navbar-expand-sm justify-content-between mb-3 {{ .Site.Params.Navbar.ColorScheme }} {{ .Site.Params.Navbar.BgScheme }}" {{ if .Site.Params.Navbar.BackgroundColor }}style="background-color: {{ .Site.Params.Navbar.BackgroundColor }};" {{ end }}role="navigation"> + + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + + + <div class="sticky-top navbar-collapse collapse {{ .Site.Params.Navbar.TextAlignment }}" id="navbarSupportedContent"> + <ul class="navbar-nav"> + {{- partial "navbar_items.html" . -}} + </ul> + + </div><!--/.nav-collapse --> + + + </nav> <!-- end navbar--> + + + + </header> + </div> <!-- /container --> +</div><!-- /div id header with default navbar --> diff --git a/layouts/partials/header_fixed_top.html b/layouts/partials/header_fixed_top.html new file mode 100644 index 0000000..141cdf5 --- /dev/null +++ b/layouts/partials/header_fixed_top.html @@ -0,0 +1,12 @@ +<nav class="navbar fixed-top navbar-expand-lg {{ .Site.Params.Navbar.ColorScheme }} {{ .Site.Params.Navbar.BgScheme }}"> + <a class="navbar-brand" href="{{ .Site.BaseURL }}">{{ if .Site.Params.Navbar.BrandImage }}<img src="{{ .Site.BaseURL }}{{ .Site.Params.Navbar.BrandImage }}" width="30" height="30" class="d-inline-block align-top" alt=""> {{ end }}{{ .Site.Title }}</a> + <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMain" aria-controls="navbarMain" + aria-expanded="false" aria-label="Toggle navigation"> + <span class="navbar-toggler-icon"></span> + </button> + + <div class="collapse navbar-collapse {{ .Site.Params.Navbar.TextAlignment }}" id="navbarMain"> + <ul class="navbar-nav mr-auto"> + {{- partial "navbar_items.html" . -}} + </ul> +</nav>
\ No newline at end of file diff --git a/layouts/partials/navbar_items.html b/layouts/partials/navbar_items.html new file mode 100644 index 0000000..7e2639a --- /dev/null +++ b/layouts/partials/navbar_items.html @@ -0,0 +1,29 @@ + {{ $currentPage := . }} + {{ range .Site.Menus.main }} + {{ if .HasChildren }} + <li class="nav-item dropdown {{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }}"> + <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" + aria-expanded="false"> + {{ .Pre }} + {{ .Name }} + </a> + <div class="sub-menu dropdown-menu" aria-labelledby="navbarDropdown"> + {{ range .Children }} + + <a class="dropdown-item" href="{{ .URL }}">{{ .Name }}</a> + {{ end }} + </div> + </li> + <span class="mx-2"></span> + {{ else }} + <li class="nav-item {{ if eq $currentPage.URL .URL }}active{{ end }}"> + <a class="nav-link" href="{{ .URL }}"> + {{ .Pre }} + {{ .Name }} + </a> + </li> + <span class="mx-2"></span> + {{ end }} + {{ end }} + + diff --git a/layouts/partials/subfooter_container.html b/layouts/partials/subfooter_container.html index a6ff2ed..243d98d 100644 --- a/layouts/partials/subfooter_container.html +++ b/layouts/partials/subfooter_container.html @@ -1,5 +1,5 @@ {{ if .Site.Params.Theme.Subfooter.Enabled }} -<div class="subfooter-container" style=""> +<div class="subfooter-container"> <div class="container"> <div class="footer"> diff --git a/static/css/custom.css b/static/css/custom.css index 30e1b2e..4fb706c 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -1,3 +1,11 @@ +.footer-container > .container { + padding-top: 20px; +} + + +.subfooter-container > .container { + padding-top: 20px; +} /* Menu Settings - later... */ .main-nav ul { diff --git a/static/js/functions.js b/static/js/functions.js index 6224bc9..906c3e6 100644 --- a/static/js/functions.js +++ b/static/js/functions.js @@ -156,6 +156,8 @@ } else { // >= 1200 mediaDetectSize = 'xl'; } + console.log(mediaSize); + console.log(mediaDetectSize); if (mediaDetectSize != mediaSize || mediaDetectSize == 'xs') { mediaSize = mediaDetectSize; $.headerImageResize(mediaSize); @@ -172,51 +174,7 @@ }); - // Enable menu toggle for small screens. - /*( function() { - var nav = $( '#primary-navigation' ), button, menu; - if ( ! nav ) { - return; - } - - button = nav.find( '.menu-toggle' ); - if ( ! button ) { - return; - } - - // Hide button if menu is missing or empty. - menu = nav.find( '.nav-menu' ); - if ( ! menu || ! menu.children().length ) { - button.hide(); - return; - } - - $( '.menu-toggle' ).on( 'click.azbalac', function() { - nav.toggleClass( 'toggled-on' ); - } ); - } )(); -*/ - /* - * Makes "skip to content" link work correctly in IE9 and Chrome for better - * accessibility. - * - * @link http://www.nczonline.net/blog/2013/01/15/fixing-skip-to-content-links/ - */ -/* _window.on( 'hashchange.azbalac', function() { - var element = document.getElementById( location.hash.substring( 1 ) ); - - if ( element ) { - if ( ! /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) { - element.tabIndex = -1; - } - - element.focus(); - - // Repositions the window on jump-to-anchor to account for header height. - window.scrollBy( 0, -80 ); - } - } ); -*/ + $( function() { // Search toggle. $( '.search-toggle' ).on( 'click.azbalac', function( event ) { @@ -233,75 +191,17 @@ - - - /* - * Fixed header for large screen. - * If the header becomes more than 48px tall, unfix the header. - * - * The callback on the scroll event is only added if there is a header - * image and we are not on mobile. - */ -/* if ( _window.width() > 781 ) { - var mastheadHeight = $( '#masthead' ).height(), - toolbarOffset, mastheadOffset; - - if ( mastheadHeight > 48 ) { - body.removeClass( 'masthead-fixed' ); - } - - if ( body.is( '.header-image' ) ) { - toolbarOffset = body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0; - mastheadOffset = $( '#masthead' ).offset().top - toolbarOffset; - - _window.on( 'scroll.azbalac', function() { - if ( ( window.scrollY > mastheadOffset ) && ( mastheadHeight < 49 ) ) { - body.addClass( 'masthead-fixed' ); - } else { - body.removeClass( 'masthead-fixed' ); - } - } ); - } - } -*/ - // Focus styles for menus. - /*$( '.primary-navigation, .secondary-navigation' ).find( 'a' ).on( 'focus.azbalac blur.azbalac', function() { - $( this ).parents().toggleClass( 'focus' ); - } ); - */ - - } ); - - // Arrange footer widgets vertically. - /*if ( $.isFunction( $.fn.masonry ) ) { - $( '#footer-sidebar' ).masonry( { - itemSelector: '.widget', - columnWidth: function( containerWidth ) { - return containerWidth / 4; - }, - gutterWidth: 0, - isResizable: true, - isRTL: $( 'body' ).is( '.rtl' ) - } ); - } -*/ - // Initialize Featured Content slider. -/* _window.load( function() { - if ( body.is( '.slider' ) ) { - $( '.featured-content' ).featuredslider( { - selector: '.featured-content-inner > article', - controlsContainer: '.featured-content' - } ); - } } ); - */ $(window).on('load', function() { + console.log(azbalacHeaderImage); if (!$('#site-header-image').length) { return; } $.checkMediaSize(); - }); + }); + + $( ".innersocial" ).hover( function() { @@ -339,6 +239,26 @@ $( '.dropdown-menu a.dropdown-toggle' ).on( 'click', function ( e ) { return false; } ); + +$(window).on('load', function() { +var foobar = $('#main').width(); +console.log(foobar); +var elementSize = foobar; +if (elementSize < 540) { + mediaDetectSize = 'xs'; +} else if (elementSize >= 540 && elementSize < 720) { + mediaDetectSize = 'sm'; +} else if (elementSize >= 720 && elementSize < 960) { + mediaDetectSize = 'md'; +} else if (elementSize >= 960 && elementSize < 1140) { + mediaDetectSize = 'lg'; +} else { // >= 1200 + mediaDetectSize = 'xl'; +} +console.log(mediaSize); +console.log(mediaDetectSize); +}); + } )( jQuery ); |