110swag / flashy-frontend

Download as
Browse Code ยป

Commit 9436dc71d2136f3db9667c5cbc8cb9af37bce0bd

Authored by Andrew Buss
1 parent 26c38d230f
Exists in master and in 1 other branch ef9f9dd363e92d55eb4d80d036193be39572172b

remove footer; move email onto FAQ page

Showing 4 changed files with 34 additions and 29 deletions Inline Diff

home.html View file @ 9436dc7
<!DOCTYPE html> 1 1 <!DOCTYPE html>
<html ng-app="flashy"> 2 2 <html ng-app="flashy">
<base href="/app/"> 3 3 <base href="/app/">
<head> 4 4 <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 5 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" 6 6 <link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.css"> 7 7 href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.css">
8 8
<link rel="stylesheet" href="styles/flashier.css"/> 9 9 <link rel="stylesheet" href="styles/flashier.css"/>
<link rel="stylesheet" href="styles/flashy.css"/> 10 10 <link rel="stylesheet" href="styles/flashy.css"/>
<link 11 11 <link
href='https://fonts.googleapis.com/css?family=Satisfy|Titillium+Web:400,200,200italic,300,600,700,900,700italic,600italic,400italic,300italic' 12 12 href='https://fonts.googleapis.com/css?family=Satisfy|Titillium+Web:400,200,200italic,300,600,700,900,700italic,600italic,400italic,300italic'
rel='stylesheet' type='text/css'> 13 13 rel='stylesheet' type='text/css'>
<title>Flashy</title> 14 14 <title>Flashy</title>
</head> 15 15 </head>
<body ng-controller="RootController"> 16 16 <body ng-controller="RootController">
<header> 17 17 <header>
<nav> 18 18 <nav>
<div class="nav-wrapper"> 19 19 <div class="nav-wrapper">
<a ng-show="UserService.isLoggedIn()" href="#" data-activates="mobile-demo" 20 20 <a ng-show="UserService.isLoggedIn()" href="#" data-activates="mobile-demo"
class="left button-collapse hide-on-med-and-up"><i 21 21 class="left button-collapse hide-on-med-and-up"><i
class="mdi-navigation-menu"></i></a> 22 22 class="mdi-navigation-menu"></i></a>
<!-- User's classes dropdown --> 23 23 <!-- User's classes dropdown -->
<ul id="classDropdown" class="dropdown-content"> 24 24 <ul id="classDropdown" class="dropdown-content">
<li ui-sref-active="active" ng-repeat="section in UserService.getUserData().sections"> 25 25 <li ui-sref-active="active" ng-repeat="section in UserService.getUserData().sections">
<a ui-sref="feed({sectionId:section.id})">{{section.short_name}}</a> 26 26 <a ui-sref="feed({sectionId:section.id})">{{section.short_name}}</a>
</li> 27 27 </li>
<li class="divider"></li> 28 28 <li class="divider"></li>
<li><a ui-sref="addclass">Add Class</a></li> 29 29 <li><a ui-sref="addclass">Add Class</a></li>
</ul> 30 30 </ul>
<ul ng-show="UserService.isLoggedIn()" class="left hide-on-small-and-down"> 31 31 <ul ng-show="UserService.isLoggedIn()" class="left hide-on-small-and-down">
<li><a style="font-size:20px; font-weight:700" class="dropdown-button ng-cloak hide-on-small-and-down" 32 32 <li><a style="font-size:20px; font-weight:700" class="dropdown-button ng-cloak hide-on-small-and-down"
href="#!" 33 33 href="#!"
data-activates="classDropdown">{{currentSection.id?currentSection.short_name:"Classes"}}<i 34 34 data-activates="classDropdown">{{currentSection.id?currentSection.short_name:"Classes"}}<i
class="mdi-navigation-arrow-drop-down right"></i></a></li> 35 35 class="mdi-navigation-arrow-drop-down right"></i></a></li>
<li ng-show="currentSection.id" ui-sref-active="active"><a ui-sref="feed({sectionId:currentSection.id})" 36 36 <li ng-show="currentSection.id" ui-sref-active="active"><a ui-sref="feed({sectionId:currentSection.id})"
class="tooltipped" 37 37 class="tooltipped"
data-position="bottom" 38 38 data-position="bottom"
data-delay="50" data-tooltip="Feed"><i 39 39 data-delay="50" data-tooltip="Feed"><i
class="mdi-action-view-module"></i></a></li> 40 40 class="mdi-action-view-module"></i></a></li>
<li ng-show="currentSection.id" ui-sref-active="active"><a ui-sref="deck({sectionId:currentSection.id})" 41 41 <li ng-show="currentSection.id" ui-sref-active="active"><a ui-sref="deck({sectionId:currentSection.id})"
class="tooltipped" 42 42 class="tooltipped"
data-position="bottom" 43 43 data-position="bottom"
data-delay="50" data-tooltip="Deck"><i 44 44 data-delay="50" data-tooltip="Deck"><i
class="mdi-action-view-carousel"></i></a></li> 45 45 class="mdi-action-view-carousel"></i></a></li>
<li ng-show="currentSection.id" ui-sref-active="active"><a ui-sref="cardlist({sectionId:currentSection.id})" 46 46 <li ng-show="currentSection.id" ui-sref-active="active"><a ui-sref="cardlist({sectionId:currentSection.id})"
class="tooltipped" 47 47 class="tooltipped"
data-position="bottom" 48 48 data-position="bottom"
data-delay="50" data-tooltip="Card List"><i 49 49 data-delay="50" data-tooltip="Card List"><i
class="mdi-action-view-list"></i></a></li> 50 50 class="mdi-action-view-list"></i></a></li>
</ul> 51 51 </ul>
<a href="#" class="brand-logo center">Flashy</a> 52 52 <a href="#" class="brand-logo center">Flashy</a>
53 53
<ul ng-show="UserService.isLoggedIn()" ng-cloak id="nav-mobile" class="right hide-on-small-and-down"> 54 54 <ul ng-show="UserService.isLoggedIn()" ng-cloak id="nav-mobile" class="right hide-on-small-and-down">
55 55
<li ui-sref-active="active"><a ui-sref="study" class="tooltipped" data-position="bottom" data-delay="50" 56 56 <li ui-sref-active="active"><a ui-sref="study" class="tooltipped" data-position="bottom" data-delay="50"
data-tooltip="Study"> 57 57 data-tooltip="Study">
<i class="tiny mdi-action-pageview"></i></a></li> 58 58 <i class="tiny mdi-action-pageview"></i></a></li>
59 59
<!-- Settings Dropdown --> 60 60 <!-- Settings Dropdown -->
<ul id="settingsDropdown" class="dropdown-content"> 61 61 <ul id="settingsDropdown" class="dropdown-content">
62 62
63 63
</ul> 64 64 </ul>
65 65
<li ui-sref-active="active"><a ui-sref="help"><i class="tiny mdi-action-help tooltipped" 66 66 <li ui-sref-active="active"><a ui-sref="help"><i class="tiny mdi-action-help tooltipped"
data-position="bottom" 67 67 data-position="bottom"
data-delay="50" data-tooltip="Help"></i></a></li> 68 68 data-delay="50" data-tooltip="Help"></i></a></li>
<li ui-sref-active="active"><a ui-sref="settings"><i data-position="bottom" data-delay="50" 69 69 <li ui-sref-active="active"><a ui-sref="settings"><i data-position="bottom" data-delay="50"
data-tooltip="Settings" 70 70 data-tooltip="Settings"
class="mdi-action-settings tooltipped"></i></a></li> 71 71 class="mdi-action-settings tooltipped"></i></a></li>
<li><a ui-sref="logout"><i data-position="bottom" data-delay="50" data-tooltip="Logout" 72 72 <li><a ui-sref="logout"><i data-position="bottom" data-delay="50" data-tooltip="Logout"
class="mdi-content-forward tooltipped"></i></a></li> 73 73 class="mdi-content-forward tooltipped"></i></a></li>
74 74
75 75
</ul> 76 76 </ul>
77 77
<!-- Slide-in side-nav for small screens --> 78 78 <!-- Slide-in side-nav for small screens -->
<ul ng-show="UserService.isLoggedIn()" class="side-nav" id="mobile-demo"> 79 79 <ul ng-show="UserService.isLoggedIn()" class="side-nav" id="mobile-demo">
<span ng-show="currentSection.id"> 80 80 <span ng-show="currentSection.id">
<li ui-sref-active="active"><a ui-sref="feed({sectionId:currentSection.id})" class="tooltipped"> 81 81 <li ui-sref-active="active"><a ui-sref="feed({sectionId:currentSection.id})" class="tooltipped">
<i class="mdi-action-view-module left"></i> 82 82 <i class="mdi-action-view-module left"></i>
Feed</a> 83 83 Feed</a>
</li> 84 84 </li>
<li ui-sref-active="active"><a ui-sref="deck({sectionId:currentSection.id})" class="tooltipped"> 85 85 <li ui-sref-active="active"><a ui-sref="deck({sectionId:currentSection.id})" class="tooltipped">
<i class="mdi-action-view-carousel left"> </i> 86 86 <i class="mdi-action-view-carousel left"> </i>
Deck 87 87 Deck
</a> 88 88 </a>
</li> 89 89 </li>
<li ui-sref-active="active"><a ui-sref="cardlist({sectionId:currentSection.id})" class="tooltipped"> 90 90 <li ui-sref-active="active"><a ui-sref="cardlist({sectionId:currentSection.id})" class="tooltipped">
<i class="mdi-action-view-list left"></i> 91 91 <i class="mdi-action-view-list left"></i>
Card List 92 92 Card List
</a> 93 93 </a>
</li> 94 94 </li>
<hr> 95 95 <hr>
</span> 96 96 </span>
<!-- Collapsible menu for all the User's classes --> 97 97 <!-- Collapsible menu for all the User's classes -->
<ul class="collapsible" data-collapsible="accordion"> 98 98 <ul class="collapsible" data-collapsible="accordion">
<li class="bold"> 99 99 <li class="bold">
<a class="collapsible-header black-text"> 100 100 <a class="collapsible-header black-text">
Classes 101 101 Classes
<i class="mdi-navigation-arrow-drop-down right"></i> 102 102 <i class="mdi-navigation-arrow-drop-down right"></i>
</a> 103 103 </a>
</li> 104 104 </li>
<div class="collapsible-body" style="display: block"> 105 105 <div class="collapsible-body" style="display: block">
<ul> 106 106 <ul>
<li ui-sref-active="active" ng-repeat="section in UserService.getUserData().sections"> 107 107 <li ui-sref-active="active" ng-repeat="section in UserService.getUserData().sections">
<a class="class bold" ui-sref="feed({sectionId:section.id})">{{section.short_name}}</a> 108 108 <a class="class bold" ui-sref="feed({sectionId:section.id})">{{section.short_name}}</a>
</li> 109 109 </li>
<hr> 110 110 <hr>
<li><a ui-sref="addclass"><i class="tiny mdi-content-add">Add Class</i></a></li> 111 111 <li><a ui-sref="addclass"><i class="tiny mdi-content-add">Add Class</i></a></li>
</ul> 112 112 </ul>
</div> 113 113 </div>
</ul> 114 114 </ul>
<li><a ui-sref="study">Study</a></li> 115 115 <li><a ui-sref="study">Study</a></li>
<li><a ui-sref="settings">Settings</a></li> 116 116 <li><a ui-sref="settings">Settings</a></li>
<li><a ui-sref="logout">Logout</a></li> 117 117 <li><a ui-sref="logout">Logout</a></li>
</ul> 118 118 </ul>
</div> 119 119 </div>
</nav> 120 120 </nav>
121 121
</header> 122 122 </header>
123 123
124 124
<!-- Menu Bar --> 125 125 <!-- Menu Bar -->
126 <main ui-view></main>
126 127
<div class="wrapper"> 127
128 128
<main ui-view></main> 129 129 <!--<footer class="page-footer">-->
130 <!--<div class="footer-copyright">-->
131 <!--<div class="container">-->
132 <!--&copy; 2015 Team Swag-->
133 <!--<a class="grey-text text-lighten-4 right" id="contact" href="mailto:halp@flashy.cards">Concerns? Contact us by-->
134 <!--email!</a>-->
135 <!--</div>-->
130 136
<div class="push"></div> 131 137 <!--</div>-->
</div> 132 138 <!--</footer>-->
133
134
<footer class="page-footer"> 135
<div class="footer-copyright"> 136
<div class="container"> 137
&copy; 2015 Team Swag 138
<a class="grey-text text-lighten-4 right" id="contact" href="mailto:halp@flashy.cards">Concerns? Contact us by 139
email!</a> 140
</div> 141
142
</div> 143
</footer> 144
145 139
</body> 146 140 </body>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script> 147 141 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.js"></script> 148 142 <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-cookies.js"></script> 149 143 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-cookies.js"></script>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> 150 144 <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="scripts/materialize.js"></script> 151 145 <script type="text/javascript" src="scripts/materialize.js"></script>
<script type="text/javascript" src="scripts/jquery.collapsible.js"></script> 152 146 <script type="text/javascript" src="scripts/jquery.collapsible.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.js"></script> 153 147 <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script> 154 148 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script> 155 149 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-resource.min.js"></script> 156 150 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-sanitize.js"></script> 157 151 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-sanitize.js"></script>
<script src="https://cdn.rawgit.com/gdi2290/angular-websocket/v1.0.9/angular-websocket.min.js"></script> 158 152 <script src="https://cdn.rawgit.com/gdi2290/angular-websocket/v1.0.9/angular-websocket.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script> 159 153 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script>
160 154
161 155
<script src="config.js"></script> 162 156 <script src="config.js"></script>
163 157
<!-- Controllers --> 164 158 <!-- Controllers -->
<script src="scripts/FeedController.js"></script> 165 159 <script src="scripts/FeedController.js"></script>
<script src="scripts/RootController.js"></script> 166 160 <script src="scripts/RootController.js"></script>
<script src="scripts/SettingsController.js"></script> 167 161 <script src="scripts/SettingsController.js"></script>
<script src="scripts/LoginController.js"></script> 168 162 <script src="scripts/LoginController.js"></script>
scripts/HelpController.js View file @ 9436dc7
angular.module('flashy.HelpController', ['ui.router']). 1 1 angular.module('flashy.HelpController', ['ui.router']).
2 2
controller('HelpController', ['$scope', '$state', '$http', '$timeout', 'UserService', 3 3 controller('HelpController', ['$scope', '$state', '$http', '$timeout', 'UserService',
function($scope, $state, $http, $timeout, UserService) { 4 4 function($scope, $state, $http, $timeout, UserService) {
$scope.toggleContent = function(event, index) { 5 5 $scope.toggleContent = function(event, index) {
console.log(event, index); 6 6 console.log(event, index);
7 7
if ($('#content-' + index).hasClass('open')) { // let's close it 8 8 if ($('#content-' + index).hasClass('open')) { // let's close it
// Note: 250 is duration (ms) of animation 9 9 // Note: 250 is duration (ms) of animation
$('#content-' + index).slideUp(250).removeClass('open'); 10 10 $('#content-' + index).slideUp(250).removeClass('open');
} else { // let'd open it 11 11 } else { // let'd open it
$('#content-' + index).slideDown(250).addClass('open'); 12 12 $('#content-' + index).slideDown(250).addClass('open');
} 13 13 }
14 14
// event.currentTarget 15 15 // event.currentTarget
}; 16 16 };
17 17
$scope.closeContent = function(event) { 18 18 $scope.closeContent = function(event) {
19 19
}; 20 20 };
21 21
// JSON OF FAQ ENTRIES 22 22 // JSON OF FAQ ENTRIES
$scope.entries = [ 23 23 $scope.entries = [
{ 24 24 {
icon: 'mdi-editor-insert-emoticon', 25 25 icon: 'mdi-editor-insert-emoticon',
question: 'What is Flashy?', 26 26 question: 'What is Flashy?',
answer: "<p>Flashy is a service for creating, sharing, and reviewing flashcards for your courses.</p><p>Flashy is optimized for contributing cards in real time during lecture to a shared live feed. Don't want to contribute cards? That's fine! By adding others' cards to your deck, you help identify high-quality cards which should remain at the top of the feed for others to choose.</p><p>Based on the principles of spaced repetition, Flashy also intelligently determines which cards you are most at risk of forgetting, based on your review history. Recieve push notifications on your Android device's Chrome browser without installing any other app, and we'll notify you when you have a few cards which need to be reviewed.</p>" 27 27 answer: '<p>Flashy is a service for creating, sharing, and reviewing flashcards for your courses.' +
28 '</p><p>Flashy is optimized for contributing cards in real time during lecture to a shared live' +
29 " feed. Don't want to contribute cards? That's fine! By adding others' cards to your deck, you" +
30 ' help identify high-quality cards which should remain at the top of the feed for others to choose.' +
31 '</p><p>Based on the principles of spaced repetition, Flashy also intelligently determines which' +
32 ' cards you are most at risk of forgetting, based on your review history. Recieve push ' +
33 "notifications on your Android device's Chrome browser without installing any other app," +
34 " and we'll notify you when you have a few cards which need to be reviewed.</p>"
}, 28 35 },
{ 29 36 {
icon: 'mdi-file-cloud-queue', 30 37 icon: 'mdi-file-cloud-queue',
question: 'Does Flashy work outside of UCSD?', 31 38 question: 'Does Flashy work outside of UCSD?',
answer: "To simplify development, Flashy was configured only for courses at UCSD. If you'd like Flashy for your school, please send us an email to let us know!" 32 39 answer: "To simplify development, Flashy was configured only for courses at UCSD. If you'd like Flashy for your school, please send us an email to let us know!"
}, 33 40 },
{ 34 41 {
icon: 'mdi-hardware-security', 35 42 icon: 'mdi-hardware-security',
question: 'How do registration and verification work?', 36 43 question: 'How do registration and verification work?',
answer: "An account is required to use Flashy. We store the cards you save to your deck with your account. When you register, you'll be able to use the site immediately, but you must verify ownership of your email address within 24 hours. After 24 hours have passed, you'll need to verify your address before continuing to use the site. Don't worry, your cards and deck won't be deleted." 37 44 answer: "An account is required to use Flashy. We store the cards you save to your deck with your account. When you register, you'll be able to use the site immediately, but you must verify ownership of your email address within 24 hours. After 24 hours have passed, you'll need to verify your address before continuing to use the site. Don't worry, your cards and deck won't be deleted."
}]; 38 45 }];
39 46
// Functions 40 47 // Functions
$scope.toggleContent = function(event, index) { 41 48 $scope.toggleContent = function(event, index) {
if ($('#content-' + index).hasClass('open')) { // let's close it 42 49 if ($('#content-' + index).hasClass('open')) { // let's close it
// Note: 250 is duration (ms) of animation 43 50 // Note: 250 is duration (ms) of animation
$('#content-' + index).slideUp(250).removeClass('open'); 44 51 $('#content-' + index).slideUp(250).removeClass('open');
} else { // let's open it 45 52 } else { // let's open it
$('#content-' + index).slideDown(250).addClass('open'); 46 53 $('#content-' + index).slideDown(250).addClass('open');
} 47 54 }
}; 48 55 };
49 56
$scope.expandAllContent = function() { 50 57 $scope.expandAllContent = function() {
for (var i = 0; i < $scope.entries.length; i++) { 51 58 for (var i = 0; i < $scope.entries.length; i++) {
$('#content-' + i).slideDown(0).addClass('open'); 52 59 $('#content-' + i).slideDown(0).addClass('open');
} 53 60 }
styles/flashy.css View file @ 9436dc7
๏ปฟ.no-user-select { 1 1 ๏ปฟ.no-user-select {
-moz-user-select: none; 2 2 -moz-user-select: none;
-webkit-user-select: none; 3 3 -webkit-user-select: none;
-ms-user-select: none; 4 4 -ms-user-select: none;
user-select: none; 5 5 user-select: none;
} 6 6 }
7 7
.angucomplete-dropdown { 8 8 .angucomplete-dropdown {
border-color: #ececec; 9 9 border-color: #ececec;
border-width: 1px; 10 10 border-width: 1px;
border-style: solid; 11 11 border-style: solid;
border-radius: 2px; 12 12 border-radius: 2px;
/*width: 250px;*/ 13 13 /*width: 250px;*/
padding: 6px; 14 14 padding: 6px;
cursor: pointer; 15 15 cursor: pointer;
z-index: 9999; 16 16 z-index: 9999;
position: absolute; 17 17 position: absolute;
/*top: 32px; 18 18 /*top: 32px;
left: 0px; 19 19 left: 0px;
*/ 20 20 */
margin-top: -6px; 21 21 margin-top: -6px;
background-color: #ffffff; 22 22 background-color: #ffffff;
} 23 23 }
24 24
.angucomplete-description { 25 25 .angucomplete-description {
font-size: 14px; 26 26 font-size: 14px;
} 27 27 }
28 28
.angucomplete-row { 29 29 .angucomplete-row {
padding: 5px; 30 30 padding: 5px;
color: #000000; 31 31 color: #000000;
margin-bottom: 4px; 32 32 margin-bottom: 4px;
clear: both; 33 33 clear: both;
} 34 34 }
35 35
.angucomplete-selected-row { 36 36 .angucomplete-selected-row {
background-color: #aaaaff; 37 37 background-color: #aaaaff;
} 38 38 }
39 39
/*.container .row {*/ 40 40 /*.container .row {*/
/*margin-left: 0;*/ 41 41 /*margin-left: 0;*/
/*margin-right: 0;*/ 42 42 /*margin-right: 0;*/
/*}*/ 43 43 /*}*/
44 44
/* Flashcard directive css */ 45 45 /* Flashcard directive css */
.card { 46 46 .card {
word-wrap: break-word; 47 47 word-wrap: break-word;
} 48 48 }
49 49
.card.flashy { 50 50 .card.flashy {
background-color: #fff; 51 51 background-color: #fff;
font-family: 'Titillium Web', sans-serif; 52 52 font-family: 'Titillium Web', sans-serif;
float: left; 53 53 float: left;
text-align: center; 54 54 text-align: center;
margin: 6px; 55 55 margin: 6px;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1); 56 56 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1);
} 57 57 }
58 58
.card.flashy.shrinky { 59 59 .card.flashy.shrinky {
height: 0; 60 60 height: 0;
opacity: 0; 61 61 opacity: 0;
overflow: hidden; 62 62 overflow: hidden;
} 63 63 }
64 64
.card-overlay { 65 65 .card-overlay {
cursor: pointer; 66 66 cursor: pointer;
left: 0; 67 67 left: 0;
opacity: 0; 68 68 opacity: 0;
position: absolute; 69 69 position: absolute;
top: 0; 70 70 top: 0;
transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.2s, 71 71 transition: visibility 0s cubic-bezier(0, 0, 0.6, 1) 0.2s,
opacity 0.2s cubic-bezier(0, 0, 0.6, 1); 72 72 opacity 0.2s cubic-bezier(0, 0, 0.6, 1);
/* animation effect to appear on off-hover */ 73 73 /* animation effect to appear on off-hover */
visibility: hidden; 74 74 visibility: hidden;
height: 100%; 75 75 height: 100%;
width: 100%; 76 76 width: 100%;
} 77 77 }
78 78
.card-overlay i { 79 79 .card-overlay i {
color: #FFF; 80 80 color: #FFF;
left: 50%; 81 81 left: 50%;
position: absolute; 82 82 position: absolute;
top: 50%; 83 83 top: 50%;
transform: translate(-50%, -50%); 84 84 transform: translate(-50%, -50%);
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 85 85 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
} 86 86 }
87 87
.center-me:hover i { 88 88 .center-me:hover i {
text-shadow: 0 0 15px rgba(255, 255, 255, 0.9); 89 89 text-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
} 90 90 }
91 91
.card:hover .card-overlay { 92 92 .card:hover .card-overlay {
opacity: 1.0; 93 93 opacity: 1.0;
transition-delay: 0s; /* animation effect to appear on hover */ 94 94 transition-delay: 0s; /* animation effect to appear on hover */
visibility: visible; 95 95 visibility: visible;
} 96 96 }
97 97
.top-box { 98 98 .top-box {
background-color: rgba(0, 184, 76, 0.4); 99 99 background-color: rgba(0, 184, 76, 0.4);
height: 65%; 100 100 height: 65%;
position: relative; 101 101 position: relative;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 102 102 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 100%; 103 103 width: 100%;
} 104 104 }
105 105
.top-box:hover { 106 106 .top-box:hover {
background-color: rgba(0, 184, 76, 0.5); 107 107 background-color: rgba(0, 184, 76, 0.5);
} 108 108 }
109 109
.bottom-box { 110 110 .bottom-box {
height: 35%; 111 111 height: 35%;
width: 100%; 112 112 width: 100%;
} 113 113 }
114 114
.left-box { 115 115 .left-box {
background-color: rgba(119, 146, 255, 0.5); 116 116 background-color: rgba(119, 146, 255, 0.5);
float: left; 117 117 float: left;
position: relative; 118 118 position: relative;
height: 100%; 119 119 height: 100%;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 120 120 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 50%; 121 121 width: 50%;
} 122 122 }
123 123
.left-box:hover { 124 124 .left-box:hover {
background-color: rgba(119, 146, 255, 0.6); 125 125 background-color: rgba(119, 146, 255, 0.6);
} 126 126 }
127 127
.right-box { 128 128 .right-box {
background-color: rgba(255, 62, 76, 0.5); 129 129 background-color: rgba(255, 62, 76, 0.5);
float: right; 130 130 float: right;
height: 100%; 131 131 height: 100%;
position: relative; 132 132 position: relative;
transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s; 133 133 transition: all 0.2s cubic-bezier(0, 0, 0.6, 1) 0s;
width: 50%; 134 134 width: 50%;
} 135 135 }
136 136
.right-box:hover { 137 137 .right-box:hover {
background-color: rgba(255, 62, 76, 0.6); 138 138 background-color: rgba(255, 62, 76, 0.6);
} 139 139 }
140 140
.center-me { 141 141 .center-me {
height: 100%; 142 142 height: 100%;
margin: 0 auto; 143 143 margin: 0 auto;
text-align: center; 144 144 text-align: center;
vertical-align: middle; 145 145 vertical-align: middle;
width: 100%; 146 146 width: 100%;
} 147 147 }
148 148
/* Card Colors */ 149 149 /* Card Colors */
.card.flashy.cardcolor-blue div { 150 150 .card.flashy.cardcolor-blue div {
background-color: rgba(119, 158, 203, 0.5) !important; 151 151 background-color: rgba(119, 158, 203, 0.5) !important;
} 152 152 }
153 153
.cardcolor-red div { 154 154 .cardcolor-red div {
background-color: rgba(255, 105, 97, 0.5) !important; 155 155 background-color: rgba(255, 105, 97, 0.5) !important;
} 156 156 }
157 157
.cardcolor-green div { 158 158 .cardcolor-green div {
background-color: rgba(119, 190, 119, 0.5) !important; 159 159 background-color: rgba(119, 190, 119, 0.5) !important;
} 160 160 }
161 161
.cardcolor-yellow div { 162 162 .cardcolor-yellow div {
background-color: rgba(253, 253, 150, 0.5) !important; 163 163 background-color: rgba(253, 253, 150, 0.5) !important;
} 164 164 }
165 165
/* Card Colors END */ 166 166 /* Card Colors END */
167 167
.modal.bottom-sheet { 168 168 .modal.bottom-sheet {
max-width: 600px; 169 169 max-width: 600px;
margin-left: auto; 170 170 margin-left: auto;
margin-right: auto; 171 171 margin-right: auto;
} 172 172 }
173 173
.feed-modal-input { 174 174 .feed-modal-input {
background-color: #D3D3D3; 175 175 background-color: #D3D3D3;
/ / border-style : solid; 176 176 / / border-style : solid;
/ / border-width : 1 px; 177 177 / / border-width : 1 px;
box-shadow: 2px 2px 5px #888888; 178 178 box-shadow: 2px 2px 5px #888888;
height: 24px; 179 179 height: 24px;
} 180 180 }
181 181
#newCard input[type=text] { 182 182 #newCard input[type=text] {
height: 3rem !important; 183 183 height: 3rem !important;
} 184 184 }
185 185
.input-field label { 186 186 .input-field label {
color: #00b3c2; 187 187 color: #00b3c2;
} 188 188 }
189 189
/* label focus color */ 190 190 /* label focus color */
.input-field input[type]:focus + label { 191 191 .input-field input[type]:focus + label {
color: #00b3c2; 192 192 color: #00b3c2;
} 193 193 }
194 194
/* label underline focus color */ 195 195 /* label underline focus color */
.input-field input[type]:focus { 196 196 .input-field input[type]:focus {
border-bottom: 1px solid #00b3c2; 197 197 border-bottom: 1px solid #00b3c2;
box-shadow: 0 1px 0 0 #b388ff; 198 198 box-shadow: 0 1px 0 0 #b388ff;
} 199 199 }
200 200
/* valid color */ 201 201 /* valid color */
.input-field input[type].valid { 202 202 .input-field input[type].valid {
border-bottom: 1px solid #00c28f; 203 203 border-bottom: 1px solid #00c28f;
box-shadow: 0 1px 0 0 #673ab7; 204 204 box-shadow: 0 1px 0 0 #673ab7;
} 205 205 }
206 206
/* invalid color */ 207 207 /* invalid color */
.input-field input[type].invalid { 208 208 .input-field input[type].invalid {
border-bottom: 1px solid #673ab7; 209 209 border-bottom: 1px solid #673ab7;
box-shadow: 0 1px 0 0 #673ab7; 210 210 box-shadow: 0 1px 0 0 #673ab7;
} 211 211 }
212 212
/* icon prefix focus color */ 213 213 /* icon prefix focus color */
.input-field .prefix.active { 214 214 .input-field .prefix.active {
color: #b388ff; 215 215 color: #b388ff;
} 216 216 }
217 217
/* label focus color */ 218 218 /* label focus color */
.input-field textarea[type]:focus + label { 219 219 .input-field textarea[type]:focus + label {
color: #b388ff; 220 220 color: #b388ff;
} 221 221 }
222 222
/* label underline focus color */ 223 223 /* label underline focus color */
.input-field textarea[type]:focus { 224 224 .input-field textarea[type]:focus {
border-bottom: 1px solid #00b3c2; 225 225 border-bottom: 1px solid #00b3c2;
box-shadow: 0 1px 0 0 #b388ff; 226 226 box-shadow: 0 1px 0 0 #b388ff;
} 227 227 }
228 228
body { 229 229 body {
background-color: #e8e8e8; 230 230 background-color: #e8e8e8;
overflow-x: hidden; 231 231 overflow-x: hidden;
font-family: 'Titillium Web', sans-serif; 232 232 font-family: 'Titillium Web', sans-serif;
height: 100%; 233 233 height: 100%;
} 234 234 }
235 235
html { 236 236 html {
background: transparent; 237 237 background: transparent;
height: 100%; 238 238 height: 100%;
} 239 239 }
240 240
.btn { 241 241 .btn {
background-color: #00b3c2; 242 242 background-color: #00b3c2;
} 243 243 }
244 244
.btn:hover { 245 245 .btn:hover {
background-color: #0097cb; 246 246 background-color: #0097cb;
} 247 247 }
248 248
.btn-floating { 249 249 .btn-floating {
background-color: #00b3c2; 250 250 background-color: #00b3c2;
} 251 251 }
252 252
.btn-floating:hover { 253 253 .btn-floating:hover {
background-color: #0097cb; 254 254 background-color: #0097cb;
} 255 255 }
256 256
.toggley { 257 257 .toggley {
float: left; 258 258 float: left;
margin: 10px; 259 259 margin: 10px;
} 260 260 }
261 261
#logo-container { 262 262 #logo-container {
margin-bottom: 18px; 263 263 margin-bottom: 18px;
} 264 264 }
265 265
#lean-overlay { 266 266 #lean-overlay {
display: none !important; 267 267 display: none !important;
} 268 268 }
269 269
nav { 270 270 nav {
background-color: #d2143f !important; 271 271 background-color: #d2143f !important;
} 272 272 }
273 273
main { 274 274 main {
min-height: 145px; 275 275 min-height: 145px;
} 276 276 }
277 277
.side-nav .collapsible-body { 278 278 .side-nav .collapsible-body {
width: 100%; 279 279 width: 100%;
} 280 280 }
281 281
.side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active { 282 282 .side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active {
background-color: #00b3c2; 283 283 background-color: #00b3c2;
} 284 284 }
285 285
nav .button-collapse { 286 286 nav .button-collapse {
margin: 0 20px; 287 287 margin: 0 20px;
} 288 288 }
289 289
.collapsible-body i { 290 290 .collapsible-body i {
font-size: 1rem !important; 291 291 font-size: 1rem !important;
} 292 292 }
293 293
.tabs .tab a { 294 294 .tabs .tab a {
color: #00b3c2; 295 295 color: #00b3c2;
} 296 296 }
297 297
.tabs .tab a:hover { 298 298 .tabs .tab a:hover {
color: #0041dd; 299 299 color: #0041dd;
} 300 300 }
301 301
.tabs .indicator { 302 302 .tabs .indicator {
border-bottom: 1px solid #00b3c2; 303 303 border-bottom: 1px solid #00b3c2;
} 304 304 }
305 305
h2 { 306 306 h2 {
text-align: center; 307 307 text-align: center;
} 308 308 }
309 309
md-content.md-default-theme { 310 310 md-content.md-default-theme {
background-color: rgba(255, 255, 255, 0); 311 311 background-color: rgba(255, 255, 255, 0);
border: 1px solid #fff; 312 312 border: 1px solid #fff;
} 313 313 }
314 314
/*#sidenav-overlay { 315 315 /*#sidenav-overlay {
background-color: rgba(0, 0, 0, 0) !important; 316 316 background-color: rgba(0, 0, 0, 0) !important;
}*/ 317 317 }*/
.card-content { 318 318 .card-content {
width: 100%; 319 319 width: 100%;
} 320 320 }
321 321
.valign-wrapper { 322 322 .valign-wrapper {
height: 100%; 323 323 height: 100%;
} 324 324 }
325 325
/*.toast { 326 326 /*.toast {
height: 100px; 327 327 height: 100px;
width: 300px; 328 328 width: 300px;
line-height: 20px; 329 329 line-height: 20px;
max-height: 100px; 330 330 max-height: 100px;
word-wrap: normal; 331 331 word-wrap: normal;
}*/ 332 332 }*/
333 333
[ng-cloak] { 334 334 [ng-cloak] {
display: none !important; 335 335 display: none !important;
} 336 336 }
337 337
.cardColumn { 338 338 .cardColumn {
float: left; 339 339 float: left;
} 340 340 }
341 341
/* Animation CSS, http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html */ 342 342 /* Animation CSS, http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html */
.repeated-card.ng-enter, 343 343 .repeated-card.ng-enter,
.repeated-card.ng-enter > flashcard > .card, 344 344 .repeated-card.ng-enter > flashcard > .card,
.repeated-card.ng-leave, 345 345 .repeated-card.ng-leave,
.repeated-card.ng-move, 346 346 .repeated-card.ng-move,
.repeated-card.ng-move > flashcard > .card { 347 347 .repeated-card.ng-move > flashcard > .card {
-webkit-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1); 348 348 -webkit-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1);
-moz-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1); 349 349 -moz-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1);
-o-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1); 350 350 -o-transition: 0.5s all cubic-bezier(0, 0, 0.6, 1);
transition: 1s all cubic-bezier(0, 0, 0.6, 1); 351 351 transition: 1s all cubic-bezier(0, 0, 0.6, 1);
position: relative; 352 352 position: relative;
} 353 353 }
354 354
.repeated-card.ng-enter > flashcard > .card { 355 355 .repeated-card.ng-enter > flashcard > .card {
z-index: 1; 356 356 z-index: 1;
top: -236px; 357 357 top: -236px;
margin-bottom: -230px; 358 358 margin-bottom: -230px;
} 359 359 }
360 360
.repeated-card.ng-enter.ng-enter-active > flashcard > .card { 361 361 .repeated-card.ng-enter.ng-enter-active > flashcard > .card {
top: 0px; 362 362 top: 0px;
margin-bottom: 6px; 363 363 margin-bottom: 6px;
} 364 364 }
365 365
.repeated-card.ng-leave { 366 366 .repeated-card.ng-leave {
top: 0; 367 367 top: 0;
opacity: 1; 368 368 opacity: 1;
} 369 369 }
370 370
.repeated-card.ng-leave.ng-leave-active { 371 371 .repeated-card.ng-leave.ng-leave-active {
top: -60px; 372 372 top: -60px;
opacity: 0; 373 373 opacity: 0;
} 374 374 }
375 375
/* Animation CSS END */ 376 376 /* Animation CSS END */
377 377
/* Footer */ 378 378 /* Footer */
* { 379 379 * {
margin: 0; 380 380 margin: 0;
} 381 381 }
382 382
.wrapper { 383 383 /*.wrapper {*/
min-height: 100%; 384 384 /*min-height: 100%;*/
height: 100%; 385 385 /*height: 100%;*/
margin: 0 auto -4em; 386 386 /*/!*margin: 0 auto -4em;*!/*/
} 387 387 /*}*/
templates/help.html View file @ 9436dc7
<div class="container"> 1 1 <div class="container">
<div class="row"> 2 2 <div class="row">
<h2>FAQ</h2> 3 3 <h2>FAQ</h2>
<button class="btn waves-effect waves-light" ng-click="expandAllContent()"> 4 4 <button class="btn waves-effect waves-light" ng-click="expandAllContent()">
Expand all 5 5 Expand all
</button> 6 6 </button>
<button class="btn waves-effect waves-light" ng-click="collapseAllContent()"> 7 7 <button class="btn waves-effect waves-light" ng-click="collapseAllContent()">
Collapse all 8 8 Collapse all
</button> 9 9 </button>
10 10
<!-- Please enter entries in JSON format in HelpController.js --> 11 11 <!-- Please enter entries in JSON format in HelpController.js -->
<ul class="collection st-accordion"> 12 12 <ul class="collection st-accordion">
<li class="st-accordion--item" ng-repeat="entry in entries"> 13 13 <li class="st-accordion--item" ng-repeat="entry in entries">
<div class="st-accordion--header" ng-click="toggleContent($event, $index)"> 14 14 <div class="st-accordion--header" ng-click="toggleContent($event, $index)">
<i class="{{entry.icon}}"></i> 15 15 <i class="{{entry.icon}}"></i>
{{entry.question}}</div> 16 16 {{entry.question}}
17 </div>
<div id="content-{{$index}}" class="st-accordion--content" 17 18 <div id="content-{{$index}}" class="st-accordion--content"
ng-bind-html="entry.answer"></div> 18 19 ng-bind-html="entry.answer"></div>
</li> 19 20 </li>
</ul> 20 21 </ul>
</div> 21 22 </div>
23 <h2>More questions?</h2>
24
25 <p><a href="mailto:or.so.help.me@flashy.cards">Contact us by email! </a></p>
</div> 22 26 </div>
23 27