Skip to content
Snippets Groups Projects
Commit f5302264 authored by Nepheli Papagiannakopoulou's avatar Nepheli Papagiannakopoulou
Browse files

joboffers & dermiv layout

parent a9e8f116
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
public/deramiv.html 0 → 100644
+ 174
− 0
View file @ f5302264
<!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>
public/index.html
+ 1
− 0
View file @ f5302264
......@@ -138,6 +138,7 @@
var register = "";
if (/* amivcore.authenticated() && */item.spot >= 0 && regstart > heute && regend < heute){
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>');
});
......
public/joboffers.html 0 → 100644
+ 136
− 0
View file @ f5302264
<!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% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment