Skip to content

Commit

Permalink
Update examples of 3 header variants
Browse files Browse the repository at this point in the history 
Closes #89
  • Loading branch information
@thatbudakguy
thatbudakguy committed Jan 15, 2025
1 parent e19b28c commit c7f01ab
Show file tree
Hide file tree
Showing 7 changed files with 599 additions and 116 deletions.
66 changes: 20 additions & 46 deletions header/with_navigation_links.html → header/dark.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!doctype html>
<html>
<!DOCTYPE html>
<html lang="en">
<head>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
Expand Down Expand Up @@ -73,9 +73,17 @@
</button>

<div
class="d-md-block d-none"
class="collapse navbar-collapse justify-content-md-end"
id="user-util-collapse"
>
<ul class="navbar-nav">
<li class="nav-item d-md-none">
<a href="#item1" class="nav-link">Item 1</a>
</li>
<li class="nav-item d-md-none">
<a href="#item1" class="nav-link">Item 2</a>
</li>
<hr class="text-bg-dark"/>
<li class="nav-item">
<a id="bookmarks_nav" class="nav-link" href="/bookmarks">
Bookmarks
Expand All @@ -102,7 +110,6 @@
</div>
</div>
</nav>

<div id="feedback" class="collapse">
<div class="container pt-3">
<div class="row justify-content-center">
Expand Down Expand Up @@ -183,14 +190,14 @@
type="submit"
name="commit"
value="Send"
class="btn btn-secondary"
class="btn btn-primary"
data-disable-with="Send"
/>
<button
name="button"
type="button"
data-action="feedback#cancel"
class="btn btn-outline-secondary"
class="btn btn-outline-primary"
>
Cancel
</button>
Expand All @@ -203,60 +210,27 @@
<div class="masthead bg-dark palo-alto-dark">
<div class="container">
<div class="row align-items-center">
<div
class="col-md-8 d-flex"
>
<div class="h1 my-4"><a href="/">Website at Stanford</a></div>
<div class="col-md-8 d-flex">
<div class="h1 my-3"><a href="/">Website at Stanford</a></div>
</div>
<div class="col-md-4">
<div class="col-md-4 d-none d-md-block">
<nav
class="navbar collapse navbar-collapse justify-content-md-end navbar-expand-md d-md-flex justify-content-md-end"
aria-label="browse" id="user-util-collapse"
class="navbar navbar-expand d-flex justify-content-end"
aria-label="browse"
>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/item1">Item 1</a>
</li>
<li class="nav-item ms-md-3">
<li class="nav-item ms-3">
<a class="nav-link" href="/item2">Item 2</a>
</li>
<hr />
<li class="nav-item d-md-none">
<a id="bookmarks_nav" class="nav-link" href="/bookmarks">
Bookmarks
<span
class="badge badge-secondary bg-secondary"
data-role="bookmark-counter"
>0</span
>
</a>
</li>
<li class="nav-item d-md-none">
<a class="nav-link" href="/search_history">History</a>
</li>
<li class="nav-item d-md-none">
<a
href="#feedback"
class="nav-link"
data-bs-toggle="collapse"
data-bs-target="#feedback"
>Feedback</a
>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>

<div class="container">
Note: the <code>data-form-type="other"</code> attribute is a workaround
for a bug in Dashlane password manager. See
<a href="https://github.com/sul-dlss/vt-arclight/issues/495"
>https://github.com/sul-dlss/vt-arclight/issues/495</a
>
</div>
</body>
</html>
</html>
82 changes: 33 additions & 49 deletions header/without_navigation_links.html → header/dark_no_nav_links.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@

<!doctype html>
<html>
<!DOCTYPE html>
<html lang="en">
<head>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
Expand All @@ -27,21 +26,37 @@
></script>
</head>
<body>
<nav id="skip-link" aria-label="Skip links">
<!-- skip links here -->
<nav
id="skip-link"
class="visually-hidden-focusable"
aria-label="Skip links"
>
<div class="container-xl">
<a class="d-inline-flex m-1 py-2 px-3" href="#search_field"
>Skip to search</a
>
<a class="d-inline-flex m-1 py-2 px-3" href="#main-container"
>Skip to main content</a
>
<a class="d-inline-flex m-1 py-2 px-3" href="#documents"
>Skip to first result</a
>
</div>
</nav>
<header>
<div class="container">
<a class="su-brand-bar__logo" href="https://www.stanford.edu"
>Stanford University</a
>
<div class="identity-bar">
<div class="container">
<a class="su-brand-bar__logo" href="https://www.stanford.edu"
>Stanford University</a
>
</div>
</div>
<nav class="navbar navbar-expand-md bg-dark palo-alto-dark">
<div class="container">
<a
class="mb-0 navbar-brand navbar-logo"
href="https://library.stanford.edu"
>Stanford Libraries</a
>Stanford University Libraries</a
>
<button
class="navbar-toggler navbar-toggler-right collapsed"
Expand All @@ -57,7 +72,10 @@
<span class="navbar-toggler-icon"></span>
</button>

