Skip to content
Snippets Groups Projects
Commit e9578e08 authored by Lukas Gygi's avatar Lukas Gygi
Browse files
parents 14c8a0ae f5302264
No related branches found
No related tags found
No related merge requests found
<!DOCTYPE html>
<html lang="en">
<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">
<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>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="res/AMIV_Logo_150_50.svg" alt="AMIV" height="80%">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Der AMIV</a>
</li>
<li>
<a href="#">Studium</a>
</li>
<li>
<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>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container-fluid">
<div class="grid">
<div class="grid-sizer"></div>
<div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
<div class="card">
<div class="card-image">
<img class="img-responsive" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTWlKmVgsFszoyjRfd258A2yx_DbI_5GLSd_VxRcRJvEup5tbxReA">
</div>
<div class="card-content">
<p>Das ist der AMIV </p>
</div>
<div class="card-action">
<a href="#" target="new_blank">Der AMIV</a>
</div>
</div>
</div>
<div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
<div class="card">
<div class="card-image">
<img class="img-responsive" src="http://www.5amtag.ch/wp-content/uploads/2010/03/5amtag_banane_m.jpg">
</div>
<div class="card-content" >
<p>Du suchst etwas Abwechslung vom Studienalltag? Du möchtest dich im AMIV oder einer Kommission engagieren? Dann bist du hier richtig!</p>
</div>
<div class="card-action">
<a href="#" target="new_blank">Get involved!</a>
</div>
</div>
</div>
<div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
<div class="card">
<div class="card-image">
<img class="img-responsive" src="http://www.5amtag.ch/wp-content/uploads/2010/03/5amtag_banane_m.jpg">
</div>
<div class="card-content" >
<p> Hier werden aktuelle und alte Vorstände und ihre Funktionen aufgelistet</p>
</div>
<div class="card-action">
<a href="#" target="new_blank">Vorstand</a>
</div>
</div>
</div>
<div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
<div class="card">
<div class="card-image">
<img class="img-responsive" src="http://www.5amtag.ch/wp-content/uploads/2010/03/5amtag_banane_m.jpg">
</div>
<div class="card-content">
<p> jflglruhldkjfhlkrhdlkjfhlkjlkm <br> <br> <br> <br></p>
</div>
<div class="card-action">
<a href="#" target="new_blank">Protokolle</a>
</div>
</div>
</div>
<div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
<div class="card">
<div class="card-image">
<img class="img-responsive" src="http://img.funcloud.com/original/2016/03/6673151175913860553464650-374591.jpg">
</div>
<div class="card-content">
<p>ihgfd</p>
</div>
<div class="card-action">
<a href="#" target="new_blank">Impessum/kontakt</a>
</div>
</div>
</div>
</div>
</div>
<script>
$('.grid').masonry({
itemSelector: '.grid-item',
originLeft: false
});
</script>
</body>
</html>
...@@ -138,6 +138,7 @@ ...@@ -138,6 +138,7 @@
var register = ""; var register = "";
if (/* amivcore.authenticated() && */item.spot >= 0 && regstart > heute && regend < heute){ if (/* amivcore.authenticated() && */item.spot >= 0 && regstart > heute && regend < heute){
register = "Anmelden"; register = "Anmelden";
} }
addElement('<div class="card"><div class="card-image"><img class="img-responsive" src="'+item.img_banner+'"><date><div class="month">'+month[datenum.getMonth()]+'</div><div class="day">'+datenum.getDate()+'</div><div class="starttime">'+datenum.getHours()+':'+minutes+'</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">'+register+'</a><a href="#" target="new_blank">Im Kalender speichern</a></div></div>'); addElement('<div class="card"><div class="card-image"><img class="img-responsive" src="'+item.img_banner+'"><date><div class="month">'+month[datenum.getMonth()]+'</div><div class="day">'+datenum.getDate()+'</div><div class="starttime">'+datenum.getHours()+':'+minutes+'</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">'+register+'</a><a href="#" target="new_blank">Im Kalender speichern</a></div></div>');
}); });
......
<!DOCTYPE html>
<html lang="en">
<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">
<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>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="res/AMIV_Logo_150_50.svg" alt="AMIV" height="80%">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse nav-collapse collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Der AMIV</a>
</li>
<li>
<a href="#">Studium</a>
</li>
<li>
<a href="#">Jobbörse</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<div class="container-fluid">
<div class="grid">
<div class="grid-sizer"></div>
<div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
<div class="card">
<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>
</div>
<script>
function getEvents(callback) {
callback = callback || function(ret) {
console.log(ret);
}
$.getJSON('https://amiv-apidev.vsos.ethz.ch/joboffers/', 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>');
}
$(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,
originLeft: false
}).on('DOMSubtreeModified', function(){
$(this).masonry('reloadItems').masonry();
})
getEvents(function(ret) {
ret['_items'].forEach(function(item) {
console.log(item.title_de);
/*Logo Checker*/
if (item.logo == null){
item.logo = "https://s-media-cache-ak0.pinimg.com/736x/9c/24/fd/9c24fdb71c67e31efef540efb141f96d.jpg";
}
/* Datum anpassen*/
if (item.time_end != null){
var regend = new Date(item.time_end);
var heute = new Date(Date.now());
/*Anmeldung*/
var register = "";
if (regend < heute){
return;
}
}
addElement('<div class="card"><div class="card-image"><img class="img-responsive" src="'+item.logo+'"><span class="card-title">'+item.title_de+' bei '+item.company+'</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">Anmelden</a><a href="#" target="new_blank">Im Kalender speichern</a></div></div>');
});
});
});
</script>
<script src="js/main.js"></script>
</body>
</html>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment