Fixed a lot of small styling issues: with the footer, the new popover, and others.

bgrawi · bgrawi · commit 6c8abf172582 · 2014-11-21T00:07:02.000-05:00
Also fixed the digit dropping on small screens. Closes #60.
diff --git a/assets/src/modules/sm/App/directives/courseDetailPopover.js b/assets/src/modules/sm/App/directives/courseDetailPopover.js
@@ -12,6 +12,9 @@ angular.module('sm').directive('courseDetailPopover', function($http, $filter) {
 		for (var timeIndex = 0; timeIndex < parsedTimes.length; timeIndex++) {
 			var time = parsedTimes[timeIndex];
 			HTML += time.days + ' <span style="white-space: nowrap">' + formatTime(time.start) + '-' + formatTime(time.end) + '</span> <span style="font-style: italic; white-space: nowrap">Location: ' + time.location + '</span>';
+			if(timeIndex < parsedTimes.length - 1) {
+				HTML += '<br>';
+			}
 		}
 		HTML += '</div>';
 
@@ -33,7 +36,8 @@ angular.module('sm').directive('courseDetailPopover', function($http, $filter) {
 
 						$body.off('click.hidepopovers');
 						$body.on('click.hidepopovers', function () {
-							elm.popover('hide');
+							elm.popover('destroy');
+							loaded = false;
 							$body.off('click.hidepopovers');
 							opened = false;
 						});
@@ -50,8 +54,8 @@ angular.module('sm').directive('courseDetailPopover', function($http, $filter) {
 						).success(function(data) {
 							elm.popover({
 								html:true,
-								trigger:'manual',
-								placement:'auto left',
+								trigger:'click',
+
 								title: data.courseNum,
 								content: '<div class="well-sm pull-right" style=" background-color: #ddd;" title="Other students enrolled as of 6AM today">' + data.curenroll + '/' + data.maxenroll + ' <i class="fa fa-user"></i></div><p>' + data.title + '<br><span class="label label-default popover-white">' + RMPUrl(data.instructor) + '</span></p><p>' + getTimesHTML(data.times) + '</p><p>' + data.description + '</p>',
 								container: '#container'
@@ -63,10 +67,10 @@ angular.module('sm').directive('courseDetailPopover', function($http, $filter) {
 								loaded = false;
 							});
 					} else {
-						elm.popover('toggle');
+						//elm.popover('toggle');
 						opened = !opened;
 						if(opened) {
-							hidePopoverOnBodyClick();
+							//hidePopoverOnBodyClick();
 						}
 					}
 				});
diff --git a/assets/src/modules/sm/App/styles/global.css b/assets/src/modules/sm/App/styles/global.css
@@ -106,6 +106,7 @@ body.print footer.main.default {
 
 body.default header.main {
 	display: block;
+	transform: translateZ(0);
 }
 
 body.print header.main {
@@ -145,7 +146,7 @@ body.print #container {
 
 footer.main.default {
 	position: relative;
-	padding:20px;
+	padding:20px 0;
 	background-color:#2C3E50;
 	color:#ccc;
 }
@@ -616,10 +617,12 @@ svg g.item:hover rect {
 		overflow-y: auto;
 		height: 350px;
 		height: calc(100% - 124px);
+		min-height: 100px;
 	}
 	
 	.course-cart {
 		height: calc(100% - 20px);
+		min-height: 230px;
 	}
 	
 	.pinned-sizer {
@@ -662,6 +665,11 @@ svg g.item:hover rect {
 		margin-bottom: 0 !important;
 	}
 }
+@media screen and (min-width:767px) and (max-width:1020px) {
+	svg g.svg-schedule-hours {
+		transform: translateX(7px);
+	}
+}
 
 /* ANIMATIONS */
 @media screen and (min-width:767px) {
diff --git a/assets/src/modules/sm/Schedule/templates/scheduleitem.html b/assets/src/modules/sm/Schedule/templates/scheduleitem.html
@@ -10,47 +10,47 @@ <h2 class="panel-title control-label pull-left smaller-sm">{{saveAction == "crea
 							<span class="caret"></span>
 						</button>
 						<ul class="dropdown-menu" role="menu">
-							<li><a ng-click="scheduleActions.downloadiCal($event)" href="#"><i class="fa fa-calendar-o"></i> iCal</a></li>
-							<li ng-show="imageSupport"><a ng-click="scheduleActions.downloadImage($event)" href="#"><i class="fa fa-picture-o"></i> Image</a></li>
+							<li><a ng-click="scheduleActions.downloadiCal($event)" href="#"><i class="fa fa-fw fa-calendar-o"></i> iCal</a></li>
+							<li ng-show="imageSupport"><a ng-click="scheduleActions.downloadImage($event)" href="#"><i class="fa fa-fw fa-picture-o"></i> Image</a></li>
 						</ul>
 					</div>
-					<button ng-click="scheduleActions.print()" type="button" class="btn btn-info hidden-xs"><i class="fa fa-print"></i> Print</button>
+					<button ng-click="scheduleActions.print()" type="button" class="btn btn-info hidden-xs"><i class="fa fa-fw fa-print"></i> Print</button>
 					<div class="btn-group">
 						<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
 							<i class="fa fa-share"></i> Share to... <span class="caret"></span>
 						</button>
 						<ul class="dropdown-menu" role="menu">
-							<li><a ng-click="scheduleActions.shareToService($event, 'facebook')" href="#"><i class="fa fa-facebook"></i> Facebook</a></li>
-							<li><a ng-click="scheduleActions.shareToService($event, 'twitter')" href="#"><i class="fa fa-twitter"></i> Twitter</a></li>
-							<li><a ng-click="scheduleActions.shareToService($event, 'googlep')" href="#"><i class="fa fa-google-plus"></i> Google+</a></li>
+							<li><a ng-click="scheduleActions.shareToService($event, 'facebook')" href="#"><i class="fa fa-fw fa-facebook"></i> Facebook</a></li>
+							<li><a ng-click="scheduleActions.shareToService($event, 'twitter')" href="#"><i class="fa fa-fw fa-twitter"></i> Twitter</a></li>
+							<li><a ng-click="scheduleActions.shareToService($event, 'googlep')" href="#"><i class="fa fa-fw fa-google-plus"></i> Google+</a></li>
 							<li class="divider"></li>
-							<li><a ng-click="scheduleActions.shareToEmail($event)" href="#"><i class="fa fa-envelope"></i> Email</a></li>
-							<li><a ng-click="scheduleActions.shareToDirectLink($event)" href="#"><i class="fa fa-link"></i> Direct link</a></li>
+							<li><a ng-click="scheduleActions.shareToEmail($event)" href="#"><i class="fa fa-fw fa-envelope"></i> Email</a></li>
+							<li><a ng-click="scheduleActions.shareToDirectLink($event)" href="#"><i class="fa fa-fw fa-link"></i> Direct link</a></li>
 						</ul>
 					</div>
 				</div>
 				<div class="btn-group pull-right visible-xs visible-sm">
 					<div class="btn-group">
-						<button ng-click="scheduleActions.save(saveAction)" type="button" class="btn btn-primary btn-sm"><i class="fa" ng-class="{'fa-save': saveAction == 'create', 'fa-copy': saveAction == 'fork'}"></i> {{saveAction == "create"?"Save":"Copy and Edit"}} </button>
+						<button ng-click="scheduleActions.save(saveAction)" type="button" class="btn btn-primary btn-sm"><i class="fa fa-fw" ng-class="{'fa-save': saveAction == 'create', 'fa-copy': saveAction == 'fork'}"></i> {{saveAction == "create"?"Save":"Copy and Edit"}} </button>
 						<button type="button" class="btn btn-primary dropdown-toggle btn-sm" data-toggle="dropdown">
 							<span class="caret"></span>
 						</button>{{scheduleActionsAvailable}}
 						<ul class="dropdown-menu" role="menu">
-							<li><a ng-click="scheduleActions.downloadiCal($event)" href="#"><i class="fa fa-calendar-o"></i> iCal</a></li>
-							<li ng-show="imageSupport"><a ng-click="scheduleActions.downloadImage($event)" href="#"><i class="fa fa-picture-o"></i> Image</a></li>
+							<li><a ng-click="scheduleActions.downloadiCal($event)" href="#"><i class="fa fa-fw fa-calendar-o"></i> iCal</a></li>
+							<li ng-show="imageSupport"><a ng-click="scheduleActions.downloadImage($event)" href="#"><i class="fa fa-fw fa-picture-o"></i> Image</a></li>
 						</ul>
 					</div>
 					<div class="btn-group">
 						<button type="button" class="btn btn-info dropdown-toggle btn-sm" data-toggle="dropdown">
 							<i class="fa fa-share"></i> Share to... <span class="caret"></span>
 						</button>
 						<ul class="dropdown-menu" role="menu">
-							<li><a ng-click="scheduleActions.shareToService($event, 'facebook', true)" href="#"><i class="fa fa-facebook"></i> Facebook</a></li>
-							<li><a ng-click="scheduleActions.shareToService($event, 'twitter', true)" href="#"><i class="fa fa-twitter"></i> Twitter</a></li>
-							<li><a ng-click="scheduleActions.shareToService($event, 'googlep', true)" href="#"><i class="fa fa-google-plus"></i> Google+</a></li>
+							<li><a ng-click="scheduleActions.shareToService($event, 'facebook', true)" href="#"><i class="fa fa-fw fa-facebook"></i> Facebook</a></li>
+							<li><a ng-click="scheduleActions.shareToService($event, 'twitter', true)" href="#"><i class="fa fa-fw fa-twitter"></i> Twitter</a></li>
+							<li><a ng-click="scheduleActions.shareToService($event, 'googlep', true)" href="#"><i class="fa fa-fw fa-google-plus"></i> Google+</a></li>
 							<li class="divider"></li>
-							<li><a ng-click="scheduleActions.shareToEmail($event)" href="#"><i class="fa fa-envelope"></i> Email</a></li>
-							<li><a ng-click="scheduleActions.shareToDirectLink($event)" href="#"><i class="fa fa-link"></i> Direct link</a></li>
+							<li><a ng-click="scheduleActions.shareToEmail($event)" href="#"><i class="fa fa-fw fa-envelope"></i> Email</a></li>
+							<li><a ng-click="scheduleActions.shareToDirectLink($event)" href="#"><i class="fa fa-fw fa-link"></i> Direct link</a></li>
 						</ul>
 					</div>
 				</div>
@@ -67,7 +67,7 @@ <h2 class="panel-title control-label pull-left smaller-sm">{{saveAction == "crea
 		</div>
 		<div class="schedule-cont">
 			<div class="schedule-track" ng-class="mobileTrackClass">
-<svg version="1.1" ng-attr-height="{{grid.opts.height}}" width="100%" xmlns="http://www.w3.org/2000/svg"><defs><pattern vector-effect="non-scaling-stroke" id="day" width="100%" x="0" height="40" patternUnits="userSpaceOnUse"><line vector-effect="non-scaling-stroke" x1="0" y1="19.5" x2="100%" y2="19.5" style="stroke:#bbb;stroke-width:1" /></pattern></defs><rect x="0" y="0" width="100%" height="100%" fill="#ffffff" /><g ng-attr-transform="{{grid.opts.pixelAlignment}}" font-family="Roboto" font-size="15"><g><text fill="#aaa" text-anchor="end" ng-repeat="hour in grid.hours track by $index" ng-attr-x="{{print?'41':'5%'}}" ng-attr-y="{{($index * 40) + 25}}">{{hour}}</text></g><g ng-repeat="day in grid.days"><text y="12" ng-attr-x="{{day.offset}}" ng-attr-width="{{grid.opts.daysWidth}}" fill="#aaa" ng-bind="day.name"></text><rect y="19" ng-attr-x="{{day.offset}}" ng-attr-width="{{grid.opts.daysWidth}}" ng-attr-height="{{grid.opts.daysHeight}}" fill="url(#day)" /></g><g svg-schedule-item class="item" ng-mouseenter="itemEnter($event)" ng-mouseleave="itemLeave($event)" ng-repeat="item in scheduleItems | orderBy:'-boundry.y'"><rect ng-attr-x="{{item.boundry.x}}" ng-attr-y="{{item.boundry.y}}" ng-attr-width="{{item.boundry.width}}" ng-attr-height="{{item.boundry.height}}" ng-attr-fill="{{item.color}}" fill-opacity=".8" /><rect ng-if="item.boundry.shorten != 0" ng-attr-x="{{item.boundry.x}}" ng-attr-y="{{item.boundry.shorten < 0 ?item.boundry.y : item.boundry.y + item.boundry.height - 2}}" ng-attr-width="{{item.boundry.width}}" height="2" fill="#ffff00" /><text svg-text-line="{{item.title}}" ng-attr-x="{{item.boundry.x}}" ng-attr-y="{{item.boundry.y + 16}}" transform="translate(3,0)" font-weight="bold" fill="white"></text><text ng-if="item.boundry.height > 32 && item.content.courseNum" svg-text-line="{{item.content.courseNum}}" ng-attr-x="{{item.boundry.x}}" ng-attr-y="{{item.boundry.y + 32}}" transform="translate(3,0)" fill="#fff"></text><text ng-if="item.boundry.height > 48 && item.content.instructor" svg-text-line="{{item.content.instructor}}" ng-attr-x="{{item.boundry.x}}" ng-attr-y="{{item.boundry.y + 48}}" transform="translate(3,0)" fill="#fff"></text><text ng-if="item.boundry.height > 64 && item.content.location" svg-text-line="{{item.content.location}}" ng-attr-x="{{item.boundry.x}}" ng-attr-y="{{item.boundry.y + 64}}" transform="translate(3,0)" fill="#fff"></text><g svg-text-content="item.content"></g></g></g></svg>
+<svg version="1.1" ng-attr-height="{{grid.opts.height}}" width="100%" xmlns="http://www.w3.org/2000/svg"><defs><pattern vector-effect="non-scaling-stroke" id="day" width="100%" x="0" height="40" patternUnits="userSpaceOnUse"><line vector-effect="non-scaling-stroke" x1="0" y1="19.5" x2="100%" y2="19.5" style="stroke:#bbb;stroke-width:1" /></pattern></defs><rect x="0" y="0" width="100%" height="100%" fill="#ffffff" /><g ng-attr-transform="{{grid.opts.pixelAlignment}}" font-family="Roboto" font-size="15"><g class="svg-schedule-hours"><text fill="#aaa" text-anchor="end" ng-repeat="hour in grid.hours track by $index" ng-attr-x="{{print?'41':'5%'}}" ng-attr-y="{{($index * 40) + 25}}">{{hour}}</text></g><g ng-repeat="day in grid.days"><text y="12" ng-attr-x="{{day.offset}}" ng-attr-width="{{grid.opts.daysWidth}}" fill="#aaa" ng-bind="day.name"></text><rect y="19" ng-attr-x="{{day.offset}}" ng-attr-width="{{grid.opts.daysWidth}}" ng-attr-height="{{grid.opts.daysHeight}}" fill="url(#day)" /></g><g svg-schedule-item class="item" ng-mouseenter="itemEnter($event)" ng-mouseleave="itemLeave($event)" ng-repeat="item in scheduleItems | orderBy:'-boundry.y'"><rect ng-attr-x="{{item.boundry.x}}" ng-attr-y="{{item.boundry.y}}" ng-attr-width="{{item.boundry.width}}" ng-attr-height="{{item.boundry.height}}" ng-attr-fill="{{item.color}}" fill-opacity=".8" /><rect ng-if="item.boundry.shorten != 0" ng-attr-x="{{item.boundry.x}}" ng-attr-y="{{item.boundry.shorten < 0 ?item.boundry.y : item.boundry.y + item.boundry.height - 2}}" ng-attr-width="{{item.boundry.width}}" height="2" fill="#ffff00" /><text svg-text-line="{{item.title}}" ng-attr-x="{{item.boundry.x}}" ng-attr-y="{{item.boundry.y + 16}}" transform="translate(3,0)" font-weight="bold" fill="white"></text><text ng-if="item.boundry.height > 32 && item.content.courseNum" svg-text-line="{{item.content.courseNum}}" ng-attr-x="{{item.boundry.x}}" ng-attr-y="{{item.boundry.y + 32}}" transform="translate(3,0)" fill="#fff"></text><text ng-if="item.boundry.height > 48 && item.content.instructor" svg-text-line="{{item.content.instructor}}" ng-attr-x="{{item.boundry.x}}" ng-attr-y="{{item.boundry.y + 48}}" transform="translate(3,0)" fill="#fff"></text><text ng-if="item.boundry.height > 64 && item.content.location" svg-text-line="{{item.content.location}}" ng-attr-x="{{item.boundry.x}}" ng-attr-y="{{item.boundry.y + 64}}" transform="translate(3,0)" fill="#fff"></text><g svg-text-content="item.content"></g></g></g></svg>
 			</div>
 		</div>
 		<div ng-if="hiddenCourses.length > 0" class="row">
diff --git a/assets/src/modules/sm/Search/templates/search.html b/assets/src/modules/sm/Search/templates/search.html
@@ -186,7 +186,7 @@ <h2 class="panel-title control-label pull-left">Search Courses</h2>
 								<li class="list-group-item course-info">
 									<div class="row">
 										<div class="col-sm-8">
-											<h4 class="list-group-item-heading">{{($index + 1) + (searchPagination.currentPage*searchPagination.pageSize)}}. {{section.courseNum}}</h4>
+											<h4 class="list-group-item-heading"><span course-detail-popover="section.id">{{($index + 1) + (searchPagination.currentPage*searchPagination.pageSize)}}. {{section.courseNum}}</span></h4>
 											<small>{{section.title}}</small>
 											<p class="list-group-item-text label-line ">
 												<span class="label label-default" ng-bind-html="section.instructor | RMPUrl"></span>
diff --git a/index.php b/index.php
@@ -93,15 +93,17 @@
 				<div ui-view autoscroll="false"></div>
 			</div>
 			<footer class="main default">
-                <div class="csh"><a target="_blank" href="http://www.csh.rit.edu/"><img src="<?=$ASSETROOTADDRESS?>img/csh.png" alt="CSH" /></a></div>
-				Version: <?=$APP_VERSION?> | <a ui-sref="help">Help</a> | <a href="/status">Status</a> | <a target="_blank" href="https://github.com/ComputerScienceHouse/schedulemaker/issues">Report Issues</a>
-				<div>
-                    Development v3: Ben Grawi (bgrawi at csh.rit.edu)<br>
-					Development v2: Ben Russell (benrr101 at csh.rit.edu),<br>
-                    Idea: John Resig (phytar at csh.rit.edu)<br>
-					Hosting: <a href="http://www.csh.rit.edu/">Computer Science House</a><br>
+				<div class="container">
+					<div class="csh"><a target="_blank" href="http://www.csh.rit.edu/"><img src="<?=$ASSETROOTADDRESS?>img/csh.png" alt="CSH" /></a></div>
+					Version: <?=$APP_VERSION?> | <a ui-sref="help">Help</a> | <a href="/status">Status</a> | <a target="_blank" href="https://github.com/ComputerScienceHouse/schedulemaker/issues">Report Issues</a>
+					<div>
+						Development v3: Ben Grawi (bgrawi at csh.rit.edu)<br>
+						Development v2: Ben Russell (benrr101 at csh.rit.edu),<br>
+						Idea: John Resig (phytar at csh.rit.edu)<br>
+						Hosting: <a href="http://www.csh.rit.edu/">Computer Science House</a><br>
+					</div>
 				</div>
-			</div>
+			</footer>
 			<footer class="main print">
 				Made Using <a href='<?= $HTTPROOTADDRESS ?>'>CSH ScheduleMaker</a>
 				<a href="http://www.csh.rit.edu/"><img height="25" src="/img/csh_print.png"></a>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "schedulemaker",
-  "version": "3.0.12",
+  "version": "3.0.13",
   "private": true,
   "description": "A course database lookup tool and schedule building web application for use at Rochester Institute of Technology.",
   "main": "index.php",

Original file line number	Diff line number	Diff line change
`@@ -106,6 +106,7 @@ body.print footer.main.default {`
`106`	`106`
`107`	`107`	`body.default header.main {`
`108`	`108`	`display: block;`
	`109`	`+ transform: translateZ(0);`
`109`	`110`	`}`
`110`	`111`
`111`	`112`	`body.print header.main {`
`@@ -145,7 +146,7 @@ body.print #container {`
`145`	`146`
`146`	`147`	`footer.main.default {`
`147`	`148`	`position: relative;`
`148`		`- padding:20px;`
	`149`	`+ padding:20px 0;`
`149`	`150`	`background-color:#2C3E50;`
`150`	`151`	`color:#ccc;`
`151`	`152`	`}`
`@@ -616,10 +617,12 @@ svg g.item:hover rect {`
`616`	`617`	`overflow-y: auto;`
`617`	`618`	`height: 350px;`
`618`	`619`	`height: calc(100% - 124px);`
	`620`	`+ min-height: 100px;`
`619`	`621`	`}`
`620`	`622`
`621`	`623`	`.course-cart {`
`622`	`624`	`height: calc(100% - 20px);`
	`625`	`+ min-height: 230px;`
`623`	`626`	`}`
`624`	`627`
`625`	`628`	`.pinned-sizer {`
`@@ -662,6 +665,11 @@ svg g.item:hover rect {`
`662`	`665`	`margin-bottom: 0 !important;`
`663`	`666`	`}`
`664`	`667`	`}`
	`668`	`+@media screen and (min-width:767px) and (max-width:1020px) {`
	`669`	`+ svg g.svg-schedule-hours {`
	`670`	`+ transform: translateX(7px);`
	`671`	`+ }`
	`672`	`+}`
`665`	`673`
`666`	`674`	`/* ANIMATIONS */`
`667`	`675`	`@media screen and (min-width:767px) {`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "schedulemaker",`
`3`		`- "version": "3.0.12",`
	`3`	`+ "version": "3.0.13",`
`4`	`4`	`"private": true,`
`5`	`5`	`"description": "A course database lookup tool and schedule building web application for use at Rochester Institute of Technology.",`
`6`	`6`	`"main": "index.php",`