Compare commits
No commits in common. "4cf279bee5595cf8efd2e8e2ce44e4d834c96b37" and "26f5539f3f270697875b3eb0130d1f68fb033590" have entirely different histories.
4cf279bee5
...
26f5539f3f
10 changed files with 0 additions and 711 deletions
|
|
@ -1,192 +0,0 @@
|
||||||
//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;
|
|
||||||
}
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
[
|
|
||||||
{
|
|
||||||
"text": "Index",
|
|
||||||
"href": "/"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"text": "Basics",
|
|
||||||
"href": "./demo/basics.html"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"text": "Drag",
|
|
||||||
"href": "./demo/examples/ui/drag.html"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
@ -1,152 +0,0 @@
|
||||||
---
|
|
||||||
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>
|
|
||||||
<button id="addFrame">Add</button>
|
|
||||||
{% endblock %}
|
|
||||||
|
|
||||||
{%- block script %}
|
|
||||||
<script>
|
|
||||||
// Define the NewDiv class
|
|
||||||
class NewDiv {
|
|
||||||
constructor(x, y, width, height, backgroundColor) {
|
|
||||||
this.x = x;
|
|
||||||
this.y = y;
|
|
||||||
this.width = width;
|
|
||||||
this.height = height;
|
|
||||||
this.backgroundColor = backgroundColor;
|
|
||||||
this.element = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create the div element
|
|
||||||
createDiv() {
|
|
||||||
this.element = document.createElement('div');
|
|
||||||
this.element.style.position = 'absolute';
|
|
||||||
this.element.style.left = `${this.x}px`;
|
|
||||||
this.element.style.top = `${this.y}px`;
|
|
||||||
this.element.style.width = `${this.width}px`;
|
|
||||||
this.element.style.height = `${this.height}px`;
|
|
||||||
this.element.style.background = this.backgroundColor;
|
|
||||||
this.element.style.cursor = 'move';
|
|
||||||
|
|
||||||
// Add event listeners for dragging
|
|
||||||
let isDown = false;
|
|
||||||
let offset = [0, 0];
|
|
||||||
|
|
||||||
this.element.addEventListener('mousedown', (event) => {
|
|
||||||
if (event.button === 0) { // Left mouse button
|
|
||||||
isDown = true;
|
|
||||||
offset = [
|
|
||||||
this.element.offsetLeft - event.clientX,
|
|
||||||
this.element.offsetTop - event.clientY
|
|
||||||
];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener('mouseup', () => {
|
|
||||||
isDown = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
document.addEventListener('mousemove', (event) => {
|
|
||||||
if (isDown) {
|
|
||||||
const maxX = window.innerWidth - this.element.offsetWidth;
|
|
||||||
const maxY = window.innerHeight - this.element.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;
|
|
||||||
|
|
||||||
this.element.style.left = `${x}px`;
|
|
||||||
this.element.style.top = `${y}px`;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Save position and size
|
|
||||||
const saveData = () => {
|
|
||||||
const data = {
|
|
||||||
x: this.element.offsetLeft,
|
|
||||||
y: this.element.offsetTop,
|
|
||||||
width: this.element.offsetWidth,
|
|
||||||
height: this.element.offsetHeight
|
|
||||||
};
|
|
||||||
// Save data to local storage or a database
|
|
||||||
localStorage.setItem(`divData${this.element.id}`, JSON.stringify(data));
|
|
||||||
};
|
|
||||||
|
|
||||||
// Load saved data
|
|
||||||
const loadData = () => {
|
|
||||||
const data = localStorage.getItem(`divData${this.element.id}`);
|
|
||||||
if (data) {
|
|
||||||
const parsedData = JSON.parse(data);
|
|
||||||
this.element.style.left = `${parsedData.x}px`;
|
|
||||||
this.element.style.top = `${parsedData.y}px`;
|
|
||||||
this.element.style.width = `${parsedData.width}px`;
|
|
||||||
this.element.style.height = `${parsedData.height}px`;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Call the save function when the user stops dragging
|
|
||||||
document.addEventListener('mouseup', saveData);
|
|
||||||
|
|
||||||
// Load saved data on page load
|
|
||||||
loadData();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Append the div to the space
|
|
||||||
appendToFrame(space) {
|
|
||||||
this.element.id = `newDiv${space.children.length}`;
|
|
||||||
space.appendChild(this.element);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Function to generate a random color
|
|
||||||
function getRandomColor() {
|
|
||||||
const letters = '0123456789ABCDEF';
|
|
||||||
let color = '#';
|
|
||||||
for (let i = 0; i < 6; i++) {
|
|
||||||
color += letters[Math.floor(Math.random() * 16)];
|
|
||||||
}
|
|
||||||
return color;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Get the space element
|
|
||||||
const space = document.getElementById('space');
|
|
||||||
const addFrameButton = document.getElementById('addFrame');
|
|
||||||
|
|
||||||
// Add event listener to the add space button
|
|
||||||
addFrameButton.addEventListener('click', () => {
|
|
||||||
const newDiv = new NewDiv(100, 100, 100, 100, getRandomColor());
|
|
||||||
newDiv.createDiv();
|
|
||||||
newDiv.appendToFrame(space);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Create a new NewDiv instance
|
|
||||||
const newDiv = new NewDiv(100, 100, 800, 600, '#000');
|
|
||||||
newDiv.createDiv();
|
|
||||||
newDiv.appendToFrame(document.getElementById('space'));
|
|
||||||
</script>
|
|
||||||
{% endblock %}
|
|
||||||
|
|
@ -1,81 +0,0 @@
|
||||||
---
|
|
||||||
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 %}
|
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
---
|
|
||||||
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 %}
|
|
||||||
|
|
@ -1,129 +0,0 @@
|
||||||
$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;
|
|
||||||
}
|
|
||||||
|
|
||||||
#addFrame {
|
|
||||||
@extend .io_button;
|
|
||||||
position: fixed;
|
|
||||||
top: 8px;
|
|
||||||
right: 8px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
$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%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
@import "demo_config";
|
|
||||||
@import "hippie-style/hippie";
|
|
||||||
|
|
||||||
@import "modules/ui/new_module";
|
|
||||||
@import "modules/ui/settings_module";
|
|
||||||
|
|
@ -1,29 +0,0 @@
|
||||||
<!-- 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>
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
<!-- 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