lolita 3.4.3 → 4.0.0

data/app/views/components/lolita/configuration/column/header/_sort.html.haml

@@ -1,6 +1,6 @@
-- sort_mapping = {"desc" => '⇓', "asc" => '⇑'}
-- new_params = params.reject{|k,v| ["controller","action"].include?(k.to_s)}
-- direction_indicator = raw(sort_mapping[column.current_sort_state(new_params)[1]])
-- new_params[:s] = column.sort_params(new_params)
-
-= link_to raw("#{column.title.to_s.capitalize} #{direction_indicator}"), lolita_resources_path(new_params)
+- sort_mapping = {"desc" => '⇓', "asc" => '⇑'}
+- new_params = params.reject{|k,v| ["controller","action"].include?(k.to_s)}
+- direction_indicator = raw(sort_mapping[column.current_sort_state(new_params)[1]])
+- new_params[:s] = column.sort_params(new_params)
+
+= link_to raw("#{column.title.to_s.capitalize} #{direction_indicator}"), lolita_resources_path(new_params)

data/app/views/components/lolita/configuration/columns/body/_display.html.haml

@@ -1,3 +1,3 @@
 %tbody
   - page.each_with_index do |record,index|
-    = render_component *columns.build("body/row", :record => record, :index => index, :list => list)
+    = render_component *columns.build("body/row", :record => record, :index => index, :list => list)

data/app/views/components/lolita/configuration/columns/header/_display.html.haml

@@ -1,5 +1,5 @@
-%thead
-  %tr
-    - columns.each do |column|
-      = render_component *column.build("header")
-    = render_component "lolita/configuration/column/header", :last
+%thead
+  %tr
+    - columns.each do |column|
+      = render_component *column.build("header")
+    = render_component "lolita/configuration/column/header", :last

data/app/views/components/lolita/configuration/field/array/checkbox/_display.html.haml

@@ -1,8 +1,8 @@
-- ids_method = field.name.to_s.match(/_ids$/) ? field.name : "#{field.name.to_s.singularize}_ids"
-= hidden_field_tag "#{resource_name}[#{ids_method}][]",""
-- field.view_values(self).each do |value|
-  - editors = resource.send(:"#{ids_method}")
-  .habtm-container
-    = label_tag "#{resource_name}_#{field.name}_#{value.last}",value.first, :class => "habtm-label"
-    = check_box_tag "#{resource_name}[#{ids_method}][]", value.last, resource.send("#{ids_method}").include?(value.last), :id => "#{resource_name}_#{field.name}_#{value.last}", :class => "habtm-checkbox"
+- ids_method = field.name.to_s.match(/_ids$/) ? field.name : "#{field.name.to_s.singularize}_ids"
+= hidden_field_tag "#{resource_name}[#{ids_method}][]",""
+- field.view_values(self).each do |value|
+  - editors = resource.send(:"#{ids_method}")
+  .habtm-container
+    = label_tag "#{resource_name}_#{field.name}_#{value.last}",value.first, :class => "habtm-label"
+    = check_box_tag "#{resource_name}[#{ids_method}][]", value.last, resource.send("#{ids_method}").include?(value.last), :id => "#{resource_name}_#{field.name}_#{value.last}", :class => "habtm-checkbox"
 .clear

data/app/views/components/lolita/configuration/field/string/text/_display.html.haml

@@ -1,7 +1,4 @@
-= current_form.text_area field.name, :rows=>(field.rows || 20), :"data-simple"=>field.simple 
-- if @textarea_component_include_tinymce_once.nil? 
-  :javascript
-    $(function(){
-      TinyMCEConfigManager.get().load();
-    })
-- @textarea_component_include_tinymce_once = "done" 
+= current_form.text_area field.name, :rows=>(field.rows || 20), :"data-simple"=>field.simple
+- if @textarea_component_include_tinymce_once.nil?
+  = tinymce Lolita.tinymce_configuration_set, selector: "textarea[data-simple!=true]", language: I18n.locale
+- @textarea_component_include_tinymce_once = "done"

