Frontpage redesign
authorJohn Firebaugh <john.firebaugh@gmail.com>
Tue, 9 Jul 2013 22:26:04 +0000 (15:26 -0700)
committerJohn Firebaugh <john.firebaugh@gmail.com>
Sun, 13 Oct 2013 21:45:58 +0000 (14:45 -0700)
16 files changed:
app/assets/javascripts/sidebar.js
app/assets/stylesheets/common.css.scss
app/assets/stylesheets/print.css
app/assets/stylesheets/small.css.scss
app/views/export/start.html.erb [deleted file]
app/views/layouts/_content.html.erb [new file with mode: 0644]
app/views/layouts/_header.html.erb [new file with mode: 0644]
app/views/layouts/map.html.erb [new file with mode: 0644]
app/views/layouts/site.html.erb
app/views/site/_search.html.erb [deleted file]
app/views/site/_sidebar.html.erb [deleted file]
app/views/site/edit.html.erb
app/views/site/export.html.erb [new file with mode: 0644]
app/views/site/index.html.erb
config/locales/en.yml
config/routes.rb

index 912197b..e126285 100644 (file)
@@ -1,16 +1,20 @@
-function openSidebar(options) {
-  options = options || {};
+function openSidebar() {
+  $("#sidebar-main")
+    .hide();
 
-  $("#sidebar").trigger("closed");
-
-  if (options.title) { $("#sidebar_title").html(options.title); }
-
-  $("#sidebar").width(options.width || "30%");
-  $("#sidebar").css("display", "block").trigger("opened");
+  $("#sidebar")
+    .trigger("closed")
+    .show()
+    .trigger("opened");
 }
 
 function closeSidebar() {
-  $("#sidebar").css("display", "none").trigger("closed");
+  $("#sidebar")
+    .hide()
+    .trigger("closed");
+
+  $("#sidebar-main")
+    .show();
 }
 
 $(document).ready(function () {
index b09becd..f906526 100644 (file)
@@ -5,9 +5,14 @@ $typeheight: 14px;
 $offwhite: #f4f4ff;
 $blue: #7092FF;
 $lightblue: #B8C5F0;
-$grey: #AAA;
-$lightgrey: #CCC;
+$green: #7ebc6f;
+$grey: #CCC;
+$lightgrey: #EEE;
+$darkgrey: #AAA;
 $hovercolor: 20%;
+$headerHeight: 75px;
+$sidebarWidth: 350px;
+$keyline: 1px solid $grey;
 
 /* Styles common to large and small screens */
 
@@ -88,6 +93,7 @@ abbr, acronym {
 .margin12 { margin-left:100.0000%; }
 
 .fillL { background-color: white; }
+
 /* Default rules for the body of every page */
 
 * {
@@ -112,35 +118,19 @@ body.slim {
 }
 
 h1, h2, h3 {
-  margin-top: $lineheight/2;
-  margin-bottom: $lineheight;
   font-weight: bold;
   line-height: 1.2;
 }
 
-h1, h2 {
-  font-size: 32px;
+h1 {
+  font-size: 18px;
 }
 
-#content h2 {
-  font-size: 21px;
+h2, h3 {
+  font-size: 16px;
 }
 
-h3 {
-  font-size: 21px;
-  margin-top: $lineheight/2;
-  margin-bottom: $lineheight;
-}
-
-h4,h5,h6 {
-  font-size: $typeheight;
-  margin-top: $lineheight/2;
-  margin-bottom: $lineheight/2;
-  font-weight: bold;
-  line-height: 1.5;
-}
-
-p, ul {
+p {
   margin-bottom: $lineheight;
 }
 
@@ -242,196 +232,42 @@ table {
   }
 }
 
-/* Rules for the whole left sidebar, including the logo */
-
-#left {
-  position: absolute;
-  height: 100%;
-  width: 185px;
-  font-size: 11px;
-  line-height: 1.1;
-  z-index: 100;
-  border-right: 1px solid #ccc;
-}
-
-/* Rules for the OpenStreetMap logo in the top left corner */
-
-#logo {
-  display: block;
-  width: 170px;
-  min-width: 170px;
-  padding: $lineheight $lineheight/4;
-  text-align: center;
-  margin: auto;
-}
-
-#logo h1 {
-  font-size: 18px;
-  line-height: 1;
-  text-align: center;
-  margin: 0;
-}
-
-#logo h2 {
-  font-size: $lineheight/2;
-  line-height: 15px;
-  margin: 0;
-}
-
-/* Rules for the site name */
-
-#small-title {
-  display: none;
-
-  img {
-    vertical-align: text-bottom;
-  }
-}
-
-/* Rules for the introductory text displayed in the left sidebar to new users */
-
-.sidebar-copy {
-  padding: $lineheight/4 $lineheight/2;
-  p {
-    margin: $lineheight/4 0;
-  }
-}
-.sidebar-copy.intro {
-  border-top: 1px solid #ccc;
-}
-
-/*
- * Rules for alert boxes shown in the left sidebar when important
- * information needs to be conveyed such as when the site is
- * undergoing maintenance.
- */
-
-.sidebar-alert {
-  padding: $lineheight/4;
-  border-top: 1px solid #ccc;
-  margin-top: 4px;
-  margin-bottom: -5px;
-  background: #e00;
-  font-size: 12px;
-  font-weight: bold;
-  p {
-    margin: $lineheight/4;
-  }
-}
-
-/*
- * Rules for notice boxes shown in the left sidebar when important, but
- * non-critical information needs to be conveyed such as notices about
- * donation drives.
- */
-
-.sidebar-notice {
-  padding: $lineheight/4;
-  border-top: 1px solid #ccc;
-  margin-top: 4px;
-  margin-bottom: -5px;
-  background: #ea0;
-  font-size: 12px;
-  p {
-    margin: $lineheight/4;
-  }
-}
-
-/* Rules for the menu displayed in the left sidebar */
-
-.left_menu {
-  left: 0px;
-  margin: 0;
-  padding: $lineheight/4 $lineheight/2 $lineheight/2 $lineheight/2;
-  font-size: 12px;
-  line-height: 1.25;
-  list-style-type: none;
-  border-bottom: 1px solid #ccc;
-  border-top: 1px solid #ccc;
-  img {
-    margin: $lineheight/2 0px;
-  }
-
-  ul {
-    padding: 0;
-    margin: 0;
-  }
-
-  li {
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  h4 {
-    padding: $lineheight/4 0 $lineheight/4 0;
-    font-size: 12px;
-    margin: 0;
-  }
-}
-
-/*
- * Rules for "optional boxes" which appear in the left sidebar on
- * certain pages. Current users are the seach box on the main page
- * and the tag cloud on the traces pages.
- */
-
-.optionalbox {
-  left: 0px;
-  padding: $lineheight/4 $lineheight/2;
-  margin: $lineheight/4 0;
-  text-align: left;
-}
-
 /* Rules for the search box */
 
-#search_field {
+#search_form {
   position: relative;
+  padding: $lineheight;
+  background-color: $lightgrey;
+  border-bottom: $keyline;
 
-  form {
-    width: 165px;
+  #query_wrapper {
+    overflow: hidden;
   }
 
-  input[type="text"] {
-    width: 165px;
-    padding: 3px;
-    font-size: $typeheight;
-    line-height: 1.1;
-    height: 25px;
-    padding: 2px 0px 2px $lineheight/4;
-    box-shadow: inset #DDD 0px 1px 3px;
+  input {
+    width: 100%;
+    height: 30px;
+    border-right: none;
+    border-radius: 2px 0 0 2px;
 
     transition: 300ms linear;
     -webkit-transition: 300ms linear;
     -moz-transition: 300ms linear;
   }
 
-  input[type="text"]:focus {
-    box-shadow: 0px 0px 7px #9ED485;
+  input:focus {
     outline: none;
+    box-shadow: 0px 0px 7px #9ED485;
   }
 
-  input[type="submit"] {
-    border: 0;
-    margin: 0;
-    padding: 0;
-    width: 15px;
-    height: 15px;
+  input[type=submit] {
+    float: right;
+    width: auto;
     min-width: 0;
-    text-indent: -1000px;
-    overflow: hidden;
-    background: image-url("sprite.png") -2px -2px no-repeat;
-    position: absolute;
-    top: $lineheight/4;
-    right: $lineheight/4;
-    cursor: pointer;
+    border-radius: 0 2px 2px 0;
   }
 }
 
-.search_help {
-  margin: $lineheight/4 0 0 0;
-}
-
 /* Utility for de-emphasizing content */
 
 .deemphasize {
@@ -454,7 +290,7 @@ a.donate {
   text-align: center;
   border-radius: 2px;
   color: #222;
-  margin: $lineheight/2 $lineheight/2 0px $lineheight/2;
+  margin: $lineheight/2 auto;
 
   &:hover {
     background: #9ed485;
@@ -462,69 +298,64 @@ a.donate {
   }
 }
 
-/* Rules for Creative Commons logo button */
+/* Rules for the header */
 
-#cclogo {
-  margin: $lineheight/2 0;
-  float: right;
-}
+header {
+  height: $headerHeight;
+  position: relative;
+  border-bottom: $keyline;
 
-/* Rules for tabbed navigation bar */
+  h1, nav, nav > ul, nav > ul > li, .dropdown {
+    display: inline-block;
+  }
 
-#top-bar {
-  position: relative;
-  margin-left: 185px;
-  height: 30px;
-  border-bottom: 1px solid #ccc;
-  background: white;
-  z-index: 1001;
+  > * {
+    height: 100%;
+    padding: $lineheight;
+  }
 
-  .caret {
-    margin-top: 10px;
+  h1, nav.primary {
+    float: left;
   }
-}
 
-.site-edit #top-bar,
-.site-index #top-bar,
-.site-export #top-bar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-}
+  img.logo {
+    width: 30px;
+    height: 30px;
+    vertical-align: middle;
+  }
 
-#top-bar nav > ul {
-  height: 29px;
-  margin-bottom: 0;
+  h1 {
+    margin: 0;
+    border-right: $keyline;
+  }
 }
 
 nav.primary {
-  float: left;
-
   > ul {
-    > li {
-      float: left;
-
-      > * {
-        padding: 3px $lineheight/2;
-      }
-    }
+    border: 1px solid darken($green, 20%);
+    border-radius: 4px;
   }
 
   a.tab {
     display: inline-block;
     font-weight: bold;
     text-decoration: none;
-    color: #333;
+    color: $green;
+    padding: 5px 15px;
+    border-right: 1px solid darken($green, 20%);
+  }
 
-    -webkit-transition: color 200ms ease-in;
-       -moz-transition: color 200ms ease-in;
-         -o-transition: color 200ms ease-in;
-            transition: color 200ms ease-in;
+  #edit_tab a.tab {
+    border-right: 1px solid lighten($green, 20%);
+  }
 
-    &:hover {
-      text-decoration: underline;
-    }
+  .dropdown-toggle {
+    padding: 5px 10px 5px 5px;
+  }
+
+  .caret {
+    margin-top: 15px;
+    border-top-color: $green;
   }
 
   .disabled a {
@@ -539,34 +370,37 @@ nav.primary {
       border-top-color: #ccc;
     }
   }
-
-  .dropdown {
-    height: 29px;
-  }
 }
 
 .site-index #view_tab,
-.site-edit #edit_tab,
-.changeset-list #history_tab {
-  background: #9ed485;
-  color: #000;
+.changeset-list #history_tab,
+.site-export #export_tab,
+.site-edit #edit_tab {
+  background-color: $green;
+
+  .tab {
+    color: #fff;
+  }
+
+  .caret {
+    border-top-color: #fff;
+  }
 }
 
 nav.secondary {
-  float: right;
-  height: 100%;
+  position: absolute;
+  right: 0;
 
-  > ul {
-    display: inline-block;
-    padding: 3px $lineheight/2;
+  > ul a {
+    font-weight: bold;
+    text-decoration: none;
+    color: $darkgrey;
+    padding-right: 10px;
   }
 
   .dropdown {
-    display: inline-block;
-    background-color: #EEE;
-    &:hover {
-      background-color: #CCC;
-    }
+    border: 1px solid $grey;
+    border-radius: 4px;
   }
 
   img {
@@ -774,7 +608,6 @@ nav.secondary {
   width: 250px;
   height: 100%;
   background: white;
-  border-left: 1px solid #CCC;
   overflow: auto;
 
   .section {
@@ -882,7 +715,7 @@ nav.secondary {
 }
 
 .leaflet-top.leaflet-right {
-  top: $lineheight/2 !important;
+  top: 10px !important;
   .leaflet-control {
     margin-right: 0px !important;
     margin-top: 0px !important;
@@ -902,15 +735,6 @@ nav.secondary {
 
 /* Rules for edit menu */
 
-.menuicon {
-  padding: 0 $lineheight/4;
-  font-weight: normal;
-  display: inline-block;
-  &:hover {
-    text-decoration: none !important;
-  }
-}
-
 .menu {
   display: none;
   z-index: 10000;
@@ -943,25 +767,39 @@ nav.secondary {
   text-align: center;
 }
 
-/* Rules for the popout map sidebar */
+/* Rules for the sidebar */
 
 #sidebar {
-  display: none;
-  position: relative;
-  float: left;
-  border-right: 1px solid $lightgrey;
-  width: 33.3333%;
-  height: 100%;
-  ul {
-    margin-bottom: 0;
-    &:last-child {
-        border-bottom: 1px solid #ccc;
-    }
-    li {
-      margin-bottom: $lineheight/4;
-      &:last-child {
-        margin-bottom: 0;
-      }
+  .alert {
+    background: #e00;
+  }
+
+  h2, h3, h4 {
+    padding: $lineheight;
+    border-bottom: $keyline;
+  }
+
+  .icon.close {
+    position: absolute;
+    right: $lineheight;
+  }
+
+  p {
+    padding: $lineheight;
+    margin: 0;
+  }
+
+  .footer {
+    position: absolute;
+    bottom: 0;
+  }
+
+  p.credits {
+    font-size: 11px;
+    color: #999;
+
+    a {
+      color: #666;
     }
   }
 }
@@ -986,17 +824,11 @@ nav.secondary {
 }
 
 #sidebar_content {
-  position: relative;
-  margin-bottom: 20px;
-  overflow: auto;
-  height: 100%;
+  position: absolute;
+  top: 72px;
+  bottom: 0;
   width: 100%;
-  h4 {
-    padding: 0 $lineheight $lineheight/2 $lineheight;
-    margin-top: $lineheight/2;
-    margin-bottom: 0;
-    border-bottom: 1px solid #ddd;
-  }
+  overflow-y: auto;
 }
 
 /* Rules for the map key which appears in the popout sidebar */
@@ -1091,35 +923,43 @@ ul.results-list li { border-bottom: 1px solid #ccc; }
   margin: $lineheight/4;
 }
 
-/* Rules for the main content area */
+/* Rules for the sidebar and main content area */
+
+.site-index,
+.site-export,
+.site-edit {
+  #content {
+    position: absolute;
+    top: $headerHeight;
+    bottom: 0;
+    width: 100%;
+  }
 
-#content {
+  #sidebar, #map {
+    position: relative;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  #sidebar {
+    float: left;
+    width: $sidebarWidth;
+  }
+}
+
+.content-heading {
   position: relative;
   padding: $lineheight;
+  background: $lightgrey;
+  border-bottom: $keyline;
 }
 
-.site-edit #content,
-.site-index #content,
-.site-export #content {
-  position: fixed;
-  padding: 0;
-  top: 30px; bottom: 0;
-  left: 184px; right: 0;
-  border-left: 1px solid #ccc;
+.content-body {
+  padding: $lineheight;
 }
 
 /* Overrides for pages that use new layout conventions */
-.user-new,
-.user-create,
-.user-terms,
-.user-confirm,
-.site-copyright,
-.site-welcome,
-.site-help {
-  #content {
-    max-width: 740px;
-  }
-}
 
 .user-new,
 .user-create,
@@ -1133,7 +973,7 @@ ul.results-list li { border-bottom: 1px solid #ccc; }
 .user-new,
 .user-create,
 .user-terms {
-  #content {
+  .content-body {
     padding: 0;
   }
 }
@@ -1170,14 +1010,13 @@ ul.results-list li { border-bottom: 1px solid #ccc; }
 
 @media only screen and (max-width:900px) {
   .header-illustration.new-user-arm { display: none;}
-}
-
 .wrapper {
-  margin-left: 184px;
-  border-left: 1px solid #ccc;
+  margin-left: $sidebarWidth;
   text-align: left;
 }
 
+}
+
 #content.maximised {
   top: 0;
   left: 0;
@@ -1223,24 +1062,6 @@ ul.results-list li { border-bottom: 1px solid #ccc; }
   }
 }
 
-.content-heading {
-  position: relative;
-  padding: $lineheight;
-  background: $offwhite;
-  z-index: 2;
-  h1, h2 {
-    margin-bottom: $lineheight/2;
-    line-height: 100%;
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-  p {
-    margin-top: $lineheight/2;
-    margin-bottom: 0px;
-  }
-}
-
 /* Rules for small maps in content areas */
 
 .content_map {
@@ -2316,29 +2137,6 @@ a.button {
  * Rules for the iD editor
  */
 
-.site-edit-id {
-  #left,
-  #large-title {
-    display: none;
-  }
-
-  #small-title {
-    display: inline-block;
-    width: 185px;
-    height: 30px;
-    font-size: 14px;
-    margin: 0;
-    background-color: #eee;
-    border-bottom: 1px solid #ccc;
-    text-align: center;
-    padding-top: 7px;
-  }
-
-  #content {
-    left: 0;
-  }
-}
-
 .id-embed {
   width: 100%;
   height: 100%;
@@ -2348,15 +2146,22 @@ a.button {
 .ad-container {
   display: block;
   height: 120px;
+  margin: auto;
   overflow: hidden;
   position: relative;
   border-bottom: 1px solid #ccc;
-}
 
-.ad {
-  height: 100px;
-  border: 0;
-  background: #fff;
+  a {
+    display: block;
+    width: 165px;
+    margin: auto;
+  }
+
+  .ad {
+    height: 100px;
+    border: 0;
+    background: #fff;
+  }
 }
 
 /* Rules for dropdown menus */
index 84efa0e..fa04314 100644 (file)
@@ -1,7 +1,4 @@
-#small-title,
-#left,
-#greeting,
-#tabnav,
+header,
 #sidebar,
 #permalink,
 .leaflet-control {
index 419abea..a1ba221 100644 (file)
@@ -40,48 +40,10 @@ h2, h3, h4 {
 
 /* Rules for the whole left sidebar, including the logo */
 
-#left {
+#sidebar {
   display: none;
 }
 
-/* Rules for tabbed navigation bar */
-
-#top-bar {
-  left: 0;
-  margin: 0px;
-  height: 24px;
-  position: static;
-}
-
-#tabnav {
-  height: 19px;
-  margin: 0px;
-  padding-top: 5px;
-  margin-top: 26px;
-  font-size: 10px;
-  line-height: 10px;
-}
-
-#tabnav a, #tabnav a:link, #tabnav a:visited {
-  font-size: 10px;
-  line-height: 10px;
-  padding: 5px;
-  margin-right: 1px;
-}
-
-.menuicon { line-height: 10px;}
-
-/* Rules for the site name - shown when left sidebar is hidden */
-
-#small-title {
-  font-size: 10px;
-  display: block;
-  position: absolute;
-  left: 5px;
-  top: 5px;
-  margin: 0;
-}
-
 /* Rules for greeting bar in the top right corner */
 
 #browse_map ul.secondary-actions {
diff --git a/app/views/export/start.html.erb b/app/views/export/start.html.erb
deleted file mode 100644 (file)
index 0bc1ac5..0000000
+++ /dev/null
@@ -1,48 +0,0 @@
-<%= form_tag :controller => "export", :action => "finish" do %>
-  <%= hidden_field_tag 'format', 'osm' %>
-
-  <div class="export_bounds inner12">
-    <div class='export_area_inputs'>
-      <%= text_field_tag('maxlat', nil, :size => 10, :class => "export_bound") %>
-      <br/>
-      <%= text_field_tag('minlon', nil, :size => 10, :class => "export_bound") %>
-      <%= text_field_tag('maxlon', nil, :size => 10, :class => "export_bound") %>
-      <br/>
-      <%= text_field_tag('minlat', nil, :size => 10, :class => "export_bound") %>
-    </div>
-    <a id="drag_box" class='export_hint button' href="#"><%= t'export.start.manually_select' %></a>
-  </div>
-
-  <div id="export_osm">
-    <h4><%= t'export.start.licence' %></h4>
-
-    <div class="export_details inner12">
-      <p><%= raw t'export.start.export_details' %></p>
-    </div>
-
-    <div  id="export_osm_too_large">
-      <h4><%= t'export.start.too_large.heading' %></h4>
-
-      <div class="export_details inner12">
-        <p><%= t'export.start.too_large.body' %></p>
-        <dl>
-          <dt><a href="http://planet.openstreetmap.org/"><%= t'export.start.too_large.planet.title' %></a></dt>
-          <dd><%= t'export.start.too_large.planet.description' %></dd>
-
-          <dt><a href="http://download.geofabrik.de/"><%= t'export.start.too_large.geofabrik.title' %></a></dt>
-          <dd><%= t'export.start.too_large.geofabrik.description' %></dd>
-
-          <dt><a href="http://metro.teczno.com/"><%= t'export.start.too_large.metro.title' %></a></dt>
-          <dd><%= t'export.start.too_large.metro.description' %></dd>
-
-          <dt><a href="http://wiki.openstreetmap.org/wiki/Download"><%= t'export.start.too_large.other.title' %></a></dt>
-          <dd><%= t'export.start.too_large.other.description' %></dd>
-        </dl>
-      </div>
-    </div>
-  </div>
-
-  <div class="inner12">
-    <%= submit_tag t('export.start.export_button'), :id => "export_commit" %>
-  </div>
-<% end %>
diff --git a/app/views/layouts/_content.html.erb b/app/views/layouts/_content.html.erb
new file mode 100644 (file)
index 0000000..e6e737c
--- /dev/null
@@ -0,0 +1,15 @@
+<div id="content">
+  <% if content_for? :content %>
+    <%= yield :content %>
+  <% else %>
+    <%= render :partial => "layouts/flash", :locals => { :flash => flash } %>
+    <% if content_for? :heading %>
+      <div class="content-heading">
+        <%= yield :heading %>
+      </div>
+    <% end %>
+    <div class="content-body">
+      <%= yield %>
+    </div>
+  <% end %>
+</div>
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
new file mode 100644 (file)
index 0000000..f6d5bb9
--- /dev/null
@@ -0,0 +1,36 @@
+<header>
+  <h1>
+    <%= image_tag "osm_logo.png", :alt => t('layouts.logo.alt_text'), :class => 'logo' %>
+    <%= t 'layouts.project_name.h1' %>
+  </h1>
+  <nav class='primary'>
+    <ul>
+      <li id="view_tab">
+        <%= link_to t('layouts.view'), root_path, :class => 'tab geolink llz layers' %>
+      </li><li id="history_tab">
+        <%= link_to t('layouts.history'), browse_changesets_path, :class => 'tab geolink bbox' %>
+      </li><li id="export_tab">
+        <%= link_to t('layouts.export'), export_path, :class => 'tab geolink llz' %>
+      </li><li id="edit_tab">
+        <%= render :partial => 'layouts/edit_menu',
+                   :locals => { :link_text => t('layouts.edit'), :link_class => 'llz object' }%>
+      </li>
+    </ul>
+  </nav>
+  <nav class='secondary'>
+    <ul>
+      <li><%= link_to t('layouts.gps_traces'), traces_path %></li>
+      <li><%= link_to t('layouts.user_diaries'), diary_path %></li>
+      <li><%= link_to t('layouts.help'), help_path %></li>
+      <li><%= link_to t('layouts.about'), '#' %></li>
+    </ul>
+    <% if @user %>
+      <%= render :partial => "layouts/user_menu" %>
+    <% else %>
+      <ul class="secondary-actions">
+        <li><%= link_to t('layouts.log_in'), login_path(:referer => request.fullpath), {:id => 'loginanchor', :title => t('layouts.log_in_tooltip')} %></li>
+        <li><%= link_to t('layouts.sign_up'), user_new_path, {:id => 'registeranchor', :title => t('layouts.sign_up_tooltip')} %></li>
+      </ul>
+    <% end %>
+  </nav>
+</header>
diff --git a/app/views/layouts/map.html.erb b/app/views/layouts/map.html.erb
new file mode 100644 (file)
index 0000000..cedfdb9
--- /dev/null
@@ -0,0 +1,47 @@
+<% content_for :content do %>
+  <div id="sidebar">
+    <%= form_tag url_for(:controller => :geocoder, :action => :search), :id => "search_form" do %>
+      <%= submit_tag t('site.search.submit_text') %>
+      <div id='query_wrapper'>
+        <%= text_field_tag :query, params[:query],
+                           :placeholder => t('site.search.search'),
+                           :autofocus => "autofocus" %>
+      </div>
+    <% end %>
+
+    <div id="sidebar_content">
+      <% if STATUS == :database_offline or STATUS == :api_offline %>
+        <p class="alert"><%= t 'layouts.osm_offline' %></p>
+      <% elsif STATUS == :database_readonly or STATUS == :api_readonly %>
+        <p class="alert"><%= t 'layouts.osm_read_only' %></p>
+      <% end %>
+
+      <%= content_for :sidebar %>
+    </div>
+  </div>
+
+  <noscript>
+    <div id="noscript">
+      <p><%= t 'site.index.js_1' %></p>
+      <p><%= t 'site.index.js_2' %></p>
+    </div>
+  </noscript>
+
+  <div id="map-ui">
+  </div>
+
+  <div id="map" tabindex="2">
+  </div>
+
+  <div id="attribution">
+    <table width="100%">
+      <tr>
+        <td class="attribution_license"><%= t 'site.index.license.license_url' %></td>
+        <td class="attribution_project"><%= t 'site.index.license.project_url' %></td>
+      </tr>
+      <tr>
+        <td colspan="2" class="attribution_notice"><%= t 'site.index.license.copyright' %></td>
+      </tr>
+    </table>
+  </div>
+<% end %>
index 8239c8c..69ac7aa 100644 (file)
@@ -1,120 +1,9 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<%= I18n.locale %>" lang="<%= I18n.locale %>" dir="<%= dir %>">
+<html lang="<%= I18n.locale %>" dir="<%= dir %>">
   <%= render :partial => "layouts/head" %>
   <body class="<%= body_class %>">
-    <h1 id="small-title">
-      <%= image_tag "osm_logo.png", :size => "16x16", :alt => t('layouts.logo.alt_text') %>
-      <%= t 'layouts.project_name.h1' %>
-    </h1>
-    <div id="left">
-      <div id="logo">
-        <%= link_to(image_tag("osm_logo.png",
-          :size => "120x120",
-          :alt => t('layouts.logo.alt_text')),
-          root_path) %>
-        <h1><%= t 'layouts.project_name.h1' %></h1>
-        <h2><%= t('layouts.tag_line') %></h2>
-      </div>
-      <%= yield :optionals %>
-      <% unless @user %>
-      <div class="sidebar-copy intro">
-        <p><%= t 'layouts.intro_1' %></p>
-        <p>
-        <%= t 'layouts.intro_2_html',
-          :download => link_to(t('layouts.intro_2_download'), "http://planet.openstreetmap.org/"),
-          :use => link_to(t('layouts.intro_2_use'), t('layouts.intro_2_use_url')),
-          :license => link_to(t('layouts.intro_2_license'), copyright_path),
-          :create_account => link_to(t('layouts.intro_2_create_account'), user_new_path)
-        %>
-        </p>
-      </div>
-      <% end %>
-      <% if STATUS == :database_offline or STATUS == :api_offline %>
-      <div class="sidebar-alert">
-        <p><%= t 'layouts.osm_offline' %></p>
-      </div>
-      <% elsif STATUS == :database_readonly or STATUS == :api_readonly %>
-      <div class="sidebar-alert">
-        <p><%= t 'layouts.osm_read_only' %></p>
-      </div>
-      <% end %>
-      <ul id="left_menu" class="left_menu">
-        <li>
-          <h4><%= t'layouts.community' %></h4>
-          <ul>
-            <li><a href="http://blogs.openstreetmap.org/" title="<%= t 'layouts.community_blogs_title' %>"><%= t 'layouts.community_blogs' %></a></li>
-            <li><a href="http://www.osmfoundation.org" title="<%= t 'layouts.foundation_title' %>"><%= t 'layouts.foundation' %></a></li>
-            <li><%= link_to(t('layouts.user_diaries'), diary_path, {
-              :title => t('layouts.user_diaries_tooltip')
-            }) %></li>
-          </ul>
-        </li>
-        <li>
-          <h4><%= t'layouts.data' %></h4>
-          <ul>
-            <li><%= link_to t('layouts.copyright'), copyright_path %></li>
-          </ul>
-          <ul>
-            <li><%= link_to t('layouts.export_data'), export_path %></li>
-          </ul>
-          <ul>
-            <li><%= link_to t('layouts.gps_traces'), traces_path %></li>
-          </ul>
-        </li>
-        <%= yield :left_menu %>
-      </ul>
-      <a title="<%= h(t('layouts.make_a_donation.title')) %>" href="http://donate.openstreetmap.org/" class="donate">
-        <span class='icon donate'></span>
-        <span><%= h(t('layouts.make_a_donation.text')) %></span>
-      </a>
-      <div class='sidebar-copy'>
-        <p class='deemphasize'><%= t 'layouts.partners_html',
-          :ucl => link_to(t('layouts.partners_ucl'), "http://www.vr.ucl.ac.uk"),
-          :ic => link_to(t('layouts.partners_ic'), "http://www.imperial.ac.uk/"),
-          :bytemark => link_to(t('layouts.partners_bytemark'), "http://www.bytemark.co.uk"),
-          :partners => link_to(t('layouts.partners_partners'), t('layouts.partners_url')) %>
-        </p>
-      </div>
-    </div>
-    <div id='top-bar'>
-      <nav class='primary'>
-        <ul>
-          <li id="view_tab">
-            <%= link_to t('layouts.view'), root_path, :class => 'tab geolink llz layers' %>
-          </li><li id="edit_tab">
-            <%= render :partial => 'layouts/edit_menu',
-                       :locals => { :link_text => t('layouts.edit'), :link_class => 'llz object' }%>
-          </li><li id="history_tab">
-            <%= link_to t('layouts.history'), browse_changesets_path, :class => 'tab geolink bbox' %>
-          </li>
-        </ul>
-      </nav>
-      <nav class='secondary'>
-        <% if @user and @user.id %>
-          <ul>
-            <li><%= link_to t('layouts.help'), help_path %></li>
-          </ul>
-          <%= render :partial => "layouts/user_menu" %>
-        <% else %>
-          <ul class="secondary-actions">
-            <li><%= link_to t('layouts.help'), help_path %></li>
-            <li><%= link_to t('layouts.log_in'), login_path(:referer => request.fullpath), {:id => 'loginanchor', :title => t('layouts.log_in_tooltip')} %></li>
-            <li><%= link_to t('layouts.sign_up'), user_new_path, {:id => 'registeranchor', :title => t('layouts.sign_up_tooltip')} %></li>
-          </ul>
-        <% end %>
-      </nav>
-    </div>
-    <div class="wrapper">
-      <%= render :partial => "layouts/flash", :locals => { :flash => flash } %>
-      <% if content_for? :heading %>
-      <div class="content-heading">
-        <%= yield :heading %>
-      </div>
-      <% end %>
-      <div id="content" class="clearfix">
-        <%= yield %>
-      </div>
-    </div>
+    <%= render :partial => "layouts/header" %>
+    <%= render :partial => "layouts/content" %>
     <% if defined?(PIWIK) -%>
     <noscript><p><img src="<%= request.protocol %><%= PIWIK['location'] %>/piwik.php?idsite=<%= PIWIK['site'] %>" style="border:0" alt="" /></p></noscript>
     <% end -%>
diff --git a/app/views/site/_search.html.erb b/app/views/site/_search.html.erb
deleted file mode 100644 (file)
index e2f0008..0000000
+++ /dev/null
@@ -1,16 +0,0 @@
-<% content_for :optionals do %>
-  <div class="optionalbox">
-    <div class="search_container">
-    <div id="search_field">
-    <%= form_tag url_for(:controller => :geocoder, :action => :search), :id => "search_form" do %>
-      <%= submit_tag t('site.search.submit_text') %>
-      <%= text_field_tag :query, h(params[:query]), :tabindex => "1", :placeholder => t('site.search.search'), :autofocus => "autofocus" %>
-    <% end %>
-    </div>
-    </div>
-    <p class='search_help deemphasize'>
-      <%= raw(t 'site.search.search_help') %>
-      <%= link_to t('site.search.where_am_i'), { :controller => :geocoder, :action => :search }, { :id => "describe_location", :title => t('site.search.where_am_i_title') } %>
-    </p>
-  </div>
-<% end %>
diff --git a/app/views/site/_sidebar.html.erb b/app/views/site/_sidebar.html.erb
deleted file mode 100644 (file)
index cc3cf48..0000000
+++ /dev/null
@@ -1,9 +0,0 @@
-<div id="sidebar">
-  <div class="sidebar_heading">
-    <h4 id="sidebar_title"><% t 'site.sidebar.search_results' %></h4>
-    <a class="sidebar_close" href="#"><%= t 'site.sidebar.close' %></a>
-  </div>
-  <div id="sidebar_content">
-    <%= render :template => 'export/start' if params[:export] %>
-  </div>
-</div>
index 7619754..030775f 100644 (file)
@@ -1,21 +1,17 @@
-<% if STATUS == :database_offline or STATUS == :api_offline %>
-<p><%= t 'layouts.osm_offline' %>
-</p>
-<% elsif STATUS == :database_readonly or STATUS == :api_readonly %>
-<p><%= t 'layouts.osm_read_only' %>
-</p>
-<% elsif !@user.data_public? %>
-<p><%= t 'site.edit.not_public' %></p>
-<p><%= raw t 'site.edit.not_public_description', :user_page => (link_to t('site.edit.user_page_link'), {:controller => 'user', :action => 'account', :display_name => @user.display_name, :anchor => 'public'}) %></p>
-<p><%= raw t 'site.edit.anon_edits', :link => link_to(t('site.edit.anon_edits_link_text'), t('site.edit.anon_edits_link')) %></p>
-<% else %>
-<% content_for :head do %>
-  <%= javascript_include_tag "edit" %>
-<% end %>
-
-<%= render :partial => 'home_link' %>
-<%= render :partial => 'sidebar' %>
-<%= render :partial => 'search' %>
+<% content_for :content do %>
+  <% if STATUS == :database_offline or STATUS == :api_offline %>
+    <p><%= t 'layouts.osm_offline' %></p>
+  <% elsif STATUS == :database_readonly or STATUS == :api_readonly %>
+    <p><%= t 'layouts.osm_read_only' %></p>
+  <% elsif !@user.data_public? %>
+    <p><%= t 'site.edit.not_public' %></p>
+    <p><%= raw t 'site.edit.not_public_description', :user_page => (link_to t('site.edit.user_page_link'), {:controller => 'user', :action => 'account', :display_name => @user.display_name, :anchor => 'public'}) %></p>
+    <p><%= raw t 'site.edit.anon_edits', :link => link_to(t('site.edit.anon_edits_link_text'), t('site.edit.anon_edits_link')) %></p>
+  <% else %>
+    <% content_for :head do %>
+      <%= javascript_include_tag "edit" %>
+    <% end %>
 
-<%= render :partial => preferred_editor %>
+    <%= render :partial => preferred_editor %>
+  <% end %>
 <% end %>
diff --git a/app/views/site/export.html.erb b/app/views/site/export.html.erb
new file mode 100644 (file)
index 0000000..0b0e991
--- /dev/null
@@ -0,0 +1,56 @@
+<% content_for :head do %>
+  <%= javascript_include_tag "index" %>
+<% end %>
+
+<% content_for :sidebar do %>
+  <%= form_tag :controller => "export", :action => "finish" do %>
+    <%= hidden_field_tag 'format', 'osm' %>
+
+    <div class="export_bounds inner12">
+      <div class='export_area_inputs'>
+        <%= text_field_tag('maxlat', nil, :size => 10, :class => "export_bound") %>
+        <br/>
+        <%= text_field_tag('minlon', nil, :size => 10, :class => "export_bound") %>
+        <%= text_field_tag('maxlon', nil, :size => 10, :class => "export_bound") %>
+        <br/>
+        <%= text_field_tag('minlat', nil, :size => 10, :class => "export_bound") %>
+      </div>
+      <a id="drag_box" class='export_hint button' href="#"><%= t'export.start.manually_select' %></a>
+    </div>
+
+    <div id="export_osm">
+      <h4><%= t'export.start.licence' %></h4>
+
+      <div class="export_details inner12">
+        <p><%= raw t'export.start.export_details' %></p>
+      </div>
+
+      <div  id="export_osm_too_large">
+        <h4><%= t'export.start.too_large.heading' %></h4>
+
+        <div class="export_details inner12">
+          <p><%= t'export.start.too_large.body' %></p>
+          <dl>
+            <dt><a href="http://planet.openstreetmap.org/"><%= t'export.start.too_large.planet.title' %></a></dt>
+            <dd><%= t'export.start.too_large.planet.description' %></dd>
+
+            <dt><a href="http://download.geofabrik.de/"><%= t'export.start.too_large.geofabrik.title' %></a></dt>
+            <dd><%= t'export.start.too_large.geofabrik.description' %></dd>
+
+            <dt><a href="http://metro.teczno.com/"><%= t'export.start.too_large.metro.title' %></a></dt>
+            <dd><%= t'export.start.too_large.metro.description' %></dd>
+
+            <dt><a href="http://wiki.openstreetmap.org/wiki/Download"><%= t'export.start.too_large.other.title' %></a></dt>
+            <dd><%= t'export.start.too_large.other.description' %></dd>
+          </dl>
+        </div>
+      </div>
+    </div>
+
+    <div class="inner12">
+      <%= submit_tag t('export.start.export_button'), :id => "export_commit" %>
+    </div>
+  <% end %>
+<% end %>
+
+<%= render :template => 'layouts/map' %>
index 73e1382..1f975e3 100644 (file)
@@ -2,32 +2,28 @@
   <%= javascript_include_tag "index" %>
 <% end %>
 
-<%= render :partial => 'home_link' %>
-<%= render :partial => 'sidebar' %>
-<%= render :partial => 'search' %>
+<% content_for :sidebar do %>
+  <h2>
+    <%= t 'layouts.intro_header' %>
+    <span class="icon close"></span>
+  </h2>
 
-<noscript>
-  <div id="noscript">
-    <p><%= t 'site.index.js_1' %></p>
-    <p><%= t 'site.index.js_2' %></p>
-  </div>
-</noscript>
+  <p><%= t 'layouts.intro_text' %></p>
 
-<div id="map-ui">
-</div>
+  <div class='footer'>
+    <a title="<%= t('layouts.make_a_donation.title') %>" href="http://donate.openstreetmap.org/" class="donate">
+      <span class='icon donate'></span>
+      <span><%= t('layouts.make_a_donation.text') %></span>
+    </a>
 
-<div id="map" tabindex="2">
-</div>
+    <p class='credits'>
+      <%= t 'layouts.partners_html',
+            :ucl => link_to(t('layouts.partners_ucl'), "http://www.vr.ucl.ac.uk"),
+            :ic => link_to(t('layouts.partners_ic'), "http://www.imperial.ac.uk/"),
+            :bytemark => link_to(t('layouts.partners_bytemark'), "http://www.bytemark.co.uk"),
+            :partners => link_to(t('layouts.partners_partners'), t('layouts.partners_url')) %>
+    </p>
+  </div>
+<% end %>
 
-<div id="attribution">
-  <table width="100%">
-    <tr>
-      <td class="attribution_license"><%= t'site.index.license.license_url' %></td>
-      <td class="attribution_project"><%= t'site.index.license.project_url' %></td>
-    </tr>
-    <tr>
-      <td colspan="2" class="attribution_notice"><%= t'site.index.license.copyright' %></td>
-    </tr>
-  </table>
-</div>
+<%= render :template => 'layouts/map' %>
index 99767f6..3afa703 100644 (file)
@@ -1015,13 +1015,9 @@ en:
     user_diaries_tooltip: View user diaries
     edit_with: Edit with %{editor}
     tag_line: The Free Wiki World Map
-    intro_1: "OpenStreetMap is a free worldwide map, created by people like you."
-    intro_2_html: "The data is free to %{download} and %{use} under its %{license}. %{create_account} to improve the map."
+    intro_header: Welcome to OpenStreetMap!
+    intro_text: OpenStreetMap is a free and editable map of the world maintained by an active community of contributors.
     intro_2_create_account: "Create a user account"
-    intro_2_license: "open license"
-    intro_2_use: "use"
-    intro_2_download: "download"
-    intro_2_use_url: "http://wiki.openstreetmap.org/wiki/Using_OpenStreetMap"
     partners_html: "Hosting is supported by %{ucl}, %{ic} and %{bytemark}, and other %{partners}."
     partners_ucl: "the UCL VR Centre"
     partners_ic: "Imperial College London"
@@ -1032,6 +1028,7 @@ en:
     osm_read_only: "The OpenStreetMap database is currently in read-only mode while essential database maintenance work is carried out."
     donate: "Support OpenStreetMap by %{link} to the Hardware Upgrade Fund."
     help: Help
+    about: About
     copyright: "Copyright & License"
     community: Community
     community_blogs: "Community Blogs"
@@ -1390,10 +1387,7 @@ en:
       close: Close
     search:
       search: Search
-      where_am_i: "Where am I?"
-      where_am_i_title: Describe the current location using the search engine
       submit_text: "Go"
-      search_help: "examples: 'Alkmaar', 'Regent Street, Cambridge', 'CB2 5AQ', or 'post offices near L√ľnen' <a href='http://wiki.openstreetmap.org/wiki/Search'>more examples...</a>"
     key:
       table:
         entry:
index 31658e4..4351b65 100644 (file)
@@ -129,7 +129,7 @@ OpenStreetMap::Application.routes.draw do
   match '/help' => 'site#help', :via => :get, :as => :help
   match '/history' => 'changeset#list', :via => :get
   match '/history/feed' => 'changeset#feed', :via => :get, :defaults => { :format => :atom }
-  match '/export' => 'site#index', :export => true, :via => :get
+  match '/export' => 'site#export', :via => :get
   match '/login' => 'user#login', :via => [:get, :post]
   match '/logout' => 'user#logout', :via => [:get, :post]
   match '/offline' => 'site#offline', :via => :get