From: John Firebaugh <john.firebaugh@gmail.com>
Date: Fri, 15 Nov 2013 18:32:14 +0000 (-0800)
Subject: Revert "Eliminate HTML5 elements"
X-Git-Tag: live~4609^2~64
X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/d920d94f69de0e6f5d354f58933290fcdf0345de

Revert "Eliminate HTML5 elements"

This led to a huge mess of conflicting CSS rule priorities.

This reverts commit 9fc8bc93684cbcd334c9290240262cf98202cd1e.
---

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index c1f6af004..2c186c909 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -132,10 +132,10 @@ $(document).ready(function () {
 
   $("#menu-icon").on("click", function(e) {
     e.preventDefault();
-    $("#header").toggleClass("closed");
+    $("header").toggleClass("closed");
   });
 
-  $(".nav.primary li a").on("click", function() {
-    $("#header").toggleClass("closed");
+  $("nav.primary li a").on("click", function() {
+    $("header").toggleClass("closed");
   });
 });
diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 6e60d5666..f1644c06f 100644
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -270,7 +270,7 @@ $(document).ready(function () {
 
   $(".search_form").on("submit", function(e) {
     e.preventDefault();
-    $("#header").addClass("closed");
+    $("header").addClass("closed");
     var query = $(this).find("input[name=query]").val();
     if (query) {
       OSM.route("/search?query=" + encodeURIComponent(query) + OSM.formatHash(map));
diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index d456e0685..f88e0d1d2 100644
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -244,13 +244,13 @@ table {
   opacity: 0.6;
 }
 
-#header {
+header {
   height: $headerHeight;
   position: relative;
   z-index: 1001;
   font-size: 13px;
 
-  h1, .nav, .nav > ul, .nav > ul > li, .user-menu {
+  h1, nav, nav > ul, nav > ul > li, .dropdown {
     display: inline-block;
   }
 
@@ -259,7 +259,7 @@ table {
     padding: $lineheight/2;
   }
 
-  h1, .nav.primary {
+  h1, nav.primary {
     float: left;
   }
 
@@ -284,7 +284,7 @@ table {
   }
 }
 
-.nav.primary {
+nav.primary {
   > ul {
     $border: 1px solid $green;
 
@@ -347,12 +347,11 @@ table {
   }
 }
 
-.nav.secondary {
+nav.secondary {
   position: absolute;
   right: 0;
 
-  > ul,
-  > #compact-secondary-nav {
+  > ul {
     vertical-align: middle;
     a, .dropdown-toggle {
       display: inline-block;
@@ -456,7 +455,7 @@ table {
     display: inline-block;
   }
   .compact-hide {
-    display: none !important;
+    display: none;
   }
 }
 
@@ -901,7 +900,7 @@ table {
 
 /* Rules for the search box */
 
-#header .search_form {
+header .search_form {
   display: none;
 }
 
diff --git a/app/assets/stylesheets/print.css b/app/assets/stylesheets/print.css
index 5186f8c58..fa04314b1 100644
--- a/app/assets/stylesheets/print.css
+++ b/app/assets/stylesheets/print.css
@@ -1,4 +1,4 @@
-#header,
+header,
 #sidebar,
 #permalink,
 .leaflet-control {
diff --git a/app/assets/stylesheets/small.css.scss b/app/assets/stylesheets/small.css.scss
index 06acc4da7..39b946af0 100644
--- a/app/assets/stylesheets/small.css.scss
+++ b/app/assets/stylesheets/small.css.scss
@@ -15,14 +15,15 @@ input[type="text"] {
   display: inline-block !important;
 }
 
-.nav {
+nav.primary,
+nav.secondary {
   float: none !important;
   position: relative;
   display: block;
   clear: both;
 }
 
-#header {
+header {
   height: auto;
   min-height: $headerHeight;
   background: #fff;
@@ -31,7 +32,7 @@ input[type="text"] {
     padding-bottom: 15px;
   }
 
-  &.closed .nav {
+  &.closed nav {
     display: none;
   }
 
@@ -46,7 +47,7 @@ input[type="text"] {
   display: none;
 }
 
-.nav.primary {
+nav.primary {
   padding: 0;
 
   ul, li {
@@ -70,7 +71,7 @@ input[type="text"] {
   }
 }
 
-.nav.secondary {
+nav.secondary {
   border-bottom: 1px solid #eee;
 
   .user-menu {
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index 35cc0578c..dbb9966b6 100644
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -1,4 +1,4 @@
-<div id="header" class="closed">
+<header class="closed">
   <h1>
     <a href="<%= root_path %>" class="geolink">
       <%= image_tag "osm_logo.png", :alt => t('layouts.logo.alt_text'), :class => 'logo' %>
@@ -6,7 +6,7 @@
     </a>
   </h1>
   <a href="#" id="menu-icon"></a>
-  <div class='nav primary'>
+  <nav class='primary'>
     <%= content_for :header %>
     <ul>
       <li id="edit_tab" class="dropdown <%= current_page_class(edit_path) %>">
@@ -32,23 +32,23 @@
         <%= link_to t('layouts.export'), export_path, :class => 'tab geolink' %>
       </li>
     </ul>
-  </div>
-  <div class='nav secondary'>
-    <ul class="compact-hide">
-      <li class="<%= current_page_class(traces_path) %>"><%= link_to t('layouts.gps_traces'), traces_path %></li>
-      <li class="<%= current_page_class(diary_path) %>"><%= link_to t('layouts.user_diaries'), diary_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>
+  </nav>
+  <nav class='secondary'>
+    <ul>
+      <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_path) %>"><%= link_to t('layouts.user_diaries'), diary_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="#">More <b class="caret"></b></a>
+        <ul class="dropdown-menu">
+          <li class="<%= current_page_class(traces_path) %>"><%= link_to t('layouts.gps_traces'), traces_path %></li>
+          <li class="<%= current_page_class(diary_path) %>"><%= link_to t('layouts.user_diaries'), diary_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>
+        </ul>
+      </li>
     </ul>
-    <div id="compact-secondary-nav" class="dropdown">
-      <a class="dropdown-toggle" data-toggle="dropdown" href="#">More <b class="caret"></b></a>
-      <ul class="dropdown-menu">
-        <li class="<%= current_page_class(traces_path) %>"><%= link_to t('layouts.gps_traces'), traces_path %></li>
-        <li class="<%= current_page_class(diary_path) %>"><%= link_to t('layouts.user_diaries'), diary_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>
-      </ul>
-    </div>
     <% if @user %>
       <div class='dropdown user-menu logged-in'>
         <a class='dropdown-toggle' data-toggle='dropdown' href="#">
@@ -85,5 +85,5 @@
         <li><%= link_to t('layouts.sign_up'), user_new_path %></li>
       </ul>
     <% end %>
-  </div>
-</div>
+  </nav>
+</header>