data/app/views/components/lolita/configuration/search/_display.html.haml

@@ -1,2 +1,2 @@
-= form_tag lolita_resources_path(), :method => :get, :class => "search" do 
-  %input{:type => "text", :name => "q", :value => params[:q], :placeholder => t("lolita.search")}
+= form_tag lolita_resources_path(), :method => :get, :class => "search" do 
+  %input{:type => "text", :name => "q", :value => params[:q], :placeholder => t("lolita.search")}

data/app/views/components/lolita/configuration/tab/_display.html.haml

@@ -1,4 +1,4 @@
-%div{:class => "tab #{active && "active"}", :id => "tab_#{tab.__id__}"}
-  = render_component "lolita/configuration/tab", :error_msg, :tab => tab
-  = render_component *tab.build 
-  = #render_component "lolita/configuration/tab", :form, :tab => tab
+%div{:class => "tab #{active && "active"}", :id => "tab_#{tab.__id__}"}
+  = render_component "lolita/configuration/tab", :error_msg, :tab => tab
+  = render_component *tab.build 
+  //= render_component "lolita/configuration/tab", :form, :tab => tab

data/app/views/components/lolita/configuration/tabs/_form.html.haml

@@ -1,7 +1,8 @@
-= form_for resource, :url => resource.new_record? ? lolita_resources_path : lolita_resource_path(:id=>resource.id), :method => resource.new_record? ? :post : :put, :html => {:multipart => true, :class => "associated"} do |form|
-  - self.current_form = form
-  - tabs.associated.each_with_index do |tab,index|
-    = render_component :"lolita/configuration/tab", :display, :tab => tab, :active => index == 0
-- self.current_form = nil
-- tabs.dissociated.each_with_index do |tab,index|
+= form_for resource, :url => resource.new_record? ? lolita_resources_path : lolita_resource_path(:id=>resource.id), :method => resource.new_record? ? :post : :put, :html => {:multipart => true, :class => "associated"} do |form|
+  - self.current_form = form
+  - tabs.associated.each_with_index do |tab,index|
+    = render_component :"lolita/configuration/tab", :display, :tab => tab, :active => index == 0
+- self.current_form = nil
+- tabs.dissociated.each_with_index do |tab,index|
+  /= binding.pry
   = render_component :"lolita/configuration/tab", :display, :tab => tab, :active => false

data/app/views/components/lolita/configuration/tabs/yo.html

