Skip to content

added fixed navbar #46

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

Open
nathanchi wants to merge 31 commits into
base: master
Choose a base branch
from
Open

added fixed navbar #46

Changes from 12 commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
748a10f
added fixed, edited navbar to source browser
Nov 14, 2018
1a44b6b
fixed spacing
Nov 14, 2018
e9595a6
fixed extra spacing
Nov 14, 2018
faf010d
fixed up navbar
Nov 14, 2018
dd265b8
fixed spacing, edited js/jquery and attributes
Nov 15, 2018
e778e69
edited spacing and jquery/js
Nov 16, 2018
4103dfb
edited spacing, css
Nov 16, 2018
ab7d0a9
fixed spacing, reverted spacing changes
Nov 16, 2018
c6fb817
edited css
Nov 16, 2018
e9e36e5
removed extra trailing spaces
Nov 16, 2018
80d0351
edited spacing, ran through Prettier, edited JS/JQuery
Nov 17, 2018
4a8f35f
edited spacing, script, ran through Prettier
Nov 17, 2018
a9e5cfe
edited script
Nov 17, 2018
6377cb9
fixed script
Nov 18, 2018
6aed63a
ran through prettier to fix styling, edited script
Nov 19, 2018
71b2028
edited spacing
Nov 19, 2018
a2c8ce9
edited script and spacing
Nov 20, 2018
53fbcf4
edited jquery/js script
Nov 20, 2018
d1527a3
ran through prettier
Nov 20, 2018
920281d
edited appearance
Nov 21, 2018
897728e
edited anchor links
Nov 22, 2018
8c7f959
edited navbar
Nov 22, 2018
98f71a1
edited details
Nov 22, 2018
c5a4337
edited spacing
Nov 22, 2018
4f1502a
fixed issues
Nov 23, 2018
7bafb7f
edited spacing
Nov 23, 2018
773d925
fixed more spacing issues
Nov 23, 2018
3e5f3d3
spacing
sushain97 Nov 24, 2018
d1d50a9
edited spacing
Nov 24, 2018
764b4b6
edited jquery/js
Nov 24, 2018
05c0894
edited script
Nov 24, 2018
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
69 changes: 68 additions & 1 deletion source-browser.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,35 @@
<link rel="stylesheet" href="https://unpkg.com/basscss@7.1.1/css/basscss.min.css" integrity="sha384-/biuPsPEkt10QoeOExIADuWNrpFFXALKPgBhEDkRdKDJdQOPpbNU3uUeFbL/KPJg" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hint.css/2.5.0/hint.base.min.css" integrity="sha256-ODFgZG+Y3V10lzZu+7J8epM4SdW0w3p8qbVmmShNrtk=" crossorigin="anonymous">
<style type="text/css">
ul:nth-child(1) {
list-style-type: none;
position: absolute;
margin: 0;
Copy link
Member

@sushain97 sushain97 Nov 17, 2018

Choose a reason for hiding this comment

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

Many of these rules should be replaced with the basscss v7 rules. e.g. .m0 is margin: 0.

padding: 0;
overflow: hidden;
background-color: #333333;
position: fixed;
bottom: 0;
width: 100%;
z-index: 10;
}
.navbar li {
float: left;
}
.navbar li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.inline-block.m0 {
Copy link
Member

@sushain97 sushain97 Nov 17, 2018

Choose a reason for hiding this comment

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

Should not be styling all of them with this. Instead, should use a custom class in the JS and style that.

padding-top:75px;
margin-top:-75px;
Copy link
Member

@sushain97 sushain97 Nov 17, 2018

Choose a reason for hiding this comment

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

Spacing between colon and value.

}
#content {
margin-top: 75px;
margin-bottom: 100px;
Copy link
Member

@sushain97 sushain97 Nov 22, 2018

Choose a reason for hiding this comment

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

Instead of using 3 margin rules, just use one with 4 values.

overflow-x: hidden;
}
#logo-text {
Expand Down Expand Up @@ -42,6 +69,7 @@
</style>
</head>
<body class="m2">
<ul class="navbar" id="navbar"></ul>
Copy link
Member

@sushain97 sushain97 Nov 17, 2018

Choose a reason for hiding this comment

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

Just the id should suffice unless you have multiple navbars.

