Merge pull request #1476 from consul/more-info-pages

More info pages

app/assets/stylesheets/application.scss

@@ -6,6 +6,7 @@
 @import "admin";
 @import "layout";
 @import "participation";
+@import "pages";
 @import "custom";
 @import "c3";
 @import "annotator.min";

app/assets/stylesheets/pages.scss

@@ -0,0 +1,111 @@
+// Table of Contents
+//
+// 01. Header
+// 02. Navigation
+// 03. Content
+// 04. Sidebar
+//
+
+// 01. Header
+// ----------------------
+
+.jumbo {
+  margin-bottom: $line-height;
+  margin-top: rem-calc(-24);
+  padding-bottom: $line-height;
+  padding-top: $line-height;
+
+  &.light {
+    background: #ECF0F1;
+  }
+}
+
+.lead {
+  font-size: rem-calc(24);
+}
+
+// 03. Navigation
+// ----------------------
+
+.menu-pages {
+  list-style-type: none;
+  margin: 0;
+
+  li {
+    display: block;
+
+    @include breakpoint(medium) {
+      display: inline-block;
+      margin-right: $line-height/2;
+    }
+  }
+}
+
+// 03. Content
+// ----------------------
+
+.more-info-content {
+
+  h3 {
+    color: $brand;
+  }
+
+  .additional-info {
+    margin-bottom: $line-height;
+  }
+
+  a:not(.button) {
+    text-decoration: underline;
+  }
+
+  figure {
+    margin: 0;
+    text-align: center;
+
+    figcaption {
+      font-size: $small-font-size;
+      font-style: italic;
+    }
+  }
+
+  ul.features {
+    list-style-type: circle;
+    margin-left: $line-height;
+
+    @include breakpoint(medium) {
+      margin: $line-height 0 $line-height $line-height*2.5;
+    }
+
+    li {
+      margin-bottom: $line-height
+    }
+  }
+
+  .section-content {
+    border-top: 1px solid $medium-gray;
+    padding-bottom: $line-height*2;
+    padding-top: $line-height*2;
+
+    &:first-child {
+      border-top: 0;
+      padding-top: 0;
+    }
+  }
+}
+
+// 04. Sidebar
+// ----------------------
+
+.more-info-sidebar {
+
+  .sidebar-card {
+    border: 1px solid $border;
+    margin-bottom: $line-height;
+    padding: $line-height/2;
+
+    &.light {
+      background: #ECF0F1;
+      border: 0;
+    }
+  }
+}

app/views/layouts/_footer.html.erb

@@ -43,7 +43,6 @@
     <div class="small-12 medium-8 column">
       <%= t("layouts.footer.copyright", year: Time.current.year) %>&nbsp;|
       <ul class="no-bullet inline-block">
-        <li class="inline-block"><%= link_to t("layouts.footer.more_info"), page_path('more_information') %>&nbsp;|</li>
         <li class="inline-block"><%= link_to t("layouts.footer.privacy"), page_path('privacy') %>&nbsp;|</li>
         <li class="inline-block"><%= link_to t("layouts.footer.conditions"), page_path('conditions') %>&nbsp;|</li>
         <li class="inline-block"><%= link_to t("layouts.footer.accessibility"), page_path('accessibility') %></li>

app/views/pages/how_it_works.html.erb

@@ -1,20 +0,0 @@
-<div class="row margin-top">
-  <div class="small-12 medium-3 column">
-    <%= render "shared/back_link" %>
-
-    <ul class="menu vertical margin-top">
-        <li>
-          <a href="#i"><strong>I. <%= t('pages.more_information.how_it_works.i') %></strong></a>
-          <ul class="nested vertical menu">
-            <li><a href="#i1"><strong>I.1. <%= t('pages.more_information.how_it_works.i1') %></strong></a></li>
-            <li><a href="#i2"><strong>I.2. <%= t('pages.more_information.how_it_works.i2') %></strong></a></li>
-          </ul>
-        </li>
-    </ul>
-  </div>
-
-  <div class="small-12 medium-9 column">
-    <h1><%= t('pages.more_information.titles.how_it_works') %></h1>
-    <%= markdown t('pages.more_information.how_it_works.text') %>
-  </div>
-</div>

app/views/pages/more_info/_budgets.html.erb