@@ -0,0 +1 @@
+<form accept-charset=\"UTF-8\" action=\"/lolita/producers\" class=\"associated\" enctype=\"multipart/form-data\" id=\"new_producer\" method=\"post\"><div style=\"margin:0;padding:0;display:inline\"><input name=\"utf8\" type=\"hidden\" value=\"&#x2713;\" /><input name=\"authenticity_token\" type=\"hidden\" value=\"yxDB5wlw91LhUwhCikk4FLziDowlVoiXCHLxFAaQRT8=\" /></div>  <div class='tab active' id='tab_70311164860540'>\n    <ul class='tab-language-switch' id='tab_70311164860540_language_switch'>\n      <li class='active' data-locale='en' data-tab='tab_70311164860540'>En</li>\n      <li class='' data-locale='sv' data-tab='tab_70311164860540'>Sv</li>\n    </ul>\n    <div class='clear'></div>\n    <div class='tab-content'>\n      <div class='active language-wrap' id='en_for_tab_70311164860540'>\n        <div class='field_string' id='field_70311164856180'>\n          <label for=\"producer_name\" id=\"field_70311164856180_label\">Name</label>\n          <div class='field-value' id='field_70311164856180_value'><input class=\"string\" id=\"producer_name\" name=\"producer[name]\" type=\"text\" /></div>\n        </div>\n        <div class='field_string' id='field_70311164854820'>\n          <label for=\"producer_description\" id=\"field_70311164854820_label\">Description</label>\n          <div class='field-value' id='field_70311164854820_value'><textarea data-simple=\"true\" id=\"producer_description\" name=\"producer[description]\" rows=\"20\">&#x000A;</textarea></div>\n        </div>\n        <div class='field_string' id='field_70311164877500'>\n          <label for=\"producer_full_description\" id=\"field_70311164877500_label\">Full description</label>\n          <div class='field-value' id='field_70311164877500_value'><textarea data-simple=\"true\" id=\"producer_full_description\" name=\"producer[full_description]\" rows=\"20\">&#x000A;</textarea></div>\n        </div>\n        <div class='field_string' id='field_70311164875720'>\n          <label for=\"producer_website_url\" id=\"field_70311164875720_label\">Website url</label>\n          <div class='field-value' id='field_70311164875720_value'><input class=\"string\" id=\"producer_website_url\" name=\"producer[website_url]\" type=\"text\" /></div>\n        </div>\n        <div class='field_file' id='field_70311147558540'>\n          <label for=\"producer_logo\" id=\"field_70311147558540_label\">Logo</label>\n          <div class='field-value' id='field_70311147558540_value'>\n          \n            <span class=\"actions\"><input id=\"producer_logo\" name=\"producer[logo]\" type=\"file\" />\n            <input id=\"producer_logo_cache\" name=\"producer[logo_cache]\" type=\"hidden\" />\n            </span>\n            <div class=\"clear\" />\n          </div>\n        </div>\n        <div class='field_string' id='field_70311187900940'>\n          <div class='field-value' id='field_70311187900940_value'><input class=\"string\" id=\"producer_original_locale\" name=\"producer[original_locale]\" type=\"hidden\" value=\"en\" /></div>\n        </div>\n      </div>\n      <div class='nested_form normal' id='nested_form_70311115184120'>\n        <div class='nested-form-fields-container'>\n          <div class='language-wrap' id='sv_for_tab_70311164860540'>\n            <div class=''>\n              <div class='field_string' id='field_70311164854820'>\n                <label for=\"producer_translations_attributes_0_description\" id=\"field_70311164854820_label\">Description</label>\n                <div class='field-value' id='field_70311164854820_value'><textarea data-simple=\"true\" id=\"producer_translations_attributes_0_description\" name=\"producer[translations_attributes][0][description]\" rows=\"20\">&#x000A;</textarea></div>\n              </div>\n              <div class='field_string' id='field_70311164877500'>\n                <label for=\"producer_translations_attributes_0_full_description\" id=\"field_70311164877500_label\">Full description</label>\n                <div class='field-value' id='field_70311164877500_value'><textarea data-simple=\"true\" id=\"producer_translations_attributes_0_full_description\" name=\"producer[translations_attributes][0][full_description]\" rows=\"20\">&#x000A;</textarea></div>\n              </div>\n              <div class='field_string' id='field_70311115251100'>\n                <div class='field-value' id='field_70311115251100_value'><input class=\"string\" id=\"producer_translations_attributes_0_locale\" name=\"producer[translations_attributes][0][locale]\" type=\"hidden\" value=\"sv\" /></div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  \n  </div>\n</form>\n<div class='tab false' id='tab_70311164906800'>\n  \n  <form accept-charset=\"UTF-8\" action=\"/lolita/producers/files/create\" class=\"lolita-file-upload-form\" id=\"files_form\" method=\"post\"><div style=\"margin:0;padding:0;display:inline\"><input name=\"utf8\" type=\"hidden\" value=\"&#x2713;\" /><input name=\"authenticity_token\" type=\"hidden\" value=\"yxDB5wlw91LhUwhCikk4FLziDowlVoiXCHLxFAaQRT8=\" /></div>\n    <div id=\"file_upload_container_files\">\n      Your browser don't have HTML5 or Flash support.\n    </div>\n    <div class=\"filelist\">\n      <div id=\"file_list_for_files\" class=\"filelist-container\">\n  </div>\n  \n    </div>\n    <script type=\"text/javascript\">  \n   $(function(){  \n    $(\"#file_upload_container_files\").plupload({\n      // General settings\n      runtimes : 'html5,flash',\n      url : '/lolita/producers/files/create',\n      max_file_size : '100mb',\n      unique_names : true,\n      rename: true,\n      multipart: true,\n      multipart_params: {  \n        \"authenticity_token\" : 'yxDB5wlw91LhUwhCikk4FLziDowlVoiXCHLxFAaQRT8=',\n        \"upload[fileable_type]\": \"Producer\",\n        \"upload[fileable_id]\": \"0\"\n      },\n      headers:{\n          \"X-CSRF-Token\": $(\"meta[name='csrf-token']\").attr(\"content\")\n      },\n  \n      // Flash settings\n      flash_swf_url : \"/assets/lolita/file-upload/plupload.flash.swf\",\n      init:{\n        FileUploaded:function(uploader, file, info){\n            $(\"#file_list_for_files\").append(info.response)\n  \n            var ids=\"producer[file_ids][]\"\n  \n          var existing_ids=[]\n          $(\"input.files-ids\").each(function(){\n            existing_ids.push($(this).val())\n          })\n  \n          var new_ids=[]\n          $(\"#file_list_for_files .file-item[data-files-id]\").each(function(){\n            if($.inArray($(this).attr(\"data-files-id\"),existing_ids)<0){\n              new_ids.push($(this).attr(\"data-files-id\"))\n            }\n          })\n          for(var i in new_ids){\n            $(\".tabs form:first\").append('<input type=\"hidden\" class=\"files-ids\" name=\"'+ids+'\" value=\"'+new_ids[i]+'\" />')\n          }\n  \n        }  \n      },\n      \n    });\n  \n  \t$(\"#tab_70311164906800\").bind(\"tab.toggle\", function(){\n  \t\tvar uploader = $(\"#file_upload_container_files\").plupload('getUploader');\n  \t\tuploader.refresh();\t\t\n  \t})\n  \n   });  \n  </script> \n  \n  </form>\n  \n</div>

