Skip to content

Commit f6cbbf5

Browse files
CITguyCITguy
authored
Merge pull request #162 from rackerlabs/SURF-XYZ-SandCastle-BugFixes
fix(*): Fix lots of bugs
2 parents 95d9100 + 2811c9f commit f6cbbf5

File tree

27 files changed

+711
-382
lines changed

27 files changed

+711
-382
lines changed

‎docs/_data/nav.json5‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,9 @@
8181
{ label: '<hx-panelfoot>', path: 'hx-panelfoot' },
8282
{ label: '<hx-panelhead>', path: 'hx-panelhead' },
8383
{ label: '<hx-popover>', path: 'hx-popover' },
84+
{ label: '<hx-popover-body>', path: 'hx-popover-body' },
85+
{ label: '<hx-popover-foot>', path: 'hx-popover-foot' },
86+
{ label: '<hx-popover-head>', path: 'hx-popover-head' },
8487
{ label: '<hx-reveal>', path: 'hx-reveal' },
8588
{ label: '<hx-search>', path: 'hx-search' },
8689
{ label: '<hx-status>', path: 'hx-status' },

‎docs/_templates/application.njk‎

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,33 @@
22
<html lang="{{site.language}}">
33
{% include 'partials/head.njk' %}
44
<body class="hxVertical" id="top">
5+
<!-- This link should be the first item a user can tab to. -->
6+
<a href="#content">Skip to main content</a>
7+
58
<header id="head">
69
{% include 'partials/global_nav.njk' %}
710
</header>
811

