new style with new schema
This commit is contained in:
Eric Jimenez
parent
4a5f074061
commit
868abbe5c7
|
|
@ -31,21 +31,5 @@
|
||||||
|
|
||||||
"presskit": {
|
"presskit": {
|
||||||
"title": "Press Kit"
|
"title": "Press Kit"
|
||||||
},
|
|
||||||
|
|
||||||
"books": {
|
|
||||||
"title": "Books"
|
|
||||||
},
|
|
||||||
|
|
||||||
"training": {
|
|
||||||
"title": "Training"
|
|
||||||
},
|
|
||||||
|
|
||||||
"communities": {
|
|
||||||
"title": "Communities"
|
|
||||||
},
|
|
||||||
|
|
||||||
"tooling": {
|
|
||||||
"title": "Tooling and Libraries"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"index": {
|
"index": {
|
||||||
"title": "Resources"
|
"title": "Explore Angular Resources"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -1,100 +1,126 @@
|
||||||
.resources {
|
.resources {
|
||||||
.flex {
|
|
||||||
display: flex;
|
.h-affix {
|
||||||
flex-wrap: wrap;
|
position: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.showcase-content {
|
.affix-top {
|
||||||
@media(max-width: 320px) {
|
top: 50px;
|
||||||
padding: 0;
|
}
|
||||||
|
|
||||||
|
.c-resource {
|
||||||
|
h4 {
|
||||||
|
margin: 0;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.resource-tabs {
|
.c-resource-nav {
|
||||||
margin: 0;
|
margin-top: 48px;
|
||||||
padding: 0;
|
width: $unit * 20;
|
||||||
list-style: none;
|
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;
|
display: flex;
|
||||||
flex-direction: row-reverse;
|
flex-direction: column;
|
||||||
|
|
||||||
@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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.subsection {
|
.c-resource-header {
|
||||||
margin-bottom: 64px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subsection-title {
|
.c-contribute {
|
||||||
font-weight: 400;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.c-resource-header h2 {
|
||||||
display: inline-block;
|
margin: 0;
|
||||||
width: 320px;
|
|
||||||
margin-right: $unit * 4;
|
|
||||||
|
|
||||||
@media(max-width: 320px) {
|
|
||||||
margin-right: 0;
|
|
||||||
width: 275px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-link {
|
.subcategory-title {
|
||||||
padding: 0 16px;
|
padding: 16px 23px;
|
||||||
|
margin: 0;
|
||||||
|
background-color: $mist;
|
||||||
|
color: #373E41;
|
||||||
}
|
}
|
||||||
|
|
||||||
.description {
|
.h-capitalize {
|
||||||
padding-bottom: 32px;
|
text-transform: capitalize;
|
||||||
line-height: 21px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
.h-hide {
|
||||||
font-size: 16px;
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.resource-row-link {
|
||||||
color: #1a2326;
|
color: #1a2326;
|
||||||
|
border: transparent solid 1px;
|
||||||
&.card-link {
|
margin: 0;
|
||||||
font-size: 14px;
|
padding: 16px 23px 16px 23px;
|
||||||
color: #1D77CE;
|
position: relative;
|
||||||
}
|
text-decoration: none;
|
||||||
|
transition: all .3s;
|
||||||
&:hover {
|
|
||||||
color: #1D77CE;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.form a {
|
.resource-row-link:hover {
|
||||||
color: $regal;
|
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="resources js-resources-ctrl grid-fixed" ng-controller="ResourcesCtrl as ctrl">
|
||||||
<div class="showcase-content">
|
<div class="c8">
|
||||||
<div>
|
<div class="l-flex--column">
|
||||||
<div class="form l-space-bottom-7">
|
<div class="showcase" ng-repeat="(category, categoryObj) in ctrl.fbObject">
|
||||||
<div class="callout is-helpful">
|
<header class="c-resource-header">
|
||||||
<p>
|
<a class="h-anchor-offset" name="{{category}}"></a>
|
||||||
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>.
|
<h2 class="text-headline text-uppercase">{{ category }}</h2>
|
||||||
</p>
|
</header>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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 ng-repeat="(section, sectionObj) in subcategoryObj">
|
||||||
<div class="resource-tabs">
|
<div ng-repeat="resource in sectionObj">
|
||||||
<div ng-repeat="(category, categoryContent) in ctrl.fbObject"
|
<div class="c-resource" ng-if="resource.rev">
|
||||||
class="resource-tab text-uppercase"
|
<a class="l-flex--column resource-row-link" target="_blank" href="{{resource.url}}">
|
||||||
ng-class="{selected: category === ctrl.selectedCategory}"
|
<div>
|
||||||
ng-click="ctrl.onSelectCategory(category)">{{category}}
|
<h4>{{ resource.title }}</h4>
|
||||||
</div>
|
<p class="resource-description" ng-if="resource.desc">{{ resource.desc }}</p>
|
||||||
</div>
|
<p class="resource-description" ng-if="!resource.desc">No Description</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="section" ng-repeat="(category, categoryContent) in ctrl.fbObject">
|
</a>
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -42,4 +30,15 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
@ -4,14 +4,33 @@
|
||||||
* This controller is responsible for fetching all the data for the resources page,
|
* This controller is responsible for fetching all the data for the resources page,
|
||||||
* from Firebase.
|
* 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 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;
|
var vm = this;
|
||||||
|
|
||||||
vm.fbObject = $firebaseObject(categoryRef);
|
vm.fbObject = $firebaseObject(categoryRef);
|
||||||
vm.selectedCategory = $location.hash() ? $location.hash() : DEFAULT_CATEGORY;
|
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
|
// onSelect :: String
|
||||||
// Side effect, modifies vm.selectedCategory
|
// Side effect, modifies vm.selectedCategory
|
||||||
vm.onSelectCategory = function onSelectCategory(category) {
|
vm.onSelectCategory = function onSelectCategory(category) {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue