https://dev.entrouvert.org/https://dev.entrouvert.org/favicon.ico?15861920342019-09-18T14:27:31ZRedmine Entr’ouvertIntégrations graphiques Publik - Development #33680: styler de la fonctionnalité +1 dans les formulaireshttps://dev.entrouvert.org/issues/33680?journal_id=1919602019-09-18T14:27:31ZSerghei Mihai
<ul><li><strong>Fichier</strong> <a href="/attachments/37389">0001-forms-decorate-nearby-field-33680.patch</a> <a class="icon-only icon-download" title="Télécharger" href="/attachments/download/37389/0001-forms-decorate-nearby-field-33680.patch">0001-forms-decorate-nearby-field-33680.patch</a> ajouté</li><li><strong>Fichier</strong> <a href="/attachments/37390">signalement-lomme.png</a> <a class="icon-only icon-download" title="Télécharger" href="/attachments/download/37390/signalement-lomme.png">signalement-lomme.png</a> ajouté</li><li><strong>Fichier</strong> <a href="/attachments/37392">signalement-montreuil.png</a> <a class="icon-only icon-download" title="Télécharger" href="/attachments/download/37392/signalement-montreuil.png">signalement-montreuil.png</a> ajouté</li><li><strong>Fichier</strong> <a href="/attachments/37391">signalement-nancy.png</a> <a class="icon-only icon-download" title="Télécharger" href="/attachments/download/37391/signalement-nancy.png">signalement-nancy.png</a> ajouté</li><li><strong>Statut</strong> changé de <i>Nouveau</i> à <i>Solution proposée</i></li><li><strong>Patch proposed</strong> changé de <i>Non</i> à <i>Oui</i></li></ul><p>Reprise de la partie Javascript du thème Toodego.<br />Les libellé et le sommaire des demandes voisines seront à poser dans des variables de traitement au début du workflow.</p>
<p>Exemples de quelques rendus.</p> Intégrations graphiques Publik - Development #33680: styler de la fonctionnalité +1 dans les formulaireshttps://dev.entrouvert.org/issues/33680?journal_id=1919752019-09-18T14:48:53ZFrédéric Pétersfpeters@entrouvert.com
<ul></ul><p>Appeler ça map--nearby-list.html, par rapport au nommage dans toodego nearby-list.html, ça ne va pas prendre le pas et casser Toodego ? Aussi le patch s'applique sur un fichier qui existerait déjà avant alors que non ?</p>
<p>Le côté tableau pas aligné est pas terrible. Plutôt qu'imposer des identifiants de champs (problem_title, problem_summary) pourquoi ne pas utiliser le digest, qui propose déjà un endroit pour définir un résumé succinct du contenu ? (ça empêche pas de taper ça dans un {% block whatever %} pour facilement pouvoir être adapté ailleurs.</p>
<p>Ailleurs, sur la généralisation du signalement (<a class="issue tracker-2 status-6 priority-4 priority-default closed" title="Development: sortir qommon/forms/widgets/nearby-list.html de variants/toodego (Rejeté)" href="https://dev.entrouvert.org/issues/33595">#33595</a>), je note « (peut-être?) rendre optionnel l'affichage du "plus1" », perso ça m'irait bien ça impose moins de chose sur le workflow et ça nous évite de trop nous avancer dans ce bricolage.</p>
<p>Dans ce même autre ticket je note à propos du js "vraisemblablement le placer dans le gabarit" mais ce n'est quand même pas terrible à gérer, ça pourrait aller dans un fichier js/whatever et qu'il y ait juste <script src="..."> utilisé ? (oui il y a dedans un {% if user.is_authenticated %} à gérer différemment).</p>
<pre>
&.marker-counter {
background: $button-background;
padding: 5px 10px;
color: white;
</pre>
<p>plutôt utiliser $button-color, pour éviter le blanc sur blanc.</p>
<pre>
background: lighten($primary-color, 10);
</pre>
<p>Le +1 apparait déjà comme un bouton via la classe pk-button, qui va assurer que $button-hover-background soit utilisé, c'est mieux que venir imposer ici une couleur alternative.</p>
<p>Sur les trucs flex, en attendant de peut-être avoir un truc pour gérer ça automatiquement, il faut ajouter les préfixes pour les vieux IE.</p> Intégrations graphiques Publik - Development #33680: styler de la fonctionnalité +1 dans les formulaireshttps://dev.entrouvert.org/issues/33680?journal_id=1925682019-09-22T19:43:12ZSerghei Mihai
<ul><li><strong>Fichier</strong> <a href="/attachments/37494">0001-forms-decorate-nearby-field-33680.patch</a> <a class="icon-only icon-download" title="Télécharger" href="/attachments/download/37494/0001-forms-decorate-nearby-field-33680.patch">0001-forms-decorate-nearby-field-33680.patch</a> ajouté</li></ul><p>Je suis plutôt pour garder le JS inline pour maîtriser le détection d'un utilisateur connecté, ajout du bout d'ajax pour l'action +1 si elle est active.</p> Intégrations graphiques Publik - Development #33680: styler de la fonctionnalité +1 dans les formulaireshttps://dev.entrouvert.org/issues/33680?journal_id=1925692019-09-22T20:03:59ZFrédéric Pétersfpeters@entrouvert.com
<ul></ul><blockquote>
<p>maîtriser le détection d'un utilisateur connecté</p>
</blockquote>
<p>Il y a une classe posée sur <body> qui peut t'assurer ça. (authenticated-user vs anonymous-user).</p> Intégrations graphiques Publik - Development #33680: styler de la fonctionnalité +1 dans les formulaireshttps://dev.entrouvert.org/issues/33680?journal_id=1925702019-09-23T04:26:59ZFrédéric Pétersfpeters@entrouvert.com
<ul></ul><p>(d'ailleurs j'écrivais ça sans regarder mais c'est exactement ce qui est fait dans le code existant côté toodego)</p> Intégrations graphiques Publik - Development #33680: styler de la fonctionnalité +1 dans les formulaireshttps://dev.entrouvert.org/issues/33680?journal_id=1926212019-09-23T08:25:46ZSerghei Mihai
<ul><li><strong>Fichier</strong> <a href="/attachments/37497">0001-forms-decorate-nearby-field-33680.patch</a> <a class="icon-only icon-download" title="Télécharger" href="/attachments/download/37497/0001-forms-decorate-nearby-field-33680.patch">0001-forms-decorate-nearby-field-33680.patch</a> ajouté</li></ul><p>Ok.</p> Intégrations graphiques Publik - Development #33680: styler de la fonctionnalité +1 dans les formulaireshttps://dev.entrouvert.org/issues/33680?journal_id=1937092019-09-28T17:10:27ZFrédéric Pétersfpeters@entrouvert.com
<ul></ul><p>Je posais la question :</p>
<blockquote>
<p>Appeler ça map--nearby-list.html, par rapport au nommage dans toodego nearby-list.html, ça ne va pas prendre le pas et casser Toodego ?</p>
</blockquote>
<p>En l'état, ça casse Toodego mais c'est plutôt à cause des CSS, ce serait chouette d'éviter (et la voie de sortie la plus simple est peut-être d'appeler ça différemment, genre nearby-items.html ?).</p>
<p>J'écrivais aussi :</p>
<blockquote>
<p>Sur les trucs flex, en attendant de peut-être avoir un truc pour gérer ça automatiquement, il faut ajouter les préfixes pour les vieux IE.</p>
</blockquote>
<p>Et c'est encore valable dans div#nearby-list. Aussi on met les propriétés préfixées en premier.</p>
<p><sub>~~</sub></p>
<p>À part ça je ne sais pas comment ça marche chez toi, côté firefox et chromium il ne prend pas le js sans faire ça :</p>
<pre>
-<script type="text/javascript" src="{% static "js/plus1.js" %}" />
+<script type="text/javascript" src="{% static "js/plus1.js" %}"></script>
</pre>
<p>(aussi, le js n'est pas seulement utilisé pour les +1, devrait tout le temps être chargé)</p> Intégrations graphiques Publik - Development #33680: styler de la fonctionnalité +1 dans les formulaireshttps://dev.entrouvert.org/issues/33680?journal_id=1937842019-09-30T07:53:49ZThomas Jundtjund@entrouvert.com
<ul></ul><pre>
-<script type="text/javascript" src="{% static "js/plus1.js" %}"></script>
+<script src="{% static "js/plus1.js" %}"></script>
</pre>
<p>l'attribut type n'est plus utile avec un doctype html5. Et oui la balise doit se fermer.</p> Intégrations graphiques Publik - Development #33680: styler de la fonctionnalité +1 dans les formulaireshttps://dev.entrouvert.org/issues/33680?journal_id=1938032019-09-30T08:28:36ZSerghei Mihai
<ul><li><strong>Fichier</strong> <a href="/attachments/37666">0001-forms-decorate-nearby-field-33680.patch</a> <a class="icon-only icon-download" title="Télécharger" href="/attachments/download/37666/0001-forms-decorate-nearby-field-33680.patch">0001-forms-decorate-nearby-field-33680.patch</a> ajouté</li></ul><p>Etrange effectivement car sans la balise fermante mon firefox chargeait le JS.<br />J'ai rénommé le template en <code>nearby-forms</code> pour plus de clarté.</p>
<p>Préfixes IE pour les flexbox ajoutés.</p> Intégrations graphiques Publik - Development #33680: styler de la fonctionnalité +1 dans les formulaireshttps://dev.entrouvert.org/issues/33680?journal_id=1938332019-09-30T09:22:30ZFrédéric Pétersfpeters@entrouvert.com
<ul></ul><p>Il y a moyen de limiter div.leaflet-div-icon aussi (parce que là, ça casse aussi toodego) ?</p> Intégrations graphiques Publik - Development #33680: styler de la fonctionnalité +1 dans les formulaireshttps://dev.entrouvert.org/issues/33680?journal_id=1938472019-09-30T09:47:15ZThomas Jundtjund@entrouvert.com
<ul></ul><p>JS l 2-3<br /><pre>
function user_is_authenticated() {
- return $('body.authenticated-user').length;
+ return $('body').is('.authenticated-user');
}
</pre></p>
<p>C'est pas plus lisible ? au moins on retourne un booleen et pas un number.</p>
<p>Ou en full JS</p>
<pre>
document.body.classList.contain('.authenticated-user');
</pre> Intégrations graphiques Publik - Development #33680: styler de la fonctionnalité +1 dans les formulaireshttps://dev.entrouvert.org/issues/33680?journal_id=1939452019-09-30T13:00:41ZSerghei Mihai
<ul><li><strong>Fichier</strong> <a href="/attachments/37683">0001-forms-decorate-nearby-field-33680.patch</a> <a class="icon-only icon-download" title="Télécharger" href="/attachments/download/37683/0001-forms-decorate-nearby-field-33680.patch">0001-forms-decorate-nearby-field-33680.patch</a> ajouté</li></ul><p>Avec limitation de la feuille de style aux markers du widget et la suggestion de ThomasJ pour la fonction <code>user_is_authenticated</code>.</p> Intégrations graphiques Publik - Development #33680: styler de la fonctionnalité +1 dans les formulaireshttps://dev.entrouvert.org/issues/33680?journal_id=1940152019-09-30T14:40:33ZThomas Jundtjund@entrouvert.com
<ul></ul><p>Autre petite proposition d'amélioration Js</p>
<pre>
-var $map_widget = $('.qommon-map');
-var map = $map_widget[0].leaflet_map;
+var map = document.querySelector('.qommon-map').leaflet_map;
</pre>
<p>Tu charges un DomElement dans un objet jQuery ($map), pour ensuite chercher un objet de ce même domElement au sein de l'objet jQuery (map), Pour ensuite dans le code réinjecté cet élément dans un nouvel objet jQuery ($(map)). <br />Parfois Js natif est plus simple, non ?</p> Intégrations graphiques Publik - Development #33680: styler de la fonctionnalité +1 dans les formulaireshttps://dev.entrouvert.org/issues/33680?journal_id=1940482019-09-30T16:30:43ZThomas Jundtjund@entrouvert.com
<ul></ul><p>Autres suggestions au niveau HTML:</p>
<p>Un peu plus de sémantique ne fait jamais de mal.</p>
<p>Utiliser une ul > li pour les id="nearby-forms"</p>
<pre>
<ul id="nearvy-forms">
<li …
<li
</pre>
<p>le +1 ne devrait pas être une balise <a> puisqu'il ne mène nul part. La bonne pratique serait d'utiliser <button><br /><pre>
<button type="button" class="plus1 pk-button" …>+1</button>
<a class="plus1 pk-button" href="#" data-plus1-url="{{formdata.api_url}}hooks/plus1/">+1</a>
</pre><br />Et avec un attribut aria-label explicite. "+1" Ne l'est pas assez je pense.</p>
<p>La span comprenant la date devrait afficher la date au sein d'une balise <time><br /><pre>
<span class="problem-datetime">Signalé le <time datetime="{{ formdata.receipt_date|date:"c" }}" >{{ formdata.receipt_date }}</time></span>
</pre></p>
<p>Et enfin (promis après j'arrête)<br />Pour centrer un flex-item unique verticalement et horizontalement, il suffit de lui appliqué un margin:auto</p>
<pre>
div.template-nearby-forms div.leaflet-div-icon {
- padding: 3px;
border-radius: 3px;
display: -ms-flexbox;
display: flex;
- -ms-flex-pack: space-around;
- -ms-justify-content: space-around;
- justify-content: space-around;
a {
- line-height: 1em;
+ line-height: 1;
+ margin: auto;
}
}
</pre> Intégrations graphiques Publik - Development #33680: styler de la fonctionnalité +1 dans les formulaireshttps://dev.entrouvert.org/issues/33680?journal_id=1950522019-10-04T15:29:13ZSerghei Mihai
<ul><li><strong>Fichier</strong> <a href="/attachments/37867">0001-forms-decorate-nearby-field-33680.patch</a> <a class="icon-only icon-download" title="Télécharger" href="/attachments/download/37867/0001-forms-decorate-nearby-field-33680.patch">0001-forms-decorate-nearby-field-33680.patch</a> ajouté</li></ul><p>Thomas Jund a écrit :</p>
<blockquote>
<p>Autres suggestions au niveau HTML:</p>
<p>Un peu plus de sémantique ne fait jamais de mal.</p>
<p>Utiliser une ul > li pour les id="nearby-forms"</p>
</blockquote>
<p>Ok.</p>
<blockquote>
<p>le +1 ne devrait pas être une balise <a> puisqu'il ne mène nul part. La bonne pratique serait d'utiliser <button></p>
</blockquote>
<p>Un <code>button</code> signifie une action, hors ici il s'agit d'un présentation de l'index de la demande. J'utilise plutôt un <code>span</code>.</p>
<blockquote>
<p>[...]<br />Et avec un attribut aria-label explicite. "+1" Ne l'est pas assez je pense.</p>
</blockquote>
<p>Je rajoute "Même signalement".</p>
<blockquote>
<p>La span comprenant la date devrait afficher la date au sein d'une balise <time></p>
</blockquote>
<p>Ok.</p>
<blockquote>
<p>Pour centrer un flex-item unique verticalement et horizontalement, il suffit de lui appliqué un margin:auto</p>
</blockquote>
<p>Ok, mais je garde le padding pour que la bordure ne colle pas trop au texte.</p> Intégrations graphiques Publik - Development #33680: styler de la fonctionnalité +1 dans les formulaireshttps://dev.entrouvert.org/issues/33680?journal_id=1956522019-10-08T14:30:46ZSerghei Mihai
<ul><li><strong>Fichier</strong> <a href="/attachments/37974">0001-forms-decorate-nearby-field-33680.patch</a> <a class="icon-only icon-download" title="Télécharger" href="/attachments/download/37974/0001-forms-decorate-nearby-field-33680.patch">0001-forms-decorate-nearby-field-33680.patch</a> ajouté</li></ul> Intégrations graphiques Publik - Development #33680: styler de la fonctionnalité +1 dans les formulaireshttps://dev.entrouvert.org/issues/33680?journal_id=1960872019-10-10T09:26:51ZThomas Jundtjund@entrouvert.com
<ul></ul><p>Débat sur la convention de nommage ouvert : <a class="external" href="https://dev.entrouvert.org/issues/36831">https://dev.entrouvert.org/issues/36831</a></p>
<p>Sinon à corriger html l37</p>
<pre>
- <button class="plus1" href="#" data-plus1-url="{{formdata.api_url}}hooks/plus1/" aria-label="Même signalement">+1</button>
+ <button role="button" class="plus1" data-plus1-url="{{formdata.api_url}}hooks/plus1/" aria-label="Même signalement">+1</button>
</pre>
<p>Ajouter au <button> un <code>role=button</code>. Oui c'est bizarre mais par defaut il a un "role=submit". Et enlever l'attribut <code>href</code>.</p> Intégrations graphiques Publik - Development #33680: styler de la fonctionnalité +1 dans les formulaireshttps://dev.entrouvert.org/issues/33680?journal_id=1962072019-10-10T14:22:33ZSerghei Mihai
<ul><li><strong>Fichier</strong> <a href="/attachments/38041">0001-forms-decorate-nearby-field-33680.patch</a> <a class="icon-only icon-download" title="Télécharger" href="/attachments/download/38041/0001-forms-decorate-nearby-field-33680.patch">0001-forms-decorate-nearby-field-33680.patch</a> ajouté</li></ul><p>En attendant qu'on se mette d'accord j'ai explicité les noms des classes.<br />Et la correction du bouton.</p> Intégrations graphiques Publik - Development #33680: styler de la fonctionnalité +1 dans les formulaireshttps://dev.entrouvert.org/issues/33680?journal_id=1962322019-10-10T16:01:01ZThomas Jundtjund@entrouvert.com
<ul></ul><p>Astuce, <br />tu peux continuer à utiliser le nesting de sass sans générer de selecteur enfant.<br />Pour arriver au même résultat que tu as là, ajoute juste une class <code>.nearby-forms</code> à ton element <code>#nearby-forms</code> et une class <code>nearby-forms-list</code> à l'élément li</p>
<p>et tu peux écrire</p>
<pre>
.nearby-forms {
margin: 0;
padding: 0;
&-list {…}
&-digest, &-datetime, &-marker-counter {…}
&-digest {…}
&-datetime {…}
&-marker-counter {…}
}
</pre> Intégrations graphiques Publik - Development #33680: styler de la fonctionnalité +1 dans les formulaireshttps://dev.entrouvert.org/issues/33680?journal_id=1962862019-10-11T07:59:22ZSerghei Mihai
<ul></ul><p>Oui, mais ça réduit beaucoup la lisibilité je trouve.</p> Intégrations graphiques Publik - Development #33680: styler de la fonctionnalité +1 dans les formulaireshttps://dev.entrouvert.org/issues/33680?journal_id=2009042019-11-13T09:50:50ZThomas Jundtjund@entrouvert.com
<ul></ul><p>Niveau convention, on est parti sur un format block--element.<br />Tu pourrais donc partir sur des noms de class comme</p>
<pre>
<section
<div id="map-{{widget.name}}" class="qommon-map nearby-forms--map">
<ul class="nearby-forms">
<li class="nearby-form">
<span class="nearby-form--marker-counter" >
<span class="nearby-form--digest">
<span class="nearby-form--datetime">
<button class="nearby-form--plus1">
</pre> Intégrations graphiques Publik - Development #33680: styler de la fonctionnalité +1 dans les formulaireshttps://dev.entrouvert.org/issues/33680?journal_id=2009162019-11-13T10:51:19ZSerghei Mihai
<ul><li><strong>Fichier</strong> <a href="/attachments/38931">0001-forms-decorate-nearby-field-33680.patch</a> <a class="icon-only icon-download" title="Télécharger" href="/attachments/download/38931/0001-forms-decorate-nearby-field-33680.patch">0001-forms-decorate-nearby-field-33680.patch</a> ajouté</li></ul><p>Ok.</p> Intégrations graphiques Publik - Development #33680: styler de la fonctionnalité +1 dans les formulaireshttps://dev.entrouvert.org/issues/33680?journal_id=2010392019-11-14T08:40:55ZThomas Jundtjund@entrouvert.com
<ul></ul><p>Je me suis rendu compte dernièrement que IE11 était compatible avec la spec flexbox. Il n'est donc plus nécessaire de mettre les -ms-trucmuch qui sont nécessaires uniquement pour le support de IE10 (et qu'on ne support plus).</p> Intégrations graphiques Publik - Development #33680: styler de la fonctionnalité +1 dans les formulaireshttps://dev.entrouvert.org/issues/33680?journal_id=2012432019-11-15T09:06:28ZSerghei Mihai
<ul></ul><p>D'autres remarques? J'aimerais bien envoyer en recette rapidement.</p> Intégrations graphiques Publik - Development #33680: styler de la fonctionnalité +1 dans les formulaireshttps://dev.entrouvert.org/issues/33680?journal_id=2013142019-11-15T10:59:37ZThomas Jundtjund@entrouvert.com
<ul><li><strong>Statut</strong> changé de <i>Solution proposée</i> à <i>Solution validée</i></li></ul> Intégrations graphiques Publik - Development #33680: styler de la fonctionnalité +1 dans les formulaireshttps://dev.entrouvert.org/issues/33680?journal_id=2013162019-11-15T11:07:42ZSerghei Mihai
<ul><li><strong>Statut</strong> changé de <i>Solution validée</i> à <i>Résolu (à déployer)</i></li></ul><pre>
commit 80bea41c15c64f84a1aba0b0ac75a8043e6852b8 (origin/master, origin/HEAD)
Author: Serghei Mihai <smihai@entrouvert.com>
Date: Wed Jun 5 10:31:14 2019 +0200
forms: decorate "nearby" field (#33680)
</pre> Intégrations graphiques Publik - Development #33680: styler de la fonctionnalité +1 dans les formulaireshttps://dev.entrouvert.org/issues/33680?journal_id=2018972019-11-19T14:15:21ZFrédéric Pétersfpeters@entrouvert.com
<ul><li><strong>Statut</strong> changé de <i>Résolu (à déployer)</i> à <i>Solution déployée</i></li></ul>