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

fix(aio): resource nav

This commit is contained in:
Stefanie Fluin 2017-04-17 14:10:59 -07:00 committed by Pete Bacon Darwin
parent d8e2829e5b
commit 35a2dfc177
2 changed files with 19 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
aio/src/app/embedded/resource/resource-list.component.html
View File

@ -1,16 +1,16 @@
<div class="resources grid-fixed">
<div class="c8">
<div class="resources-container"> <!-- used to be just resources and fixed -->
<!--<div class="c8">-->
<div class="l-flex--column">
<div class="showcase" *ngFor="let category of categories">
<header class="c-resource-header">
<a class="h-anchor-offset" id="{{category.id}}"></a>
<h2 class="text-headline text-uppercase">{{category.title}}</h2>
<h2>{{category.title}}</h2>
</header>
<div class="shadow-1">
<div *ngFor="let subCategory of category.subCategories">
<a class="h-anchor-offset" id="{{subCategory.id}}"></a>
<h3 class="text-uppercase subcategory-title">{{subCategory.title}}</h3>
<h3 class="subcategory-title">{{subCategory.title}}</h3>
<div *ngFor="let resource of subCategory.resources">
<div class="c-resource" *ngIf="resource.rev">
@ -26,9 +26,9 @@
</div>
</div>
</div>
</div>
<!--</div>-->
<div class="c3">
<!--<div class="c3">-->
<div class="c-resource-nav shadow-1 l-flex--column h-affix" [ngClass]="{ 'affix-top': scrollPos > 200 }">
<div class="category" *ngFor="let category of categories">
<a class="category-link h-capitalize" [href]="href(category)">{{category.title}}</a>
@ -37,6 +37,6 @@
</div>
</div>
</div>
</div>
<!--</div>-->
</div>

43
aio/src/styles/2-modules/_resources.scss
View File

@ -1,20 +1,13 @@
.text-headline {
margin: 0px 0px ($unit * 2) 0px;
font-size: 24px;
font-weight: 400;
line-height: 32px;
.showcase {
width: 80%;
}
.grid-fixed {
margin: 0 auto;
*zoom: 1;
width: 960px;
.c-resource-nav {
width: 20%;
}
.grid-fixed .c3, .grid-fixed .c8, {
display: inline;
margin-left: 10px;
margin-right: 10px;
.resources-container {
position: relative;
}
.grid-fixed:after, .grid-fixed:before {
@ -28,12 +21,6 @@
width: 0;
height: 0;
}
.grid-fixed .c3 {
width: 220px;
}
.grid-fixed .c8 {
width: 620px;
}
@media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) {
.grid-fixed {
@ -99,7 +86,7 @@
}
}
.resources {
aio-resource-list {
.shadow-1 {
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
@ -107,18 +94,10 @@
}
.showcase {
margin-bottom: $unit * 6;
margin-bottom: 8px * 6;
border-radius: 4px;
}
.h-affix {
position: fixed;
}
.affix-top {
top: 150px;
}
.c-resource {
h4 {
margin: 0;
@ -131,8 +110,10 @@
}
.c-resource-nav {
margin-top: 48px;
width: $unit * 20;
position: fixed;
top: 142px;
right: 32px;
width: 8px * 20;
z-index: 1;
background-color: #fff;
border-radius: 2px;