110swag / flashy-frontend

Download as
Browse Code »

Commit bd83bd63c59cc4f5f2177509b0ae040fbc87592f

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

tweaks

Showing 3 changed files with 10 additions and 6 deletions Inline Diff

home.html View file @ bd83bd6
<!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 href='https://fonts.googleapis.com/css?family=Titillium+Web:200,200italic,300,600,400,900,700,400italic,700italic,300italic,600italic' 11 11 <link href='https://fonts.googleapis.com/css?family=Titillium+Web:200,200italic,300,600,400,900,700,400italic,700italic,300italic,600italic'
rel='stylesheet' type='text/css'> 12 12 rel='stylesheet' type='text/css'>
<title>Flashy</title> 13 13 <title>Flashy</title>
</head> 14 14 </head>
<body ng-controller="RootController"> 15 15 <body ng-controller="RootController">
<header> 16 16 <header>
<nav> 17 17 <nav>
<div class="nav-wrapper" ng-cloak> 18 18 <div class="nav-wrapper">
<a ng-show="UserService.isLoggedIn()" href="#" data-activates="mobile-demo" 19 19 <a ng-show="UserService.isLoggedIn()" href="#" data-activates="mobile-demo"
class="left button-collapse hide-on-med-and-up"><i 20 20 class="left button-collapse hide-on-med-and-up"><i
class="mdi-navigation-menu"></i></a> 21 21 class="mdi-navigation-menu"></i></a>
<ul ng-show="currentSection.id && UserService.isLoggedIn()" class="left hide-on-small-and-down"> 22 22 <ul ng-show="currentSection.id && UserService.isLoggedIn()" class="left hide-on-small-and-down">
<li ui-sref-active="active"><a ui-sref="feed({sectionId:currentSection.id})" class="tooltipped" 23 23 <li ui-sref-active="active"><a ui-sref="feed({sectionId:currentSection.id})" class="tooltipped"
data-position="bottom" 24 24 data-position="bottom"
data-delay="50" data-tooltip="Feed"><i 25 25 data-delay="50" data-tooltip="Feed"><i
class="mdi-action-view-module"></i></a></li> 26 26 class="mdi-action-view-module"></i></a></li>
<li ui-sref-active="active"><a ui-sref="deck({sectionId:currentSection.id})" class="tooltipped" 27 27 <li ui-sref-active="active"><a ui-sref="deck({sectionId:currentSection.id})" class="tooltipped"
data-position="bottom" 28 28 data-position="bottom"
data-delay="50" data-tooltip="Deck"><i 29 29 data-delay="50" data-tooltip="Deck"><i
class="mdi-action-view-carousel"></i></a></li> 30 30 class="mdi-action-view-carousel"></i></a></li>
<li ui-sref-active="active"><a ui-sref="cardlist({sectionId:currentSection.id})" class="tooltipped" 31 31 <li ui-sref-active="active"><a ui-sref="cardlist({sectionId:currentSection.id})" class="tooltipped"
data-position="bottom" 32 32 data-position="bottom"
data-delay="50" data-tooltip="Card List"><i 33 33 data-delay="50" data-tooltip="Card List"><i
class="mdi-action-view-list"></i></a></li> 34 34 class="mdi-action-view-list"></i></a></li>
</ul> 35 35 </ul>
<a href="#" class="brand-logo center">Flashy</a> 36 36 <a href="#" class="brand-logo center">Flashy</a>
37 37
<ul ng-show="UserService.isLoggedIn()" id="nav-mobile" class="right hide-on-small-and-down"> 38 38 <ul ng-show="UserService.isLoggedIn()" ng-cloak id="nav-mobile" class="right hide-on-small-and-down">
<!-- User's classes dropdown --> 39 39 <!-- User's classes dropdown -->
<ul id="dropdown1" class="dropdown-content"> 40 40 <ul id="dropdown1" class="dropdown-content">
<li ui-sref-active="active" ng-repeat="section in UserService.getUserData().sections"> 41 41 <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> 42 42 <a class="class bold" ui-sref="feed({sectionId:section.id})">{{section.short_name}}<span class="badge">hi</span></a>
</li> 43 43 </li>
<li class="divider"></li> 44 44 <li class="divider"></li>
<li><a ui-sref="addclass">Add Class</a></li> 45 45 <li><a ui-sref="addclass">Add Class</a></li>
</ul> 46 46 </ul>
<li><a class="dropdown-button ng-cloak" href="#!" data-activates="dropdown1">{{currentSection.id?currentSection.short_name:"Classes"}}<i 47 47 <li><a style="width:150px;" class="dropdown-button ng-cloak" href="#!" data-activates="dropdown1">{{currentSection.id?currentSection.short_name:"Classes"}}<i
class="mdi-navigation-arrow-drop-down right"></i></a></li> 48 48 class="mdi-navigation-arrow-drop-down right"></i></a></li>
<li><a ui-sref="study">Study</a></li> 49 49 <li><a ui-sref="study">Study</a></li>
<li><a ui-sref="logout">Logout</a></li> 50 50 <li><a ui-sref="logout">Logout</a></li>
</ul> 51 51 </ul>
52 52
<!-- Slide-in side-nav for small screens --> 53 53 <!-- Slide-in side-nav for small screens -->
<ul ng-show="UserService.isLoggedIn()" class="side-nav" id="mobile-demo"> 54 54 <ul ng-show="UserService.isLoggedIn()" class="side-nav" id="mobile-demo">
<span ng-show="currentSection.id"> 55 55 <span ng-show="currentSection.id">
<li ui-sref-active="active"><a ui-sref="feed({sectionId:currentSection.id})" class="tooltipped" 56 56 <li ui-sref-active="active"><a ui-sref="feed({sectionId:currentSection.id})" class="tooltipped"
><i 57 57 ><i
class="mdi-action-view-module left"></i>Feed</a></li> 58 58 class="mdi-action-view-module left"></i>Feed</a></li>
<li ui-sref-active="active"><a ui-sref="deck({sectionId:currentSection.id})" class="tooltipped" 59 59 <li ui-sref-active="active"><a ui-sref="deck({sectionId:currentSection.id})" class="tooltipped"
><i 60 60 ><i
class="mdi-action-view-carousel left"></i>Deck</a></li> 61 61 class="mdi-action-view-carousel left"></i>Deck</a></li>
<li ui-sref-active="active"><a ui-sref="cardlist({sectionId:currentSection.id})" class="tooltipped" 62 62 <li ui-sref-active="active"><a ui-sref="cardlist({sectionId:currentSection.id})" class="tooltipped"
><i 63 63 ><i
class="mdi-action-view-list left"></i>Card List</a> 64 64 class="mdi-action-view-list left"></i>Card List</a>
</li> 65 65 </li>
<hr> 66 66 <hr>
</span> 67 67 </span>
<!-- Collapsible menu for all the User's classes --> 68 68 <!-- Collapsible menu for all the User's classes -->
<ul class="collapsible" data-collapsible="accordion"> 69 69 <ul class="collapsible" data-collapsible="accordion">
<li class="bold"> 70 70 <li class="bold">
<a class="collapsible-header black-text"> 71 71 <a class="collapsible-header black-text">
Classes<i 72 72 Classes<i
class="mdi-navigation-arrow-drop-down right"></i> 73 73 class="mdi-navigation-arrow-drop-down right"></i>
</a> 74 74 </a>
</li> 75 75 </li>
<div class="collapsible-body" style="display: block"> 76 76 <div class="collapsible-body" style="display: block">
<ul> 77 77 <ul>
<li ui-sref-active="active" ng-repeat="section in UserService.getUserData().sections"> 78 78 <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> 79 79 <a class="class bold" ui-sref="feed({sectionId:section.id})">{{section.short_name}}</a>
</li> 80 80 </li>
<hr> 81 81 <hr>
<li><a ui-sref="addclass"><i class="tiny mdi-content-add">Add Class</i></a></li> 82 82 <li><a ui-sref="addclass"><i class="tiny mdi-content-add">Add Class</i></a></li>
</ul> 83 83 </ul>
</div> 84 84 </div>
</ul> 85 85 </ul>
<li><a ui-sref="study">Study</a></li> 86 86 <li><a ui-sref="study">Study</a></li>
<li><a ui-sref="logout">Logout</a></li> 87 87 <li><a ui-sref="logout">Logout</a></li>
</ul> 88 88 </ul>
</div> 89 89 </div>
</nav> 90 90 </nav>
91 91
</header> 92 92 </header>
93 93
94 94
<!-- Menu Bar --> 95 95 <!-- Menu Bar -->
<main ui-view></main> 96 96 <main ui-view></main>
97 97
98 98
<footer class="page-footer"> 99 99 <footer class="page-footer">
<div class="footer-copyright"> 100 100 <div class="footer-copyright">
<div class="container"> 101 101 <div class="container">
&copy; 2015 Team Swag 102 102 &copy; 2015 Team Swag
<a class="grey-text text-lighten-4 right" href="mailto:halp@flashy.cards">Concerns? Contact us by email!</a> 103 103 <a class="grey-text text-lighten-4 right" href="mailto:halp@flashy.cards">Concerns? Contact us by email!</a>
</div> 104 104 </div>
</div> 105 105 </div>
</footer> 106 106 </footer>
107 107
</body> 108 108 </body>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script> 109 109 <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> 110 110 <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> 111 111 <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> 112 112 <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="scripts/materialize.js"></script> 113 113 <script type="text/javascript" src="scripts/materialize.js"></script>
<script type="text/javascript" src="scripts/jquery.collapsible.js"></script> 114 114 <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> 115 115 <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> 116 116 <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> 117 117 <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> 118 118 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script> 119 119 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script>
120 120
121 121
<script src="config.js"></script> 122 122 <script src="config.js"></script>
123 123
<!-- Controllers --> 124 124 <!-- Controllers -->
<script src="scripts/FeedController.js"></script> 125 125 <script src="scripts/FeedController.js"></script>
<script src="scripts/RootController.js"></script> 126 126 <script src="scripts/RootController.js"></script>
<script src="scripts/LoginController.js"></script> 127 127 <script src="scripts/LoginController.js"></script>
<script src="scripts/LogoutController.js"></script> 128 128 <script src="scripts/LogoutController.js"></script>
<script src="scripts/DeckController.js"></script> 129 129 <script src="scripts/DeckController.js"></script>
<script src="scripts/RequestResetController.js"></script> 130 130 <script src="scripts/RequestResetController.js"></script>
<script src="scripts/ClassAddController.js"></script> 131 131 <script src="scripts/ClassAddController.js"></script>
<script src="scripts/StudyController.js"></script> 132 132 <script src="scripts/StudyController.js"></script>
<script src="scripts/ResetPasswordController.js"></script> 133 133 <script src="scripts/ResetPasswordController.js"></script>
<script src="scripts/CardListController.js"></script> 134 134 <script src="scripts/CardListController.js"></script>
<script src="scripts/VerifyEmailController.js"></script> 135 135 <script src="scripts/VerifyEmailController.js"></script>
styles/flashy.css View file @ bd83bd6
.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.5); 99 99 background-color: rgba(0, 184, 76, 0.5);
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.6); 107 107 background-color: rgba(0, 184, 76, 0.6);
} 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
.modal.bottom-sheet { 149 149 .modal.bottom-sheet {
max-width: 600px; 150 150 max-width: 600px;
margin-left: auto; 151 151 margin-left: auto;
margin-right: auto; 152 152 margin-right: auto;
} 153 153 }
154 154
#newCard input[type=text] { 155 155 #newCard input[type=text] {
height: 3rem !important; 156 156 height: 3rem !important;
} 157 157 }
158 158
.input-field label { 159 159 .input-field label {
color: #00b3c2; 160 160 color: #00b3c2;
} 161 161 }
162 162
/* label focus color */ 163 163 /* label focus color */
.input-field input[type]:focus + label { 164 164 .input-field input[type]:focus + label {
color: #00b3c2; 165 165 color: #00b3c2;
} 166 166 }
167 167
/* label underline focus color */ 168 168 /* label underline focus color */
.input-field input[type]:focus { 169 169 .input-field input[type]:focus {
border-bottom: 1px solid #00b3c2; 170 170 border-bottom: 1px solid #00b3c2;
box-shadow: 0 1px 0 0 #b388ff; 171 171 box-shadow: 0 1px 0 0 #b388ff;
} 172 172 }
173 173
/* valid color */ 174 174 /* valid color */
.input-field input[type].valid { 175 175 .input-field input[type].valid {
border-bottom: 1px solid #00c28f; 176 176 border-bottom: 1px solid #00c28f;
box-shadow: 0 1px 0 0 #673ab7; 177 177 box-shadow: 0 1px 0 0 #673ab7;
} 178 178 }
179 179
/* invalid color */ 180 180 /* invalid color */
.input-field input[type].invalid { 181 181 .input-field input[type].invalid {
border-bottom: 1px solid #673ab7; 182 182 border-bottom: 1px solid #673ab7;
box-shadow: 0 1px 0 0 #673ab7; 183 183 box-shadow: 0 1px 0 0 #673ab7;
} 184 184 }
185 185
/* icon prefix focus color */ 186 186 /* icon prefix focus color */
.input-field .prefix.active { 187 187 .input-field .prefix.active {
color: #b388ff; 188 188 color: #b388ff;
} 189 189 }
190 190
/* label focus color */ 191 191 /* label focus color */
.input-field textarea[type]:focus + label { 192 192 .input-field textarea[type]:focus + label {
color: #b388ff; 193 193 color: #b388ff;
} 194 194 }
195 195
/* label underline focus color */ 196 196 /* label underline focus color */
.input-field textarea[type]:focus { 197 197 .input-field textarea[type]:focus {
border-bottom: 1px solid #00b3c2; 198 198 border-bottom: 1px solid #00b3c2;
box-shadow: 0 1px 0 0 #b388ff; 199 199 box-shadow: 0 1px 0 0 #b388ff;
} 200 200 }
201 201
body { 202 202 body {
background-color: #e8e8e8; 203 203 background-color: #e8e8e8;
overflow-x: hidden; 204 204 overflow-x: hidden;
font-family: 'Titillium Web', sans-serif; 205 205 font-family: 'Titillium Web', sans-serif;
} 206 206 }
207 207
html { 208 208 html {
background: transparent; 209 209 background: transparent;
} 210 210 }
211 211
.btn { 212 212 .btn {
background-color: #00b3c2; 213 213 background-color: #00b3c2;
} 214 214 }
215 215
.btn:hover { 216 216 .btn:hover {
background-color: #0097cb; 217 217 background-color: #0097cb;
} 218 218 }
219 219
.btn-floating { 220 220 .btn-floating {
background-color: #00b3c2; 221 221 background-color: #00b3c2;
} 222 222 }
223 223
.btn-floating:hover { 224 224 .btn-floating:hover {
background-color: #0097cb; 225 225 background-color: #0097cb;
} 226 226 }
227 227
#logo-container { 228 228 #logo-container {
margin-bottom: 18px; 229 229 margin-bottom: 18px;
} 230 230 }
231 231
#lean-overlay { 232 232 #lean-overlay {
display: none !important; 233 233 display: none !important;
} 234 234 }
235 235
nav { 236 236 nav {
background-color: #d2143f !important; 237 237 background-color: #d2143f !important;
} 238 238 }
239 239
main { 240 240 main {
min-height: 145px; 241 241 min-height: 145px;
} 242 242 }
243 243
.side-nav .collapsible-body { 244 244 .side-nav .collapsible-body {
width: 100%; 245 245 width: 100%;
} 246 246 }
247 247
.side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active { 248 248 .side-nav .collapsible-body li.active, .side-nav.fixed .collapsible-body li.active {
background-color: #00b3c2; 249 249 background-color: #00b3c2;
} 250 250 }
251 251
templates/feed.html View file @ bd83bd6
<div class="row"> 1 1 <div class="row">
<h2 ng-cloak ng-show="cards.length == 0">No cards. Be the first one to add a card!</h2> 2 2 <h2 ng-cloak ng-show="cards.length == 0">No cards. Be the first one to add a card!</h2>
3 3
<div class="progress center-align" style="margin: 32px auto auto;width:50%;" ng-show="!cards"> 4 4 <div class="progress center-align" style="margin: 70px auto auto;width:50%;" ng-show="!cards">
<div class="indeterminate"></div> 5 5 <div class="indeterminate"></div>
</div> 6 6 </div>
<div ng-repeat="card in cards"> 7 7 <div ng-repeat="card in cards">
<flashcard flashcard-obj="card" refresh="refreshCards()"/> 8 8 <flashcard flashcard-obj="card" refresh="refreshCards()"/>
</div> 9 9 </div>
</div> 10 10 </div>
11 11
12 12
<!--Lil plus button in corner--> 13 13 <!--Lil plus button in corner-->
<div class="fixed-action-btn" style="bottom: 96px; right: 24px;"> 14 14 <div class="fixed-action-btn" style="bottom: 96px; right: 24px;">
<a data-target="newCard" class="btn-floating btn-large modal-trigger tooltipped" href="#newCard" data-position="left" 15 15 <a data-target="newCard" class="btn-floating btn-large modal-trigger tooltipped" href="#newCard" data-position="left"
data-delay="50" 16 16 data-delay="50"
data-tooltip="(C)ompose"> 17 17 data-tooltip="(C)ompose">
<i class="large mdi-content-add"></i> 18 18 <i class="large mdi-content-add"></i>
</a> 19 19 </a>
</div> 20 20 </div>
21 21
<div id="newCard" class="modal bottom-sheet"> 22 22 <div id="newCard" class="modal bottom-sheet">
<form id="new-card-form"> 23 23 <form id="new-card-form">
<div class="modal-content"> 24 24 <div class="modal-content">
<div class="input-field"> 25 25 <div class="input-field">
<!--<label id="newCardSign" for="newCard">New Flashcard Text</label>--> 26 26 <!--<label id="newCardSign" for="newCard">New Flashcard Text</label>-->
<div id="new-card-input" contenteditable style="outline:0px solid transparent;"> 27 27 <div id="new-card-input" contenteditable style="outline:0px solid transparent;">
28 28
</div> 29 29 </div>
</div> 30 30 </div>
</div> 31 31 </div>
<div class="modal-footer"> 32 32 <div class="modal-footer">
<button class="btn modal-close tooltipped" type="submit" ng-click="pushCard()" data-position="left" 33 33 <button class="btn modal-close tooltipped" type="submit" ng-click="pushCard()" data-position="left"
data-delay="50" 34 34 data-delay="50"
data-tooltip="Enter">Submit 35 35 data-tooltip="Enter">Submit
<i class="mdi-hardware-keyboard-return right"></i> 36 36 <i class="mdi-hardware-keyboard-return right"></i>
</button> 37 37 </button>
<button id="blank-selected" style="float:left" class="btn tooltipped" data-position="right" data-delay="50" 38 38 <button id="blank-selected" style="float:left" class="btn tooltipped" data-position="right" data-delay="50"
data-tooltip="Ctrl-B">Blank Selected Text 39 39 data-tooltip="Ctrl-B">Blank Selected Text