From 82368da70f50a1516ab62c94b3cef012fdb67014 Mon Sep 17 00:00:00 2001 From: Oliver Schneider <oli@student.ethz.ch> Date: Sun, 24 Apr 2016 15:34:33 +0200 Subject: [PATCH] auslagerung von script in mainjs Anmeldung hiding --- public/css/dynamic.css | 19 ++++++++++- public/css/logo-nav.css | 1 + public/index.html | 74 +++++++---------------------------------- public/js/main.js | 58 ++++++++++++++++++++++++++++++++ 4 files changed, 89 insertions(+), 63 deletions(-) diff --git a/public/css/dynamic.css b/public/css/dynamic.css index 59ae92e..c402efa 100644 --- a/public/css/dynamic.css +++ b/public/css/dynamic.css @@ -18,4 +18,21 @@ #columns[data-columns]::before { content: '4 .col-md-3'; } - } \ No newline at end of file + } + /* Responsive iFrame */ + .responsive-iframe-container { + position: relative; + padding-bottom: 56.25%; + padding-top: 30px; + height: 0; + overflow: hidden; + } + .responsive-iframe-container iframe, + .vresponsive-iframe-container object, + .vresponsive-iframe-container embed { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } \ No newline at end of file diff --git a/public/css/logo-nav.css b/public/css/logo-nav.css index fb83c60..2fbcc15 100644 --- a/public/css/logo-nav.css +++ b/public/css/logo-nav.css @@ -6,6 +6,7 @@ body { padding-top: 70px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */ + padding-bottom: 16px; } .navbar-fixed-top .nav { diff --git a/public/index.html b/public/index.html index 56b9855..31a8e5c 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="res/AMIV_Logo_150_50.svg" alt="AMIV" height="80%"> + <img src="res/AMIV_Logo_150_50.svg" alt="AMIV"> </a> </div> <!-- Collect the nav links, forms, and other content for toggling --> @@ -72,6 +72,15 @@ <div class="container-fluid"> <div class="grid"> <div class="grid-sizer"></div> + +<!-- Google Calendar --> + <div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2"> + <div class="responsive-iframe-container big-container card"> + <iframe src="https://calendar.google.com/calendar/embed?showTitle=0&showNav=0&showPrint=0&showTabs=0&showCalendars=0&mode=AGENDA&height=600&wkst=2&bgcolor=%23ffffff&src=amiv.an.der.eth%40gmail.com&color=%231B887A&src=o8mobocsom5ea8b0d00eidr6a4%40group.calendar.google.com&color=%23691426&src=n18j3pnpl65bp58fjfikvlkbn4%40group.calendar.google.com&color=%238C500B&src=5qbl733r12mejhaosqnqlohccg%40group.calendar.google.com&color=%23ef4ef6&src=5ef1jg56fiaoqbeqago5mbrpd4%40group.calendar.google.com&color=%230F4B38&src=rflnq53lsgj64evaiif691p280%40group.calendar.google.com&color=%2329527A&src=4a7g6cfm9shgpfvmce13aagovs%40group.calendar.google.com&color=%2323164E&src=mdk91hfvr18q8rrlh3sedlhgvo%40group.calendar.google.com&color=%23711616&src=1i7ubr4f35q6hrkond7o4dmtq0%40group.calendar.google.com&color=%23125A12&src=p38tc4mipcao4312oegcmvgkto%40group.calendar.google.com&color=%23711616&ctz=Europe%2FZurich" style="border-width:0" width="800" height="600" frameborder="0"></iframe> + </div> + </div> + +<!-- Twitter widget --> <div class="grid-item col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-2"> <div class="card"> <p> @@ -84,69 +93,10 @@ </script> </div> </div> +<!-- Facebook widget --> </div> </div> - - <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>'); - } - - $(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 - }).on('DOMSubtreeModified', function(){ - $(this).masonry('reloadItems').masonry(); - }) - getEvents(function(ret) { - ret['_items'].forEach(function(item) { - /*Is it Websitecontent?*/ - if (item.show_website == false){ - return; - } - console.log(item.title_de); - - /*Picture Checker*/ - if (item.img_banner == null){ - item.img_banner = "https://s-media-cache-ak0.pinimg.com/736x/9c/24/fd/9c24fdb71c67e31efef540efb141f96d.jpg"; - } - /* Datum anpassen*/ - var datenum = new Date(item.time_start); - var regstart = new Date(item.time_register_start); - var regend = new Date(item.time_register_end); - var heute = new Date(Date.now()); - - /*Minuten immer Zweistellig*/ - var minutes = datenum.getMinutes(); - if (minutes < 10){ - minutes = "0" + minutes; - } - var month = ["Januar", "Februar", "MÃĪrz", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]; - - /*Anmeldung*/ - 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>'); - }); - }); - }); - </script> - -<script src="js/main.js"></script> + <script src="js/main.js"></script> </body> </html> diff --git a/public/js/main.js b/public/js/main.js index e69de29..c79a193 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -0,0 +1,58 @@ +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>'); + } + + $(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) { + /*Is it Websitecontent?*/ + if (item.show_website == false){ + return; + } + console.log(item.title_de); + + /*Picture Checker*/ + if (item.img_banner == null){ + item.img_banner = "https://s-media-cache-ak0.pinimg.com/736x/9c/24/fd/9c24fdb71c67e31efef540efb141f96d.jpg"; + } + /* Datum anpassen*/ + var datenum = new Date(item.time_start); + + + /*Minuten immer Zweistellig*/ + var minutes = datenum.getMinutes(); + if (minutes < 10){ + minutes = "0" + minutes; + } + var month = ["Januar", "Februar", "MÃĪrz", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]; + + /*Anmeldung*/ + var regstart = new Date(item.time_register_start); + var regend = new Date(item.time_register_end); + var heute = new Date(Date.now()); + var register = ""; + if (item.spots>=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">Info</a><a href="#" target="new_blank">'+register+'</a><a href="#" target="new_blank">Im Kalender speichern</a></div></div>'); + }); + }); + }); -- GitLab