tranquillo/schit
tranquillo
/
schit
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Made UI more DS looking #1

Merged
tranquillo merged 1 commits from :patch-ui-1 into master 2019-09-10 21:04:31 +02:00
Conversation 0 Commits 1 Files Changed 2 +58 -31
2 changed files with 58 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
css/ds19.css
View File

@ -1,11 +1,17 @@
body{ body{
background-color: rgb(30, 90, 144); background-color: rgb(30, 90, 144);
color: black; color: rgb(220, 220, 220);
overflow-y: hidden;
} }
.patch{ .talks .card{
position: absolute; background-color: rgb(30, 90, 144);
right: 10px; padding: 0.5%;
bottom: 10px; border-color: rgb(68, 130, 192);
border-width: 0.5em;
}
.talks {
padding-bottom: 5px;
} }

73
index.html
View File

@ -12,20 +12,41 @@
<title>Konferenz Wegweiser</title> <title>Konferenz Wegweiser</title>
</head> </head>
<body> <body>
<img class="patch" src="img/patchgehabt.svg" /> <div class="container-fluid">
<h1>Konferenz Wegweiser</h1> <div class="row">
<h2> <div class="col">
<span class="conf_title">loading schedule..</span> <h1>Konferenz Wegweiser</h1>
<small>(<span class="conf_start"></span> - <span class="conf_end"></span>)</small>
</h2>
<h3>demnächst stattfindende Talks</h3>
<div class="talks card-deck">
</div> </div>
<div class="col">
<h1>
<span class="conf_title">loading schedule..</span>
<small>(<span class="conf_start"></span> - <span class="conf_end"></span>)</small>
</h1>
</div>
</div>
<div class="row">
<div class="col">
<h3>demnächst stattfindende Talks</h3>
</div>
</div>
<div class="row">
<div class="col">
<div class="card-deck talks">
</div>
</div>
</div>
<div class="row">
<div class="col-sm">
<h2>Plan</h2>
<img class="img-fluid h-75" alt="Grundriss" src="img/zw.png" />
</div>
<div class="col-sm">
<img class="img-fluid patch h-75" src="img/patchgehabt.svg" />
</div>
</div>
</div> </div>
<h2>Plan</h2>
<img class="img-fluid mx-auto d-block" alt="Grundriss" src="img/zw.png" />
<script> <script>
$.when( $.ready ).then(function() { $.when( $.ready ).then(function() {
@ -52,22 +73,22 @@
var events = s.getNextEvents(); var events = s.getNextEvents();
for ( var i = 0; i < events.length; i++ ) { for ( var i = 0; i < events.length; i++ ) {
console.log(events[i]);
event = ` <div class="card"> event = ` <div class="card">
<div class="card-title"> <div class="card-title">
<h2> ${events[i].title} </h2> <h2> ${events[i].title} </h2>
</div> </div>
<p> <div class="card-body">
${events[i].abstract} <p> ${events[i].abstract} </p>
</p> <p>
<span class="float-left ml-1">${events[i].start}Uhr</span>
<p> <span class="float-right mr-2">${events[i].duration}h</span>
<span class="float-left ml-1">${events[i].start}Uhr</span> </p>
<span class="float-right mr-2">${events[i].duration}h</span> </div>
</p> <div class="card-footer">
<div class="card-footer"> ${events[i].persons}
${events[i].persons} </div>
</div> </div>`;
</div>`;
$('.talks').append(event); $('.talks').append(event);
if (i >= 2){ if (i >= 2){
break; break;