From a4eeeeaa4b7b199e5b4e41c61c33e5a56fccc823 Mon Sep 17 00:00:00 2001 From: Luc Donnet Date: Mon, 9 Jan 2012 17:57:51 +0100 Subject: Add locales and views for lines --- Gemfile | 4 +- Gemfile.lock | 8 +- app/assets/stylesheets/formtastic.css | 145 ++++++++++ app/assets/stylesheets/formtastic_changes.css | 14 + app/assets/stylesheets/legacy.css.scss | 394 +++++++++++++------------- app/assets/stylesheets/lines.css.scss | 113 ++++++++ app/controllers/lines_controller.rb | 20 ++ app/helpers/lines_helper.rb | 6 + app/views/layouts/application.html.erb | 2 +- app/views/lines/_form.erb | 19 +- app/views/lines/index.html.erb | 10 +- app/views/lines/show.html.erb | 30 +- config/application.rb | 2 +- config/initializers/array_ext.rb | 3 + config/initializers/ninoxe.rb | 1 + config/locales/fr.yml | 189 ++++++++++++ config/locales/layouts.yml | 20 ++ config/locales/lines.yml | 40 +++ config/locales/transport_modes.yml | 24 ++ lib/array_ext.rb | 54 ++++ 20 files changed, 884 insertions(+), 214 deletions(-) create mode 100644 app/assets/stylesheets/formtastic.css create mode 100644 app/assets/stylesheets/formtastic_changes.css create mode 100644 config/initializers/array_ext.rb create mode 100644 config/locales/fr.yml create mode 100644 config/locales/layouts.yml create mode 100644 config/locales/lines.yml create mode 100644 config/locales/transport_modes.yml create mode 100644 lib/array_ext.rb diff --git a/Gemfile b/Gemfile index 2c554477e..fc84f3882 100644 --- a/Gemfile +++ b/Gemfile @@ -5,7 +5,8 @@ gem 'rails', '3.1.3' # Bundle edge Rails instead: # gem 'rails', :git => 'git://github.com/rails/rails.git' -gem 'user_interface', :git => 'git://sim.dryade.priv/user_interface' +gem 'user_interface', :path => '~/projects/user_interface' +#gem 'user_interface', :git => 'git://sim.dryade.priv/user_interface' platforms :jruby do gem 'activerecord-jdbcsqlite3-adapter' @@ -42,6 +43,7 @@ gem 'jquery-rails' # To use debugger # gem 'ruby-debug' +gem 'formtastic' gem 'inherited_resources' gem 'activerecord-jdbcpostgresql-adapter' diff --git a/Gemfile.lock b/Gemfile.lock index 57ba992a6..70f7761d6 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -8,9 +8,8 @@ GIT composite_primary_keys geokit -GIT - remote: git://sim.dryade.priv/user_interface - revision: 41f8e79515999e095ebec78ec1daf1fe4cb28aad +PATH + remote: ~/projects/user_interface specs: user_interface (0.0.1) rails (~> 3.1.0) @@ -69,6 +68,8 @@ GEM erubis (2.7.0) execjs (1.2.13) multi_json (~> 1.0) + formtastic (2.0.2) + rails (~> 3.0) geokit (1.6.0) has_scope (0.5.1) hike (1.2.1) @@ -159,6 +160,7 @@ DEPENDENCIES chouette-ninoxe! coffee-rails (~> 3.1.1) coffee-script-source + formtastic inherited_resources jquery-rails jruby-openssl diff --git a/app/assets/stylesheets/formtastic.css b/app/assets/stylesheets/formtastic.css new file mode 100644 index 000000000..91540c74b --- /dev/null +++ b/app/assets/stylesheets/formtastic.css @@ -0,0 +1,145 @@ +/* ------------------------------------------------------------------------------------------------- + +It's *strongly* suggested that you don't modify this file. Instead, load a new stylesheet after +this one in your layouts (eg formtastic_changes.css) and override the styles to suit your needs. +This will allow you to update formtastic.css with new releases without clobbering your own changes. + +This stylesheet forms part of the Formtastic Rails Plugin +(c) 2008 Justin French + +--------------------------------------------------------------------------------------------------*/ + + +/* NORMALIZE AND RESET - obviously inspired by Yahoo's reset.css, but scoped to just form.formtastic +--------------------------------------------------------------------------------------------------*/ +form.formtastic, form.formtastic ul, form.formtastic ol, form.formtastic li, form.formtastic fieldset, form.formtastic legend, form.formtastic input, form.formtastic textarea, form.formtastic select, form.formtastic p { margin:0; padding:0; } +form.formtastic fieldset { border:0; } +form.formtastic em, form.formtastic strong { font-style:normal; font-weight:normal; } +form.formtastic ol, form.formtastic ul { list-style:none; } +form.formtastic abbr, form.formtastic acronym { border:0; font-variant:normal; } +form.formtastic input, form.formtastic textarea, form.formtastic select { font-family:inherit; font-size:inherit; font-weight:inherit; } +form.formtastic input, form.formtastic textarea, form.formtastic select { font-size:100%; } +form.formtastic legend { white-space:normal; color:#000; } + + +/* SEMANTIC ERRORS +--------------------------------------------------------------------------------------------------*/ +form.formtastic ul.errors { color:#cc0000; margin:0.5em 0 1.5em 25%; list-style:square; } +form.formtastic ul.errors li { padding:0; border:none; display:list-item; } + + +/* FIELDSETS & LISTS +--------------------------------------------------------------------------------------------------*/ +form.formtastic fieldset { overflow:auto; } /* clearing contained floats */ +form.formtastic fieldset.inputs { } +form.formtastic fieldset.buttons { padding-left:25%; } +form.formtastic fieldset ol { } +form.formtastic fieldset.buttons li { float:left; padding-right:0.5em; } + +/* INPUT LIs +--------------------------------------------------------------------------------------------------*/ +form.formtastic fieldset > ol > li { padding:0.5em 0; margin-top:-0.5em; margin-bottom:1em; } /* padding and negative margin juggling is for Firefox */ +form.formtastic fieldset > ol > li { overflow:auto; } /* clearing contained floats */ + +form.formtastic fieldset > ol > li.required { } +form.formtastic fieldset > ol > li.optional { } +form.formtastic fieldset > ol > li.error { } + + +/* LABELS +--------------------------------------------------------------------------------------------------*/ +form.formtastic fieldset > ol > li label { display:block; width:25%; float:left; padding-top:.2em; } +form.formtastic fieldset > ol > li > li label { line-height:100%; padding-top:0; } +form.formtastic fieldset > ol > li > li label input { line-height:100%; vertical-align:middle; margin-top:-0.1em;} + + +/* NESTED FIELDSETS AND LEGENDS (radio, check boxes and date/time inputs use nested fieldsets) +--------------------------------------------------------------------------------------------------*/ +form.formtastic fieldset > ol > li fieldset { position:relative; } +form.formtastic fieldset > ol > li fieldset legend { position:absolute; width:95%; padding-top:0.1em; left: 0px; } +form.formtastic fieldset > ol > li fieldset legend span { position:absolute; } +form.formtastic fieldset > ol > li fieldset legend.label label { position:absolute; } +form.formtastic fieldset > ol > li fieldset ol { float:left; width:74%; margin:0; padding:0 0 0 25%; } +form.formtastic fieldset > ol > li fieldset ol li { padding:0; border:0; } + + +/* INLINE HINTS +--------------------------------------------------------------------------------------------------*/ +form.formtastic fieldset > ol > li p.inline-hints { color:#666; margin:0.5em 0 0 25%; } + + +/* INLINE ERRORS +--------------------------------------------------------------------------------------------------*/ +form.formtastic fieldset > ol > li p.inline-errors { color:#cc0000; margin:0.5em 0 0 25%; } +form.formtastic fieldset > ol > li ul.errors { color:#cc0000; margin:0.5em 0 0 25%; list-style:square; } +form.formtastic fieldset > ol > li ul.errors li { padding:0; border:none; display:list-item; } + + +/* STRING, NUMERIC, PASSWORD, EMAIL, URL, PHONE & SEARCH OVERRIDES +--------------------------------------------------------------------------------------------------*/ +form.formtastic fieldset > ol > li.string input, +form.formtastic fieldset > ol > li.password input, +form.formtastic fieldset > ol > li.numeric input, +form.formtastic fieldset > ol > li.email input, +form.formtastic fieldset > ol > li.url input, +form.formtastic fieldset > ol > li.phone input, +form.formtastic fieldset > ol > li.search input { width:72%; } + +form.formtastic fieldset > ol > li.string input[size], +form.formtastic fieldset > ol > li.password input[size], +form.formtastic fieldset > ol > li.numeric input[size], +form.formtastic fieldset > ol > li.email input[size], +form.formtastic fieldset > ol > li.url input[size], +form.formtastic fieldset > ol > li.phone input[size], +form.formtastic fieldset > ol > li.search input[size] { width:auto; max-width:72%; } + + +/* TEXTAREA OVERRIDES +--------------------------------------------------------------------------------------------------*/ +form.formtastic fieldset > ol > li.text textarea { width:72%; } +form.formtastic fieldset > ol > li.text textarea[cols] { width:auto; max-width:72%; } + + +/* HIDDEN OVERRIDES +--------------------------------------------------------------------------------------------------*/ +form.formtastic fieldset ol li.hidden { display:none; } + +/* BOOLEAN OVERRIDES +--------------------------------------------------------------------------------------------------*/ +form.formtastic fieldset > ol > li.boolean label { padding-left:25%; width:auto; } +form.formtastic fieldset > ol > li.boolean label input { margin:0 0.5em 0 0.2em; } + + +/* RADIO OVERRIDES +--------------------------------------------------------------------------------------------------*/ +form.formtastic fieldset > ol > li.radio { } +form.formtastic fieldset > ol > li.radio fieldset { overflow:visible; } +form.formtastic fieldset > ol > li.radio fieldset ol { margin-bottom:-0.5em; } +form.formtastic fieldset > ol > li.radio fieldset ol li { margin:0.1em 0 0.5em 0; overflow:visible; } +form.formtastic fieldset > ol > li.radio fieldset ol li label { float:none; width:100%; } +form.formtastic fieldset > ol > li.radio fieldset ol li label input { margin-right:0.2em; } + + +/* CHECK BOXES (COLLECTION) OVERRIDES +--------------------------------------------------------------------------------------------------*/ +form.formtastic fieldset > ol > li.check_boxes { } +form.formtastic fieldset > ol > li.check_boxes fieldset { overflow:visible; } +form.formtastic fieldset > ol > li.check_boxes fieldset ol { margin-bottom:-0.5em; } +form.formtastic fieldset > ol > li.check_boxes fieldset ol li { margin:0.1em 0 0.5em 0; overflow:visible; } +form.formtastic fieldset > ol > li.check_boxes fieldset ol li label { float:none; width:100%; } +form.formtastic fieldset > ol > li.check_boxes fieldset ol li label input { margin-right:0.2em; } + + +/* DATE & TIME OVERRIDES +--------------------------------------------------------------------------------------------------*/ +form.formtastic fieldset > ol > li.date fieldset ol li, +form.formtastic fieldset > ol > li.time fieldset ol li, +form.formtastic fieldset > ol > li.datetime fieldset ol li { float:left; width:auto; margin:0 .3em 0 0; } + +form.formtastic fieldset > ol > li.date fieldset ol li label, +form.formtastic fieldset > ol > li.time fieldset ol li label, +form.formtastic fieldset > ol > li.datetime fieldset ol li label { display:none; } + +form.formtastic fieldset > ol > li.date fieldset ol li label input, +form.formtastic fieldset > ol > li.time fieldset ol li label input, +form.formtastic fieldset > ol > li.datetime fieldset ol li label input { display:inline; margin:0; padding:0; } diff --git a/app/assets/stylesheets/formtastic_changes.css b/app/assets/stylesheets/formtastic_changes.css new file mode 100644 index 000000000..8a044fab6 --- /dev/null +++ b/app/assets/stylesheets/formtastic_changes.css @@ -0,0 +1,14 @@ +/* ------------------------------------------------------------------------------------------------- + +Load this stylesheet after formtastic.css in your layouts to override the CSS to suit your needs. +This will allow you to update formtastic.css with new releases without clobbering your own changes. + +For example, to make the inline hint paragraphs a little darker in color than the standard #666: + +form.formtastic fieldset > ol > li p.inline-hints { color:#333; } + +HINT: +The following style may be *conditionally* included for improved support on older versions of IE(<8) +form.formtastic fieldset ol li fieldset legend { margin-left: -6px;} + +--------------------------------------------------------------------------------------------------*/ diff --git a/app/assets/stylesheets/legacy.css.scss b/app/assets/stylesheets/legacy.css.scss index 2db0a3fa4..565195023 100644 --- a/app/assets/stylesheets/legacy.css.scss +++ b/app/assets/stylesheets/legacy.css.scss @@ -1,203 +1,207 @@ -@mixin div_for_object { - margin-bottom: 20px; +/* @mixin div_for_object { */ +/* margin-bottom: 20px; */ - a.preview { - text-decoration: none; - } +/* a.preview { */ +/* text-decoration: none; */ +/* } */ - img { - float: left; - margin-right: 10px; - } - a { - display:block; - text-decoration: underline; - margin-bottom: 3px; - } - .info { - font-size: 12px; - color: #777; - font-weight: normal; - line-height: 18px; +/* img { */ +/* float: left; */ +/* margin-right: 10px; */ +/* } */ +/* a { */ +/* display:block; */ +/* text-decoration: underline; */ +/* margin-bottom: 3px; */ +/* } */ +/* .info { */ +/* font-size: 12px; */ +/* color: #777; */ +/* font-weight: normal; */ +/* line-height: 18px; */ - a { - display:inline; - color: #095495; - } - } -} - -@mixin after_div_for_object { - content: " "; - display: block; - height: 0; - clear: left; - visibility: hidden; -} - -.line, .line_group, .stop_area, .service_link, .network, .service_link_stop_point, .indicator { - @include div_for_object; -} - -.line:after, .line_group:after, .stop_area:after, .service_link:after, .network:after, .service_link_stop_point:after, .journey_pattern:after, .indicator:after { - @include after_div_for_object; -} - -.line_show .summary{ - height: 250px; - min-height: 250px; -} - -.line { - .color { - width: 64px; - height: 64px; - float: left; - margin-right: 10px; - a { - text-decoration: none; - } - } - - .code { - font-size: 16px; - text-align: center; - color: white; - font-weight: bold; - padding-top: 21px; - } - - .number { - font-size: 16px; - text-align: center; - color: white; - font-weight: bold; - padding-top: 21px; - } -} - -.journey_pattern{ - float: left; - padding: 10px; +/* a { */ +/* display:inline; */ +/* color: #095495; */ +/* } */ +/* } */ +/* } */ + +/* @mixin after_div_for_object { */ +/* content: " "; */ +/* display: block; */ +/* height: 0; */ +/* clear: left; */ +/* visibility: hidden; */ +/* } */ + +/* .line, .line_group, .stop_area, .service_link, .network, .service_link_stop_point, .indicator { */ +/* @include div_for_object; */ +/* } */ + +/* .line:after, .line_group:after, .stop_area:after, .service_link:after, .network:after, .service_link_stop_point:after, .journey_pattern:after, .indicator:after { */ +/* @include after_div_for_object; */ +/* } */ + +/* .line_show .summary{ */ +/* height: 250px; */ +/* min-height: 250px; */ +/* } */ + +/* fieldset.buttons{ */ +/* margin: 10px; */ +/* } */ + +/* .line { */ +/* .color { */ +/* width: 64px; */ +/* height: 64px; */ +/* float: left; */ +/* margin-right: 10px; */ +/* a { */ +/* text-decoration: none; */ +/* } */ +/* } */ + +/* .code { */ +/* font-size: 16px; */ +/* text-align: center; */ +/* color: white; */ +/* font-weight: bold; */ +/* padding-top: 21px; */ +/* } */ + +/* .number { */ +/* font-size: 16px; */ +/* text-align: center; */ +/* color: white; */ +/* font-weight: bold; */ +/* padding-top: 21px; */ +/* } */ +/* } */ + +/* .journey_pattern{ */ +/* float: left; */ +/* padding: 10px; */ - .headers{ - background-color: #b78db7; - text-align: center; - padding: 5px; +/* .headers{ */ +/* background-color: #b78db7; */ +/* text-align: center; */ +/* padding: 5px; */ - img{ - vertical-align: text-bottom; - margin-left: 5px; - } - } - - .even{ - background-color: #eed7f1; - padding: 5px; +/* img{ */ +/* vertical-align: text-bottom; */ +/* margin-left: 5px; */ +/* } */ +/* } */ + +/* .even{ */ +/* background-color: #eed7f1; */ +/* padding: 5px; */ - img{ - vertical-align: text-bottom; - margin-right: 5px; - } - } +/* img{ */ +/* vertical-align: text-bottom; */ +/* margin-right: 5px; */ +/* } */ +/* } */ - .odd{ - padding: 5px; - - img{ - vertical-align: text-bottom; - margin-right: 5px; - } - } -} - -.network -{ - .map{ - width: 50px; - height: 50px; - float: left; - margin-right: 10px; - background: url("../images/icons/viewer.png") no-repeat; - } +/* .odd{ */ +/* padding: 5px; */ + +/* img{ */ +/* vertical-align: text-bottom; */ +/* margin-right: 5px; */ +/* } */ +/* } */ +/* } */ + +/* .network */ +/* { */ +/* .map{ */ +/* width: 50px; */ +/* height: 50px; */ +/* float: left; */ +/* margin-right: 10px; */ +/* background: image-url("user_interface/ui/viewer.png") no-repeat; */ +/* } */ - a.viewer { - background: url("../images/icons/viewer.png") no-repeat; - } -} - -.stop_area { - .info { - .warning { - background: url("../images/icons/warning.png") 0 100% no-repeat; - padding-left: 20px; - } - } -} - -#map.stop_area, #map.service_link, #map.line { - float: right; - width: 400px; - height: 250px; -} - -.service_link { - - #service_link_stop_points { - li { - margin-bottom: 1.5em; - } - li.stop_area { - padding-left: 26px; - } - fieldset > ol > li { - margin-bottom: 0; - } - } - - a { - display: inline; - } - - a.remove { - float: left; - img { - margin: 4px 10px 0 0; - } - } - - .buttons{ - margin-top: 20px; - } - - -} - -.indicator{ - -} - -div.auto_complete { - width: 350px; - background: #fff; - - ul { - border:1px solid #888; - margin:0; - padding:0; - width:100%; - list-style-type:none; - } - ul li { - margin:0; - padding:3px; - } - ul li.selected { - background-color: #ffb; - } - ul strong.highlight { - color: #800; - margin:0; - padding:0; - } -} +/* a.viewer { */ +/* background: image-url("user_interface/ui/viewer.png") no-repeat; */ +/* } */ +/* } */ + +/* .stop_area { */ +/* .info { */ +/* .warning { */ +/* background: image-url("user_interface/ui/warning.png") 0 100% no-repeat; */ +/* padding-left: 20px; */ +/* } */ +/* } */ +/* } */ + +/* #map.stop_area, #map.service_link, #map.line { */ +/* float: right; */ +/* width: 400px; */ +/* height: 250px; */ +/* } */ + +/* .service_link { */ + +/* #service_link_stop_points { */ +/* li { */ +/* margin-bottom: 1.5em; */ +/* } */ +/* li.stop_area { */ +/* padding-left: 26px; */ +/* } */ +/* fieldset > ol > li { */ +/* margin-bottom: 0; */ +/* } */ +/* } */ + +/* a { */ +/* display: inline; */ +/* } */ + +/* a.remove { */ +/* float: left; */ +/* img { */ +/* margin: 4px 10px 0 0; */ +/* } */ +/* } */ + +/* .buttons{ */ +/* margin-top: 20px; */ +/* } */ + + +/* } */ + +/* .indicator{ */ + +/* } */ + +/* div.auto_complete { */ +/* width: 350px; */ +/* background: #fff; */ + +/* ul { */ +/* border:1px solid #888; */ +/* margin:0; */ +/* padding:0; */ +/* width:100%; */ +/* list-style-type:none; */ +/* } */ +/* ul li { */ +/* margin:0; */ +/* padding:3px; */ +/* } */ +/* ul li.selected { */ +/* background-color: #ffb; */ +/* } */ +/* ul strong.highlight { */ +/* color: #800; */ +/* margin:0; */ +/* padding:0; */ +/* } */ +/* } */ diff --git a/app/assets/stylesheets/lines.css.scss b/app/assets/stylesheets/lines.css.scss index 59ec845d3..165689f3b 100644 --- a/app/assets/stylesheets/lines.css.scss +++ b/app/assets/stylesheets/lines.css.scss @@ -1,3 +1,116 @@ // Place all the styles related to the lines controller here. // They will automatically be included in application.css. // You can use Sass (SCSS) here: http://sass-lang.com/ +@mixin div_for_object { + margin-bottom: 20px; + + .color { + width: 64px; + height: 64px; + float: left; + margin-right: 10px; + } + + img { + float: left; + margin-right: 10px; + } + + img.preview { + width: 90px; + height: 70px; + } + + a { + display:block; + text-decoration: underline; + margin: 5px 0px 0px 0px; + } + + .info { + font-size: 10px; + color: #777; + font-weight: normal; + line-height: 14px; + margin-top: 5px; + + a { + display:inline; + color: #095495; + } + + p { + margin:0; + } + } +} + +@mixin content_to_clear { + content: " "; + display: block; + height: 0; + clear: both; + visibility: hidden; +} + +@mixin after_div_for_object { + @include content_to_clear; +} + +#workspace.lines.index +{ + .line:after { + @include after_div_for_object; + } + + .line { + @include div_for_object; + + .color { + width: 64px; + height: 64px; + float: left; + margin-right: 10px; + a { + text-decoration: none; + } + } + + .number { + font-size: 16px; + text-align: center; + color: white; + font-weight: bold; + padding-top: 21px; + } + } + +} + +#workspace.lines.edit, #workspace.lines.new +{ + #line_color{ width: 100px; + color: white; + font-weight: bold;} +} + +#workspace.lines.show +{ + .line_color{ color: white; + font-weight: bold; + padding: 0 5px 0 5px;} +} + + +#workspace .order { + float: right; + padding: 15px 0; + font-size: 0.8em; + + a { text-decoration: underline; } + + a.current { + font-weight: bold; + text-decoration: none; + } +} diff --git a/app/controllers/lines_controller.rb b/app/controllers/lines_controller.rb index 3a986b27c..83ab01674 100644 --- a/app/controllers/lines_controller.rb +++ b/app/controllers/lines_controller.rb @@ -1,4 +1,24 @@ class LinesController < InheritedResources::Base defaults :resource_class => Chouette::Line + helper_method :sort_column, :sort_direction + respond_to :html + respond_to :xml + respond_to :json + + protected + + def collection + @lines ||= Chouette::Line.all.order_by [[sort_column.to_sym, sort_direction.to_sym]] + end + + private + + def sort_column + %w(name number).include?(params[:sort]) ? params[:sort] : "name" + end + + def sort_direction + %w(asc desc).include?(params[:direction]) ? params[:direction] : "asc" + end end diff --git a/app/helpers/lines_helper.rb b/app/helpers/lines_helper.rb index a03868a0a..45bd8c6c3 100644 --- a/app/helpers/lines_helper.rb +++ b/app/helpers/lines_helper.rb @@ -1,2 +1,8 @@ module LinesHelper + def order(column) + title ||= Chouette::Line.human_attribute_name(column).titleize + css_class = (column == sort_column) ? "current #{sort_direction}" : nil + direction = (column == sort_column && sort_direction == "asc") ? "desc" : "asc" + link_to title, { :sort => column, :direction => direction}, {:class => css_class} + end end diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 048347894..7e0460ebb 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -16,7 +16,7 @@
- + + <%= @line.network.name if @line.network.present? %> +
++ + <%= @line.company.name if @line.company.present? %> +
++ + <%= @line.registrationnumber %> +
++ <%= @line.name %>
- + + <%= @line.publishedname %> +
++ <%= @line.number %>
- - <%= @line.registrationnumber %> + + <%= @line.transportmodename %> +
++ + <%= @line.comment %>