fix(forms): display defects, confusions

agilare · Jun 26, 2023 · 973c576 · 973c576
1 parent f9ab8f3
commit 973c576
Show file tree

Hide file tree

Showing 10 changed files with 85 additions and 80 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## [3.5.1] - Unreleased
 
+### Fixed
+
+- [ ] forms : in mobile view Chosen doesn't work
+
 ### Changed
 
 - [ ] refactor
@@ -12,7 +16,7 @@
 - [ ] usage of globals
 - [ ] jQuery Migrate
 
-## [3.5.0] - Unreleased
+## [3.5.0] - 2023-06-26
 
 ### Fixed
 
@@ -28,11 +32,12 @@
 
 ### Changed
 
-- [ ] events form
-    - [ ] increase width of fields (complément, titre, desc, sites web, prix, prélocs)
-    - [ ] put back horaire under date
-    - [ ] categories : replace fêtes tooltip by permanent text
-    - [ ] lieu "Ou si le lieu n'est pas listé :", one background for div "Nom du lieu", "Adresse", etc.; and more on right
+- events form presentation improvements
+    - increase width of some fields
+    - put back horaire under date
+    - complete link for tooltip by a more visible help button
+    - clearer lieu manual fields
+- forms : increase container width for lieu, organisateur, contact...
 - tests : documentation revised, completed (readme, strategy, map)
 - update jQuery from 3.6.4 to 3.7.0
 

diff --git a/_header.inc.php b/_header.inc.php
@@ -288,5 +288,5 @@ function gtag(){dataLayer.push(arguments);}
         <div class="spacer"><!-- --></div>
 
         <!-- Début Conteneur -->
-        <div id="conteneur" <?php if (strstr(dirname($_SERVER['PHP_SELF']), 'admin') || $nom_page == 'evenement-edit') { ?>style="padding-right: 5px" <?php } ?> >
+        <div id="conteneur" <?php if (strstr(dirname($_SERVER['PHP_SELF']), 'admin') || in_array($nom_page, ['evenement-edit', 'evenement-report', 'lieu-edit', 'lieu-text-edit', 'organisateur-edit', 'contacteznous', 'user-login', 'user-edit', 'user-register'])) { ?>style="padding-right: 5px" <?php } ?> >
 
diff --git a/contacteznous.php b/contacteznous.php
@@ -150,16 +150,14 @@
 
 <p>
 <label for="sujet" id="label_sujet">Sujet* </label>
-<input name="sujet" id="sujet" type="text" size="40" maxlength="100"  tabindex="4" value="<?php echo sanitizeForHtml($champs['sujet']) ?>" />
-<?php echo $verif->getErreur("sujet"); ?>
+        <input name="sujet" id="sujet" type="text" size="45" maxlength="100"  tabindex="4" value="<?php echo sanitizeForHtml($champs['sujet']) ?>" />
+        <?php echo $verif->getErreur("sujet"); ?>
 </p>
 
 
 <!-- Contenu obligatoire (textarea) -->
 <p>
-    <label for="contenu" id="label_contenu">Contenu* </label><textarea name="contenu" id="message" rows="14" title="" tabindex="5">
-    <?php echo sanitizeForHtml($champs['contenu']) ?>
-    </textarea>
+    <label for="contenu" id="label_contenu">Contenu* </label><textarea name="contenu" id="message" rows="14" title="" tabindex="5"><?php echo sanitizeForHtml($champs['contenu']) ?></textarea>
     <?php echo $verif->getErreur("contenu"); ?>
 </p>
 

diff --git a/evenement-edit.php b/evenement-edit.php
@@ -920,7 +920,8 @@
             if ($k === 'fête')
             {
                 $required = ' required';
-                $v = '<span class="tooltip">fêtes<span class="tooltiptext">Inclut les soirées, les concerts, etc.</span></span>';
+                $v = '<span class="tooltip">fêtes <i class="fa fa-info-circle" aria-hidden="true"></i>
+<span class="tooltiptext">Inclut les soirées, les concerts, etc.</span></span>';
             }
             echo '<li class="listehoriz"><input type="radio" name="genre" value="'.$k.'" '.$coche.' id="genre_'.$k.'"  class="radio_horiz" '.$required.' /><label class="continu" for="genre_'.$k.'">'.$v.'</label></li>';
 
@@ -945,8 +946,9 @@
 
 
 
-        <p style="display: inline-block;width:50%;margin:5px 0">
-                <label for="horaire_debut" style="width:6em"><span class="tooltip">Début<span class="tooltiptext">Jusqu’à 06:00, le début sera considéré faisant partie du jour de l’événement</span></span> </label>
+        <p style="margin:5px 0">
+                <label for="horaire_debut" style="display:inline-block"><span class="tooltip">Début <i class="fa fa-info-circle" aria-hidden="true"></i>
+<span class="tooltiptext">Jusqu’à 06:00, le début sera considéré faisant partie du jour de l’événement</span></span> </label>
                     <input type="time" name="horaire_debut" id="horaire_debut" size="5" value="<?php echo sanitizeForHtml($champs['horaire_debut']) ?>" />
 
                     <label for="horaire_fin" class="continu">Fin</label>