data/app/views/kaminari/lolita/_first_page.html.erb

@@ -1,11 +1,11 @@
-<%# Link to the "First" page
-  - available local variables
-    url:           url to the first page
-    current_page:  a page object for the currently displayed page
-    num_pages:     total number of pages
-    per_page:      number of items to fetch per page
-    remote:        data-remote
--%>
-<span class="first">
-  <%= link_to_unless current_page.first?, raw(t 'views.pagination.first'), url, :remote => remote %>
-</span>
+<%# Link to the "First" page
+  - available local variables
+    url:           url to the first page
+    current_page:  a page object for the currently displayed page
+    num_pages:     total number of pages
+    per_page:      number of items to fetch per page
+    remote:        data-remote
+-%>
+<span class="first">
+  <%= link_to_unless current_page.first?, raw(t 'views.pagination.first'), url, :remote => remote %>
+</span>

data/app/views/kaminari/lolita/_gap.html.erb

@@ -1,8 +1,8 @@
-<%# Non-link tag that stands for skipped pages...
-  - available local variables
-    current_page:  a page object for the currently displayed page
-    num_pages:     total number of pages
-    per_page:      number of items to fetch per page
-    remote:        data-remote
--%>
-<span class="page gap"><%= raw(t 'views.pagination.truncate') %></span>
+<%# Non-link tag that stands for skipped pages...
+  - available local variables
+    current_page:  a page object for the currently displayed page
+    num_pages:     total number of pages
+    per_page:      number of items to fetch per page
+    remote:        data-remote
+-%>
+<span class="page gap"><%= raw(t 'views.pagination.truncate') %></span>

data/app/views/kaminari/lolita/_last_page.html.erb

@@ -1,11 +1,11 @@
-<%# Link to the "Last" page
-  - available local variables
-    url:           url to the last page
-    current_page:  a page object for the currently displayed page
-    num_pages:     total number of pages
-    per_page:      number of items to fetch per page
-    remote:        data-remote
--%>
-<span class="last">
-  <%= link_to_unless current_page.last?, raw(t 'views.pagination.last'), url, {:remote => remote} %>
-</span>
+<%# Link to the "Last" page
+  - available local variables
+    url:           url to the last page
+    current_page:  a page object for the currently displayed page
+    num_pages:     total number of pages
+    per_page:      number of items to fetch per page
+    remote:        data-remote
+-%>
+<span class="last">
+  <%= link_to_unless current_page.last?, raw(t 'views.pagination.last'), url, {:remote => remote} %>
+</span>

