Skip to content

Commit b38b19e

Browse files
RoyalIcingRoyalIcing
committed
Improve IA
1 parent 6725883 commit b38b19e

File tree

8 files changed

+151
-14
lines changed

8 files changed

+151
-14
lines changed

‎apps/components_guide_web/assets/css/app.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,4 +41,12 @@ ul:not([class]) > li > ul:not([class]) {
4141
@apply pl-8;
4242
}
4343

44+
/* Navigation links */
45+
a[aria-current=page].hover\:bg-gray-800 {
46+
@apply bg-gray-800;
47+
}
48+
a[aria-current=page][class*="hover\:border-"] {
49+
border-color: currentColor;
50+
}
51+
4452
/* @import "./phoenix.css"; */

‎apps/components_guide_web/lib/components_guide_web/controllers/concepts_controller.ex

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
defmodule ComponentsGuideWeb.ConceptsController do
2+
use ComponentsGuideWeb, :controller
3+
4+
def index(conn, _params) do
5+
render(conn, "index.html")
6+
end
7+
end

‎apps/components_guide_web/lib/components_guide_web/router.ex

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ defmodule ComponentsGuideWeb.Router do
1919

2020
get "/", LandingController, :index
2121

22+
get "/concepts", ConceptsController, :index
23+
2224
get "/links", LinksController, :index
2325

2426
get "/accessibility-first-testing", AccessibilityFirstTestingController, :index

‎apps/components_guide_web/lib/components_guide_web/templates/concepts/index.html.eex

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<header class="text-white bg-purple-600" style="background: <%= header_background %>;">
2+
<div class="container px-6 pt-12 pb-12">
3+
<h1 class="mx-auto max-w-4xl text-5xl text-center font-bold leading-tight text-shadow">
4+
<%= "Learn the concepts that are essential, no matter your stack." %>
5+
</h1>
6+
<p class="mt-8 mx-auto max-w-3xl text-4xl text-center leading-snug italic text-yellow-100 text-shadow">
7+
<%= "Compare robust techniques across different technologies." %>
8+
</p>
9+
</div>
10+
</header>
11+
12+
<div class="bg-white">
13+
<section aria-label="Concepts" class="container pt-8 pb-16 text-2xl">
14+
<%= topic_article title: "Naming" do %>
15+
<ul class="list-disc nums-tabular">
16+
<li>Semantics vs presentation
17+
<li>Sharing a design language
18+
<li>Structuring modules and files
19+
<li>Better documentation with clearer concepts
20+
</ul>
21+
<% end %>
22+
23+
<%= topic_article title: "Testing" do %>
24+
<ul class="list-disc nums-tabular">
25+
<li>Isolated unit tests
26+
<li>Integration tests
27+
<li>Acceptance tests
28+
<li>Accessibility tests
29+
</ul>
30+
<% end %>
31+
32+
<%= topic_article title: "Accessibility" do %>
33+
<ul class="list-disc nums-tabular">
34+
<li>In the browser
35+
<li>On iOS & Mac
36+
<li>HTML semantics
37+
</ul>
38+
<% end %>
39+
40+
<%= topic_article title: "Performance" do %>
41+
<ul class="list-disc nums-tabular">
42+
<li>Inform first by measuring data
43+
<li>Fast loading as a priority
44+
<li>Using assets and performance budgets
45+
<li>Reducing bloat and waste
46+
</ul>
47+
<% end %>
48+
</section>
49+
</div>
50+
51+
<section class="text-white bg-purple-600" style="background: <%= header_background %>;">
52+
<div aria-label="Submit" class="container px-6 pt-12 pb-12 text-center">
53+
<input class="mb-4 md:mr-2 block w-full md:inline-block md:w-2/5 p-2 text-2xl leading-tight text-black rounded-lg md:mb-0 border-4 border-white focus:border-purple-300">
54+
<button href="/signin/github" class="inline-block px-6 py-3 text-2xl leading-tight font-bold text-white bg-gray-900 rounded-lg" style="background: rgba(0,0,0,0.5);">
55+
<%= "Suggest Link" %>
56+
</button>
57+
</div>
58+
</section>

