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

Commit 51142ad

Browse files
HendrixerHendrixer
committed
💄 mobile first 💯
1 parent 2e98c55 commit 51142ad

12 files changed

+403
-1002
lines changed

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -57,12 +57,14 @@
5757
"@types/chalk": "^0.4.31",
5858
"@types/commander": "^2.9.0",
5959
"@types/html-webpack-plugin": "^2.28.0",
60+
"angular-prism": "^0.1.20",
6061
"angular2-highlight-js": "^5.0.0",
6162
"chalk": "^1.1.3",
6263
"commander": "^2.9.0",
6364
"css-loader": "^0.28.1",
6465
"lodash.flatten": "^4.4.0",
6566
"postcss-loader": "^2.0.5",
67+
"prismjs": "^1.6.0",
6668
"sass-loader": "^6.0.5",
6769
"shebang-loader": "^0.0.1",
6870
"slugify": "^1.1.0",

‎src/components/guides-list.component.ts

+82-13
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,28 @@
1-
import { Component , Input } from '@angular/core'
1+
import { Component, Input, Renderer2, Inject } from '@angular/core'
2+
import { sizes, colors, fonts, media, constants } from '../styles'
3+
import { DOCUMENT } from '@angular/platform-browser'
24

35
@Component({
46
selector: 'ui-guides-list',
57
template: `
8+
<div class="navbar" *ngIf="!showNav">
9+
<button (click)="openNav()">menu</button>
10+
</div>
11+
<div class="mobile-nav" *ngIf="showNav">
12+
<div class="overlay"></div>
13+
<div class="nav-content">
14+
<button (click)="closeNav()">close</button>
15+
<div
16+
class="item link"
17+
*ngFor="let uiGuide of uiGuides"
18+
[routerLink]="['/', uiGuide.id]"
19+
(click)="closeNav()"
20+
>
21+
{{uiGuide.name}}
22+
</div>
23+
</div>
24+
</div>
25+
626
<div class="ui-guides-list">
727
<div class="title link" [routerLink]="['/', 'components']">
828
Components
@@ -18,6 +38,38 @@ import { Component , Input } from '@angular/core'
1838
</div>
1939
`,
2040
styles: [`
41+
.navbar {
42+
height: ${sizes.navbarHeight};
43+
position: fixed;
44+
top: 0;
45+
left: 0;
46+
width: 100%;
47+
padding: 1rem;
48+
background-color: ${colors.main};
49+
color: ${colors.white};
50+
}
51+
52+
.nav-content {
53+
position: fixed;
54+
top: 0;
55+
left: 0;
56+
width: ${sizes.mobileNavHeight};
57+
padding: 1rem 0px;
58+
height: 100%;
59+
overflow-y: scroll;
60+
background-color: ${colors.main};
61+
color: ${colors.white};
62+
z-index: ${constants.maxZ}
63+
}
64+
.overlay {
65+
background-color: rgba(0,0,0,0.7);
66+
position: fixed;
67+
top: 0; right: 0; bottom: 0; left: 0;
68+
z-index: ${constants.maxZ - 1};
69+
}
70+
.mobile-nav {}
71+
${media.greaterThanPhone('.navbar{display: none; visibility: hidden}')}
72+
2173
.link:active {
2274
border: 0px;
2375
outline: none;
@@ -28,36 +80,53 @@ import { Component , Input } from '@angular/core'
2880
border: 0px;
2981
}
3082
.ui-guides-list {
31-
height: 100vh;
32-
max-height: 100vh;
83+
height: ${sizes.fullHeight};
3384
overflow-y: scroll;
34-
background-color: #E91E63;
35-
color: #FAFAFA;
85+
background-color: ${colors.main};
86+
color: ${colors.white};
3687
padding: 1.4rem 0px;
3788
position: fixed;
89+
top: 0;
90+
left: 0;
91+
width: ${sizes.sidbarWidth};
3892
}
93+
${media.phone('.ui-guides-list{display: none; visibility: hidden}')}
3994
.title {
40-
font-size: 1.5rem;
95+
font-size: ${fonts.sizes.large};
4196
text-align: left;
42-
line-height: 2rem;
43-
width: 100%;
44-
font-weight: 500;
4597
padding: .5rem 1rem;
4698
transition: background-color .1s ease-in;
4799
}
48100
.item {
49-
font-size: .8rem;
50-
font-weight: 300;
101+
font-size: ${fonts.sizes.small};
102+
font-weight: ${fonts.thickness.light};
51103
padding: .5rem 1rem;
52-
line-height: 1rem;
104+
line-height: ${fonts.sizes.regular};
53105
width: 100%;
54106
text-align: left;
55107
}
56108
.item:hover, .item.active, .title:hover, .title.active {
57-
background-color: #C2185B;
109+
background-color: ${colors.mainDark};
58110
}
59111
`]
60112
})
61113
export class UIGudiesListComponent {
114+
showNav = false
62115
@Input() uiGuides = []
116+
117+
118+
constructor(
119+
public renderer: Renderer2,
120+
@Inject(DOCUMENT) public docuemnt: Document
121+
) {}
122+
123+
openNav() {
124+
this.renderer.addClass(this.docuemnt.body, 'nav-open')
125+
this.showNav = true
126+
}
127+
128+
closeNav() {
129+
this.renderer.removeClass(this.docuemnt.body, 'nav-open')
130+
this.showNav = false
131+
}
63132
}

