-
Notifications
You must be signed in to change notification settings - Fork 27
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
Changes from 1 commit
32e9aed
1c656b5
9ca4f67
ec39daa
5060fd9
4ff0f4c
9f3769c
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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"> | ||
<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"> | ||
|
@@ -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 --> | ||
|
@@ -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" /> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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? There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Please revert them to relative paths itself. There was a problem hiding this comment. Choose a reason for hiding this commentThe 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> | ||
|
@@ -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> | ||
|
@@ -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> | ||
|
@@ -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> | ||
|
@@ -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> | ||
|
@@ -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> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
<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> |
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() { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 :-) There was a problem hiding this comment. Choose a reason for hiding this commentThe 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. |
||
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'); | ||
} | ||
}) | ||
|
||
}) | ||
|
||
}) |
There was a problem hiding this comment.
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?There was a problem hiding this comment.
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 :-(
There was a problem hiding this comment.
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