Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add "Open in Codepen" to link example #1693

Merged
merged 5 commits into from
Dec 23, 2020
Merged

Add "Open in Codepen" to link example #1693

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f120f97
Update link example to use SVG and inline SVG for the CSS:before example
Dec 18, 2020
9bb38c0
Update size of SVG
Dec 18, 2020
86a5f52
Add codepen button to link example
Dec 18, 2020
d2cdc70
Update link example ot use https
Dec 18, 2020
c62ae75
Merge branch 'master' into codepen-link-example
mcking65 Dec 23, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions examples/css/core.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,12 @@ table.data.attributes tbody td {
hyphens: manual;
}

/* We need to override the top margin for the link example */
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we have to make a change for a specific example in the core.css?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All of the other examples follow the same layout -- there is a header which describes the example. If there is just on example, it says "Example". If there are multiple examples on the page, there is a header for each example (something like: "Example 1: Simple List of Links"). The open in codepen button is added automatically as a sibling element to this header.

In the case of the links, though, the three examples are in a table. So the styling has to be slightly different to look good.. I'm not sure another place to put it, I could put it in the link example pages css but that css is ONLY for the example itself not the surrounding page.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@spectranaut wrote:

All of the other examples follow the same layout -- there is a header which describes the example. If there is just on example, it says "Example". If there are multiple examples on the page, there is a header for each example (something like: "Example 1: Simple List of Links"). The open in codepen button is added automatically as a sibling element to this header.

In the case of the links, though, the three examples are in a table. So the styling has to be slightly different to look good..

Oh, I didn't realize the styling was that different. Link was one of the very early examples. And, due to its simplicity, it has had almost no attention over the years.

I'm not sure another place to put it, I could put it in the link example pages css but that css is ONLY for the example itself not the surrounding page.

It makes sense to be in core. We might want to revisit the page design. That is likely to happen naturally as part of the redesign project, so I guess we don't need a separate issue for it.

Copy link
Contributor

@carmacleod carmacleod Dec 23, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mcking65 @spectranaut
Another possibility is to put the whole table with all 3 link examples into a single codepen instead of having 3 separate codepens.


th .example-header {
margin-top: 1em;
}

.example-header > :first-child {
margin: 0;
}
Expand Down
6 changes: 3 additions & 3 deletions examples/link/css/link.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@

