]> git.openstreetmap.org Git - rails.git/commitdiff
Switch to bootstrap for dropdowns and tooltips
authorAndy Allan <git@gravitystorm.co.uk>
Wed, 29 Jan 2020 15:54:29 +0000 (16:54 +0100)
committerAndy Allan <git@gravitystorm.co.uk>
Wed, 29 Jan 2020 17:23:47 +0000 (18:23 +0100)
Due to the javascript involved, it was more straightforward to combine
the two together. Moving to bootstrap v4 for dropdowns required some
redesign of the dropdown menu html, and the opportunity was taken to
move to using standard buttons for those menus.

app/assets/javascripts/application.js
app/assets/stylesheets/_bootstrap-custom.scss
app/assets/stylesheets/bootstrap-tooltips.css [deleted file]
app/assets/stylesheets/common.scss
app/assets/stylesheets/screen-ltr.css
app/assets/stylesheets/screen-rtl.css
app/assets/stylesheets/small.scss
app/views/layouts/_header.html.erb
app/views/layouts/map.html.erb
vendor/assets/bootstrap/bootstrap.dropdown.js [deleted file]
vendor/assets/bootstrap/bootstrap.tooltip.js [deleted file]

index fbc76e4a8db29f442dccfeafd0904d51437f096e..e99a8f351e84388deea7a36e50e92a4f84e21547 100644 (file)
@@ -3,8 +3,8 @@
 //= require jquery.timers
 //= require jquery.cookie
 //= require jquery.throttle-debounce
 //= require jquery.timers
 //= require jquery.cookie
 //= require jquery.throttle-debounce
-//= require bootstrap.tooltip
-//= require bootstrap.dropdown
+//= require popper
+//= require bootstrap-sprockets
 //= require osm
 //= require leaflet
 //= require leaflet.osm
 //= require osm
 //= require leaflet
 //= require leaflet.osm
index e502f7db6fdcd1e9d0c832c5385df6222997901e..d3072d2b5cadab634d089ea40ad998c89f4576dd 100644 (file)
 @import "bootstrap/grid";
 // @import "bootstrap/tables";
 // @import "bootstrap/forms";
 @import "bootstrap/grid";
 // @import "bootstrap/tables";
 // @import "bootstrap/forms";
-// @import "bootstrap/buttons";
+@import "bootstrap/buttons";
 // @import "bootstrap/transitions";
 // @import "bootstrap/transitions";
-// @import "bootstrap/dropdown";
-// @import "bootstrap/button-group";
+@import "bootstrap/dropdown";
+@import "bootstrap/button-group";
 // @import "bootstrap/input-group";
 // @import "bootstrap/custom-forms";
 // @import "bootstrap/input-group";
 // @import "bootstrap/custom-forms";
-// @import "bootstrap/nav";
-// @import "bootstrap/navbar";
+@import "bootstrap/nav";
+@import "bootstrap/navbar";
 @import "bootstrap/card";
 // @import "bootstrap/breadcrumb";
 // @import "bootstrap/pagination";
 @import "bootstrap/card";
 // @import "bootstrap/breadcrumb";
 // @import "bootstrap/pagination";
@@ -36,7 +36,7 @@
 // @import "bootstrap/close";
 // @import "bootstrap/toasts";
 // @import "bootstrap/modal";
 // @import "bootstrap/close";
 // @import "bootstrap/toasts";
 // @import "bootstrap/modal";
-// @import "bootstrap/tooltip";
+@import "bootstrap/tooltip";
 // @import "bootstrap/popover";
 // @import "bootstrap/carousel";
 // @import "bootstrap/spinners";
 // @import "bootstrap/popover";
 // @import "bootstrap/carousel";
 // @import "bootstrap/spinners";
diff --git a/app/assets/stylesheets/bootstrap-tooltips.css b/app/assets/stylesheets/bootstrap-tooltips.css
deleted file mode 100644 (file)
index dfe850b..0000000
+++ /dev/null
@@ -1,83 +0,0 @@
-/* Rules for bootstrap tooltips */
-
-.tooltip {
-  position: absolute;
-  display: none;
-  color: #333;
-  text-align: left;
-  font-size: 12px;
-  max-width: 250px;
-}
-
-.tooltip.in {
-  opacity: 0.8;
-  z-index: 1030;
-  height: auto;
-  display: block;
-}
-
-.tooltip.top {
-  margin-top: -10px;
-  text-align: center;
-}
-
-.tooltip.right {
-  margin-left: 10px;
-}
-
-.tooltip.bottom {
-  margin-top: 10px;
-  text-align: center;
-}
-
-.tooltip.left {
-  margin-left: -10px;
-  text-align: right;
-}
-
-.tooltip-inner {
-  display: inline-block;
-  padding: 10px;
-  font-weight: normal;
-  background-color: white;
-}
-
-.tooltip-arrow {
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
-}
-
-.tooltip.top .tooltip-arrow {
-  bottom: -5px;
-  left: 50%;
-  margin-left: -5px;
-  border-top-color: white;
-  border-width: 5px 5px 0;
-}
-
-.tooltip.right .tooltip-arrow {
-  top: 50%;
-  left: -5px;
-  margin-top: -5px;
-  border-right-color: white;
-  border-width: 5px 5px 5px 0;
-}
-
-.tooltip.left .tooltip-arrow {
-  top: 50%;
-  right: -5px;
-  margin-top: -5px;
-  border-left-color: white;
-  border-width: 5px 0 5px 5px;
-}
-
-.tooltip.bottom .tooltip-arrow {
-  top: -5px;
-  left: 50%;
-  margin-left: -5px;
-  border-bottom-color: white;
-  border-width: 0 5px 5px;
-}
index 5635e3f9d5a8b8796e7ff9732f212fbb3c99e050..88b3e29f1b5dc495780f6278f4b77b008e119cf9 100644 (file)
@@ -140,7 +140,7 @@ header {
   z-index: 1001;
   font-size: 14px;
 
   z-index: 1001;
   font-size: 14px;
 
-  h1, nav, nav > ul, nav > ul > li, .dropdown {
+  h1, nav, nav > ul, nav > ul > li {
     display: inline-block;
   }
 
     display: inline-block;
   }
 
@@ -179,68 +179,16 @@ header {
       color: #000;
     }
   }
       color: #000;
     }
   }