‎apps/components_guide_web/lib/components_guide_web/templates/layout/_header.html.eex

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,27 @@
11
<header class="bg-gray-900 text-white">
2-
<section class="container flex flex-col md:flex-row items-center">
2+
<section class="container flex flex-col md:flex-row items-stretch">
33
<a href="/" class="block px-3 py-4 text-right text-base font-bold italic uppercase text-red-100 leading-tight tracking-wide hover:bg-gray-800">
44
<span>Components <br>·Guide</span>
55
</a>
6-
<nav role="navigation" class="flex-grow sm:pl-8 lg:px-16 text-base md:text-base">
7-
<ul class="flex flex-col md:flex-row justify-around pt-2 pb-2">
8-
<li><a href="/accessibility-first-testing" class="block px-4 py-2 md:py-3 font-bold border-b-4 border-transparent hover:bg-gray-800 hover:border-red-400"><%= "A11Y-First Testing" %></a></li>
9-
<li><a href="/react+typescript" class="block px-4 py-2 md:py-3 font-bold border-b-4 border-transparent hover:bg-gray-800 hover:border-red-400"><%= "React + TypeScript" %></a></li>
10-
<li><a href="/swiftui" class="block px-4 py-2 md:py-3 font-bold border-b-4 border-transparent hover:bg-gray-800 hover:border-red-400"><%= "SwiftUI + Combine" %></a></li>
11-
<li><a href="/links" class="block px-4 py-2 md:py-3 font-bold border-b-4 border-transparent hover:bg-gray-800 hover:border-red-400"><%= "Other Resources" %></a></li>
6+
<nav role="navigation" class="flex-grow sm:pl-8 lg:px-16 text-base md:text-lg">
7+
<ul class="h-full flex flex-col md:flex-row justify-around items-stretch tracking-wide">
8+
<%= nav_items(@path_info) %>
9+
10+
<li hidden><a href="/accessibility-first-testing" class="block px-4 py-2 md:py-3 font-bold border-b-4 border-transparent hover:bg-gray-800 hover:border-red-400"><%= "A11Y-First Testing" %></a>
11+
<li hidden><a href="/react+typescript" class="block px-4 py-2 md:py-3 font-bold border-b-4 border-transparent hover:bg-gray-800 hover:border-red-400"><%= "React + TypeScript" %></a>
12+
<li hidden><a href="/swiftui" class="block px-4 py-2 md:py-3 font-bold border-b-4 border-transparent hover:bg-gray-800 hover:border-red-400"><%= "SwiftUI + Combine" %></a>
13+
<li hidden><a href="/links" class="block px-4 py-2 md:py-3 font-bold border-b-4 border-transparent hover:bg-gray-800 hover:border-red-400"><%= "Other Resources" %></a>
1214
<% if false do %>
1315
<li class="py-1">
1416
<a href="/signin/github" class="inline-block md:block px-4 py-2 md:py-2 font-bold text-white bg-red-700 rounded" style="background: linear-gradient(0deg, #E0003C 0%, #FF493F 50%, #FF584A 100%);">
1517
<%= "Sign in with GitHub" %>
1618
</a>
17-
</li>
1819
<% end %>
1920
<% if false do %>
20-
<li><a href="/swiftui" class="block py-4 font-bold"><%= "SwiftUI + Combine" %></a></li>
21-
<li><a href="/rxjs" class="block py-4 font-bold"><%= "React + TS + RxJS" %></a></li>
21+
<li><a href="/swiftui" class="block py-4 font-bold"><%= "SwiftUI + Combine" %></a>
22+
<li><a href="/rxjs" class="block py-4 font-bold"><%= "React + TS + RxJS" %></a>
2223
<% if false do %><li><a href="/react+typescript" class="block py-4 font-bold"><%= "React + TypeScript" %></a></li><% end %>
23-
<li><a href="/css+typescript" class="block py-4 font-bold"><%= "CSS + TypeScript" %></a></li>
24+
<li><a href="/css+typescript" class="block py-4 font-bold"><%= "CSS + TypeScript" %></a>
2425
<% end %>
2526
</ul>
2627
</nav>