@@ -973,7 +975,7 @@
 
                     <div style="margin-top:1.3em">
                         <label for="horaire_complement">Complément</label>
-                            <input type="text" name="horaire_complement" id="horaire_complement" size="45" maxlength="100" value="<?php echo sanitizeForHtml($champs['horaire_complement']) ?>" />
+                            <input type="text" name="horaire_complement" id="horaire_complement" size="60" maxlength="100" value="<?php echo sanitizeForHtml($champs['horaire_complement']) ?>" />
                             <?php
             echo $verif->getHtmlErreur('horaire_complement');
             ?>
@@ -987,8 +989,8 @@
     <fieldset>
         <legend>Lieu*</legend>
         <p>
-        <label for="idLieu">Dans la liste</label>
-        <select name="idLieu" id="idLieu" class="chosen-select" title="Un lieu dans base de données de La décadanse" onfocus="this.className='focus';" style="max-width:300px"  data-placeholder="Tapez le nom du lieu">
+            <label for="idLieu"><strong>Nom du lieu :</strong></label>
+        <select name="idLieu" id="idLieu" class="chosen-select" title="Un lieu dans base de données de La décadanse" style="max-width:300px"  data-placeholder="">
         <?php
 
         $sql_lieu_excl_fr = '';
@@ -1049,19 +1051,18 @@
         ?>
         </p>
 
-            <p class="entreLabels" style="width:auto;font-size: 1em;"><strong>Si le lieu n'est pas sur La décadanse :</strong></p>
-            <div class="spacer"></div>
-        <div style="margin-left:4.5em">
+        <div id="evenement-lieu-pastrouve">
+
+            <p style="width:auto;font-size: 1em;text-align: left;margin: 5px">Si et seulement si vous n'avez pas trouvé le lieu dans la liste ci-dessus, renseignez-le ici&nbsp;:</p>
+                <div class="spacer"></div>
         <p>
         <?php
         $tab_nomLieu_label = array("for" => "nomLieu");
         echo HtmlShrink::formLabel($tab_nomLieu_label, "Nom du lieu");
         echo $verif->getHtmlErreur("nomLieuIdentique");
 
-        $tab_nomLieu = array("type" => "text", "name" => "nomLieu", "id" => "nomLieu", "size" => "35",
-         "maxlength" => "60", "value" => "",
-         "onfocus" => "this.className='focus';", "onblur" => "this.className='normal';");
-        if (empty($champs['idLieu']))
+        $tab_nomLieu = array("type" => "text", "name" => "nomLieu", "id" => "nomLieu", "size" => "35", "maxlength" => "60", "value" => "");
+    if (empty($champs['idLieu']))
         {
             $tab_nomLieu['value'] = sanitizeForHtml($champs['nomLieu']);
         }
@@ -1076,7 +1077,7 @@
             echo $verif->getHtmlErreur("adresseIdentique");
             ?>
 
-            <input type="text" name="adresse" id="adresse" size="40" maxlength="100" title="rue, no" value="<?php if (empty($champs['idLieu'])) { echo sanitizeForHtml($champs['adresse']); } ?>" onfocus="this.className='focus';" onblur="this.className='normal';" />
+            <input type="text" name="adresse" id="adresse" size="40" maxlength="100" title="rue, no" value="<?php if (empty($champs['idLieu'])) { echo sanitizeForHtml($champs['adresse']); } ?>"  />
         <?php
         echo $verif->getHtmlErreur("adresse");
         echo $verif->getHtmlErreur("doublonLieux");
@@ -1168,7 +1169,7 @@
 
         <p>
             <label for="urlLieu">Site web</label>
-            <input type="text" name="urlLieu" id="urlLieu" size="40" maxlength="80" title="URL du lieu" value="<?php if (empty($champs['idLieu'])) { echo sanitizeForHtml($champs['urlLieu']); } ?>" onfocus="this.className='focus';" onblur="this.className='normal';" />
+            <input type="text" name="urlLieu" id="urlLieu" size="40" maxlength="80" title="URL du lieu" value="<?php if (empty($champs['idLieu'])) { echo sanitizeForHtml($champs['urlLieu']); } ?>" />
         <?php
         echo $verif->getHtmlErreur("urlLieu");
         ?>
@@ -1263,8 +1264,8 @@
 
     <fieldset>
         <legend>Entrée</legend>