-}
-
-nav.primary {
-  > ul {
-    padding: 0;
-    $border: 1px solid $green;
-
-    border: $border;
-    border-radius: $border-radius;
-
-    > li {
-      border-right: $border;
-      float: left;
-      &:last-child {
-        border-right: 0;
-      }
-      > a:hover { background: lighten($green, 30%); }
-      &.current > a:hover { background: $green; }
-      &.disabled > a:hover { background: lighten($green, 38%); }
-      &.dropdown {
-        > a.tab { border-right: 1px solid lighten($green, 30%); }
-        &.current > a.tab { border-right: 1px solid lighten($green, 10%); }
-      }
-    }
-  }
-
-  a.tab,
-  .dropdown-toggle {
-    display: inline-block;
-    font-weight: 500;
-    color: $green;
-    padding: 5px 15px;
-  }
-
-  .dropdown-toggle {
-    padding: 5px 6px;
-  }
-
-  .caret {
-    border-top-color: $green;
-    margin-top: 10px;
-  }
-
-  .disabled a {
-    color: $grey;
-    cursor: default;
 
 
-    .caret {
-      border-top-color: $grey;
-    }
+  .btn {
+    font-size: 14px;
   }
   }
+}
 
 
-  > ul li.current {
-    background-color: $green;
 
 
-    .tab {
-      color: #fff;
-    }
-
-    .caret {
-      border-top-color: #fff;
-    }
+nav.primary {
+  .btn-outline-primary {
+    @include button-outline-variant($green, $white);
   }
 }
 
   }
 }
 
@@ -248,74 +196,32 @@ nav.secondary {
   position: absolute;
   right: 0;
 
   position: absolute;
   right: 0;
 
-  > ul {
-    vertical-align: middle;
-    margin: 0;
-    padding: 0;
-
-    a, .dropdown-toggle {
-      display: inline-block;
-      text-decoration: none;
-      color: $darkgrey;
-      padding: 5px;
-
-      &:hover { color: darken($darkgrey, 25%); }
-    }
+  .nav-link {
+    padding: 0.2rem;
+    color: $darkgrey;
   }
 
   > ul li.current a {
     color: darken($darkgrey, 25%);
   }
 
   }
 
   > ul li.current a {
     color: darken($darkgrey, 25%);
   }
 
-  .user-menu {
-    $border: 1px solid $grey;
-    border: $border;
-    border-radius: $border-radius;
-    margin-left: 10px;
-    padding: 0;
-
-    > li {
-      border-right: $border;
-      float: left;
-      &:last-child {
-        border-right: 0;
-
-        > a {
-          border-radius: 0 $border-radius $border-radius 0;
-        }
-      }
-      &:first-child > a { border-radius: $border-radius 0 0 $border-radius; }
-      &:hover a { background: lighten($darkgrey, 30%); }
-    }
-
-    a {
-      padding: 5px 15px;
-
-    }
-
-    &.logged-in > a {
-      padding: 0;
-      > .user-button {
-        line-height: 1.8;
-        padding: 5px 10px 3px 6px;
-        display: inline-block;
-        color: $darkgrey;
-      }
-      &:hover > .user-button { color: darken($darkgrey, 5%); }
+  .login-menu {
+    .btn-outline-secondary {
+      @include button-outline-variant($darkgrey);
     }
   }
 
     }
   }
 
-  .caret {
-    border-top-color: $grey;
-    margin-top: 9px;
+  .user-menu {
+    .btn-outline-secondary {
+      @include button-outline-variant($darkgrey, $darkgrey, white, $darkgrey);
+      // @include button-outline-variant($grey, $grey, white, $grey);
+      border-color: $grey;
+    }
   }
 
   img.user_thumbnail_tiny {
     border: 0;
   }
 
   img.user_thumbnail_tiny {
     border: 0;
-    vertical-align: top;
-    margin-top: 0px;
-    margin: 4px 0 0 4px;
-    border-radius: 2px;
+    border-radius: 3px;
   }
 
   #inboxanchor {
   }
 
   #inboxanchor {
@@ -329,25 +235,14 @@ nav.secondary {
   }
 
   .dropdown-menu {
   }
 
   .dropdown-menu {
-    left: auto;
-    right: -1px;
-    border-radius: 3px 0 3px 3px;
-
     .count-number {
     .count-number {
-      float: right;
-      padding: 0 5px;
-      margin: 0;
+      font-size: 14px;
     }
   }
 }
 
 #compact-secondary-nav {
   display: none;
     }
   }
 }
 
 #compact-secondary-nav {
   display: none;
-  ul li a {
-    width: 100%;
-    color: #333;
-    &:hover { color: #fff; }
-  }
 }
 
 body.compact {
 }
 
 body.compact {
@@ -2272,131 +2167,6 @@ input.richtext_title[type="text"] {
   height: 100%;
 }
 
   height: 100%;
 }
 
