Skip to content
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

Jump to bottom

Adding sticky headings #53

Merged
merged 14 commits into from
Dec 8, 2019
Merged

Adding sticky headings #53

Changes from 3 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
f601103
Update source-browser.html
MaathavanJkr Dec 4, 2019
8de001d
Fixed Issue
MaathavanJkr Dec 5, 2019
b0ef292
Fixed the issue
MaathavanJkr Dec 6, 2019
a39f693
Fixed hidden refresh button!
MaathavanJkr Dec 6, 2019
1c48c27
Update source-browser.html
MaathavanJkr Dec 6, 2019
3b5f232
Change to old style
MaathavanJkr Dec 6, 2019
85109f8
some fixes by feedback
MaathavanJkr Dec 6, 2019
e5a4b86
More fixes
MaathavanJkr Dec 6, 2019
af66e17
Further more fixes
MaathavanJkr Dec 7, 2019
254c068
Furether more fixes
MaathavanJkr Dec 7, 2019
35cb751
Lining Fixes
MaathavanJkr Dec 7, 2019
01e7f46
Update source-browser.html
MaathavanJkr Dec 7, 2019
5284643
Fixed Issues on sushain's feedback
MaathavanJkr Dec 8, 2019
6630256
Update source-browser.html
MaathavanJkr Dec 8, 2019
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
56 changes: 53 additions & 3 deletions source-browser.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

<!DOCTYPE html>
<html lang="en">
<head>
Expand All @@ -11,8 +12,9 @@
<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">
#content {
margin-top: 75px;
margin-top: 130px;
overflow-x: hidden;
height: 78vh;
}
#logo-text {
color: #808080;
Expand All @@ -39,6 +41,20 @@
max-width: 200px;
width: max-content;
}
.sticky {
position: fixed;
top: 85px;
z-index: 100;
background-color: white;
width: 100%;
}
.stickyb {
position: fixed;
bottom: 0;
z-index: 100;
background-color: white;
width: 100%;
}
</style>
</head>
<body class="m2">
Expand All @@ -62,7 +78,38 @@ <h1 id="loading" class="m1 center display-none">⌛</h1>
<a class="fixed right-0 bottom-0 mr2 mb2 text-decoration-none h2" id="refresh" href="#">🔄</a>

<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/zepto.js" integrity="sha384-Cp3V2nlfJJ5aA0ctd1PkfNAEMkXM0EGa6RrmEgiv8D6TCaeZJfUFs/PYfR+B5F5H" crossorigin="anonymous"></script>

<script type="text/javascript">
setInterval(function(){
$( ".stopic" ).each(function(index) {
Copy link
Member

Choose a reason for hiding this comment

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

Please adhere to the previous style and remove the spaces within the brackets i.e. change $( ".stopic" ) to $(".stopic").

Copy link
Member

Choose a reason for hiding this comment

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

also what does stopic mean?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

sticky Topics
shortly stopics

if ($( this ).position().top <= 138) {
$( this ).addClass("sticky");
}
else {
$( this ).removeClass("sticky");
}
});
}, 100);
setInterval(function(){
$( ".repos" ).each(function(index) {
var h = $( window ).height() + 20;
if ($( this ).position().top < 140) {
$( this ).prev().addClass("sticky");
}
else if ($( this ).position().top > h) {
$( this ).prev().addClass("stickyb");
}
else {
$( this ).prev().removeClass("sticky");

$( this ).prev().removeClass("stickyb");
}
});
}, 1);

</script>

<script type="text/javascript">
const ORGANIZATION = 'apertium',
CACHE_KEY = `${ORGANIZATION}-cache`,
EXPIRY_KEY = `${ORGANIZATION}-expiry`,
Expand Down Expand Up @@ -131,13 +178,14 @@ <h1 id="loading" class="m1 center display-none">⌛</h1>

$('#topics').append(
$('<div class="topic flex-auto">').append(
$('<div>').append(
$('<div class="stopic">').append(
$('<h2 class="inline-block m0">').text(name),
$('<a class="ml1 text-decoration-none" target="_blank" rel="noopener">🔗</a>', {
href: repoUrl,
}),

$('<hr class="mr0 ml0 col-1">'),
),
$('<hr class="mr0 ml0 col-10">'),
repoList,
),
);
Expand Down Expand Up @@ -168,6 +216,7 @@ <h1 id="loading" class="m1 center display-none">⌛</h1>
});

$('#topics, #loading').toggleClass('display-none');

}

function refreshTopics() {
Expand Down Expand Up @@ -204,6 +253,7 @@ <h1 id="loading" class="m1 center display-none">⌛</h1>

setInterval(refreshTopics, EXPIRY_MILLIS * 2);
showTopics();

});
</script>
</body>
Expand Down