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{
background-color: rgb(30, 90, 144);
color: black;
color: rgb(220, 220, 220);
overflow-y: hidden;
}
.patch{
position: absolute;
right: 10px;
bottom: 10px;
.talks .card{
background-color: rgb(30, 90, 144);
padding: 0.5%;
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>
</head>
<body>
<img class="patch" src="img/patchgehabt.svg" />
<h1>Konferenz Wegweiser</h1>
<h2>
<span class="conf_title">loading schedule..</span>
<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 class="container-fluid">
<div class="row">
<div class="col">
<h1>Konferenz Wegweiser</h1>
</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>
<h2>Plan</h2>
<img class="img-fluid mx-auto d-block" alt="Grundriss" src="img/zw.png" />
<script>
$.when( $.ready ).then(function() {
@ -52,22 +73,22 @@
var events = s.getNextEvents();
for ( var i = 0; i < events.length; i++ ) {
console.log(events[i]);
event = ` <div class="card">
<div class="card-title">
<h2> ${events[i].title} </h2>
</div>
<p>
${events[i].abstract}
</p>
<p>
<span class="float-left ml-1">${events[i].start}Uhr</span>
<span class="float-right mr-2">${events[i].duration}h</span>
</p>
<div class="card-footer">
${events[i].persons}
</div>
</div>`;
<div class="card-title">
<h2> ${events[i].title} </h2>
</div>
<div class="card-body">
<p> ${events[i].abstract} </p>
<p>
<span class="float-left ml-1">${events[i].start}Uhr</span>
<span class="float-right mr-2">${events[i].duration}h</span>
</p>
</div>
<div class="card-footer">
${events[i].persons}
</div>
</div>`;
$('.talks').append(event);
if (i >= 2){
break;