Closed Piterden closed 8 years ago
O, sorry, I forget to show changes which I've implemented in Animatter
theme.
There is only one file to change
{% set theme_config = attribute(config.themes, config.system.pages.theme) %}
<!DOCTYPE html>
<html lang="{{ grav.language.getActive ?: theme_config.default_lang }}">
<head>
{% block head %}
<meta charset="utf-8" />
<title>{% if header.title %}{{ header.title|e('html') }} | {% endif %}{{ site.title|e('html') }}</title>
{% include 'partials/metadata.html.twig' %}
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="icon" type="image/png" href="{{ url('theme://images/favicon.png', true) }}" />
<link rel="canonical" href="{{ page.url(true, true) }}" />
{% block stylesheets %}
{% do assets.addCss('theme://css/pure-0.5.0/grids-min.css', 103) %}
{% do assets.addCss('theme://css-compiled/nucleus.css',102) %}
{% do assets.addCss('theme://css-compiled/template.css',101) %}
{% do assets.addCss('theme://css/custom.css',100) %}
{% do assets.addCss('theme://css/font-awesome.min.css',100) %}
{% do assets.addCss('theme://css/slidebars.min.css') %}
{% if browser.getBrowser == 'msie' and browser.getVersion == 10 %}
{% do assets.addCss('theme://css/nucleus-ie10.css') %}
{% endif %}
{% if browser.getBrowser == 'msie' and browser.getVersion >= 8 and browser.getVersion <= 9 %}
{% do assets.addCss('theme://css/nucleus-ie9.css') %}
{% do assets.addJs('theme://js/html5shiv-printshiv.min.js') %}
{% endif %}
{% endblock %}
{{ assets.css() }}
// There was js assets block right here
{% endblock head%}
</head>
<body id="top" class="{{ page.header.body_classes }}">
<div id="sb-site">
{% block header %}
<header id="header">
<div id="logo">
<h3><a href="{{ base_url == '' ? '/' : base_url }}">{{ config.site.title }}</a></h3>
</div>
<div id="navbar">
{% block header_extra %}{% endblock %}
{% if config.plugins.langswitcher.enabled %}
{% include 'partials/langswitcher.html.twig' %}
{% endif %}
{% block header_navigation %}
{% include 'partials/navigation.html.twig' %}
{% endblock %}
<span class="panel-activation sb-toggle-left navbar-left menu-btn fa fa-bars"></span>
</div>
</header>
{% endblock %}
{% block showcase %}{% endblock %}
{% block body %}
<section id="body" class="{{ class }}">
{% block content %}{% endblock %}
</section>
{% endblock %}
{% block footer %}
<footer id="footer">
<div class="totop">
<span><a href="#" id="toTop"><i class="fa fa-arrow-up"></i></a></span>
</div>
<p><a href="http://getgrav.org">Grav</a> was <i class="fa fa-code"></i> with <i class="fa fa-heart"></i> by <a href="http://www.rockettheme.com">RocketTheme</a>.</p>
</footer>
{% endblock %}
</div>
<div class="sb-slidebar sb-left sb-width-thin">
<div id="panel">
{% include 'partials/navigation.html.twig' %}
</div>
</div>
/**
* This block of code was moved from the top
*/
{% block javascripts %}
{% do assets.addJs('jquery',101) %}
{% do assets.addJs('theme://js/modernizr.custom.71422.js',100) %}
{% do assets.addJs('theme://js/antimatter.js') %}
{% do assets.addJs('theme://js/slidebars.min.js') %}
{% endblock %}
{{ assets.js() }}
// End of moved block
{% block bottom %}
{{ assets.js('bottom') }}
<script>
$(function () {
$(document).ready(function() {
$.slidebars({
hideControlClasses: true,
scrollLock: true
});
});
});
</script>
{% endblock %}
</body>
</html>
I've make some corrects in JS-code (get slider settings in the loop, wrap in scope) and have tested this patch with clean official version of Grav + Admin Plugin and default
Animatter
theme without any changes in template except one. It was moving JS assets pipe render (vendor) to the bottom part of page in base.twig template.Any way I don't force you to move your JS to the "before closed body tag" position. There is some more useful changes in this PR:
I'm not finished yet, therefore only
image
slider mode works well.@TODO
text
slider mode with caption and linkSlides
tab list if it is possible. In perfect form I want to have fields structure like this: