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

demo.1

Browse source 
- added possibility to add data into tempaltes via json
- restructured output files
- some work on styles
This commit is contained in:
Stephan 2018-05-08 23:00:46 +02:00
parent 1bb57b109b
commit 8bc8da74db
18 changed files with 1004 additions and 199 deletions
Download patch file Download diff file Expand all files Collapse all files

0
source/pages/demo/blank.njk → source/pages/blank.njk
View file

4
source/pages/demo/intro.njk
View file

@ -486,9 +486,9 @@
<a href="">
<h4>Überschrift als Block-Verweis</h4>
</a>
<pre class="pre__code"><code>section>div.box__inline_left>img^p+p</code></pre>
<pre class="pre__code"><code>section>div.float_space_left>img^p+p</code></pre>
<section class="overflow">
<div class="box__inline_left demo__avatar"><img src="./art/bullet.gif" width="256" height="256" alt="Avatar"></div>
<div class="float_space_left demo__avatar"><img src="./art/bullet.gif" width="256" height="256" alt="Avatar"></div>
<p>Vorname Name<br>Straße 1, 01234 Stadt</p><p>+49 (0)123 1337 0000<br><a class="lineLink" href="mailto:name@domain.tld">name@domain.tld</a></p>
</section>
<pre class="pre__code"><code>div.box__main_indent</code></pre>

2
source/pages/demo/os.njk
View file

@ -2,7 +2,7 @@
{% set pageId = "os" %}
{% set pageClass = "" %}
{% extends "default.njk" %}
{% extends "demo.njk" %}
{% block title %}demo{% endblock %}
{% block head %}

27
source/pages/index.njk
View file

@ -12,18 +12,27 @@
{% block body_content %}
<div class="wrap">
<div class="hello">
<h2>Demo Pages</h2>
<h2>This is HIPPIE</h2>
<p>You can start using it by replacing this file with your own index page.</p>
<p>The folder <i>demo</i> contains examples and also an overview of definitions made.<br/>Follow the white rabbit.</p>
<h3>Demo Pages</h3>
<ul class="list__link">
<li><a href="demo/intro.html">Intro</a></li>
<li><a href="demo/os.html">OS</a></li>
<li><a href="demo/blank.html">Blank</a></li>
<li><a href="demo/error/404.html">404</a></li>
<li><a href="demo/error/500.html">500</a></li>
<!-- Loops through "demo-links" array -->
{% for link in demolinks %}
<li><a href="{{link.href}}">{{link.text}}</a></li>
{% endfor %}
</ul>
<h2>Overview about all the styles</h2>
<pre class="txt-tiny txt_white">
()()
(..)
C(")(")</pre>
<h3>Overview about all the styles</h3>
<ul class="list__link">
<li><a href="elements.html">Elements</a></li>
<li><a href="tests.html">Tests</a></li>
<!-- Loops through "links" array -->
{% for link in links %}
<li><a href="{{link.href}}">{{link.text}}</a></li>
{% endfor %}
</ul>
</div>
</div>

99
source/pages/tests.njk
View file

@ -9,17 +9,18 @@
{{ super() }}
<style>
#error {
border: 1px solid #FFFF66;
background-color: #FFFFCC;
display: inline-block;
margin-left: 10px;
padding: 3px;
display: none;
border: 1px solid #FFFF66;
background-color: #FFFFCC;
display: inline-block;
margin-left: 10px;
padding: 3px;
display: none;
}
</style>
{% endblock %}
{% block body_content %}
<input type="password" name="txtPassword" onkeypress="capLock(event)" />
<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>
<form action="">
@ -32,55 +33,55 @@
// Page specific
// ------------------------------------------------------------------------------
$( document ).ready(function() {
console.log('HIPPIE Tests');
console.log('HIPPIE Tests');
});
function capLock(e){
kc = e.keyCode?e.keyCode:e.which;
sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
document.getElementById('divMayus').style.visibility = 'visible';
else
document.getElementById('divMayus').style.visibility = 'hidden';
kc = e.keyCode?e.keyCode:e.which;
sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
document.getElementById('divMayus').style.visibility = 'visible';
else
document.getElementById('divMayus').style.visibility = 'hidden';
}
function capsDetect() {
var body = document.getElementsByTagName('body')[0];
var isShiftPressed = false;
var isCapsOn = false;
var capsWarning = document.getElementById('error');
body.addEventListener('keydown', function(e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode === 16) {
isShiftPressed = true;
}
});
body.addEventListener('keyup', function(e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode === 16) {
isShiftPressed = false;
}
if (keyCode === 20) {
if (isCapsOn) {
isCapsOn = false;
capsWarning.style.display = 'none';
} else {
isCapsOn = true;
capsWarning.style.display = 'inline-block';
}
}
});
body.addEventListener('keypress', function(e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode <= 40)
return;
if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
isCapsOn = true;
capsWarning.style.display = 'inline-block';
} else {
capsWarning.style.display = 'none';
}
});
var body = document.getElementsByTagName('body')[0];
var isShiftPressed = false;
var isCapsOn = false;
var capsWarning = document.getElementById('error');
body.addEventListener('keydown', function(e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode === 16) {
isShiftPressed = true;
}
});
body.addEventListener('keyup', function(e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode === 16) {
isShiftPressed = false;
}
if (keyCode === 20) {
if (isCapsOn) {
isCapsOn = false;
capsWarning.style.display = 'none';
} else {
isCapsOn = true;
capsWarning.style.display = 'inline-block';
}
}
});
body.addEventListener('keypress', function(e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode <= 40)
return;
if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
isCapsOn = true;
capsWarning.style.display = 'inline-block';
} else {
capsWarning.style.display = 'none';
}
});
}
capsDetect();
</script>