add placeholder text when no description is found
This commit is contained in:
Eric Jimenez
parent
e7bddeb5f9
commit
4a5f074061
|
|
@ -1,18 +1,100 @@
|
|||
.resources {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row-reverse;
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@media(max-width: 768px) {
|
||||
justify-content: center;
|
||||
flex-direction: column-reverse;
|
||||
.showcase-content {
|
||||
@media(max-width: 320px) {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.resource-tabs {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
font-size: 16px;
|
||||
color: #1a2326;
|
||||
|
||||
&.card-link {
|
||||
font-size: 14px;
|
||||
color: #1D77CE;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #1D77CE;
|
||||
}
|
||||
}
|
||||
|
||||
.form a {
|
||||
color: $regal;
|
||||
}
|
||||
}
|
||||
|
||||
.capitalize {
|
||||
text-transform: capitalize;
|
||||
text-transform: capitalize !important;
|
||||
}
|
||||
|
|
@ -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="js-resources-ctrl resources" ng-controller="ResourcesCtrl as ctrl">
|
||||
<div class="section" ng-repeat="(category, categoryContent) in ctrl.fbObject">
|
||||
<div class="showcase js-resources-ctrl resources" ng-controller="ResourcesCtrl as ctrl">
|
||||
<div class="showcase-content">
|
||||
<div>
|
||||
<h1 class="capitalize">{{category}}</h1>
|
||||
<div ng-repeat="section in categoryContent">
|
||||
<div ng-repeat="(subsectionName, subsectionObj) in section">
|
||||
<div>
|
||||
<h2>{{ subsectionObj.title }}</h2>
|
||||
<ul ng-repeat="resource in subsectionObj.resources">
|
||||
<li ng-if="resource.rev"><a target="_blank" href="{{resource.url}}">{{ resource.title }}</a></li>
|
||||
</ul>
|
||||
<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="(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>
|
||||
|
|
|
|||
|
|
@ -4,10 +4,19 @@
|
|||
* This controller is responsible for fetching all the data for the resources page,
|
||||
* 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 vm = this;
|
||||
|
||||
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;
|
||||
};
|
||||
|
||||
}]);
|
||||
Loading…
Reference in New Issue