iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add placeholder text when no description is found

This commit is contained in:
Eric Jimenez 2016-05-31 11:33:46 -04:00
parent e7bddeb5f9
commit 4a5f074061
3 changed files with 137 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
public/resources/css/module/_resources.scss
View File

@ -1,18 +1,100 @@
.resources { .resources {
.flex {
display: flex;
flex-wrap: wrap;
}
.showcase-content {
@media(max-width: 320px) {
padding: 0;
margin: 0;
}
}
.resource-tabs {
margin: 0;
padding: 0;
list-style: none;
display: flex; display: flex;
justify-content: space-between;
flex-direction: row-reverse; flex-direction: row-reverse;
@media(max-width: 768px) { @media(max-width: 500px) {
justify-content: center;
flex-direction: column-reverse; 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 {
margin-bottom: 64px;
}
.subsection-title {
font-weight: 400;
}
.card {
display: inline-block;
width: 320px;
margin-right: $unit * 4;
@media(max-width: 320px) {
margin-right: 0;
width: 275px;
}
}
.title-link {
padding: 0 16px;
}
.description {
padding-bottom: 32px;
line-height: 21px;
}
a { a {
font-size: 16px; font-size: 16px;
color: #1a2326;
&.card-link {
font-size: 14px;
color: #1D77CE;
}
&:hover {
color: #1D77CE;
}
}
.form a {
color: $regal;
} }
} }
.capitalize { .capitalize {
text-transform: capitalize; text-transform: capitalize !important;
} }

46
public/resources/index.ejs
View File

@ -1,16 +1,42 @@
<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> <div class="showcase js-resources-ctrl resources" ng-controller="ResourcesCtrl as ctrl">
<div class="showcase-content">
<div class="js-resources-ctrl resources" ng-controller="ResourcesCtrl as ctrl">
<div class="section" ng-repeat="(category, categoryContent) in ctrl.fbObject">
<div> <div>
<h1 class="capitalize">{{category}}</h1> <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>
<h1>Explore our Resources</h1>
<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="section in categoryContent">
<div ng-repeat="(subsectionName, subsectionObj) in section"> <div ng-repeat="(subsectionName, subsectionObj) in section">
<div> <h1 class="subsection-title">{{ subsectionObj.title }}</h1>
<h2>{{ subsectionObj.title }}</h2> <div class="subsection flex">
<ul ng-repeat="resource in subsectionObj.resources"> <div ng-repeat="resource in subsectionObj.resources">
<li ng-if="resource.rev"><a target="_blank" href="{{resource.url}}">{{ resource.title }}</a></li> <div class="card shadow-1" ng-if="resource.rev">
</ul> <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> </div>
</div> </div>

11
public/resources/js/controllers/resources-controller.js
View File

@ -4,10 +4,19 @@
* 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', function ($firebaseArray, $firebaseObject) { angularIO.controller('ResourcesCtrl', ['$firebaseArray', '$firebaseObject','$location', function ($firebaseArray, $firebaseObject, $location) {
var DEFAULT_CATEGORY = 'education';
var categoryRef = new Firebase("https://angularresources.firebaseio.com/"); var categoryRef = new Firebase("https://angularresources.firebaseio.com/");
var vm = this; var vm = this;
vm.fbObject = $firebaseObject(categoryRef); vm.fbObject = $firebaseObject(categoryRef);
vm.selectedCategory = $location.hash() ? $location.hash() : DEFAULT_CATEGORY;
// onSelect :: String
// Side effect, modifies vm.selectedCategory
vm.onSelectCategory = function onSelectCategory(category) {
$location.hash(category);
vm.selectedCategory = category;
};
}]); }]);