Skip to content

Commit 0f07c24

Browse files
bgrawibgrawi
committed
Various UI updates and improvements
1 parent 079ccaa commit 0f07c24

File tree

11 files changed

+143
-54
lines changed

11 files changed

+143
-54
lines changed

‎assets/src/modules/sm/App/controllers/AppController.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ angular.module('sm').controller("AppController", function($scope, localStorage,
2323
$scope.state.displayOptions = {
2424
currentPage: 0,
2525
pageSize: 3,
26-
fullscreen: false
26+
fullscreen: ''
2727
};
2828

2929
$scope.state.requestOptions = {

‎assets/src/modules/sm/App/directives/navCloseOnMobileDirective.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
angular.module('sm').directive("navCloseOnMobile", function() {
2+
return {
3+
restrict: 'A',
4+
link: function(scope, elm) {
5+
var nav = $(elm);
6+
$(elm).find('li').click(function() {
7+
$('.navbar-collapse.in').collapse('hide');
8+
});
9+
}
10+
};
11+
});

‎assets/src/modules/sm/App/styles/global.css‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -392,6 +392,12 @@ select.ng-invalid {
392392
display: inline-block;
393393
}
394394

395+
.center-sm {
396+
display: block;
397+
text-align: center;
398+
float: none !important;
399+
}
400+
395401
.block-sm {
396402
display: block;
397403
}
@@ -474,7 +480,12 @@ span[professor-lookup] {
474480
vertical-align:top;
475481
float:none;
476482
}
477-
483+
.course-cart-logo {
484+
font-size: 30px;
485+
display: inline-block;
486+
padding-right: 10px;
487+
padding-top: 4px;
488+
}
478489
.course-cart-item {
479490
border-style: solid;
480491
border-color: #ffffff;
@@ -593,12 +604,25 @@ svg g.item:hover rect {
593604

594605
@media screen and (max-width:767px) {
595606
.schedule-cont {
596-
overflow-x: scroll;
607+
overflow-x: auto;
597608
-webkit-overflow-scrolling: touch;
598609
}
599610
.schedule-track {
600611
width:1000px;
601612
}
613+
.schedule-track.mobileWeek {
614+
width: 100%;
615+
overflow:hidden;
616+
}
617+
.schedule-track.mobileWeek svg {
618+
width: 1000px;
619+
transform: scale(.25);
620+
position: relative;
621+
left: -366px;
622+
margin-bottom: -400px;
623+
margin-right:-800px;
624+
top: -210px;
625+
}
602626
.course-cart-item {
603627
border-left-width: 0px;
604628
border-top-width: 3px;

‎assets/src/modules/sm/App/templates/cart.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<h2 class="panel-title clearfix">
55
<div class="row form-horizontal hidden-sm hidden-xs">
66
<div class="col-md-8">
7-
<h2 class="panel-title control-label pull-left">Course Cart</h2>
7+
<div class="pull-left"><i class="fa fa-shopping-cart course-cart-logo"></i></div><h2 class="panel-title control-label pull-left">Course Cart</h2>
88
</div>
99
<div class="col-md-4">
1010
<button type="button" class="btn btn-danger pull-right" ng-click="courseCart.selection.all.unselect()" ng-disabled="courseCart.count.all.selectedSections() == 0"><i class="fa fa-minus"></i> <i class="fa fa-shopping-cart"></i> All</button>

‎assets/src/modules/sm/Browse/templates/browse.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,27 @@ <h4 class="list-group-item-heading">{{$index + 1}}. {{course | courseNum}}-{{sec
111111
</div>
112112
</div>
113113
</div>
114+
<div class="visible-md visible-lg">
115+
<div class="btn-group">
116+
<button type="button" class="btn btn-lg btn-danger pull-left btn-xs-block dropdown-toggle" data-toggle="dropdown">
117+
<i class="fa fa-times"></i> Reset... <span class="caret"></span>
118+
</button>
119+
<ul class="dropdown-menu" role="menu">
120+
<li><a ng-click="resetState()" href="#">Saved Session</a></li>
121+
</ul>
122+
</div>
123+
</div>
124+
<div class="visible-xs visible-sm center">
125+
<div class="btn-group">
126+
<button type="button" class="btn btn-lg btn-danger dropdown-toggle" data-toggle="dropdown">
127+
<i class="fa fa-times"></i> Reset... <span class="caret"></span>
128+
</button>
129+
<ul class="dropdown-menu" role="menu">
130+
<li><a ng-click="resetState()" href="#">Saved Session</a></li>
131+
</ul>
132+
</div>
133+
</div>
134+
<div class="vert-spacer-static-md"></div>
114135
</div>
115136
<div class="col-md-4">
116137
<div class="pinned-sizer"></div>

‎assets/src/modules/sm/Generate/controllers/GenerateController.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -221,6 +221,11 @@ angular.module('sm').controller("GenerateController", function($scope, globalKbd
221221
}
222222

223223
$scope.resetGenerate = function() {
224+
$scope.state.courses = $scope.state.courses.filter(function(course) {
225+
return !course.fromSelect;
226+
});
224227

228+
$scope.state.nonCourses.length = 0;
229+
$scope.state.noCourses.length = 0;
225230
};
226231
});

‎assets/src/modules/sm/Generate/templates/generate.html‎

Lines changed: 43 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@
44
<div class="panel panel-default form-horizontal" ng-controller="GenerateScheduleCoursesController">
55
<div class="panel-heading">
66
<div class="row form-horizontal">
7-
<div class="col-sm-4">
7+
<div class="col-sm-4 col-xs-6">
88
<h2 class="panel-title control-label pull-left">Select Courses</h2>
99
</div>
10-
<div class="col-sm-8">
10+
<div class="col-sm-8 col-xs-6">
1111
<div class="row">
12-
<label class="col-sm-6 control-label" for="term">Term:</label>
12+
<label class="col-sm-6 control-label hidden-xs" for="term">Term:</label>
1313
<div class="col-sm-6">
1414
<div select-term></div>
1515
</div>
@@ -150,26 +150,28 @@ <h2 class="panel-title">Times You Don't Want Classes</h2>
150150
</div>
151151
</div>
152152
</div>
153-
<button type="button" class="pull-right-md btn-lg btn btn-primary block-sm" loading-button="generationStatus" loading-text="Generating..." ng-click="generateSchedules()" title="Shortcut: Ctrl + Enter"> Show Matching Schedules <i class="fa fa-chevron-right"></i></button>
153+
<div class="center-sm">
154+
<button type="button" class="pull-right-md btn-lg btn btn-primary block-sm" loading-button="generationStatus" loading-text="Generating..." ng-click="generateSchedules()" title="Shortcut: Ctrl + Enter"> Show Matching Schedules <i class="fa fa-chevron-right"></i></button>
155+
</div>
154156
<div class="vert-spacer-static-md visible-xs visible-sm"></div>
155157
<div class="visible-md visible-lg">
156158
<div class="btn-group">
157159
<button type="button" class="btn btn-lg btn-danger pull-left btn-xs-block dropdown-toggle" data-toggle="dropdown">
158160
<i class="fa fa-times"></i> Reset... <span class="caret"></span>
159161
</button>
160162
<ul class="dropdown-menu" role="menu">
161-
<!-- <li><a ng-click="resetGenerate()" href="#">Current Form Fields</a></li> -->
163+
<li><a ng-click="initSearch()" href="#">Current Form Fields</a></li>
162164
<li><a ng-click="resetState()" href="#">Saved Session</a></li>
163165
</ul>
164166
</div>
165167
</div>
166-
<div class="visible-xs visible-sm">
168+
<div class="visible-xs visible-sm center">
167169
<div class="btn-group">
168-
<button type="button" class="btn btn-lg btn-danger pull-left-md dropdown-toggle" data-toggle="dropdown">
170+
<button type="button" class="btn btn-lg btn-danger dropdown-toggle" data-toggle="dropdown">
169171
<i class="fa fa-times"></i> Reset... <span class="caret"></span>
170172
</button>
171173
<ul class="dropdown-menu" role="menu">
172-
<!-- <li><a ng-click="resetGenerate()" href="#">Current Form Fields</a></li> -->
174+
<li><a ng-click="initSearch()" href="#">Current Form Fields</a></li>
173175
<li><a ng-click="resetState()" href="#">Saved Session</a></li>
174176
</ul>
175177
</div>
@@ -189,7 +191,7 @@ <h2 class="panel-title">Times You Don't Want Classes</h2>
189191
</div>
190192
</div>
191193
</form>
192-
<div id="master_schedule_results" ng-show="state.schedules.length > 0" ng-init="showOptions = true">
194+
<div id="master_schedule_results" ng-show="state.schedules.length > 0" ng-init="showOptions = true; mobileTrackClass = ''">
193195
<div class="container">
194196
<div class="visible-xs visible-sm form-group">
195197
<button class="btn btn-block btn-primary" ng-click="showOptions = !showOptions" type="button">
@@ -202,36 +204,26 @@ <h2 class="panel-title">Times You Don't Want Classes</h2>
202204
<div class="panel-body">
203205
<div class="row form-inline">
204206
<div class="col-xs-12">
205-
<div class="form-group">
206-
<button class="hidden-xs hidden-sm btn btn-primary" ng-click="showDisplayOptions = !showDisplayOptions" type="button">
207-
<i class="fa" ng-class="{'fa-chevron-down':!showDisplayOptions,'fa-chevron-up':showDisplayOptions}"></i>
208-
</button>
209-
</div>
210207
<div class="form-group">&nbsp;Display from&nbsp;</div>
211-
<div class="form-group">
208+
<div class="form-group inline-sm">
212209
<select id="options-startTime" ng-change="ensureCorrectEndTime()" class="form-control" ng-model="state.drawOptions.startTime" ng-options="key as ui.optionLists.times.values[key] for key in ui.optionLists.times.keys"></select>
213210
</div>
214-
<div class="form-group">&nbsp;to&nbsp;</div>
215-
<div class="form-group">
211+
<div class="form-group inline-sm">&nbsp;to&nbsp;</div>
212+
<div class="form-group inline-sm">
216213
<select id="options-endTime" class="form-control" ng-model="state.drawOptions.endTime" ng-options="key as ui.optionLists.times.values[key] for key in ui.optionLists.times.keys | startFrom: ui.optionLists.times.keys.indexOf(state.drawOptions.startTime) + 1"></select>
217214
</div>
218-
<div class="form-group">&nbsp;and from&nbsp;</div>
219-
<div class="form-group">
215+
<div class="form-group center-sm">&nbsp;and from&nbsp;</div>
216+
<div class="form-group inline-sm">
220217
<select id="options-startDay" ng-change="ensureCorrectEndDay()" class="form-control" ng-model="state.drawOptions.startDay" ng-options="ui.optionLists.days.indexOf(value) as value for (key, value) in ui.optionLists.days"></select>
221218
</div>
222-
<div class="form-group">&nbsp;to&nbsp;</div>
223-
<div class="form-group">
219+
<div class="form-group inline-sm">&nbsp;to&nbsp;</div>
220+
<div class="form-group inline-sm">
224221
<select id="options-endDay" class="form-control" ng-model="state.drawOptions.endDay" ng-options="ui.optionLists.days.indexOf(value) as value for (key, value) in ui.optionLists.days | startFrom: state.drawOptions.startDay"></select>
225222
</div>
226-
<div class="form-group pull-right" pagination-controls="state.displayOptions" pagination-length="state.schedules.length"></div>
223+
<div class="form-group pull-right center-sm" pagination-controls="state.displayOptions" pagination-length="state.schedules.length"></div>
227224
</div>
228225
</div>
229-
<div class="visible-xs visible-sm">
230-
<button class="btn btn-block btn-primary" ng-click="showDisplayOptions = !showDisplayOptions" type="button">
231-
<i class="fa" ng-class="{'fa-chevron-down':!showDisplayOptions,'fa-chevron-up':showDisplayOptions}"></i> Advanced Options
232-
</button>
233-
</div>
234-
<div ng-show="showDisplayOptions" ng-init="showDisplayOptions = false">
226+
<div class="clearfix">
235227
<div class="vert-spacer-static-md"></div>
236228
<div class="row form-horizontal">
237229
<div class="col-md-4">
@@ -249,10 +241,10 @@ <h2 class="panel-title">Times You Don't Want Classes</h2>
249241
<div class="form-group hidden-xs">
250242
<label for="options-fullscreen" class="col-sm-4 control-label">Width:</label>
251243
<div class="col-sm-8">
252-
<div class="checkbox">
253-
<label> <input id="options-fullscreen" type="checkbox" ng-model="state.displayOptions.fullscreen"> Fullscreen
254-
</label>
255-
</div>
244+
<select id="displayOptions-fullscreen" class="form-control" ng-model="state.displayOptions.fullscreen">
245+
<option value="">Default</option>
246+
<option value="true">Fullscreen</option>
247+
</select>
256248
</div>
257249
</div>
258250
</div>
@@ -278,8 +270,25 @@ <h2 class="panel-title">Times You Don't Want Classes</h2>
278270
</div>
279271
</div>
280272
</div>
281-
<div ng-class="{container: !state.displayOptions.fullscreen}">
282-
<div ng-class="{'col-sm-12': state.displayOptions.fullscreen}">
273+
<div class="hidden-md hidden-lg container">
274+
<div class="panel panel-default">
275+
<div class="panel-heading">
276+
<h3 class="panel-title">Mobile Display</h3>
277+
</div>
278+
<div class="panel-body">
279+
<div class="row">
280+
<div class="col-xs-6">
281+
<button type="button" ng-click="mobileTrackClass = ''" ng-class="{active: mobileTrackClass != 'mobileWeek'}" class="btn btn-primary btn-block active col-xs-6">Day</button>
282+
</div>
283+
<div class="col-xs-6">
284+
<button type="button" ng-click="mobileTrackClass = 'mobileWeek'" ng-class="{active: mobileTrackClass == 'mobileWeek'}" class="btn btn-primary btn-block col-xs-6">Week</button>
285+
</div>
286+
</div>
287+
</div>
288+
</div>
289+
</div>
290+
<div ng-class="{container: state.displayOptions.fullscreen != 'true'}">
291+
<div ng-class="{'col-sm-12': state.displayOptions.fullscreen == 'true'}">
283292
<div class="row" ng-repeat="schedule in state.schedules | startFrom:state.displayOptions.currentPage*state.displayOptions.pageSize | limitTo:state.displayOptions.pageSize">
284293
<div class="col-md-12" schedule></div>
285294
</div>

‎assets/src/modules/sm/Schedule/directives/scheduleDirective.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -223,14 +223,19 @@ angular.module('sm').directive('schedule', function($timeout, $filter) {
223223

224224

225225
// Fix the pixel issues after DOM updates (not on Chrome)
226-
if(typeof window.chrome == 'undefined') {
227226
$timeout(function() {
228227
var offset = elm.find("svg").offset(),
229228
vert = 1 - parseFloat('0.'+('' + offset.top).split('.')[1]);
230229
horz = 1 - parseFloat('0.'+('' + offset.left).split('.')[1]);
231230
scope.grid.opts.pixelAlignment ='translate('+horz+','+vert+')';
231+
var svg = $(elm).find('svg');
232+
svg.hide();
233+
setTimeout(function() {
234+
svg.show();
235+
236+
},0);
232237
},10,true);
233-
}
238+
234239
}
235240
});
236241
}

‎assets/src/modules/sm/Schedule/templates/scheduleitem.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ <h2 class="panel-title control-label pull-left smaller-sm">{{saveAction == "crea
6666
<div ng-bind-html="notification"></div>
6767
</div>
6868
<div class="schedule-cont">
69-
<div class="schedule-track">
69+
<div class="schedule-track" ng-class="mobileTrackClass">
7070
<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>
7171
</div>
7272
</div>

‎assets/src/modules/sm/Search/templates/search.html‎

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<h2 class="panel-title control-label pull-left">Search Courses</h2>
1010
</div>
1111
<div class="col-md-8">
12-
<div class="control-group">
12+
<div class="row control-group">
1313
<label class="col-sm-6 control-label" for="term">Term:</label>
1414
<div class="col-sm-6">
1515
<div select-term></div>
@@ -118,16 +118,30 @@ <h2 class="panel-title control-label pull-left">Search Courses</h2>
118118
</div>
119119
</form>
120120
<div class="vert-spacer-static-md"></div>
121-
<div class="btn-group">
122-
<button type="button" class="btn btn-lg btn-danger pull-left btn-xs-block dropdown-toggle" data-toggle="dropdown">
123-
<i class="fa fa-times"></i> Reset... <span class="caret"></span>
124-
</button>
125-
<ul class="dropdown-menu" role="menu">
126-
<!-- <li><a ng-click="resetGenerate()" href="#">Current Form Fields</a></li> -->
127-
<li><a ng-click="resetState()" href="#">Saved Session</a></li>
128-
</ul>
129-
</div>
130-
<button type="button" class="pull-right btn-lg btn btn-primary btn-xs-block" loading-button="searchStatus" loading-text="Searching..." ng-click="findMatches()" title="Shortcut: Ctrl + Enter"> Search for Courses <i class="fa fa-search fa-flip-horizontal"></i></button>
121+
<button type="button" class="pull-right-md btn-lg btn btn-primary block-sm" loading-button="searchStatus" loading-text="Searching..." ng-click="findMatches()" title="Shortcut: Ctrl + Enter"> Search for Courses <i class="fa fa-chevron-right"></i></button>
122+
<div class="vert-spacer-static-md visible-xs visible-sm"></div>
123+
<div class="visible-md visible-lg">
124+
<div class="btn-group">
125+
<button type="button" class="btn btn-lg btn-danger pull-left btn-xs-block dropdown-toggle" data-toggle="dropdown">
126+
<i class="fa fa-times"></i> Reset... <span class="caret"></span>
127+
</button>
128+
<ul class="dropdown-menu" role="menu">
129+
<li><a ng-click="initSearch()" href="#">Current Form Fields</a></li>
130+
<li><a ng-click="resetState()" href="#">Saved Session</a></li>
131+
</ul>
132+
</div>
133+
</div>
134+
<div class="visible-xs visible-sm center">
135+
<div class="btn-group">
136+
<button type="button" class="btn btn-lg btn-danger dropdown-toggle" data-toggle="dropdown">
137+
<i class="fa fa-times"></i> Reset... <span class="caret"></span>
138+
</button>
139+
<ul class="dropdown-menu" role="menu">
140+
<li><a ng-click="initSearch()" href="#">Current Form Fields</a></li>
141+
<li><a ng-click="resetState()" href="#">Saved Session</a></li>
142+
</ul>
143+
</div>
144+
</div>
131145
<div class="vert-spacer-static-md"></div>
132146
<div ng-show="!!resultError">
133147
<div class="alert alert-danger">

0 commit comments

Comments
 (0)