juju-core

Merge lp:~makyo/juju-core/enable-viewboxing into lp:juju-core/docs

  1. enable-viewboxing
  2. Merge into docs
Proposed by Madison Scott-Clary
Status: Merged
Merge reported by: Nick Veitch
Merged at revision: not available
Proposed branch: lp:~makyo/juju-core/enable-viewboxing
Merge into: lp:juju-core/docs
Diff against target: 38 lines (+12/-2)
1 file modified
htmldocs/authors-charm-icon.html (+12/-2)
To merge this branch: bzr merge lp:~makyo/juju-core/enable-viewboxing
Reviewer Review Type Date Requested Status
Nick Veitch Pending
Review via email: mp+180354@code.launchpad.net

Description of the change

Add information about viewboxing.

Certain browsers, such as FireFox and IE10, will not size an SVG within a
viewport, but rather size the viewport and clip the SVG (that is, it's
not scaled); this is important now that the GUI displays the charm icons
within the service blocks. To fix this. SVGs require the viewBox
attribute to be set on the root element. This branch includes
instructions and screenshots for how to do this in Inkscape. There will
be subsequent branches in lp:charmworld to either a) check for the
existence of the viewBox attribute on ingest or possibly b) add the
attribute in the process of ingesting the SVG.

As a drive-by, the title of the charm icon page was changed from "None"
to "Charm Icons"

To post a comment you must log in.

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'htmldocs/authors-charm-icon.html'
2--- htmldocs/authors-charm-icon.html 2013-08-08 15:29:48 +0000
3+++ htmldocs/authors-charm-icon.html 2013-08-15 14:59:13 +0000
4@@ -2,7 +2,7 @@
5 <html>
6 <head>
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
8- <title>Juju Documentation - None</title>
9+ <title>Juju Documentation - Charm Icons</title>
10 <link href='https://fonts.googleapis.com/css?family=Ubuntu:400,300,300italic,400italic,700,700italic|Ubuntu+Mono' rel='stylesheet' type='text/css' />
11 <link rel="stylesheet" type="text/css" media="screen" href="//juju.ubuntu.com/wp-content/themes/juju-website/css/reset.css" />
12 <link rel="stylesheet" type="text/css" media="screen" href="//juju.ubuntu.com/wp-content/themes/juju-website/css/960.css" />
13@@ -174,9 +174,19 @@
14
15 <div class="step">
16 <h2>Check it over</h2>
17- <p>You can check what your icon might look like with the reviewed badge by making the "BADGE"layer visible. Make sure you hide it again before saving out the SVG file. Congratulations, your shiny icon is now ready!</p>
18+ <p>You can check what your icon might look like with the reviewed badge by making the "BADGE"layer visible. Make sure you hide it again before saving out the SVG file.</p>
19 <img src="./media/author-charm-icons-6.png" width='600' alt="Step six">
20 </div>
21+
22+ <span class="number" > 7 </span>
23+
24+ <div class="step">
25+ <h2>Save the SVG</h2>
26+ <p>Save the SVG file as an "Optimized SVG"...</p>
27+ <img src="./media/author-charm-icons-7-1.png" width='600' alt="Step six, part one">
28+ <p>...and make sure to check the "Enable viewboxing" option. Congratulations, your shiny icon is now ready!</p>
29+ <img src="./media/author-charm-icons-7-2.png" width='450' alt="Step six, part two">
30+ </div>
31 <h2> And finally... some quick Dos and Don'ts</h2>
32
33 <div class="block">
34
35=== added file 'htmldocs/media/author-charm-icons-7-1.png'
36Binary files htmldocs/media/author-charm-icons-7-1.png 1970-01-01 00:00:00 +0000 and htmldocs/media/author-charm-icons-7-1.png 2013-08-15 14:59:13 +0000 differ
37=== added file 'htmldocs/media/author-charm-icons-7-2.png'
38Binary files htmldocs/media/author-charm-icons-7-2.png 1970-01-01 00:00:00 +0000 and htmldocs/media/author-charm-icons-7-2.png 2013-08-15 14:59:13 +0000 differ

Subscribers

People subscribed via source and target branches