New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Materialize error pages and announcement modal #317

Merged
merged 6 commits into from Sep 26, 2016
@@ -48,7 +48,9 @@
margin:15px 0;
}
button {
margin-top:10px;
margin-top: 16px;
color: @white;
background-color: @color1;
}
}
portal-header md-toolbar .md-toolbar-tools bucky-announcement {
@@ -93,37 +95,6 @@ portal-header md-toolbar .md-toolbar-tools bucky-announcement {
}
}
bucky-announcement .popover {
padding: 0;
position: absolute;
top: 10px !important;
width: 210px !important;
&.left {
margin-left: 0;
}
.arrow {
top: 10% !important;
right: -11px !important;
}
.popover-content {
padding: 9px 12px;
a {
color: @link-color;
&:hover {
color: darken(@link-color, 15%);
}
}
li, p, span {
color: @black;
}
li div a {
font-size: smaller;
margin-bottom: 8px;
&:not(.md-button):not(.btn):not(.launch-app-button) {
&:hover {
text-decoration: underline;
}
}
}
}
.md-dialog-container {
z-index: 101;
}
@@ -5,8 +5,8 @@ define(['angular','require'], function(angular, require) {
app.controller('PortalFeaturesController', ['miscService', '$localStorage', '$sessionStorage', '$scope', '$document', 'FEATURES',
'$modal', 'portalFeaturesService', '$sanitize', 'MISC_URLS',
function(miscService, $localStorage, $sessionStorage, $scope, $document, FEATURES, $modal, portalFeaturesService, $sanitize, MISC_URLS) {
'$mdDialog', 'portalFeaturesService', '$sanitize', 'MISC_URLS',
function(miscService, $localStorage, $sessionStorage, $scope, $document, FEATURES, $mdDialog, portalFeaturesService, $sanitize, MISC_URLS) {
$scope.features = [];
$scope.MISC_URLS = MISC_URLS;
if (FEATURES.enabled) {
@@ -20,8 +20,8 @@ define(['angular','require'], function(angular, require) {
}]);
app.controller('PortalPopupController', ['$localStorage', '$sessionStorage', '$rootScope', '$scope', '$document', 'FEATURES',
'filterFilter', '$filter', '$modal', 'portalFeaturesService', 'miscService', '$sanitize',
function($localStorage, $sessionStorage, $rootScope, $scope, $document, FEATURES, filterFilter, $filter, $modal, portalFeaturesService, miscService, $sanitize) {
'filterFilter', '$filter', '$mdDialog', 'portalFeaturesService', 'miscService', '$sanitize',
function($localStorage, $sessionStorage, $rootScope, $scope, $document, FEATURES, filterFilter, $filter, $mdDialog, portalFeaturesService, miscService, $sanitize) {
//scope functions ---------------------------------------------------------
//need this due to isolated scope
@@ -74,21 +74,27 @@ define(['angular','require'], function(angular, require) {
$scope.latestFeature = orderedPopups[0];
var displayPopup = function() {
var modalInstance = $modal.open({
animation: $scope.animationsEnabled,
templateUrl: require.toUrl('./partials/features-modal-template.html'),
size: 'lg',
scope: $scope
});
modalInstance.result.then(function(data){
//resolves upon closing of modal
miscService.pushGAEvent('popup','closed', orderedPopups[0].id);
$mdDialog.show({
templateUrl: require.toUrl('./partials/features-dialog-template.html'),
parent: angular.element(document).find('div.my-uw')[0],
clickOutsideToClose: true,
openFrom: 'left',
closeTo: 'right',
scope: $scope,
controller: function DialogController($scope, $mdDialog) {
$scope.closeDialog = function(action) {
$mdDialog.hide(action);
};
}
})
.then(function(action) {
// if dialog is closed by clicking "continue" button
miscService.pushGAEvent('popup', action, orderedPopups[0].id);
portalFeaturesService.markPopupSeen(orderedPopups[0].id);
getPopups();
}, function(data){
// rejects upon dismissing of modal
miscService.pushGAEvent('popup','dismissed', orderedPopups[0].id);
}, function() {
// if popup is closed by clicking outside or pressing escape key
miscService.pushGAEvent('popup', 'dismissed', orderedPopups[0].id);
portalFeaturesService.markPopupSeen(orderedPopups[0].id);
getPopups();
});
@@ -99,20 +105,18 @@ define(['angular','require'], function(angular, require) {
}
};
var setMascot = function(){
if($rootScope.portal && $rootScope.portal.theme) {
$scope.buckyImg = $rootScope.portal.theme.mascotImg || 'img/robot-taco.gif';
} else {
$scope.buckyImg = 'img/robot-taco.gif';
}
$rootScope.$watch('portal.theme', function(newVal, oldVal) {
if(newVal === oldVal) {
return;
} else {
$scope.buckyImg = newVal.mascotImg || 'img/robot-taco.gif';
}
});
};
var setMascot = function() {
if($rootScope.portal && $rootScope.portal.theme) {
$scope.buckyImg = $rootScope.portal.theme.mascotImg || 'img/robot-taco.gif';
} else {
$scope.buckyImg = 'img/robot-taco.gif';
}
$rootScope.$watch('portal.theme', function(newVal, oldVal) {
if (newVal !== oldVal) {
$scope.buckyImg = newVal.mascotImg || 'img/robot-taco.gif';
}
});
};
@@ -0,0 +1,27 @@
<md-dialog aria-label="new features">
<md-toolbar class="md-accent">
<div class="md-toolbar-tools">
<h1>{{ latestFeature.title }}</h1>
<span flex></span>
<md-button class="md-icon-button" ng-click="closeDialog('dismissed')" aria-label="close features dialog">

This comment has been minimized.

@apetro

apetro Sep 26, 2016

Member

Good attention to aria-label.

<md-icon>close</md-icon>
</md-button>
</div>
</md-toolbar>
<md-dialog-content>
<div class="md-dialog-content features-popup" layout="column" layout-align="center center">
<img ng-src="{{ latestFeature.img }}" aria-describedby="featureContent" hide-xs>
<p id="featureContent" class="sr-only" hide-xs>{{ latestFeature.description }}</p>
<p hide-gt-xs>{{ latestFeature.description }}</p>
</div>
</md-dialog-content>
<md-dialog-actions>
<md-button class="md-default"
ng-if="latestFeature.learnMoreURL"
ng-click="closeDialog('closed')"
ng-href="{{ latestFeature.learnMoreURL }}">
Learn more
</md-button>
<md-button class="md-primary" ng-click="closeDialog('closed')">{{ latestFeature.popup.buttonText }}</md-button>
</md-dialog-actions>
</md-dialog>

This file was deleted.

Oops, something went wrong.
@@ -49,7 +49,7 @@ define(['angular', 'require'], function(angular, require) {
app.directive('featuresModalTemplate', function() {
return {
restrict : 'E',
templateUrl : require.toUrl('./partials/features-modal-template.html')
templateUrl : require.toUrl('./partials/features-dialog-template.html')
}
});
@@ -1,11 +1,13 @@
<frame-page app-title='{{NAMES.title}} - Access denied' white-background='true'>
<h2 class='center'>Sorry, you're not authorized to access this.</h2>
<p class='center'>
<i class='fa fa-exclamation-triangle fa-3x warning-color'></i>
<md-content layout-padding layout="column" layout-align="center center">
<h2 class="md-display-1">You are not allowed to access this content</h2>
<p>
<i class='fa fa-exclamation-triangle fa-3x warning-color'></i>
<br/>
<h4 class="md-subhead"><a href='{{MISC_URLS.myuwHome}}'>Back to the MyUW homepage</a></h4>
<h4 class="md-subhead">If you continue to see this error, contact the <a href='{{MISC_URLS.helpdeskURL}}' target='_blank'>DoIT Help Desk</a></h4>
<br/>
<h4 class='center'>If you're here by accident, head back to MyUW <a href='{{MISC_URLS.myuwHome}}'>homepage</a>.</h4>
<h4 class='center'>For help with authorization, contact the <a href='{{MISC_URLS.helpdeskURL}}' target='_blank'>DoIT Help Desk</a>.</h4>
<br/>
</p>
</p>
</md-content>
</frame-page>
@@ -1,10 +1,12 @@
<frame-page app-title='{{NAMES.title}} - File Not Found' white-background='true'>
<h2 class='center'>We're sorry, the path you are looking for does not exist.</h2>
<p class='center'>
<i class='fa fa-exclamation-triangle fa-3x warning-color'></i>
<br/>
<h4 class='center'>You can try to head back to the MyUW <a href='{{MISC_URLS.myuwHome}}'>homepage</a>.</h4>
<h4 class='center'>If you continue to see this error, contact the <a href='{{MISC_URLS.helpdeskURL}}' target='_blank'>DoIT Help Desk</a>.</h4>
<br/>
</p>
<md-content layout-padding layout="column" layout-align="center center">
<h2 class="md-display-1">The path you are looking for does not exist</h2>
<p>
<i class='fa fa-exclamation-triangle fa-3x warning-color'></i>
<br/>
<h4 class="md-subhead"><a href='{{MISC_URLS.myuwHome}}'>Back to the MyUW homepage</a></h4>
<h4 class="md-subhead">If you continue to see this error, contact the <a href='{{MISC_URLS.helpdeskURL}}' target='_blank'>DoIT Help Desk</a></h4>
<br/>
</p>
</md-content>
</frame-page>
@@ -1,11 +1,13 @@
<frame-page app-title='{{NAMES.title}} - Service Unavailable' white-background='true'>
<h2 class='center'>We're sorry, but there was a problem with your request.</h2>
<p class='center'>
<i class='fa fa-exclamation-triangle fa-3x warning-color'></i>
<br/>
<h4 class='center'>You can try to head back to the MyUW <a href='{{MISC_URLS.myuwHome}}'>homepage</a>.</h4>
<h4 class='center'>If you continue to see this error, contact the <a href='{{MISC_URLS.helpdeskURL}}' target='_blank'>DoIT Help Desk</a>.</h4>
<br/>
</p>
<md-content layout-padding layout="column" layout-align="center center">
<h2 class="md-display-1">There was a problem with your request</h2>
<p>
<i class='fa fa-exclamation-triangle fa-3x warning-color'></i>
<br/>
<h4 class="md-subhead"><a href='{{MISC_URLS.myuwHome}}'>Back to the MyUW homepage</a></h4>
<h4 class="md-subhead">If you continue to see this error, contact the <a href='{{MISC_URLS.helpdeskURL}}' target='_blank'>DoIT Help Desk</a></h4>
<br/>
</p>
</md-content>
</frame-page>
ProTip! Use n and p to navigate between commits in a pull request.