Skip to content
This repository was archived by the owner on Mar 19, 2024. It is now read-only.

enhancement/cards #19

Merged
merged 5 commits into from
Oct 1, 2016
Merged

enhancement/cards #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fd0d148
Added cards for days to so they take up less space
butlerx Sep 28, 2016
a61e9c3
Turn days in cards
butlerx Sep 28, 2016
e6ea6b9
add margin and update less
butlerx Oct 1, 2016
c5172cb
add live reload
butlerx Oct 1, 2016
5795c91
change the font weight of card title
butlerx Oct 1, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 13 additions & 7 deletions 2015/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,8 @@
# #
# Redbrick - DCU Networking Society #
# #
# #
#######################################


I see that you are intersted in the source of this website.
To speed up the process we used materializecss.com for
Google Material Design CSS
Expand Down Expand Up @@ -38,16 +36,24 @@
<body>
<div class="wrapper">
<header>
<h1><span>Tech</span>Week</h1>
<h1 class="title"><a href="/"><span class="title__colour">Tech</span>Week</a></h1>
<p>Dublin City University 9<sup>th</sup> - 13<sup>th</sup> March 2015</p>
<ul><li><a href="../2016">Feb 2016</a></li><li><a href="..">Oct 2016</a></li></ul>
<ul class="menu">
<li class="menu__item">
<a href="../2016">Feb 2016</a>
</li>
<li>
<a href="..">Oct 2016</a>
</li>
</ul>
</header>
<!-- 10 minutes before start of the event the livestream will come on -->
<div class="container" id="playlist">
<div class="container playlist">
<iframe id="live" src="https://www.youtube.com/embed/videoseries?list=PLPaLJSHTDMFgYNnnEOjuvdm6WqOFTSQ9z" width="100%" height="400" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" webkitallowfullscreen="" allowfullscreen=""></iframe>
</div>
<!-- All events are loaded into this element -->
<div class="events"></div>
<div class="card-container">
<ul class="collapsible popout card-container__events" data-collapsible="accordion"></ul>
</div>
</div>
<!-- The script is loaded and ran -->
<script type="text/javascript" src="../dist/js/main.min.js"></script>
Expand Down
3 changes: 2 additions & 1 deletion 2016/events.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
"description": "To Be Announced"
}, {
"name": "Tales of success o.O",
"by": " Terrence Bolt & Cian Butler",
"by": " Terry Bolt & Cian Butler",
"time": "1:00pm",
"place": {
"id": "The Mezz",
Expand All @@ -48,6 +48,7 @@
"description": " Another Project"
}, {
"name": "To Be Announced",
"by": "",
"time": "4:00pm",
"place": {
"id": "The Mezz",
Expand Down
20 changes: 14 additions & 6 deletions 2016/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,18 +38,26 @@
<body>
<div class="wrapper">
<header>
<h1><span>Tech</span>Week</h1>
<h1 class="title"><a href="/"><span class="title__colour">Tech</span>Week</a></h1>
<p>Dublin City University 15<sup>th</sup> - 19<sup>th</sup> Febuary 2015</p>
<ul><li><a href="../2015">2015</a></li><li><a href="..">Oct 2016</a></li></ul>
<ul class="menu">
<li class="menu__item">
<a href="../2015">2015</a>
</li>
<li class="menu__item">
<a href="..">Oct 2016</a>
</li>
</ul>
</header>
<!-- 10 minutes before start of the event the livestream will come on -->
<div class="container" id="playlist">
<div class="container playlist">
<iframe id="live" src="https://www.youtube.com/embed/videoseries?list=PLPaLJSHTDMFhbDmyUeik6IHXmzVtWQQxu" width="100%" height="400" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" webkitallowfullscreen="" allowfullscreen=""></iframe>
</div>
<!-- All events are loaded into this element -->
<div class="events"></div>
<div class="card-container">
<ul class="collapsible popout card-container__events" data-collapsible="accordion"></ul>
</div>
</div>
<!-- The script is loaded and ran -->
<script type="text/javascript" src="../js/main.js"></script>
<script type="text/javascript" src="../dist/js/main.min.js"></script>
</body>
</html>
127 changes: 92 additions & 35 deletions css/main.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,68 +1,86 @@
@import url(http://fonts.googleapis.com/css?family=Roboto:100,300,400);
@import url(//fonts.googleapis.com/css?family=Roboto:100,300,400);

@card-width: 624px;
@large-phone: 560px;

header {
text-align: center;

h1 {
.title {
margin: 0.5em 0;
margin-bottom: 0.3em;
font-size: 15vmin;
font-weight: 100;

span {
&__colour {
color: red;
font-weight: 300;
}

a {
color: black;
}
}

ul {
.menu {
list-style-type: none;
margin: 0;
margin: 8px 0;
padding: 0;
overflow: hidden;
display: flex;
flex-wrap: wrap;
justify-content: center;

li {
&__item {
float: left;
padding: 0 8px;
}
}
}

body {
background-color: #eee;
}

video {
width: 100%;
}

.day {
margin-top: 2vh;
margin-bottom: 5vh;
padding: 0;
}
margin-top: 1vh;

.day-name {
width: auto;
display: inline;
}
&__title {
width: auto;
display: inline;
font-weight: 300;

.time {
float: left;
display: inline-block;
font-size: 1.5vh;
width: 15%;
max-width: 5em;
&__bold {
font-weight: 500;
}
}
}

.event {
display: inline-block;
width: 60%;
}
.event-card {
display: flex;
&__time {
float: left;
display: inline-block;
font-size: 1.5vh;
width: 15%;
margin-right: 1em;
max-width: 5em;
}

.place {
display: inline-block;
color: #000000;
float: right;
&__event {
display: inline-block;
width: 80%;
}

&__place {
display: inline-block;
color: #000000;
float: right;
}
}

p {
Expand All @@ -73,16 +91,19 @@ ul {
margin-bottom: 2vh;
}

.collapsable-header {
.collapsible-header {
height: initial;
-webkit-transition: all 0.2s;
border-bottom: 0;
line-height: 1.5rem;
padding: 1em,
}

#countdown {
.countdown {
display: none;
text-align: center;

.counter {
&__counter {
display: flex;
flex-wrap: wrap;
flex-direction: column;
Expand All @@ -95,14 +116,50 @@ ul {
}
}

#livestream {
.livestream {
display: none;
}

#playlist {
.playlist {
display: block;
}

.container {
padding: 0;
.collapsible.popout>li {
background-color: #fff;
}

.collapsible.popout>li.active {
margin: 16px;
}

.collapsible-body {
border-bottom: 0px;

.collapsible {
box-shadow: 0 0;
border-right: 0;
border-left: 0;
}

.collapsible-header {
border-bottom: 1px solid #ddd;
}
}

.card-container {
display: flex;
align-items: center;
justify-content: center;

&__events {
width: 80%;

@media screen and (max-width: @large-phone) {
width: 100%;
}

@media screen and (min-width: 800px) {
max-width: @card-width;
}
}
}
1 change: 0 additions & 1 deletion dist/css/main.min.css
View file
Open in desktop

This file was deleted.

14 changes: 10 additions & 4 deletions gulpfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ var rename = require('gulp-rename');
var connect = require('gulp-connect');

gulp.task('dev', ['compress', 'minify-css', 'less', 'webserver'], function () {
gulp.watch('./css/*.less', ['less']);
gulp.watch(['./css/*.less', './js/*.js', './**/*.html'], ['less', 'compress', 'html']);
});

gulp.task('compress', function() {
Expand All @@ -24,23 +24,29 @@ gulp.task('compress', function() {

gulp.task('minify-css', function() {
return gulp.src('css/*.css')
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(cleanCSS({compatibility: 'ie8', processImport: false}))
.pipe(gulp.dest('dist/css'));
});

gulp.task('less', function() {
return gulp.src('css/*.less')
.pipe(less())
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(cleanCSS({compatibility: 'ie8', processImport: false}))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('dist/css'));
});

gulp.task('webserver', function() {
connect.server({
port: 8000,
host: 'techweek.dev'
host: 'techweek.dev',
livereload: true
});
});

gulp.task('html', function () {
gulp.src('./**/*.html')
.pipe(connect.reload());
});

gulp.task('default', ['compress', 'minify-css', 'less']);
21 changes: 15 additions & 6 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,28 +38,37 @@
<body>
<div class="wrapper">
<header>
<h1><span>Tech</span>Week</h1>
<h1 class="title"><a href="/"><span class="title__colour">Tech</span>Week</a></h1>
<p>Dublin City University 24<sup>th</sup> - 28<sup>th</sup> October 2016</p>
<ul><li><a href="./2016">Feb 2016</a></li><li><a href="./2015">2015</a></li></ul>
<ul class="menu">
<li class="menu__item">
<a href="./2016">Feb 2016</a>
</li>
<li>
<a href="./2015">2015</a>
</li>
</ul>
</header>
<!-- Countdown is show up to 10 minutes before the event -->
<div id="countdown">
<div class="countdown">
TechWeek Starts in:
<div class="counter">
<div class="countdown__counter">
<span>&nbsp;</span>
<span>&nbsp;</span>
<span>&nbsp;</span>
<span>&nbsp;</span>
</div>
</div>
<!-- 10 minutes before start of the event the livestream will come on -->
<div class="container" id="livestream">
<div class="container livestream">
<video id="live" controls poster="https://www.redbrick.dcu.ie/includes/images/logo.png">
<source src="">
</video>
</div>
<!-- All events are loaded into this element -->
<div class="events"></div>
<div class="card-container">
<ul class="collapsible popout card-container__events" data-collapsible="accordion"></ul>
</div>
</div>
<!-- The script is loaded and ran -->
<script type="text/javascript" src="dist/js/main.min.js"></script>
Expand Down
Loading