diseño a vista lista de consultas y modal añadir consulta nueva

fuel/app/views/consultas/index.twig

@@ -20,9 +20,10 @@
         <div class="pb40">
             {% include 'list.twig' %}
         </div>
-
-
     </div>
+
+    <!--modal add consulta-->
+    {% include 'modal_add_consulta.twig' %}
 {% endblock %}
 
 

fuel/app/views/consultas/list.twig

 
-{#{% for consulta in consultas %}#}
+<div class="container mt-list-menus-saludables" >
+    <!--btn añadir nueva consulta-->
+    <div class="row">
+        <div class="col-xs-6"></div>
+        <div class="col-xs-6">
+            <button  class="btn btn-custom btn-other  text-right" data-toggle="modal" data-target="#modalNewConsulta"><i class="fa fa-plus"></i> Consulta  </button>
+        </div>
+    </div>
 
-    <!--item lista, una consulta estado pendiente-->
+    <!--box con titulos de columnas-->
+    <div class="row bg-color-other whitecolor hidden-xs hidden-sm mt10">
+        <div class="col-xs-10">
+            <div class="col-md-6">
+                <label>Asunto</label>
 
+            </div>
+            <div class="col-md-3">
+                <label>Fecha</label>
 
-<div class="container mt-list-menus-saludables" >
-    {% for i in items %}
-       {# <a href={{ "menussaludables-menu/"~ i.id }}>#}
-            <div class="row item-list-style">
-                <div class="col-xs-10"> Menú {{ i.ds }}</div>
-                <div class="col-xs-2 text-right"><i class="fa fa-angle-right"></i></div>
             </div>
-     {#   </a>#}
-    {% endfor %}
-</div>
-    <div class=" pointer mt10" >
+            <div class="col-md-3">
+                <label>Estado</label>
+
+            </div>
+        </div>
+        <div class="col-xs-2 text-right"></div>
+    </div>
+
+
+   {# {% for i in items %} #}
+
+    <!--item lista, una consulta pendiente-->
+        <div class="pointer " >
             {#   <a href="{{ url('consultas-nutricionista-detalle/update/'~recipe.id) }}">#}
             <div class="row item-list-style">
                 <div class="col-xs-10">
                     <div class="col-md-6">
-                        <label>Asunto</label>
                         <p>Lorem ipsum daet asf adsfasd asfasdf afasdf...</p>
                     </div>
                     <div class="col-md-3">
-                        <label>Fecha</label>
-                        <p>12/04/2019</p>
+                        <p><i class="fa fa-calendar"></i> 12/04/2019</p>
                     </div>
                     <div class="col-md-3">
-                        <label>Estado</label>
-                        <p>Pendiente</p>
+                        <p class="color-lista-compra"><i class="fa fa-clock-o"></i> Pendiente</p>
                     </div>
                 </div>
                 <div class="col-xs-2 text-right"><i class="fa fa-angle-right"></i></div>
             </div>
-
             {# </a>#}
         </div>
 
         <!--item lista, una consulta estado leida-->
-<div class=" pointer mt10" >
+        <div class=" pointer " >
             {#  <a href="{{ url('consultas-nutricionista-detalle/update/'~recipe.id) }}">#}
             <div class="row item-list-style">
                 <div class="col-xs-10">
                     <div class="col-md-6">
-                    <label>Asunto</label>
                         <p>Lorem ipsum daet asf adsfasd asfasdf afasdf...</p>
                     </div>
                     <div class="col-md-3">
-                    <label>Fecha</label>
-                    <p>12/04/2019</p>
+                        <p><i class="fa fa-calendar"></i> 12/04/2019</p>
                     </div>
                     <div class="col-md-3">
-                    <label>Estado</label>
-                    <p>Leída</p>
+                        <p class="color-perfil"><i class="fa fa-check"></i>Leída</p>
                     </div>
                 </div>
                 <div class="col-xs-2 text-right"><i class="fa fa-angle-right"></i></div>
             </div>
 
             {#   </a>#}
-</div>
+        </div>
 
         <!--item lista, una consulta estado respondida-->
-<div class="pointer mt10" >
+        <div class="pointer " >
             {# <a href="{{ url('consultas-nutricionista-detalle/update/'~recipe.id) }}">#}
             <div class="row item-list-style">
                 <div class="col-xs-10">
                     <div class="col-md-6">
-                    <label>Asunto</label>
+
                         <p>Lorem ipsum daet asf adsfasd asfasdf afasdf...</p>
                     </div>
                     <div class="col-md-3">
-                    <label>Fecha</label>
-                    <p>12/04/2019</p>
+                        <p><i class="fa fa-calendar"></i> 12/04/2019</p>
                     </div>
                     <div class="col-md-3">
-                    <label>Estado</label>
-                    <p>Respuesta</p>
+                        <p class="color-menus-saludables"><i class="fa fa-envelope"></i> Respuesta</p>
                     </div>
                 </div>
                 <div class="col-xs-2 text-right"><i class="fa fa-angle-right"></i></div>
             </div>
 
             {# </a>#}
+        </div>
+ {#   {% endfor %} #}
+
+
 </div>
-{#
-{% endfor %}#}
+

fuel/app/views/consultas/modal_add_consulta.twig

+
+<!-- Modal info template -->
+<div class="modal fade" id="modalNewConsulta" tabindex="-1" role="dialog" aria-labelledby="modalProducto">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content ">
+
+            <div class="modal-body">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+
+                <div class="text-center">
+                    <img src="assets/img/consultas/add_consulta.png" class="img-responsive-custom mt40"/>
+                    <h2>AÑADIR CONSULTA</h2>
+                    <p>Puedes enviar una nueva consulta rellenando este formulario</p>
+                </div>
+
+                <div class="content pb40 mt40">
+                    <form>
+                        <label>Asunto</label>
+                         <input type="text" class="form-control" name="subject" id="subject" value=""/>
+
+                        <label>Consulta</label>
+                        <textarea rows="5"  class="form-control" name="subject" id="body" value=""></textarea>
+
+                        <div class="mt20">
+                            <a class="btn btn-custom btn-add-product"><i class="fa fa-plus"></i> AÑADIR</a>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

public/assets/css/custom.css

@@ -65,6 +65,7 @@ body{
 .color-menus-saludables-light {color:#cdde87}
 .color-trivial {color:#b3b3b3;}
 .color-other {color:#000!important;}
+.color-lista-compra {color: #ff7f2a;}
 
 .bg-color-menu-personalizado{background-color:#c966cd; }
 .bg-color-menu-personalizado-light{background-color:#dea1e0; }