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

Commit 868abbe

Browse files
author
Eric Jimenez
committed
new style with new schema
1 parent 4a5f074 commit 868abbe

File tree

5 files changed

+150
-122
lines changed

5 files changed

+150
-122
lines changed

‎public/_data.json

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -31,21 +31,5 @@
3131

3232
"presskit": {
3333
"title": "Press Kit"
34-
},
35-
36-
"books": {
37-
"title": "Books"
38-
},
39-
40-
"training": {
41-
"title": "Training"
42-
},
43-
44-
"communities": {
45-
"title": "Communities"
46-
},
47-
48-
"tooling": {
49-
"title": "Tooling and Libraries"
5034
}
5135
}

‎public/resources/_data.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
"index": {
3-
"title": "Resources"
3+
"title": "Explore Angular Resources"
44
}
5-
}
5+
}

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

Lines changed: 94 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,126 @@
11
.resources {
2-
.flex {
3-
display: flex;
4-
flex-wrap: wrap;
2+
3+
.h-affix {
4+
position: fixed;
5+
}
6+
7+
.affix-top {
8+
top: 50px;
59
}
610

7-
.showcase-content {
8-
@media(max-width: 320px) {
9-
padding: 0;
11+
.c-resource {
12+
h4 {
13+
margin: 0;
14+
line-height: 24px;
15+
}
16+
17+
p {
1018
margin: 0;
1119
}
1220
}
13-
14-
.resource-tabs {
15-
margin: 0;
16-
padding: 0;
17-
list-style: none;
18-
display: flex;
19-
flex-direction: row-reverse;
2021

21-
@media(max-width: 500px) {
22-
flex-direction: column-reverse;
22+
.c-resource-nav {
23+
margin-top: 48px;
24+
width: $unit * 20;
25+
z-index: $layer-1;
26+
background-color: #fff;
27+
border-radius: 2px;
28+
29+
a {
30+
color: #373E41;
31+
text-decoration: none;
2332
}
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-
}
3733

38-
&:hover {
39-
cursor: pointer;
40-
background-color: #B0BEC5;
34+
.category {
35+
padding: 10px 0;
36+
37+
.category-link {
38+
display: block;
39+
margin: 2px 0;
40+
padding: 3px 14px;
41+
font-size: 18px !important;
42+
43+
&:hover {
44+
background: #edf0f2;
45+
color: #2B85E7;
46+
}
4147
}
48+
}
4249

43-
&.selected {
44-
color: #1D77CE;
45-
background-color: #E3F2FB;
46-
font-weight: bold;
50+
.subcategory {
51+
.subcategory-link {
52+
display: block;
53+
margin: 2px 0;
54+
padding: 4px 14px;
55+
56+
&:hover {
57+
background: #edf0f2;
58+
color: #2B85E7;
59+
}
4760
}
4861
}
4962
}
5063

51-
.subsection {
52-
margin-bottom: 64px;
64+
.h-anchor-offset {
65+
display: block;
66+
position: relative;
67+
top: -20px;
68+
visibility: hidden;
5369
}
5470

55-
.subsection-title {
56-
font-weight: 400;
71+
.l-flex--column {
72+
display: flex;
73+
flex-direction: column;
5774
}
5875

59-
.card {
60-
display: inline-block;
61-
width: 320px;
62-
margin-right: $unit * 4;
76+
.c-resource-header {
77+
margin-bottom: 16px;
78+
}
6379

64-
@media(max-width: 320px) {
65-
margin-right: 0;
66-
width: 275px;
67-
}
80+
.c-contribute {
81+
margin-bottom: 24px;
6882
}
6983

70-
.title-link {
71-
padding: 0 16px;
84+
.c-resource-header h2 {
85+
margin: 0;
7286
}
7387

74-
.description {
75-
padding-bottom: 32px;
76-
line-height: 21px;
88+
.subcategory-title {
89+
padding: 16px 23px;
90+
margin: 0;
91+
background-color: $mist;
92+
color: #373E41;
7793
}
7894

79-
a {
80-
font-size: 16px;
81-
color: #1a2326;
95+
.h-capitalize {
96+
text-transform: capitalize;
97+
}
8298

83-
&.card-link {
84-
font-size: 14px;
85-
color: #1D77CE;
86-
}
99+
.h-hide {
100+
display: none;
101+
}
87102

88-
&:hover {
89-
color: #1D77CE;
90-
}
103+
.resource-row-link {
104+
color: #1a2326;
105+
border: transparent solid 1px;
106+
margin: 0;
107+
padding: 16px 23px 16px 23px;
108+
position: relative;
109+
text-decoration: none;
110+
transition: all .3s;
91111
}
92112

93-
.form a {
94-
color: $regal;
113+
.resource-row-link:hover {
114+
text-decoration: none;
115+
border-color: #2B85E7;
116+
border-radius: 4px;
117+
box-shadow: 0 8px 8px rgba(1, 67, 163, .24), 0 0 8px rgba(1, 67, 163, .12), 0 6px 18px rgba(43, 133, 231, .12);
118+
transform: translate3d(0, -2px, 0);
95119
}
96-
}
97120

98-
.capitalize {
99-
text-transform: capitalize !important;
100-
}
121+
@media(max-width: 900px) {
122+
.c-resource-nav {
123+
display: none;
124+
}
125+
}
126+
}

‎public/resources/index.ejs

Lines changed: 33 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,27 @@
1-
<div class="showcase js-resources-ctrl resources" ng-controller="ResourcesCtrl as ctrl">
2-
<div class="showcase-content">
3-
<div>
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>
1+
<div class="resources js-resources-ctrl grid-fixed" ng-controller="ResourcesCtrl as ctrl">
2+
<div class="c8">
3+
<div class="l-flex--column">
4+
<div class="showcase" ng-repeat="(category, categoryObj) in ctrl.fbObject">
5+
<header class="c-resource-header">
6+
<a class="h-anchor-offset" name="{{category}}"></a>
7+
<h2 class="text-headline text-uppercase">{{ category }}</h2>
8+
</header>
119

12-
<h1>Explore our Resources</h1>
10+
<div class="shadow-1">
11+
<div ng-repeat="(subCategory, subcategoryObj) in categoryObj">
12+
<a class="h-anchor-offset" name="{{subCategory}}"></a>
13+
<h3 class="text-uppercase subcategory-title">{{subCategory}}</h3>
1314

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>
15+
<div ng-repeat="(section, sectionObj) in subcategoryObj">
16+
<div ng-repeat="resource in sectionObj">
17+
<div class="c-resource" ng-if="resource.rev">
18+
<a class="l-flex--column resource-row-link" target="_blank" href="{{resource.url}}">
19+
<div>
20+
<h4>{{ resource.title }}</h4>
21+
<p class="resource-description" ng-if="resource.desc">{{ resource.desc }}</p>
22+
<p class="resource-description" ng-if="!resource.desc">No Description</p>
23+
</div>
24+
</a>
3725
</div>
3826
</div>
3927
</div>
@@ -42,4 +30,15 @@
4230
</div>
4331
</div>
4432
</div>
33+
34+
<div class="c3">
35+
<div class="c-resource-nav shadow-1 l-flex--column h-affix" ng-class="{ 'affix-top': ctrl.scrollPos > 200 }">
36+
<div class="category" ng-repeat="(category, categoryObj) in ctrl.fbObject">
37+
<a class="category-link h-capitalize" href="#{{ category }}">{{ category }}</a>
38+
<div class="subcategory" ng-repeat="(subCategory, subcategoryObj) in categoryObj">
39+
<a class="subcategory-link" href="#{{subCategory}}">{{subCategory}}</a>
40+
</div>
41+
</div>
42+
</div>
43+
</div>
4544
</div>

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

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,33 @@
44
* This controller is responsible for fetching all the data for the resources page,
55
* from Firebase.
66
*/
7-
angularIO.controller('ResourcesCtrl', ['$firebaseArray', '$firebaseObject','$location', function ($firebaseArray, $firebaseObject, $location) {
7+
angularIO.controller('ResourcesCtrl', ['$scope', '$element', '$window', '$firebaseArray', '$firebaseObject','$location', function ($scope, $window, $element, $firebaseArray, $firebaseObject, $location) {
88
var DEFAULT_CATEGORY = 'education';
9-
var categoryRef = new Firebase("https://angularresources.firebaseio.com/");
9+
var categoryRef = new Firebase("https://project-8263071350145382327.firebaseio.com/");
10+
11+
// TODO: (ericjim): we need the database
12+
var devRef = new Firebase("https://project-8263071350145382327.firebaseio.com/Development");
13+
devRef.setPriority(1000);
14+
15+
var eduRef = new Firebase("https://project-8263071350145382327.firebaseio.com/Education");
16+
eduRef.setPriority(2000);
17+
18+
var communityRef = new Firebase("https://project-8263071350145382327.firebaseio.com/Community");
19+
communityRef.setPriority(3000);
20+
21+
1022
var vm = this;
1123

1224
vm.fbObject = $firebaseObject(categoryRef);
1325
vm.selectedCategory = $location.hash() ? $location.hash() : DEFAULT_CATEGORY;
1426

27+
vm.scrollPos = 0;
28+
29+
window.onscroll = function() {
30+
vm.scrollPos = document.body.scrollTop || document.documentElement.scrollTop || 0;
31+
$scope.$apply();
32+
};
33+
1534
// onSelect :: String
1635
// Side effect, modifies vm.selectedCategory
1736
vm.onSelectCategory = function onSelectCategory(category) {

0 commit comments

Comments
 (0)