From 2baff5c63c8525872b3be1c647ad22549a145eeb Mon Sep 17 00:00:00 2001
From: Oliver Schneider <oli@student.ethz.ch>
Date: Sat, 23 Apr 2016 15:48:48 +0200
Subject: [PATCH] some cards
---
public/css/cards.css | 2 ++
public/index.html | 78 ++++++++++++++++++++++++++++----------------
2 files changed, 52 insertions(+), 28 deletions(-)
diff --git a/public/css/cards.css b/public/css/cards.css
index 0a03de0..b09fe42 100644
--- a/public/css/cards.css
+++ b/public/css/cards.css
@@ -36,6 +36,8 @@
padding-bottom: 16px;
width: 100%;
background: rgba(100%, 100%, 100%, 0.5);
+ text-transform: uppercase;
+ font-weight: 300;
}
.card .card-content {
padding: 16px;
diff --git a/public/index.html b/public/index.html
index 3fd1b46..ae497ce 100644
--- a/public/index.html
+++ b/public/index.html
@@ -44,7 +44,7 @@
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
- <img src="file:///Volumes/Macintosh%20HD/Users/oli/Documents/ETH/amivwebsitefrontend/public/res/AMIV_Logo_150_50.svg" alt="AMIV" height="80%">
+ <img src="res/AMIV_Logo_150_50.svg" alt="AMIV" height="80%">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
@@ -59,9 +59,6 @@
<li>
<a href="#">Studium</a>
</li>
- <li>
- <a href="#">Events</a>
- </li>
<li>
<a href="#">Jobbörse</a>
</li>
@@ -97,6 +94,7 @@
.append('<div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">' + item + '</div>')
.masonry('reloadItems').masonry();
}
+
$(document).ready(function() {
$('.grid-item, .grid-sizer').addClass('col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2');
$('.grid').masonry({
@@ -107,37 +105,61 @@
getEvents(function(ret) {
ret['_items'].forEach(function(item) {
console.log(item.title_de);
- addElement('<p>' + JSON.stringify(item) + '</p>');
+ if ( item.img_banner == null){
+ item.img_banner = item.img_infoscreen;
+ }
+ var datenum = new Date(item.time_start);
+
+ addElement('<div class="card"><div class="card-image"><img class="img-responsive" src="'+item.img_banner+'"><date><div class="month">'+datenum.getMonth()+'</div><div class="day">'+datenum.getDate()+'</div><div class="starttime">'+datenum.getHours()+':'+datenum.getMinutes()+'</div><date-overlay></date-overlay></date><span class="card-title">'+item.title_de+' @ '+item.location+'</span></div><div class="card-content">'+item.description_de+'</div><div class="card-action"><a href="#" target="new_blank">Zum Event</a><a href="#" target="new_blank">Anmeldung</a><a href="#" target="new_blank">Im Kalender speichern</a></div></div>');
});
});
});
</script>
+ <script>
+ $(function() {
+ var container = document.createElement('div');
+ container.id = "card";
+
+ $('grid').append(container);
+
+ /*Date*/
+ $(".month").append("October");
+ $(".day").append("42");
+ $(".starttime").append("18:00 - 20:00");
+
+ /*Visible Content*/
+ $(".card-title").html("Jarcakebakery @ FoodLab"); //Title and Location
+ $(".card-content").append("<p>This is the best event like ever! You can bake some jarcakes and eat the afterwards all by yourself.</p>"); //content
+ $(".card-action").append(); //Links
+ $(".img-responsive").attr("src", "http://cdn0.wideopencountry.com/wp-content/uploads/2015/07/JamCheesecakesInAJarTall-793x526.png"); //image
+
+ $('#card').append(html);
+ });
+ </script>
+
<div class="col-xs-12 col-md-4 col-lg-3">
- <div class="card">
- <div class="card-image">
- <img class="img-responsive" src="http://cdn0.wideopencountry.com/wp-content/uploads/2015/07/JamCheesecakesInAJarTall-793x526.png">
- <date>
- <div class="month">October</div>
- <div class="day">29</div>
- <div class="starttime">18:00</div>
- <date-overlay></date-overlay>
- </date>
- <span class="card-title">Jarcakebakery @ FoodLab</span>
-
- </div>
+ <div class="card card-1">
+ <div class="card-image">
+ <img class="img-responsive">
+ <date>
+ <div class="month"></div>
+ <div class="day"></div>
+ <div class="starttime"></div>
+ <date-overlay></date-overlay>
+ </date>
+ <span class="card-title"></span>
+ </div>
+
+ <div class="card-content"></div>
- <div class="card-content">
- <p>This is the best event like ever! You can bake some jarcakes and eat the afterwards all by yourself. </p>
- </div>
-
- <div class="card-action">
- <a href="#" target="new_blank">Zum Event</a>
- <a href="#" target="new_blank">Anmeldung</a>
- <a href="#" target="new_blank">Im Kalender speichern</a>
- </div>
- </div>
- </div>
+ <div class="card-action">
+ <a href="#" target="new_blank">Zum Event</a>
+ <a href="#" target="new_blank">Anmeldung</a>
+ <a href="#" target="new_blank">Im Kalender speichern</a>
+ </div>
+ </div>
+ </div>
</body>
</html>
--
GitLab