rails_admin_featured_content 1.0.4 → 1.0.5

data/app/assets/stylesheets/rails_admin/featured_content.scss

@@ -8,74 +8,92 @@
 
 .fc-snippet {
   position: fixed;
-  z-index: 100;
-  top: 50px;
-  bottom: 110px;
+  z-index: 400;
+  bottom: 54px;
+  left: 0;
   right: 0;
 
-  width: 150px;
-
-  padding: 20px;
-
+  width: 100%;
+  height: 100px;
+  padding: 10px 0;
   background: #f8f8f8;
-  border-left: solid 1px rgba(0,0,0,.1);
-
-  overflow: hidden;
+  border-top: solid 1px rgba(0,0,0,.1);
   overflow-y: scroll;
 }
 
 .fc-snippet__btn {
-  display: block;
+  box-sizing: border-box;
+  float: left;
+  width: 25%;
+  padding: 10px;
+
+  text-align: center;
   text-decoration: none;
-  margin-bottom: 20px;
 
   transition: box-shadow .1s ease;
 
   &:hover {
+    text-decoration: none;
     box-shadow: 0 0 0 2px rgba(0,0,0,.1);
   }
 }
 
+.fc-snippet__caption {
+  display: none;
+  padding: 5px;
+
+  color: rgba(0,0,0,.6);
+  font-size: 10px;
+}
+
 .fc-snippet__image {
   width: 100%;
 }
 
 .fc-controls {
   position: fixed;
-  z-index: 100;
+  z-index: 400;
   bottom: 0;
   right: 0;
 
-  width: 150px;
+  width: 100%;
 
-  padding: 20px;
+  padding: 10px;
 
   background: #f8f8f8;
   border-top: solid 1px rgba(0,0,0,.1);
   border-left: solid 1px rgba(0,0,0,.1);
-}
 
+  .btn-block {
+    margin-top: 0;
+    width: auto !important;
+  }
+
+  .btn-right {
+    float: right;
+  }
+
+  .btn-left {
+    float: left;
+  }
+}
 
 .fc-tools {
-  position: absolute;
-  z-index: 300;
-  top: 0;
-  left: -40px;
+  margin-bottom: 10px;
 
-  border-radius: .4em;
+  border-radius: .4rem;
   background: darken(#fff, 7%);
-
   overflow: hidden;
+
+  text-align: right;
 }
 
 .fc-tools--center {
+  position: absolute;
+  z-index: 300;
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
-
-  .fc-tools__btn {
-    display: inline-block;
-  }
 }
 
 .fc-tools--disabled {
@@ -83,7 +101,7 @@
 }
 
 .fc-tools__btn {
-  display: block;
+  display: inline-block;
 
   font-size: 12px;
   text-align: center;
@@ -98,6 +116,10 @@
   }
 }
 
+.fc-tools__btn--delete {
+  float: left;
+}
+
 .fc-tools__input {
 
 }
@@ -106,10 +128,9 @@
   display: none !important;
 }
 
-
 .fc-container {
-  width: 777px;
-  padding: 0 0 0 40px;
+  box-sizing: border-box;
+  padding: 0 0 300px 0;
 }
 
 .fc-content {
@@ -131,13 +152,9 @@
   position: relative;
 }
 
-.fc-row--flex {
-  display: flex;
-}
-
 .fc-loading {
   position: absolute;
-  z-index: 200;
+  z-index: 400;
   top: 0;
   left: 0;
 
@@ -229,16 +246,11 @@
     clear: both;
     height: 0;
   }
