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.

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

Resolved Issue #33 #34

Merged
merged 7 commits into from
Mar 31, 2019
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
32 changes: 17 additions & 15 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Commons Mobile App</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="styles/style.css">
</head>

<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary">
Copy link
Member

Choose a reason for hiding this comment

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

I could see the reason why you're using fixed-top for the navbar but it seems to be making the text ("Commons Mobile App") within the <h1> contained within <div class="jumbotron jumbotron-fluid"> to be very close to the navbar in the desktop view and it even goes under the navbar in mobile view. Can you fix this?

Copy link
Member

Choose a reason for hiding this comment

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

BTW, sorry for the late request of change. Couldn't get my hands on this for a while :-(

Copy link
Member

Choose a reason for hiding this comment

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

I managed to fix this issue in 4ff0f4c

<div class="container">
<span class="navbar-brand mb-0 h1">Commons Mobile App</span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
Expand All @@ -20,11 +20,11 @@

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#description">About</a></li>
<li class="nav-item"><a class="nav-link" href="#community">Community</a></li>
<li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
<li class="nav-item"><a class="nav-link" href="#usage">Usage</a></li>
<li class="nav-item"><a class="nav-link" href="#photo-guide">Photo Guidelines</a></li>
<li class="nav-item"><a class="nav-link scroll" href="#description">About</a></li>
<li class="nav-item"><a class="nav-link scroll" href="#community">Community</a></li>
<li class="nav-item"><a class="nav-link scroll" href="#features">Features</a></li>
<li class="nav-item"><a class="nav-link scroll" href="#usage">Usage</a></li>
<li class="nav-item"><a class="nav-link scroll" href="#photo-guide">Photo Guidelines</a></li>
</ul>
</div> <!-- .collapse -->
</div> <!-- .container -->
Expand All @@ -34,10 +34,10 @@
<div class="container">
<h1 class="display-4">Commons Mobile App</h1>
<a class="app-badge f-droid-badge" href="https://f-droid.org/repository/browse/?fdid=fr.free.nrw.commons">
<img src="images/f-droid-badge.png" alt="F-Droid Logo" />
<img src="https://raw.githubusercontent.com/commons-app/commons-app.github.io/master/images/f-droid-badge.png" alt="F-Droid Logo" />
Copy link
Member

Choose a reason for hiding this comment

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

What's the advantage of using an absolute link to GitHub instead of a relative link which works just fine?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Both are just fine for me. I used codepen.io to add the smooth scrolling effect, so I placed an absolute link there. If you want I can change it back to relative.

Copy link
Member

Choose a reason for hiding this comment

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

Please revert them to relative paths itself.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Done!

</a>
<a class="app-badge play-store-badge" href="https://play.google.com/store/apps/details?id=fr.free.nrw.commons">
<img src="images/google-play-badge.png" alt="Google Play Store badge" />
<img src="https://raw.githubusercontent.com/commons-app/commons-app.github.io/master/images/google-play-badge.png" alt="Google Play Store badge" />
</a>
</div>
</div>
Expand Down Expand Up @@ -72,7 +72,7 @@ <h2>Features</h2>
<div class="col-lg-6 col-sm-12">
<div class="item">
<div class="item-image">
<img class="feature-image" src="images/screen-upload.jpeg" alt="Screenshot of upload feature" />
<img class="feature-image" src="https://raw.githubusercontent.com/commons-app/commons-app.github.io/master/images/screen-upload.jpeg" alt="Screenshot of upload feature" />
</div>
<div class="hover-bar"></div>
<h3 class="item-header">Upload your files anywhere</h3>
Expand All @@ -85,7 +85,7 @@ <h3 class="item-header">Upload your files anywhere</h3>
<div class="col-lg-6 col-sm-12">
<div class="item">
<div class="item-image">
<img class="feature-image" src="images/screen-gallery.jpeg" alt="Screenshot of gallery feature" />
<img class="feature-image" src="https://raw.githubusercontent.com/commons-app/commons-app.github.io/master/images/screen-gallery.jpeg" alt="Screenshot of gallery feature" />
</div>
<div class="hover-bar"></div>
<h3 class="item-header">View your uploads</h3>
Expand All @@ -98,7 +98,7 @@ <h3 class="item-header">View your uploads</h3>
<div class="item">

<div class="item-image">
<img class="feature-image" src="images/screen-nearby.jpeg" alt="Screenshot of nearby places missing image feature" />
<img class="feature-image" src="https://raw.githubusercontent.com/commons-app/commons-app.github.io/master/images/screen-nearby.jpeg" alt="Screenshot of nearby places missing image feature" />
</div>
<div class="hover-bar"></div>
<h3 class="item-header">View nearby missing images</h3>
Expand All @@ -111,7 +111,7 @@ <h3 class="item-header">View nearby missing images</h3>
<div class="item">

<div class="item-image">
<img class="feature-image" src="images/screen-categories.jpeg" alt="Screenshot of categories feature" />
<img class="feature-image" src="https://raw.githubusercontent.com/commons-app/commons-app.github.io/master/images/screen-categories.jpeg" alt="Screenshot of categories feature" />
</div>
<div class="hover-bar"></div>
<h3 class="item-header">Categorize your photos</h3>
Expand Down Expand Up @@ -161,12 +161,14 @@ <h2>Commons Mobile App</h2>
</div>

<div class="qr-code-div">
<img src="images/commons-app-qr.png"/>
<img src="https://raw.githubusercontent.com/commons-app/commons-app.github.io/master/images/commons-app-qr.png"/>
</div>
</footer>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
Copy link
Member

Choose a reason for hiding this comment

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

I'm asking this as I'm not aware. Is there an advantage of using the Cloudflare CDN rather than JQuery URL?

Further, you seem to have switched to a older version of jQuery when changing the URL.

Copy link
Contributor Author

@soulspark666 soulspark666 Feb 25, 2019

Choose a reason for hiding this comment

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

Cloudflare servers are a bit faster. You can check it out here.

I can update jquery to 3.3.1, I just didn't saw that while adding it in codepen.io.

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<script src="js/index.js"></script>
</body>
</html>
29 changes: 29 additions & 0 deletions js/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
$(document).ready(function() {

var scrollLink = $('.scroll');

// Smooth scrolling
scrollLink.click(function(e) {
e.preventDefault();
$('body,html').animate({
scrollTop: $(this.hash).offset().top
}, 1000 );
});

// Active link switching
$(window).scroll(function() {
Copy link
Member

Choose a reason for hiding this comment

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

I generally think it would be nice to achieve something simple as this without custom JS (possibly using CSS; there's already a PR (#32) which does just this).

Not using JS has the advantage that it doesn't require maintainence :-)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I also thought of using CSS initially but for time delay and stuff, js is required.
If I found something that can be done via css then I'll add a PR.

var scrollbarLocation = $(this).scrollTop();

scrollLink.each(function() {

var sectionOffset = $(this.hash).offset().top - 20;

if ( sectionOffset <= scrollbarLocation ) {
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
}
})

})

})
File renamed without changes.