Commit e0c4862d authored by Dennis Appel's avatar Dennis Appel

Add CSS for Welcome, About and Wiki page

parent 4a37ac32
{% extends "base.html" %}
{% block title %}
{% with title="Infos" %}
{{ block.super }}
{% endwith %}
{% endblock %}
{% block content %}
<section>
<div class="grid-container">
<div class="grid-x">
<div class="cell cell-background-lg vertical-space">
<h1>Was ist Barrierefreiheit?</h1>
</div>
<section>
<div class="cell cell-background-lg">
<h2>Lorep ipsum dolor</h2>
<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.
</p>
<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.
</p>
<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.
</p>
</div>
</section>
<section>
<div class="cell cell-background-lg vertical-space">
<h2>Lorep ipsum dolor</h2>
<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.
</p>
</div>
</section>
<div class="cell cell-background-lg vertical-space">
<h1>Wozu Barrierefreiheit?</h1>
</div>
<div class="cell cell-background-lg">
<h2>Lorep ipsum dolor</h2>
<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.
</p>
</div>
<div class="cell cell-background-lg vertical-space">
<h2>Lorep ipsum dolor</h2>
<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.
</p>
</div>
<div class="cell cell-background-lg vertical-space">
<h2>Lorep ipsum dolor</h2>
<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.
</p>
</div>
<div class="cell cell-background-lg vertical-space">
<h2>Lorep ipsum dolor</h2>
<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.
</p>
</div>
</div>
</div>
</section>
{% endblock %}
......@@ -9,3 +9,9 @@ class CheckListEntry(models.Model):
checkListEntryTitle = models.CharField(max_length=200)
checkListEntrySeverity = models.CharField(max_length=10)
checkListEntryDescription = models.TextField()
def __str__(self):
return self.checkListEntryTitle
class Meta:
ordering = ['checkListEntryTitle']
{% extends "base.html" %}
{% block title %}
{% with title="Checkliste" %}
{{ block.super }}
{% endwith %}
{% endblock %}
{% block content %}
{% if checklist_entries %}
<div class="grid-container">
<div class="grid-container vertical-space">
<h1>Checkliste</h1>
<div id='checklist' class="grid-x grid-margin-x grid-padding-x grid-padding-y grid-margin-y">
{% for entry in checklist_entries %}
......@@ -14,8 +20,8 @@
</p>
<p>
{{entry.checkListEntryDescription}}</br>
<a href ="{% url 'wiki:index' %}#item_{{entry.id}}">Wiki</a>
<a href ="{% url 'glossary:index'%}#item_{{entry.id}}">Glossary</a>
<a class="link" href="{% url 'wiki:index' %}#item_{{entry.id}}">Wiki</a>
<a class="link" href="{% url 'glossary:index'%}#item_{{entry.id}}">Glossar</a>
</p>
<button class="hollow button">Erledigt</button>
</div>
......
......@@ -4,3 +4,6 @@ from django.db import models
class GlossaryEntry(models.Model):
glossaryTitle = models.CharField(max_length=200)
glossaryDefinition = models.TextField()
def __str__(self):
return self.glossaryTitle
{% extends "base.html" %}
{% block title %}
{% with title="Glossar" %}
{{ block.super }}
{% endwith %}
{% endblock %}
$light-gray: #fbfbfb;
$medium-gray: #cacaca;
$medium-gray-wiki: #f7f7f7;
$dark-gray: #8a8a8a;
$black: #0a0a0a;
$white: #fefefe;
$dark-blue: #23405a;
.text-color-primary {
color: $dark-blue;
}
.cell-background-lg {
background-color: $light-gray;
}
.cell-background-mg {
background-color: $medium-gray;
}
.cell-background-wiki-mg {
background-color: $medium-gray-wiki;
}
.cell-background-dg {
background-color: $dark-gray;
}
......@@ -19,3 +29,11 @@ $white: #fefefe;
.cell-background-white {
background-color: $white;
}
.vertical-space {
margin-top: 40px;
}
.link {
color: $primary-color;
}
......@@ -2,7 +2,24 @@
padding: 0;
}
.menu-border-left {
color: black;
border-left: 1px solid $dark-gray;
}
.top-bar {
padding: 0.5rem;
margin-bottom: 1.5rem;
padding: 0.7rem;
}
.wiki-navigation {
border-right: 1px solid #efefef;
}
.wiki-navigation-link {
color: #444444;
font-weight: bold;
}
.wiki-navigation-link:hover {
color: scale-color(#444444, $lightness: -100%);
}
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
{% load staticfiles %}
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation for Sites</title>
{% load staticfiles %}
{% block title %}
<title>{{title}} - Barrierefreie App</title>
{% endblock %}
<link rel="stylesheet" href="{% static 'css/app.css' %}" />
</head>
<body>
{% block header %}{% endblock %}
{% block navigation %}
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu">
<li class="menu-text"><a>Webportal - ergonomische, mobile Anwendungen</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu align-right middle">
<li><a href="/welcome/">Start</a></li>
<li><a href="/about/">Infos</a></li>
<li><a href="/checklist/">Checkliste</a></li>
<li><a href="/wiki/">Wiki</a></li>
<li><a href="/glossary/">Glossar</a></li>
</ul>
<section>
<div class="top-bar">
<div class="top-bar-left">
<ul class="menu">
<li class="menu-text"><a>Webportal - ergonomische, mobile Anwendungen</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu align-right middle">
<li class="menu-border-left"><a href="/welcome/">Start</a></li>
<li class="menu-border-left"><a href="/about/">Infos</a></li>
<li class="menu-border-left"><a href="/checklist/">Checkliste</a></li>
<li class="menu-border-left"><a href="/wiki/">Wiki</a></li>
<li class="menu-border-left"><a href="/glossary/">Glossar</a></li>
</ul>
</div>
</div>
</div>
</section>
{% endblock %}
{% block content %}{% endblock %}
{% block footer %}{% endblock %}
......
{% extends "base.html" %}
{% block title %}
{% with title="Startseite" %}
{{ block.super }}
{% endwith %}
{% endblock %}
{% block content %}
<section>
<div class="grid-container vertical-space">
<div class="grid-x grid-margin-x">
<div class="cell cell-background-lg">
<h2>Worum geht es?</h2>
<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.
</p>
</div>
<div class="cell cell-background-lg vertical-space">
<h2>Was ist Barrierefreiheit?</h2>
<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.
</p>
<button class="hollow button" href="/about/">Mehr erfahren</button>
</div>
</div>
<div class="grid-x grid-margin-x vertical-space">
<div class="cell large-6 cell-background-lg">
<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.
</p>
<button class="hollow button" href="/about/">Mehr erfahren</button>
</div>
<div class="cell large-6 cell-background-lg">
<h3>Wie mache ich 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.
</p>
<button class="hollow button" href="/wiki/">Mehr erfahren</button>
</div>
</div>
</div>
</section>
{% endblock %}
# Generated by Django 2.1.3 on 2018-11-16 19:43
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('wiki', '0004_auto_20181107_1337'),
]
operations = [
migrations.AddField(
model_name='wikiexample',
name='examplePositive',
field=models.BooleanField(default=True),
),
]
......@@ -10,6 +10,9 @@ class WikiEntry(models.Model):
def __str__(self):
return self.wikiTitle
class Meta:
ordering = ['wikiTitle']
class WikiExample(models.Model):
wikiEntry = models.ForeignKey(
......@@ -17,6 +20,10 @@ class WikiExample(models.Model):
exampleTitle = models.CharField(max_length=200)
exampleText = models.TextField()
exampleResource = models.FileField(blank=True)
examplePositive = models.BooleanField(default=True)
def __str__(self):
return self.exampleText
return self.exampleTitle
class Meta:
ordering = ['-examplePositive', 'exampleTitle']
{% extends "base.html" %}
{% block title %}
{% with title="Startseite" %}
{{ block.super }}
{% endwith %}
{% endblock %}
{% block content %}
{% if wiki_list %}
<section>
<div id="wiki_content">
{% if wiki_list %}
{% for entry in wiki_list %}
<div id="item_{{entry.id}}" name="item_{{entry.id}}">
<h2>{{entry.wikiTitle}}</h2>
<p>{{entry.wikiText}}</p>
<div class="grid-x grid-margin-x">
<div class="cell large-2 cell-background-wiki-mg wiki-navigation">
<div name="wiki-navigation" id="wiki-navigation" class="text-center">
<h4>Inhaltsverzeichnis</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>
</div>
{% if entry.wikiexample_set.all %}
<div class="wiki_examples"></div>
<div class="cell large-6 large-offset-1">
{% for example in entry.wikiexample_set.all %}
<h3>{{example.exampleTitle}}</h3>
<p>{{example.exampleText}}</p>
{% endfor %}
{% for entry in wiki_list %}
<section>
<div class="cell cell-background-lg vertical-space" id="item_{{entry.id}}" name="item_{{entry.id}}">
<h2>{{entry.wikiTitle}}</h2>
<p>{{entry.wikiText}}</p>
<a class="link" href="#wiki-navigation">Zur&uuml;ck</a>
</div>
{% endif %}
{% if entry.wikiexample_set.all %}
</div>
{% endfor %}
{% for example in entry.wikiexample_set.all %}
{% if example.examplePositive %}
<div class="callout success">
<h3>{{example.exampleTitle}}</h3>
<p>{{example.exampleText}}</p>
</div>
{% else %}
<div class="callout alert">
<h3>{{example.exampleTitle}}</h3>
<p>{{example.exampleText}}</p>
</div>
{% endif %}
{% endfor %}
</div>
{% endif %}
</div>
</section>
{% endfor %}
<div id="wiki_navigation">
<ul>
{% for entry in wiki_list %}
<li>
<a href ="#item_{{entry.id}}">{{entry.wikiTitle}}</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
{% endif %}
{% 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