-/* Rules for dropdown menus */
-
-.dropdown {
-  position: relative;
-}
-
-.dropdown-toggle {
-  *margin-bottom: -3px;
-}
-
-.dropdown-toggle:active,
-.open .dropdown-toggle {
-  outline: 0;
-}
-
-.caret {
-  display: inline-block;
-  width: 0;
-  height: 0;
-  vertical-align: top;
-  border-top: 4px solid #000000;
-  border-right: 4px solid transparent;
-  border-left: 4px solid transparent;
-  content: "";
-}
-
-.dropdown .caret {
-  margin-top: 8px;
-  margin-left: 2px;
-}
-
-.dropdown-menu {
-  position: absolute;
-  top: 100%;
-  left: -1px;
-  z-index: 1000;
-  display: none;
-  float: left;
-  min-width: 160px;
-  padding: 5px 0;
-  margin: 0;
-  list-style: none;
-  background-color: #ffffff;
-  border: 1px solid $grey;
-  border-radius: 0 3px 3px;
-  *border-right-width: 2px;
-  *border-bottom-width: 2px;
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-  background-clip: padding-box;
-}
-
-.dropdown-menu.pull-right {
-  right: 0;
-  left: auto;
-}
-
-.dropdown-menu .divider {
-  *width: 100%;
-  height: 1px;
-  margin: 9px 1px;
-  *margin: -5px 0 5px;
-  overflow: hidden;
-  background-color: $lightgrey;
-  border-bottom: 1px solid #ffffff;
-}
-
-.dropdown-menu > li > a {
-  display: block;
-  padding: 3px 10px;
-  clear: both;
-  font-weight: normal;
-  line-height: 20px;
-  color: #333333;
-  white-space: nowrap;
-}
-
-.dropdown-menu > li > a:hover,
-.dropdown-menu > li > a:focus,
-.dropdown-submenu:hover > a,
-.dropdown-submenu:focus > a {
-  color: #ffffff;
-  text-decoration: none;
-  background-color: $green;
-}
-
-.dropdown-menu > .active > a,
-.dropdown-menu > .active > a:hover,
-.dropdown-menu > .active > a:focus {
-  color: #ffffff;
-  text-decoration: none;
-  background-color: $green;
-  outline: 0;
-}
-
-.dropdown-menu > .disabled > a,
-.dropdown-menu > .disabled > a:hover,
-.dropdown-menu > .disabled > a:focus {
-  color: $darkgrey;
-}
-
-.dropdown-menu > .disabled > a:hover,
-.dropdown-menu > .disabled > a:focus {
-  text-decoration: none;
-  cursor: default;
-  background-color: transparent;
-  background-image: none;
-}
-
-.open {
-  *z-index: 1000;
-}
-
-.open > .dropdown-menu {
-  display: block;
-}
-
-.dropdown-backdrop {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 990;
-}
-
 /* Rules for the "Welcome" page */
 .site-welcome, .site-fixthemap {
   .center {
 /* Rules for the "Welcome" page */
 .site-welcome, .site-fixthemap {
   .center {
index ff93bc5a51bb52b39ae828dc97f20668a74fd7f0..838c9198f38157eb32f5a80b408e31d7cb85c91a 100644 (file)
@@ -1,5 +1,4 @@
 /*
  *= require ltr/common
 /*
  *= require ltr/common
- *= require bootstrap-tooltips
  *= require ltr/small
  */
  *= require ltr/small
  */
index d5cd9f10d9c9013c092abfc1bd132b230870d21f..91d9fa3edba8e40bf869e5291502acdad628441f 100644 (file)
@@ -1,5 +1,4 @@
 /*
  *= require rtl/common
 /*
  *= require rtl/common
- *= require bootstrap-tooltips
  *= require rtl/small
  */
  *= require rtl/small
  */
index f6126391a2b98695b00cacbb94835fea831d41c6..e5634e11d0e71aaa28df3ca0aaf72cdd2044a0ac 100644 (file)
@@ -71,22 +71,16 @@ body.small {
         }
       }
     }
         }
       }
     }
+
+    .btn-group {
+      width: 100%;
+      padding: 10px;
+    }
   }
 
   nav.secondary {
   }
 
   nav.secondary {
-    border-bottom: 1px solid #eee;
-
     .user-menu {
     .user-menu {
-      display: block;
       width: 100%;
       width: 100%;
-      margin-left: 0;
-      > li {
-        width: 49%;
-        > a {
-          width: 100%;
-          text-align: center;
-        }
-      }
     }
   }
 
     }
   }
 
index 3963c211e10e95c3e803e96f648d85b26437013a..06823e18f81f1debcd658cbb2e0c61f8a55159f6 100644 (file)
   <a href="#" id="menu-icon"></a>
   <nav class='primary'>
     <%= content_for :header %>
   <a href="#" id="menu-icon"></a>
   <nav class='primary'>
     <%= content_for :header %>
-    <ul>
-      <li id="edit_tab" class="dropdown <%= current_page_class(edit_path) %>">
+    <div class="btn-group">
+      <div id="edit_tab" class="btn-group <%= current_page_class(edit_path) %>">
         <%= link_to t("layouts.edit"),
                     edit_path,
         <%= link_to t("layouts.edit"),
                     edit_path,
-                    :class => "tab geolink editlink",
+                    :class => "btn btn-outline-primary geolink editlink",
                     :id => "editanchor",
                     :data => { :editor => preferred_editor } %>
                     :id => "editanchor",
                     :data => { :editor => preferred_editor } %>
-        <a class='dropdown-toggle' data-toggle='dropdown' href='#'><b class="caret"></b></a>
+        <a class='btn btn-outline-primary dropdown-toggle dropdown-toggle-split' data-toggle='dropdown' href='#'></a>
         <ul class='dropdown-menu'>
           <% Editors::RECOMMENDED_EDITORS.each do |editor| %>
             <li>
               <%= link_to t("layouts.edit_with", :editor => t("editor.#{editor}.description")),
                           edit_path(:editor => editor),
                           :data => { :editor => editor },
         <ul class='dropdown-menu'>
           <% Editors::RECOMMENDED_EDITORS.each do |editor| %>
             <li>
               <%= link_to t("layouts.edit_with", :editor => t("editor.#{editor}.description")),
                           edit_path(:editor => editor),
                           :data => { :editor => editor },
-                          :class => "geolink editlink" %>
+                          :class => "geolink editlink dropdown-item" %>
             </li>
           <% end %>
         </ul>
             </li>
           <% end %>
         </ul>
-      </li>
-      <li id="history_tab" class="<%= current_page_class(history_path) %>">
-        <%= link_to t("layouts.history"), history_path, :class => "tab geolink" %>
-      </li>
-      <li id="export_tab" class="<%= current_page_class(export_path) %>">
-        <%= link_to t("layouts.export"), export_path, :class => "tab geolink" %>
-      </li>
-    </ul>
+      </div>
+      <%= link_to t("layouts.history"), history_path, :class => "btn btn-outline-primary geolink flex-grow-1 current_page_class(history_path)", :id => "history_tab" %>
+      <%= link_to t("layouts.export"), export_path, :class => "btn btn-outline-primary geolink current_page_class(export_path)", :id => "export_tab" %>
+    </div>
   </nav>
   <nav class='secondary'>
   </nav>
   <nav class='secondary'>
