New libro looks good

Author: juanmanuelramallo

app/views/libros/_form.html.erb

@@ -37,8 +37,6 @@
     <%= f.file_field :portada %>
   </div>
 
-  <div class="LibrosForm-actions">
-    <%= f.submit "Aceptar", class:"btn btn-principal" %>
-  </div>
+  <%= f.submit "👍", class:"btn no-border submit" %>
 <% end %>
 </div>

app/views/libros/new.html.erb

@@ -1,8 +1,10 @@
 <div class="LibrosNew">
-<h1>New Libro</h1>
+  <!-- Para obtener lo esperado con lost(grilla) se debe usar un container -->
+  <div class="LibrosNew-container">
+    <h1 class="LibrosNew-title"><%= link_to '⬅️', libros_path, class:"btn btn-cancel no-border" %> Nuevo libro  </h1>
 
-<%= render 'form', libro: @libro %>
+    <%= render 'form', libro: @libro %> </br>
 
-<%= link_to 'Cancelar', libros_path, class:"btn btn-cancel" %>
 
+  </div>
 </div>

gulp/stylesheets/botones.css

@@ -1,4 +1,5 @@
 .btn {
+  cursor: pointer;
   text-decoration: none;
   padding: 2px 10px;
   border: 1px gray solid;
@@ -7,8 +8,26 @@
 
   &-principal{
     &:hover{
+      /* Llamado a variable --> cssnext*/
       border-color: var(--color-principal);
+      /* Función de color --> cssnext */
       background-color: color(var(--color-principal) lightness(90%));
     }
   }
+
+  &.no-border {
+    border: 0px black solid;
+  }
+
+  &.submit {
+    background-color: color(lightgray lightness(93%));
+    padding: 10px 30px;
+    font-size: 40px;
+    width: 100%;
+    box-shadow: materialize-shadow-helper(1);
+
+    &:hover{
+      background-color: color(lightgray lightness(95%));
+    }
+  }
 }

gulp/stylesheets/main.css

@@ -1,9 +1,16 @@
+/*
+  Antes de cada elemento que use algún plugin de postcss es especificado con lo que hace seguido del nombre del plugin.
+  Recordar que todos los plugins están definidos en el gulpfile y listados en el task llamado 'css' dentro de un arreglo 'processors'
+*/
+
+/* Importing files like a pro --> postcss-import https://github.com/postcss/postcss-import */
 @import 'botones.css';
 @import 'variables.css';
 @import 'show.css';
 
 html{
   background-color: #e6e6e6;
+  /* Usar google fonts nunca fue tan fácil --> postcss-font-magician https://github.com/jonathantneal/postcss-font-magician */
   font-family: 'Noto Sans', sans-serif;
 }
 
@@ -16,35 +23,38 @@ a {
 }
 
 .LibrosIndex {
+  /* Sistema de grillas --> lost https://github.com/peterramsing/lost */
   lost-center: 80% 30px flex;
 
-  &-title{
+  /* Nesting in the more intuitive way --> postcss-cssnext https://github.com/MoOx/postcss-cssnext */
+  &-title{ /* Es como poner --> .LibrosIndex-title{ */
     text-align: center;
     font-size: 44px;
     font-family: 'Indie Flower';
   }
 
+  /* Nesting again --> postcss-cssnext */
   &-libros{
     lost-column: 2/3;
     background-color: white;
     border-radius: 5px;
     box-shadow: materialize-shadow-helper(1);
 
+    /* Nesting one more level --> postcss-cssnext */
     &-container {
       padding: 20px;
     }
 
-    &-table {
-
-    }
   }
 
+  /* More nesting (and plenty more below) */
   &-info{
+    /* Define una columna para &-info de tres que tendrá en total el ancho máximo --> lost */
     lost-column: 1/3;
     background-color: white;
     border-radius: 5px;
+    /* Sombreado especificado por materialize design guidelines --> postcss-material-shadow-helper https://github.com/harrisrobin/postcss-material-shadow-helper */
     box-shadow: materialize-shadow-helper(1);
-    /*width: 20%;*/
 
     &-container{
       position: relative;
@@ -57,16 +67,40 @@ a {
       text-decoration: none;
       text-align: center;
       padding: 30px 0px 30px 0px;
-      background-color: dim
+      background-color: lightgray;
       /*border: 1px black solid;*/
       font-size: 30px;
     }
-
   }
 }
 
-
-
 td {
   text-align: center;
 }
+
+.LibrosForm{
+  &-field{
+    padding: 10px 0px;
+    & input {
+      height: 25px;
+      width: 100%;
+    }
+  }
+
+}
+
+.LibrosNew{
+  position: relative;
+  top: 30px;
+  lost-center: 60% 30px flex;
+  background-color: white;
+  box-shadow: materilize-shadow-helper(1);
+
+  &-container{
+    width: 100%;
+    padding-bottom: 30px;
+  }
+  &-title{
+    text-align: center;
+  }
+}

gulp/stylesheets/show.css

@@ -1,29 +1,34 @@
 .LibrosShow {
   lost-center: 80% 30px flex;
   background-color: white;
+  /* Sombreado de materialize design guidelines --> postcss-material-shadow-helper */
   box-shadow: materialize-shadow-helper(1);
+  padding: 20px;
 
   &-title{
     text-align: center;
   }
 
-  &-imgcontainer {
-    /*filter: toaster;*/
-    height: 100%;
-  }
-
-  &-img{
-    height: 100%;
-  }
-
   &-portada {
+    /* Sistema de grillas --> lost */
     lost-column: 1/3;
   }
 
   &-informacion{
+    /* Define 2 columnas para &-información de las 3 que tendrá el ancho máximo del padre --> lost */
     lost-column: 2/3;
     &-container{
       padding-top: 30px;
     }
   }
+
+  &-imgcontainer {
+    /* Filtro de instagram --> postcss-instagram https://github.com/azat-io/postcss-instagram */
+    filter: toaster;
+    height: 100%;
+  }
+
+  &-img{
+    height: 100%;
+  }
 }

gulp/stylesheets/variables.css

@@ -1,7 +1,7 @@
+/* Definición de variables --> cssnext */
 :root {
   --color-principal: #669ada;
   --color-secundario: #ff6666;
   --color-cancel: #999999;
   --color-peligro: #ff8000;
-
 }

gulpfile.js

@@ -6,12 +6,11 @@ var rename = require('gulp-rename')
 
 var rucksack = require('rucksack-css')
 var cssnext = require('postcss-cssnext')
-var autoprefixer = require('autoprefixer')
 var cssnested = require('postcss-nested')
 var mixins = require('postcss-mixins')
 var lost = require('lost')
 var atImport = require('postcss-import')
-var csswring = require('csswring')
+var csswring = require('csswring') /* Minimificador */
 var materialShadow = require('postcss-material-shadow-helper')
 var instagram = require('postcss-instagram')
 var fontMagician = require('postcss-font-magician')