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

demo.4

Browse source 
* restructure of all templates and pages
* fixed gulp reloading of pages
* restructured style elements accroding to HTML5.2 doc
* changed basic line-height
* added positional styles
* added demo_module styles
This commit is contained in:
Stephan 2018-08-31 18:52:21 +02:00
parent a810ec2770
commit 0a78f526f5
34 changed files with 1454 additions and 1208 deletions
Download patch file Download diff file Expand all files Collapse all files

95
source/pages/demo/tests.njk Normal file
View file

@ -0,0 +1,95 @@
<!-- page-tests.njk -->
{% set pageId = "blank" %}
{% set pageClass = "height_full" %}
{% extends "hippie/demo-default.njk" %}
{% block title %}blank{% endblock %}
{% block head %}
{{ super() }}
<link rel="stylesheet" type="text/css" media="all" href="../css/demo.css"/>
<!-- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/> -->
<style>
#error {
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="">
<input id="txtName" type="text" /><span id="error">Caps Lock is ON.</span>
</form>
{% import "hippie/macros/nav-macro.njk" as forms %}
{{ forms.active('zubereitung') }}
{% endblock %}
{% block script %}
{{ super() }}
<script src="../js/all.min.js" type="text/javascript"></script>
<script type="text/javascript">
// Page specific
// ------------------------------------------------------------------------------
$( document ).ready(function() {
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';
}
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';
}
});
}
capsDetect();
</script>
{% endblock %}