From c1f47b835745a947521b08cc72378683af9acec4 Mon Sep 17 00:00:00 2001
From: CupCakeArmy <nicco.borgioli@gmail.com>
Date: Sun, 17 Apr 2016 15:12:18 +0200
Subject: [PATCH] Masonry Added
---
public/index.html | 290 ++++++++++------------------------------------
1 file changed, 62 insertions(+), 228 deletions(-)
diff --git a/public/index.html b/public/index.html
index c69a39d..f7165e3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,21 +1,38 @@
<!DOCTYPE html>
<html lang="en">
- <head>
+
+<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AMIV</title>
<link href="bs/css/bootstrap.min.css" rel="stylesheet">
+
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
+ <script src="bs/js/bootstrap.min.js"></script>
+ <script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js"></script>
+
<link href="css/logo-nav.css" rel="stylesheet">
<link href="css/cards.css" rel="stylesheet">
- <link href="css/dynamic.css" rel="stylesheet">
+ <link href="css/dynamic.css" rel="stylesheet">
+ <style>
+ .grid-item-content {
+ height: 100px;
+ background: #D26;
+ border: 2px solid hsla(0, 0%, 0%, 0.5);
+ border-radius: 5px;
+ }
+
+ .grid-item-content--height2 {
+ height: 200px;
+ }
+ </style>
+</head>
+
- </head>
-
-
- <body>
-<!-- Navigation -->
+<body>
+ <!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
@@ -49,11 +66,11 @@
<a href="#">Jobbörse</a>
</li>
<form class="navbar-form navbar-left" role="search">
- <div class="form-group">
- <input type="text" class="form-control" placeholder="Search">
- </div>
- <button type="submit" class="btn btn-default">Search</button>
- </form>
+ <div class="form-group">
+ <input type="text" class="form-control" placeholder="Search">
+ </div>
+ <button type="submit" class="btn btn-default">Search</button>
+ </form>
</ul>
</div>
<!-- /.navbar-collapse -->
@@ -61,223 +78,40 @@
<!-- /.container -->
</nav>
- <!-- Page Content -->
-
<div class="container-fluid">
- <div class="row">
- <!-- A Card -->
- <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">
- <span class="card-title">Jarcakebakery @ FoodLab</span>
- </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. This is the best event like ever! You can bake some jarcakes and eat the afterwards all by yourself.This is the best event like ever! You can bake some jarcakes and eat the afterwards all by yourself.This is the best event like ever! You can bake some jarcakes and eat the afterwards all by yourself.This is the best event like ever! You can bake some jarcakes and eat the afterwards all by yourself.This is the best event like ever! You can bake some jarcakes and eat the afterwards all by yourself.This is the best event like ever! You can bake some jarcakes and eat the afterwards all by yourself.This is the best event like ever! You can bake some jarcakes and eat the afterwards all by yourself.This is the best event like ever! You can bake some jarcakes and eat the afterwards all by yourself.This is the best event like ever! You can bake some jarcakes and eat the afterwards all by yourself.This is the best event like ever! You can bake some jarcakes and eat the afterwards all by yourself.This is the best event like ever! You can bake some jarcakes and eat the afterwards all by yourself.This is the best event like ever! You can bake some jarcakes and eat the afterwards all by yourself.This is the best event like ever! You can bake some jarcakes and eat the afterwards all by yourself.This is the best event like ever! You can bake some jarcakes and eat the afterwards all by yourself.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="col-xs-12 col-md-4 col-lg-3">
- <div class="card">
- <div class="card-image">
- <img class="img-responsive" src="http://sport-fan.ch/wp/wp-content/uploads/2014/09/symbolbild_eishockey.jpg">
- <span class="card-title">Eishockey mit OpenSystems</span>
- </div>
-
- <div class="card-content">
- <p>The Playoffs have begun. ANo tooth will stay at its place! </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>
- <a href="#" target="new_blank">OpenSystems</a>
- </div>
- </div>
- </div>
-
- <div class="col-xs-12 col-md-4 col-lg-3">
- <div class="card">
- <div class="card-image">
- <img class="img-responsive" src="http://sport-fan.ch/wp/wp-content/uploads/2014/09/symbolbild_eishockey.jpg">
- <span class="card-title">Eishockey mit OpenSystems</span>
- </div>
-
- <div class="card-content">
- <p>The Playoffs have begun. ANo tooth will stay at its place! </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>
- <a href="#" target="new_blank">OpenSystems</a>
- </div>
- </div>
- </div>
-
- <div class="col-xs-12 col-md-4 col-lg-3">
- <div class="card">
- <a data-chrome="noheader" class="twitter-timeline" href="https://twitter.com/AMIV_ETHZ/amiv" data-widget-id="389682176024784896">Tweets from @AMIV_ETHZ</a>
- <script type="text/javascript">
- !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
- </script>
- </div>
- </div>
-
- <!-- A Card -->
- <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">
- <span class="card-title">Jarcakebakery @ FoodLab</span>
- </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="col-xs-12 col-md-4 col-lg-3">
- <div class="card">
- <div class="card-image">
- <img class="img-responsive" src="http://sport-fan.ch/wp/wp-content/uploads/2014/09/symbolbild_eishockey.jpg">
- <span class="card-title">Eishockey mit OpenSystems</span>
- </div>
-
- <div class="card-content">
- <p>The Playoffs have begun. ANo tooth will stay at its place! </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>
- <a href="#" target="new_blank">OpenSystems</a>
- </div>
- </div>
- </div>
-
- <div class="col-xs-12 col-md-4 col-lg-3">
- <div class="card">
- <div class="card-image">
- <img class="img-responsive" src="http://sport-fan.ch/wp/wp-content/uploads/2014/09/symbolbild_eishockey.jpg">
- <span class="card-title">Eishockey mit OpenSystems</span>
- </div>
-
- <div class="card-content">
- <p>The Playoffs have begun. ANo tooth will stay at its place! </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>
- <a href="#" target="new_blank">OpenSystems</a>
- </div>
- </div>
- </div>
-
- <div class="col-xs-12 col-md-4 col-lg-3">
- <div class="card">
- <a data-chrome="noheader" class="twitter-timeline" href="https://twitter.com/AMIV_ETHZ/amiv" data-widget-id="389682176024784896">Tweets from @AMIV_ETHZ</a>
- <script type="text/javascript">
- !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
- </script>
- </div>
- </div>
-
- <!-- A Card -->
- <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">
- <span class="card-title">Jarcakebakery @ FoodLab</span>
- </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="col-xs-12 col-md-4 col-lg-3">
- <div class="card">
- <div class="card-image">
- <img class="img-responsive" src="http://sport-fan.ch/wp/wp-content/uploads/2014/09/symbolbild_eishockey.jpg">
- <span class="card-title">Eishockey mit OpenSystems</span>
- </div>
-
- <div class="card-content">
- <p>The Playoffs have begun. ANo tooth will stay at its place! </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>
- <a href="#" target="new_blank">OpenSystems</a>
- </div>
- </div>
- </div>
-
- <div class="col-xs-12 col-md-4 col-lg-3">
- <div class="card">
- <div class="card-image">
- <img class="img-responsive" src="http://sport-fan.ch/wp/wp-content/uploads/2014/09/symbolbild_eishockey.jpg">
- <span class="card-title">Eishockey mit OpenSystems</span>
- </div>
-
- <div class="card-content">
- <p>The Playoffs have begun. ANo tooth will stay at its place! </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>
- <a href="#" target="new_blank">OpenSystems</a>
- </div>
- </div>
- </div>
-
- <div class="col-xs-12 col-md-4 col-lg-3">
- <div class="card">
- <a data-chrome="noheader" class="twitter-timeline" href="https://twitter.com/AMIV_ETHZ/amiv" data-widget-id="389682176024784896">Tweets from @AMIV_ETHZ</a>
- <script type="text/javascript">
- !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
- </script>
- </div>
- </div>
+ <div class="grid">
+ <div class="grid-sizer"></div>
</div>
</div>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
- <script src="bs/js/bootstrap.min.js"></script>
- <script src="js/salvattore.js"></script>
-
-
- </body>
-</html>
\ No newline at end of file
+ <script>
+ function getEvents(callback) {
+ callback = callback || function(ret) {
+ console.log(ret);
+ }
+ $.getJSON('https://amiv-apidev.vsos.ethz.ch/events/', callback);
+ }
+
+ function addElement(item) {
+ $('.grid')
+ .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({
+ itemSelector: '.grid-item',
+ columnWidth: '.grid-sizer',
+ percentPosition: true
+ });
+ getEvents(function(ret) {
+ ret['_items'].forEach(function(item) {
+ console.log(item.title_de);
+ addElement('<p>' + JSON.stringify(item) + '</p>');
+ });
+ });
+ });
+ </script>
+</body>
+
+</html>
--
GitLab