‎src/components/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@ export * from './ui-guide.component'
22
export * from './ui-example.component'
33
export * from './guides-list.component'
44
export * from './ui-api.component'
5+
export * from './prism.component'

‎src/components/prism.component.ts

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { Component, Input, Renderer2, ElementRef, AfterViewInit } from '@angular/core'
2+
declare var Prism: any
3+
4+
@Component({
5+
selector: 'prism-block',
6+
template: ``,
7+
})
8+
export class PrismComponent implements AfterViewInit {
9+
@Input() code: string
10+
@Input() language: string
11+
12+
private preNode: Node
13+
private codeNode: Node
14+
private nativeElement: Node
15+
16+
ngAfterViewInit () {
17+
this.preNode = this._renderer.createElement('pre')
18+
this.codeNode = this._renderer.createElement('code')
19+
this._renderer.addClass(this.codeNode, 'language-' + this.language)
20+
this._renderer.appendChild(this.nativeElement, this.preNode)
21+
this._renderer.appendChild(this.preNode, this.codeNode)
22+
this.codeNode.textContent = this.code
23+
24+
Prism.highlightElement(this.codeNode)
25+
}
26+
27+
constructor(private _renderer: Renderer2, private _el: ElementRef) {
28+
this.nativeElement = _el.nativeElement
29+
}
30+
}

‎src/components/ui-api.component.ts

+16-8
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,24 @@ import { ComponentAPI } from '../interfaces'
66
template: `
77
<div class="component-api">
88
<div class="inputs" *ngIf="api.inputs.length">
9-
<h4 class="title">Inputs</h4>
9+
<h2 class="title">Inputs</h2>
1010
<div class="row labels">
1111
<div class="col-xs" *ngFor="let inputLabel of inputLabels">
1212
<small class="label">{{inputLabel}}</small>
1313
</div>
1414
</div>
1515
<div class="row values" *ngFor="let input of api.inputs">
16-
<div class="col-xs">
16+
<div class="col-xs value">
1717
{{input.name}}
1818
</div>
19-
<div class="col-xs">
19+
<div class="col-xs value">
2020
{{input.description}}
2121
</div>
22-
<div class="col-xs">
22+
<div class="col-xs value">
2323
{{input.type}}
2424
</div>
25-
<div class="col-xs">
26-
{{input.args}}
25+
<div class="col-xs value">
26+
{{input.default}}
2727
</div>
2828
</div>
2929
</div>
@@ -32,15 +32,23 @@ import { ComponentAPI } from '../interfaces'
3232
`,
3333
styles: [`
3434
.title {
35-
35+
font-size: 3.5rem;
36+
font-weight: 300;
37+
margin-bottom: 3rem;
3638
}
3739
.labels {
3840
border-bottom: .5px solid #6A1B9A;
41+
margin-bottom: 2rem;
3942
}
4043
.label {
4144
color: #AB47BC;
4245
font-weight: 300;
43-
border-right: .5px solid #6A1B9A;
46+
font-size: 2rem;
47+
}
48+
.values {
49+
margin-bottom: 1.5rem;
50+
font-weight: 100;
51+
font-size: 1.2rem;
4452
}
4553
`]
4654
})

