Skip to content
Snippets Groups Projects
Commit c1f47b83 authored by CupCakeArmy's avatar CupCakeArmy
Browse files

Masonry Added

parent 731f5c49
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 62 additions and 228 deletions
public/index.html
+ 62
− 228
View file @ c1f47b83
<!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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment