Feature/impact discover alpha (#277)

* restore a early die if misconfiguration

* change projects to be shown in map when a matcher is selected to use node configuration if available

* fix project filters in discover and use of inner joins in project get list function

* Create impact discover layout

* Test msg sass and js

* first steps for layout

* add filters js

* add ods icons behaviour

* fix grid

* add infinite scroll

* add ods images

* add icons

* fix desktop filters toggle

* move html to template

* add tab background images

* add home values module

* fix mobile layout for values module in home

* differentiate tabs backgrounds and fix mobile issues

* add class to tint images

* add home images

* support for short titles at project slider

* move lateral border in mobile to bottom

* fix layout to show footprint link at last block in mobile

* add real images of the real projects for impact discover and home values modules

* add last project home values images for testing

* add padding bottom to impact-discover

* update package-lock.json

* restore HTML & CSS

* delete comment

* Revert "update package-lock.json"

This reverts commit 5ae0c2d.

* change use of footprint and sdgs assets from png to svg

* create partials for impact discover three views

* rename all sdg assets from ods to sdg

* add copies to impact_discover

* create new partials to use in impact discover project list

* rework impact-discover to use the three views (mosaic, list projects and map)

* fix small bug when the map pops in, so that it is correctly centered when adding projects

* add new mapAction to ImpactDiscoverController to separate the three views in three functions

* Fix user leave exceptions

* add project name to project translate overview

* remove comment on sql project name selects

* fix on docker-settings to be used on testsgst

* rework impact discover views to have three endpoints

* add channel filter to ImpactDiscover and actions to ChannelController

Co-authored-by: Ivan Vergés <ivan@platoniq.net>
Co-authored-by: Javier <javicarrillo83@gmail.com>
Co-authored-by: Jordi Galobart <github@galu.cat>

Resources/templates/responsive/home/index.php

@@ -33,6 +33,8 @@
 
     <?= $this->insert('home/partials/projects') ?>
 
+    <?= $this->insert('home/partials/values') ?>
+
     <?= $this->insertif('home/partials/call_to_action') ?>
 
     <?= $this->insertif('home/partials/advantages') ?>

Resources/templates/responsive/home/partials/values.php

@@ -0,0 +1,192 @@
+<div class="fluid-container data-container goteo-values">
+    <div class="container">
+        <div><h1 class="title text-center">Valores de Goteo</h1></div>
+        <div class="text-center footprint-tabs">
+            <ul>
+                <li><a href="" data-footprint="eco">Eco</a></li>
+                <li><a href="" data-footprint="soc">Soc</a></li>
+                <li><a href="" data-footprint="dem">Dem</a></li>
+            </ul>
+        </div>
+        <div class="row" id="goteo-values-eco">
+            <div class="col footprint-briefing">
+                <img src="assets/img/footprint/1.svg" heigh="70" width="70" alt="Huella ECO" class="footprint" />
+                <p><span class="footprint-label">Huella ecológica</span></p>
+                <h2>Cómo dejar una mejor huella en el planeta</h2>
+                <p>El impacto ambiental generado por la demanda humana hace de los recursos existentes en los ecosistemas del planeta se debiliten. Aquí apoyamos iniciativas de preservación de la capacidad ecológica de la Tierra de regenerar sus recursos</p>
+                <h3>Objetivos de desarrollo sostenible relacionados:</h3>
+                <p>Haz click para saber más:</p>
+                <ul>
+                    <li><a href=""><img src="assets/img/ods/ods7.svg" width="75" height="75" alt="ODS"/></a></li>
+                    <li><a href=""><img src="assets/img/ods/ods12.svg" width="75" height="75" alt="ODS"/></a></li>
+                    <li><a href=""><img src="assets/img/ods/ods13.svg" width="75" height="75" alt="ODS"/></a></li>
+                    <li><a href=""><img src="assets/img/ods/ods14.svg" width="75" height="75" alt="ODS"/></a></li>
+                    <li><a href=""><img src="assets/img/ods/ods15.svg" width="75" height="75" alt="ODS"/></a></li>
+                </ul>
+            </div>
+            <div class="col footprint-info">
+                <div class="slider slider-footprint-data">
+                    <div class="">
+                        <img src="https://data.goteo.org/165x240c/cambio-climatico-1.jpg">
+                        <h2>Datos huella ecológica</h2>
+                        <h3><span>2,8</span> Planetas</h3>
+                        <p>Serían necesarios si todo el mundo consumiera como un ciudadano medio de la UE.</p>
+                    </div>
+                    <div class="">
+                        <img src="https://data.goteo.org/165x240c/captura-de-pantalla-2020-09-23-a-les-8.10.40.png">
+                        <h2>Datos huella ecológica</h2>
+                        <h3><span>2,8</span> Planetas</h3>
+                        <p>Serían necesarios si todo el mundo consumiera como un ciudadano medio de la UE.</p>
+                    </div>
+                    <div class="">
+                        <img src="https://data.goteo.org/165x240c/mrlr1gd-2.jpg">
+                        <h2>Datos huella ecológica</h2>
+                        <h3><span>2,8</span> Planetas</h3>
+                        <p>Serían necesarios si todo el mundo consumiera como un ciudadano medio de la UE.</p>
+                    </div>
+                </div>
+                <div class="slider slider-footprint-projects">
+                    <div class="footprint-project">
+                        <img src="http://data.goteo.org/7000x0/img-20201118-111420.jpg" class="bg-project eco">
+                        <div class="project-footprint">
+                            <img src="assets/img/footprint/1.svg" heigh="70" width="70" alt="Huella ECO" class="footprint" />
+                        </div>
+                        <h2>Construïm l'Espora llibreria i espai cooperatiu a l'H</h2>
+                        <p>Por: L'Espora</p>
+                    </div>
+                    <div class="footprint-project">
+                        <img src="//data.goteo.org/7000x0/banner750x422-lazona.jpg" class="bg-project eco">
+                        <div class="project-footprint">
+                            <img src="assets/img/1.svg" heigh="70" width="70" alt="Huella ECO" class="footprint" />
+                        </div>
+                        <h2>La Zona, un mercat digital amb valors</h2>
+                        <p>Por: La Zona</p>
+                    </div>
+                </div>
+            </div>
+            <div class="footprint-action">
+                <a href="">Ver proyectos de huella ecológica <span class="icon glyphicon glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>
+            </div>
+        </div>
+        <div class="row" id="goteo-values-soc">
+            <div class="col footprint-briefing">
+                <img src="assets/img/footprint/1.svg" heigh="70" width="70" alt="Huella SOC" class="footprint" />
+                <p><span class="footprint-label">Huella social</span></p>
+                <h2>Cómo dejar una mejor huella en el planeta</h2>
+                <p>El impacto ambiental generado por la demanda humana hace de los recursos existentes en los ecosistemas del planeta se debiliten. Aquí apoyamos iniciativas de preservación de la capacidad ecológica de la Tierra de regenerar sus recursos</p>
+                <h3>Objetivos de desarrollo sostenible relacionados:</h3>
+                <p>Haz click para saber más:</p>
+                <ul>
+                    <li><a href=""><img src="assets/img/ods/ods7.svg" width="75" height="75" alt="ODS"/></a></li>
+                    <li><a href=""><img src="assets/img/ods/ods12.svg" width="75" height="75" alt="ODS"/></a></li>
+                    <li><a href=""><img src="assets/img/ods/ods13.svg" width="75" height="75" alt="ODS"/></a></li>
+                    <li><a href=""><img src="assets/img/ods/ods14.svg" width="75" height="75" alt="ODS"/></a></li>
+                    <li><a href=""><img src="assets/img/ods/ods15.svg" width="75" height="75" alt="ODS"/></a></li>
+                </ul>
+            </div>
+            <div class="col footprint-info">
+                <div class="slider slider-footprint-data">
+                    <div class="">
+                        <img src="https://data.goteo.org/165x240c/cambio-climatico-1.jpg">
+                        <h2>Datos huella ecológica</h2>
+                        <h3><span>2,8</span> Planetas</h3>
+                        <p>Serían necesarios si todo el mundo consumiera como un ciudadano medio de la UE.</p>
+                    </div>
+                    <div class="">
+                        <img src="https://data.goteo.org/165x240c/captura-de-pantalla-2020-09-23-a-les-8.10.40.png">
+                        <h2>Datos huella ecológica</h2>
+                        <h3><span>2,8</span> Planetas</h3>
+                        <p>Serían necesarios si todo el mundo consumiera como un ciudadano medio de la UE.</p>
+                    </div>
+                    <div class="">
+                        <img src="https://data.goteo.org/165x240c/mrlr1gd-2.jpg">
+                        <h2>Datos huella ecológica</h2>
+                        <h3><span>2,8</span> Planetas</h3>
+                        <p>Serían necesarios si todo el mundo consumiera como un ciudadano medio de la UE.</p>
+                    </div>
+                </div>
+                <div class="slider slider-footprint-projects">
+                    <div class="footprint-project">
+                        <img src="http://data.goteo.org/7000x0/img-20201118-111420.jpg" class="bg-project soc">
+                        <div class="project-footprint">
+                            <img src="assets/img/footprint/2.svg" heigh="70" width="70" alt="Huella SOC" class="footprint" />
+                        </div>
+                        <h2>Construïm l'Espora llibreria i espai cooperatiu a l'H</h2>
+                        <p>Por: L'Espora</p>
+                    </div>
+                    <div class="footprint-project">
+                        <img src="//data.goteo.org/7000x0/banner750x422-lazona.jpg" class="bg-project soc">
+                        <div class="project-footprint">
+                            <img src="assets/img/footprint/2.svg" heigh="70" width="70" alt="Huella SOC" class="footprint" />
+                        </div>
+                        <h2>La Zona, un mercat digital amb valors</h2>
+                        <p>Por: La Zona</p>
+                    </div>
+                </div>
+            </div>
+            <div class="footprint-action">
+                <a href="">Ver proyectos de huella social <span class="icon glyphicon glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>
+            </div>
+        </div>
+        <div class="row" id="goteo-values-dem">
+            <div class="col footprint-briefing">
+                <img src="assets/img/footprint/1.svg" heigh="70" width="70" alt="Huella DEM" class="footprint" />
+                <p><span class="footprint-label">Huella dem</span></p>
+                <h2>Cómo dejar una mejor huella en el planeta</h2>
+                <p>El impacto ambiental generado por la demanda humana hace de los recursos existentes en los ecosistemas del planeta se debiliten. Aquí apoyamos iniciativas de preservación de la capacidad ecológica de la Tierra de regenerar sus recursos</p>
+                <h3>Objetivos de desarrollo sostenible relacionados:</h3>
+                <p>Haz click para saber más:</p>
+                <ul>
+                    <li><a href=""><img src="assets/img/ods/ods7.svg" width="75" height="75" alt="ODS"/></a></li>
+                    <li><a href=""><img src="assets/img/ods/ods12.svg" width="75" height="75" alt="ODS"/></a></li>
+                    <li><a href=""><img src="assets/img/ods/ods13.svg" width="75" height="75" alt="ODS"/></a></li>
+                    <li><a href=""><img src="assets/img/ods/ods14.svg" width="75" height="75" alt="ODS"/></a></li>
+                    <li><a href=""><img src="assets/img/ods/ods15.svg" width="75" height="75" alt="ODS"/></a></li>
+                </ul>
+            </div>
+            <div class="col footprint-info">
+                <div class="slider slider-footprint-data">
+                    <div class="">
+                        <img src="https://data.goteo.org/165x240c/cambio-climatico-1.jpg">
+                        <h2>Datos huella ecológica</h2>
+                        <h3><span>2,8</span> Planetas</h3>
+                        <p>Serían necesarios si todo el mundo consumiera como un ciudadano medio de la UE.</p>
+                    </div>
+                    <div class="">
+                        <img src="https://data.goteo.org/165x240c/captura-de-pantalla-2020-09-23-a-les-8.10.40.png">
+                        <h2>Datos huella ecológica</h2>
+                        <h3><span>2,8</span> Planetas</h3>
+                        <p>Serían necesarios si todo el mundo consumiera como un ciudadano medio de la UE.</p>
+                    </div>
+                    <div class="">
+                        <img src="https://data.goteo.org/165x240c/mrlr1gd-2.jpg">
+                        <h2>Datos huella ecológica</h2>
+                        <h3><span>2,8</span> Planetas</h3>
+                        <p>Serían necesarios si todo el mundo consumiera como un ciudadano medio de la UE.</p>
+                    </div>
+                </div>
+                <div class="slider slider-footprint-projects">
+                    <div class="footprint-project">
+                        <img src="http://data.goteo.org/7000x0/img-20201118-111420.jpg" class="bg-project dem">
+                        <div class="project-footprint">
+                            <img src="assets/img/footprint/3.svg" heigh="70" width="70" alt="Huella DEM" class="footprint" />
+                        </div>
+                        <h2>Construïm l'Espora llibreria i espai cooperatiu a l'H</h2>
+                        <p>Por: L'Espora</p>
+                    </div>
+                    <div class="footprint-project">
+                        <img src="//data.goteo.org/7000x0/banner750x422-lazona.jpg" class="bg-project dem">
+                        <div class="project-footprint">
+                            <img src="assets/img/footprint/3.svg" heigh="70" width="70" alt="Huella DEM" class="footprint" />
+                        </div>
+                        <h2>La Zona, un mercat digital amb valors</h2>
+                        <p>Por: La Zona</p>
+                    </div>
+                </div>
+            </div>
+            <div class="footprint-action">
+                <a href="">Ver proyectos de huella dem <span class="icon glyphicon glyphicon glyphicon-menu-right" aria-hidden="true"></span></a>
+            </div>
+        </div>
+    </div>
+</div>

Resources/templates/responsive/impact_discover/index.php

@@ -0,0 +1,15 @@
+<?php $this->layout('impact_discover/layout') ?>
+
+<?php $this->section('impact-discover-content') ?>
+
+<?= $this->insert('impact_discover/partials/filters') ?>
+
+<?= $this->insert('impact_discover/partials/sdg_list', ['sdgSelected' => $this->sdgSelected]) ?>
+
+<?= $this->insert('impact_discover/partials/list_projects') ?>
+
+<div class="spacer-20 spacer-bottom text-center more-projects-button <?= $this->total > count($this->projects) ? '' : ' hidden' ?>">
+    <button class="btn btn-link"><?= $this->text('regular-load-more') ?> &nbsp; &nbsp; <i class="fa fa-chevron-right"></i></button>
+</div>
+
+<?php $this->replace() ?>

Resources/templates/responsive/impact_discover/layout.php

@@ -0,0 +1,33 @@
+<?php
+
+$this->layout('layout', [
+    'bodyClass' => 'impact_discover',
+    'title' => 'Descubre proyectos por ODS y Huella',
+    'meta_description' => $this->text('meta-description-discover')
+    ]);
+
+$this->section('content');
+
+?>
+
+<div class="impact-discover">
+
+    <?= $this->supply('impact-discover-content') ?>
+
+</div>
+
+<?php $this->replace() ?>
+
+
+<?php $this->section('footer') ?>
+    <?= $this->insert('impact_discover/partials/javascript') ?>
+
+    <?php if ($this->view = 'map'): ?>
+        <?= $this->insert('map/partials/javascript'); ?>
+
+        <link rel="stylesheet" type="text/css" href="<?= SRC_URL ?>/assets/vendor/leaflet/dist/leaflet.css"/>
+        <link rel="stylesheet" type="text/css" href="<?= SRC_URL ?>/assets/vendor/leaflet.markercluster/dist/MarkerCluster.css"/>
+        <link rel="stylesheet" type="text/css" href="<?= SRC_URL ?>/assets/vendor/leaflet.markercluster/dist/MarkerCluster.Default.css"/>
+        <link rel="stylesheet" type="text/css" href="<?= SRC_URL ?>/assets/vendor/leaflet.fullscreen/Control.FullScreen.css"/>
+    <?php endif; ?>
+<?php $this->append() ?>

Resources/templates/responsive/impact_discover/list.php

@@ -0,0 +1,15 @@
+<?php $this->layout('impact_discover/layout') ?>
+
+<?php $this->section('impact-discover-content') ?>
+
+<?= $this->insert('impact_discover/partials/filters') ?>
+
+<?= $this->insert('impact_discover/partials/sdg_list') ?>
+
+<?= $this->insertIf('impact_discover/partials/list_projects') ?>
+
+<div class="spacer-20 spacer-bottom text-center more-projects-button <?= $this->total > count($this->projects) ? '' : ' hidden' ?>">
+    <button class="btn btn-link"><?= $this->text('regular-load-more') ?> &nbsp; &nbsp; <i class="fa fa-chevron-right"></i></button>
+</div>
+
+<?php $this->replace() ?>

Resources/templates/responsive/impact_discover/map.php

@@ -0,0 +1,11 @@
+<?php $this->layout('impact_discover/layout') ?>
+
+<?php $this->section('impact-discover-content') ?>
+
+<?= $this->insert('impact_discover/partials/filters') ?>
+
+<?= $this->insert('impact_discover/partials/sdg_list') ?>
+
+<?= $this->insert('impact_discover/partials/map'); ?>
+
+<?php $this->replace() ?>

Resources/templates/responsive/impact_discover/mosaic.php

@@ -0,0 +1,15 @@
+<?php $this->layout('impact_discover/layout') ?>
+
+<?php $this->section('impact-discover-content') ?>
+
+<?= $this->insert('impact_discover/partials/filters') ?>
+
+<?= $this->insert('impact_discover/partials/sdg_list') ?>
+
+<?= $this->insert('impact_discover/partials/mosaic') ?>
+
+<div class="spacer-20 spacer-bottom text-center more-projects-button <?= $this->total > count($this->projects) ? '' : ' hidden' ?>">
+    <button class="btn btn-link"><?= $this->text('regular-load-more') ?> &nbsp; &nbsp; <i class="fa fa-chevron-right"></i></button>
+</div>
+
+<?php $this->replace() ?>

Resources/templates/responsive/impact_discover/partials/filters.php

@@ -0,0 +1,68 @@
+<div class="section impact-discover-filters active">
+  <div class="container">
+      <div class="row">
+        <div class="col-xs-12 col-sm-9" id="filters-mobile">
+          <a href="" class="filter"><img src="./assets/img/icons/funnel.svg" /> FILTRAR</a>
+          <a class="close flip" href="#"><i class="icon icon-close"></i></a>
+        </div>
+        <div class="col-xs-12 col-sm-6 col-md-6" id="filters-footprints">
+          <p><?= $this->t('impact-discover-filter-by-footprints') ?></p>
+          <ul>
+            <li><a href="" data-footprint="all" class="active">Todas</a></li>
+            <?php foreach($this->footprints as $footprint): ?>
+              <li>
+                <a href="" data-footprint="<?= $footprint->id ?>">
+                  <img src="/assets/img/<?= $footprint->getIcon() ?>" alt="<?= $footprint->name ?>">
+                </a>
+              </li>
+            <?php endforeach; ?>
+          </ul>
+        </div>
+        <div class="col-xs-12 col-sm-3" id="filters-sdg-list">
+          <p><?= $this->t('impact-discover-filter-by-sdg') ?></p>
+          <ul>
+            <?php foreach($this->sdgs as $sdg): ?>
+              <li>
+                <input type="checkbox" name="<?= $sdg->name ?>" />
+                <img src="/assets/img/sdg/sdg<?= $sdg->id ?>.svg" alt="<?= $sdg->name ?>"/>
+                <?= $sdg->id . $sdg->name ?>
+              </li>
+            <?php endforeach; ?>
+          </ul>
+          <p>
+            <a href="" id="reset-sdg"><?= $this->t('regular-delete') ?></a>
+            <button><?= $this->t('regular-apply') ?></button>
+          </p>
+        </div>
+        <div class="col-xs-12 col-sm-6 col-md-4 text-center" id="filters-channel">
+          <?php if ($this->selectedChannel) : ?>
+            <select class="form-control" name="channel" disabled>
+              <option value="<?= $this->selectedChannel ?>" selected> <?= $this->channels[$this->selectedChannel] ?> </option>
+            </select>
+          <?php else: ?>
+            <select class="form-control" name="channel" >
+              <option value="" selected disabled hidden><?= $this->t('regular-channel') ?></option>
+
+              <?php foreach($this->channels as $cid => $cname): ?>
+                <option value="<?= $cid ?>"> <?= $cname ?></option>
+              <?php endforeach; ?>
+            </select>
+          <?php endif; ?>
+        </div>
+        <div class="col-xs-12 col-sm-6 col-md-4 text-center" id="filters-sdg-select">
+          <select class="form-control" name="footprints">
+            <option><?= $this->t('impact-discover-filter-by-sdg') ?></option>
+
+            <?php foreach($this->sdgs as $sdg): ?>
+              <option data-footprints="<?= implode(',',array_column($sdg->getFootprints(), 'id'))?>" value="<?= $sdg->id ?>"> <?= $sdg->name ?></option>
+            <?php endforeach; ?>
+          </select>
+        </div>
+        <div class="col-xs-12 col-sm-3 col-md-2 text-right" id="filters-view-as">
+          <a id="activate-mosaic" class="<?= ($this->view == 'mosaic') ? 'active' : '' ?>" href="/impact-discover/mosaic"> <img src="/assets/img/icons/mosaic.svg"> </a>
+          <a id="activate-projects" class="<?= ($this->view == 'list_projects')? 'active' : '' ?>" href="/impact-discover"><img src="/assets/img/icons/lists.svg"></a>
+          <a id="activate-map" class="<?= ($this->view == 'map')? 'active' : '' ?>" href="/impact-discover/map"><img src="/assets/img/icons/map.svg"></a>
+        </div>
+      </div>
+  </div>
+</div>

Resources/templates/responsive/impact_discover/partials/list_project_rows.php

@@ -0,0 +1,6 @@
+<?php
+    $projects = $this->projects;
+?>
+<?= $this->insert('impact_discover/partials/projects_first_row', ['projects' => array_slice($projects, 0, 3)]) ?>
+<?= $this->insert('impact_discover/partials/projects_second_row', ['projects' => array_slice($projects, 3, 3)]) ?>
+<?= $this->insert('impact_discover/partials/projects_third_row', ['projects' => array_slice($projects, 6, 3)]) ?>