-
-  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
-    font-family: 'Open Sans', sans-serif !important;
-    font-weight: 700 !important;
-  }
 }
 
 .fc-item--border {
-  margin-bottom: 16px;
-  padding-bottom: 16px;
+  margin-bottom: 24px;
+  padding-bottom: 24px;
 
   border-bottom: solid 1px rgba(#111, .06);
 }
@@ -249,10 +261,12 @@
 
 .fc-figure {
   position: relative;
-  margin: 0 0 10px;
+  float: left;
+  margin: 4px 16px 0 0;
 
   text-align: center;
 
+  height: 112px;
   border-radius: 4px;
   overflow: hidden;
 }
@@ -279,8 +293,7 @@
 
 .fc-caption {
   color: lighten(#111, 40%);
-  font-family: 'Open Sans', sans-serif;
-  font-size: 11px;
+  font-size: 10px;
   text-transform: uppercase;
 
   margin: 0 0 10px;
@@ -301,9 +314,10 @@
 .fc-title--highlight {
   padding: 8px;
   background: #333;
+  border-radius: 4px;
 
   color: #fff !important;
-  font-size: 19px !important;
+  font-size: 17px !important;
 }
 
 .fc-text {
@@ -317,10 +331,8 @@
 
 
 @media screen and (min-width: 460px) {
-  .fc-figure {
-    float: left;
-    height: 112px;
-    margin: 4px 16px 0 0;
+  .fc-snippet__caption {
+    display: block;
   }
 
   .fc-caption {
@@ -338,7 +350,7 @@
 
   .fc-title--large {
     line-height: 1.3;
-    font-size: 26px;
+    font-size: 25px;
   }
 
   .fc-text {
@@ -347,6 +359,92 @@
 }
 
 @media screen and (min-width: 768px) {
+  .fc-snippet {
+    top: 50px;
+    right: 0;
+    bottom: 112px;
+    left: auto;
+
+    width: 150px;
+    height: auto;
+    padding: 20px;
+    border: 0;
+    border-left: solid 1px rgba(0,0,0,.1);
+
+    -webkit-transform: translateX(0%);
+    -moz-transform: translateX(0%);
+    transform: translateX(0%);
+  }
+
+  .fc-snippet__btn {
+    margin-bottom: 20px;
+
+    display: block;
+    width: 100%;
+    padding: 0;
+  }
+
+  .fc-tools {
+    position: absolute;
+    z-index: 300;
+    top: 0;
+    left: -40px;
+  }
+
+  .fc-tools__btn {
+    display: block;
+  }
+
+  .fc-tools--center {
+    position: absolute;
+    z-index: 300;
+    top: 50%;
+    left: 50%;
+
+    .fc-tools__btn {
+      display: inline-block;
+    }
+  }
+
+  .fc-controls {
+    position: fixed;
+    z-index: 100;
+    bottom: 0;
+    right: 0;
+
+    width: 150px;
+
+    padding: 20px;
+
+    background: #f8f8f8;
+    border-top: solid 1px rgba(0,0,0,.1);
+    border-left: solid 1px rgba(0,0,0,.1);
+
+    .btn-block {
+      width: 100% !important;
+    }
+
+    .btn-block + .btn-block {
+      margin-top: 5px;
+    }
+
+    .btn-left,
+    .btn-right {
+      float: none;
+    }
+  }
+
+  .fc-container {
+    box-sizing: border-box;
+    padding: 30px 160px 100px 40px;
+    width: 80%;
+    margin: 0 auto;
+  }
+
+  .fc-row--flex {
+    display: flex;
+  }
+
   .fc-item--two {
     float: left;
     display: block;
@@ -401,36 +499,34 @@
   }
 
   .fc-figure--block {
+    position: relative;
     float: none;
+    margin: 0 1rem .5rem 0;
+
     width: 100%;
-    margin: 0 16px 10px 0;
+    height: 0;
+    padding-bottom: 50%;
 
     .fc-image {
+      position: absolute;
+      top: 50%;
+      left: 0;
+
       width: 100%;
       height: auto;
+
+      -webkit-transform: translateY(-50%);
+      -moz-transform: translateY(-50%);
+      transform: translateY(-50%);
     }
   }
 
   .fc-figure--small {
-    height: 64px;
+    padding-bottom: 40%;
   }
 
   .fc-figure--large {
-    height: 128px;
-  }
-
-  .fc-figure--clip {
-    .fc-figure {
-      width: 160px;
-    }
-
-    .fc-figure--small {
-      width: 96px;
-    }
-
-    .fc-figure--large {
-      width: 224px;
-    }
+    padding-bottom: 60%;
   }
 }
 
@@ -491,7 +587,7 @@
   margin: 32px;
 
   color: #fff;
-  font-size: 16px;
+  font-size: 12px;
   text-transform: uppercase;
 
   display: block;
@@ -511,7 +607,7 @@
     width: 48px;
     height: 3px;
 
-    background: #444;
+    background: rgba(#fff, .7);
   }
 }
 
@@ -530,7 +626,7 @@ h2.fc-slide__caption {
   line-height: 1.3;
   color: #fff !important;
   letter-spacing: -.04em;
-  font-size: 33px;
+  font-size: 16px;
 
   text-shadow: 1px 1px 0 rgba(0,0,0,.6);
 }
@@ -539,8 +635,8 @@ h2.fc-slide__caption {
   margin: 8px 0 0;
 
   width: 100% !important;
-  color: #fff;
-  font-size: 19px;
+  color: rgba(#fff, .8);
+  font-size: 12px;
   line-height: 1.6;
 
   text-shadow: 1px 1px 0 rgba(0,0,0,.6);
@@ -553,7 +649,7 @@ h2.fc-slide__caption {
 
   width: 100%;
   height: 0;
-  border-radius: 6px;
+  border-radius: 4px;
   padding-bottom: 60%;
 
   overflow: hidden;
@@ -599,3 +695,17 @@ h2.fc-slide__caption {
 
   width: 100%;
 }
+
+@media screen and (min-width: 768px) {
+  .fc-slide__caption {
+    font-size: 16px;
+  }
+
+  .fc-slide__title {
+    font-size: 33px;
+  }
+
+  .fc-slide__text {
+    font-size: 19px;
+  }
+}

data/app/views/rails_admin/main/featured_content.html.erb

@@ -4,32 +4,54 @@
 <div class="fc-snippet">
   <%= link_to '#', class: 'fc-snippet__btn', data: {snippet: '1'} do %>
     <%= image_tag 'fc-snippet-highlight.jpg', class: 'fc-snippet__image' %>
+    <span class="fc-snippet__caption">
+      <%= t('admin.actions.featured_content.snippet.targe') %>
+    </span>
   <% end %>
 
   <%= link_to '#', class: 'fc-snippet__btn', data: {snippet: '2'} do %>
     <%= image_tag 'fc-snippet-text.jpg', class: 'fc-snippet__image' %>
+    <span class="fc-snippet__caption">
+      <%= t('admin.actions.featured_content.snippet.title_large') %>
+    </span>
   <% end %>
 
   <%= link_to '#', class: 'fc-snippet__btn', data: {snippet: '3'} do %>
     <%= image_tag 'fc-snippet-slide.jpg', class: 'fc-snippet__image' %>
+    <span class="fc-snippet__caption">
+      <%= t('admin.actions.featured_content.snippet.slide') %>
+    </span>
   <% end %>
 
   <%= link_to '#', class: 'fc-snippet__btn', data: {snippet: '4'} do %>
-    <%= image_tag 'fc-snippet-three.jpg', class: 'fc-snippet__image' %>
+    <%= image_tag 'fc-snippet-two.jpg', class: 'fc-snippet__image' %>
+    <span class="fc-snippet__caption">
+      <%= t('admin.actions.featured_content.snippet.list_two') %>
+    </span>
   <% end %>
 
   <%= link_to '#', class: 'fc-snippet__btn', data: {snippet: '5'} do %>
-    <%= image_tag 'fc-snippet-two.jpg', class: 'fc-snippet__image' %>
+    <%= image_tag 'fc-snippet-three.jpg', class: 'fc-snippet__image' %>
+    <span class="fc-snippet__caption">
+      <%= t('admin.actions.featured_content.snippet.list_three') %>
+    </span>
+  <% end %>
+
+  <%= link_to '#', class: 'fc-snippet__btn', data: {snippet: '6'} do %>
+    <%= image_tag 'fc-snippet-four.jpg', class: 'fc-snippet__image' %>
+    <span class="fc-snippet__caption">
+      <%= t('admin.actions.featured_content.snippet.list_four') %>
+    </span>
   <% end %>
 </div>
 
 <%= simple_form_for rails_admin.featured_content_url(@abstract_model.to_param, id: @object.id), html: { class: 'fc-form' }, remote: false do |f| %>
   <div class="fc-controls">
-    <%= f.button :submit, "Salvar", name: 'save', class: 'btn btn-block btn-primary' %>
+    <%= f.button :submit, "Salvar", name: 'save', class: 'btn btn-block btn-primary btn-right' %>
     <% if @object.status %>
-      <%= f.button :submit, "Despublicar", name: 'unpublish', class: 'btn btn-block btn-danger' %>
+      <%= f.button :submit, "Despublicar", name: 'unpublish', class: 'btn btn-block btn-danger btn-left' %>
     <% else %>
-      <%= f.button :submit, "Publicar", name: 'publish', class: 'btn btn-block btn-success' %>
+      <%= f.button :submit, "Publicar", name: 'publish', class: 'btn btn-block btn-success btn-left' %>
     <% end %>
   </div>
 

data/config/initializers/assets.rb

@@ -3,5 +3,6 @@ Rails.application.config.assets.precompile += %w( fc-image-default.jpg )
 Rails.application.config.assets.precompile += %w( fc-snippet-highlight.jpg )
 Rails.application.config.assets.precompile += %w( fc-snippet-slide.jpg )
 Rails.application.config.assets.precompile += %w( fc-snippet-text.jpg )
-Rails.application.config.assets.precompile += %w( fc-snippet-three.jpg )
 Rails.application.config.assets.precompile += %w( fc-snippet-two.jpg )
+Rails.application.config.assets.precompile += %w( fc-snippet-three.jpg )
+Rails.application.config.assets.precompile += %w( fc-snippet-four.jpg )

data/config/locales/featured_content.en.yml

@@ -15,3 +15,10 @@ en:
           save: "Save"
           publish: "Publish"
           unpublish: 'Unpublish'
+        snippet:
+          targe: "Targe"
+          title_large: "Title large"
+          slide: "Slide"
+          list_two: "List with two"
+          list_three: "List with three"
+          list_four: "List with four"

data/config/locales/featured_content.pt-BR.yml

@@ -15,3 +15,10 @@ pt-BR:
           save: "Salvar"
           publish: "Publicar"
           unpublish: 'Despublicar'
+        snippet:
+          targe: "Tarja"
+          title_large: "Título grande"
+          slide: "Slide"
+          list_two: "Lista com duas"
+          list_three: "Lista com três"
+          list_four: "Lista com quatro"

data/lib/rails_admin_featured_content/version.rb

@@ -1,3 +1,3 @@
 module RailsAdminFeaturedContent
-  VERSION = "1.0.4"
+  VERSION = "1.0.5".freeze
 end