‎apps/components_guide_web/lib/components_guide_web/templates/layout/app.html.eex

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,18 @@
88
<link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
99
</head>
1010
<body>
11-
<%= render ComponentsGuideWeb.LayoutView, "_header.html" %>
11+
<%= render ComponentsGuideWeb.LayoutView, "_header.html", path_info: @conn.path_info %>
1212
<main role="main">
1313
<p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
1414
<p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
1515
<%= render @view_module, @view_template, assigns %>
1616
</main>
17-
<footer class="container pt-4 pb-6 text-gray-600">
18-
<p><small>Copyright © 2020 Patrick Smith</small></p>
17+
<footer class="container pt-4 pb-6 text-gray-600 tracking-wide">
18+
<p><small class="text-xs">Copyright © 2020 Patrick Smith</small></p>
19+
<ul class="list-none text-xs mt-4 leading-loose">
20+
<li><a href="https://github.com/ComponentsTV/components_guide">Source on GitHub</a>
21+
<li><a href="https://github.com/ComponentsTV/components_guide/blob/master/LICENSE">License</a>
22+
</ul>
1923
</footer>
2024
<script type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
2125
</body>

‎apps/components_guide_web/lib/components_guide_web/views/concepts_view.ex

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
defmodule ComponentsGuideWeb.ConceptsView do
2+
use ComponentsGuideWeb, :view
3+
require EEx
4+
use ComponentsGuideWeb.Snippets
5+
6+
@hello 8
7+
8+
def header_background do
9+
Styling.linear_gradient("150grad", [
10+
{:lab, 70, 40, 50},
11+
{:lab, 50, 90, 40},
12+
{:lab, 50, 90, 20},
13+
{:lab, 50, 90, 10},
14+
{:lab, 60, 70, 60},
15+
])
16+
end
17+
18+
def topic_article(assigns, block) do
19+
~E"""
20+
<article class="mb-8">
21+
<h2 class="mb-2 text-4xl leading-normal font-bold text-red-700"><%= @title %></h2>
22+
<%= block[:do] %>
23+
</article>
24+
"""
25+
end
26+
end

‎apps/components_guide_web/lib/components_guide_web/views/layout_view.ex

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,34 @@
11
defmodule ComponentsGuideWeb.LayoutView do
22
use ComponentsGuideWeb, :view
3+
require EEx
4+
5+
# def render("_header2.html", assigns) do
6+
# end
7+
8+
@nav_links [
9+
{"By Concept", to: "/concepts"},
10+
{"By Technology", to: "/links"},
11+
{"Live Feed", to: "/feed"},
12+
{"About", to: "/about"}
13+
]
14+
15+
def nav_items(path_info) do
16+
Enum.map(@nav_links, fn
17+
{title, to: to} -> nav_link_item(title: title, to: to, path_info: path_info)
18+
end)
19+
end
20+
21+
def nav_link_item(assigns) do
22+
to = assigns[:to]
23+
24+
current =
25+
case Path.join(["/" | assigns[:path_info]]) do
26+
^to -> "page"
27+
_ -> "false"
28+
end
29+
30+
~E"""
31+
<li><a href="<%= @to %>" aria-current="<%= current %>" class="flex h-full items-center px-4 py-3 md:py-4 font-bold border-b-4 border-transparent hover:bg-gray-800 hover:border-red-400"><%= @title %></a>
32+
"""
33+
end
334
end

0 commit comments

Comments
 (0)