interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

Additions to js debug code

Browse source
This commit is contained in:
Stephan Hagedorn 2021-03-08 15:58:07 +01:00
parent 489786aadc
commit 003a115923
12 changed files with 400 additions and 370 deletions
Download patch file Download diff file Expand all files Collapse all files

101
source/screens/demo.njk
View file

@ -7,51 +7,68 @@
{% block title %}Index{% endblock %}
{% block head %}
{{ super() }}
{{ super() }}
{% endblock %}
{% block body %}
<div class="wrap">
<div class="hello">
<h2>This is {{ hippie.brand | upper }}</h2>
<p>You can start using it by replacing this file with your own index page.</p>
<p>To do this you need to create a file <code>/index.njk</code> inside the <i>source/screens</i> folder. You can also create a <code>data.json</code> file inside the <i>source/templates</i> folder as a data source for your nunjucks files.</p>
<p>For a very basic start you can make a copy of the demo page <code>blank.njk</code>. You can find it at <i>/source/screens/demo</i>.</p>
<p>The <i>source/demo</i> folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole page layouts.<br/>Follow the white rabbit.</p>
<div class="pos_rel">
<pre class="txt_tiny txt_white pos_abs pin_down pin_right"> ()()<br> (..)<br>C(")(")</pre>
<h3>Overview</h3>
</div>
<nav>
<ul class="list_link">
<!-- Loops through "demoadditionallinks" array -->
{% for link in data.demoadditionallinks %}
<li><a href="{{ link.href }}">{{ link.text }}</a></li>
{% endfor %}
</ul>
</nav>
<h3>Demo Pages</h3>
<ul class="list_link">
<!-- Loops through "demo-links" array -->
{% for link in data.demolinks %}
<li><a href="{{ link.href }}">{{ link.text }}</a></li>
{% endfor %}
</ul>
</div>
</div>
<div class="wrap">
<div class="hello">
<h2>This is
{{ hippie.brand | upper }}</h2>
<p>You can start using it by replacing this file with your own index page.</p>
<p>To do this you need to create a file
<code>/index.njk</code>
inside the
<i>source/screens</i>
folder. You can also create a
<code>data.json</code>
file inside the
<i>source/templates</i>
folder as a data source for your nunjucks files.</p>
<p>For a very basic start you can make a copy of the demo page
<code>blank.njk</code>. You can find it at
<i>/source/screens/demo</i>.</p>
<p>The
<i>source/demo</i>
folder contains an overview of all HTML elements and also examples for CSS style combinations and even whole page layouts.<br/>Follow the white rabbit.</p>
<div class="pos_rel">
<pre class="txt_tiny txt_white pos_abs pin_down pin_right"> ()()<br> (..)<br>c(")(")</pre>
<h3>Overview</h3>
</div>
<nav>
<ul class="list_link">
<!-- Loops through "demoadditionallinks" array -->
{% for link in data.demoadditionallinks %}
<li>
<a href="{{ link.href }}">{{ link.text }}</a>
</li>
{% endfor %}
</ul>
</nav>
<h3>Demo Pages</h3>
<ul class="list_link">
<!-- Loops through "demo-links" array -->
{% for link in data.demolinks %}
<li>
<a href="{{ link.href }}">{{ link.text }}</a>
</li>
{% endfor %}
</ul>
</div>
</div>
{% endblock %}
{% block script %}
{{ super() }}
<script src="{{ pageBase }}js/{{ hippie.jsFile }}.min.js"></script>
<script>
// Page specific
// ------------------------------------------------------------------------------
assetsLoaded = true;
logPerf('Assets loaded.', assetsLoaded);
$( document ).ready(function () {
logPerf('JQ document \'ready\' event fired.');
});
logPerf('Application ready.');
</script>
{% endblock %}
{{ super() }}
<script src="{{ pageBase }}js/{{ hippie.jsFile }}.min.js"></script>
<script>
// Page specific
// ------------------------------------------------------------------------------
assetsLoaded = true;
logPerf('BODY :: Assets loaded, running page specific script...');
$(document).ready(function () {
logPerf('EVENT :: jQuery \'ready\' event fired.');
logPerf('Application ready.');
});
</script>
{% endblock %}