Skip to content
This repository was archived by the owner on Dec 4, 2017. It is now read-only.

Commit 4a5f074

Browse files
author
Eric Jimenez
committed
add placeholder text when no description is found
1 parent e7bddeb commit 4a5f074

File tree

3 files changed

+137
-20
lines changed

3 files changed

+137
-20
lines changed

‎public/resources/css/module/_resources.scss

Lines changed: 89 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,100 @@
11
.resources {
2-
display: flex;
3-
justify-content: space-between;
4-
flex-direction: row-reverse;
2+
.flex {
3+
display: flex;
4+
flex-wrap: wrap;
5+
}
6+
7+
.showcase-content {
8+
@media(max-width: 320px) {
9+
padding: 0;
10+
margin: 0;
11+
}
12+
}
13+
14+
.resource-tabs {
15+
margin: 0;
16+
padding: 0;
17+
list-style: none;
18+
display: flex;
19+
flex-direction: row-reverse;
20+
21+
@media(max-width: 500px) {
22+
flex-direction: column-reverse;
23+
}
24+
25+
.resource-tab {
26+
display: inline;
27+
background-color: #CFD8DC;
28+
padding: $unit (3 * $unit);
29+
border-radius: 2px;
30+
margin-right: 16px;
31+
color: #455A64;
32+
33+
@media(max-width: 500px) {
34+
margin-right: 0;
35+
margin-bottom: 12px;
36+
}
37+
38+
&:hover {
39+
cursor: pointer;
40+
background-color: #B0BEC5;
41+
}
542

6-
@media(max-width: 768px) {
7-
justify-content: center;
8-
flex-direction: column-reverse;
43+
&.selected {
44+
color: #1D77CE;
45+
background-color: #E3F2FB;
46+
font-weight: bold;
47+
}
48+
}
49+
}
50+
51+
.subsection {
52+
margin-bottom: 64px;
53+
}
54+
55+
.subsection-title {
56+
font-weight: 400;
57+
}
58+
59+
.card {
60+
display: inline-block;
61+
width: 320px;
62+
margin-right: $unit * 4;
63+
64+
@media(max-width: 320px) {
65+
margin-right: 0;
66+
width: 275px;
67+
}
68+
}
69+
70+
.title-link {
71+
padding: 0 16px;
72+
}
73+
74+
.description {
75+
padding-bottom: 32px;
76+
line-height: 21px;
977
}
1078

1179
a {
1280
font-size: 16px;
81+
color: #1a2326;
82+
83+
&.card-link {
84+
font-size: 14px;
85+
color: #1D77CE;
86+
}
87+
88+
&:hover {
89+
color: #1D77CE;
90+
}
91+
}
92+
93+
.form a {
94+
color: $regal;
1395
}
1496
}
1597

1698
.capitalize {
17-
text-transform: capitalize;
99+
text-transform: capitalize !important;
18100
}

‎public/resources/index.ejs

Lines changed: 38 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,42 @@
1-
<p class="text-body">Would you like to be listed in this page? Fill out this <a href="https://docs.google.com/a/rangle.io/forms/d/1qzWaDpTgTPe4iPDRF_VCT9aHXKimUocwlFnVJUdKabY/viewform?c=0&w=1">form</a>.</p>
2-
3-
<div class="js-resources-ctrl resources" ng-controller="ResourcesCtrl as ctrl">
4-
<div class="section" ng-repeat="(category, categoryContent) in ctrl.fbObject">
1+
<div class="showcase js-resources-ctrl resources" ng-controller="ResourcesCtrl as ctrl">
2+
<div class="showcase-content">
53
<div>
6-
<h1 class="capitalize">{{category}}</h1>
7-
<div ng-repeat="section in categoryContent">
8-
<div ng-repeat="(subsectionName, subsectionObj) in section">
9-
<div>
10-
<h2>{{ subsectionObj.title }}</h2>
11-
<ul ng-repeat="resource in subsectionObj.resources">
12-
<li ng-if="resource.rev"><a target="_blank" href="{{resource.url}}">{{ resource.title }}</a></li>
13-
</ul>
4+
<div class="form l-space-bottom-7">
5+
<div class="callout is-helpful">
6+
<p>
7+
Would you like to be listed in this page? Fill out this <a href="https://docs.google.com/a/rangle.io/forms/d/1qzWaDpTgTPe4iPDRF_VCT9aHXKimUocwlFnVJUdKabY/viewform?c=0&w=1">form</a>.
8+
</p>
9+
</div>
10+
</div>
11+
12+
<h1>Explore our Resources</h1>
13+
14+
<div class="flex" style="margin-bottom: 64px;">
15+
<div class="resource-tabs">
16+
<div ng-repeat="(category, categoryContent) in ctrl.fbObject"
17+
class="resource-tab text-uppercase"
18+
ng-class="{selected: category === ctrl.selectedCategory}"
19+
ng-click="ctrl.onSelectCategory(category)">{{category}}
20+
</div>
21+
</div>
22+
</div>
23+
<div class="section" ng-repeat="(category, categoryContent) in ctrl.fbObject">
24+
<div ng-if="ctrl.selectedCategory === category">
25+
<div ng-repeat="section in categoryContent">
26+
<div ng-repeat="(subsectionName, subsectionObj) in section">
27+
<h1 class="subsection-title">{{ subsectionObj.title }}</h1>
28+
<div class="subsection flex">
29+
<div ng-repeat="resource in subsectionObj.resources">
30+
<div class="card shadow-1" ng-if="resource.rev">
31+
<a target="_blank" href="{{resource.url}}">
32+
<h3 class="title-link">{{ resource.title }}</h3></a>
33+
<!-- NOTE: Description may not exists for all entries -->
34+
<p ng-if="resource.desc" class="description">{{ resource.desc }}</p>
35+
<p ng-if="!resource.desc" class="description">No information found. Submit a description by filling out this <a class="card-link" href="https://docs.google.com/a/rangle.io/forms/d/1qzWaDpTgTPe4iPDRF_VCT9aHXKimUocwlFnVJUdKabY/viewform?c=0&w=1">form</a>.</p>
36+
</div>
37+
</div>
38+
</div>
39+
</div>
1440
</div>
1541
</div>
1642
</div>

‎public/resources/js/controllers/resources-controller.js

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,19 @@
44
* This controller is responsible for fetching all the data for the resources page,
55
* from Firebase.
66
*/
7-
angularIO.controller('ResourcesCtrl', ['$firebaseArray', '$firebaseObject', function ($firebaseArray, $firebaseObject) {
7+
angularIO.controller('ResourcesCtrl', ['$firebaseArray', '$firebaseObject','$location', function ($firebaseArray, $firebaseObject, $location) {
8+
var DEFAULT_CATEGORY = 'education';
89
var categoryRef = new Firebase("https://angularresources.firebaseio.com/");
910
var vm = this;
1011

1112
vm.fbObject = $firebaseObject(categoryRef);
13+
vm.selectedCategory = $location.hash() ? $location.hash() : DEFAULT_CATEGORY;
14+
15+
// onSelect :: String
16+
// Side effect, modifies vm.selectedCategory
17+
vm.onSelectCategory = function onSelectCategory(category) {
18+
$location.hash(category);
19+
vm.selectedCategory = category;
20+
};
1221

1322
}]);

0 commit comments

Comments
 (0)