9-
<div id="stage">
10-
<nav id="nav" class="hxNav">
11-
{% include 'partials/app_nav.njk' %}
12-
</nav>
13-
{% block layout %}
14-
<main id="content" class="hxBox-md">
15-
{% block content %}
16-
{# page content goes here #}
17-
{% endblock %}
18-
</main>
19-
<aside class="hxSiderail hxBox-md">
20-
{% block sidebar %}
21-
{% include 'partials/sidebar.njk' %}
22-
{% endblock %}
23-
</aside>
24-
{% endblock %}
12+
<div id="app">
13+
<div id="stage">
14+
<nav id="nav" class="hxNav">
15+
{% include 'partials/app_nav.njk' %}
16+
</nav>
17+
18+
{% block layout %}
19+
<main role="main" id="content" class="hxBox-md">
20+
{% block content %}
21+
{# page content goes here #}
22+
{% endblock %}
23+
</main>
24+
25+
<aside class="hxSiderail hxBox-md">
26+
{% block sidebar %}
27+
{% include 'partials/sidebar.njk' %}
28+
{% endblock %}
29+
</aside>
30+
{% endblock %}
31+
</div>
2532
</div>
2633

2734
<footer id="foot" class="hxRow hxGutterless">

‎docs/components/layouts/horizontal-layout-template.html‎

Lines changed: 72 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<title>Horizontal - App Title</title>
55
<meta charset="utf-8" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<!-- CHANGE ME: update or remove -->
7+
<!-- FIXME: update or remove -->
88
<base href="{{site.baseHref}}" />
99

1010
<link rel="shortcut icon" href="images/favicon.png" />
@@ -19,70 +19,81 @@
1919
<script src="{{data.url.cdn}}/{{data.cdn.js.polyfillLoader}}"></script>
2020
</head>
2121
<body class="hxHorizontal" id="top">
22+
<!--
23+
a11y: This link should be the first item a user can tab to.
24+
-->
25+
<a href="#content">Skip to main content</a>
26+
2227
<header id="head">
2328
<!-- Eyebrow Goes Here -->
2429
</header>
2530

26-
<div id="stage">
27-
<nav id="nav" class="hxNav">
28-
{% include 'partials/app_nav.njk' %}
29-
</nav>
30-
31-
<main id="content">
32-
<hx-panel class="hxSpan-7-xs">
33-
<hx-panelbody class="hxBox-md">
34-
<!--
35-
NOTE: not all apps will have use for breadcrumbs in a Horizontal layout.
36-
-->
37-
<nav class="hxBreadcrumb">
38-
<a href="#">Home</a>
39-
<hx-icon class="delimiter" type="angle-right"></hx-icon>
40-
<a href="components/layouts">Layouts</a>
41-
<hx-icon class="delimiter" type="angle-right"></hx-icon>
42-
<a href="#">Horizontal Layout</a>
43-
</nav>
44-
<h1>Left Panel</h1>
45-
46-
<div class="hxAlert">
47-
<div class="hxAlert__icon">
48-
<hx-icon type="info-circle"></hx-icon>
49-
</div>
50-
<div class="hxAlert__text">
51-
Copy the source of this page to use as a template for your application.
31+
<div id="app">
32+
<div id="stage">
33+
<nav id="nav" class="hxNav">
34+
{% include 'partials/app_nav.njk' %}
35+
</nav>
36+
37+
<!--
38+
a11y: For accessibility support in legacy browsers, the
39+
role="main" attribute must be present.
40+
-->
41+
<main role="main" id="content">
42+
<hx-panel class="hxSpan-7-xs">
43+
<hx-panelbody class="hxBox-md">
44+
<!--
45+
NOTE: not all apps will have use for breadcrumbs in a Horizontal layout.
46+
-->
47+
<nav class="hxBreadcrumb">
48+
<a href="#">Home</a>
49+
<hx-icon class="delimiter" type="angle-right"></hx-icon>
50+
<a href="components/layouts">Layouts</a>
51+
<hx-icon class="delimiter" type="angle-right"></hx-icon>
52+
<a href="#">Horizontal Layout</a>
53+
</nav>
54+
<h1>Left Panel</h1>
55+
56+
<div class="hxAlert">
57+
<div class="hxAlert__icon">
58+
<hx-icon type="info-circle"></hx-icon>
59+
</div>
60+
<div class="hxAlert__text">
61+
Copy the source of this page to use as a template for your application.
62+
</div>
5263
</div>
53-
</div>
54-
55-
<ul>
56-
<li>
57-
The application footer will remain at the bottom of the screen.
58-
</li>
59-
<li>
60-
Content is arranged using panels.
61-
<ul>
62-
<li>
63-
The main content area (<code>main#content</code>) is styled to
64-
provide a row-based flexbox layout. You can use the column
65-
width classes available in the Grid to divide the space.
66-
</li>
67-
<li>
68-
Each panel scrolls vertically, independently of other panels.
69-
</li>
70-
</ul>
71-
</li>
72-
<li>
73-
Use your best judgement to size panels so that content within each
74-
panel is readable.
75-
</li>
76-
</ul>
77-
</hx-panelbody>
78-
</hx-panel>
79-
80-
<hx-panel class="hxSpan-5-xs">
81-
<hx-panelbody class="hxBox-md">
82-
<h2>Right Panel</h2>
83-
</hx-panelbody>
84-
</hx-panel>
85-
</main>
64+
65+
<ul>
66+
<li>
67+
The application footer will remain at the bottom of the screen.
68+
</li>
69+
<li>
70+
Content is arranged using panels.
71+
<ul>
72+
<li>
73+
The main content area (<code>main#content</code>) is styled to
74+
provide a row-based flexbox layout. You can use the column
75+
width classes available in the Grid to divide the space.
76+
</li>
77+
<li>
78+
Each panel scrolls vertically, independently of other panels.
79+
</li>
80+
</ul>
81+
</li>
82+
<li>
83+
Use your best judgement to size panels so that content within each
84+
panel is readable.
85+
</li>
86+
</ul>
87+
</hx-panelbody>
88+
</hx-panel>
89+
90+
<hx-panel class="hxSpan-5-xs">
91+
<hx-panelbody class="hxBox-md">
92+
<h2>Right Panel</h2>
93+
</hx-panelbody>
94+
</hx-panel>
95+
</main>
96+
</div>
8697
</div>
8798

8899
<footer id="foot">
@@ -103,6 +114,7 @@ <h2>Right Panel</h2>
103114
<!-- FIXME: point to adapter in node_modules/@webcomponents/webcomponentsjs -->
104115
<script src="{{data.url.cdn}}/{{data.cdn.js.es5adapter}}"></script>
105116
</span>
117+
106118
<!-- FIXME: point to HelixUI behavior in node_modules/helix-ui -->
107119
<script src="dist/scripts/helix-ui.browser.min.js"></script>
108120

0 commit comments

Comments
 (0)