@@ -0,0 +1,20 @@
+<div class="row section-content">
+  <div class="small-12 column">
+    <h3 id="budgets" data-magellan-target="budgets">Presupuestos participativos</h3>
+    <p>
+      <%= link_to "Información detallada de Presupuestos participativos", more_info_budgets_path, class: "small" %>
+    </p>
+    <p>Los primeros seis meses de cada año puedes decidir cómo gastar parte del presupuesto.</p>
+    <ul class="features">
+      <li>Para crear un proyecto de gasto tienes que <%= link_to "registrarte en " + setting['org_name'], new_user_registration_path %> y verificar tu cuenta.</li>
+      <li>En primer lugar empieza la <strong>fase de aceptación</strong> de proyectos de gasto.</li>
+      <li>Después hay una <strong>fase de apoyos</strong> para priorizar lo más interesante, las más apoyadas son evaluadas por el Ayuntamiento para ver si son viables y cuánto valen.</li>
+      <li>Al final hay una <strong>fase de votación</strong> donde se decide en cuáles se gasta esa parte del presupuesto.</li>
+    </ul>
+
+    <figure>
+      <%= image_tag "more_info/budgets.png", alt: "Diferentes fases de un presupuesto participativo" %>
+      <figcaption>Fase de "Apoyos" y fase de "Votación" de los presupuestos participativos.</figcaption>
+    </figure>
+  </div>
+</div>

app/views/pages/more_info/_debates.html.erb

@@ -0,0 +1,15 @@
+<div class="row section-content">
+  <div class="small-12 column">
+    <h3 id="debates" data-magellan-target="debates">Debates</h3>
+    <p>Crea un hilo en el que debatir sobre cualquier tema que quieras compartir con el resto de gente de tu ciudad.</p>
+    <ul class="features">
+      <li>Para crear un debate tienes que <%= link_to "registrarte en " + setting['org_name'], new_user_registration_path %>.</li>
+      <li>Los debates pueden ser valorados utilizando los botones de <strong>Estoy de acuerdo</strong> o <strong>No estoy de acuerdo</strong> que encontrarás en cada uno de ellos.</li>
+    </ul>
+
+    <figure>
+      <%= image_tag "more_info/debates.png", alt: "Botones para valorar los debates" %>
+      <figcaption>Botones "Estoy de acuerdo" y "No estoy de acuerdo" para valorar los debates.</figcaption>
+    </figure>
+  </div>
+</div>

app/views/pages/more_info/_menu.html.erb

@@ -0,0 +1,22 @@
+<div class="row">
+  <div class="small-12 column">
+    <ul class="menu-pages" data-magellan>
+      <% if feature?(:debates) %>
+      <li>
+        <%= link_to t("pages.more_information.menu.debates"), "#debates", class: "button hollow expanded" %>
+      </li>
+      <% end %>
+      <li>
+        <%= link_to t("pages.more_information.menu.proposals"), "#proposals", class: "button hollow expanded" %>
+      </li>
+      <% if feature?(:budgets) %>
+      <li>
+        <%= link_to t("pages.more_information.menu.budgets"), "#budgets", class: "button hollow expanded" %>
+      </li>
+      <% end %>
+      <li>
+        <%= link_to t("pages.more_information.menu.other"), "#other", class: "button hollow expanded" %>
+      </li>
+    </ul>
+  </div>
+</div>

app/views/pages/more_info/_other.html.erb

@@ -0,0 +1,6 @@
+<h3 id="other" data-magellan-target="other">Otra información de interés</h3>
+
+<ul class="features">
+  <li><%= link_to "Participación ciudadana directa en el mundo", participation_facts_path %></li>
+  <li><%= link_to "Hechos sobre participación ciudadana y democracia directa", participation_world_path %></li>
+</ul>

app/views/pages/more_info/_proposals.html.erb

@@ -0,0 +1,19 @@
+<div class="row section-content">
+  <div class="small-12 column">
+    <h3 id="proposals" data-magellan-target="proposals">Propuestas</h3>
+    <p>
+      <%= link_to "Información detallada de Propuestas", more_info_proposals_path, class: "small" %>
+    </p>
+    <p>Propón lo que quieres que el Ayuntamiento lleve a cabo y apoya propuestas de otras personas.</p>
+    <ul class="features">
+      <li>Para crear una propuesta tienes que <%= link_to "registrarte en " + setting['org_name'], new_user_registration_path %>, además para apoyarlas debes verificar tu cuenta.</li>
+      <li>Las propuestas que consigan <strong>el apoyo del 1% de la gente</strong> (mayor de 16 años empadronada en Madrid; 27.064 apoyos) pasan a votación.</li>
+      <li>Si hay más gente a favor que en contra en la votación, <strong>el Ayuntamiento asume la propuesta y se hace</strong>.</li>
+    </ul>
+
+    <figure>
+      <%= image_tag "more_info/proposals.png", alt: "Botón para apoyar una propuesta" %>
+      <figcaption>Botón para "Apoyar" una propuesta.<br>Cuando alcance el número de apoyos pasará a votación.</figcaption>
+    </figure>
+  </div>
+</div>

