includes/components/navbar.html - Issue 29587584: Issue 5635 - Implement website-default navbar component

Keyboard Shortcuts

	File
u :	up to issue
m :	publish + mail comments
M :	edit review message
j / k :	jump to file after / before current file
J / K :	jump to next file with a comment after / before current file
	Side-by-side diff
i :	toggle intra-line diffs
e :	expand all comments
c :	collapse all comments
s :	toggle showing all comments
n / p :	next / previous diff chunk or comment
N / P :	next / previous comment
<Up> / <Down> :	next / previous line
<Enter> :	respond to / edit current comment
d :	mark current comment as done

	Issue
u :	up to list of issues
m :	publish + mail comments
j / k :	jump to patch after / before current patch
o / <Enter> :	open current patch in side-by-side view
i :	open current patch in unified diff view

	Issue List
j / k :	jump to issue after / before current issue
o / <Enter> :	open current issue
# :	close issue

	Comment/message editing
<Ctrl> + s or <Ctrl> + Enter :	save comment
<Esc> :	cancel edit

Delta Between Two Patch Sets: includes/components/navbar.html

Issue 29587584: Issue 5635 - Implement website-default navbar component (Closed) Base URL: https://hg.adblockplus.org/website-defaults

Left Patch Set: Use padding on navbar link, optimise svg Created Nov. 30, 2017, 2 p.m.

Right Patch Set: Rebase Created Jan. 4, 2018, 7:40 a.m.

Left:
Right:

Use n/p to move between diff chunks; N/P to move between comments.

Jump to:

Left: Side by side diff | Download
Right: Side by side diff | Download

LEFT	RIGHT
1 <div class="navbar bg-primary">	1 <div class="navbar bg-primary">

2 <div class="container">	2 <div class="navbar-container">

3 <a href="index" class="navbar-branding float-start">	3 <a href="index" class="navbar-branding float-start">

4 <img src="/img/png/eyeo-logo.png" srcset="/img/svg/eyeo-logo.svg 2x" alt=" eyeo">	4 <img src="/img/png/eyeo-logo.png" srcset="/img/svg/eyeo-logo.svg 2x" alt=" eyeo">

5 </a>	5 </a>

6	6

7 <button class="toggle-navbar-collapse float-end">	7 <button class="toggle-navbar-collapse button-link float-end">

8 <span class="open-label">Open</span>	8 Toggle Menu
juliandoucette 2017/12/01 16:30:43 It seems like a toggle button will be common to al It seems like a toggle button will be common to all websites but a toggle button with a separate open/close state will not. Perhaps the open/close state should be separate until it is used by more than one website when it can be added as a second example? ire 2017/12/08 10:42:21 You're right. Done. Show quoted text On 2017/12/01 16:30:43, juliandoucette wrote: > It seems like a toggle button will be common to all websites but a toggle button > with a separate open/close state will not. Perhaps the open/close state should > be separate until it is used by more than one website when it can be added as a > second example? You're right. Done.
9 <span class="sr-only">/</span>
juliandoucette 2017/12/01 16:30:43 I don't think that this makes sense. - If .open-l I don't think that this makes sense. - If .open-label is visible than this reads "Open / Menu" - If .close-label is visible than this reads "/ Close Menu" (sr-only) ire 2017/12/08 10:42:21 Yeah I think I didn't get this correctly. It's no Show quoted text On 2017/12/01 16:30:43, juliandoucette wrote: > I don't think that this makes sense. > > - If .open-label is visible than this reads "Open / Menu" > - If .close-label is visible than this reads "/ Close Menu" > > (sr-only) Yeah I think I didn't get this correctly. It's no longer relevant since I removed the separate open/close labels
10 <span class="close-label">Close</span>

11 Menu

12 </button>	9 </button>

13	10

14 <nav class="navbar-nav navbar-collapse">	11 <nav class="navbar-nav navbar-collapse">

15 <ul>	12 <ul>

16 <li><a href="index">Navbar Menu Link</a></li>	13 <li><a href="index">Navbar Menu Link</a></li>

17 <li><a href="index">Navbar Menu Link</a></li>	14 <li><a href="index">Navbar Menu Link</a></li>

18 <li><a href="index">Navbar Menu Link</a></li>	15 <li><a href="index">Navbar Menu Link</a></li>

19 <li><a href="index">Navbar Menu Link</a></li>	16 <li><a href="index">Navbar Menu Link</a></li>

20 </ul>	17 </ul>

21 </nav>	18 </nav>

22 </div>	19 </div>

23 </div>	20 </div>

LEFT	RIGHT