got rid of mock-frontend
This commit is contained in:
Felix Hamann
parent
e4ddcd9e49
commit
2dd58acb59
@ -1,181 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>UniWorX | Kurse</title>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<link rel="stylesheet" href="src/css/main.css">
|
|
||||||
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,800,900" rel="stylesheet">
|
|
||||||
<script src="lib/velocity.min.js"></script>
|
|
||||||
<script data-main="src/js/main" src="lib/require.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="grid">
|
|
||||||
<header class="header">
|
|
||||||
<nav>
|
|
||||||
<ul class="flat">
|
|
||||||
<li><a href="/">Startseite</a></li>
|
|
||||||
<li><a href="/courses.html">Kurse</a></li>
|
|
||||||
<li><a href="/settings">Benutzerinstellungen</a></li>
|
|
||||||
<li><a href="/logout">Abmelden</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<aside class="sidebar">
|
|
||||||
<div class="box">
|
|
||||||
<h3>Wintersemester 2017/2018</h3>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<h4>Bachelor-Seminar "Web Technologies"</h4>
|
|
||||||
<ul>
|
|
||||||
<li>Übungsgruppen</li>
|
|
||||||
<li>Abgaben</li>
|
|
||||||
<li>Klausuren</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<h4>Blockpraktikum: "Concept Development"</h4>
|
|
||||||
<ul>
|
|
||||||
<li>Übungsgruppen</li>
|
|
||||||
<li>Abgaben</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="box">
|
|
||||||
<div class="box-title">Boxilein</div>
|
|
||||||
<p>Kleines Boxilein am Randilein</p>
|
|
||||||
</div>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
|
|
||||||
<section class="main-content">
|
|
||||||
<h1>Kurse</h1>
|
|
||||||
<h2>Wintersemester 2017/2018</h2>
|
|
||||||
<div class="box course-box">
|
|
||||||
<div class="course">
|
|
||||||
<h4>Bachelor-Seminar "Web Technologies"</h4>
|
|
||||||
<p>
|
|
||||||
In diesem Seminar erstellen die Teilnehmer Lehrmaterialien zu ausgewählten aktuellen Web-Technologien. Im Zuge des Seminars werden dazu Folien erstellt, vorgetragen und eine wissenschaftliche Ausarbeitung über das Thema erstellt.
|
|
||||||
</p>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<h4 class="js-show-hide-toggle">Übungsgruppen</h4>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<table class="sortable">
|
|
||||||
<tr>
|
|
||||||
<th>Name (Raum)</th>
|
|
||||||
<th>Termin</th>
|
|
||||||
<th>Studenten</th>
|
|
||||||
<th>Tutor</th>
|
|
||||||
<th>Anmeldezeitraum</th>
|
|
||||||
<th></th>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Gruppe 1<br>Leopoldstraße 13, Raum 1502</td>
|
|
||||||
<td>Fr. 10:15</td>
|
|
||||||
<td>35/35</td>
|
|
||||||
<td><a href="#">Axel Hösl</a></td>
|
|
||||||
<td>Fr. 09.02.18, 10:00</td>
|
|
||||||
<td><a href="#">Verlassen</a></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Gruppe 2<br>Leopoldstraße 13, Raum 1502</td>
|
|
||||||
<td>Fr. 12:15</td>
|
|
||||||
<td>13/20</td>
|
|
||||||
<td><a href="#">Sebastian Mader</a></td>
|
|
||||||
<td>Fr. 09.02.18, 10:00</td>
|
|
||||||
<td><a href="#">Verlassen</a></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Gruppe 3<br>Leopoldstraße 13, Raum 1502</td>
|
|
||||||
<td>Fr. 14:15</td>
|
|
||||||
<td>7/25</td>
|
|
||||||
<td><a href="#">Max Mustermann</a></td>
|
|
||||||
<td>Fr. 09.02.18, 10:00</td>
|
|
||||||
<td><a href="#">Verlassen</a></td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<h4 class="js-show-hide-toggle">Abgaben</h4>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
Arbitrary content
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<h4 class="js-show-hide-toggle">Klausuren</h4>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
Etwas anderes...
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="course">
|
|
||||||
<h4>Blockpraktikum: "Concept Development"</h4>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<h4 class="js-show-hide-toggle">Übungsgruppen</h4>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<table>
|
|
||||||
<tr>
|
|
||||||
<th>Name (Raum)</th>
|
|
||||||
<th>Termin</th>
|
|
||||||
<th>Studenten</th>
|
|
||||||
<th>Tutor</th>
|
|
||||||
<th>Anmeldezeitraum</th>
|
|
||||||
<th></th>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Gruppe 1<br>Leopoldstraße 13, Raum 1502</td>
|
|
||||||
<td>Fr. 09.02.18, 10:00</td>
|
|
||||||
<td>35/35</td>
|
|
||||||
<td><a href="#">Axel Hösl</a></td>
|
|
||||||
<td>Fr. 09.02.18, 10:00</td>
|
|
||||||
<td><a href="#">Verlassen</a></td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>Abgaben</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h2>Sommersemester 2017</h2>
|
|
||||||
<div class="box course-box">
|
|
||||||
<h4>Human Factors in Engineering</h4>
|
|
||||||
<ul>
|
|
||||||
<li>Klausuren</li>
|
|
||||||
</ul>
|
|
||||||
<h4>Vorlesung Multimedia Programmierung</h4>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<h4 class="js-show-hide-toggle">Übungsgruppen</h4>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<h4 class="js-show-hide-toggle">Abgaben</h4>
|
|
||||||
<div>
|
|
||||||
Bisher keine Abgaben für <em>Vorlesung Multimedia Programmierung</em>.
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>Klausuren</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<footer class="footer">
|
|
||||||
<nav>
|
|
||||||
<ul class="flat">
|
|
||||||
<li><a href="">Impressum</a></li>
|
|
||||||
<li><a href="">Kontakt</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="de">
|
|
||||||
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>TITLE</title>
|
|
||||||
<meta name="description" content="DESCRIPTION">
|
|
||||||
<link rel="stylesheet" href="PATH">
|
|
||||||
|
|
||||||
<!--[if lt IE 9]>
|
|
||||||
<script src = "http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
||||||
<![endif]-->
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
@ -1,40 +0,0 @@
|
|||||||
{
|
|
||||||
"events": [
|
|
||||||
{
|
|
||||||
"title": "Bachelor Seminar \"Räumliche Informationssysteme\"",
|
|
||||||
"description": "Dieses Seminar dient der Hinführung zum wissenschatlichen Arbeiten in zweifacher Hinsicht. Esse incididunt dolore deserunt id non veniam.",
|
|
||||||
"registrationUrl": "/app/www/events.html",
|
|
||||||
"registrationLabel": "Zentralanmeldung"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Bachelor Seminar \"Räumliche Informationssysteme\"",
|
|
||||||
"description": "Dieses Seminar dient der Hinführung zum wissenschatlichen Arbeiten in zweifacher Hinsicht. Esse incididunt dolore deserunt id non veniam.",
|
|
||||||
"registrationUrl": "/app/www/events.html",
|
|
||||||
"registrationLabel": "Zentralanmeldung"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Bachelor Seminar \"Räumliche Informationssysteme\"",
|
|
||||||
"description": "Dieses Seminar dient der Hinführung zum wissenschatlichen Arbeiten in zweifacher Hinsicht. Esse incididunt dolore deserunt id non veniam.",
|
|
||||||
"registrationUrl": "/app/www/events.html",
|
|
||||||
"registrationLabel": "Zentralanmeldung"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Bachelor Seminar \"Räumliche Informationssysteme\"",
|
|
||||||
"description": "Dieses Seminar dient der Hinführung zum wissenschatlichen Arbeiten in zweifacher Hinsicht. Esse incididunt dolore deserunt id non veniam.",
|
|
||||||
"registrationUrl": "/app/www/events.html",
|
|
||||||
"registrationLabel": "Zentralanmeldung"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Bachelor Seminar \"Räumliche Informationssysteme\"",
|
|
||||||
"description": "Dieses Seminar dient der Hinführung zum wissenschatlichen Arbeiten in zweifacher Hinsicht. Esse incididunt dolore deserunt id non veniam.",
|
|
||||||
"registrationUrl": "/app/www/events.html",
|
|
||||||
"registrationLabel": "Zentralanmeldung"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Bachelor Seminar \"Räumliche Informationssysteme\"",
|
|
||||||
"description": "Dieses Seminar dient der Hinführung zum wissenschatlichen Arbeiten in zweifacher Hinsicht. Esse incididunt dolore deserunt id non veniam.",
|
|
||||||
"registrationUrl": "/app/www/events.html",
|
|
||||||
"registrationLabel": "Zentralanmeldung"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,43 +0,0 @@
|
|||||||
var http = require('http');
|
|
||||||
var fs = require('fs');
|
|
||||||
|
|
||||||
//create a server object:
|
|
||||||
http.createServer(function (req, res) {
|
|
||||||
res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500');
|
|
||||||
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
|
|
||||||
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
|
|
||||||
res.setHeader('Access-Control-Allow-Credentials', true);
|
|
||||||
|
|
||||||
switch(req.url) {
|
|
||||||
case "/events":
|
|
||||||
fs.readFile('events.json', function(err, data) {
|
|
||||||
if (err) {
|
|
||||||
res.writeHead(404);
|
|
||||||
res.write(err);
|
|
||||||
} else {
|
|
||||||
res.writeHead(200, {'Content-Type': 'application/json'});
|
|
||||||
res.write(data);
|
|
||||||
}
|
|
||||||
res.end();
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case '/home':
|
|
||||||
fs.readFile('_home.html', function(err, data) {
|
|
||||||
if (err) {
|
|
||||||
res.writeHead(404);
|
|
||||||
res.write(err);
|
|
||||||
} else {
|
|
||||||
res.writeHead(200, {'Content-Type': 'text/html'});
|
|
||||||
res.write(data);
|
|
||||||
}
|
|
||||||
res.end();
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
res.writeHead(301, {'Location': '/home'});
|
|
||||||
res.end();
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}).listen(8080); //the server object listens on port 8080
|
|
||||||
|
|
||||||
// start with `supervisor server.js`
|
|
||||||
@ -1,66 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<title>UniWorX</title>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<link rel="stylesheet" href="src/css/main.css">
|
|
||||||
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,800,900" rel="stylesheet">
|
|
||||||
<script src="lib/velocity.min.js"></script>
|
|
||||||
<script data-main="src/js/main" src="lib/require.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="grid">
|
|
||||||
<header class="header">
|
|
||||||
<nav>
|
|
||||||
<ul class="flat">
|
|
||||||
<li><a href="/">Startseite</a></li>
|
|
||||||
<li><a href="/courses.html">Kurse</a></li>
|
|
||||||
<li><a href="/settings">Benutzerinstellungen</a></li>
|
|
||||||
<li><a href="/logout">Abmelden</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<aside class="sidebar">
|
|
||||||
<h2>Kalender</h2>
|
|
||||||
<img src="https://icon-icons.com/icons2/317/PNG/512/calendar-icon_34471.png" width="100%" height="auto" alt="kalender">
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<section class="main-content">
|
|
||||||
<h1>Willkommen bei UniWorX</h1>
|
|
||||||
<div class="box">
|
|
||||||
<h2>Übungsblatt Deadlines</h2>
|
|
||||||
<p>Keine kommenden Übungsblatt-Deadlines.</p>
|
|
||||||
</div>
|
|
||||||
<h2>Klausuren</h2>
|
|
||||||
<div class="box">
|
|
||||||
<table>
|
|
||||||
<tr>
|
|
||||||
<th>Veranstaltung</th>
|
|
||||||
<th>Klausur</th>
|
|
||||||
<th>Beginn</th>
|
|
||||||
<th>Anmelde-Deadline</th>
|
|
||||||
<th>Check</th>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Kurs Zeichnen und Skizzieren von Szenarien</td>
|
|
||||||
<td>Abschlusspräsentation</td>
|
|
||||||
<td>Fr. 09.02.18, 10:00</td>
|
|
||||||
<td>Fr. 02.02.18, 10:00</td>
|
|
||||||
<td>X</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<footer class="footer">
|
|
||||||
<nav>
|
|
||||||
<ul class="flat">
|
|
||||||
<li><a href="#">Impressum</a></li>
|
|
||||||
<li><a href="#">Kontakt</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
File diff suppressed because one or more lines are too long
4
app/www/lib/velocity.min.js
vendored
4
app/www/lib/velocity.min.js
vendored
File diff suppressed because one or more lines are too long
@ -1,360 +0,0 @@
|
|||||||
.grid {
|
|
||||||
display: grid;
|
|
||||||
height: 100%;
|
|
||||||
grid-template-columns: [grid-col-start] repeat(12, 1fr) [grid-col-end];
|
|
||||||
grid-template-rows: var(--header-height) auto var(--footer-height);
|
|
||||||
grid-gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid > header {
|
|
||||||
grid-column: span 12;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid > .sidebar {
|
|
||||||
grid-column: 2 / span 2;
|
|
||||||
grid-row-start: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid > .sidebar-right {
|
|
||||||
display: none;
|
|
||||||
grid-column: span 2;
|
|
||||||
grid-row-start: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid > section {
|
|
||||||
grid-column: 4/span 8;
|
|
||||||
grid-row-start: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid > footer {
|
|
||||||
grid-column: span 12;
|
|
||||||
grid-row-start: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1000px) {
|
|
||||||
.grid {
|
|
||||||
grid-template-columns: [grid-col-start] repeat(8, 1fr) [grid-col-end];
|
|
||||||
grid-gap: 10px;
|
|
||||||
}
|
|
||||||
.grid > header {
|
|
||||||
grid-column: span 8;
|
|
||||||
}
|
|
||||||
.grid > .sidebar {
|
|
||||||
grid-column: grid-col-start / span 2;
|
|
||||||
grid-row-start: 2;
|
|
||||||
}
|
|
||||||
.grid > section {
|
|
||||||
grid-column: 3 / span 6;
|
|
||||||
grid-row-start: 2;
|
|
||||||
}
|
|
||||||
.grid > footer {
|
|
||||||
grid-column: span 8;
|
|
||||||
grid-row-start: 3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 800px) {
|
|
||||||
.grid {
|
|
||||||
grid-template-columns: [grid-col-start] repeat(4, 1fr) [grid-col-end];
|
|
||||||
}
|
|
||||||
.grid > header, .grid > .sidebar, .grid > section, .grid > footer {
|
|
||||||
grid-column: span 4;
|
|
||||||
}
|
|
||||||
.grid > section {
|
|
||||||
grid-row-start: 2;
|
|
||||||
}
|
|
||||||
.grid > .sidebar {
|
|
||||||
grid-row-start: 3;
|
|
||||||
}
|
|
||||||
.grid > footer {
|
|
||||||
grid-row-start: 4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.grid {
|
|
||||||
grid-template-columns: [grid-col-start] repeat(2, 1fr) [grid-col-end];
|
|
||||||
}
|
|
||||||
.grid > header, .grid > .sidebar, .grid > section, .grid > footer {
|
|
||||||
grid-column: span 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.box {
|
|
||||||
position: relative;
|
|
||||||
padding: 13px 24px;
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: flex;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
-webkit-box-direction: normal;
|
|
||||||
-ms-flex-direction: column;
|
|
||||||
flex-direction: column;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box ul {
|
|
||||||
margin-left: 10px;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.box p {
|
|
||||||
margin-bottom: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.course-box {
|
|
||||||
border-left: 1px solid #ccb3e6;
|
|
||||||
padding: 0 20px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.course-box li {
|
|
||||||
padding-left: 7px;
|
|
||||||
padding-bottom: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.course-box li h4::before {
|
|
||||||
content: '>';
|
|
||||||
position: absolute;
|
|
||||||
margin-left: -13px;
|
|
||||||
font-weight: 800;
|
|
||||||
}
|
|
||||||
|
|
||||||
.course-box li h4:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.course-box li h4:hover::before {
|
|
||||||
content: 'v';
|
|
||||||
}
|
|
||||||
|
|
||||||
.course-box li.collapsed {
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.course-box li.collapsed > * {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.course-box li.collapsed h4 {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.course-box li.collapsed h4::before {
|
|
||||||
content: '>';
|
|
||||||
}
|
|
||||||
|
|
||||||
.course-box li.collapsed h4:hover::before {
|
|
||||||
content: 'v';
|
|
||||||
}
|
|
||||||
|
|
||||||
.course-box .course {
|
|
||||||
margin-bottom: 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
table.sortable th {
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
padding-right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
table.sortable th.sorted-asc, table.sortable th.sorted-desc {
|
|
||||||
color: rebeccapurple;
|
|
||||||
}
|
|
||||||
|
|
||||||
table.sortable th.sorted-asc::after, table.sortable th.sorted-desc::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
top: 7px;
|
|
||||||
border-left: 8px solid transparent;
|
|
||||||
border-right: 8px solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
table.sortable th.sorted-asc::after {
|
|
||||||
border-top: 8px solid rebeccapurple;
|
|
||||||
}
|
|
||||||
|
|
||||||
table.sortable th.sorted-desc::after {
|
|
||||||
border-bottom: 8px solid rebeccapurple;
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: #ffffff;
|
|
||||||
color: #353535;
|
|
||||||
font-family: "Source Sans Pro", Helvetica, sans-serif;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 18px;
|
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
a,
|
|
||||||
a:visited,
|
|
||||||
a:link {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 600;
|
|
||||||
-webkit-transition: color .2s ease, background-color .2s ease;
|
|
||||||
transition: color .2s ease, background-color .2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: rebeccapurple;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.flat > li {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5 {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 32px;
|
|
||||||
margin: 20px 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 24px;
|
|
||||||
margin: 10px 0 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 20px;
|
|
||||||
margin: 5px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
font-size: 16px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
th, td {
|
|
||||||
text-align: left;
|
|
||||||
padding: 0 2px 0 4px;
|
|
||||||
border-left: 1px solid rebeccapurple;
|
|
||||||
}
|
|
||||||
|
|
||||||
th:first-of-type, td:first-of-type {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
position: relative;
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: flex;
|
|
||||||
-webkit-box-orient: horizontal;
|
|
||||||
-webkit-box-direction: normal;
|
|
||||||
-ms-flex-direction: row;
|
|
||||||
flex-direction: row;
|
|
||||||
-webkit-box-align: center;
|
|
||||||
-ms-flex-align: center;
|
|
||||||
align-items: center;
|
|
||||||
-webkit-box-pack: justify;
|
|
||||||
-ms-flex-pack: justify;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0 24px;
|
|
||||||
height: 60px;
|
|
||||||
line-height: 60px;
|
|
||||||
background-color: rebeccapurple;
|
|
||||||
width: 100%;
|
|
||||||
text-align: right;
|
|
||||||
overflow: hidden;
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header > nav {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-sticky-nav {
|
|
||||||
padding-top: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-sticky-nav .header {
|
|
||||||
height: 40px;
|
|
||||||
line-height: 40px;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
-webkit-transition: height .2s ease, line-height .2s ease;
|
|
||||||
transition: height .2s ease, line-height .2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-content {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.flat > li > a {
|
|
||||||
padding: 0 13px;
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
display: inline-block;
|
|
||||||
color: #eaf2ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.flat > li > a:hover {
|
|
||||||
background-color: #542a7e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
text-align: right;
|
|
||||||
height: 50px;
|
|
||||||
line-height: 50px;
|
|
||||||
padding: 7px 24px;
|
|
||||||
overflow: hidden;
|
|
||||||
background-color: rebeccapurple;
|
|
||||||
color: #eaf2ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.event-desc {
|
|
||||||
padding: 0 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button, .event-registration {
|
|
||||||
background-color: rebeccapurple;
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: flex;
|
|
||||||
-webkit-box-align: center;
|
|
||||||
-ms-flex-align: center;
|
|
||||||
align-items: center;
|
|
||||||
-webkit-box-pack: center;
|
|
||||||
-ms-flex-pack: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 3px 13px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-weight: 600;
|
|
||||||
-webkit-transition: background-color .2s ease, -webkit-transform .1s;
|
|
||||||
transition: background-color .2s ease, -webkit-transform .1s;
|
|
||||||
transition: transform .1s, background-color .2s ease;
|
|
||||||
transition: transform .1s, background-color .2s ease, -webkit-transform .1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button:hover, .event-registration:hover {
|
|
||||||
background-color: #4d2673;
|
|
||||||
-webkit-transform: scale(1.01);
|
|
||||||
transform: scale(1.01);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden {
|
|
||||||
display: none;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
/*# sourceMappingURL=main.css.map */
|
|
||||||
File diff suppressed because one or more lines are too long
@ -1,26 +0,0 @@
|
|||||||
define(function (require) {
|
|
||||||
var serverUrl = "http://localhost:8080";
|
|
||||||
|
|
||||||
return {
|
|
||||||
getEvents: function(cb) {
|
|
||||||
this.getJson('events', cb);
|
|
||||||
},
|
|
||||||
getJson: function(req, cb) {
|
|
||||||
console.log('requesting %s', req);
|
|
||||||
// TODO: sanitize url
|
|
||||||
fetch(serverUrl + req).then(function(res) {
|
|
||||||
return res.json();
|
|
||||||
}).then(function(res){
|
|
||||||
cb(res);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
getHtml: function(req, cb) {
|
|
||||||
fetch(serverUrl + req).then(function(res) {
|
|
||||||
console.log(res);
|
|
||||||
return res.text();
|
|
||||||
}).then(function(res){
|
|
||||||
cb(res);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
});
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
define(function (require) {
|
|
||||||
|
|
||||||
return {
|
|
||||||
init: function() {
|
|
||||||
console.log('Config.init()');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
});
|
|
||||||
@ -1,99 +0,0 @@
|
|||||||
define(["../api"], function (api) {
|
|
||||||
|
|
||||||
var mainContentElement = document.querySelector('.main-content');
|
|
||||||
|
|
||||||
function replaceMainContent(elements) {
|
|
||||||
var element = document.querySelector('.main-content');
|
|
||||||
|
|
||||||
Velocity(element, {
|
|
||||||
opacity: 0
|
|
||||||
}, {
|
|
||||||
duration: 100,
|
|
||||||
complete: function(animatedElements) {
|
|
||||||
// actually remove content
|
|
||||||
mainContentElement.innerHTML = "";
|
|
||||||
elements.forEach(function(el) {
|
|
||||||
// and add new one
|
|
||||||
mainContentElement.appendChild(el);
|
|
||||||
});
|
|
||||||
Velocity(element, {
|
|
||||||
opacity: 1
|
|
||||||
}, {
|
|
||||||
duration: 70
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderHtml(result) {
|
|
||||||
console.log(result);
|
|
||||||
var box = document.createElement('div');
|
|
||||||
box.classList.add('box');
|
|
||||||
box.innerHTML = result;
|
|
||||||
|
|
||||||
var boxTitleEl = document.createElement('div');
|
|
||||||
boxTitleEl.classList.add('box-title');
|
|
||||||
boxTitleEl.innerHTML = 'Wurst';
|
|
||||||
box.appendChild(boxTitleEl);
|
|
||||||
|
|
||||||
replaceMainContent([box]);
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderEvents(result) {
|
|
||||||
var els = [];
|
|
||||||
var introBox = document.createElement('div');
|
|
||||||
introBox.classList.add('box');
|
|
||||||
introBox.innerHTML = '<div class="box-title">Aktuelle Veranstaltungen</div><div class="term text">Wintersemester 2017 / 2018 (<b>WS17/18</b>)</div>';
|
|
||||||
els.push(introBox);
|
|
||||||
for (var i = 0; i < result.events.length; i++) {
|
|
||||||
var event = result.events[i];
|
|
||||||
|
|
||||||
var eventEl = document.createElement('div');
|
|
||||||
eventEl.classList.add('box', 'event-box');
|
|
||||||
|
|
||||||
var eventTitleEl = document.createElement('div');
|
|
||||||
eventTitleEl.classList.add('box-title');
|
|
||||||
eventTitleEl.innerHTML = event.title;
|
|
||||||
|
|
||||||
var eventDescEl = document.createElement('div');
|
|
||||||
eventDescEl.classList.add('event-desc');
|
|
||||||
eventDescEl.innerHTML = event.description;
|
|
||||||
|
|
||||||
var eventRegistrationEl = document.createElement('div');
|
|
||||||
eventRegistrationEl.classList.add('event-registration');
|
|
||||||
eventRegistrationEl.innerHTML = event.registrationLabel;
|
|
||||||
|
|
||||||
eventEl.appendChild(eventTitleEl);
|
|
||||||
eventEl.appendChild(eventDescEl);
|
|
||||||
eventEl.appendChild(eventRegistrationEl);
|
|
||||||
els.push(eventEl);
|
|
||||||
}
|
|
||||||
replaceMainContent(els);
|
|
||||||
// TODO: reattach handlers, load js and stuff
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
init: function() {
|
|
||||||
var linkElements = document.querySelectorAll('a[async]');
|
|
||||||
|
|
||||||
[].slice.call(linkElements).forEach((el, i) => {
|
|
||||||
var mainElement = document.querySelector('.main-content');
|
|
||||||
|
|
||||||
el.addEventListener('click', function(event) {
|
|
||||||
var req = el.getAttribute('href');
|
|
||||||
event.preventDefault();
|
|
||||||
var type = el.dataset.type || 'html';
|
|
||||||
switch(type) {
|
|
||||||
case 'json':
|
|
||||||
api.getJson(req, renderEvents);
|
|
||||||
break;
|
|
||||||
case 'html':
|
|
||||||
default:
|
|
||||||
api.getHtml(req, renderHtml);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
@ -1,38 +0,0 @@
|
|||||||
define(function (require) {
|
|
||||||
|
|
||||||
var elements = null,
|
|
||||||
toggles = null,
|
|
||||||
collapsed;
|
|
||||||
|
|
||||||
function addEventHandlers() {
|
|
||||||
elements.forEach(function(el) {
|
|
||||||
el.addEventListener('click', function elClickListener() {
|
|
||||||
var index = el.dataset.index;
|
|
||||||
var toggle = toggles[index];
|
|
||||||
if (toggle.collapsed) {
|
|
||||||
toggle.parent.classList.remove('collapsed');
|
|
||||||
} else {
|
|
||||||
toggle.parent.classList.add('collapsed');
|
|
||||||
}
|
|
||||||
toggle.collapsed = !toggle.collapsed;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
init: function(cllpsd) {
|
|
||||||
elements = Array.from(document.querySelectorAll('.js-show-hide-toggle'));
|
|
||||||
toggles = [];
|
|
||||||
collapsed = !!cllpsd;
|
|
||||||
|
|
||||||
elements.forEach(function(el, i) {
|
|
||||||
var target = el.nextElementSibling;
|
|
||||||
el.dataset.index = i;
|
|
||||||
var coll = el.parentElement.classList.contains('collapsed');
|
|
||||||
toggles.push({index: i, target: target, collapsed: coll, parent: el.parentElement});
|
|
||||||
});
|
|
||||||
|
|
||||||
addEventHandlers();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
});
|
|
||||||
@ -1,82 +0,0 @@
|
|||||||
define(function(require) {
|
|
||||||
|
|
||||||
var tables = [];
|
|
||||||
var ASC = 1;
|
|
||||||
var DESC = -1;
|
|
||||||
|
|
||||||
function initTable(table, tableIndex) {
|
|
||||||
var trs = table.querySelectorAll('tr');
|
|
||||||
var ths = table.querySelectorAll('th');
|
|
||||||
var trContents = [];
|
|
||||||
|
|
||||||
Array.from(trs).forEach(function(tr, rowIndex) {
|
|
||||||
if (rowIndex === 0) {
|
|
||||||
// register table headers as sort-listener
|
|
||||||
Array.from(tr.querySelectorAll('th')).forEach(function(th, thIndex) {
|
|
||||||
th.addEventListener('click', function(el) {
|
|
||||||
sortTableBy(tableIndex, thIndex);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
// register table rows
|
|
||||||
trContents.push(Array.from(tr.querySelectorAll('td')).map(function(td) {
|
|
||||||
return td.innerHTML;
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
tables.push({
|
|
||||||
el: table,
|
|
||||||
ths: ths,
|
|
||||||
sortBy: 0,
|
|
||||||
sortDir: ASC,
|
|
||||||
trContents,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateThs(tableIndex, thIndex, sortOrder) {
|
|
||||||
Array.from(tables[tableIndex].ths).forEach(function (th) {
|
|
||||||
th.classList.remove('sorted-asc', 'sorted-desc');
|
|
||||||
});
|
|
||||||
var suffix = sortOrder > 0 ? 'asc' : 'desc';
|
|
||||||
tables[tableIndex].ths[thIndex].classList.add('sorted-' + suffix);
|
|
||||||
}
|
|
||||||
|
|
||||||
function sortTableBy(tableIndex, thIndex) {
|
|
||||||
var table = tables[tableIndex];
|
|
||||||
var sortKey = thIndex;
|
|
||||||
var sortOrder = ASC;
|
|
||||||
if (table.sortBy === sortKey) {
|
|
||||||
sortOrder = table.sortDir === ASC ? DESC : ASC;
|
|
||||||
}
|
|
||||||
|
|
||||||
table.trContents.sort(dynamicSort(sortKey, sortOrder));
|
|
||||||
tables[tableIndex].sortBy = thIndex;
|
|
||||||
tables[tableIndex].sortDir = sortOrder;
|
|
||||||
updateThs(tableIndex, thIndex, sortOrder);
|
|
||||||
|
|
||||||
Array.from(table.el.querySelectorAll('tr')).forEach(function(tr, trIndex) {
|
|
||||||
if (trIndex > 0) {
|
|
||||||
Array.from(tr.querySelectorAll('td')).forEach(function (td, tdIndex) {
|
|
||||||
td.innerHTML = table.trContents[trIndex - 1][tdIndex];
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function dynamicSort(key, order) {
|
|
||||||
return function (a,b) {
|
|
||||||
var result = (a[key] < b[key]) ? -1 : (a[key] > b[key]) ? 1 : 0;
|
|
||||||
return result * order;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
init: function() {
|
|
||||||
var tables = document.querySelectorAll('.sortable');
|
|
||||||
Array.from(tables).forEach(function(table, i) {
|
|
||||||
initTable(table, i);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
}
|
|
||||||
});
|
|
||||||
@ -1,31 +0,0 @@
|
|||||||
define(function (require) {
|
|
||||||
|
|
||||||
return {
|
|
||||||
init: function() {
|
|
||||||
var last_known_scroll_position = 0;
|
|
||||||
var ticking = false;
|
|
||||||
var grid = document.querySelector('.grid');
|
|
||||||
var nav = document.querySelector('.header');
|
|
||||||
|
|
||||||
window.addEventListener('scroll', function(e) {
|
|
||||||
if (!ticking) {
|
|
||||||
window.requestAnimationFrame(function() {
|
|
||||||
checkScroll();
|
|
||||||
});
|
|
||||||
ticking = true;
|
|
||||||
}
|
|
||||||
}, false);
|
|
||||||
|
|
||||||
// checks scroll direction and shows/hides navbar accordingly
|
|
||||||
function checkScroll() {
|
|
||||||
// var collapsed = (window.scrollY > 0 && last_known_scroll_position <= window.scrollY)
|
|
||||||
var sticky = window.scrollY > 0;
|
|
||||||
grid.classList.toggle('has-sticky-nav', sticky);
|
|
||||||
// nav.classList.toggle('collapsed', collapsed);
|
|
||||||
ticking = false;
|
|
||||||
last_known_scroll_position = window.scrollY;
|
|
||||||
}
|
|
||||||
checkScroll();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
requirejs(["config", "api", "helper/sticky_menu", "helper/show_hide", "helper/sortable"], function(config, api, sticky_menu, show_hide, sortable) {
|
|
||||||
sticky_menu.init();
|
|
||||||
show_hide.init();
|
|
||||||
sortable.init();
|
|
||||||
});
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
// THEME 1
|
|
||||||
$base00: #72a85b;
|
|
||||||
$base-bg-color: #1d1c1d;
|
|
||||||
$base-font-color: #fff;
|
|
||||||
$sec-font-color: #fff;
|
|
||||||
$box-bg-color: #3c3c3c;
|
|
||||||
// THEME 2
|
|
||||||
$base00: #38428a;
|
|
||||||
$base-bg-color: #ffffff;
|
|
||||||
$base-font-color: rgb(53, 53, 53);
|
|
||||||
$sec-font-color: #eaf2ff;
|
|
||||||
$box-bg-color: #dddddd;
|
|
||||||
// THEME 3
|
|
||||||
$base00: rebeccapurple;
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
$header-height: 60px;
|
|
||||||
$header-height-collapsed: 40px;
|
|
||||||
$footer-height: 50px;
|
|
||||||
@ -1,106 +0,0 @@
|
|||||||
$l-cols: 12;
|
|
||||||
$m-cols: 8;
|
|
||||||
$s-cols: 4;
|
|
||||||
$xs-cols: 2;
|
|
||||||
|
|
||||||
$l-grid: "[grid-col-start] repeat(#{$l-cols}, 1fr) [grid-col-end]";
|
|
||||||
$m-grid: "[grid-col-start] repeat(#{$m-cols}, 1fr) [grid-col-end]";
|
|
||||||
$s-grid: "[grid-col-start] repeat(#{$s-cols}, 1fr) [grid-col-end]";
|
|
||||||
$xs-grid: "[grid-col-start] repeat(#{$xs-cols}, 1fr) [grid-col-end]";
|
|
||||||
|
|
||||||
$l-breakpoint: 1000px;
|
|
||||||
$m-breakpoint: 800px;
|
|
||||||
$s-breakpoint: 600px;
|
|
||||||
$xs-breakpoint: 400px;
|
|
||||||
|
|
||||||
.grid {
|
|
||||||
display: grid;
|
|
||||||
height: 100%;
|
|
||||||
grid-template-columns: #{$l-grid};
|
|
||||||
grid-template-rows: var(--header-height) auto var(--footer-height);
|
|
||||||
grid-gap: 20px;
|
|
||||||
|
|
||||||
> header {
|
|
||||||
grid-column: span $l-cols;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .sidebar {
|
|
||||||
grid-column: 2 / span 2;
|
|
||||||
grid-row-start: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .sidebar-right {
|
|
||||||
display: none;
|
|
||||||
grid-column: span 2;
|
|
||||||
grid-row-start: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
> section {
|
|
||||||
grid-column: 4 / span ($l-cols - 4);
|
|
||||||
grid-row-start: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
> footer {
|
|
||||||
grid-column: span $l-cols;
|
|
||||||
grid-row-start: 3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: $l-breakpoint) {
|
|
||||||
.grid {
|
|
||||||
grid-template-columns: #{$m-grid};
|
|
||||||
grid-gap: 10px;
|
|
||||||
|
|
||||||
|
|
||||||
> header {
|
|
||||||
grid-column: span $m-cols;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .sidebar {
|
|
||||||
grid-column: grid-col-start / span 2;
|
|
||||||
grid-row-start: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
> section {
|
|
||||||
grid-column: 3 / span 6;
|
|
||||||
grid-row-start: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
> footer {
|
|
||||||
grid-column: span $m-cols;
|
|
||||||
grid-row-start: 3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: $m-breakpoint) {
|
|
||||||
.grid {
|
|
||||||
grid-template-columns: #{$s-grid};
|
|
||||||
|
|
||||||
> header, > .sidebar, > section, > footer {
|
|
||||||
grid-column: span $s-cols;
|
|
||||||
}
|
|
||||||
|
|
||||||
> section {
|
|
||||||
grid-row-start: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .sidebar {
|
|
||||||
grid-row-start: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
> footer {
|
|
||||||
grid-row-start: 4;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: $s-breakpoint) {
|
|
||||||
.grid {
|
|
||||||
grid-template-columns: #{$xs-grid};
|
|
||||||
|
|
||||||
> header, > .sidebar, > section, > footer {
|
|
||||||
grid-column: span $xs-cols;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,165 +0,0 @@
|
|||||||
@import 'grid';
|
|
||||||
@import 'colors';
|
|
||||||
@import 'dimensions';
|
|
||||||
|
|
||||||
// modules
|
|
||||||
@import 'modules/box';
|
|
||||||
@import 'modules/sortable';
|
|
||||||
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: $base-bg-color;
|
|
||||||
color: $base-font-color;
|
|
||||||
font-family: "Source Sans Pro", Helvetica, sans-serif;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 18px;
|
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
|
||||||
|
|
||||||
a,
|
|
||||||
a:visited,
|
|
||||||
a:link {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: color .2s ease, background-color .2s ease;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: $base00;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style-type: none;
|
|
||||||
|
|
||||||
&.flat > li {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5 {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
h1 {
|
|
||||||
font-size: 32px;
|
|
||||||
margin: 20px 0 10px;
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
font-size: 24px;
|
|
||||||
margin: 10px 0 5px;
|
|
||||||
}
|
|
||||||
h3 {
|
|
||||||
font-size: 20px;
|
|
||||||
margin: 5px 0 0;
|
|
||||||
}
|
|
||||||
h4 {
|
|
||||||
font-size: 16px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
th, td {
|
|
||||||
text-align: left;
|
|
||||||
padding: 0 2px 0 4px;
|
|
||||||
border-left: 1px solid $base00;
|
|
||||||
|
|
||||||
&:first-of-type {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// END GLOBAL
|
|
||||||
|
|
||||||
.header {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0 24px;
|
|
||||||
height: $header-height;
|
|
||||||
line-height: $header-height;
|
|
||||||
background-color: $base00;
|
|
||||||
width: 100%;
|
|
||||||
text-align: right;
|
|
||||||
overflow: hidden;
|
|
||||||
z-index: 100;
|
|
||||||
|
|
||||||
> nav {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-sticky-nav {
|
|
||||||
padding-top: $header-height;
|
|
||||||
}
|
|
||||||
|
|
||||||
.has-sticky-nav .header {
|
|
||||||
height: $header-height-collapsed;
|
|
||||||
line-height: $header-height-collapsed;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
transition: height .2s ease, line-height .2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-content {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.flat {
|
|
||||||
|
|
||||||
> li > a {
|
|
||||||
padding: 0 13px;
|
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
|
||||||
display: inline-block;
|
|
||||||
color: $sec-font-color;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: darken($base00, 7%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer {
|
|
||||||
text-align: right;
|
|
||||||
height: $footer-height;
|
|
||||||
line-height: $footer-height;
|
|
||||||
padding: 7px 24px;
|
|
||||||
overflow: hidden;
|
|
||||||
background-color: $base00;
|
|
||||||
color: $sec-font-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.event-registration {
|
|
||||||
@extend .button;
|
|
||||||
}
|
|
||||||
.event-desc {
|
|
||||||
padding: 0 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// HELPERS
|
|
||||||
.button {
|
|
||||||
background-color: $base00;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 3px 13px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: transform .1s, background-color .2s ease;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: darken($base00, 10%);
|
|
||||||
transform: scale(1.01);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden {
|
|
||||||
display: none;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
@ -1,68 +0,0 @@
|
|||||||
@import '../colors';
|
|
||||||
|
|
||||||
.box {
|
|
||||||
position: relative;
|
|
||||||
padding: 13px 24px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
font-size: 16px;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
margin-left: 10px;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin-bottom: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// COURSE BOX
|
|
||||||
.course-box {
|
|
||||||
border-left: 1px solid lighten($base00, 40%);
|
|
||||||
padding: 0 20px;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
li {
|
|
||||||
padding-left: 7px;
|
|
||||||
padding-bottom: 13px;
|
|
||||||
|
|
||||||
h4::before {
|
|
||||||
content: '>';
|
|
||||||
position: absolute;
|
|
||||||
margin-left: -13px;
|
|
||||||
font-weight: 800;
|
|
||||||
}
|
|
||||||
h4:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
h4:hover::before {
|
|
||||||
content: 'v';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
li.collapsed {
|
|
||||||
padding-bottom: 0;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
h4 {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4::before {
|
|
||||||
content: '>';
|
|
||||||
}
|
|
||||||
h4:hover::before {
|
|
||||||
content: 'v';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.course {
|
|
||||||
margin-bottom: 7px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
table.sortable {
|
|
||||||
th {
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
padding-right: 20px;
|
|
||||||
|
|
||||||
&.sorted-asc,
|
|
||||||
&.sorted-desc {
|
|
||||||
color: $base00;
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
top: 7px;
|
|
||||||
border-left: 8px solid transparent;
|
|
||||||
border-right: 8px solid transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.sorted-asc::after {
|
|
||||||
border-top: 8px solid $base00;
|
|
||||||
}
|
|
||||||
&.sorted-desc::after {
|
|
||||||
border-bottom: 8px solid $base00;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -5,5 +5,5 @@ $case formLayout
|
|||||||
$forall view <- views
|
$forall view <- views
|
||||||
<div .form-group :fvRequired view:.form-group--required :not $ fvRequired view:.form-group--optional :isJust $ fvErrors view:.form-group--has-error>
|
<div .form-group :fvRequired view:.form-group--required :not $ fvRequired view:.form-group--optional :isJust $ fvErrors view:.form-group--has-error>
|
||||||
$if not (Blaze.null $ fvLabel view)
|
$if not (Blaze.null $ fvLabel view)
|
||||||
<label form-group__label .reactive-label for=#{fvId view}>#{fvLabel view}
|
<label .form-group__label .reactive-label for=#{fvId view}>#{fvLabel view}
|
||||||
^{fvInput view}
|
^{fvInput view}
|
||||||
|
|||||||
Reference in New Issue
Block a user