VladPolskiy/postgres-web
1
0
Fork 0
mirror of https://github.com/postgres/pgweb.git synced 2025-07-25 15:41:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor the navigation bar for desktop, tablet, and mobile.

Browse Source 
Specifically, the navigation bar now shrinks in height on scroll
and when on devices smaller than 768px. Additionally, the search
box disappears at the 1280px break point to avoid text wrapping.
A JavaScript file was added (main.js) to apply the "compressed"
class when scrolling, which is what provides the menu shrinking.
This commit is contained in:
Jonathan S. Katz
2018-04-25 14:01:04 -07:00
parent f007d006d0
commit 1e84557d40
3 changed files with 44 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
media/css/main.css
View File

@ -24,7 +24,6 @@ body {
font-weight: 400;
color: #515151;
font-size: 11.5pt;
padding-top: 54px; /** this is to account for the fixed navbar blocking content */
}
p {
@ -571,6 +570,7 @@ ul.actions {
.navbar {
box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
transition: all 0.3s;
}
/* #SIDEBAR UL STYLING */
@ -782,33 +782,40 @@ h1.subject {
/** ALL RESPONSIVE QUERIES HERE */
/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
/** NAVBAR */
.nav-item > a {
font-size: 0.95rem;
font-weight: 600;
}
}
@media (max-width: 575px) {
/** HOMEPAGE JUMBOTRON */
.pg-jumbotron-header {
font-size: 1.5rem;
@media (max-width: 1280px) {
input#q {
display: none;
}
}
@media (max-width: 1200px) {
@media (min-width: 992px) {
.navbar.compressed {
padding: 0 10px;
}
.pg-shout-box {
padding-top: 3.7rem;
}
}
@media (max-width: 992px) {
.navbar {
padding: 5px 10px;
}
.navbar-toggler-icon {
width: 1rem;
height: 1.5rem;
}
.pg-shout-box {
padding-top: 2.8rem;
}
}
@media (max-width: 768px) {
body {
padding-top: 55px;
}
.jumbotron.jumbotron-fluid.pg-jumbotron {
padding: 4em;
}
@ -864,3 +871,17 @@ h1.subject {
}
}
@media (min-width: 576px) {
/** NAVBAR */
.nav-item > a {
font-size: 0.95rem;
font-weight: 600;
}
}
@media (max-width: 575px) {
/** HOMEPAGE JUMBOTRON */
.pg-jumbotron-header {
font-size: 1.5rem;
}
}

5
media/js/main.js Normal file
View File

@ -0,0 +1,5 @@
$(document).ready(function() {
$(window).on("scroll", function() {
$(".navbar").toggleClass("compressed", $(window).scrollTop() >= 20);
});
});

1
templates/base/base.html
View File

@ -87,6 +87,7 @@
<script src="/media/js/jquery-3.2.1.slim.min.js?{{gitrev}}"></script>
<script src="/media/js/popper.min.js?{{gitrev}}"></script>
<script src="/media/js/bootstrap.min.js?{{gitrev}}"></script>
<script src="/media/js/main.js?{{gitrev}}"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1345454-1']);