-    <ul>
+    <ul class='mx-1 px-0'>
       <% if can? :index, Issue %>
       <% if can? :index, Issue %>
-        <li class="compact-hide <%= current_page_class(issues_path) %>">
-          <%= link_to issues_path(:status => "open") do %>
+        <li class="compact-hide nav-item <%= current_page_class(issues_path) %>">
+          <%= link_to issues_path(:status => "open"), :class => "nav-link" do %>
             <%= t("layouts.issues") %>
             <%= open_issues_count %>
           <% end -%>
         </li>
       <% end %>
             <%= t("layouts.issues") %>
             <%= open_issues_count %>
           <% end -%>
         </li>
       <% end %>
-      <li class="compact-hide <%= current_page_class(traces_path) %>"><%= link_to t("layouts.gps_traces"), traces_path %></li>
-      <li class="compact-hide <%= current_page_class(diary_entries_path) %>"><%= link_to t("layouts.user_diaries"), diary_entries_path %></li>
-      <li class="compact-hide <%= current_page_class(copyright_path) %>"><%= link_to t("layouts.copyright"), copyright_path %></li>
-      <li class="compact-hide <%= current_page_class(help_path) %>"><%= link_to t("layouts.help"), help_path %></li>
-      <li class="compact-hide <%= current_page_class(about_path) %>"><%= link_to t("layouts.about"), about_path %></li>
-      <li id="compact-secondary-nav" class="dropdown">
-        <a class="dropdown-toggle" data-toggle="dropdown" href="#"><%= t "layouts.more" %> <b class="caret"></b></a>
+      <li class="compact-hide nav-item <%= current_page_class(traces_path) %>">
+        <%= link_to t("layouts.gps_traces"), traces_path, :class => "nav-link" %>
+      </li>
+      <li class="compact-hide nav-item <%= current_page_class(diary_entries_path) %>">
+        <%= link_to t("layouts.user_diaries"), diary_entries_path, :class => "nav-link" %>
+      </li>
+      <li class="compact-hide nav-item <%= current_page_class(copyright_path) %>">
+        <%= link_to t("layouts.copyright"), copyright_path, :class => "nav-link" %>
+      </li>
+      <li class="compact-hide nav-item <%= current_page_class(help_path) %>">
+        <%= link_to t("layouts.help"), help_path, :class => "nav-link" %>
+      </li>
+      <li class="compact-hide nav-item <%= current_page_class(about_path) %>">
+        <%= link_to t("layouts.about"), about_path, :class => "nav-link" %>
+      </li>
+      <li id="compact-secondary-nav" class="dropdown nav-item">
+        <a class="dropdown-toggle nav-link" data-toggle="dropdown" href="#"><%= t "layouts.more" %></a>
         <ul class="dropdown-menu">
           <% if Settings.status != "database_offline" && can?(:index, Issue) %>
             <li class="<%= current_page_class(issues_path) %>">
         <ul class="dropdown-menu">
           <% if Settings.status != "database_offline" && can?(:index, Issue) %>
             <li class="<%= current_page_class(issues_path) %>">
-              <%= link_to issues_path(:status => "open") do %>
-                <%= open_issues_count %>
+              <%= link_to issues_path(:status => "open"), :class => "dropdown-item" do %>
                 <%= t("layouts.issues") %>
                 <%= t("layouts.issues") %>
+                <%= open_issues_count %>
               <% end -%>
             </li>
           <% end %>
               <% end -%>
             </li>
           <% end %>
-          <li class="<%= current_page_class(traces_path) %>"><%= link_to t("layouts.gps_traces"), traces_path %></li>
-          <li class="<%= current_page_class(diary_entries_path) %>"><%= link_to t("layouts.user_diaries"), diary_entries_path %></li>
-          <li class="<%= current_page_class(copyright_path) %>"><%= link_to t("layouts.copyright"), copyright_path %></li>
-          <li class="<%= current_page_class(help_path) %>"><%= link_to t("layouts.help"), help_path %></li>
-          <li class="<%= current_page_class(about_path) %>"><%= link_to t("layouts.about"), about_path %></li>
+          <li class="<%= current_page_class(traces_path) %>"><%= link_to t("layouts.gps_traces"), traces_path, :class => "dropdown-item" %></li>
+          <li class="<%= current_page_class(diary_entries_path) %>"><%= link_to t("layouts.user_diaries"), diary_entries_path, :class => "dropdown-item" %></li>
+          <li class="<%= current_page_class(copyright_path) %>"><%= link_to t("layouts.copyright"), copyright_path, :class => "dropdown-item" %></li>
+          <li class="<%= current_page_class(help_path) %>"><%= link_to t("layouts.help"), help_path, :class => "dropdown-item" %></li>
+          <li class="<%= current_page_class(about_path) %>"><%= link_to t("layouts.about"), about_path, :class => "dropdown-item" %></li>
         </ul>
       </li>
     </ul>
     <% if current_user && current_user.id %>
         </ul>
       </li>
     </ul>
     <% if current_user && current_user.id %>
-      <div class='dropdown user-menu logged-in'>
-        <a class='dropdown-toggle' data-toggle='dropdown' href="#">
+      <div class='d-inline-flex dropdown user-menu logged-in clearfix'>
+        <a class='dropdown-toggle btn btn-outline-secondary pl-2 py-1 flex-grow-1' data-toggle='dropdown' href="#">
           <%= user_thumbnail_tiny(current_user, :width => 25, :height => 25) %>
           <%= render :partial => "layouts/inbox" %>
           <span class="user-button">
             <span class='username'>
               <%= current_user.display_name %>
             </span>
           <%= user_thumbnail_tiny(current_user, :width => 25, :height => 25) %>
           <%= render :partial => "layouts/inbox" %>
           <span class="user-button">
             <span class='username'>
               <%= current_user.display_name %>
             </span>