app/views/pages/more_info/_sidebar.html.erb

@@ -0,0 +1,11 @@
+<div class="sidebar-card">
+  <h3>¿Problemas técnicos?</h3>
+  <p>Lee las preguntas frecuentes y resuelve tus dudas.</p>
+  <%= link_to "Ver preguntas frecuentes", faq_path, class: "button expanded" %>
+</div>
+
+<div class="sidebar-card light">
+  <h3>Utiliza <%= setting['org_name'] %> en tu municipio</h3>
+  <p>Utilízalo en tu municipio libremente o ayúdanos a mejorarlo, es software libre.</p>
+  <%= link_to "Cómo usar " + setting['org_name'], how_to_use_path , class: "button expanded" %>
+</div>

app/views/pages/more_info/index.html.erb

@@ -0,0 +1,39 @@
+<% provide :title do %><%= t("pages.titles.more_information", org_name: setting['org_name']) %><% end %>
+
+<div class="jumbo light">
+  <div class="row">
+    <div class="small-12 column">
+      <h2><%= t("pages.more_information.title", org_name: setting['org_name']) %></h2>
+      <p class="lead"><%= t("pages.more_information.subtitle") %></p>
+      <p><%= t("pages.more_information.guide", org_name: setting['org_name']) %></p>
+    </div>
+  </div>
+
+  <%= render "pages/more_info/menu" %>
+</div>
+
+<div id="more-info" class="more-info-content">
+  <div class="row">
+    <div class="small-12 medium-7 large-8 column">
+      <% if feature?(:debates) %>
+        <%= render "pages/more_info/debates" %>
+      <% end %>
+
+      <%= render "pages/more_info/proposals" %>
+
+      <% if feature?(:budgets) %>
+        <%= render "pages/more_info/budgets" %>
+      <% end %>
+    </div>
+    <div class="small-12 medium-4 large-3 column more-info-sidebar">
+      <%= render "pages/more_info/sidebar" %>
+    </div>
+  </div>
+
+  <div class="row">
+    <hr>
+    <div class="small-12 column">
+      <%= render "pages/more_info/other" %>
+    </div>
+  </div>
+</div>

app/views/pages/more_information.html.erb

@@ -1,71 +0,0 @@
-<% provide :title do %><%= t('pages.titles.more_information') %><% end %>
-<div class="row">
-  <div class="more-information small-12 medium-9 large-7 column">
-    <h1><%= t('pages.titles.more_information') %></h1>
-    <ul class="no-bullet">
-      <li>
-        <%= link_to page_path('how_it_works') do %>
-          <%= t('pages.more_information.titles.how_it_works') %>
-          <br>
-          <span><%= t('pages.more_information.description.how_it_works') %></span>
-        <% end %>
-      </li>
-      <li>
-      <%= link_to page_path('how_to_use') do %>
-          <%= t('pages.more_information.titles.how_to_use') %>
-          <br>
-          <span><%= t('pages.more_information.description.how_to_use') %></span>
-      <% end %>
-      </li>
-      <li>
-      <%= link_to page_path('participation') do %>
-          <%= t('pages.more_information.titles.participation') %>
-          <br>
-          <span><%= t('pages.more_information.description.participation') %></span>
-      <% end %>
-      </li>
-      <li>
-      <%= link_to page_path('proposals_info') do %>
-          <%= t('pages.more_information.titles.proposals_info') %>
-          <br>
-          <span><%= t('pages.more_information.description.proposals_info') %></span>
-      <% end %>
-      </li>
-      <li>
-      <%= link_to page_path('spending_proposals_info') do %>
-          <%= t('pages.more_information.titles.spending_proposals_info') %>
-          <br>
-          <span><%= t('pages.more_information.description.spending_proposals_info') %></span>
-      <% end %>
-      </li>
-      <li>
-      <%= link_to page_path('participation_world') do %>
-          <%= t('pages.more_information.titles.participation_world') %>
-          <br>
-          <span><%= t('pages.more_information.description.participation_world') %></span>
-      <% end %>
-      </li>
-      <li>
-      <%= link_to page_path('participation_facts') do %>
-          <%= t('pages.more_information.titles.participation_facts') %>
-          <br>
-          <span><%= t('pages.more_information.description.participation_facts') %></span>
-      <% end %>
-      </li>
-      <li>
-      <%= link_to page_path('faq') do %>
-          <%= t('pages.more_information.titles.faq') %>
-          <br>
-          <span><%= t('pages.more_information.description.faq') %></span>
-      <% end %>
-      </li>
-      <li>
-      <%= link_to page_path('proposals_info', :anchor => "iii") do %>
-          <%= t('pages.more_information.titles.signature_sheet') %>
-          <br>
-          <span><%= t('pages.more_information.description.signature_sheet') %></span>
-      <% end %>
-      </li>
-    </ul>
-  </div>
-</div>

app/views/pages/opendata.html.erb

@@ -1,14 +0,0 @@
-<% provide :title do %><%= t('pages.titles.opendata') %><% end %>
-
-<div class="expanded highlight no-margin-top">
-  <div class="row padding margin">
-    <div class="small-12 medium-7 column">
-      <h1><%= t("pages.opendata.title") %></h1>
-      <p><%= t("pages.opendata.slogan") %></p>
-    </div>
-
-    <div class="show-for-medium small-12 medium-5 column text-center">
-      <%= image_tag("icon_home.png", size: "330x240", alt:"") %>
-    </div>
-  </div>
-</div>

app/views/pages/participation.html.erb

@@ -1,46 +0,0 @@
-<div class="row margin-top">
-  <div class="small-12 medium-3 column">
-    <%= render "shared/back_link" %>
-
-    <ul class="menu vertical margin-top hide-for-small-only">
-        <li>
-          <a href="#i"><strong>I. Participación</strong></a>
-          <ul class="nested vertical menu">
-            <li><a href="#i1"><strong>I.1. Participación</strong></a></li>
-            <li><a href="#i2"><strong>I.2. Participación</strong></a></li>
-            <li><a href="#i3"><strong>I.3. Participación</strong></a></li>
-          </ul>
-        </li>
-        <li>
-          <a href="#ii"><strong>II. Transparencia</strong></a>
-          <ul class="nested vertical menu">
-            <li><a href="#ii1"><strong>II.1. Transparencia</strong></a></li>
-            <li><a href="#ii2"><strong>II.2. Transparencia</strong></a></li>
-            <li><a href="#ii3"><strong>II.3. Transparencia</strong></a></li>
-          </ul>
-        </li>
-    </ul>
-  </div>
-
-  <div class="small-12 medium-9 column">
-    <h1>Participación y Transparencia</h1>
-
-    <p>Página de información sobre Participación y Transparencia.</p>
-
-    <h3 id="i">I. Participación.</h3>
-
-    <ul>
-      <li id="i1"><strong>I.1. Participación.</strong> Información sobre Participación</li>
-      <li id="i2"><strong>I.1. Participación.</strong> Información sobre Participación</li>
-      <li id="i3"><strong>I.1. Participación.</strong> Información sobre Participación</li>
-    </ul>
-
-    <h3 id="ii">II. Transparencia</h3>
-
-    <ul>
-      <li id="ii1"><strong>II.1. Transparencia</strong> Información sobre Transparencia</li>
-      <li id="ii2"><strong>II.1. Transparencia</strong> Información sobre Transparencia</li>
-      <li id="ii3"><strong>II.1. Transparencia</strong> Información sobre Transparencia</li>
-    </ul>
-  </div>
-</div>

app/views/shared/_subnavigation.html.erb

@@ -36,5 +36,11 @@
                                   accesskey: "4" %>
       </li>
     <% end %>
+    <li>
+      <%= link_to t("layouts.header.more_information"),
+                    more_info_path,
+                    accesskey: "5",
+                    class: ("active" if current_page?(more_info_path)) %>
+    </li>
   </ul>
 </div>

app/views/shared/_top_links.html.erb

@@ -1,9 +1,4 @@
 <ul class="no-bullet external-links">
-  <li>
-    <%= link_to t("layouts.header.more_information"),
-                page_path('more_information'),
-                class: ("selected" if current_page?("/more_information")) %>
-  </li>
   <li>
     <%= link_to t("layouts.header.external_link_transparency"),
                 t("layouts.header.external_link_transparency_url"),