<div class="fixed top-0 col-12 py1 mr3 bg-white z1">
<a href="https://apertium.org" target="_blank" rel="noopener" class="mt2 text-decoration-none nowrap"> <!-- apertium.org is slow and hosts a large version -->
<img id="logo" alt="Apertium" height="50" src="data:image/png;base64,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">
Expand Down Expand Up @@ -132,7 +160,7 @@ <h1 id="loading" class="m1 center display-none">⌛</h1>
$('#topics').append(
$('<div class="topic flex-auto">').append(
$('<div>').append(
$('<h2 class="inline-block m0">').text(name),
$('<h2 class="inline-block m0">', {id: name}).text(name),
$('<a class="ml1 text-decoration-none" target="_blank" rel="noopener">🔗</a>', {
href: repoUrl,
}),
Expand Down Expand Up @@ -181,7 +209,46 @@ <h1 id="loading" class="m1 center display-none">⌛</h1>
.focus();
}

function createNavbar(topic) {
Copy link
Member

@sushain97 sushain97 Nov 17, 2018

Choose a reason for hiding this comment

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

Inline this function where it is used.

$('.li').append(
$('<a>', {
id: `li${topic}`,
Copy link
Member

@sushain97 sushain97 Nov 17, 2018

Choose a reason for hiding this comment

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

As I mentioned in my previous review, use a tag-agnostic id.

href: `#${topic}`
}).text(topic)
);
}

let list = [];
Copy link
Member

@sushain97 sushain97 Nov 17, 2018

Choose a reason for hiding this comment

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

As I mentioned earlier, variable names that are just the type are undesirable in most languages unless it's a utility function with no context.

$(document).ready(() => {
TOPICS.forEach(item => {
Copy link
Member

@sushain97 sushain97 Nov 17, 2018

Choose a reason for hiding this comment

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

Suggested change
TOPICS.forEach(item => {
TOPICS.forEach(({name}) => {

let heading = item.name;
list.push(heading);
Copy link
Member

@sushain97 sushain97 Nov 17, 2018

Choose a reason for hiding this comment

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

This list seems completely unnecessary. TOPICS can be used directly below instead.

Copy link
Author

@nathanchi nathanchi Nov 17, 2018

Choose a reason for hiding this comment

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

What method for TOPICS should I use? TOPICS. push(heading) doesn't work.

Copy link
Member

@sushain97 sushain97 Nov 17, 2018

Choose a reason for hiding this comment

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

TOPICS.forEach can be used directly below.

Copy link
Author

@nathanchi nathanchi Nov 17, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

Sorry, I meant
TOPICS.name.forEach(topic => {

doesn't work.

Copy link
Member

@sushain97 sushain97 Nov 17, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

It can work if you use topic.name later. I never suggested TOPICS.name.forEach.

Copy link
Author

@nathanchi nathanchi Nov 17, 2018

Choose a reason for hiding this comment

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

screen shot 2018-11-17 at 12 40 07 pm

Copy link
Member

@sushain97 sushain97 Nov 17, 2018

Choose a reason for hiding this comment

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

Try using the debugger.

Copy link
Author

@nathanchi nathanchi Nov 17, 2018

Choose a reason for hiding this comment

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

Okay, I managed to get some of it working—the titles are there now, but the arrows are gone.

Copy link
Member

@sushain97 sushain97 Nov 17, 2018

Choose a reason for hiding this comment

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

Debugger :)

Copy link
Author

@nathanchi nathanchi Nov 17, 2018

Choose a reason for hiding this comment

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

It works now!

});
});

$(window).scroll(() => {
Copy link
Member

@sushain97 sushain97 Nov 17, 2018

Choose a reason for hiding this comment

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

Should this also happen on window resize?

Copy link
Author

@nathanchi nathanchi Nov 17, 2018

Choose a reason for hiding this comment

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

I've added that, as well.

let top = $(window).scrollTop();
Copy link
Member

@sushain97 sushain97 Nov 17, 2018

Choose a reason for hiding this comment

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

Variables that do not change should be const.

Copy link
Author

@nathanchi nathanchi Nov 17, 2018

Choose a reason for hiding this comment

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

Okay, I'll update that tomorrow.

let bottom = $(window).scrollTop() + $(window).height();
list.forEach(heading => {
let vartop = $(`#${heading}`).position();
Copy link
Member

@sushain97 sushain97 Nov 17, 2018

Choose a reason for hiding this comment

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

What does the var in vartop refer to?

Copy link
Author

@nathanchi nathanchi Nov 17, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

It refers to variable, for each of the heading variables. Would you suggest I rename it?

Copy link
Member

@sushain97 sushain97 Nov 17, 2018

Choose a reason for hiding this comment

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

Does it make sense to name a variable var to indicate that it's a variable? Something like heading_position maybe.

Copy link
Author

@nathanchi nathanchi Nov 17, 2018

Choose a reason for hiding this comment

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

Okay, I'll rename that.

if (top < vartop.top && vartop.top < bottom) {
$(`#li${heading}`).hide();
} else {
$(`#li${heading}`).show();
let $heading = $(`#li${heading}`);
Copy link
Member

@sushain97 sushain97 Nov 17, 2018

Choose a reason for hiding this comment

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

Suggested change
let $heading = $(`#li${heading}`);
$(`#li${heading}`).text(`${heading} ${vartop.top > bottom ? '↓' : '↑'}`);

if (vartop.top > bottom) {
$heading.text(`${heading}↓`);
} else {
$heading.text(`${heading}↑`);
}
}
});
});

$(document).ready(() => {
$('#navbar').append('<li class="li"></li>');
Copy link
Member

@sushain97 sushain97 Nov 17, 2018

Choose a reason for hiding this comment

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

Why is there an extra list element?

Copy link
Author

@nathanchi nathanchi Nov 17, 2018

Choose a reason for hiding this comment

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

There's only one list element. Would you like me to make this list element hard-coded in the html instead?

Copy link
Member

@sushain97 sushain97 Nov 17, 2018

Choose a reason for hiding this comment

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

Yes

Copy link
Author

@nathanchi nathanchi Nov 17, 2018

Choose a reason for hiding this comment

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

Great, I'll do that. :)

list.forEach(createNavbar);

$('#github-link').attr('href', `https://github.com/${ORGANIZATION}`);
$('#refresh').click(({ currentTarget }) => {
currentTarget.blur();
Expand Down