new style with new schema
This commit is contained in:
Eric Jimenez
parent
4a5f074061
commit
868abbe5c7
|
|
@ -31,21 +31,5 @@
|
|||
|
||||
"presskit": {
|
||||
"title": "Press Kit"
|
||||
},
|
||||
|
||||
"books": {
|
||||
"title": "Books"
|
||||
},
|
||||
|
||||
"training": {
|
||||
"title": "Training"
|
||||
},
|
||||
|
||||
"communities": {
|
||||
"title": "Communities"
|
||||
},
|
||||
|
||||
"tooling": {
|
||||
"title": "Tooling and Libraries"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"index": {
|
||||
"title": "Resources"
|
||||
"title": "Explore Angular Resources"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,100 +1,126 @@
|
|||
.resources {
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.h-affix {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.showcase-content {
|
||||
@media(max-width: 320px) {
|
||||
padding: 0;
|
||||
.affix-top {
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
.c-resource {
|
||||
h4 {
|
||||
margin: 0;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.resource-tabs {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
.c-resource-nav {
|
||||
margin-top: 48px;
|
||||
width: $unit * 20;
|
||||
z-index: $layer-1;
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
|
||||
a {
|
||||
color: #373E41;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.category {
|
||||
padding: 10px 0;
|
||||
|
||||
.category-link {
|
||||
display: block;
|
||||
margin: 2px 0;
|
||||
padding: 3px 14px;
|
||||
font-size: 18px !important;
|
||||
|
||||
&:hover {
|
||||
background: #edf0f2;
|
||||
color: #2B85E7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subcategory {
|
||||
.subcategory-link {
|
||||
display: block;
|
||||
margin: 2px 0;
|
||||
padding: 4px 14px;
|
||||
|
||||
&:hover {
|
||||
background: #edf0f2;
|
||||
color: #2B85E7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.h-anchor-offset {
|
||||
display: block;
|
||||
position: relative;
|
||||
top: -20px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.l-flex--column {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
@media(max-width: 500px) {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.resource-tab {
|
||||
display: inline;
|
||||
background-color: #CFD8DC;
|
||||
padding: $unit (3 * $unit);
|
||||
border-radius: 2px;
|
||||
margin-right: 16px;
|
||||
color: #455A64;
|
||||
|
||||
@media(max-width: 500px) {
|
||||
margin-right: 0;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
background-color: #B0BEC5;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: #1D77CE;
|
||||
background-color: #E3F2FB;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.subsection {
|
||||
margin-bottom: 64px;
|
||||
.c-resource-header {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.subsection-title {
|
||||
font-weight: 400;
|
||||
.c-contribute {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.card {
|
||||
display: inline-block;
|
||||
width: 320px;
|
||||
margin-right: $unit * 4;
|
||||
|
||||
@media(max-width: 320px) {
|
||||
margin-right: 0;
|
||||
width: 275px;
|
||||
}
|
||||
.c-resource-header h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.title-link {
|
||||
padding: 0 16px;
|
||||
.subcategory-title {
|
||||
padding: 16px 23px;
|
||||
margin: 0;
|
||||
background-color: $mist;
|
||||
color: #373E41;
|
||||
}
|
||||
|
||||
.description {
|
||||
padding-bottom: 32px;
|
||||
line-height: 21px;
|
||||
.h-capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 16px;
|
||||
.h-hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.resource-row-link {
|
||||
color: #1a2326;
|
||||
|
||||
&.card-link {
|
||||
font-size: 14px;
|
||||
color: #1D77CE;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #1D77CE;
|
||||
}
|
||||
border: transparent solid 1px;
|
||||
margin: 0;
|
||||
padding: 16px 23px 16px 23px;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.form a {
|
||||
color: $regal;
|
||||
.resource-row-link:hover {
|
||||
text-decoration: none;
|
||||
border-color: #2B85E7;
|
||||
border-radius: 4px;
|
||||
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);
|
||||
transform: translate3d(0, -2px, 0);
|
||||
}
|
||||
|
||||
@media(max-width: 900px) {
|
||||
.c-resource-nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.capitalize {
|
||||
text-transform: capitalize !important;
|
||||
}
|
||||
|
|
@ -1,39 +1,27 @@
|
|||
<div class="showcase js-resources-ctrl resources" ng-controller="ResourcesCtrl as ctrl">
|
||||
<div class="showcase-content">
|
||||
<div>
|
||||
<div class="form l-space-bottom-7">
|
||||
<div class="callout is-helpful">
|
||||
<p>
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="resources js-resources-ctrl grid-fixed" ng-controller="ResourcesCtrl as ctrl">
|
||||
<div class="c8">
|
||||
<div class="l-flex--column">
|
||||
<div class="showcase" ng-repeat="(category, categoryObj) in ctrl.fbObject">
|
||||
<header class="c-resource-header">
|
||||
<a class="h-anchor-offset" name="{{category}}"></a>
|
||||
<h2 class="text-headline text-uppercase">{{ category }}</h2>
|
||||
</header>
|
||||
|
||||
<h1>Explore our Resources</h1>
|
||||
<div class="shadow-1">
|
||||
<div ng-repeat="(subCategory, subcategoryObj) in categoryObj">
|
||||
<a class="h-anchor-offset" name="{{subCategory}}"></a>
|
||||
<h3 class="text-uppercase subcategory-title">{{subCategory}}</h3>
|
||||
|
||||
<div class="flex" style="margin-bottom: 64px;">
|
||||
<div class="resource-tabs">
|
||||
<div ng-repeat="(category, categoryContent) in ctrl.fbObject"
|
||||
class="resource-tab text-uppercase"
|
||||
ng-class="{selected: category === ctrl.selectedCategory}"
|
||||
ng-click="ctrl.onSelectCategory(category)">{{category}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section" ng-repeat="(category, categoryContent) in ctrl.fbObject">
|
||||
<div ng-if="ctrl.selectedCategory === category">
|
||||
<div ng-repeat="section in categoryContent">
|
||||
<div ng-repeat="(subsectionName, subsectionObj) in section">
|
||||
<h1 class="subsection-title">{{ subsectionObj.title }}</h1>
|
||||
<div class="subsection flex">
|
||||
<div ng-repeat="resource in subsectionObj.resources">
|
||||
<div class="card shadow-1" ng-if="resource.rev">
|
||||
<a target="_blank" href="{{resource.url}}">
|
||||
<h3 class="title-link">{{ resource.title }}</h3></a>
|
||||
<!-- NOTE: Description may not exists for all entries -->
|
||||
<p ng-if="resource.desc" class="description">{{ resource.desc }}</p>
|
||||
<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>
|
||||
</div>
|
||||
<div ng-repeat="(section, sectionObj) in subcategoryObj">
|
||||
<div ng-repeat="resource in sectionObj">
|
||||
<div class="c-resource" ng-if="resource.rev">
|
||||
<a class="l-flex--column resource-row-link" target="_blank" href="{{resource.url}}">
|
||||
<div>
|
||||
<h4>{{ resource.title }}</h4>
|
||||
<p class="resource-description" ng-if="resource.desc">{{ resource.desc }}</p>
|
||||
<p class="resource-description" ng-if="!resource.desc">No Description</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -42,4 +30,15 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="c3">
|
||||
<div class="c-resource-nav shadow-1 l-flex--column h-affix" ng-class="{ 'affix-top': ctrl.scrollPos > 200 }">
|
||||
<div class="category" ng-repeat="(category, categoryObj) in ctrl.fbObject">
|
||||
<a class="category-link h-capitalize" href="#{{ category }}">{{ category }}</a>
|
||||
<div class="subcategory" ng-repeat="(subCategory, subcategoryObj) in categoryObj">
|
||||
<a class="subcategory-link" href="#{{subCategory}}">{{subCategory}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -4,14 +4,33 @@
|
|||
* This controller is responsible for fetching all the data for the resources page,
|
||||
* from Firebase.
|
||||
*/
|
||||
angularIO.controller('ResourcesCtrl', ['$firebaseArray', '$firebaseObject','$location', function ($firebaseArray, $firebaseObject, $location) {
|
||||
angularIO.controller('ResourcesCtrl', ['$scope', '$element', '$window', '$firebaseArray', '$firebaseObject','$location', function ($scope, $window, $element, $firebaseArray, $firebaseObject, $location) {
|
||||
var DEFAULT_CATEGORY = 'education';
|
||||
var categoryRef = new Firebase("https://angularresources.firebaseio.com/");
|
||||
var categoryRef = new Firebase("https://project-8263071350145382327.firebaseio.com/");
|
||||
|
||||
// TODO: (ericjim): we need the database
|
||||
var devRef = new Firebase("https://project-8263071350145382327.firebaseio.com/Development");
|
||||
devRef.setPriority(1000);
|
||||
|
||||
var eduRef = new Firebase("https://project-8263071350145382327.firebaseio.com/Education");
|
||||
eduRef.setPriority(2000);
|
||||
|
||||
var communityRef = new Firebase("https://project-8263071350145382327.firebaseio.com/Community");
|
||||
communityRef.setPriority(3000);
|
||||
|
||||
|
||||
var vm = this;
|
||||
|
||||
vm.fbObject = $firebaseObject(categoryRef);
|
||||
vm.selectedCategory = $location.hash() ? $location.hash() : DEFAULT_CATEGORY;
|
||||
|
||||
vm.scrollPos = 0;
|
||||
|
||||
window.onscroll = function() {
|
||||
vm.scrollPos = document.body.scrollTop || document.documentElement.scrollTop || 0;
|
||||
$scope.$apply();
|
||||
};
|
||||
|
||||
// onSelect :: String
|
||||
// Side effect, modifies vm.selectedCategory
|
||||
vm.onSelectCategory = function onSelectCategory(category) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue