Commit ea7cba02 authored by Alexandre's avatar Alexandre

feature: map embed #251

parent 13a246d4
......@@ -18,6 +18,7 @@ Using Risefor.org, citizens can gather around a common topic of interest and adv
## Update CSS
npm install -g sass
sass --watch united4earth/static/scss/index.scss united4earth/static/css/united4earth.css
sass --watch united4earth/static/scss/risefor-map.scss united4earth/static/css/risefor-map.css
## Launch server
source env/bin/activate # optional venv
......
......@@ -10,6 +10,7 @@ ssh u4e@ssh-u4e.happy-dev.fr << EOF
python manage.py migrate
sass united4earth/static/scss/index.scss united4earth/static/css/united4earth.css
sass united4earth/static/scss/risefor-map.scss united4earth/static/css/risefor-map.css
python manage.py collectstatic --noinput
exit
EOF
......
import {
SIBTemplateElement,
Helpers
} from "https://cdn.happy-dev.fr/sib-core/src/index.js";
import SIBMap from "https://cdn.happy-dev.fr/sib-core/src/elements/sib-map.js";
Helpers.importCSS('https://u4e.happy-dev.fr/static/css/risefor-map.css');
export default class RiseForMap extends SIBTemplateElement {
constructor() {
super();
this.uniqID = this.parentNode.id;
}
static get propsDefinition() {
return {
dataSrc: "data-src",
rangeThemes: "range-themes",
detailRoute: "detail-route",
createRoute: "create-route",
};
}
template({ dataSrc, rangeThemes, detailRoute, createRoute }) {
return `
<sib-map
data-src="${dataSrc}"
search-fields="header, postcode, theme, create"
search-label-header="Filtrer les actions"
search-label-postcode="Votre code postal"
search-label-theme="Thème"
search-widget-header="sib-form-label"
search-widget-postcode="sib-form-placeholder-text"
search-widget-theme="sib-form-placeholder-dropdown"
search-widget-create="rfm-display-create"
search-range-theme="${rangeThemes}"
next="action-preview-${this.uniqID}"
></sib-map>
<div id="map-${this.uniqID}" hidden></div>
<div id="action-preview-${this.uniqID}" hidden>
<sib-display
bind-resources
data-fields="theme.photo, name, description, date-and-location, cta, close"
set-date-and-location="city"
widget-theme.photo="sib-display-img"
label-cta="Je participe"
label-close="🞩"
action-cta="${this.detailRoute}"
action-close="map-${this.uniqID}"
></sib-display>
</div>
<sib-widget name="sib-form-label">
<template>
<div>\$\{label\}</div>
</template>
</sib-widget>
<sib-widget name="rfm-display-create">
<template>
<sib-ac-checker permission="acl:Append" data-src="${dataSrc}">
<sib-link next="${createRoute}">Créer une action</sib-link>
</sib-ac-checker>
</template>
</sib-widget>
<sib-router default-route="map-${this.uniqID}">
<sib-route name="map-${this.uniqID}" hidden></sib-route>
<sib-route name="action-preview-${this.uniqID}" use-id hidden></sib-route>
</sib-router>
`;
}
}
customElements.define("risefor-map", RiseForMap);
@import "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css";
@import "src/variables";
@import "src/mixins";
/*
Breaking points values for media query :
max-width = 575px --> smartphone
max-width = 767px --> tablet
max-width = 991px --> desktop
*/
sib-map {
display: flex;
flex-direction: row-reverse;
max-width: 1024px;
height: 600px;
margin: auto;
margin-bottom: 4rem;
padding: none;
background: $primary-blue;
@extend %title-typo;
color: white;
@media only screen and (max-width: 991px) {
flex-direction: column;
padding: 1rem 1rem 0 1rem;
}
sib-form {
padding: 0 1rem;
max-width: 21rem;
@media only screen and (max-width: 991px) {
display: inline-grid;
margin: 0 2rem;
}
@media only screen and (max-width: 575px) {
margin: 0 1rem;
}
sib-form-label[name="header"] div {
margin: 2rem 0;
font-size: 1.2rem;
@media only screen and (max-width: 991px) {
margin: 0 0 1rem 0;
}
}
input[name="postcode"],
select[name="theme"] {
width: 18.5rem;
margin-bottom: 3rem;
border: none;
background: $primary-blue;
@extend %title-typo;
color: white;
font-size: 2rem;
@media only screen and (max-width: 991px) {
margin-bottom: 1rem;
}
@media only screen and (max-width: 575px) {
width: 15rem;
}
}
input[name="postcode"] {
border-bottom: 0.8rem inset $secondary-blue;
@media only screen and (max-width: 991px) {
margin-right: 4rem;
}
@media only screen and (max-width: 575px) {
border-width: 0.6rem;
font-size: 1.6rem;
}
}
select[name="theme"] {
margin-bottom: 300px;
border-bottom: 0.4rem inset white;
font-size: 1.4rem;
opacity: 0.6;
@media only screen and (max-width: 991px) {
margin-bottom: 2rem;
}
}
select[name="theme"] option {
background: rgba(255, 255, 255, 0.3);
}
rfm-display-create sib-link {
@extend %blue-button;
display: block;
width: 80%;
box-shadow: 0.2rem 0.2rem 0.2rem black;
color: $primary-blue;
font-size: 1.4rem;
text-align: center;
cursor: pointer;
@media only screen and (max-width: 991px) {
width: 18.5rem;
margin-bottom: 2rem;
}
@media only screen and (max-width: 575px) {
width: 15rem;
font-size: 1.3rem;
}
}
}
div.leaflet-container {
width: calc(100% - 21rem);
height: calc(100% - 1.5rem) !important;
@media only screen and (max-width: 991px) {
width: calc(100% - 6rem) !important;
margin: 0 3rem 2rem 3rem;
}
@media only screen and (max-width: 575px) {
width: calc(100% - 4rem) !important;
margin: 0 2rem 2rem 2rem;
}
}
}
/* Action preview frame
-------------------- */
risefor-map {
display: block;
position: relative;
#action-preview-,
#action-preview-la-carte {
> sib-display {
display: block;
position: absolute;
top: 7rem;
left: calc(50% - 140px);
z-index: 1000;
width: 240px;
box-shadow: 0 0 8px $secondary-blue;
background: white;
@media only screen and (max-width: 991px) {
top: 23rem;
}
> div {
width: 100%;
height: 25rem;
rfm-display-status div {
position: relative;
height: 1.6rem;
padding: 0.2rem 1rem;
background: $primary-blue;
color: white;
}
rfm-display-status div.open-status {
background: $secondary-blue;
}
rfm-display-status div.closed-status {
background: $cta-red;
}
rfm-display-img {
position: relative;
top: 0;
width: 100%;
img[name="theme.photo"] {
width: 100%;
height: 10.4rem;
object-fit: cover;
}
}
sib-display-value[name="name"] {
display: block;
margin: 0.5rem 0.8rem;
height: 3.2rem;
@extend %title-typo;
font-size: 1.4rem;
@extend %over-text;
}
sib-display-value[name="description"] {
display: block;
height: 2.3rem;
margin: 0.5rem 0.8rem;
@extend %over-text;
}
div[name="date-and-location"] {
margin: 0.5rem 0.8rem 2rem 0.8rem;
color: $secondary-blue;
text-transform: uppercase;
@extend %over-text;
rfm-display-date[name="date"] {
margin-right: 2rem;
}
}
sib-action[name="cta"] {
@extend %blue-button;
margin: 0.8rem;
font-weight: 700;
}
sib-action[name="close"] {
display: block;
position: absolute;
top: 2px;
right: 8px;
color: white;
font-size: 1.2rem;
font-weight: 700;
cursor: pointer;
}
}
}
}
}
/* ===============================================
This file contains classes (to extend) and mixins.
Properties are ordered in alphabetical order.
================================================== */
@mixin sticky {
position: -webkit-sticky;
position: sticky;
}
/*
Breaking points values for media query :
max-width = 575px --> smartphone
max-width = 767px --> tablet
max-width = 991px --> desktop
*/
/* Global classes
-------------- */
%block-padding {
max-width: 1024px;
margin: auto;
padding: 1rem 3rem;
@media only screen and (max-width: 991px) {
padding: 1rem 2rem;
}
@media only screen and (max-width: 575px) {
padding: 1rem;
}
}
%over-text {
overflow: hidden;
text-overflow: "...";
}
/* Typo classes (from Style Guide)
------------------------------ */
/*
'font-weight' values :
400 --> regular
700 --> bold
800 --> extrabold
*/
%title-typo {
color: $primary-blue;
font-family: $font-stack-1;
font-weight: 800;
}
%text-typo {
color: $primary-blue;
font-family: $font-stack-1;
font-weight: 400;
}
%note-typo {
color: $secondary-blue;
font-family: $font-stack-2;
font-weight: 400;
}
%note-typo-bold {
color: $secondary-blue;
font-family: $font-stack-2;
font-weight: 700;
}
/* Components classes : buttons, ...
--------------------------------- */
%cta-button {
padding: 1rem 3rem;
border: none;
border-radius: 0.3rem;
box-shadow: 0.2rem 0.2rem 0.2rem $dark-grey;
background: $cta-red;
@extend %title-typo;
font-size: 1.2rem;
cursor: pointer;
}
%blue-button {
padding: 0.8rem 1.5rem;
border: none;
border-radius: 0.3rem;
box-shadow: 0.2rem 0.2rem 0.2rem $light-grey;
background: $secondary-blue;
color: white;
font-size: 1rem;
}
%small-blue-button {
margin: 0.2rem 1rem;
padding: 0 0.6rem;
border: none;
outline: none;
background: $secondary-blue;
color: white;
font-size: 1.4rem;
}
%more-info-btn {
@extend %cta-button;
display: block;
width: 20rem;
margin: auto;
text-align: center;
text-decoration: none;
}
%actions-list-nav {
// Pagination arrow buttons
font-size: 1.4rem;
text-align: center;
button {
@extend %blue-button;
margin: 0.5rem;
cursor: pointer;
}
button[disabled=""] {
background: $light-grey;
cursor: auto;
}
}
......@@ -4,6 +4,17 @@ $gray-300:*/
$green-light: #83D0B5;
$green-medium: #65C3A9;
$green-dark: #1B8F63;
$primary-blue: #240041;
$secondary-blue: #55b8df;
$cta-red: #d41b3a; // 'cta' for Call to Action
$bonus-green: #19ffdf;
$light-grey: #ddd; // < DEBUG VALUE | REAL VALUE > #e6e6e6;
$dark-grey: #666666;
/* Fonts (from Style Guide)
----------------------- */
$font-stack-1: "Poppins", Tahoma, sans-serif; // titles and regular text
$font-stack-2: "Roboto", Helvetica, sans-serif; // notes
@mixin green-button {
padding: 10px;
......
......@@ -10,6 +10,7 @@
<nav id="main-menu">
<sib-route name="mes-actions">Mes groupes</sib-route>
<sib-route name="agir">Groupes d'action</sib-route>
<sib-route name="la-carte">Carte</sib-route>
<sib-route name="nos-elus">Nos élus</sib-route>
<nav id="account-menu">
<ul>
......
<div id="la-carte" hidden>
<h1>Carte des actions<br/><span class="lined-words">Agissez avec des citoyen.ne.s autour de vous</span></h1>
<risefor-map
data-src="{{request.scheme}}://{{ request.META.HTTP_HOST }}/api/actiongroups/"
range-themes="{{request.scheme}}://{{ request.META.HTTP_HOST }}/api/themes/"
detail-route="agir"
create-route="groupes-action-add"
></risefor-map>
<script type="module">
document.querySelector("#header sib-router").addEventListener("navigate", (e) => {
if (e.detail.route == "la-carte") {
document.querySelector("#la-carte sib-map").reset();
}
});
</script>
</div>
......@@ -7,12 +7,13 @@
{% endblock %}
{% block scripts %}
<script type="module" src="https://unpkg.com/@startinblox/core@0.7"></script>
<script type="module" src="https://cdn.happy-dev.fr/sib-core/src/index.js"></script>
<script type="module" src="https://unpkg.com/@startinblox/router@0.7"></script>
<script type="module" src="https://unpkg.com/@startinblox/component-conversation@0.2"></script>
<script type="module" src="https://cdn.happy-dev.fr/sib-conversation/sib-conversation.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/alexcorvi/anchorme.js/gh-pages/dist-browser/anchorme.js"></script>
<!--<script type="module" src="http://127.0.0.1/sib-core/src/index.js"></script>-->
<!--<script type="module" src="http://127.0.0.1/sib-conversation/sib-conversation.js"></script>-->
<script type="module" src="{% static 'js/risefor-map.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>
<script src="{% static 'js/moment-with-locales.min.js' %}"></script>
<script>moment.locale("fr")</script>
......@@ -33,6 +34,7 @@
{% include "data_manager/profile.html" %}
{% include "data_manager/home.html" %}
{% include "data_manager/action-groups.html" %}
{% include "data_manager/map.html" %}
{% include "data_manager/mes-actions.html" %}
{% include "data_manager/representatives.html" %}
{% include "data_manager/action-group-forms-script.html" %}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment