templates/templates/models/stats-page.html.twig line 1

Open in your IDE?
  1. {% extends "layouts/master.html.twig" %}
  3. {% block bodyClass %}tpl-stats{% endblock %}
  5. {% block siteHeader %}
  6.     {% include 'organisms/site-header.html.twig' %}
  7. {% endblock %}
  9. {% block pageHeader %}
  10.     {% include 'molecules/page-header.html.twig' with {
  11.         title: 'USC en cifras'
  12.     } %}
  13. {% endblock %}
  15. {% block pageContent %}
  16.     <div class="row">
  17.         <div class="col-lg-6">
  18.             <div class="at-lead-text">
  19.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur a tortor. Vestibulum ac convallis lectus. Proin in nibh imperdiet, iaculis dui in, aliquet augue.</p>
  20.             </div>
  21.         </div>
  22.     </div>
  24.     <section class="org-tier">
  25.         <div class="tier-header">
  26.             <h2 class="tier-title">Datos numéricos destacados</h2>
  27.         </div>
  28.         <div class="tier-content">
  29.             <div class="row">
  30.                 {% for i in 0..7 %}
  31.                     <div class="col-md-6 col-lg-3">
  32.                         {% include 'molecules/metrics/m.html.twig' %}
  33.                     </div>
  34.                 {% endfor %}
  35.             </div>
  36.         </div>
  37.     </section>
  39.     <section class="org-tier">
  40.         <div class="tier-header">
  41.             <h2 class="tier-title">Datos menos destacados</h2>
  42.         </div>
  43.         <div class="tier-content">
  44.             <div class="row">
  45.                 {% for i in 0..11 %}
  46.                     <div class="col-md-6 col-lg-3">
  47.                         {% include 'molecules/metrics/s.html.twig' %}
  48.                     </div>
  49.                 {% endfor %}
  50.             </div>
  51.         </div>
  52.     </section>
  54.     <section class="org-tier">
  55.         <div class="tier-header">
  56.             <h2 class="tier-title">Gráficas a todo o ancho</h2>
  57.         </div>
  58.         <div class="tier-content">
  59.             <div class="row">
  60.                 {% for i in 0..2 %}
  61.                     <div class="col-md-6 col-lg-3">
  62.                         {% include 'molecules/metrics/chart-doughnut.html.twig' %}
  63.                     </div>
  64.                 {% endfor %}
  65.                 <div class="col-md-6 col-lg-3">
  66.                     <div class="ml-chart-doughnut">
  67.                         <h3 class="at-title">
  68.                             <a href="" class="chart-link">Título do dato</a>
  69.                         </h3>
  70.                         <div class="chart-canvas-wrapper">
  71.                             <usc-chart-doughnut
  72.                                     :chart-data="[11, 4, 11, 2]"
  73.                                     :chart-data-labels="['Institutos de Investigación', 'Centros Singulares de Investigación', 'Centros Propios de Investigación', 'Centros Mixtos de Investigación']"
  74.                                     :chart-data-colors="['#87a9c1', '#e1f4f1', '#000066', '#999999']" />
  75.                         </div>
  76.                     </div>
  77.                 </div>
  78.             </div>
  79.         </div>
  80.     </section>
  82.     <div class="row">
  83.         <div class="col-md-9">
  84.             <section class="org-tier">
  85.                 <div class="tier-header">
  86.                     <h2 class="tier-title">Gráficas a 3/4</h2>
  87.                 </div>
  88.                 <div class="tier-content">
  89.                     <div class="row">
  90.                         {% for i in 0..2 %}
  91.                             <div class="col-md-4">
  92.                                 {% include 'molecules/metrics/chart-doughnut.html.twig' %}
  93.                             </div>
  94.                         {% endfor %}
  95.                     </div>
  96.                 </div>
  97.             </section>
  98.         </div>
  99.         <div class="col-md-3">
  100.             <section class="org-tier">
  101.                 <div class="tier-header">
  102.                     <h2 class="tier-title">Gráficas a 1/4</h2>
  103.                 </div>
  104.                 <div class="tier-content">
  105.                     <div class="row">
  106.                         <div class="col-12">
  107.                             {% include 'molecules/metrics/chart-doughnut.html.twig' %}
  108.                         </div>
  109.                     </div>
  110.                 </div>
  111.             </section>
  112.         </div>
  113.     </div>
  115.     <div class="row">
  116.         <div class="col-md-6">
  117.             <section class="org-tier">
  118.                 <div class="tier-header">
  119.                     <h2 class="tier-title">Gráficas a 1/2</h2>
  120.                 </div>
  121.                 <div class="tier-content">
  122.                     <div class="row">
  123.                         {% for i in 0..1 %}
  124.                             <div class="col-md-6">
  125.                                 {% include 'molecules/metrics/chart-doughnut.html.twig' %}
  126.                             </div>
  127.                         {% endfor %}
  128.                     </div>
  129.                 </div>
  130.             </section>
  131.         </div>
  132.         <div class="col-md-6">
  133.             <section class="org-tier">
  134.                 <div class="tier-header">
  135.                     <h2 class="tier-title">Gráficas a 1/2</h2>
  136.                 </div>
  137.                 <div class="tier-content">
  138.                     <div class="row">
  139.                         {% for i in 0..1 %}
  140.                             <div class="col-md-6">
  141.                                 {% include 'molecules/metrics/chart-doughnut.html.twig' %}
  142.                             </div>
  143.                         {% endfor %}
  144.                     </div>
  145.                 </div>
  146.             </section>
  147.         </div>
  148.     </div>
  149. {% endblock %}
  151. {% block siteFooter %}
  152.     {% include 'organisms/site-footer.html.twig' %}
  153. {% endblock %}