From: John Firebaugh Date: Tue, 1 Oct 2013 20:52:58 +0000 (-0700) Subject: Add about page X-Git-Tag: live~4621^2~249 X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/3ebad9ec2f59f2ba5716952f6169cdbb4972f931 Add about page --- diff --git a/app/assets/images/about/0.jpg b/app/assets/images/about/0.jpg new file mode 100644 index 000000000..3e7bcbb9a Binary files /dev/null and b/app/assets/images/about/0.jpg differ diff --git a/app/assets/images/about/1.jpg b/app/assets/images/about/1.jpg new file mode 100644 index 000000000..6efa048b6 Binary files /dev/null and b/app/assets/images/about/1.jpg differ diff --git a/app/assets/images/about/2.jpg b/app/assets/images/about/2.jpg new file mode 100644 index 000000000..1fcb351ba Binary files /dev/null and b/app/assets/images/about/2.jpg differ diff --git a/app/assets/images/about/3.jpg b/app/assets/images/about/3.jpg new file mode 100644 index 000000000..3cffd5193 Binary files /dev/null and b/app/assets/images/about/3.jpg differ diff --git a/app/assets/images/about/4.jpg b/app/assets/images/about/4.jpg new file mode 100644 index 000000000..9e9b3040d Binary files /dev/null and b/app/assets/images/about/4.jpg differ diff --git a/app/assets/images/about/5.jpg b/app/assets/images/about/5.jpg new file mode 100644 index 000000000..85c19bda2 Binary files /dev/null and b/app/assets/images/about/5.jpg differ diff --git a/app/assets/images/about/osm.png b/app/assets/images/about/osm.png new file mode 100644 index 000000000..d5479eea3 Binary files /dev/null and b/app/assets/images/about/osm.png differ diff --git a/app/assets/images/about/sprite.png b/app/assets/images/about/sprite.png new file mode 100644 index 000000000..bc76ee097 Binary files /dev/null and b/app/assets/images/about/sprite.png differ diff --git a/app/assets/images/about/sprite@2x.png b/app/assets/images/about/sprite@2x.png new file mode 100644 index 000000000..65d09d73d Binary files /dev/null and b/app/assets/images/about/sprite@2x.png differ diff --git a/app/assets/javascripts/about.js b/app/assets/javascripts/about.js new file mode 100644 index 000000000..cfd5f28d9 --- /dev/null +++ b/app/assets/javascripts/about.js @@ -0,0 +1,20 @@ +(function () { + var num = Math.floor(Math.random() * 6); + + // Background image + if (window.location.hash) { + var h = window.location.hash.match(/#(.*)/); + if (!isNaN(parseInt(h[1], 10))) num = h[1]; + } + + $(document).ready(function () { + $('#content').attr('class', 'photo-' + num); + }); + + $(document).on('click', '#next-photo', function () { + num = (num + 1) % 6; + $('#content').attr('class', 'photo-' + num); + window.location.hash = num; + return false; + }); +})(); diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss index 1d5049921..7395afc99 100644 --- a/app/assets/stylesheets/common.css.scss +++ b/app/assets/stylesheets/common.css.scss @@ -2347,3 +2347,142 @@ a.button { border-radius: 4px; } } + +.site-about #content { + background-color: #000; + background-position: 50% 50%; + background-repeat: no-repeat; + background-size: cover; + background-attachment: fixed; + + &.photo-0 { background-image: image-url('about/0.jpg'); .photo-0 { display: block; } } + &.photo-1 { background-image: image-url('about/1.jpg'); .photo-1 { display: block; } } + &.photo-2 { background-image: image-url('about/2.jpg'); .photo-2 { display: block; } } + &.photo-3 { background-image: image-url('about/4.jpg'); .photo-3 { display: block; } } + &.photo-4 { background-image: image-url('about/4.jpg'); .photo-4 { display: block; } } + &.photo-5 { background-image: image-url('about/5.jpg'); .photo-5 { display: block; } } + + .caption { + max-width: 200px; + font: italic 14px/20px 'Times New Roman', serif; + position: fixed; + text-align: right; + right: 20px; + bottom: 60px; + text-shadow: #000 0px 1px 5px; + color: #fff; + display: none; + } + + .caption a { + color: white; + white-space: nowrap; + text-decoration: none; + } + + a.next { + display: block; + position: fixed; + right: 10px; + bottom: 10px; + width: 40px; + height: 40px; + border-radius: 5px; + text-indent: -9999px; + overflow: hidden; + background: image-url('about/sprite.png') -120px 0px no-repeat; + background-color: #000; + background-color: rgba(0, 0, 0, 0.5); + } + + #content-body { + display: block; + position: relative; + margin: auto; + color: #333; + width: 50%; + min-width: 320px; + max-width: 640px; + + .section { + margin-bottom: 30px; + } + + .section:last-child { + margin-bottom: 0; + } + } + + .text { + background: white; + padding: 40px; + } + + .attr { + position: relative; + padding: 170px 20px 20px 20px; + background: #333; + background: rgba(0, 0, 0, .8); + margin-bottom: 0; + + strong { + display: block; + color: white; + font-size: 25px; + span { + color: #76c551; + } + } + + .user-image { + position: absolute; + top: 0px; + right: 240px; + left: 0px; + height: 150px; + background-position: 0 50%; + background-repeat: no-repeat; + background-image: image-url('about/osm.png'); + background-size: cover; + background-color: #76c551; + } + + .byosm { + position: absolute; + top: 0px; + right: 0px; + z-index: 1; + width: 240px; + height: 150px; + padding: 20px 20px 20px 40px; + font: bold 24px/25px Helvetica, Arial, sans-serif; + white-space: nowrap; + color: #fff; + background: #76c551 + } + + .byosm span { + display: inline-block; + width: 25px; + margin-left: -25px; + } + } + + h2 { + margin-bottom: 10px; + } + + .icon { + width: 30px; + height: 30px; + margin-right: 10px; + vertical-align: middle; + background: 40px 40px image-url('about/sprite.png') no-repeat; + + &.local { background-position: 0px 0px; } + &.community { background-position: 0px -40px; } + &.open { background-position: 0px -80px; } + &.contributors { background-position: 0px -120px; } + &.infringement { background-position: 0px -160px; } + } +} diff --git a/app/controllers/site_controller.rb b/app/controllers/site_controller.rb index 32a0f8cb5..0f06b2283 100644 --- a/app/controllers/site_controller.rb +++ b/app/controllers/site_controller.rb @@ -74,6 +74,9 @@ class SiteController < ApplicationController def help end + def about + end + def preview render :text => RichText.new(params[:format], params[:text]).to_html end diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb index 703519515..58185bb5a 100644 --- a/app/views/layouts/_header.html.erb +++ b/app/views/layouts/_header.html.erb @@ -22,7 +22,7 @@
  • <%= link_to t('layouts.gps_traces'), traces_path %>
  • <%= link_to t('layouts.user_diaries'), diary_path %>
  • <%= link_to t('layouts.help'), help_path %>
    • -
  • <%= link_to t('layouts.about'), '#' %>
    • +
  • <%= link_to t('layouts.about'), about_path %>
    • <% if @user %> <%= render :partial => "layouts/user_menu" %> diff --git a/app/views/site/about.html.erb b/app/views/site/about.html.erb new file mode 100644 index 000000000..59d0db062 --- /dev/null +++ b/app/views/site/about.html.erb @@ -0,0 +1,43 @@ +<% content_for :head do %> + <%= javascript_include_tag "about" %> +<% end %> + +
    +
    +
    + <%= t "about_page.copyright_html" %> +
    + +
    + + + <%= raw t "about_page.used_by", :name => "OpenStreetMap" %> + +
    + +
    +
    +

    <%= t "about_page.lede_text" %>

    +

    <%= t "about_page.local_knowledge_title" %>

    +

    <%= t "about_page.local_knowledge_html" %>

    +
    + +
    +

    <%= t "about_page.community_driven_title" %>

    +

    <%= t "about_page.community_driven_html", :diary_path => diary_path %>

    +
    + +
    +

    <%= t "about_page.open_data_title" %>

    +

    <%= t "about_page.open_data_html", :copyright_path => copyright_path %>

    +
    +
    +
    + +<% 5.times do |i| %> +
    + <%= t "about_page.photo_caption_#{i}_html" %> +
    +<% end %> + + diff --git a/config/locales/en.yml b/config/locales/en.yml index 06e6442ff..af3951edc 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -1190,6 +1190,53 @@ en: url: http://wiki.openstreetmap.org/ title: wiki.openstreetmap.org description: Browse the wiki for in-depth OSM documentation. + about_page: + next: Next + copyright_html: ©OpenStreetMap
    contributors + used_by: "%{name} powers map data on hundreds of web sites, mobile apps, and hardware devices" + lede_text: | + OSM is built by a community of local mappers that keeps data about + roads, cafés, subway stations, and much more up to date every day. + local_knowledge_title: Local Knowledge + local_knowledge_html: | + OpenStreetMap emphasizes local knowledge. Contributors use + aerial imagery, GPS devices, and low-tech field maps to verify that OSM + is up to date and accurate. + community_driven_title: Community Driven + community_driven_html: | + From the engineers that tune OSM's servers to the Humanitarian OSM Team + that maps disaster-affected areas, OSM's community is diverse, + passionate, and growing every day. To learn more about the community, + see the user diaries, + community blogs, and + the OSM Foundation website. + open_data_title: Open Data + open_data_html: | + OpenStreetMap is open data: you are free to use it for any purpose + as long as you credit OpenStreetMap and its contributors. If you alter or + build upon the data in certain ways, you may distribute the result only + under the same licence. See the Copyright and + License page for details. + photo_caption_0_html: | + @mikel working on + Map Kibera, a project to map the + largest slum in Nairobi, Kenya. + © watato + 2010 + photo_caption_1_html: | + @lxbarth and + @limareis survey Brasilia with + walking papers. + © mapbox + 2012 + photo_caption_2_html: | + @TODO caption (source) + photo_caption_3_html: | + @TODO caption (source) + photo_caption_4_html: | + @TODO caption (source) + photo_caption_5_html: | + @TODO caption (source) notifier: diary_comment_notification: subject: "[OpenStreetMap] %{user} commented on your diary entry" diff --git a/config/routes.rb b/config/routes.rb index a1321d7f2..1e0f508a1 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -127,6 +127,7 @@ OpenStreetMap::Application.routes.draw do match '/copyright' => 'site#copyright', :via => :get match '/welcome' => 'site#welcome', :via => :get, :as => :welcome match '/help' => 'site#help', :via => :get, :as => :help + match '/about' => 'site#about', :via => :get, :as => :about match '/history' => 'changeset#list', :via => :get match '/history/feed' => 'changeset#feed', :via => :get, :defaults => { :format => :atom } match '/export' => 'site#export', :via => :get