Skip to content
Snippets Groups Projects
Commit a0345250 authored by Oliver Schneider's avatar Oliver Schneider
Browse files

update

parent 2afcd6bd
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
public/css/cards.css
+ 4
− 2
View file @ a0345250
......@@ -12,8 +12,9 @@
#cardtitle.card span.card-title {
color: #E8452B;
font-size: 24px;
font-weight: 300;
font-weight: bold;
text-transform: uppercase;
}
.card .card-image {
......@@ -26,6 +27,7 @@
position: relative;
z-index: -1;
width: 100%;
min-height: 180px;
}
.card .card-image span.card-title {
position: absolute;
......@@ -37,7 +39,7 @@
width: 100%;
background: rgba(100%, 100%, 100%, 0.5);
text-transform: uppercase;
font-weight: 300;
font-weight: bold;
}
.card .card-content {
padding: 16px;
......
public/css/logo-nav.css
+ 1
− 1
View file @ a0345250
......@@ -24,4 +24,4 @@ body {
.navbar-fixed-top .navbar-brand {
padding: 20px 0;
}
}
\ No newline at end of file
}
public/index.html
+ 40
− 63
View file @ a0345250
......@@ -48,7 +48,7 @@
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="collapse navbar-collapse nav-collapse collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#">Home</a>
......@@ -62,12 +62,6 @@
<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 -->
......@@ -78,6 +72,18 @@
<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">
<p>
<a data-chrome="noheader" class="twitter-timeline" href="https://twitter.com/AMIV_ETHZ/amiv" data-widget-id="389682176024784896">
Tweets from @AMIV_ETHZ
</a>
</p>
<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>
......@@ -91,8 +97,7 @@
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();
.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() {
......@@ -101,76 +106,48 @@
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);
if ( item.img_banner == null){
item.img_banner = item.img_infoscreen;
/*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
var regend = new Date(item.time_start);
/*Minuten immer Zweistellig*/
var minutes = datenum.getMinutes();
if (minutes < 10){
minutes = "0" + minutes;
}
var month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
var month = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"];
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">Anmeldung</a><a href="#" target="new_blank">Im Kalender speichern</a></div></div>');
/*Anmeldung*/
var register = "";
if (item.spot < 0){
register = "";
}
if (amivcore.authenticated() && item.spot >= 0){
if(item.time_start < Tod)
}
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>
$(function() {
var container = document.createElement('div');
container.id = "card";
$('grid').append(container);
/*Date*/
$(".month").append("October");
$(".day").append("42");
$(".starttime").append("18:00 - 20:00");
/*Visible Content*/
$(".card-title").html("Jarcakebakery @ FoodLab"); //Title and Location
$(".card-content").append("<p>This is the best event like ever! You can bake some jarcakes and eat the afterwards all by yourself.</p>"); //content
$(".card-action").append(); //Links
$(".img-responsive").attr("src", "http://cdn0.wideopencountry.com/wp-content/uploads/2015/07/JamCheesecakesInAJarTall-793x526.png"); //image
$('#card').append(html);
});
</script>
-->
<!--
<div class="col-xs-12 col-md-4 col-lg-3">
<div class="card card-1">
<div class="card-image">
<img class="img-responsive">
<date>
<div class="month"></div>
<div class="day"></div>
<div class="starttime"></div>
<date-overlay></date-overlay>
</date>
<span class="card-title"></span>
</div>
<div class="card-content"></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>
-->
<script src="js/main.js"></script>
</body>
</html>
public/js/main.js
+ 0
− 536
View file @ a0345250
(function(root, factory) {
if(typeof exports === 'object') {
module.exports = factory();
}
else if(typeof define === 'function' && define.amd) {
define('salvattore', [], factory);
}
else {
root.salvattore = factory();
}
}(this, function() {
/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas, David Knight. Dual MIT/BSD license */
window.matchMedia || (window.matchMedia = function() {
"use strict";
// For browsers that support matchMedium api such as IE 9 and webkit
var styleMedia = (window.styleMedia || window.media);
// For those that don't support matchMedium
if (!styleMedia) {
var style = document.createElement('style'),
script = document.getElementsByTagName('script')[0],
info = null;
style.type = 'text/css';
style.id = 'matchmediajs-test';
script.parentNode.insertBefore(style, script);
// 'style.currentStyle' is used by IE <= 8 and 'window.getComputedStyle' for all other browsers
info = ('getComputedStyle' in window) && window.getComputedStyle(style, null) || style.currentStyle;
styleMedia = {
matchMedium: function(media) {
var text = '@media ' + media + '{ #matchmediajs-test { width: 1px; } }';
// 'style.styleSheet' is used by IE <= 8 and 'style.textContent' for all other browsers
if (style.styleSheet) {
style.styleSheet.cssText = text;
} else {
style.textContent = text;
}
// Test if media query is true or false
return info.width === '1px';
}
};
}
return function(media) {
return {
matches: styleMedia.matchMedium(media || 'all'),
media: media || 'all'
};
};
}());
;/*! matchMedia() polyfill addListener/removeListener extension. Author & copyright (c) 2012: Scott Jehl. Dual MIT/BSD license */
(function(){
// Bail out for browsers that have addListener support
if (window.matchMedia && window.matchMedia('all').addListener) {
return false;
}
var localMatchMedia = window.matchMedia,
hasMediaQueries = localMatchMedia('only all').matches,
isListening = false,
timeoutID = 0, // setTimeout for debouncing 'handleChange'
queries = [], // Contains each 'mql' and associated 'listeners' if 'addListener' is used
handleChange = function(evt) {
// Debounce
clearTimeout(timeoutID);
timeoutID = setTimeout(function() {
for (var i = 0, il = queries.length; i < il; i++) {
var mql = queries[i].mql,
listeners = queries[i].listeners || [],
matches = localMatchMedia(mql.media).matches;
// Update mql.matches value and call listeners
// Fire listeners only if transitioning to or from matched state
if (matches !== mql.matches) {
mql.matches = matches;
for (var j = 0, jl = listeners.length; j < jl; j++) {
listeners[j].call(window, mql);
}
}
}
}, 30);
};
window.matchMedia = function(media) {
var mql = localMatchMedia(media),
listeners = [],
index = 0;
mql.addListener = function(listener) {
// Changes would not occur to css media type so return now (Affects IE <= 8)
if (!hasMediaQueries) {
return;
}
// Set up 'resize' listener for browsers that support CSS3 media queries (Not for IE <= 8)
// There should only ever be 1 resize listener running for performance
if (!isListening) {
isListening = true;
window.addEventListener('resize', handleChange, true);
}
// Push object only if it has not been pushed already
if (index === 0) {
index = queries.push({
mql : mql,
listeners : listeners
});
}
listeners.push(listener);
};
mql.removeListener = function(listener) {
for (var i = 0, il = listeners.length; i < il; i++){
if (listeners[i] === listener){
listeners.splice(i, 1);
}
}
};
return mql;
};
}());
;// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
// MIT license
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
;var salvattore = (function (global, document, undefined) {
"use strict";
var self = {},
grids = [],
add_to_dataset = function(element, key, value) {
// uses dataset function or a fallback for <ie10
if (element.dataset) {
element.dataset[key] = value;
} else {
element.setAttribute("data-" + key, value);
}
return;
};
self.obtain_grid_settings = function obtain_grid_settings(element) {
// returns the number of columns and the classes a column should have,
// from computing the style of the ::before pseudo-element of the grid.
var computedStyle = global.getComputedStyle(element, ":before")
, content = computedStyle.getPropertyValue("content").slice(1, -1)
, matchResult = content.match(/^\s*(\d+)(?:\s?\.(.+))?\s*$/)
, numberOfColumns
, columnClasses
;
if (matchResult) {
numberOfColumns = matchResult[1];
columnClasses = matchResult[2];
columnClasses = columnClasses? columnClasses.split(".") : ["column"];
} else {
matchResult = content.match(/^\s*\.(.+)\s+(\d+)\s*$/);
columnClasses = matchResult[1];
numberOfColumns = matchResult[2];
if (numberOfColumns) {
numberOfColumns = numberOfColumns.split(".");
}
}
return {
numberOfColumns: numberOfColumns,
columnClasses: columnClasses
};
};
self.add_columns = function add_columns(grid, items) {
// from the settings obtained, it creates columns with
// the configured classes and adds to them a list of items.
var settings = self.obtain_grid_settings(grid)
, numberOfColumns = settings.numberOfColumns
, columnClasses = settings.columnClasses
, columnsItems = new Array(+numberOfColumns)
, columnsFragment = document.createDocumentFragment()
, i = numberOfColumns
, selector
;
while (i-- !== 0) {
selector = "[data-columns] > *:nth-child(" + numberOfColumns + "n-" + i + ")";
columnsItems.push(items.querySelectorAll(selector));
}
columnsItems.forEach(function append_to_grid_fragment(rows) {
var column = document.createElement("div")
, rowsFragment = document.createDocumentFragment()
;
column.className = columnClasses.join(" ");
Array.prototype.forEach.call(rows, function append_to_column(row) {
rowsFragment.appendChild(row);
});
column.appendChild(rowsFragment);
columnsFragment.appendChild(column);
});
grid.appendChild(columnsFragment);
add_to_dataset(grid, 'columns', numberOfColumns);
};
self.remove_columns = function remove_columns(grid) {
// removes all the columns from a grid, and returns a list
// of items sorted by the ordering of columns.
var range = document.createRange();
range.selectNodeContents(grid);
var columns = Array.prototype.filter.call(range.extractContents().childNodes, function filter_elements(node) {
return node instanceof global.HTMLElement;
});
var numberOfColumns = columns.length
, numberOfRowsInFirstColumn = columns[0].childNodes.length
, sortedRows = new Array(numberOfRowsInFirstColumn * numberOfColumns)
;
Array.prototype.forEach.call(columns, function iterate_columns(column, columnIndex) {
Array.prototype.forEach.call(column.children, function iterate_rows(row, rowIndex) {
sortedRows[rowIndex * numberOfColumns + columnIndex] = row;
});
});
var container = document.createElement("div");
add_to_dataset(container, 'columns', 0);
sortedRows.filter(function filter_non_null(child) {
return !!child;
}).forEach(function append_row(child) {
container.appendChild(child);
});
return container;
};
self.recreate_columns = function recreate_columns(grid) {
// removes all the columns from the grid, and adds them again,
// it is used when the number of columns change.
global.requestAnimationFrame(function render_after_css_media_query_change() {
self.add_columns(grid, self.remove_columns(grid));
});
};
self.media_query_change = function media_query_change(mql) {
// recreates the columns when a media query matches the current state
// of the browser.
if (mql.matches) {
Array.prototype.forEach.call(grids, self.recreate_columns);
}
};
self.get_css_rules = function get_css_rules(stylesheet) {
// returns a list of css rules from a stylesheet
var cssRules;
try {
cssRules = stylesheet.sheet.cssRules || stylesheet.sheet.rules;
} catch (e) {
return [];
}
return cssRules || [];
};
self.get_stylesheets = function get_stylesheets() {
// returns a list of all the styles in the document (that are accessible).
return Array.prototype.concat.call(
Array.prototype.slice.call(document.querySelectorAll("style[type='text/css']")),
Array.prototype.slice.call(document.querySelectorAll("link[rel='stylesheet']"))
);
};
self.media_rule_has_columns_selector = function media_rule_has_columns_selector(rules) {
// checks if a media query css rule has in its contents a selector that
// styles the grid.
var i = rules.length
, rule
;
while (i--) {
rule = rules[i];
if (rule.selectorText && rule.selectorText.match(/\[data-columns\](.*)::?before$/)) {
return true;
}
}
return false;
};
self.scan_media_queries = function scan_media_queries() {
// scans all the stylesheets for selectors that style grids,
// if the matchMedia API is supported.
var mediaQueries = [];
if (!global.matchMedia) {
return;
}
self.get_stylesheets().forEach(function extract_rules(stylesheet) {
Array.prototype.forEach.call(self.get_css_rules(stylesheet), function filter_by_column_selector(rule) {
if (rule.media && self.media_rule_has_columns_selector(rule.cssRules)) {
mediaQueries.push(global.matchMedia(rule.media.mediaText));
}
});
});
mediaQueries.forEach(function listen_to_changes(mql) {
mql.addListener(self.media_query_change);
});
};
self.next_element_column_index = function next_element_column_index(grid, fragments) {
// returns the index of the column where the given element must be added.
var children = grid.children
, m = children.length
, lowestRowCount = 0
, child
, currentRowCount
, i
, index = 0
;
for (i = 0; i < m; i++) {
child = children[i];
currentRowCount = child.children.length + fragments[i].children.length;
if(lowestRowCount === 0) {
lowestRowCount = currentRowCount;
}
if(currentRowCount < lowestRowCount) {
index = i;
lowestRowCount = currentRowCount;
}
}
return index;
};
self.create_list_of_fragments = function create_list_of_fragments(quantity) {
// returns a list of fragments
var fragments = new Array(quantity)
, i = 0
;
while (i !== quantity) {
fragments[i] = document.createDocumentFragment();
i++;
}
return fragments;
};
self.append_elements = function append_elements(grid, elements) {
// adds a list of elements to the end of a grid
var columns = grid.children
, numberOfColumns = columns.length
, fragments = self.create_list_of_fragments(numberOfColumns)
;
elements.forEach(function append_to_next_fragment(element) {
var columnIndex = self.next_element_column_index(grid, fragments);
fragments[columnIndex].appendChild(element);
});
Array.prototype.forEach.call(columns, function insert_column(column, index) {
column.appendChild(fragments[index]);
});
};
self.prepend_elements = function prepend_elements(grid, elements) {
// adds a list of elements to the start of a grid
var columns = grid.children
, numberOfColumns = columns.length
, fragments = self.create_list_of_fragments(numberOfColumns)
, columnIndex = numberOfColumns - 1
;
elements.forEach(function append_to_next_fragment(element) {
var fragment = fragments[columnIndex];
fragment.insertBefore(element, fragment.firstChild);
if (columnIndex === 0) {
columnIndex = numberOfColumns - 1;
} else {
columnIndex--;
}
});
Array.prototype.forEach.call(columns, function insert_column(column, index) {
column.insertBefore(fragments[index], column.firstChild);
});
// populates a fragment with n columns till the right
var fragment = document.createDocumentFragment()
, numberOfColumnsToExtract = elements.length % numberOfColumns
;
while (numberOfColumnsToExtract-- !== 0) {
fragment.appendChild(grid.lastChild);
}
// adds the fragment to the left
grid.insertBefore(fragment, grid.firstChild);
};
self.register_grid = function register_grid (grid) {
if (global.getComputedStyle(grid).display === "none") {
return;
}
// retrieve the list of items from the grid itself
var range = document.createRange();
range.selectNodeContents(grid);
var items = document.createElement("div");
items.appendChild(range.extractContents());
add_to_dataset(items, 'columns', 0);
self.add_columns(grid, items);
grids.push(grid);
};
self.init = function init() {
// adds required CSS rule to hide 'content' based
// configuration.
var css = document.createElement("style");
css.innerHTML = "[data-columns]::before{visibility:hidden;position:absolute;font-size:1px;}";
document.head.appendChild(css);
// scans all the grids in the document and generates
// columns from their configuration.
var gridElements = document.querySelectorAll("[data-columns]");
Array.prototype.forEach.call(gridElements, self.register_grid);
self.scan_media_queries();
};
self.init();
return {
append_elements: self.append_elements,
prepend_elements: self.prepend_elements,
register_grid: self.register_grid
};
})(window, window.document);
return salvattore;
}));
function append(title, content){
var grid = document.querySelector('#columns');
var item = document.createElement('div');
var h = '<div class="panel panel-primary">';
h += '<div class="panel-heading">';
h += title;
h += '</div>';
h += '<div class="panel-body">';
h += content;
h += '</div>';
h += '</div>';
salvattore['append_elements'](grid, [item])
item.outerHTML = h;
}
$.getJSON("https://www.googleapis.com/books/v1/volumes?q=inauthor:Ernest+Hemingway&callback=?", function(data){
$(data.items).each(function(i,book){
append(i +'. '+ book.volumeInfo.title, book.volumeInfo.description);
});
});
\ No newline at end of file
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