data/app/views/kaminari/lolita/_next_page.html.erb

@@ -1,11 +1,11 @@
-<%# Link to the "Next" page
-  - available local variables
-    url:           url to the next page
-    current_page:  a page object for the currently displayed page
-    num_pages:     total number of pages
-    per_page:      number of items to fetch per page
-    remote:        data-remote
--%>
-<span class="next">
-  <%= link_to_unless current_page.last?, raw(t 'views.pagination.next'), url, :rel => 'next', :remote => remote %>
-</span>
+<%# Link to the "Next" page
+  - available local variables
+    url:           url to the next page
+    current_page:  a page object for the currently displayed page
+    num_pages:     total number of pages
+    per_page:      number of items to fetch per page
+    remote:        data-remote
+-%>
+<span class="next">
+  <%= link_to_unless current_page.last?, raw(t 'views.pagination.next'), url, :rel => 'next', :remote => remote %>
+</span>

data/app/views/kaminari/lolita/_page.html.erb

@@ -1,12 +1,12 @@
-<%# Link showing page number
-  - available local variables
-    page:          a page object for "this" page
-    url:           url to this page
-    current_page:  a page object for the currently displayed page
-    num_pages:     total number of pages
-    per_page:      number of items to fetch per page
-    remote:        data-remote
--%>
-<span class="page<%= ' current' if page.current? %>">
-  <%= link_to_unless page.current?, page, url, opts = {:remote => remote, :rel => page.next? ? 'next' : page.prev? ? 'prev' : nil} %>
-</span>
+<%# Link showing page number
+  - available local variables
+    page:          a page object for "this" page
+    url:           url to this page
+    current_page:  a page object for the currently displayed page
+    num_pages:     total number of pages
+    per_page:      number of items to fetch per page
+    remote:        data-remote
+-%>
+<span class="page<%= ' current' if page.current? %>">
+  <%= link_to_unless page.current?, page, url, opts = {:remote => remote, :rel => page.next? ? 'next' : page.prev? ? 'prev' : nil} %>
+</span>

data/app/views/kaminari/lolita/_paginator.html.erb

@@ -1,23 +1,23 @@
-<%# The container tag
-  - available local variables
-    current_page:  a page object for the currently displayed page
-    num_pages:     total number of pages
-    per_page:      number of items to fetch per page
-    remote:        data-remote
-    paginator:     the paginator that renders the pagination tags inside
--%>
-<%= paginator.render do -%>
-  <nav class="pagination">
-    <%= first_page_tag unless current_page.first? %>
-    <%= prev_page_tag unless current_page.first? %>
-    <% each_page do |page| -%>
-      <% if page.left_outer? || page.right_outer? || page.inside_window? -%>
-        <%= page_tag page %>
-      <% elsif !page.was_truncated? -%>
-        <%= gap_tag %>
-      <% end -%>
-    <% end -%>
-    <%= next_page_tag unless current_page.last? %>
-    <%= last_page_tag unless current_page.last? %>
-  </nav>
-<% end -%>
+<%# The container tag
+  - available local variables
+    current_page:  a page object for the currently displayed page
+    num_pages:     total number of pages
+    per_page:      number of items to fetch per page
+    remote:        data-remote
+    paginator:     the paginator that renders the pagination tags inside
+-%>
+<%= paginator.render do -%>
+  <nav class="pagination">
+    <%= first_page_tag unless current_page.first? %>
+    <%= prev_page_tag unless current_page.first? %>
+    <% each_page do |page| -%>
+      <% if page.left_outer? || page.right_outer? || page.inside_window? -%>
+        <%= page_tag page %>
+      <% elsif !page.was_truncated? -%>
+        <%= gap_tag %>
+      <% end -%>
+    <% end -%>
+    <%= next_page_tag unless current_page.last? %>
+    <%= last_page_tag unless current_page.last? %>
+  </nav>
+<% end -%>