-            <b class="caret"></b>
           </span>
         </a>
           </span>
         </a>
-        <ul class='dropdown-menu'>
-          <li>
-            <%= link_to inbox_messages_path do %>
-              <span class='count-number'><%= number_with_delimiter(current_user.new_messages.size) %></span>
-              <%= t("users.show.my messages") %>
-            <% end %>
-          </li>
-          <li>
-            <%= link_to t("users.show.my profile"), user_path(current_user) %>
-          </li>
-          <li>
-            <%= link_to t("users.show.my settings"), :controller => "users", :action => "account", :display_name => current_user.display_name %>
-          </li>
-          <li class="divider"></li>
-          <li>
-            <%= yield :greeting %>
-          </li>
-          <li>
-            <%= link_to t("layouts.logout"), logout_path(:referer => request.fullpath), :method => "post", :class => "geolink" %>
-          </li>
-        </ul>
+        <div class='dropdown-menu dropdown-menu-right'>
+          <%= link_to inbox_messages_path, :class => "dropdown-item" do %>
+            <%= t("users.show.my messages") %>
+            <span class='count-number'><%= number_with_delimiter(current_user.new_messages.size) %></span>
+          <% end %>
+          <%= link_to t("users.show.my profile"), user_path(current_user), :class => "dropdown-item" %>
+          <%= link_to t("users.show.my settings"), { :controller => "users", :action => "account", :display_name => current_user.display_name }, { :class => "dropdown-item" } %>
+          <div class="dropdown-divider"></div>
+          <%= yield :greeting %>
+          <%= link_to t("layouts.logout"), logout_path(:referer => request.fullpath), :method => "post", :class => "geolink dropdown-item" %>
+        </div>
       </div>
     <% else %>
       </div>
     <% else %>
-      <ul class="user-menu clearfix">
-        <li><%= link_to t("layouts.log_in"), login_path(:referer => request.fullpath), :class => "geolink" %></li>
-        <li><%= link_to t("layouts.sign_up"), user_new_path %></li>
+      <div class="d-inline-flex btn-group login-menu" role="">
+        <%= link_to t("layouts.log_in"), login_path(:referer => request.fullpath), :class => "geolink btn btn-outline-secondary" %>
+        <%= link_to t("layouts.sign_up"), user_new_path, :class => "btn btn-outline-secondary" %>
       </ul>
     <% end %>
   </nav>
       </ul>
     <% end %>
   </nav>
index 4d37cdfb8f4200a07185f99292395d5373ceffa2..528d45c496d6032a6c9b3a43c486ba10dc7cf247 100644 (file)
@@ -9,7 +9,7 @@
     <%= link_to t("layouts.home"),
                 "#",
                 :id => "homeanchor",
     <%= link_to t("layouts.home"),
                 "#",
                 :id => "homeanchor",
-                :class => "set_position",
+                :class => "set_position dropdown-item",
                 :data => { :lat => current_user.home_lat,
                            :lon => current_user.home_lon,
                            :zoom => 15 } %>
                 :data => { :lat => current_user.home_lat,
                            :lon => current_user.home_lon,
                            :zoom => 15 } %>
