feat: add ui examples
This commit is contained in:
parent
26f5539f3f
commit
3a867c169a
10 changed files with 660 additions and 0 deletions
192
source/code/app.js
Normal file
192
source/code/app.js
Normal file
|
|
@ -0,0 +1,192 @@
|
||||||
|
//NEW
|
||||||
|
|
||||||
|
function Clock(id){
|
||||||
|
this.id = id;
|
||||||
|
|
||||||
|
var that = this;
|
||||||
|
setInterval(function(){that.updateClock();}, 1000);
|
||||||
|
this.updateClock();
|
||||||
|
}
|
||||||
|
|
||||||
|
Clock.prototype.updateClock = function(){
|
||||||
|
var date = new Date();
|
||||||
|
var clock = document.getElementById(this.id);
|
||||||
|
//console.log(this);
|
||||||
|
clock.innerHTML = this.formatDigits(date.getHours()) + ":" + this.formatDigits(date.getMinutes()) + ":" + this.formatDigits(date.getSeconds());
|
||||||
|
};
|
||||||
|
|
||||||
|
Clock.prototype.formatDigits = function(val){
|
||||||
|
if(val<10) val = "0" + val;
|
||||||
|
|
||||||
|
return val;
|
||||||
|
}
|
||||||
|
|
||||||
|
//OLD
|
||||||
|
|
||||||
|
var floor = Math.floor;
|
||||||
|
|
||||||
|
function ongoing() {
|
||||||
|
|
||||||
|
var now = new Date();
|
||||||
|
|
||||||
|
var w = Math.floor(now.getDay());
|
||||||
|
var D = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag");
|
||||||
|
var DNumb = Math.floor(now.getDate());
|
||||||
|
var MNumb = Math.floor(now.getMonth());
|
||||||
|
var M = new Array("Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
|
||||||
|
var y = Math.floor(now.getYear());
|
||||||
|
if (y < 999) y += 1900;
|
||||||
|
|
||||||
|
var ms = Math.floor(now.getMilliseconds());
|
||||||
|
var s = Math.floor(now.getSeconds());
|
||||||
|
var m = Math.floor(now.getMinutes() + s / 60);
|
||||||
|
var h = Math.floor(now.getHours() + m / 60);
|
||||||
|
|
||||||
|
var j2000 = new Date(); // Bezugspunkt ist der 1.1.2000 0:00 UT (entspricht JD 2451544,5)
|
||||||
|
j2000.setUTCFullYear(2000,0,1);
|
||||||
|
j2000.setUTCHours(0,0,0,0);
|
||||||
|
|
||||||
|
var utc = new Date();
|
||||||
|
utc.setUTCFullYear(y,MNumb,DNumb); // Monate müssen im Wertebereich 0...11 übergeben werden
|
||||||
|
utc.setUTCHours(h,m,s,ms);
|
||||||
|
|
||||||
|
var utc0 = new Date();
|
||||||
|
utc0.setUTCFullYear(y,MNumb,DNumb);
|
||||||
|
utc0.setUTCHours(0,0,0,0);
|
||||||
|
|
||||||
|
var jd = 2451544.5 + (utc-j2000) / 86400000; // Zählung erfolgt in Millisekunden, 1 Tag = 86.400.000 ms
|
||||||
|
var jdUTC0 = 2451544.5 + (utc0-j2000) / 86400000;
|
||||||
|
|
||||||
|
var N = jd - 2451545.0;
|
||||||
|
var L = 280.460 + 0.9856474 * N; // mittlere ekliptikale Länge der Sonne
|
||||||
|
var g = 357.528 + 0.9856003 * N; // mittlere Anomalie
|
||||||
|
var el = L + 1.915 * Math.sin(g) + 0.020 * Math.sin(2*g);
|
||||||
|
var e = 23.439 - 0.0000004 * N;
|
||||||
|
var rektaszension = Math.atan((Math.cos(e)*Math.sin(el)) / Math.cos(el));
|
||||||
|
|
||||||
|
var T = (jdUTC0 - 2451545.0) / 36525;
|
||||||
|
var stGMT = (((6*3600) + (41*60) + 50.54841) + (8640184.812866*T) + (0.093104*Math.pow(T,2)) - (0.0000062*Math.pow(T,3))) / 3600;
|
||||||
|
|
||||||
|
var stGMT2 = 6.697376 + 2400.05134 * T + 1.002738 * T;
|
||||||
|
var hWGMT = stGMT2 * 15;
|
||||||
|
var hW = hWGMT + 11.9566185772;
|
||||||
|
|
||||||
|
var st = (stGMT + (now.getUTCHours()*1.00273790935)) + (11.9566185772/15); // Sommerzeit muss noch berücksichtigt werden
|
||||||
|
var st24 = Math.abs(st - (Math.round(st / 24) * 24));
|
||||||
|
var stH = Math.floor(st24);
|
||||||
|
var stM = Math.floor((st24 % 1) * 60);
|
||||||
|
var stS = zeroFill(Math.floor((((st24 % 1) * 60) % 1) * 60), 2);
|
||||||
|
|
||||||
|
var travelWidth = document.body.clientWidth;
|
||||||
|
var travelHeight = document.body.clientHeight;
|
||||||
|
var sunPosX = 0;
|
||||||
|
var sunPosY = 0;
|
||||||
|
var moonPosX = 0;
|
||||||
|
var moonPosY = 0;
|
||||||
|
|
||||||
|
var sun = $("#sun").css({
|
||||||
|
"left": (s / 60) * travelWidth,
|
||||||
|
"top": (m / 60) * travelHeight
|
||||||
|
});
|
||||||
|
|
||||||
|
$("#day").text(D[w]);
|
||||||
|
$("#dayNumb").text(DNumb);
|
||||||
|
$("#month").text(M[MNumb]);
|
||||||
|
$("#year").text(y);
|
||||||
|
$("#time").text('' + zeroFill(h, 2) + ':' + zeroFill(m, 2) + ':' + zeroFill(s, 2));
|
||||||
|
|
||||||
|
$("#julian").text(jd.toFixed(6));
|
||||||
|
//$("#star").text(stH + ':' + stM + ':' + stS);
|
||||||
|
$("#star").text(stH + ':' + stM);
|
||||||
|
$("#star1").text(stGMT);
|
||||||
|
$("#star2").text(stGMT2);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function zeroFill( number, width ){
|
||||||
|
width -= number.toString().length;
|
||||||
|
if ( width > 0 ){
|
||||||
|
return new Array( width + (/\./.test( number ) ? 2 : 1) ).join( '0' ) + number;
|
||||||
|
}
|
||||||
|
return number + ""; // always return a string
|
||||||
|
}
|
||||||
|
|
||||||
|
// create emails
|
||||||
|
function composeMail(tag, name, prov, suffix, text, topic) {
|
||||||
|
var trigger = tag.indexOf(".");
|
||||||
|
var mailString = name + '@' + prov + '.' + suffix;
|
||||||
|
var textString = mailString.replace(/@/g, "(at)");
|
||||||
|
var descString = "Nachricht an " + mailString;
|
||||||
|
if (trigger == -1) {
|
||||||
|
if (!text) {
|
||||||
|
text = mailString;
|
||||||
|
} else if (text == "at") {
|
||||||
|
text = textString;
|
||||||
|
} else if (text == "to") {
|
||||||
|
text = descString;
|
||||||
|
}
|
||||||
|
if (!topic) {
|
||||||
|
topic = "";
|
||||||
|
} else {
|
||||||
|
topic = "?subject=" + topic;
|
||||||
|
}
|
||||||
|
var old = $('#'+tag).html();
|
||||||
|
$('#'+tag).html(old + text);
|
||||||
|
$('#'+tag).attr("href", "mailto:" + mailString + topic);
|
||||||
|
} else {
|
||||||
|
$(tag).each(function() {
|
||||||
|
if (!text) {
|
||||||
|
text = mailString;
|
||||||
|
} else if (text == "at") {
|
||||||
|
text = textString;
|
||||||
|
} else if (text == "to") {
|
||||||
|
text = descString;
|
||||||
|
}
|
||||||
|
if (!topic) {
|
||||||
|
topic = "";
|
||||||
|
} else {
|
||||||
|
topic = "?subject=" + topic;
|
||||||
|
}
|
||||||
|
var old = $(this).html();
|
||||||
|
$(this).html(old + text);
|
||||||
|
$(this).attr("href", "mailto:" + mailString + topic);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//Länge der Balken im Diagram berechnen
|
||||||
|
function barwidth(size, G, W) {
|
||||||
|
var s = size;
|
||||||
|
var g = G;
|
||||||
|
var w = W;
|
||||||
|
var p = ( w / g ) * 100;
|
||||||
|
var newW = s * ( p /100 );
|
||||||
|
|
||||||
|
return newW;
|
||||||
|
}
|
||||||
|
//String Element erweitern
|
||||||
|
String.prototype.transform = function() {
|
||||||
|
return parseFloat(this.replace(',', '.'));
|
||||||
|
}
|
||||||
|
//Array Element erweitern
|
||||||
|
Array.prototype.arrayAdd = function() {
|
||||||
|
return eval(this.join("+"));
|
||||||
|
}
|
||||||
|
//Speicherplatz in Prozent berechnen
|
||||||
|
function percentage(total, gigs, round) {
|
||||||
|
var totalSpace = total;
|
||||||
|
var singleSpace = gigs;
|
||||||
|
var z = round;
|
||||||
|
var p = singleSpace / ( totalSpace / 100 );
|
||||||
|
|
||||||
|
return p;
|
||||||
|
}
|
||||||
|
//Speicherplatz in GB berechnen
|
||||||
|
function gigabytes(percent, total, round) {
|
||||||
|
var occupiedPercent = percent;
|
||||||
|
var singleSpace = total;
|
||||||
|
var z = round;
|
||||||
|
var g = (singleSpace / 100 ) * occupiedPercent;
|
||||||
|
|
||||||
|
return g;
|
||||||
|
}
|
||||||
14
source/data/new.json
Normal file
14
source/data/new.json
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"text": "Index",
|
||||||
|
"href": "/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Basics",
|
||||||
|
"href": "./demo/basics.html"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"text": "Drag",
|
||||||
|
"href": "./demo/examples/ui/drag.html"
|
||||||
|
}
|
||||||
|
]
|
||||||
109
source/screens/demo/examples/ui/drag.njk
Executable file
109
source/screens/demo/examples/ui/drag.njk
Executable file
|
|
@ -0,0 +1,109 @@
|
||||||
|
---
|
||||||
|
title: Drag
|
||||||
|
tags:
|
||||||
|
- demoExample
|
||||||
|
---
|
||||||
|
{% set pageId = page.fileSlug %}
|
||||||
|
{% set pageClass = "h_full_view" %}
|
||||||
|
{% set bodyClass = "body_drag" %}
|
||||||
|
|
||||||
|
{% extends "demo/_app.njk" %}
|
||||||
|
|
||||||
|
{% block title %}{{ title }}{% endblock %}
|
||||||
|
|
||||||
|
{% block links %}
|
||||||
|
{{ super() }}
|
||||||
|
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block head %}
|
||||||
|
{{ super() }}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
<div id="space"></div>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{%- block script %}
|
||||||
|
<script>
|
||||||
|
// Get the space element
|
||||||
|
const space = document.getElementById('space');
|
||||||
|
|
||||||
|
// Create a new div element
|
||||||
|
const newDiv = document.createElement('div');
|
||||||
|
newDiv.style.position = 'absolute';
|
||||||
|
newDiv.style.width = '100px';
|
||||||
|
newDiv.style.height = '100px';
|
||||||
|
newDiv.style.background = 'cyan';
|
||||||
|
newDiv.style.cursor = 'move';
|
||||||
|
|
||||||
|
// Add event listeners for dragging
|
||||||
|
let isDown = false;
|
||||||
|
let offset = [0, 0];
|
||||||
|
|
||||||
|
newDiv.addEventListener('mousedown', (event) => {
|
||||||
|
if (event.button === 0) { // Left mouse button
|
||||||
|
isDown = true;
|
||||||
|
offset = [
|
||||||
|
newDiv.offsetLeft - event.clientX,
|
||||||
|
newDiv.offsetTop - event.clientY
|
||||||
|
];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('mouseup', () => {
|
||||||
|
isDown = false;
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('mousemove', (event) => {
|
||||||
|
if (isDown) {
|
||||||
|
const maxX = window.innerWidth - newDiv.offsetWidth;
|
||||||
|
const maxY = window.innerHeight - newDiv.offsetHeight;
|
||||||
|
let x = event.clientX + offset[0];
|
||||||
|
let y = event.clientY + offset[1];
|
||||||
|
|
||||||
|
// Boundary checks
|
||||||
|
if (x < 0) x = 0;
|
||||||
|
if (y < 0) y = 0;
|
||||||
|
if (x > maxX) x = maxX;
|
||||||
|
if (y > maxY) y = maxY;
|
||||||
|
|
||||||
|
newDiv.style.left = `${x}px`;
|
||||||
|
newDiv.style.top = `${y}px`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Save position and size
|
||||||
|
const saveData = () => {
|
||||||
|
const data = {
|
||||||
|
x: newDiv.offsetLeft,
|
||||||
|
y: newDiv.offsetTop,
|
||||||
|
width: newDiv.offsetWidth,
|
||||||
|
height: newDiv.offsetHeight
|
||||||
|
};
|
||||||
|
// Save data to local storage or a database
|
||||||
|
localStorage.setItem('divData', JSON.stringify(data));
|
||||||
|
};
|
||||||
|
|
||||||
|
// Load saved data
|
||||||
|
const loadData = () => {
|
||||||
|
const data = localStorage.getItem('divData');
|
||||||
|
if (data) {
|
||||||
|
const parsedData = JSON.parse(data);
|
||||||
|
newDiv.style.left = `${parsedData.x}px`;
|
||||||
|
newDiv.style.top = `${parsedData.y}px`;
|
||||||
|
newDiv.style.width = `${parsedData.width}px`;
|
||||||
|
newDiv.style.height = `${parsedData.height}px`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add the new div to the space
|
||||||
|
space.appendChild(newDiv);
|
||||||
|
|
||||||
|
// Call the save function when the user stops dragging
|
||||||
|
document.addEventListener('mouseup', saveData);
|
||||||
|
|
||||||
|
// Load saved data on page load
|
||||||
|
loadData();
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
81
source/screens/demo/examples/ui/new.njk
Executable file
81
source/screens/demo/examples/ui/new.njk
Executable file
|
|
@ -0,0 +1,81 @@
|
||||||
|
---
|
||||||
|
title: New
|
||||||
|
tags:
|
||||||
|
- demoExample
|
||||||
|
---
|
||||||
|
{% set pageId = page.fileSlug %}
|
||||||
|
{% set pageClass = "h_full_view" %}
|
||||||
|
{% set bodyClass = "body_new" %}
|
||||||
|
|
||||||
|
{% extends "demo/_app.njk" %}
|
||||||
|
{% import "demo/macros/_states.njk" as state %}
|
||||||
|
|
||||||
|
{% block title %}{{ title }}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block links %}
|
||||||
|
{{ super() }}
|
||||||
|
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block head %}
|
||||||
|
{{ super() }}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
<div id="top">
|
||||||
|
<h1 class="brand">
|
||||||
|
<a href="#">{{ hippie.brand | upper }}</a>
|
||||||
|
</h1>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
{% for link in new %}
|
||||||
|
<li>
|
||||||
|
<a href="{{ link.href }}">{{ link.text }}</a>
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div class="state">
|
||||||
|
<p>{{ state.coord("log")}}
|
||||||
|
/
|
||||||
|
{{ state.date("date")}}
|
||||||
|
/
|
||||||
|
{{ state.time("time")}}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="container">
|
||||||
|
<div class="area menu">
|
||||||
|
<nav class="nav_horizontal">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Func 1</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="" class="a_button">Func 2</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="area grid">
|
||||||
|
<div class="item">1</div>
|
||||||
|
<div class="item">2</div>
|
||||||
|
<div class="item">3</div>
|
||||||
|
<div class="item">4</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{%- block script %}
|
||||||
|
{{ super() }}
|
||||||
|
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
|
||||||
|
<script src="{{ pageBase }}js/app.js"></script>
|
||||||
|
<script>
|
||||||
|
let clock = new Clock('time');
|
||||||
|
|
||||||
|
document.addEventListener('mousemove', (event) => {
|
||||||
|
document.getElementById('log')
|
||||||
|
.textContent = "X: " + event.pageX + ", Y: " + event.pageY;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
50
source/screens/demo/examples/ui/settings.njk
Executable file
50
source/screens/demo/examples/ui/settings.njk
Executable file
|
|
@ -0,0 +1,50 @@
|
||||||
|
---
|
||||||
|
title: Settings
|
||||||
|
tags:
|
||||||
|
- demoExample
|
||||||
|
- ui
|
||||||
|
---
|
||||||
|
{% set pageId = page.fileSlug %}
|
||||||
|
{% set pageClass = "h_full_view" %}
|
||||||
|
{% set bodyClass = "body_ui" %}
|
||||||
|
|
||||||
|
{% extends "demo/_app.njk" %}
|
||||||
|
|
||||||
|
{% block title %}{{ title }}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block links %}
|
||||||
|
{{ super() }}
|
||||||
|
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block head %}
|
||||||
|
{{ super() }}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block body %}
|
||||||
|
<div id="frame" class="frame-flex">
|
||||||
|
<div class="title-bar">
|
||||||
|
<div>title-bar<button class="io_button">menu</button class="io_button"><button class="io_button">search</button class="io_button"></div>
|
||||||
|
<div><button class="io_button">minimize</button class="io_button"><button class="io_button">maximize</button class="io_button"><button class="io_button">close</button class="io_button"></div>
|
||||||
|
</div>
|
||||||
|
<main>
|
||||||
|
<aside class="left">aside
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li>setting</li>
|
||||||
|
<li>setting</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
<section class="bside">section</section>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{%- block script %}
|
||||||
|
{{ super() }}
|
||||||
|
<script src="{{ pageBase }}js/app.js"></script>
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
||||||
121
source/style/modules/ui/_new_module.scss
Executable file
121
source/style/modules/ui/_new_module.scss
Executable file
|
|
@ -0,0 +1,121 @@
|
||||||
|
$module_top_height: 32px;
|
||||||
|
|
||||||
|
.body_new {
|
||||||
|
height: 100vh;
|
||||||
|
padding: $module_top_height + $space_basic $space_basic $space_basic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body_drag {
|
||||||
|
height: 100vh;
|
||||||
|
// padding: $space_basic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
display: grid;
|
||||||
|
height: 100%;
|
||||||
|
// margin: $space_basic;
|
||||||
|
// grid-template-columns: repeat(3, 1fr);
|
||||||
|
grid-template-rows: auto 1fr;
|
||||||
|
gap: $space_basic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.area {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
transition: $transition_best;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu, #top {
|
||||||
|
nav ul {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
// grid-template-rows: repeat(2, 1fr);
|
||||||
|
// grid-template-columns: repeat(2, 1fr);
|
||||||
|
grid-template-areas: "a a";
|
||||||
|
grid-auto-rows: 1fr;
|
||||||
|
grid-auto-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
// height: unset;
|
||||||
|
border-color: darken($color_back_basic, $color_diff_tiny);
|
||||||
|
border-style: dotted;
|
||||||
|
border-width: $width_border_8;
|
||||||
|
border-radius: $width_border_8;
|
||||||
|
padding: $space_basic;
|
||||||
|
background-color: rgb($color_back_basic, .5);
|
||||||
|
// background-color: lighten($color_back_basic, $color_diff_tiny);
|
||||||
|
// background-color: gold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.float {
|
||||||
|
min-height: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#top {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: $module_top_height;
|
||||||
|
background-color: rgb(0, 0, 0, .8);
|
||||||
|
z-index: $z_top;
|
||||||
|
|
||||||
|
div:last-child {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
p,
|
||||||
|
li {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 a {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
p,
|
||||||
|
li {
|
||||||
|
margin-top: 8px;
|
||||||
|
margin-bottom: 7px;
|
||||||
|
padding: 0 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul {
|
||||||
|
display: flex;
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
height: 36px;
|
||||||
|
background-color: #fff;
|
||||||
|
margin: 0 0 0 128px;
|
||||||
|
padding: 7px 24px;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 22px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.state {
|
||||||
|
margin-right: 16px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#space {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
background-color: $color-dark;
|
||||||
|
}
|
||||||
44
source/style/modules/ui/_settings_module.scss
Executable file
44
source/style/modules/ui/_settings_module.scss
Executable file
|
|
@ -0,0 +1,44 @@
|
||||||
|
$module_top_height: 32px;
|
||||||
|
|
||||||
|
.body_ui {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#frame {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
background-color: $color-dark;
|
||||||
|
|
||||||
|
.title-bar {
|
||||||
|
button {
|
||||||
|
margin: 0 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
aside {
|
||||||
|
background-color: $color_brighter;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame-flex {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.title-bar {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
div:last-child {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
aside, section {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
5
source/style/ui.scss
Normal file
5
source/style/ui.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
@import "demo_config";
|
||||||
|
@import "hippie-style/hippie";
|
||||||
|
|
||||||
|
@import "modules/ui/new_module";
|
||||||
|
@import "modules/ui/settings_module";
|
||||||
29
source/templates/demo/_app.njk
Executable file
29
source/templates/demo/_app.njk
Executable file
|
|
@ -0,0 +1,29 @@
|
||||||
|
<!-- demo.app.template -->
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
|
||||||
|
{% block head %}
|
||||||
|
<title>{{ hippie.titlePrefix }}
|
||||||
|
{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
|
||||||
|
|
||||||
|
{% block meta %}
|
||||||
|
{% include "demo/partials/_meta.njk" %}
|
||||||
|
<base href="/">
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block links %}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% endblock %}
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="{{ bodyClass }}">
|
||||||
|
{% block body %}{% endblock %}
|
||||||
|
|
||||||
|
{% block script %}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
15
source/templates/demo/macros/_states.njk
Normal file
15
source/templates/demo/macros/_states.njk
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<!-- states.macro -->
|
||||||
|
{% macro coord(id, text='X: #, Y: ##') %}
|
||||||
|
<span id="{{ id }}">{{ text }}</span>
|
||||||
|
{% endmacro %}
|
||||||
|
{% macro time(id, text='00:00:00', postfix=' Uhr') %}
|
||||||
|
<span id="{{ id }}">{{ text }}</span><span>{{ postfix }}</span>
|
||||||
|
{% endmacro %}
|
||||||
|
{% macro date() %}
|
||||||
|
<span id="{{ id }}">
|
||||||
|
<span id="day">Wochentag</span>,
|
||||||
|
<span id="dayNumb">##</span>.
|
||||||
|
<span id="month">Monat</span>
|
||||||
|
<span id="year">####</span>
|
||||||
|
</span>
|
||||||
|
{% endmacro %}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue