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

Commit a72cd54

Browse files
jelbournkara
authored andcommitted
Fix SVGs scaling poorly on mobile (#182)
1 parent b9ff129 commit a72cd54

File tree

5 files changed

+28
-13
lines changed

5 files changed

+28
-13
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,8 @@
2323
}
2424

2525
.docs-component-category-list-card-summary {
26-
height: 2.4em;
26+
min-height: 2.4em;
27+
margin-bottom: 8px;
2728
}
2829

2930
.docs-component-category-list-header {

src/app/pages/homepage/_homepage-theme.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
app-homepage {
99
.docs-header-background {
10-
background: url('/assets/img/homepage/material_splash.svg') repeat-x center center, mat-color($primary);
10+
background: mat-color($primary);
1111
}
1212

1313
.docs-header-headline {

src/app/pages/homepage/homepage.html

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<header class="docs-header-background">
22
<div class="docs-header-section">
33
<div class="docs-header-headline">
4-
<h1>Angular Material</h1>
5-
<h2> Material Design components for Angular apps</h2>
4+
<h1 class="mat-h1">Angular Material</h1>
5+
<h2> Material Design components for Angular</h2>
66
</div>
77
<div class="docs-header-start">
88
<a md-raised-button class="docs-button" routerLink="guide/getting-started">Get started</a>
@@ -13,7 +13,9 @@ <h2> Material Design components for Angular apps</h2>
1313
<div class="docs-homepage-promo">
1414
<div class="docs-homepage-row">
1515
<div class="docs-homepage-promo-img">
16-
<docs-svg-viewer svgHref="../assets/img/homepage/sprintzerotoapp.svg"></docs-svg-viewer>
16+
<docs-svg-viewer
17+
svgHref="../assets/img/homepage/sprintzerotoapp.svg"
18+
scaleToContainer="true"></docs-svg-viewer>
1719
</div>
1820
<div class="docs-homepage-promo-desc">
1921
<h2>Sprint from Zero to App</h2>
@@ -23,7 +25,9 @@ <h2>Sprint from Zero to App</h2>
2325
</div>
2426
<div class="docs-homepage-row docs-homepage-reverse-row">
2527
<div class="docs-homepage-promo-img">
26-
<docs-svg-viewer svgHref="../assets/img/homepage/fastandconsistent.svg"></docs-svg-viewer>
28+
<docs-svg-viewer
29+
svgHref="../assets/img/homepage/fastandconsistent.svg"
30+
scaleToContainer="true"></docs-svg-viewer>
2731
</div>
2832
<div class="docs-homepage-promo-desc">
2933
<h2>Fast and Consistent</h2>
@@ -33,7 +37,9 @@ <h2>Fast and Consistent</h2>
3337
</div>
3438
<div class="docs-homepage-row">
3539
<div class="docs-homepage-promo-img">
36-
<docs-svg-viewer svgHref="../assets/img/homepage/versatile.svg"></docs-svg-viewer>
40+
<docs-svg-viewer
41+
svgHref="../assets/img/homepage/versatile.svg"
42+
scaleToContainer="true"></docs-svg-viewer>
3743
</div>
3844
<div class="docs-homepage-promo-desc">
3945
<h2>Versatile</h2>

src/app/pages/homepage/homepage.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,20 @@
22
$margin-promotion-sections: 60px;
33

44
.docs-header-background {
5-
height: 500px;
5+
height: 300px;
66
margin-bottom: 40px;
77
}
88

99
.docs-header-section {
1010
text-align: center;
11-
padding-top: 160px;
11+
padding-top: 60px;
1212
}
1313

1414
.docs-header-headline {
1515
h1 {
16-
font-size: 30px;
17-
font-weight: 400;
18-
line-height: 40px;
16+
font-size: 56px;
17+
font-weight: 300;
18+
line-height: 56px;
1919
margin: 15px 0 15px 0;
2020
}
2121

src/app/shared/svg-viewer/svg-viewer.ts

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ import {ThemeStorage, DocsSiteTheme} from '../theme-chooser/theme-storage/theme-
1313
})
1414

1515
export class SvgViewer {
16-
@Input() public svgHref: string;
16+
@Input() svgHref: string;
17+
@Input() scaleToContainer: boolean;
1718

1819
private _subscription: Subscription;
1920
private currTheme: DocsSiteTheme;
@@ -63,6 +64,13 @@ export class SvgViewer {
6364

6465
public injectSvg(template) {
6566
this.el.nativeElement.innerHTML = template;
67+
68+
if (this.scaleToContainer) {
69+
let svg = this.el.nativeElement.querySelector('svg');
70+
svg.setAttribute('width', '100%');
71+
svg.setAttribute('height', '100%');
72+
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
73+
}
6674
}
6775

6876
private _getSvgFromDom() {

0 commit comments

Comments
 (0)