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

UI - Navbar for MapKnitter #360

Merged
merged 29 commits into from
Mar 6, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
29 commits
Select commit Hold shift + click to select a range
8f6b0ad
Show only maps with at least one image in main listing
jywarren Jan 16, 2019
7874e91
Merge pull request #299 from publiclab/1-image-maps
jywarren Jan 28, 2019
a5de9bd
Update Leaflet.DistortableImage version
jywarren Feb 8, 2019
0518136
Create first timers issue template.md
faithngetich Oct 12, 2018
5d0a8f5
Create config.yml
faithngetich Oct 12, 2018
a681258
spam links in moderation feeds
jywarren Oct 24, 2018
d61c90b
Add mapknitter to the help wanted link
jywarren Oct 24, 2018
3ae10f4
Replace the community link with the code.public link
jywarren Oct 24, 2018
4d95688
Update the first time only link to code.public
jywarren Oct 24, 2018
7066bd0
Use the correct link to indicate where the code will be published
jywarren Oct 24, 2018
a18787c
Update index.html.erb
sagarpreet-chadha Nov 17, 2018
623454c
Update bower.json
sagarpreet-chadha Nov 17, 2018
376512e
Update bower.json
sagarpreet-chadha Nov 19, 2018
37c87f4
Update bower.json
sagarpreet-chadha Nov 24, 2018
dca373a
Peg GoogleMutant layer to v0.7.0
jywarren Jan 2, 2019
f8efb01
[Security] Bump nokogiri from 1.8.1 to 1.9.1
dependabot-support Jan 6, 2019
60d2bbe
Bump will_paginate from 3.0.7 to 3.1.6
dependabot-support Jan 10, 2019
83e8155
Cleanup (#313)
jywarren Jan 30, 2019
f0b8ed0
Bump rake from 10.5.0 to 12.3.2 (#286)
dependabot[bot] Jan 31, 2019
a827e8b
[Security] Bump i18n from 0.7.0 to 0.9.5 (#289)
dependabot[bot] Feb 7, 2019
6f2c91c
Bump rdiscount from 2.1.7.1 to 2.2.0.1 (#321)
dependabot[bot] Feb 7, 2019
528b799
Unit test warpable code (#331)
jywarren Feb 8, 2019
518e84d
Bump recaptcha from 4.6.3 to 4.9.0 (#332)
dependabot[bot] Feb 8, 2019
b96df27
basic map unit tests (#334)
jywarren Feb 8, 2019
1a83146
Updates to customize rails / ruby and mySQL version compatibility (#…
sashadev-sky Feb 9, 2019
2a0a281
Merge branch 'main' of github.com:stefannibrasil/mapknitter into main
Feb 25, 2019
9936f5d
Change navbar to use the same layout as Public Lab
Feb 25, 2019
4c7c955
Add Bootstrap 4 to project
Feb 25, 2019
255dc7d
Redo navbar for Bootstrap 3.2.0 version
Mar 2, 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
2 changes: 1 addition & 1 deletion app/assets/stylesheets/application.css
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@
*= require leaflet-distortableimage/dist/leaflet.distortableimage.css

*= require style
*= require header
*= require maps
*= require header
*= require uploads

*= require_self
Expand Down
131 changes: 1 addition & 130 deletions app/assets/stylesheets/header.css.scss
Original file line number Diff line number Diff line change
@@ -1,130 +1 @@
.navbar-custom-knitter {
display: none;
}

@media (min-width: 768px) {
.navbar-header {
width:50%;
}
}

#header, .sidebar-header {
.nav > li > a { color: #444; }
.nav > li > a:hover { color: #222; }
.navbar-right { padding-right: 20px; }
}

#header {
background:#f8f8f8;
border-bottom:3px solid #eee;

.navbar-toggle {
border-color:#ccc;
.icon-bar {
background-color:#aaa;
}
}

.navbar-toggle:hover {
background-color:#eee;
}

.dropdown-menu {
padding:8px;
}

.brand {
float:left;
width:90%;
}

.brand .yarn {
display:none;
}

.brand img {
width:400px;
margin:20px 10px 15px;
float:left;
}

.brand span {
display:block;
float:left;
padding-top:65px;
font-size:20px;
font-family: 'Junction Light';
}

img.cat {
Copy link
Member

Choose a reason for hiding this comment

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

Did you find the easter egg???????

position:absolute;
top:20px;
left:3px;
width:80px;
pointer-events:none;
}
}

@media (max-width: 768px) {
#header {
.brand {
width:80%;
}
.brand img {
width:50%;
}
.cat {
display:none;
}
}
}

@media (max-width: 1252px) {
#header .brand span {
display:none;
}
}

.sidebar #header {
.navbar-header {

width:auto;

.navbar-nav {

padding-left:20px;

li {
padding-top:7px;
}

}
}

.cat {
display:none;
}

.brand {
float:left;
width:60px;
}

.brand .fullscreen {
display:none;
}

.brand .yarn {
display:block;
}

.brand img {
margin:10px;
width:70%;
}

.brand span {
display:none;
}
}

body { padding-top: 65px; }
26 changes: 1 addition & 25 deletions app/assets/stylesheets/maps.css.scss
Original file line number Diff line number Diff line change
Expand Up @@ -96,27 +96,6 @@ code {

h1, h2, h3, h4 { font-family: 'Junction Light'; }

.navbar { margin-bottom: -$bootstrap-navbar-height; }

#navbar-collapse {
clear: left;
}
/* Disable normal navbar collapse on map show page; it's running in the sidebar,
* so widths are not properly calculated. */
.navbar-toggle {
display: none !important;
}
.navbar-collapse {
display: none !important;
}
.navbar-custom-knitter {
display: table;
}
#brand { display:none; }
#header #brand-compact {
display:inline;
}

.dropdown-menu {
z-index:999;
}
Expand All @@ -134,9 +113,6 @@ code {

.sidebar-header {
@include sidebar-padding();
margin-top: $bootstrap-navbar-height;
padding-bottom: $sidebar-title-padding;
padding-top: $sidebar-title-padding;
h4 { margin: 3px 0 6px; }
}

Expand Down Expand Up @@ -169,7 +145,7 @@ code {
/* Styles for /maps/new */
.new-map .sidebar-content {
border-top: 1px solid $subtle-grey;
top: $sidebar-header-height + $bootstrap-navbar-height;
top: $sidebar-header-height - 80px + $bootstrap-navbar-height;
}

/* Ensure that horizontal nav elements are hidden in the sidebar (not enough room). */
Expand Down
59 changes: 18 additions & 41 deletions app/views/layouts/_header.html.erb
Original file line number Diff line number Diff line change
@@ -1,56 +1,33 @@
<div id="header" class="navbar navbar-static-top">
<div class="hidden-print container-fluid">
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">

<div class="brand">
<img class="cat fade" src="/images/mapknitter-cat.png" />
<a class="fullscreen" href="/"><img src="/images/mapknitter-yarn.png" /></a>
<a class="yarn" href="/"><img src="/images/yarn.png" /></a>
<span>by <a href="//publiclab.org">Public Lab</a></span>

<% if params[:cat] %>
<script>
(function(){
$('.brand').hover(function() {
$('.cat').toggleClass('in');
})
})()
</script>
<% end %>
</div>

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<ul class="nav navbar-nav navbar-right navbar-custom-knitter">
<li class="dropdown hidden-xs">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Resources <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="//publiclab.org/wiki/mapknitter">Getting Started</a></li>
<li><a href="//publiclab.org/wiki/balloon-mapping">About Balloon Mapping</a></li>
<li><a href="//store.publiclab.org/products/balloon-mapping-kit">Balloon and Kite kits</a></li>
<li><a href="//publiclab.org/lists">Discussion lists</a></li>
</ul>
</li>
<%= render :partial => "layouts/login" %>
</ul>
<a class="navbar-brand" href="/">MapKnitter</a>
</div>


<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav fullscreen">
<li><a href="//publiclab.org/wiki/mapknitter">Getting Started</a></li>
<li><a href="//publiclab.org/wiki/balloon-mapping">About Balloon Mapping</a></li>
<li><a href="//store.publiclab.org/products/balloon-mapping-kit">Balloon and Kite kits</a></li>
<form action="/search" method='get' class="navbar-form navbar-left" id="nav_search_form">
<div class="input-group">
<input class="form-control mr-sm-2" style="min-width: 280px;" type="text" id="search-input" name="q" value='<%= params[:id] if params[:action] == "search" %>' placeholder="Search maps"/>
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
</span>
</div>
</form>
<ul class="nav navbar-nav">
<li><a href="//publiclab.org/wiki/mapknitter" target="_blank">Getting Started</a></li>
<li><a href="//publiclab.org/wiki/balloon-mapping" target="_blank">Balloon Mapping</a></li>
<li><a href="//store.publiclab.org/products/balloon-mapping-kit" target="_blank">Aerial Mapping Kits</a></li>
<li><a href="//publiclab.org/lists" target="_blank">Mailing Lists</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<%= render :partial => "layouts/login" %>
</ul>
</div>

</div>
</div>
</nav>
12 changes: 7 additions & 5 deletions app/views/layouts/_login.html.erb
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
<% if logged_in? %>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="logout-menu"><i class="fa fa-user"></i> <%= current_user.login %> <span class="caret"></span></a>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="logout-menu"><%= current_user.login %></a>
<ul class="dropdown-menu" role="menu" aria-labelled-by="logout-menu">
<div class="dropdown-header">
<% if current_user.role == 'admin'%>
- logged as Admin %>
<% end %>
</div>
<li><a href="//publiclab.org/profile/<%= current_user.login %>">Profile</a></li>
<li><a href="/logout">Log out</a></li>
<% if current_user.role == 'admin' %>
<li><a href="#">Role: <b>Admin</b></a></li>
<% end %>
</ul>
</li>
<% else %>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="login-menu">Log In <span class="caret"></span></a>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="login-menu">Log In</a>
<div class="dropdown-menu login-form" role="menu" aria-labelled-by="login-menu">
<%= render :partial => "layouts/login_form" %>
</div>
Expand Down
17 changes: 9 additions & 8 deletions app/views/layouts/_login_form.html.erb
Original file line number Diff line number Diff line change
@@ -1,22 +1,23 @@
<form id="open_id_form" method="GET" action="/sessions/create">

<%= hidden_field_tag :authenticity_token, form_authenticity_token -%>
<%= hidden_field_tag :back_to, params[:back_to] || request.path -%>
<div class="form-group">
Log in using your Public Lab username, or <a href="//publiclab.org/signup">create a Public Lab account</a>.
<label style="display: block; text-align: center;">Log In using your Public Lab username</label>
<label style="display: block; text-align: center;">or</label>
<label style="display: block; text-align: center;">
create a
<a href="//publiclab.org/signup">Public Lab account</a>.
</label>
</div>

<div class="form-group">
<div class="form-group">
<%= text_field_tag 'open_id', @login, { :placeholder => "Username (not email)", :class => "form-control"} %>
<div class="checkbox">
<label for="remember_me">
<%= check_box_tag 'remember_me', '1', @remember_me %> Remember me
</label>
</label>
</div>
</div>

<div class="form-group">
<%= submit_tag 'Log in', {:class => "btn btn-primary btn-large"} %>
</div>

</form>
</form>
3 changes: 1 addition & 2 deletions app/views/layouts/application.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,12 @@
<title>MapKnitter</title>
<meta name="author" content="MapKnitter contributors"/>
<meta name="description" content="Make maps from aerial photos with Public Lab's free and open source web toolkit"/>
<meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="apple-touch-icon" href="/images/mapknitter-255.png">
<link rel="apple-touch-icon-precomposed" href="/images/mapknitter-255.png">
<link rel="apple-touch-icon-precomposed apple-touch-icon" href="/images/mapknitter-255.png">
<link rel="shortcut icon" href="/images/mapknitter-255.png" />

<link rel="stylesheet" href="/lib/fontawesome/css/font-awesome.min.css"/>
<%= stylesheet_link_tag 'application' %>
<%= javascript_include_tag 'application' %>
Expand Down