diff --git a/vendor/assets/bootstrap/bootstrap.dropdown.js b/vendor/assets/bootstrap/bootstrap.dropdown.js
deleted file mode 100644 (file)
index 200e1c6..0000000
+++ /dev/null
@@ -1,161 +0,0 @@
-/* ========================================================================
- * Bootstrap: dropdown.js v3.3.2
- * http://getbootstrap.com/javascript/#dropdowns
- * ========================================================================
- * Copyright 2011-2015 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- * ======================================================================== */
-
-
-+function ($) {
-  'use strict';
-
-  // DROPDOWN CLASS DEFINITION
-  // =========================
-
-  var backdrop = '.dropdown-backdrop'
-  var toggle   = '[data-toggle="dropdown"]'
-  var Dropdown = function (element) {
-    $(element).on('click.bs.dropdown', this.toggle)
-  }
-
-  Dropdown.VERSION = '3.3.2'
-
-  Dropdown.prototype.toggle = function (e) {
-    var $this = $(this)
-
-    if ($this.is('.disabled, :disabled')) return
-
-    var $parent  = getParent($this)
-    var isActive = $parent.hasClass('open')
-
-    clearMenus()
-
-    if (!isActive) {
-      if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
-        // if mobile we use a backdrop because click events don't delegate
-        $('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
-      }
-
-      var relatedTarget = { relatedTarget: this }
-      $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))
-
-      if (e.isDefaultPrevented()) return
-
-      $this
-        .trigger('focus')
-        .attr('aria-expanded', 'true')
-
-      $parent
-        .toggleClass('open')
-        .trigger('shown.bs.dropdown', relatedTarget)
-    }
-
-    return false
-  }
-
-  Dropdown.prototype.keydown = function (e) {
-    if (!/(38|40|27|32)/.test(e.which) || /input|textarea/i.test(e.target.tagName)) return
-
-    var $this = $(this)
-
-    e.preventDefault()
-    e.stopPropagation()
-
-    if ($this.is('.disabled, :disabled')) return
-
-    var $parent  = getParent($this)
-    var isActive = $parent.hasClass('open')
-
-    if ((!isActive && e.which != 27) || (isActive && e.which == 27)) {
-      if (e.which == 27) $parent.find(toggle).trigger('focus')
-      return $this.trigger('click')
-    }
-
-    var desc = ' li:not(.divider):visible a'
-    var $items = $parent.find('[role="menu"]' + desc + ', [role="listbox"]' + desc)
-
-    if (!$items.length) return
-
-    var index = $items.index(e.target)
-
-    if (e.which == 38 && index > 0)                 index--                        // up
-    if (e.which == 40 && index < $items.length - 1) index++                        // down
-    if (!~index)                                      index = 0
-
-    $items.eq(index).trigger('focus')
-  }
-
-  function clearMenus(e) {
-    if (e && e.which === 3) return
-    $(backdrop).remove()
-    $(toggle).each(function () {
-      var $this         = $(this)
-      var $parent       = getParent($this)
-      var relatedTarget = { relatedTarget: this }
-
-      if (!$parent.hasClass('open')) return
-
-      $parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))
-
-      if (e.isDefaultPrevented()) return
-
-      $this.attr('aria-expanded', 'false')
-      $parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget)
-    })
-  }
-
-  function getParent($this) {
-    var selector = $this.attr('data-target')
-
-    if (!selector) {
-      selector = $this.attr('href')
-      selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
-    }
-
-    var $parent = selector && $(selector)
-
-    return $parent && $parent.length ? $parent : $this.parent()
-  }
-
-
-  // DROPDOWN PLUGIN DEFINITION
-  // ==========================
-
-  function Plugin(option) {
-    return this.each(function () {
-      var $this = $(this)
-      var data  = $this.data('bs.dropdown')
-
-      if (!data) $this.data('bs.dropdown', (data = new Dropdown(this)))
-      if (typeof option == 'string') data[option].call($this)
-    })
-  }
-
-  var old = $.fn.dropdown
-
-  $.fn.dropdown             = Plugin
-  $.fn.dropdown.Constructor = Dropdown
-
-
-  // DROPDOWN NO CONFLICT
-  // ====================
-
-  $.fn.dropdown.noConflict = function () {
-    $.fn.dropdown = old
-    return this
-  }
-
-
-  // APPLY TO STANDARD DROPDOWN ELEMENTS
-  // ===================================
-
-  $(document)
-    .on('click.bs.dropdown.data-api', clearMenus)
-    .on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
-    .on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
-    .on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
-    .on('keydown.bs.dropdown.data-api', '[role="menu"]', Dropdown.prototype.keydown)
-    .on('keydown.bs.dropdown.data-api', '[role="listbox"]', Dropdown.prototype.keydown)
-
-}(jQuery);
diff --git a/vendor/assets/bootstrap/bootstrap.tooltip.js b/vendor/assets/bootstrap/bootstrap.tooltip.js
deleted file mode 100644 (file)
index 1856df5..0000000
+++ /dev/null
@@ -1,472 +0,0 @@
-/* ========================================================================
- * Bootstrap: tooltip.js v3.3.2
- * http://getbootstrap.com/javascript/#tooltip
- * Inspired by the original jQuery.tipsy by Jason Frame
- * ========================================================================
- * Copyright 2011-2015 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- * ======================================================================== */
-
-
-+function ($) {
-  'use strict';
-
-  // TOOLTIP PUBLIC CLASS DEFINITION
-  // ===============================
-
-  var Tooltip = function (element, options) {
-    this.type       =
-    this.options    =
-    this.enabled    =
-    this.timeout    =
-    this.hoverState =
-    this.$element   = null
-
-    this.init('tooltip', element, options)
-  }
-
-  Tooltip.VERSION  = '3.3.2'
-
-  Tooltip.TRANSITION_DURATION = 150
-
-  Tooltip.DEFAULTS = {
-    animation: true,
-    placement: 'top',
-    selector: false,
-    template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',
-    trigger: 'hover focus',
-    title: '',
-    delay: 0,
-    html: false,
-    container: false,
-    viewport: {
-      selector: 'body',
-      padding: 0
-    }
-  }
-
-  Tooltip.prototype.init = function (type, element, options) {
-    this.enabled   = true
-    this.type      = type
-    this.$element  = $(element)
-    this.options   = this.getOptions(options)
-    this.$viewport = this.options.viewport && $(this.options.viewport.selector || this.options.viewport)
-
-    var triggers = this.options.trigger.split(' ')
-
-    for (var i = triggers.length; i--;) {
-      var trigger = triggers[i]
-
-      if (trigger == 'click') {
-        this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this))
-      } else if (trigger != 'manual') {
-        var eventIn  = trigger == 'hover' ? 'mouseenter' : 'focusin'
-        var eventOut = trigger == 'hover' ? 'mouseleave' : 'focusout'
-
-        this.$element.on(eventIn  + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
-        this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this))
-      }
-    }
-
-    this.options.selector ?
-      (this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) :
-      this.fixTitle()
-  }
-
-  Tooltip.prototype.getDefaults = function () {
-    return Tooltip.DEFAULTS
-  }
-
-  Tooltip.prototype.getOptions = function (options) {
-    options = $.extend({}, this.getDefaults(), this.$element.data(), options)
-
-    if (options.delay && typeof options.delay == 'number') {
-      options.delay = {
-        show: options.delay,
-        hide: options.delay
-      }
-    }
-
-    return options
-  }
-
-  Tooltip.prototype.getDelegateOptions = function () {
-    var options  = {}
-    var defaults = this.getDefaults()
-
-    this._options && $.each(this._options, function (key, value) {
-      if (defaults[key] != value) options[key] = value
-    })
-
-    return options
-  }
-
-  Tooltip.prototype.enter = function (obj) {
-    var self = obj instanceof this.constructor ?
-      obj : $(obj.currentTarget).data('bs.' + this.type)
-
-    if (self && self.$tip && self.$tip.is(':visible')) {
-      self.hoverState = 'in'
-      return
-    }
-
-    if (!self) {
-      self = new this.constructor(obj.currentTarget, this.getDelegateOptions())
-      $(obj.currentTarget).data('bs.' + this.type, self)
-    }
-
-    clearTimeout(self.timeout)
-
-    self.hoverState = 'in'
-
-    if (!self.options.delay || !self.options.delay.show) return self.show()
-
-    self.timeout = setTimeout(function () {
-      if (self.hoverState == 'in') self.show()
-    }, self.options.delay.show)
-  }
-
-  Tooltip.prototype.leave = function (obj) {
-    var self = obj instanceof this.constructor ?
-      obj : $(obj.currentTarget).data('bs.' + this.type)
-
-    if (!self) {
-      self = new this.constructor(obj.currentTarget, this.getDelegateOptions())
-      $(obj.currentTarget).data('bs.' + this.type, self)
-    }
-
-    clearTimeout(self.timeout)
-
-    self.hoverState = 'out'
-
-    if (!self.options.delay || !self.options.delay.hide) return self.hide()
-
-    self.timeout = setTimeout(function () {
-      if (self.hoverState == 'out') self.hide()
-    }, self.options.delay.hide)
-  }
-
-  Tooltip.prototype.show = function () {
-    var e = $.Event('show.bs.' + this.type)
-
-    if (this.hasContent() && this.enabled) {
-      this.$element.trigger(e)
-
-      var inDom = $.contains(this.$element[0].ownerDocument.documentElement, this.$element[0])
-      if (e.isDefaultPrevented() || !inDom) return
-      var that = this
-
-      var $tip = this.tip()
-
-      var tipId = this.getUID(this.type)
-
-      this.setContent()
-      $tip.attr('id', tipId)
-      this.$element.attr('aria-describedby', tipId)
-
-      if (this.options.animation) $tip.addClass('fade')
-
-      var placement = typeof this.options.placement == 'function' ?
-        this.options.placement.call(this, $tip[0], this.$element[0]) :
-        this.options.placement
-
-      var autoToken = /\s?auto?\s?/i
-      var autoPlace = autoToken.test(placement)
-      if (autoPlace) placement = placement.replace(autoToken, '') || 'top'
-
-      $tip
-        .detach()
-        .css({ top: 0, left: 0, display: 'block' })
-        .addClass(placement)
-        .data('bs.' + this.type, this)
-
-      this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element)
-
-      var pos          = this.getPosition()
-      var actualWidth  = $tip[0].offsetWidth
-      var actualHeight = $tip[0].offsetHeight
-
-      if (autoPlace) {
-        var orgPlacement = placement
-        var $container   = this.options.container ? $(this.options.container) : this.$element.parent()
-        var containerDim = this.getPosition($container)
-
-        placement = placement == 'bottom' && pos.bottom + actualHeight > containerDim.bottom ? 'top'    :
-                    placement == 'top'    && pos.top    - actualHeight < containerDim.top    ? 'bottom' :
-                    placement == 'right'  && pos.right  + actualWidth  > containerDim.width  ? 'left'   :
-                    placement == 'left'   && pos.left   - actualWidth  < containerDim.left   ? 'right'  :
-                    placement
-
-        $tip
-          .removeClass(orgPlacement)
-          .addClass(placement)
-      }
-
-      var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight)
-
-      this.applyPlacement(calculatedOffset, placement)
-
-      var complete = function () {
-        var prevHoverState = that.hoverState
-        that.$element.trigger('shown.bs.' + that.type)
-        that.hoverState = null
-
-        if (prevHoverState == 'out') that.leave(that)
-      }
-
-      $.support.transition && this.$tip.hasClass('fade') ?
-        $tip
-          .one('bsTransitionEnd', complete)
-          .emulateTransitionEnd(Tooltip.TRANSITION_DURATION) :
-        complete()
-    }
-  }
-
-  Tooltip.prototype.applyPlacement = function (offset, placement) {
-    var $tip   = this.tip()
-    var width  = $tip[0].offsetWidth
-    var height = $tip[0].offsetHeight
-
-    // manually read margins because getBoundingClientRect includes difference
-    var marginTop = parseInt($tip.css('margin-top'), 10)
-    var marginLeft = parseInt($tip.css('margin-left'), 10)
-
-    // we must check for NaN for ie 8/9
-    if (isNaN(marginTop))  marginTop  = 0
-    if (isNaN(marginLeft)) marginLeft = 0
-
-    offset.top  = offset.top  + marginTop
-    offset.left = offset.left + marginLeft
-
-    // $.fn.offset doesn't round pixel values
-    // so we use setOffset directly with our own function B-0
-    $.offset.setOffset($tip[0], $.extend({
-      using: function (props) {
-        $tip.css({
-          top: Math.round(props.top),
-          left: Math.round(props.left)
-        })
-      }
-    }, offset), 0)
-
-    $tip.addClass('in')
-
-    // check to see if placing tip in new offset caused the tip to resize itself
-    var actualWidth  = $tip[0].offsetWidth
-    var actualHeight = $tip[0].offsetHeight
-
-    if (placement == 'top' && actualHeight != height) {
-      offset.top = offset.top + height - actualHeight
-    }
-
-    var delta = this.getViewportAdjustedDelta(placement, offset, actualWidth, actualHeight)
-
-    if (delta.left) offset.left += delta.left
-    else offset.top += delta.top
-
-    var isVertical          = /top|bottom/.test(placement)
-    var arrowDelta          = isVertical ? delta.left * 2 - width + actualWidth : delta.top * 2 - height + actualHeight
-    var arrowOffsetPosition = isVertical ? 'offsetWidth' : 'offsetHeight'
-
-    $tip.offset(offset)
-    this.replaceArrow(arrowDelta, $tip[0][arrowOffsetPosition], isVertical)
-  }
-
-  Tooltip.prototype.replaceArrow = function (delta, dimension, isHorizontal) {
-    this.arrow()
-      .css(isHorizontal ? 'left' : 'top', 50 * (1 - delta / dimension) + '%')
-      .css(isHorizontal ? 'top' : 'left', '')
-  }
-
-  Tooltip.prototype.setContent = function () {
-    var $tip  = this.tip()
-    var title = this.getTitle()
-
-    $tip.find('.tooltip-inner')[this.options.html ? 'html' : 'text'](title)
-    $tip.removeClass('fade in top bottom left right')
-  }
-
-  Tooltip.prototype.hide = function (callback) {
-    var that = this
-    var $tip = this.tip()
-    var e    = $.Event('hide.bs.' + this.type)
-
-    function complete() {
-      if (that.hoverState != 'in') $tip.detach()
-      that.$element
-        .removeAttr('aria-describedby')
-        .trigger('hidden.bs.' + that.type)
-      callback && callback()
-    }
-
-    this.$element.trigger(e)
-
-    if (e.isDefaultPrevented()) return
-
-    $tip.removeClass('in')
-
-    $.support.transition && this.$tip.hasClass('fade') ?
-      $tip
-        .one('bsTransitionEnd', complete)
-        .emulateTransitionEnd(Tooltip.TRANSITION_DURATION) :
-      complete()
-
-    this.hoverState = null
-
-    return this
-  }
-
-  Tooltip.prototype.fixTitle = function () {
-    var $e = this.$element
-    if ($e.attr('title') || typeof ($e.attr('data-original-title')) != 'string') {
-      $e.attr('data-original-title', $e.attr('title') || '').attr('title', '')
-    }
-  }
-
-  Tooltip.prototype.hasContent = function () {
-    return this.getTitle()
-  }
-
-  Tooltip.prototype.getPosition = function ($element) {
-    $element   = $element || this.$element
-
-    var el     = $element[0]
-    var isBody = el.tagName == 'BODY'
-
-    var elRect    = el.getBoundingClientRect()
-    if (elRect.width == null) {
-      // width and height are missing in IE8, so compute them manually; see https://github.com/twbs/bootstrap/issues/14093
-      elRect = $.extend({}, elRect, { width: elRect.right - elRect.left, height: elRect.bottom - elRect.top })
-    }
-    var elOffset  = isBody ? { top: 0, left: 0 } : $element.offset()
-    var scroll    = { scroll: isBody ? document.documentElement.scrollTop || document.body.scrollTop : $element.scrollTop() }
-    var outerDims = isBody ? { width: $(window).width(), height: $(window).height() } : null
-
-    return $.extend({}, elRect, scroll, outerDims, elOffset)
-  }
-
-  Tooltip.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) {
-    return placement == 'bottom' ? { top: pos.top + pos.height,   left: pos.left + pos.width / 2 - actualWidth / 2 } :
-           placement == 'top'    ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2 } :
-           placement == 'left'   ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } :
-        /* placement == 'right' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width }
-
-  }
-
-  Tooltip.prototype.getViewportAdjustedDelta = function (placement, pos, actualWidth, actualHeight) {
-    var delta = { top: 0, left: 0 }
-    if (!this.$viewport) return delta
-
-    var viewportPadding = this.options.viewport && this.options.viewport.padding || 0
-    var viewportDimensions = this.getPosition(this.$viewport)
-
-    if (/right|left/.test(placement)) {
-      var topEdgeOffset    = pos.top - viewportPadding - viewportDimensions.scroll
-      var bottomEdgeOffset = pos.top + viewportPadding - viewportDimensions.scroll + actualHeight
-      if (topEdgeOffset < viewportDimensions.top) { // top overflow
-        delta.top = viewportDimensions.top - topEdgeOffset
-      } else if (bottomEdgeOffset > viewportDimensions.top + viewportDimensions.height) { // bottom overflow
-        delta.top = viewportDimensions.top + viewportDimensions.height - bottomEdgeOffset
-      }
-    } else {
-      var leftEdgeOffset  = pos.left - viewportPadding
-      var rightEdgeOffset = pos.left + viewportPadding + actualWidth
-      if (leftEdgeOffset < viewportDimensions.left) { // left overflow
-        delta.left = viewportDimensions.left - leftEdgeOffset
-      } else if (rightEdgeOffset > viewportDimensions.width) { // right overflow
-        delta.left = viewportDimensions.left + viewportDimensions.width - rightEdgeOffset
-      }
-    }
-
-    return delta
-  }
-
-  Tooltip.prototype.getTitle = function () {
-    var title
-    var $e = this.$element
-    var o  = this.options
-
-    title = $e.attr('data-original-title')
-      || (typeof o.title == 'function' ? o.title.call($e[0]) :  o.title)
-
-    return title
-  }
-
-  Tooltip.prototype.getUID = function (prefix) {
-    do prefix += ~~(Math.random() * 1000000)
-    while (document.getElementById(prefix))
-    return prefix
-  }
-
-  Tooltip.prototype.tip = function () {
-    return (this.$tip = this.$tip || $(this.options.template))
-  }
-
-  Tooltip.prototype.arrow = function () {
-    return (this.$arrow = this.$arrow || this.tip().find('.tooltip-arrow'))
-  }
-
-  Tooltip.prototype.enable = function () {
-    this.enabled = true
-  }
-
-  Tooltip.prototype.disable = function () {
-    this.enabled = false
-  }
-
-  Tooltip.prototype.toggleEnabled = function () {
-    this.enabled = !this.enabled
-  }
-
-  Tooltip.prototype.toggle = function (e) {
-    var self = this
-    if (e) {
-      self = $(e.currentTarget).data('bs.' + this.type)
-      if (!self) {
-        self = new this.constructor(e.currentTarget, this.getDelegateOptions())
-        $(e.currentTarget).data('bs.' + this.type, self)
-      }
-    }
-
-    self.tip().hasClass('in') ? self.leave(self) : self.enter(self)
-  }
-
-  Tooltip.prototype.destroy = function () {
-    var that = this
-    clearTimeout(this.timeout)
-    this.hide(function () {
-      that.$element.off('.' + that.type).removeData('bs.' + that.type)
-    })
-  }
-
-
-  // TOOLTIP PLUGIN DEFINITION
-  // =========================
-
-  function Plugin(option) {
-    return this.each(function () {
-      var $this   = $(this)
-      var data    = $this.data('bs.tooltip')
-      var options = typeof option == 'object' && option
-
-      if (!data && option == 'destroy') return
-      if (!data) $this.data('bs.tooltip', (data = new Tooltip(this, options)))
-      if (typeof option == 'string') data[option]()
-    })
-  }
-
-  var old = $.fn.tooltip
-
-  $.fn.tooltip             = Plugin
-  $.fn.tooltip.Constructor = Tooltip
-
-
-  // TOOLTIP NO CONFLICT
-  // ===================
-
-  $.fn.tooltip.noConflict = function () {
-    $.fn.tooltip = old
-    return this
-  }
-
-}(jQuery);