‎src/components/ui-example.component.ts

+4-7
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
@Component({
1515
selector: 'ui-example',
1616
template: `
17-
<div class="example row">
17+
<div class="example">
1818
<div class="title">
1919
<h2>{{example.name}}</h2>
2020
</div>
@@ -25,21 +25,19 @@ import {
2525
<div #uiGuideExample></div>
2626
</div>
2727
<div class="source html" *ngIf="example.showSource">
28-
<pre><code>{{example.template}}</code></pre>
28+
<prism-block [code]="example.template" language="html"></prism-block>
2929
</div>
3030
</div>
3131
`,
3232
styles: [`
3333
.example {
3434
flex-direction: column;
35-
padding-left: 4rem;
36-
padding-top: 1.5rem;
3735
}
3836
.title {
3937
margin-bottom: 3rem;
4038
}
4139
.title * {
42-
font-size: 3.5rem;
40+
font-size: 2.5rem;
4341
font-weight: 300;
4442
}
4543
.description {
@@ -50,8 +48,7 @@ import {
5048
font-weight: 100;
5149
}
5250
.source {
53-
font-size: 1.5rem;
54-
background-color: #efefef;
51+
font-size: 1.2rem;
5552
}
5653
.example-component {
5754
margin-bottom: 3rem;

‎src/components/ui-guide.component.ts

+13-6
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,14 @@ import {
1818
<div class="guide">
1919
<div class="guide-text">
2020
<div class="title">
21-
{{guide.name}}
21+
<h2>{{guide.name}}</h2>
2222
</div>
2323
<div class="guide-description">
2424
<p>{{guide.description}}</p>
2525
</div>
2626
</div>
2727
<div class="example" *ngFor="let example of guide.examples">
28-
<ui-example [guideExample]="example">
29-
</ui-example>
28+
<ui-example [guideExample]="example"></ui-example>
3029
</div>
3130
<div class="api">
3231
<ui-api [api]="guide.api"></ui-api>
@@ -35,14 +34,22 @@ import {
3534
`,
3635
styles: [`
3736
.guide {
38-
height: 100%;
39-
}
37+
margin: 0px !important;
38+
padding: 2rem 3.5rem;
39+
}
4040
.example, .guide-text {
4141
margin-bottom: 5rem;
4242
}
43-
.title {
43+
.title, .api {
4444
margin-bottom: 2rem;
4545
}
46+
.title {
47+
font-size: 3.5rem;
48+
font-weight: lighter;
49+
}
50+
.guide-description {
51+
font-size: 1.5rem;
52+
}
4653
`]
4754
})
4855
export class UIGuideComponent {

‎src/styles.ts

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
export const constants = {
2+
maxZ: 9999999
3+
}
4+
5+
export const sizes = {
6+
sidbarWidth: '15em',
7+
fullHeight: '100vh',
8+
navbarHeight: '20px',
9+
mobileNavHeight: '275px'
10+
}
11+
12+
export const colors = {
13+
white: '#FAFAFA',
14+
main: '#E91E63',
15+
mainDark: '#C2185B'
16+
}
17+
18+
export const fonts = {
19+
sizes: {
20+
small: '.8rem',
21+
regular: '1rem',
22+
large: '1.5rem',
23+
xlarge: '2rem'
24+
},
25+
thickness: {
26+
lightest: 100,
27+
light: 300,
28+
regular: 500,
29+
bold: 700
30+
}
31+
}
32+
33+
export const media = {
34+
greaterThanPhone(styles) {
35+
return `@media only screen and (min-width: 620px){
36+
${styles}
37+
}`
38+
},
39+
tablet(styles) {
40+
return `@media only screen and (min-width: 620px) and (max-width: 1024px) {
41+
${styles}
42+
}`
43+
},
44+
desktop(styles){
45+
return `@media only screen and (min-width: 1025px) and (max-width: 1200px) {
46+
${styles}
47+
}`
48+
},
49+
monitor(styles) {
50+
return `@media only screen and (min-width: 1201px) {
51+
${styles}
52+
}`
53+
},
54+
phone(styles) {
55+
return `@media only screen and (max-width: 619px) {
56+
${styles}
57+
}`
58+
}
59+
}

0 commit comments

Comments
 (0)