Skip to content
This repository was archived by the owner on Dec 18, 2024. It is now read-only.

Commit 3c424f5

Browse files
mmalerbajelbourn
mmalerba
authored and
jelbourn
committed
Styles for the category list and component list (#48)
* make sidenav shell look like mocks * toolbar shadow * fix lint * category list styles * component list styles
1 parent 74c14d2 commit 3c424f5

13 files changed

+161
-25
lines changed

‎src/_app-theme.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
@import './app/pages/homepage/homepage-theme';
33
@import './app/pages/component-sidenav/component-sidenav-theme';
44
@import './app/pages/component-viewer/component-viewer-theme';
5+
@import './app/pages/component-list/component-list-theme';
6+
@import './app/pages/component-category-list/component-category-list-theme';
7+
58
@import './app/shared/navbar/navbar-theme';
69
@import './app/shared/example-viewer/example-viewer-theme';
710

@@ -21,6 +24,8 @@
2124
@include component-viewer-sidenav-theme($theme);
2225
@include home-page-theme($theme);
2326
@include component-viewer-theme($theme);
27+
@include component-list-theme($theme);
28+
@include component-category-list-theme($theme);
2429
@include nav-bar-theme($theme);
2530
@include example-viewer-theme($theme);
2631
}

‎src/app/material-docs-app.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
<app-navbar></app-navbar>
1+
<app-navbar [class.md-elevation-z6]="showShadow"></app-navbar>
22
<router-outlet></router-outlet>

‎src/app/material-docs-app.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
material-docs-app {
2+
position: absolute;
3+
top: 0;
4+
bottom: 0;
5+
left: 0;
6+
right: 0;
7+
display: flex;
8+
flex-direction: column;
9+
}
10+
11+
material-docs-app > app-component-sidenav {
12+
flex: 1 1 auto;
13+
}
14+
15+
app-navbar {
16+
position: relative;
17+
z-index: 10;
18+
}

‎src/app/material-docs-app.ts‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import {Component} from '@angular/core';
1+
import {Component, ViewEncapsulation} from '@angular/core';
2+
import {Router} from '@angular/router';
23

34

45
@Component({
@@ -7,8 +8,16 @@ import {Component} from '@angular/core';
78
styleUrls: ['./material-docs-app.scss'],
89
host: {
910
'[class.docs-dark-theme]': 'isDarkTheme',
10-
}
11+
},
12+
encapsulation: ViewEncapsulation.None,
1113
})
1214
export class MaterialDocsApp {
13-
isDarkTheme: boolean = false;
15+
isDarkTheme = false;
16+
showShadow = false;
17+
18+
constructor(router: Router) {
19+
router.events.subscribe(data => {
20+
this.showShadow = data.url.startsWith('/components');
21+
});
22+
}
1423
}

‎src/app/pages/component-category-list/_component-category-list-theme.scss‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@mixin component-category-list-theme($theme) {
2+
$primary: map-get($theme, primary);
3+
$accent: map-get($theme, accent);
4+
$warn: map-get($theme, warn);
5+
$background: map-get($theme, background);
6+
$foreground: map-get($theme, foreground);
7+
8+
.docs-component-category-list-header {
9+
background: md-color($primary);
10+
11+
h1 {
12+
color: md-color($primary, default-contrast);
13+
}
14+
}
15+
16+
.docs-component-category-list-card-summary {
17+
color: md-color($foreground, secondary-text);
18+
}
19+
}

‎src/app/pages/component-category-list/component-category-list.html‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
1-
<md-card
2-
*ngFor="let category of docItems.getItemsInCategories()"
3-
class="docs-component-category-list-category"
4-
[routerLink]="['/components/category/', category.id]">
5-
<md-card-title>{{category.name}}</md-card-title>
6-
<p>{{category.summary}}</p>
7-
<img md-card-image src="../../../assets/img/component-categories/{{category.id}}.svg">
8-
</md-card>
1+
<div class="docs-component-category-list-header">
2+
<h1>Component Library</h1>
3+
</div>
4+
5+
<div class="docs-component-category-list">
6+
<md-card
7+
*ngFor="let category of docItems.getItemsInCategories()"
8+
class="docs-component-category-list-card"
9+
[routerLink]="['/components/category/', category.id]">
10+
<md-card-title>{{category.name}}</md-card-title>
11+
<p class="docs-component-category-list-card-summary">{{category.summary}}</p>
12+
<div class="docs-component-category-list-card-image"
13+
[style.backgroundImage]="'url(\'../../../assets/img/component-categories/' + category.id +'.svg\')'">
14+
</div>
15+
</md-card>
16+
</div>

‎src/app/pages/component-category-list/component-category-list.scss‎

Lines changed: 32 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,34 @@
1-
.docs-component-category-list-category {
1+
.docs-component-category-list {
2+
padding: 20px;
3+
}
4+
5+
.docs-component-category-list-card {
26
display: inline-block;
3-
width: 300px;
7+
width: 260px;
8+
margin: 20px;
9+
vertical-align: top;
10+
cursor: pointer;
11+
}
12+
13+
.docs-component-category-list-card-image {
14+
width: 100%;
15+
height: 160px;
16+
background-size: contain;
17+
background-repeat: no-repeat;
18+
background-position: center;
19+
}
20+
21+
.docs-component-category-list-card-summary {
22+
height: 2.4em;
23+
}
24+
25+
.docs-component-category-list-header {
26+
padding-left: 20px;
27+
28+
h1 {
29+
font-size: 30px;
30+
font-weight: 300;
31+
margin: 0;
32+
padding: 50px;
33+
}
434
}

‎src/app/pages/component-category-list/component-category-list.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import {Component} from '@angular/core';
2-
import {
3-
DocumentationItems
4-
} from '../../shared/documentation-items/documentation-items';
2+
import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
53

64

75
@Component({

‎src/app/pages/component-list/_component-list-theme.scss‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
@mixin component-list-theme($theme) {
2+
$primary: map-get($theme, primary);
3+
$accent: map-get($theme, accent);
4+
$warn: map-get($theme, warn);
5+
$background: map-get($theme, background);
6+
$foreground: map-get($theme, foreground);
7+
8+
.docs-component-list-header {
9+
background: md-color($primary);
10+
11+
h1 {
12+
color: md-color($primary, default-contrast);
13+
}
14+
}
15+
16+
.docs-component-list-item {
17+
color: md-color($foreground, secondary-text);
18+
}
19+
}

‎src/app/pages/component-list/component-list.html‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
1+
<div class="docs-component-list-header">
2+
<h1> {{category.name}} </h1>
3+
</div>
4+
15
<div class="docs-component-list-category">
2-
<h2>{{category.name}}</h2>
36
<a *ngFor="let component of category.items"
47
class="docs-component-list-item"
58
[routerLink]="['/components/component/', component.id]">
6-
<img src="../../../assets/img/components/{{component.id}}.svg"
7-
class="docs-component-list-item-icon"
8-
[alt]="component.name">
9+
<div class="docs-component-list-item-icon"
10+
[attr.aria-label]="component.name"
11+
[style.backgroundImage]="'url(\'../../../assets/img/components/' + component.id + '.svg\')'">
12+
</div>
913
{{component.name}}
1014
</a>
1115
</div>

0 commit comments

Comments
 (0)