syn2cat
/
Level2.lu
2
0
Fork 0
Code Issues 3 Pull Requests Projects Releases Wiki Activity

added more widgets, modular way of displaying events

master
Tezza 2015-03-01 00:29:33 +01:00
parent 59bb6dd291
commit 702225261d
12 changed files with 227 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/level2/WebControllerProvider.php
View File

@ -37,7 +37,7 @@
);
return $app['twig']->render(
'events.twig',
'event-list.twig',
array(
'page' => 'events',
'level2' => Level2::getStatus( $app ),
@ -72,7 +72,7 @@
}
return $app['twig']->render(
'events.twig',
'event-list.twig',
array(
'page' => 'events',
'level2' => Level2::getStatus( $app ),
@ -111,7 +111,7 @@
}
return $app['twig']->render(
'events.twig',
'event-list.twig',
array(
'page' => 'events',
'level2' => Level2::getStatus( $app ),

15
src/app/views/base.twig
View File

@ -12,7 +12,7 @@
<title>Level2</title>
<!-- Bootstrap core CSS -->
<link href='https://fonts.googleapis.com/css?family=Patrick+Hand+SC' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/level2.css" rel="stylesheet">
@ -57,24 +57,13 @@
{% block container %}
{% endblock container %}
<div class="row footer">
<div class="col-sm-4">
{{ level2.address }}
</div>
<div class="col-sm-4">
T: <a href="tel:{{ level2.phone }}">{{ level2.phone }}</a>
</div>
<div class="col-sm-4">
{{ level2.address }}
</div>
</div>
</div> <!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="/js/d3.v3.min.js"></script>
<script src="/js/trianglify.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="/js/level2.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>

20
src/app/views/event-grid-split.twig Normal file
View File

@ -0,0 +1,20 @@
{% block event %}
<div class="row event well">
<div class="col-sm-4 meta hidden-xs">
{% embed "event-meta.twig" %}
{% endembed %}
</div>
<div class="col-sm-8 description">
{% embed "event-info.twig" %}
{% endembed %}
</div>
</div>
{% endblock %}

20
src/app/views/event-grid-wide.twig Normal file
View File

@ -0,0 +1,20 @@
{% block event %}
<div class="event well no-top-radius">
<div class="meta hidden-xs">
{% embed "event-meta.twig" %}
{% endembed %}
</div>
<div class="description">
{% embed "event-info.twig" %}
{% endembed %}
</div>
</div>
{% endblock %}

18
src/app/views/event-info.twig Normal file
View File

@ -0,0 +1,18 @@
<h2>
{% if event.url %}
<a target="_blank" href="{{ event.url }}">
{{ event.name }}
</a>
{% else %}
{{ event.name }}
{% endif %}
</h2>
<h4 class="visible-xs">
{{ event.date }}
{% if event.location is defined %}
- {{ event.location }}
{% endif %}
</h4>
{% if event.description is defined %}
<p>{{ event.description|raw }}</p>
{% endif %}

2
src/app/views/events.twig → src/app/views/event-list.twig
View File

@ -14,7 +14,7 @@
{% for event in events %}
{% embed "event.twig" %}
{% embed "event-grid-split.twig" %}
{% endembed %}
{% endfor %}

23
src/app/views/event-meta.twig Normal file
View File

@ -0,0 +1,23 @@
{% if event.image %}
<div class="img">
{% if event.url %}
<a target="_blank" href="{{ event.url }}">
<img src="{{ event.image }}" />
</a>
{% else %}
<img src="{{ event.image }}" />
{% endif %}
</div>
{% else %}
{% if event.url %}
<a target="_blank" href="{{ event.url }}">
<img src="{{ level2.logo }}" />
</a>
{% else %}
<img src="{{ level2.logo }}" />
{% endif %}
{% endif %}
<h4>{{ event.date }}</h4>
{% if event.location is defined %}
<h4 class="location">{{ event.location }}</h4>
{% endif %}

53
src/app/views/event.twig
View File

@ -1,53 +0,0 @@
{% block event %}
<div class="row event well">
<div class="col-sm-4 meta hidden-xs">
{% if event.image %}
<div class="img">
{% if event.url %}
<a target="_blank" href="{{ event.url }}">
<img src="{{ event.image }}" />
</a>
{% else %}
<img src="{{ event.image }}" />
{% endif %}
</div>
{% else %}
{% if event.url %}
<a target="_blank" href="{{ event.url }}">
<img src="{{ level2.logo }}" />
</a>
{% else %}
<img src="{{ level2.logo }}" />
{% endif %}
{% endif %}
<h4>{{ event.date }}</h4>
{% if event.location is defined %}
<h4 class="location">{{ event.location }}</h4>
{% endif %}
</div>
<div class="col-sm-8 description">
<h2>
{% if event.url %}
<a target="_blank" href="{{ event.url }}">
{{ event.name }}
</a>
{% else %}
{{ event.name }}
{% endif %}
</h2>
<h4 class="visible-xs">
{{ event.date }}
{% if event.location is defined %}
- {{ event.location }}
{% endif %}
</h4>
{% if event.description is defined %}
<p>{{ event.description|raw }}</p>
{% endif %}
</div>
</div>
{% endblock %}

88
src/app/views/level2.twig
View File

@ -6,37 +6,95 @@
<div class="col-md-4">
<h2>Map</h2>
<section>
<iframe width="100%" height="300px" frameBorder="0" src="https://umap.openstreetmap.fr/en/map/level-2-surroundings_14716?scaleControl=false&miniMap=false&scrollWheelZoom=false&zoomControl=true&allowEdit=false&moreControl=true&datalayersControl=true&onLoadPanel=undefined&captionBar=false#17/49.59165/6.14071"></iframe>
<h2 class="well">#openMonday</h2>
<p class="well info">
We hold open evenings <b>every Monday</b> from <b>8pm</b> where members and non-members hang out, hack on projects, socialise, and collaborate. <a target="_blank" href="https://wiki.hackerspace.lu/wiki/Openmonday">Learn more</a>
</p>
<a class="twitter-timeline" href="https://twitter.com/Level2Lu" data-widget-id="571113553709789184">Tweets by @Level2Lu</a>
<script>!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>
</section>
<section>
<h2 class="well">Location</h2>
<p class="well no-bottom-margin no-bottom-rounded">
Level2 is located in Bonnevoie, very close to Luxembourg city. We hold regular <a href="/events">events</a> (often free) which are open to everyone.
</p>
<div class="google-map-container">
<a href="https://goo.gl/maps/OWqIf">
<img class="google-map no-margin" src="https://maps.googleapis.com/maps/api/staticmap?markers=color:blue%7Clabel:L%7C49.591597,6.140704&zoom=15&size=500x400" />
</a>
</div>
<p class="well no-top-radius">
Level2<br />
87, route de Thionville<br />
L-2611 Luxembourg<br />
T: <a href="tel:+352-20-33-35-50">+352 20 33 35 50</a>
</p>
</section>
<!--<section class="hidden-xs">
<a class="twitter-timeline" href="https://twitter.com/Level2Lu" data-widget-id="571113553709789184">Tweets by @Level2Lu</a>
<script>!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>
</section>-->
</div>
<div class="col-md-4">
<div class="col-md-8 no-padding">
<h2>Membership</h2>
<div class="col-md-12">
<div class="well">
<section>
Our members have a hand in the running of the organisation and 24/7 access to the space. We're a members-owned non-profit association. We need our members to pay for our rent and infrastructure. The minimum subscription is €9.50/month.
<h2 class="well">Next Event</h2>
{% for event in events %}
{% embed "event-grid-split.twig" %}
{% endembed %}
{% endfor %}
</section>
</div>
</div>
<div class="col-md-6">
<div class="col-md-4">
<section>
<h2>Next Event</h2>
<h2 class="well">Membership</h2>
<p class="well info">
Our members have a hand in the running of the organisation and 24/7 access to the space. We're a members-owned non-profit association. We need our members to pay for our rent and infrastructure. <a target="_blank" href="https://wiki.hackerspace.lu/wiki/Membership">Join the community</a>
</p>
{% for event in events %}
</section>
{% embed "event.twig" %}
{% endembed %}
</div>
{% endfor %}
<div class="col-md-6">
<section>
<h2 class="well">Sponsors</h2>
<p class="well info sponsors">
<a target="_blank" href="http://1024.lu"><img src="/img/1024.png" /></a>
<a target="_blank" href="http://men.etat.lu/"><img src="https://www.hackerspace.lu/wp-content/uploads/2014/08/GOUV_MEEJ.png" /></a>
<a target="_blank" href="http://soundselection.lu"><img src="https://www.hackerspace.lu/wp-content/uploads/2014/08/soundselection_black_on_transparent_small.png" /></a>
<a target="_blank" href="http://mixvoip.com/"><img src="https://www.hackerspace.lu/wp-content/uploads/2011/12/140px-MIXvoip-400.png" /></a>
<a target="_blank" href="http://ion.lu"><img src="https://www.hackerspace.lu/wp-content/uploads/2011/12/LogoIONgroup218.png" /></a>
</p>
</section>
</div>
</div>

71
src/web/css/level2.css
View File

@ -17,12 +17,15 @@ body {
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: 'Patrick Hand SC', sans-serif;
font-size: 18px;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
overflow-x: hidden;
}
a {
text-decoration: none;
}
.well {
padding: 0.3rem;
padding: 0.7rem;
border: none;
background: rgba( 255, 255, 255, 0.7 );
}
@ -79,13 +82,15 @@ body {
img {
max-width: 100%;
max-height: 150px;
border-radius: 0.4rem;
}
.event img {
max-height: 150px;
}
@media (max-width: 992px) {
img {
.event img {
max-height: 100px;
}
}
@ -103,16 +108,16 @@ img {
*/
h2, h3, h4 {
text-shadow: 1px 0px 6px rgba(255, 255, 255, 0.7);
text-shadow: 1px 0px 6px rgba( 255, 255, 255, 0.7 );
margin: 0;
}
.event h2, .event h3, .event h4, .event p {
p {
margin: 0;
}
.event h2 {
font-size: 2rem;
}
.event h4 {
color: #777;
}
@ -127,11 +132,51 @@ h2, h3, h4 {
.description h4 {
margin-top: -0.5rem;
}
.well:hover {
background: rgba( 255, 255, 255, 0.8 );
}
.well.map {
padding: 0;
}
.google-map {
width: 100%;
border-radius: 0;
}
.google-map-container {
width: 100%;
}
h2.well {
padding: auto 5rem;
background: rgba( 51, 51, 51, 0.7 );
background: rgba( 0, 174, 201, 0.7 );
margin-bottom: 0;
border-radius: 0.4rem 0.4rem 0 0;
color: #ffffff;
text-shadow: none;
}
.well.info {
border-radius: 0 0 0.4rem 0.4rem;
}
.no-top-radius {
border-radius: 0 0 0.4rem 0.4rem ;
}
section:hover h2.well {
background: rgba( 51, 51, 51, 0.8 );
background: rgba( 0, 174, 201, 0.8 );
}
section:hover .well {
background: rgba( 255, 255, 255, 0.8 );
}
.sponsors img {
max-width: 49%;
border-radius: 0;
margin: 5px auto;
}
.no-bottom-margin {
margin-bottom: 0;
}
.no-bottom-rounded {
border-radius: 0;
}
.no-padding {
padding: 0;
}

BIN
src/web/img/1024.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

18
src/web/js/level2.js
View File

@ -12,24 +12,24 @@ var t = new Trianglify(
);
window.onresize = function() {
redraw();
redraw();
};
redraw();
function redraw() {
var pattern = t.generate(window.innerWidth, window.innerHeight);
document.body.setAttribute('style', 'background-image: '+pattern.dataUrl);
var pattern = t.generate(window.innerWidth, window.innerHeight);
document.body.setAttribute('style', 'background-image: '+pattern.dataUrl);
}
function height() {
return Math.max(
document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight,
document.body.clientHeight, document.documentElement.clientHeight
);
return Math.max(
document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight,
document.body.clientHeight, document.documentElement.clientHeight
);
}
/**
* END Trianglify
*/
*/