-        <?php if ((isset($_SESSION['Sgroupe']) && $_SESSION['Sgroupe'] < 6)) { ?>
-        <?php
+            <?php if ((isset($_SESSION['Sgroupe']) && $_SESSION['Sgroupe'] < UserLevel::AUTHOR)) { ?>
+                <?php
         $price_types = ['unknown' => 'inconnu', 'gratis' => 'entrée libre', 'asyouwish' => 'prix libre', 'chargeable' => 'payant'];
         ?>
             <ul class="radio" style="list-style-type: none">
@@ -1282,22 +1283,21 @@
 <?php } ?>
 
         <div id="prix-precisions" <?php
-        if (!isset($_SESSION['Sgroupe']) || (isset($_SESSION['Sgroupe']) && $_SESSION['Sgroupe'] >= 6)  || ($get['action'] == "editer" || $get['action'] == "update")
-                && (!empty($champs['prix']) || (!empty($champs['price_type']) && ($champs['price_type'] == 'asyouwish' || $champs['price_type'] == 'chargeable') ))
+        if (!isset($_SESSION['Sgroupe']) || (isset($_SESSION['Sgroupe']) && $_SESSION['Sgroupe'] >= UserLevel::AUTHOR) || ($get['action'] == "editer" || $get['action'] == "update") && (!empty($champs['prix']) || (!empty($champs['price_type']) && ($champs['price_type'] == 'asyouwish' || $champs['price_type'] == 'chargeable') ))
                 ) { ?> style="display:block" <?php } ?>>
             <p>
                 <label for="prix">Prix</label>
-                <input type="text" name="prix" id="prix" size="55" maxlength="100" value="<?php echo sanitizeForHtml($champs['prix']) ?>" />
+                    <input type="text" name="prix" id="prix" size="45" maxlength="100" value="<?php echo sanitizeForHtml($champs['prix']) ?>" />
                     <?php
                 echo $verif->getHtmlErreur('prix');
                 ?>
             </p>
-            <?php if (isset($_SESSION['Sgroupe']) && $_SESSION['Sgroupe'] > 6 ) { ?>
-            <div class="guideChamp">Vous pouvez mettre seulement <strong>0</strong> si l'entrée est libre.</div>
+                <?php if (isset($_SESSION['Sgroupe']) && $_SESSION['Sgroupe'] > UserLevel::AUTHOR) { ?>
+                    <div class="guideChamp">Vous pouvez mettre seulement <strong>0</strong> si l'entrée est libre.</div>
             <?php } ?>
             <p>
                 <label for="prelocations">Prélocations</label>
-                    <input type="text" name="prelocations" id="prelocations" size="65" maxlength="150" value="<?php echo sanitizeForHtml($champs['prelocations']) ?>" />
+                    <input type="text" name="prelocations" id="prelocations" size="70" maxlength="150" value="<?php echo sanitizeForHtml($champs['prelocations']) ?>" />
                     <?php
                 echo $verif->getHtmlErreur('prelocations');
                 ?>
@@ -1337,7 +1337,8 @@
         </p>
             <div class="spacer"></div>
         <p>
-            <label for="image"><span class="tooltip">Photo<span class="tooltiptext"> S’affiche à la place du flyer s’il n’y a pas de flyer, sinon en dessous de celui-ci</span></span></label>
+            <label for="image"><span class="tooltip">Photo <i class="fa fa-info-circle" aria-hidden="true"></i>
+<span class="tooltiptext"> S’affiche à la place du flyer s’il n’y a pas de flyer, sinon en dessous de celui-ci</span></span></label>
             <input type="hidden" name="MAX_FILE_SIZE" value="<?php echo UPLOAD_MAX_FILESIZE ?>" /> <!-- 2 Mo -->
             <input type="file" name="image" id="image" class="file-upload-size-max" size="25" accept="image/jpeg,image/pjpeg,image/png,image/x-png,image/gif" class="fichier" />
             <div class="guideChamp">Photo des artistes, de leurs œuvres, du lieu, etc.</div>

diff --git a/evenement-report.php b/evenement-report.php
@@ -36,9 +36,8 @@
     $tab_type_erreur = array(
         "info" => "mauvaise information au sujet de l’événement",
         "enlever" => "événement à enlever",
-        "bug" => "un bug",
         "autre" => "autre"
-    );
+);
 
     $verif = new Validateur();
 

diff --git a/tests/ladecadanse.side b/tests/ladecadanse.side
@@ -2,7 +2,7 @@
   "id": "63e99cd5-4a8e-4364-899e-ff6d0b3b0f9b",
   "version": "2.0",
   "name": "ladecadanse",
-  "url": "https://ladecadanse.darksite.ch/",
+  "url": "http://ladecadanse.local/",
   "tests": [{
     "id": "1c4e0b1a-ecd3-4bee-b216-8448f663e804",
     "name": "global menus small",
@@ -2194,17 +2194,6 @@
         ["xpath=//div[2]/p/input", "xpath:position"]
       ],
       "value": "La Gravière"
-    }, {
-      "id": "8c05d492-db3c-4bc7-9b10-dde255028d90",
-      "comment": "",
-      "command": "click",
-      "target": "css=fieldset:nth-child(6) > div:nth-child(5)",
-      "targets": [
-        ["css=fieldset:nth-child(6) > div:nth-child(5)", "css:finder"],
-        ["xpath=//form[@id='ajouter_editer']/fieldset[3]/div[2]", "xpath:idRelative"],
-        ["xpath=//fieldset[3]/div[2]", "xpath:position"]
-      ],
-      "value": ""
     }, {
       "id": "bfea8cda-d6ac-48a7-9249-914d89488143",
       "comment": "",

diff --git a/user-login.php b/user-login.php
@@ -112,7 +112,7 @@
 <p>
 <label for="pseudo" id="login_pseudo">Identifiant</label>
 <input type="text" name="pseudo" id="pseudo" value="<?php echo htmlspecialchars($champs['pseudo']) ?>" size="30" />
-<div style="margin: 0 1em 1em 26em;font-size: 0.8em;line-height: 1.1em;padding: 0;">Celui que vous avez choisi à l'inscription</div>
+<div style="margin: 0 1em 1em 6em;font-size: 0.8em;line-height: 1.1em;padding: 0;"></div>
 <?php
 echo $verif->getHtmlErreur("pseudo");
 ?>
@@ -154,11 +154,6 @@
 </div>
 <!-- Fin Colonne gauche -->
 
-<div id="colonne_droite" class="colonne">
-
-</div>
-
-
 <?php
 include("_footer.inc.php");
 ?>
diff --git a/web/css/desktop.css b/web/css/desktop.css
@@ -369,12 +369,12 @@ form#ajouter_editer label
 form#ajouter_editer .description
 {
     margin-left:10.5em;
-    width:560px;
+    width:600px;
 }
 
 form#ajouter_editer #titre
 {
-    width:560px;
+    width:600px;
 }
 
 
@@ -386,7 +386,7 @@ form#ajouter_editer table.fichiers_associes {
 
 form#ajouter_editer textarea, form#ajouter_editer #ref
 {
-    width:560px;
+    width:600px;
 }
 
 /* personne */

diff --git a/web/css/evenement-edit_formulaire.css b/web/css/evenement-edit_formulaire.css
@@ -1,16 +1,24 @@
-
-p.action_ajouter
-{
-    width:94%;
-    margin:1em auto;
-}
-
-#flyer, #image
-{
-    border:none;
-}
-
-#prix-precisions
-{
-    display:none;
-}
+
+p.action_ajouter
+{
+    width:94%;
+    margin:1em auto;
+}
+
+#flyer, #image
+{
+    border:none;
+}
+
+#prix-precisions
+{
+    display:none;
+}
+
+#evenement-lieu-pastrouve
+{
+    margin-left:8em;
+    padding: 5px;
+    background:#e1e1e1;
+    max-width: 500px;
+}
diff --git a/web/css/mobile.css b/web/css/mobile.css
@@ -357,7 +357,7 @@ form#ajouter_editer label#label_nom, form#ajouter_editer label#label_affiliation
 
 .contacteznous form#ajouter_editer textarea#message
 {
-width:280px;
+    width:90%;
 }
 
 form#ajouter_editer .guideChamp {
@@ -540,7 +540,7 @@ margin-left:0;
 form#ajouter_editer textarea {
 
 
-    width: 280px;
+    width: 320px;
 
 	}
 
@@ -552,15 +552,15 @@ form#ajouter_editer select#idLieu
 
 form#ajouter_editer #adresse, form#ajouter_editer #urlLieu, form#ajouter_editer  #horaire_complement,form#ajouter_editer  #prelocations, form#ajouter_editer #titre, form#ajouter_editer #ref
 {
-    width: 280px;
+    width: 320px;
 }
 
 
 form#ajouter_editer label {
-    display: inline-block;
+    display: block;
     margin: 0 0.2em 0.2em 0;
     padding: 0 0 0 0;
-    text-align: right;
+    text-align: left;
     width: auto;
 }
 
@@ -575,6 +575,11 @@ form#ajouter_editer .supImg
 margin-left: 50px;
 }
 
+#evenement-lieu-pastrouve
+{
+    margin-left:1em;
+}
+
 /* personne */
 
 .personne #actions
@@ -598,6 +603,11 @@ ul#menu_ajouts li {
 	text-align: left;
 }
 
+form#ajouter_editer .entreLabels
+{
+    margin-left: 0;
+}
+
 form#ajouter_editer p.memoriser label, form#ajouter_editer p.mdp_oublie
 {
 	padding:0;