Skip to content

Commit 6bee16d

Browse files
HuggableSquaretoddjordan
HuggableSquare
authored and
toddjordan
committed
Make import example function better on small screens
1 parent e89fc54 commit 6bee16d

File tree

4 files changed

+38
-31
lines changed

4 files changed

+38
-31
lines changed

‎app/controllers/project-version/index.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/styles/components/_highlight.scss

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,19 +28,22 @@
2828
}
2929
}
3030

31-
.scroller {
32-
overflow: auto;
33-
}
34-
3531
pre {
3632
margin: 0;
3733
font-size: 1.2em;
34+
.wrapper {
35+
padding-right: 60px;
36+
}
37+
}
38+
39+
.import-copy ~ table .wrapper {
40+
padding-right: 92px;
3841
}
3942

4043
table {
4144
border: none;
4245
margin: 0;
43-
table-layout: auto;
46+
overflow: auto;
4447
width: 100%;
4548
z-index: auto;
4649

@@ -67,6 +70,7 @@
6770

6871
&.code {
6972
background-color: $code-background;
73+
overflow: auto;
7074
vertical-align: top;
7175
padding: 0.4em 0 0.4em 0.4em;
7276
}
@@ -96,10 +100,11 @@
96100
}
97101

98102
.ribbon {
99-
@include position(absolute, 0.33em -1px null null);
103+
@include position(absolute, 0.33em 0px null null);
100104
@include size(52px 20px);
101105
background: 0 0 no-repeat;
102106
background-size: 52px 20px;
107+
background-color: $code-background;
103108
z-index: 9;
104109
}
105110

@@ -180,8 +185,12 @@ a code {
180185

181186
.import-copy {
182187
position: absolute;
183-
right: 60px;
184-
padding: 2px 0 0 0 !important;
188+
right: 52px;
189+
top: 2px;
190+
background-color: $code-background;
191+
line-height: 1;
192+
padding: 0px 8px;
193+
z-index: 9;
185194
cursor: pointer;
186195
button {
187196
background-color: transparent;

‎app/templates/components/import-example.hbs

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,21 @@
11
<div class="highlight javascript">
22
<div class="ribbon"></div>
3-
<div class="scroller">
4-
<table class="CodeRay">
5-
<tbody>
6-
<tr>
7-
<td class="code"><pre><span class="keyword">import</span> {{item}} <span class="keyword">from</span> <span class="string">'{{package}}'</span>;</pre></td>
8-
{{#if (is-clipboard-supported)}}
9-
<td class="import-copy">
10-
{{#if showClipboardSuccessIcon}}
11-
{{svg-jar "success" width="24px" height="24px"}}
12-
{{else}}
13-
{{#copy-button clipboardText=(concat "import " item " from '" package "';") title="Copy to clipboard" success=(action "showSuccess")}}
14-
{{svg-jar "copy" width="24px" height="24px"}}
15-
{{/copy-button}}
16-
{{/if}}
17-
</td>
18-
{{/if}}
19-
</tr>
20-
</tbody>
21-
</table>
22-
</div>
3+
{{#if (is-clipboard-supported)}}
4+
<div class="import-copy">
5+
{{#if showClipboardSuccessIcon}}
6+
{{svg-jar "success" width="24px" height="24px"}}
7+
{{else}}
8+
{{#copy-button clipboardText=(concat "import " item " from '" package "';") title="Copy to clipboard" success=(action "showSuccess")}}
9+
{{svg-jar "copy" width="24px" height="24px"}}
10+
{{/copy-button}}
11+
{{/if}}
12+
</div>
13+
{{/if}}
14+
<table class="CodeRay">
15+
<tbody>
16+
<tr>
17+
<td class="code"><pre><span class="wrapper"><span class="keyword">import</span> {{item}} <span class="keyword">from</span> <span class="string">'{{package}}'</span>;</span></pre></td>
18+
</tr>
19+
</tbody>
20+
</table>
2321
</div>

‎tests/unit/utils/create-excerpt-test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { module, test } from 'qunit';
33

44
module('Unit | Utility | create excerpt');
55

6-
const testString = "<html><head></head><body><p><code>HashLocation</code> implements the location API using the browser&apos;s\nhash. At present, it relies on a <code>hashchange</code> event existing in the\nbrowser.</p>\n<p>Using <code>HashLocation</code> results in URLs with a <code>#</code> (hash sign) separating the\nserver side URL portion of the URL from the portion that is used by Ember.</p>\n<p>Example:</p>\n<div class=\"highlight app/router.js\">\n <div class=\"ribbon\"></div>\n <div class=\"scroller\">\n <table class=\"CodeRay\">\n <thead>\n <tr>\n <td colspan=\"2\">app/router.js</td>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td class=\"line-numbers\"><pre>1\n2\n3\n4\n5\n6\n7\n8\n9\n</pre></td>\n <td class=\"code\"><pre>Router.map(<span class=\"function\"><span class=\"keyword\">function</span><span class=\"params\">()</span> </span>{\n <span class=\"keyword\">this</span>.route(<span class=\"string\">&apos;posts&apos;</span>, <span class=\"function\"><span class=\"keyword\">function</span><span class=\"params\">()</span> </span>{\n <span class=\"keyword\">this</span>.route(<span class=\"string\">&apos;new&apos;</span>);\n });\n});\n\nRouter.reopen({\n location: <span class=\"string\">&apos;hash&apos;</span>\n});</pre></td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n \n<p>This will result in a posts.new url of <code>/#/posts/new</code>.</p>\n</body></html>";
6+
const testString = "<html><head></head><body><p><code>HashLocation</code> implements the location API using the browser&apos;s\nhash. At present, it relies on a <code>hashchange</code> event existing in the\nbrowser.</p>\n<p>Using <code>HashLocation</code> results in URLs with a <code>#</code> (hash sign) separating the\nserver side URL portion of the URL from the portion that is used by Ember.</p>\n<p>Example:</p>\n<div class=\"highlight app/router.js\">\n <div class=\"ribbon\"></div>\n <table class=\"CodeRay\">\n <thead>\n <tr>\n <td colspan=\"2\">app/router.js</td>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td class=\"line-numbers\"><pre>1\n2\n3\n4\n5\n6\n7\n8\n9\n</pre></td>\n <td class=\"code\"><pre>Router.map(<span class=\"function\"><span class=\"keyword\">function</span><span class=\"params\">()</span> </span>{\n <span class=\"keyword\">this</span>.route(<span class=\"string\">&apos;posts&apos;</span>, <span class=\"function\"><span class=\"keyword\">function</span><span class=\"params\">()</span> </span>{\n <span class=\"keyword\">this</span>.route(<span class=\"string\">&apos;new&apos;</span>);\n });\n});\n\nRouter.reopen({\n location: <span class=\"string\">&apos;hash&apos;</span>\n});</pre></td>\n </tr>\n </tbody>\n </table>\n </div>\n \n<p>This will result in a posts.new url of <code>/#/posts/new</code>.</p>\n</body></html>";
77

88
test('it works', function(assert) {
99
let result = createExcerpt(testString);

0 commit comments

Comments
 (0)