displaying right collection metadata

app/assets/stylesheets/application/collections.scss

+ul.collection-header {
+  li {
+    width: 100%;
+    margin-bottom: 10px;
+  }
+}
\ No newline at end of file

app/views/collections/show.html.erb

-
 <nav class="navigation navbar-default "><br/>
 
   <div class="container-fluid">
+    <div class="navbar-right">
+      <%= link_to '#' do %>
+          <span style="margin-right: 30px;"><button class="but but-shadow but-rc">EDITAR COLEÇÃO</button></span>
+      <% end %>
+    </div>
     <div class="navbar-header">
       <%= image_tag image_path("icons/collection.png"), class: "logo-image", size: "90x66" %>
-      <ul class="nav navbar-nav navbar-right"><h1>&nbsp;<b>Coleção 1</b></h1> <br/>
-        &nbsp;  <%= image_tag image_path("icons/square.png"), class: "logo-image", size: "20x20" %> 200 itens
+      <ul class="nav navbar-nav navbar-right collection-header" style="margin-left: 30px;">
+        <li><h2><%= @collection.name %></h2></li>
+        <li>
+          <%= image_tag image_path("icons/square.png"), class: "logo-image", size: "20x20" %>
+          <%= collection_length @collection %>
+        </li>
       </ul>
     </div>
   </div>
   <br/></nav>
 <nav class="navigation navbar-inverse ">
   <div class="container-fluid">
-    <a class="navbar-brand" href="#">x arquivo(s) selecionado(s)</a>
+    <a class="navbar-brand" href="#"><font color="FFFFFF">x arquivo(s) selecionado(s)</font></a>
     <ul class="nav navbar-nav navbar-right">
-      <li><a href="#"><%= image_tag image_path("icons/collection1.png"), class: "logo-image", size: "35x28" %> Salvar no
-        computador</a></li>
-      <li><a href="#"><%= image_tag image_path("icons/collection1.png"), class: "logo-image", size: "35x28" %> Copiar
-        para</a></li>
-      <li><a href="#"><%= image_tag image_path("icons/collection1.png"), class: "logo-image", size: "35x28" %> Mover
-        para</a></li>
-      <li>
-        <a href="#"><%= image_tag image_path("icons/collection1.png"), class: "logo-image", size: "35x28" %> Remover da
-          coleção</a></li>
+      <li class="set-align">
+        <a href="#"><span class="left-edge1"><%= image_tag image_path("icons/Download_01.png"), class: "logo-image", size: "35x35" %></span><font color="FFFFFF">
+          Salvar no <br>computador</font></br></a></li>
+      <li class="set-align">
+        <a href="#"><span class="left-edge1"><%= image_tag image_path("icons/Copiar_Seleção.png"), class: "logo-image", size: "35x35" %></span><font color="FFFFFF">
+          Copiar <br>para</font></br></a></li>
+      <li class="set-align">
+        <a href="#"><span class="left-edge1"><%= image_tag image_path("icons/Mover_Seleção.png"), class: "logo-image", size: "35x35" %></span><font color="FFFFFF">
+          Mover <br>para</font></br></a></li>
+      <li class="set-align">
+        <a href="#"><span class="left-edge1"><%= image_tag image_path("icons/Remover_da_Coleção_Seleção.png"), class: "logo-image", size: "35x35" %></span><font color="FFFFFF">
+          Remover da <br>coleção</font></br></a></li>
     </ul>
   </div>
 </nav>
 
 <div class="row mainpage-subjects">
   <br/>
-  <%= render_collection_objects @collection.learning_objects %>
-</div>
+
+  <% @collection.learning_objects.each do |learning_object| %>
+      <%= render learning_object, orientation: 'vertical' %>
+  <% end %>
+
+  <!--<div class="col-md-4">
+    <div class="thumb">
+      <input type="checkbox" class="chk " checked="checked" name="" value="0"/>
+      <%= image_tag image_path('learning-object-preview.png'), class: "logo" %>Obj1
+    </div>
+    <br/>
+
+    <div class="thumb">
+      <input type="checkbox" class="chk " checked="checked" name="" value="0"/>
+      <%= image_tag image_path('learning-object-preview.png'), class: "logo" %>Obj4
+    </div>
+    <br/>
+
+    <div class="thumb">
+      <input type="checkbox" class="chk " checked="checked" name="" value="0"/>
+      <%= image_tag image_path('learning-object-preview.png'), class: "logo" %>Obj7
+    </div>
+  </div>
+  <div class="col-md-4">
+    <div class="thumb">
+      <input type="checkbox" class="chk " checked="checked" name="" value="0"/>
+      <%= image_tag image_path('learning-object-preview.png'), class: "logo" %>Obj2
+    </div>
+    <br/>
+
+    <div class="thumb">
+      <input type="checkbox" class="chk " checked="checked" name="" value="0"/>
+      <%= image_tag image_path('learning-object-preview.png'), class: "logo" %>Obj5
+    </div>
+    <br/>
+
+    <div class="thumb">
+      <input type="checkbox" class="chk " checked="checked" name="" value="0"/>
+      <%= image_tag image_path('learning-object-preview.png'), class: "logo" %>Obj8
+    </div>
+  </div>
+  <div class="col-md-4">
+    <div class="thumb">
+      <input type="checkbox" class="chk " checked="checked" name="" value="0"/>
+      <%= image_tag image_path('learning-object-preview.png'), class: "logo" %>Obj3
+    </div>
+    <br/>
+
+    <div class="thumb">
+      <input type="checkbox" class="chk " checked="checked" name="" value="0"/>
+      <%= image_tag image_path('learning-object-preview.png'), class: "logo" %>Obj6
+    </div>
+    <br/>
+
+    <div class="thumb">
+      <input type="checkbox" class="chk " checked="checked" name="" value="0"/>
+      <%= image_tag image_path('learning-object-preview.png'), class: "logo" %>Obj9
+    </div>
+  </div> -->
+</div>
\ No newline at end of file