[role="link"].link3::before {
display: block;
content: url("../images/w3c-logo.png");
width: 153px;
height: 104px;
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='Ebene_1' height='143px' width='210px' version='1.1'%3E%3Cpath d='m52.352 24.412l16.955 57.643 16.953-57.643h45.964v5.73l-17.307 29.816c6.08 1.949 10.678 5.498 13.795 10.641 3.119 5.146 4.68 11.184 4.68 18.121 0 8.578-2.283 15.787-6.844 21.631s-10.465 8.768-17.713 8.768c-5.458 0-10.211-1.732-14.262-5.201-4.054-3.469-7.054-8.164-9.002-14.09l9.585-3.975c1.404 3.586 3.256 6.412 5.556 8.475 2.299 2.066 5.008 3.1 8.125 3.1 3.271 0 6.041-1.832 8.301-5.494 2.262-3.664 3.393-8.066 3.393-13.215 0-5.691-1.209-10.096-3.623-13.213-2.811-3.662-7.215-5.496-13.216-5.496h-4.674v-5.611l16.367-28.297h-19.755l-1.124 1.914-24.031 81.088h-1.169l-17.54-58.691-17.536 58.691h-1.168l-28.056-94.696h12.276l16.953 57.643 11.46-38.815-5.611-18.826h12.273v-0.004z' fill='%23005A9C'/%3E%3Cpath d='m196.02 24.412c-2.41 0-4.574 0.869-6.215 2.535-1.74 1.768-2.709 4.051-2.709 6.412s0.922 4.549 2.611 6.266c1.717 1.74 3.928 2.686 6.314 2.686 2.334 0 4.6-0.945 6.361-2.658 1.689-1.641 2.611-3.828 2.611-6.289 0-2.387-0.945-4.623-2.584-6.289-1.7-1.745-3.94-2.663-6.38-2.663zm7.78 9.024c0 2.064-0.799 3.979-2.26 5.393-1.543 1.494-3.457 2.289-5.57 2.289-1.986 0-3.949-0.818-5.418-2.311-1.465-1.494-2.287-3.406-2.287-5.443 0-2.039 0.846-4.027 2.361-5.566 1.416-1.443 3.328-2.211 5.416-2.211 2.139 0 4.051 0.799 5.543 2.311 1.45 1.438 2.22 3.373 2.22 5.538zm-7.53-5.321h-3.826v10.143h1.914v-4.324h1.891l2.063 4.324h2.137l-2.264-4.621c1.465-0.301 2.313-1.293 2.313-2.734 0.01-1.84-1.39-2.788-4.22-2.788zm-0.35 1.244c1.789 0 2.609 0.498 2.609 1.74 0 1.191-0.82 1.617-2.563 1.617h-1.617v-3.357h1.57z'/%3E%3Cpath d='m180.97 23.881l1.988 12.09-7.039 13.469s-2.701-5.715-7.191-8.875c-3.781-2.664-6.246-3.244-10.1-2.449-4.949 1.021-10.561 6.938-13.01 14.234-2.93 8.727-2.959 12.953-3.063 16.832-0.164 6.223 0.816 9.896 0.816 9.896s-4.275-7.906-4.234-19.486c0.027-8.268 1.328-15.764 5.152-23.16 3.365-6.504 8.367-10.408 12.807-10.867 4.59-0.473 8.215 1.738 11.02 4.131 2.941 2.516 5.916 8.01 5.916 8.01l6.92-13.825z'/%3E%3Cpath d='m181.84 92.289s-3.111 5.563-5.049 7.705c-1.939 2.145-5.408 5.918-9.691 7.807-4.283 1.887-6.529 2.24-10.764 1.836-4.229-0.406-8.16-2.855-9.537-3.877s-4.898-4.029-6.889-6.836c-1.992-2.807-5.102-8.416-5.102-8.416s1.732 5.623 2.82 8.01c0.623 1.375 2.541 5.576 5.266 9.232 2.541 3.41 7.475 9.283 14.973 10.609 7.498 1.328 12.65-2.041 13.926-2.855 1.273-0.814 3.961-3.066 5.664-4.889 1.775-1.896 3.457-4.32 4.385-5.773 0.682-1.063 1.789-3.215 1.789-3.215l-1.79-9.331z'/%3E%3C/svg%3E");
width: 210px;
height: 143px;
}
Binary file removed examples/link/images/w3c-logo.png
View file
Open in desktop
Binary file not shown.
6 changes: 6 additions & 0 deletions examples/link/images/w3c-logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 14 additions & 14 deletions examples/link/link.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ <h2 id="ex_label">Examples</h2>
<tbody>
<tr>
<th>
1
<div class="example-header"><span id="ex1_label">1</span></div>
</th>
<td>
<code>span</code> element with text content.
Expand All @@ -59,15 +59,15 @@ <h2 id="ex_label">Examples</h2>
<span
tabindex="0"
role="link"
onclick="goToLink(event, 'http://www.w3.org/')"
onkeydown="goToLink(event, 'http://www.w3.org/')">
onclick="goToLink(event, 'https://www.w3.org/')"
onkeydown="goToLink(event, 'https://www.w3.org/')">
W3C website
</span>
</td>
</tr>
<tr>
<th>
2
<div class="example-header"><span id="ex2_label">2</span></div>
</th>
<td>
<code>img</code> element with <code>alt</code> attribute.
Expand All @@ -76,15 +76,15 @@ <h2 id="ex_label">Examples</h2>
<img
tabindex="0"
role="link"
onclick="goToLink(event, 'http://www.w3.org/')"
onkeydown="goToLink(event, 'http://www.w3.org/')"
src="images/w3c-logo.png"
onclick="goToLink(event, 'https://www.w3.org/')"
onkeydown="goToLink(event, 'https://www.w3.org/')"
src="images/w3c-logo.svg"
alt="W3C Website">
</td>
</tr>
<tr>
<th>
3
<div class="example-header"><span id="ex3_label">3</span></div>
</th>
<td>
CSS <code>:before</code> content property on a <code>span</code> element.
Expand All @@ -94,8 +94,8 @@ <h2 id="ex_label">Examples</h2>
tabindex="0"
role="link"
class="link3"
onclick="goToLink(event, 'http://www.w3.org/TR/wai-aria-practices/')"
onkeydown="goToLink(event, 'http://www.w3.org/TR/wai-aria-practices/')"
onclick="goToLink(event, 'https://www.w3.org/TR/wai-aria-practices/')"
onkeydown="goToLink(event, 'https://www.w3.org/TR/wai-aria-practices/')"
aria-label="W3C website"></span>
</td>
</tr>
Expand Down Expand Up @@ -175,7 +175,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>

<section>
<h2>Javascript and CSS Source Code</h2>
<ul>
<ul id="css_js_files">
<li>
CSS:
<a href="css/link.css" type="tex/css">link.css</a>
Expand All @@ -202,9 +202,9 @@ <h3 id="sc3_label">Link 3</h3>
<pre><code id="sc3"></code></pre>
<div role="separator" id="sc3_end_sep" aria-labelledby="sc3_end_sep sc3_label" aria-label="End of"></div>
<script>
sourceCode.add('sc1', 'ex1');
sourceCode.add('sc2', 'ex2');
sourceCode.add('sc3', 'ex3');
sourceCode.add('sc1', 'ex1', 'ex1_label', 'css_js_files');
sourceCode.add('sc2', 'ex2', 'ex2_label', 'css_js_files');
sourceCode.add('sc3', 'ex3', 'ex3_label', 'css_js_files');
sourceCode.make();
</script>
</section>
Expand Down