upgrade

app/assets/javascripts/application.js

@@ -14,8 +14,8 @@
 
 
 $(document).ready(function(){
-  var msnry = new Masonry( '#infos', {
-    columnWidth: 180,
-    itemSelector: '.card'
-  });
+  // var msnry = new Masonry( '#infos', {
+  //   columnWidth: 180,
+  //   itemSelector: '.card'
+  // });
 });

app/assets/stylesheets/application.css

@@ -1,35 +1,69 @@
 body {
   padding: 20px;
   font-family: 'Inconsolata', monospace;
-  background-color: #f5fff1;
+  background-color: #fff;
+  color: #4c4e4d;
 }
 
-a {
+a{
+  text-decoration: none;
+  color: #4c4e4d;
+  font-size: 17px;
+  font-weight: bold;
+}
+a:hover {
   color:black;
 }
 
-p:hover{
-  background-color: green;
+#all{
+  width: 900px;
+  margin: 0px auto;
+  margin-top: 35px;
 }
-.card:hover{
-  background-color: green;
+
+.tags{
+    font-size: 13px;
+    margin: 5px 0px 5px 0px;
+}
+h2{
+  margin: 0px
+}
+h3{
+  text-align: right;
+  font-size:15px;
+}
+
+#topo{
+  background-color: #8bf712;
+  width: 100%;
+  text-align: center;
+  display: inline-block;
+  top: 0px;
+  left: 0px;
+  position: absolute;
+  font-size: 10px;
+  height: 35px;
+  border-bottom: 1px solid lightgray
 }
 
 .card{
-  color: black;
-  width: 200px;
-  float: left;
+  /* color: black; */
+  border-top: 1px solid lightgray;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  /* width: 200px; */
+  /* float: left;
   border: 2px solid green;
   margin: 10px;
   padding: 25px;
   font-size: 22px;
   text-align: center;
-  box-shadow: 8px 8px 3px #1a54027a;
+  box-shadow: 8px 8px 3px #1a54027a; */
 }
 .date{
-  font-size: 14px;
+  font-size: 13px;
   color: gray;
-  padding-top: 15px
+  padding-top: 10px
 }
 
 
@@ -38,5 +72,7 @@ p:hover{
   width: 100%;
   text-align: center;
   padding: 10px;
-  font-size: 19px
+  font-size: 19px;
+  background-color: #8bf712;
+  border: 1px solid gray;
 }

app/models/informativo.rb

@@ -1,4 +1,15 @@
 class Informativo < ApplicationRecord
   self.table_name = "informativo"
-  # paginates_per  10
+   paginates_per  10
+
+  def tags
+    tags = []
+    tags << self.tag1
+    tags << self.tag2
+    tags << self.tag3
+    tags = tags.uniq.join(", ").downcase
+    tags.chop! if tags[tags.size-1]==","
+    tags
+  end
+
 end

app/views/layouts/application.haml

@@ -6,10 +6,12 @@
     = csrf_meta_tags
     = csp_meta_tag
     = stylesheet_link_tag "https://fonts.googleapis.com/css?family=Inconsolata&display=swap"
-    = stylesheet_link_tag    'application', media: 'all'
+    = stylesheet_link_tag       'application', media: 'all'
     = javascript_include_tag    'application'
 
   %body
 
-    %h1= "Ambiente Já!"
-    = yield
+    #all
+      #topo
+        = link_to (image_tag "logo.png"), "/"
+      = yield

app/views/page/home.haml

@@ -3,8 +3,9 @@
 #infos
   - @informativos.each do |i|
     .card
-      %span.link= link_to i.titulo, CGI.unescapeHTML("/informativo/#{i.id}")
-      .date= "#{i.data_inc}"
+      %span.link= link_to i.titulo.html_safe, CGI.unescapeHTML("/informativo/#{i.id}")
+      %p.tags= i.tags
+      .date= "#{i.data_inc} | #{i.operador_inc.downcase.capitalize}"
 
 #nav
   = will_paginate @informativos

app/views/page/informativo.haml

@@ -1,3 +1,15 @@
-!= @informativo.Descricao
-%hr
-!= ap @informativo
+// :javascript
+//   $(document).ready(function(){
+//     $("a").each(function(a){
+//       a.href = a.href.replace("http://localhost:3000/informativo/%22", "").replace("\"", "");
+//     })
+//   });
+
+#todo
+  %h2= @informativo.titulo.html_safe
+  .tags= @informativo.tags
+  .date= @informativo.data_inc
+  -# %p= "Por #{@informativo.operador_inc}"
+  != @informativo.Descricao.gsub(""", "\"")
+  -# %hr
+  -# != ap @informativo