Commit 11fe5b98 authored by Dennis Appel's avatar Dennis Appel

Add more welcome text, update wiki css

parent 69dd6d56
......@@ -11,7 +11,7 @@
{% if checklist %}
<div class="grid-x grid-padding-x">
<div class="cell large-offset-3 large-6 large-offset-1 content">
<div class="cell large-offset-3 large-6 content">
<h1>Checkliste</h1>
<div id='checklist' class="grid-x grid-padding-x grid-padding-y grid-margin-y">
{% for category in checklist %}
......@@ -27,7 +27,7 @@
<div class="cell vertical-space-bottom-small" id="entry_{{entry.id}}" name="entry_{{entry.id}}">
<button class="button small alert checklist-entry" onclick="checkListToggle(this, {{entry.id}})">Offen
</button>
<h3 class="checklist-entry checklist-title" onclick="checkListToggle(this, {{entry.id}})">
<h3 class="checklist-entry checklist-title">
{{entry.checkListEntryTitle}}
{% if entry.wikiEntry.id %}&nbsp;
<a class="link" href="{% url 'wiki:index' %}#item_{{entry.wikiEntry.id}}">&lt;Wiki&gt;</a>
......
This source diff could not be displayed because it is too large. You can view the blob instead.
$(document).foundation();
var checklistJson = {"entries" : {"entry_1": true,}};
window.onload = function() {
document.addEventListener("DOMContentLoaded", function(event) {
loadLocalStorage();
}
});
var checklistJson = {"entries" : {"entry_1": true,}};
function checkListToggle(element, checklistId) {
let label = element.parentElement.getElementsByClassName("label")[0];
element.innerHTML = label.classList.contains("alert") ? "&Ouml;ffnen" : "Abschlie&szlig;en";
let completed = label.classList.contains("alert") ? true : false;
label.innerHTML = label.classList.contains("alert") ? "Erledigt" : "Offen";
label.classList.toggle("alert");
label.classList.toggle("success");
let completed = element.classList.contains("alert") ? true : false;
element.innerHTML = completed ? "Abgeschlossen" : "Offen";
element.classList.toggle("alert");
element.classList.toggle("success");
updateLocalStorage(checklistId, completed);
}
function updateLocalStorage(checklistId, completed) {
let checklistJson = JSON.parse(localStorage.getItem('checklist'))
if (checklistJson === null) {
checklistJson = {};
......@@ -29,9 +26,16 @@ function updateLocalStorage(checklistId, completed) {
function loadLocalStorage() {
let checklistJson = JSON.parse(localStorage.getItem('checklist'))
console.log(checklistJson);
if (!document.getElementById("checklist")) return;
for (let item in checklistJson) {
if (checklistJson[item]) {
document.getElementById(item).getElementsByTagName("button")[0].click()
let button = document.getElementById(item).getElementsByTagName("button")[0];
if (button) {
if (checklistJson[item]) {
button.innerHTML = checklistJson[item] ? "Abgeschlossen" : "Offen";
button.classList.toggle("alert");
button.classList.toggle("success");
}
}
}
}
......@@ -114,7 +114,7 @@ html, body {
}
.example-image {
width: 50%;
width: 25%;
float: left;
margin-right: 15px;
}
......
......@@ -59,7 +59,20 @@
<section>
<h3>Was ist eine barrierefreie App?</h3>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Eine barrierefreie App ist ganz allgemein eine Applikation,
die f&uuml;r jeglichen Menschen zug&auml;nglich und nutzbar ist. Es
geht also nicht darum eine spezielle App f&uuml;r behinderte
Personen zu konstruieren, wie zum Beispiel eine Lese-App
f&uuml;r Blinde, sondern ganz einfach darum jede Art von
Applikation f&uuml;r jeden bedienbar zu gestalten.<br>
Dabei denkt man nat&uuml;rlich erst einmal an Sehbehinderte oder
Geh&ouml;rgesch&auml;digte, aber auch motorisch oder kognitiv
eingeschr&auml;nkte Menschen, sowie ganz einfach Leute, die
nicht mit diesem Programm vertraut sind, haben besondere
Bed&uuml;rfnisse, wenn es um die Nutzung von Apps geht.
Diese reichen von der Gr&ouml;&szlig;e der Buttons, &uuml;ber das richtige
Farbschema, bis hin zu einer geeigneten Schriftart oder
einer erh&ouml;hten Fehlertoleranz.
</p>
<a href="/about/#app"><button class="hollow button">Mehr erfahren</button></a>
</section>
......@@ -71,10 +84,11 @@
Wir bieten diverse Resourcen und Guidelines zum Erstellen
einer barrierefreien App.<br>
Das Wiki beschreibt allgemeine und App spezifische Guidelines
f&uuml;r Entwickler und erl&auml;tert diese anhand von ausgew&auml;ten Beispielen.
<br>
Die interaktive Checkliste soll Entwicklern dabei helfen, w&auml;hrend der Entwicklung
die von uns empfohlenen Richtlinien effektiv umzusetzen.
f&uuml;r Entwickler und erl&auml;tert diese anhand von
ausgew&auml;ten Beispielen.<br>
Die interaktive Checkliste soll Entwicklern dabei helfen,
w&auml;hrend der Entwicklung die von uns empfohlenen
Richtlinien effektiv umzusetzen.
</p>
<a href="/checklist/"><button class="hollow button">Zur Checkliste</button></a>
<a href="/wiki/"><button class="hollow button">Zum Wiki</button></a>
......
......@@ -3,7 +3,7 @@
{% load staticfiles %}
{% block title %}
{% with title="Startseite" %}
{% with title="Wiki" %}
{{ block.super }}
{% endwith %}
{% endblock %}
......@@ -15,39 +15,25 @@
<div class="grid-x">
<div class="cell large-2 cell-background-wiki-mg wiki-navigation">
<section>
<div name="wiki-navigation" id="wiki-navigation" class="text-center">
<h4>Inhalt</h4>
</div>
<ul class="vertical menu">
{% for entry in wiki_list %}
<li>
<a class="wiki-navigation-link" href="#item_{{entry.id}}">{{entry.wikiTitle}}</a>
</li>
{% endfor %}
</ul>
</section>
</div>
<div class="cell large-6 large-offset-1 content">
<div class="cell large-6 large-offset-3 content">
<div class="grid-x grid-padding-x">
{% for entry in wiki_list %}
<section>
{% for entry in wiki_list %}
<div class="cell cell-background-lg vertical-space" id="item_{{entry.id}}" name="item_{{entry.id}}">
<h2>{{entry.wikiTitle}}</h2>
<p>{{entry.wikiText|safe}}</p>
<a class="link" href="#wiki-navigation">nach oben</a>
<section>
<h2>{{entry.wikiTitle}}</h2>
<p>{{entry.wikiText|safe}}</p>
</section>
{% if entry.wikiexample_set.all %}
<div class="grid-x grid-margin-x">
<div class="cell large-6">
<div class="grid-x grid-margin-x grid-padding-x vertical-space-bottom-small">
<div class="cell">
<div class="grid-x">
{% for example in entry.getPositiveExamples %}
<div class="cell vertical-space-small">
<div class="callout success example-callout">
<div class="callout primary example-callout">
<h3>{{example.exampleTitle}}</h3>
<img class="example-image" src="{% static 'images/examples/' %}{{example.exampleImage}}" alt="{{example.exampleImageAlt}}">
<p>{{example.exampleText|safe}}</p>
......@@ -56,11 +42,11 @@
{% endfor %}
</div>
</div>
<div class="cell large-6">
<div class="cell">
<div class="grid-x">
{% for example in entry.getNegativeExamples %}
<div class="cell vertical-space-small">
<div class="callout alert example-callout">
<div class="callout primary example-callout">
<h3>{{example.exampleTitle}}</h3>
<img class="example-image" src="{% static 'images/examples/' %}{{example.exampleImage}}" alt="{{example.exampleImageAlt}}">
<p>{{example.exampleText}}</p>
......@@ -71,14 +57,29 @@
</div>
</div>
{% endif %}
<a class="link" href="#wiki-navigation"><button class="button hollow">nach oben</button></a>
</div>
</section>
{% endfor %}
{% endfor %}
</div>
</div>
<div class="cell large-2 large-offset-1 cell-background-wiki-mg wiki-navigation">
<section>
<div name="wiki-navigation" id="wiki-navigation" class="text-center">
<h4>Inhalt</h4>
</div>
<ul class="vertical menu">
{% for entry in wiki_list %}
<li>
<a class="wiki-navigation-link" href="#item_{{entry.id}}">{{entry.wikiTitle}}</a>
</li>
{% endfor %}
</ul>
</section>
</div>
</div>
</div>
{% endif %}
</section>
{% endblock %}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment