Add about

app/assets/javascripts/about.coffee

+# Place all the behaviors and hooks related to the matching controller here.
+# All this logic will automatically be available in application.js.
+# You can use CoffeeScript in this file: http://coffeescript.org/

app/assets/stylesheets/about.scss

+// Place all the styles related to the about controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/
+
+@import "bootstrap-sprockets";
+@import "bootstrap";
+@import "select2";
+@import "select2-bootstrap";
+@import "bootstrap-tagsinput";
+@import "spinners";
+
+//// FAQ
+.faq-row {
+  .question {
+    font-weight: 400;
+  }
+  .answer {
+    padding-left: 25px;
+    text-align: justify;
+    text-justify: inter-word;
+  }
+}
+//// CONTACT
+.about-contact {
+  .contact-row {
+    margin-bottom: 10px;
+
+    h4 {
+      font-weight: 400;
+      margin-bottom: 5px;
+    }
+  }
+  .contact-item {
+    background-color: #2E3192;
+    width: 30px;
+    height: 30px;
+    border-radius: 5px;
+    margin-right: 5px;
+  }
+}

app/controllers/about_controller.rb

+class AboutController < ApplicationController
+  def index
+  end
+end

app/helpers/about_helper.rb

+module AboutHelper
+end

app/views/shared/application/_about.html.erb → app/views/about/index.html.erb

-<div>
-  <!-- Nav tabs -->
-  <div class="nav nav-tabs" role="tablist">
-    <div class="col-md-4" role="presentation" class="active">
-      <h4><a href="#about" aria-controls="about" role="tab" data-toggle="tab">Sobre este portal</a></h4>
-    </div>
-    <div class="col-md-4" role="presentation">
-      <h4><a href="#faq" aria-controls="faq" role="tab" data-toggle="tab">Perguntas Frequentes</a></h4>
-    </div>
-    <div class="col-md-4" role="presentation">
-      <h4><a href="#contact" aria-controls="contact" role="tab" data-toggle="tab">Contato</a></h4>
-    </div>
-  </div>
 
   <!-- Tab panes -->
-  <br/>
   <div class="tab-content">
     <div role="tabpanel" class="tab-pane active" id="about">
+      <h3>Sobre este Portal</h3>
       <ul class="col-md-12" style="list-style-type:none">
         <li>
           Este portal de conteúdos educacionais provê serviços relacionados com o
@@ -44,7 +31,66 @@
         </li>
       </ul>
     </div>
-    <div role="tabpanel" class="tab-pane" id="faq"><%= render 'shared/application/faq' %></div>
-    <div role="tabpanel" class="tab-pane" id="contact"><%= render 'shared/application/contact' %></div>
+  </div>
+</div>
+<div class="row">
+  <div class="col-md-12">
+    <h3>Perguntas Frequentes</h3>
+    <div class="faq-row">
+      <h4 class="question">Preciso me registrar para participar?</h4>
+      <p class="answer">Você pode consultar e usufruir conteúdos do Portal MEC sem ter cadastro.
+      Mas para colocar novos materiais é necessário se registrar.</p>
+    </div>
+    <div class="faq-row">
+      <h4 class="question">Posso alterar meus dados cadastrais?</h4>
+      <p class="answer">Sim, para isso é preciso clicar na sua foto ou no
+      seu nome e depois em “Editar Perfil”.</p>
+    </div>
+    <div class="faq-row">
+      <h4 class="question">Esqueci minha senha. E agora?</h4>
+      <p class="answer">Você pode clicar na página inicial, em “entre” e no formulário de entrada
+      existe um link “Esqueceu sua senha”, ou ainda você pode clicar na sua foto ou no seu nome e
+      depois em “Editar Perfil”, existe um outro link no início da página “Esqueci a senha”.</p>
+    </div>
+    <div class="faq-row">
+      <h4 class="question">Posso salvar um objeto educacional do portal em meu computador?</h4>
+      <p class="answer">Sim, existe a opção “salvar no computador” na página que mostra os detalhes
+      do objeto educacional.</p>
+    </div>
+  </div>
+</div>
+<div class="col-md-12 about-contact">
+  <h3>Contatos</h3>
+  <div class="contact-row row">
+    <div class="col-md-6">
+      <h4>Email: <a target="_blank" href="mailto:contato@c3sl.ufpr.br">contato@c3sl.ufpr.br</a></h4>
+    </div>
+    <div class="col-md-6">
+      <h4>Telefone: (41)3361-3567</h4>
+    </div>
+  </div>
+  <div class="contact-row">
+    <h4>Redes Sociais</h4>
+    <div class="row">
+      <div class='col-md-1 col-sm-offset-1 contact-item'></div>
+      <div class='col-md-1 contact-item'></div>
+      <div class='col-md-1 contact-item'></div>
+      <div class='col-md-1 contact-item'></div>
+    </div>
+  </div>
+  <div class="contact-row">
+    <h4>Outros sites do ministério da educação</h4>
+    <div class="row">
+      <div class='contact-item col-md-1 col-sm-offset-1'></div>
+      <div class='contact-item col-md-1'></div>
+      <div class='contact-item col-md-1'></div>
+      <div class='contact-item col-md-1'></div>
+    </div>
+  </div>
+  <div class="contact-row">
+    <h4>Portal desenvolvido por</h4>
+    <div class="row">
+      <div class='contact-item col-md-1 col-sm-offset-1'></div>
+    </div>
   </div>
 </div>

app/views/shared/application/_collections.html.erb

 <div class="row">
   <div class="col-md-12">
-    <h4><b><%= link_to 'Institucionais', collections_path %></b></h4><br>
-    <% if user_signed_in? %> <h4><b><%= link_to 'Minhas coleções', collections_me_path %></b></h4> <% end %>
+    <% if user_signed_in? %>
+      <h4><b><%= link_to 'Institucionais', collections_path %></b></h4><br>
+      <h4><b><%= link_to 'Minhas coleções', collections_me_path %></b></h4>
+    <% end %>
   </div>
 </div>

app/views/shared/application/_contact.html.erb

-<div class="col-md-12 about-contact">
-  <div class="contact-row row">
-    <div class="col-md-6">
-      <h4>Email: <a target="_blank" href="mailto:contato@c3sl.ufpr.br">contato@c3sl.ufpr.br</a></h4>
-    </div>
-    <div class="col-md-6">
-      <h4>Telefone: (41)3361-3567</h4>
-    </div>
-  </div>
-  <div class="contact-row">
-    <h4>Redes Sociais</h4>
-    <div class="row">
-      <div class='col-md-1 col-sm-offset-1 contact-item'></div>
-      <div class='col-md-1 contact-item'></div>
-      <div class='col-md-1 contact-item'></div>
-      <div class='col-md-1 contact-item'></div>
-    </div>
-  </div>
-  <div class="contact-row">
-    <h4>Outros sites do ministério da educação</h4>
-    <div class="row">
-      <div class='contact-item col-md-1 col-sm-offset-1'></div>
-      <div class='contact-item col-md-1'></div>
-      <div class='contact-item col-md-1'></div>
-      <div class='contact-item col-md-1'></div>
-    </div>
-  </div>
-  <div class="contact-row">
-    <h4>Portal desenvolvido por</h4>
-    <div class="row">
-      <div class='contact-item col-md-1 col-sm-offset-1'></div>
-    </div>
-  </div>
-</div>

app/views/shared/application/_faq.html.erb

-<div class="row">
-  <div class="col-md-12">
-    <div class="faq-row">
-      <h4 class="question">Preciso me registrar para participar?</h4>
-      <p class="answer">Você pode consultar e usufruir conteúdos do Portal MEC sem ter cadastro.
-      Mas para colocar novos materiais é necessário se registrar.</p>
-    </div>
-    <div class="faq-row">
-      <h4 class="question">Posso alterar meus dados cadastrais?</h4>
-      <p class="answer">Sim, para isso é preciso clicar na sua foto ou no
-      seu nome e depois em “Editar Perfil”.</p>
-    </div>
-    <div class="faq-row">
-      <h4 class="question">Esqueci minha senha. E agora?</h4>
-      <p class="answer">Você pode clicar na página inicial, em “entre” e no formulário de entrada
-      existe um link “Esqueceu sua senha”, ou ainda você pode clicar na sua foto ou no seu nome e
-      depois em “Editar Perfil”, existe um outro link no início da página “Esqueci a senha”.</p>
-    </div>
-    <div class="faq-row">
-      <h4 class="question">Posso salvar um objeto educacional do portal em meu computador?</h4>
-      <p class="answer">Sim, existe a opção “salvar no computador” na página que mostra os detalhes
-      do objeto educacional.</p>
-    </div>
-  </div>
-</div>

app/views/shared/application/_header.html.erb

@@ -83,13 +83,17 @@
       <div class="row">
         <ul class="nav navbar-nav">
           <li role="separator" class="divider"></li>
+          <% if user_signed_in? %>
           <li class="nav-button"><h3><a class="nav-dropdown" data-content="collections" href="javascript:void(0);">Coleções&nbsp;<span class="caret"/></a></h3></li>
+          <% else %>
+          <li class="nav-button"><h3><a class="nav-dropdown" data-content="collections" href="javascript:void(0);"><%= link_to 'Coleções Institucionais', collections_path %>&nbsp;<span class="caret"/></a></h3></li>
+          <% end %>
           <li role="separator" class="divider"></li>
           <li class="dropdown nav-button"><h3><a class="nav-dropdown" data-content="links" href="javascript:void(0);">Links
             úteis&nbsp;<span class="caret"/></a></h3></li>
           <li role="separator" class="divider"></li>
           <li class="nav-button"><h3>
-            <a class="nav-dropdown" data-content="about" href="javascript:void(0);">Sobre&nbsp;<span class="caret"/></a>
+            <a class="nav-dropdown" data-content="about" href="javascript:void(0);"><%= link_to 'Sobre', about_path %><span class="caret"/></a>
           </h3></li>
           <li role="separator" class="divider"></li>
           <li class="nav-button"><h3>
@@ -112,9 +116,6 @@
       <div class="navigation-content-links">
         <%= render 'shared/application/links' %>
       </div>
-      <div class="navigation-content-about">
-        <%= render 'shared/application/about' %>
-      </div>
     </div>
   </div>
   </div>

app/views/shared/application/_home.html.erb

@@ -4,8 +4,7 @@
           <div class="container">
             <div id="barra-brasil">
               <ul>
-      <li>
-                  <a href="http://brasil.gov.br">Portal do Governo Brasileiro</a></li>
+                <li><a href="http://brasil.gov.br">Portal do Governo Brasileiro</a></li>
                 <li>
                   <a style="font-family:sans,sans-serif; text-decoration:none; color:white;" href="http://epwg.governoeletronico.gov.br/barra/atualize.html">Atualize
                     sua Barra de Governo</a></li>
@@ -22,14 +21,25 @@
             <div class="col-md-5">
               <nav class="navigation" id="menu-bar">
                 <ul class="nav navbar-nav">
-                  <li class="nav-button"><h3><a class="nav-dropdown" data-content="collections" href="javascript:void(0);">Coleções&nbsp;</a></h3></li>
+                  <li class="nav-button"><h3><a class="nav-dropdown" data-content="collections"><%= link_to 'Coleções Institucionais', collections_path %>&nbsp;</a></h3></li>
                   <li class="dropdown nav-button"><h3><a class="nav-dropdown" data-content="links" href="javascript:void(0);">Links
-                    úteis&nbsp;</a></h3></li>
-                  <li class="nav-button"><h3><a class="nav-dropdown" data-content="about" href="javascript:void(0);">Sobre&nbsp;</a></h3></li>
+                    úteis&nbsp;</a></h3>
+                  <li class="nav-button"><h3><a class="nav-dropdown" data-content="about" href="javascript:void(0);"><%= link_to 'Sobre', about_path %></a></h3></li>&nbsp;</a></h3></li>
                   <li class="nav-button"><h3>
                     <%= link_to "Enviar Novo Item", new_learning_object_path, style: "color: #FFFFFF" %></h3></li>
                 </ul>
               </nav>
+              <div class="navigation-content">
+                <div class="container">
+                  <div class="row">
+                    <a class="navigation-content-close pull-right" aria-label="Close" href="javascript:void(0);">
+                      <h3><span aria-hidden="true">&times;</span></h3></a>
+                  </div>
+                  <div class="navigation-content-links">
+                    <%= render 'shared/application/links' %>
+                  </div>
+                </div>
+              </div>
             </div>
             <div class="col-md-4">
               <div class="search-accessibility">

config/routes.rb

@@ -114,6 +114,8 @@ Rails.application.routes.draw do
     end
   end
 
+  get '/about' => 'about#index', as: 'about'
+
   get '/search' => 'search#index', as: 'search'
   get '/search/fetch' => 'search#fetch', as: 'search_fetch'
   get '/autocomplete' => 'search#autocomplete'