<div class="d-md-block d-none">
<div
class="collapse navbar-collapse justify-content-md-end"
id="user-util-collapse"
>
<ul class="navbar-nav">
<li class="nav-item">
<a id="bookmarks_nav" class="nav-link" href="/bookmarks">
Expand Down Expand Up @@ -85,7 +103,6 @@
</div>
</div>
</nav>

<div id="feedback" class="collapse">
<div class="container pt-3">
<div class="row justify-content-center">
Expand Down Expand Up @@ -166,14 +183,14 @@
type="submit"
name="commit"
value="Send"
class="btn btn-secondary"
class="btn btn-primary"
data-disable-with="Send"
/>
<button
name="button"
type="button"
data-action="feedback#cancel"
class="btn btn-outline-secondary"
class="btn btn-outline-primary"
>
Cancel
</button>
Expand All @@ -186,45 +203,12 @@
<div class="masthead bg-dark palo-alto-dark">
<div class="container">
<div class="row align-items-center">
<div
class="col-md-8 d-flex"
>
<div class="col d-flex">
<div class="h1 my-3"><a href="/">Website at Stanford</a></div>
</div>
<div>
<nav
class="navbar collapse navbar-collapse"
aria-label="browse" id="user-util-collapse"
>
<ul class="navbar-nav">
<li class="nav-item d-md-none">
<a id="bookmarks_nav" class="nav-link" href="/bookmarks">
Bookmarks
<span
class="badge badge-secondary bg-secondary"
data-role="bookmark-counter"
>0</span
>
</a>
</li>
<li class="nav-item d-md-none">
<a class="nav-link" href="/search_history">History</a>
</li>
<li class="nav-item d-md-none">
<a
href="#feedback"
class="nav-link"
data-bs-toggle="collapse"
data-bs-target="#feedback"
>Feedback</a
>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
</body>
</html>
</html>
52 changes: 41 additions & 11 deletions header/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!doctype html>
<html>
<!DOCTYPE html>
<html lang="en">
<head>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
Expand All @@ -10,11 +10,6 @@

<link href="../styles/sul.css" rel="stylesheet" />

<style>
.palo-alto-dark {
--bs-dark-rgb: var(--stanford-palo-alto-dark-rgb);
}
</style>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
Expand All @@ -28,11 +23,46 @@

<body>
<h1>Headers</h1>
<h2>With navigation links</h2>
<iframe src="with_navigation_links.html" style="width: 100vw; height: 100vh"></iframe>

<h2 class="mt-5">Without navigation links</h2>
<iframe src="without_navigation_links.html" style="width: 100vw; height: 100vh"></iframe>
<p>
Note: the <code>data-form-type="other"</code> attribute is a workaround
for a bug in Dashlane password manager. See
<a href="https://github.com/sul-dlss/vt-arclight/issues/495"
>https://github.com/sul-dlss/vt-arclight/issues/495</a
>
</p>

<h2 class="my-3">Dark version</h2>

<iframe
title="Dark version"
src="dark.html"
style="width: 100vw; height: 25vh"
></iframe>


<h2 class="my-3">Dark version (without nav links)</h2>

<iframe
title="Dark version; no nav links"
src="dark_no_nav_links.html"
style="width: 100vw; height: 25vh"
></iframe>

<h2 class="my-3">White version ("SDR theme")</h2>

<iframe
title="White version"
src="white.html"
style="width: 100vw; height: 25vh"
></iframe>

<h2 class="my-3">Light version</h2>

<iframe
title="Light version"
src="light.html"
style="width: 100vw; height: 25vh"
></iframe>
</body>
</html>
Loading

0 comments on commit c7f01ab

Please sign in to comment.