data/app/views/kaminari/lolita/_prev_page.html.erb

@@ -1,11 +1,11 @@
-<%# Link to the "Previous" page
-  - available local variables
-    url:           url to the previous page
-    current_page:  a page object for the currently displayed page
-    num_pages:     total number of pages
-    per_page:      number of items to fetch per page
-    remote:        data-remote
--%>
-<span class="prev">
-  <%= link_to_unless current_page.first?, raw(t 'views.pagination.previous'), url, :rel => 'prev', :remote => remote %>
-</span>
+<%# Link to the "Previous" page
+  - available local variables
+    url:           url to the previous page
+    current_page:  a page object for the currently displayed page
+    num_pages:     total number of pages
+    per_page:      number of items to fetch per page
+    remote:        data-remote
+-%>
+<span class="prev">
+  <%= link_to_unless current_page.first?, raw(t 'views.pagination.previous'), url, :rel => 'prev', :remote => remote %>
+</span>

data/app/views/lolita/info/index.html.erb

@@ -1,232 +1,232 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Lolita: Welcome aboard</title>
-    <style type="text/css" media="screen">
-      body {
-        margin: 0;
-        margin-bottom: 25px;
-        padding: 0;
-        background-color: #f0f0f0;
-        font-family: "Lucida Grande", "Bitstream Vera Sans", "Verdana";
-        font-size: 13px;
-        color: #333;
-      }
-
-      h1 {
-        font-size: 28px;
-        color: #000;
-      }
-
-      a  {color: #03c}
-      a:hover {
-        background-color: #03c;
-        color: white;
-        text-decoration: none;
-      }
-
-
-      #page {
-        background-color: #f0f0f0;
-        width: 750px;
-        margin: 0;
-        margin-left: auto;
-        margin-right: auto;
-      }
-
-      #content {
-        float: left;
-        background-color: white;
-        border: 3px solid #aaa;
-        border-top: none;
-        padding: 25px;
-        width: 500px;
-      }
-
-      #sidebar {
-        float: right;
-        width: 175px;
-      }
-
-      #footer {
-        clear: both;
-      }
-
-
-      #header, #about, #getting-started {
-        padding-left: 75px;
-        padding-right: 30px;
-      }
-
-
-      #header {
-        background-image: url("images/lolita/plus.png");
-        background-repeat: no-repeat;
-        background-position: top left;
-        height: 64px;
-      }
-      #header h1, #header h2 {margin: 0}
-      #header h2 {
-        color: #888;
-        font-weight: normal;
-        font-size: 16px;
-      }
-
-
-      #about h3 {
-        margin: 0;
-        margin-bottom: 10px;
-        font-size: 14px;
-      }
-
-      #about-content {
-        background-color: #ffd;
-        border: 1px solid #fc0;
-        margin-left: -55px;
-        margin-right: -10px;
-      }
-      #about-content table {
-        margin-top: 10px;
-        margin-bottom: 10px;
-        font-size: 11px;
-        border-collapse: collapse;
-      }
-      #about-content td {
-        padding: 10px;
-        padding-top: 3px;
-        padding-bottom: 3px;
-      }
-      #about-content td.name  {color: #555}
-      #about-content td.value {color: #000}
-
-      #about-content ul {
-        padding: 0;
-        list-style-type: none;
-      }
-
-      #about-content.failure {
-        background-color: #fcc;
-        border: 1px solid #f00;
-      }
-      #about-content.failure p {
-        margin: 0;
-        padding: 10px;
-      }
-
-
-      #getting-started {
-        border-top: 1px solid #ccc;
-        margin-top: 25px;
-        padding-top: 15px;
-      }
-      #getting-started h1 {
-        margin: 0;
-        font-size: 20px;
-      }
-      #getting-started h2 {
-        margin: 0;
-        font-size: 14px;
-        font-weight: normal;
-        color: #333;
-        margin-bottom: 25px;
-      }
-      #getting-started ol {
-        margin-left: 0;
-        padding-left: 0;
-      }
-      #getting-started li {
-        font-size: 18px;
-        color: #888;
-        margin-bottom: 25px;
-      }
-      #getting-started li h2 {
-        margin: 0;
-        font-weight: normal;
-        font-size: 18px;
-        color: #333;
-      }
-      #getting-started li p {
-        color: #555;
-        font-size: 13px;
-      }
-
-
-      #sidebar ul {
-        margin-left: 0;
-        padding-left: 0;
-      }
-      #sidebar ul h3 {
-        margin-top: 25px;
-        font-size: 16px;
-        padding-bottom: 10px;
-        border-bottom: 1px solid #ccc;
-      }
-      #sidebar li {
-        list-style-type: none;
-      }
-      #sidebar ul.links li {
-        margin-bottom: 5px;
-      }
-
-    </style>
-    <script type="text/javascript">
-      function about() {
-        info = document.getElementById('about-content');
-        if (window.XMLHttpRequest)
-          { xhr = new XMLHttpRequest(); }
-        else
-          { xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
-        xhr.open("GET","lolita/info/properties",false);
-        xhr.send("");
-        info.innerHTML = xhr.responseText;
-        info.style.display = 'block'
-      }
-    </script>
-  </head>
-  <body>
-    <div id="page">
-      <div id="sidebar">
-        <ul id="sidebar-items">
-          <li>
-            <h3>Browse the documentation</h3>
-            <ul class="links">
-              <li><a href="http://rdoc.info/github/ithouse/lolita/master/frames">Lolita API</a></li>
-            </ul>
-          </li>
-        </ul>
-      </div>
-
-      <div id="content">
-        <div id="header">
-          <h1>Welcome aboard</h1>
-          <h2>You&rsquo;re riding Lolita!</h2>
-        </div>
-
-        <div id="about">
-          <h3><a href="lolita/info/properties" onclick="about(); return false">About your application&rsquo;s environment</a></h3>
-          <div id="about-content" style="display: none"></div>
-        </div>
-
-        <div id="getting-started">
-          <h1>Getting started</h1>
-          <h2>Here&rsquo;s how to get rolling:</h2>
-
-          <ol>
-            <li>
-              <h2>Use <code>lolita_for</code> in config/routes.rb</h2>
-              <p>run it.</p>
-            </li>
-
-            <li>
-            <h2>Use <code>lolita</code> in your models</h2>
-              <p></p>
-            </li>
-
-          </ol>
-        </div>
-      </div>
-
-      <div id="footer">&nbsp;</div>
-    </div>
-  </body>
-</html>
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Lolita: Welcome aboard</title>
+    <style type="text/css" media="screen">
+      body {
+        margin: 0;
+        margin-bottom: 25px;
+        padding: 0;
+        background-color: #f0f0f0;
+        font-family: "Lucida Grande", "Bitstream Vera Sans", "Verdana";
+        font-size: 13px;
+        color: #333;
+      }
+
+      h1 {
+        font-size: 28px;
+        color: #000;
+      }
+
+      a  {color: #03c}
+      a:hover {
+        background-color: #03c;
+        color: white;
+        text-decoration: none;
+      }
+
+
+      #page {
+        background-color: #f0f0f0;
+        width: 750px;
+        margin: 0;
+        margin-left: auto;
+        margin-right: auto;
+      }
+
+      #content {
+        float: left;
+        background-color: white;
+        border: 3px solid #aaa;
+        border-top: none;
+        padding: 25px;
+        width: 500px;
+      }
+
+      #sidebar {
+        float: right;
+        width: 175px;
+      }
+
+      #footer {
+        clear: both;
+      }
+
+
+      #header, #about, #getting-started {
+        padding-left: 75px;
+        padding-right: 30px;
+      }
+
+
+      #header {
+        background-image: url("images/lolita/plus.png");
+        background-repeat: no-repeat;
+        background-position: top left;
+        height: 64px;
+      }
+      #header h1, #header h2 {margin: 0}
+      #header h2 {
+        color: #888;
+        font-weight: normal;
+        font-size: 16px;
+      }
+
+
+      #about h3 {
+        margin: 0;
+        margin-bottom: 10px;
+        font-size: 14px;
+      }
+
+      #about-content {
+        background-color: #ffd;
+        border: 1px solid #fc0;
+        margin-left: -55px;
+        margin-right: -10px;
+      }
+      #about-content table {
+        margin-top: 10px;
+        margin-bottom: 10px;
+        font-size: 11px;
+        border-collapse: collapse;
+      }
+      #about-content td {
+        padding: 10px;
+        padding-top: 3px;
+        padding-bottom: 3px;
+      }
+      #about-content td.name  {color: #555}
+      #about-content td.value {color: #000}
+
+      #about-content ul {
+        padding: 0;
+        list-style-type: none;
+      }
+
+      #about-content.failure {
+        background-color: #fcc;
+        border: 1px solid #f00;
+      }
+      #about-content.failure p {
+        margin: 0;
+        padding: 10px;
+      }
+
+
+      #getting-started {
+        border-top: 1px solid #ccc;
+        margin-top: 25px;
+        padding-top: 15px;
+      }
+      #getting-started h1 {
+        margin: 0;
+        font-size: 20px;
+      }
+      #getting-started h2 {
+        margin: 0;
+        font-size: 14px;
+        font-weight: normal;
+        color: #333;
+        margin-bottom: 25px;
+      }
+      #getting-started ol {
+        margin-left: 0;
+        padding-left: 0;
+      }
+      #getting-started li {
+        font-size: 18px;
+        color: #888;
+        margin-bottom: 25px;
+      }
+      #getting-started li h2 {
+        margin: 0;
+        font-weight: normal;
+        font-size: 18px;
+        color: #333;
+      }
+      #getting-started li p {
+        color: #555;
+        font-size: 13px;
+      }
+
+
+      #sidebar ul {
+        margin-left: 0;
+        padding-left: 0;
+      }
+      #sidebar ul h3 {
+        margin-top: 25px;
+        font-size: 16px;
+        padding-bottom: 10px;
+        border-bottom: 1px solid #ccc;
+      }
+      #sidebar li {
+        list-style-type: none;
+      }
+      #sidebar ul.links li {
+        margin-bottom: 5px;
+      }
+
+    </style>
+    <script type="text/javascript">
+      function about() {
+        info = document.getElementById('about-content');
+        if (window.XMLHttpRequest)
+          { xhr = new XMLHttpRequest(); }
+        else
+          { xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
+        xhr.open("GET","lolita/info/properties",false);
+        xhr.send("");
+        info.innerHTML = xhr.responseText;
+        info.style.display = 'block'
+      }
+    </script>
+  </head>
+  <body>
+    <div id="page">
+      <div id="sidebar">
+        <ul id="sidebar-items">
+          <li>
+            <h3>Browse the documentation</h3>
+            <ul class="links">
+              <li><a href="http://rdoc.info/github/ithouse/lolita/master/frames">Lolita API</a></li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+
+      <div id="content">
+        <div id="header">
+          <h1>Welcome aboard</h1>
+          <h2>You&rsquo;re riding Lolita!</h2>
+        </div>
+
+        <div id="about">
+          <h3><a href="lolita/info/properties" onclick="about(); return false">About your application&rsquo;s environment</a></h3>
+          <div id="about-content" style="display: none"></div>
+        </div>
+
+        <div id="getting-started">
+          <h1>Getting started</h1>
+          <h2>Here&rsquo;s how to get rolling:</h2>
+
+          <ol>
+            <li>
+              <h2>Use <code>lolita_for</code> in config/routes.rb</h2>
+              <p>run it.</p>
+            </li>
+
+            <li>
+            <h2>Use <code>lolita</code> in your models</h2>
+              <p></p>
+            </li>
+
+          </ol>
+        </div>
+      </div>
+
+      <div id="footer">&nbsp;</div>
+    </div>
+  </body>
+</html>