Commit c7567365 authored by Nicholas Anderson's avatar Nicholas Anderson

Masonry into Packery?

parent 3235f113
/* New styles! */
.card.small {
height: 80px;
margin: 0;
}
.card.small .card-content {
height:100%;
outline:none;
}
.card .card-title {
font-size: 16px;
font-size: 18px;
}
.card .card-content {
padding:15px;
}
.card.small.active {
height: 260px;
}
@media only screen and (min-width : 600px) and (max-width:992px) {
@media only screen and (min-width : 600px) {
.row .col.m6 {
width: 49%;
width: -moz-calc(50% - 5px);
width: -ie-calc(50% - 5px);
width: -webkit-calc(50% - 5px);
width: calc(50% - 5px);
}
.row .col.m12 {
width:100%;
}
}
@media only screen and (min-width : 992px) {
@media only screen and (min-width : 1150px) {
.row .col.l4 {
width:32%;
width: calc(33.333% - 6.666px);
}
.row .col.l8 {
width: calc(66.666% - 3.333px);
}
}
@media only screen and (min-width : 1480px) {
@media only screen and (min-width : 1560px) {
.row .col.xl3 {
width:24%;
width: calc(25% - 7.5px);
margin-left:0;
}
.row .col.xl6 {
width: calc(50% - 3.75px);
}
}
@media only screen and (max-width : 600px) {
.card .card-content {
padding: 5px;
}
.card.small {
height: 60px;
}
}
@media only screen and (max-width : 500px) {
.hero-circle {
width:60px !important;
height:60px !important;
width:40px !important;
height:40px !important;
}
.hero-right, .hero-left {
font-size:3.0rem;
}
.hero-face:after {
width: 6px !important;
height: 6px !important;
margin: -3px 0 0 -3px !important;
border-radius: 3px !important;
}
.hero-hour {
margin: -2px 0 -2px -25%;
padding: 2px 0 2px 25%;
}
}
.hero-right, .hero-left {
display:inline-block;
......@@ -36,10 +77,9 @@
/* Shamelessly stolen from momentjs.com under the MIT license */
.hero-circle {
display: inline-block;
margin-top: 2.1rem;
width: 100px;
height: 100px;
margin: 0 auto;
margin: 1rem auto 0;
position: relative;
border: 4px solid #fff;
border-radius: 50%;
......@@ -110,10 +150,37 @@
background: #fff;
transform-origin: 50% 100%;
}
/* label color */
.input-field label {
color: #FFF;
}
/* label focus color */
.input-field input[type=text]:focus + label {
color: #FFF;
}
/* label underline focus color */
.input-field input[type=text]:focus {
border-bottom: 1px solid #FFF;
box-shadow: 0 1px 0 0 #FFF;
}
/* valid color */
.input-field input[type=text].valid {
border-bottom: 1px solid #FFF;
box-shadow: 0 1px 0 0 #FFF;
}
/* invalid color */
.input-field input[type=text].invalid {
border-bottom: 1px solid #FFF;
box-shadow: 0 1px 0 0 #FFF;
}
/* icon prefix focus color */
.input-field .prefix.active {
color: #FFF;
}
/*Bootstrap*/
/*Bootstrap/
.navbar-default {
background-color: rgba(252,252,255,0.96);
margin-bottom: 0;
......@@ -132,7 +199,7 @@
background: rgba(255,255,255,0.50);
color: #000;
}
/*Styles*/
/*Styles/
body, html {
height: 100%;
}
......@@ -249,6 +316,7 @@ ul.ui-autocomplete {
#footer-line {
display: none;
}
*/
#info-body {
width: 100%;
background-color: #FFF;
......@@ -261,6 +329,7 @@ ul.ui-autocomplete {
display: none;
overflow-y: scroll;
}
#info-name {
font-size: 22px;
margin-bottom: 5px;
......@@ -307,6 +376,7 @@ ul.ui-autocomplete {
#about-link{
cursor: pointer;
}
/*
.grid-blur{
opacity: 0.54;
-webkit-filter: blur(3px);
......@@ -316,7 +386,7 @@ ul.ui-autocomplete {
filter: blur(3px);
}
.main-container{
/* Transitions for .grid-blur */
/* Transitions for .grid-blur *//*
-webkit-transition: opacity 356ms ease-in-out, -webkit-filter 356ms ease-in-out;
-moz-transition: opacity 356ms ease-in-out, -moz-filter 356ms ease-in-out;;
-o-transition: opacity 356ms ease-in-out, -o-filter 356ms ease-in-out;;
......@@ -327,11 +397,11 @@ ul.ui-autocomplete {
max-height: 60%;
}
/* Custom Responsive Classes */
/* xs */
/* xs /
@media (min-width: 480px) {
}
/* sm */
/* sm /
@media (min-width: 768px) {
#info-close {
padding: 6px 31px 31px 31px;
......@@ -340,7 +410,7 @@ ul.ui-autocomplete {
display: none;
}
}
/* md */
/* md
@media (min-width: 992px) {
#footer-line {
display: inline;
......@@ -381,7 +451,7 @@ ul.ui-autocomplete {
margin-right: 10px;
}
}
/* lg */
/* lg /
@media (min-width: 1200px) {
}
var whatsopenApp = angular.module('whatsopenApp', ['ngAria', 'ngTouch', 'iso.directives', 'ui.materialize']);
whatsopenApp.controller('ListCtrl', function($scope, $http, $timeout, $interval) {
// Get the latest from the server
whatsopenApp.controller('ListCtrl', ["$scope", "$rootScope", "$http", "$timeout", "$interval", function($scope, $rootScope, $http, $timeout, $interval) {
"use strict";
// Clock stuffs
var firstUpdate = true;
function updateClock(){
var now = new Date(),
second = now.getSeconds() * 6,
......@@ -11,89 +14,124 @@ whatsopenApp.controller('ListCtrl', function($scope, $http, $timeout, $interval)
$('#hour').css("transform", "rotate(" + hour + "deg)");
$('#minute').css("transform", "rotate(" + minute + "deg)");
$('#second').css("transform", "rotate(" + second + "deg)");
$timeout(updateClock, 1000)
firstUpdate && $timeout(function() {
$('#hour, #minute, #second').css("transition", "");
}, 1000);
firstUpdate = false;
}
var processTimes = function() {
$('#hour, #minute, #second').css("transition", "1000ms ease-in-out transform");
window.onload = updateClock;
// Pulled mostly from original whatsopen code
var processTimes = function(facilities) {
var now = new Date();
angular.forEach($scope.facilities, function(facility, idx, obj) {
// Prime our date variables
var endDate = new Date().setHours(5, 0, 0, 0);
// Python weeks start on Monday, JS weeks start on Sunday
var day = now.getDate() - 1;
if (day === -1) {
day = 6;
}
var endDate = new Date().setHours(5, 0, 0, 0);
// Prime our date variables
// Python weeks start on Monday, JS weeks start on Sunday
var day = now.getDay() - 1;
if (day === -1) {
day = 6;
}
for (var idx=0,len=facilities.length; idx < len; idx++) {
var facility = facilities[idx];
// Sort out which schedule to use
var schedule = undefined;
// Do we use one of the special schedules?
angular.forEach(facility.special_schedules, function(special) {
var special_start = Date.parse(special.valid_start + " 05:00:00"),
for (var i=0,lenx=facility.special_schedules.length; i<lenx; i++) {
var special = facility.special_schedules[i],
special_start = new Date.parse(special.valid_start + " 05:00:00"),
special_end = Date.parse(special.valid_end + " 05:00:00");
special_end.setDate(special_end.getDate()+1);
if (now >= special_start && now <= special_end) {
schedule = special;
console.log("Special schedule")
}
});
};
// Otherwise, stick to the main schedule
if (schedule === undefined) {
schedule = facility.main_schedule;
}
schedule = schedule || facility.main_schedule;
facility.current_schedule = schedule;
// Default facilities to closed
$scope.facilities[idx]['open'] = false;
angular.forEach(schedule.open_times, function(time) {
var start_day = time.start_day;
var end_day = time.end_day;
var start_time = Date.parse(time.start_time);
var end_time = Date.parse(time.end_time);
facility['open'] = false;
for (var i=0,lenx=schedule.open_times.length; i<lenx; i++) {
var time = schedule.open_times[i],
start_day = time.start_day,
end_day = time.end_day,
start_time = Date.parse(time.start_time),
end_time = Date.parse(time.end_time);
if (day === start_day) {
if (now >= Date.parse(time.start_time)) {
if (now >= start_time) {
if (day === end_day) {
if (now <= Date.parse(time.end_time)) {
$scope.facilities[idx]['open'] = true;
if (now <= end_time) {
facility['open'] = true;
facility['current_time'] = time;
}
} else {
$scope.facilities[idx]['open'] = true;
facility['open'] = true;
facility['current_time'] = time;
}
}
} else if (day === end_day) {
if (now <= Date.parse(time.end_time)) {
if (now <= end_time) {
if (day === start_day) {
if (now >= Date.parse(time.start_time)) {
$scope.facilities[idx]['open'] = true;
if (now >= start_time) {
facility['open'] = true;
facility['current_time'] = time;
}
} else {
$scope.facilities[idx]['open'] = true;
facility['open'] = true;
facility['current_time'] = time;
}
}
} else if (start_day < end_day) {
if (day > start_day && day < end_day) {
$scope.facilities[idx]['open'] = true;
facility['open'] = true;
facility['current_time'] = time;
}
} else if (start_day > end_day) {
if (day > start_day || day < end_day) {
$scope.facilities[idx]['open'] = true;
facility['open'] = true;
facility['current_time'] = time;
}
}
});
});
};
};
return facilities;
}
var isotopeOptions = {
layoutMode: 'packery',
itemSelector: '.card',
packery: {
columnWidth: '.card:not(.active)',
gutter: 10
}
};
$scope.toggleActive = function(index) {
// $scope.facilities[index].active = !$scope.facilities[index].active;
index.active = !index.active
console.log(index);
$timeout(function() {
$scope.$emit('iso-option', isotopeOptions);
}, 100);
}
$scope.colorCard = function(facility) {
return facility.open ? "" : "grey lighten-2";
$scope.cardClass = function(facility) {
var rclass = facility.open ? "" : "red lighten-5 ";
rclass += facility.active ? "active s12 m12 l8 xl6" : "s12 m6 l4 xl3";
return rclass;
}
$interval(updateClock, 1000);
$http.get('https://whatsopen.gmu.edu/api/facilities/?format=json').then(function(res) {
// When we get it, inject it into scope
$scope.facilities = res.data;
processTimes();
$scope.$emit('iso-option', {masonry:{gutter:10}});
$scope.facilities = processTimes(res.data);
$scope.$emit('iso-option', isotopeOptions);
// Initalize a timeout to keep the scope up to date
$interval(function() {
processTimes();
console.log($scope.facilities);
$scope.facilities = processTimes($scope.facilities);
}, 30000);
}, function(res) {
......@@ -101,6 +139,5 @@ whatsopenApp.controller('ListCtrl', function($scope, $http, $timeout, $interval)
$scope.error = "Uh oh! Couldn't load the latest from the API, check your connection and try again.";
});
});
}]);
whatsopenApp.filter
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
......@@ -10,9 +10,17 @@ Fairfax
{% verbatim %}
<div class="row" isotope-container="isotope-item">
<div class="card small col xl3 l4 m6 s12" isotope-item="" ng-class="colorCard(facility)" ng-repeat="facility in facilities | filter:search | orderBy:['open', 'name'] track by $index">
<div class="card-content">
<div class="card small col" isotope-item="" ng-class="cardClass(facility)" ng-repeat="facility in facilities | filter:search | orderBy:['-open', 'name'] track by $index">
<div class="card-content" ng-click="toggleActive(facility)">
<span class="card-title black-text">{{facility.name}}</span>
<div class="card-body row" ng-show="facility.active">
<div class="col s12 m6">
<strong>Status:</strong> {{ facility.open ? "Open" : "Closed" }}
</div>
<div class="col s12 m6">
<strong>Location:</strong> {{ facility.location }}
</div>
</div>
</div>
</div>
</div>
......
......@@ -8,7 +8,7 @@
<body ng-app="whatsopenApp" ng-controller="ListCtrl">
<div class="holder">
<!-- Shamelessly stolen from momentjs.com which is released under the MIT license -->
<div class="row center green darken-1">
<div class="row center green darken-1" style="margin-bottom:0">
<h1 class="hero-right white-text">What's</h1>
<div class="hero-circle">
<div class="hero-face">
......@@ -18,6 +18,16 @@
</div>
</div>
<h1 class="hero-right white-text">Open</h1>
</div>
<div class="row green lighten-1 white-text" style="margin-top:0">
<div class="container">
<div class="input-field col s12">
<i class="material-icons prefix">search</i>
<input type="text" class="validate" id="search" ng-model="search">
<label for="search">Search:</label>
</div>
</div>
</div>
</div>
<div id="about-body">
<div class="container" id="about-container">
......
......@@ -8,9 +8,11 @@
{% if debug %}
<!-- Local version of CDN provided stylesheets -->
<link href="{% static "css/vendor/materialize.min.css" %}">
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
{% else %}
<!-- CDN version of stylesheets -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
{% endif %}
<!-- What's Open specific styles -->
......@@ -19,6 +21,7 @@
{% if debug %}
<!-- CDN version of What's Open's libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
......@@ -27,6 +30,7 @@
{% else %}
<!-- Local versions of cdn provided resources -->
<script src="{% static "js/vendor/jquery-2.1.4.min.js" %}"></script>
<script src="{% static "js/vendor/materialize.min.js" %}"></script>
<script src="{% static "js/vendor/date.min.js" %}"></script>
<script src="{% static "js/vendor/isotope.pkgd.min.js" %}"></script>
<!-- AngularJS 1.4.7 and its libraries -->
......@@ -37,6 +41,7 @@
<!-- Non-CDN libraries -->
<script src="{% static "js/vendor/angular-isotope.min.js" %}"></script>
<script src="{% static "js/vendor/angular-materialize.js" %}"></script>
<script src="{% static "js/vendor/packery-mode.pkgd.min.js" %}"></script>
<!-- Application JS -->
<script src="{% static "js/app.js" %}"></script>
......
Markdown is supported
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