redución de tamaño de switches filtros recetario y reestructuración para ocupar…

redución de tamaño de switches filtros recetario y reestructuración para ocupar menos. añadida animación.

fuel/app/views/recetario/filters.twig

@@ -19,22 +19,23 @@
                 {% for group in groups_filters %}
 
                     {# ETIQUETA DEL GRUPO #}
-                    <label style="background-color: gainsboro; width: 100%"> {{ group.name }} </label>
-
+                    <div class="bg-color-other p10">
+                         <span class="whitecolor"> {{ group.name }} </span>
+                    </div>
                     <div class="row mt20">
                     {% for option in group.options %}
-                        <div class="col-md-3">
+                        <div class="col-xs-4 col-sm-2">
                             <div class="form-group text-center">
-                                <label class="switch" for="switch_filter_{{ option.id }}">
+                                <label class="switch-small" for="switch_filter_{{ option.id }}">
                                     <input type="checkbox"
                                            {% if group.id == 1 %} name="flags_or[]" {% else %} name="flags[]"{% endif %}
                                            id="switch_filter_{{ option.id }}"
                                            value="{{ option.id }}"
                                            {% if option.id in criterio_options %} checked {% endif %}
                                     />
-                                    <div class="slider round"></div>
+                                    <div class="slider slider-small round"></div>
                                 </label>
-                                <p>{{ option.name }}</p>
+                                <p class="small-text">{{ option.name }}</p>
                             </div>
                         </div>
                     {% endfor %}

public/assets/css/custom.css

@@ -181,6 +181,28 @@ input:checked + .slider:before {
     margin-top:10px;
 }
 
+/*switches small para filters recetario*/
+.switch-small {
+    display: inline-block;
+    height: 20px;
+    position: relative;
+    width: 50px;
+}
+
+.switch-small input {
+    display:none;
+}
+
+.slider-small:before {
+    background-color: #fff;
+    bottom: 3px;
+    content: "";
+    height: 16px;
+    left: 4px;
+    position: absolute;
+    transition: .4s;
+    width: 16px;
+}
 /*END TOGGLE SWITCHES STYLE
 */
 
@@ -418,7 +440,10 @@ a:focus {
 .pointer:hover{
     opacity:0.7;
 }
-
+.small-text{
+    font-size:0.7em;
+    text-transform: lowercase;
+}
 /*****************************************************************************/
 /**********************************CHECKBOX Y RADIOBUTTON CUSTOM*****************/
 /***************************************************************************************/

public/assets/js/recetario/index.js

@@ -4,11 +4,13 @@ $( document ).ready(function() {
     $( "#btn-show-filter-recetario" ).click(function() {
         //cerrar filtros
         if(show_filter==true){
-            $("#content-filter-recetario").addClass("hidden");
+            $("#content-filter-recetario").fadeOut("slow");
+            // $("#content-filter-recetario").addClass("hidden");
             $("#arrow-filters").css('transform', 'rotate(0deg)');
             show_filter=false
         // abrir filtros
         }else{
+            $("#content-filter-recetario").fadeIn("slow");
             $("#content-filter-recetario").removeClass("hidden");
             $("#arrow-filters").css('transform', 'rotate(180deg)');
             show_filter=true;