https://assistance.opentalent.fr/browse/V8-2494

ot_core/Classes/Http/ApiController.php

@@ -103,6 +103,10 @@ class ApiController
             "SELECT o.id, o.name, o.logo_id as logoId, p.otherWebsite as website, a.latitude, a.longitude,
                        TRIM(BOTH ' ' FROM CONCAT(a.streetAddress, ' ', a.streetAddressSecond, ' ', a.streetAddressThird)) AS streetAddress,
                        a.postalCode, a.addressCity, cp.telphone, cp.email, o.facebook, o.twitter, o.instagram,
+                       (SELECT CONCAT(GROUP_CONCAT(DISTINCT CONCAT(tp.name)))
+                        FROM organization_type_of_practices AS otp
+                        LEFT JOIN TypeOfPractice AS tp ON(tp.id = otp.typeofpractice_id)
+                        WHERE otp.organization_id = o.id) AS practices,
                        n1.parent_id as n1Id, net1.name as n1Name
                     FROM opentalent.Organization o
                         INNER JOIN opentalent.Parameters p on o.parameters_id = p.id

ot_templating/Resources/Private/Language/locallang.xlf

@@ -89,6 +89,9 @@
 			<trans-unit id="see-ot-legal-mentions-here">
 				<source>Consulter les mentions légales de la société 2iOpenService</source>
 			</trans-unit>
+			<trans-unit id="contact">
+				<source>Contact</source>
+			</trans-unit>
 			<trans-unit id="contact-us">
 				<source>Contactez-nous</source>
 			</trans-unit>
@@ -165,7 +168,7 @@
 			<trans-unit id="no-result">
 				<source>Aucun résultat</source>
 			</trans-unit>
-			<trans-unit id="no-result">
+			<trans-unit id="no-an-error-occured">
 				<source>Une erreur s'est produite</source>
 			</trans-unit>
 			<trans-unit id="find">
@@ -198,6 +201,10 @@
 			<trans-unit id="click-on-land-to-go-there">
 				<source>Cliquez sur une des régions ci-dessous pour centrer la carte sur elle</source>
 			</trans-unit>
+			<trans-unit id="descriptive">
+				<source>Descriptif</source>
+			</trans-unit>
+
 			<trans-unit id="look-for-an-event">
 				<source>Rechercher un évènement</source>
 			</trans-unit>

ot_templating/Resources/Private/Layouts/Classic/StructuresFrame.html

@@ -63,7 +63,7 @@
                                 <input type="text"
                                        class="search-bar"
                                        name="search-query"
-                                       placeholder="{f:translate(key: 'what')}?"/>
+                                       placeholder="{f:translate(key: 'what')} ?"/>
                                 <button class="search-bar-btn"
                                         name="submit-search"
                                 >
@@ -74,7 +74,7 @@
                                 <input type="text"
                                        name="search-city"
                                        class="search-bar"
-                                       placeholder="{f:translate(key: 'where')}?"
+                                       placeholder="{f:translate(key: 'where')} ?"
                                        autocomplete="off"/>
                                 <button class="search-bar-btn"
                                         name="search-localize">
@@ -220,8 +220,7 @@
 
         <div class="ot-structures-frame-details" style="display: none">
             <header>
-                <a class="btn go-back" href="#"><f:translate key="go-back"/></a>
-                <h2><f:translate key="member-companies"/></h2>
+                <a class="go-back" href="#"><i class="fas fa-chevron-left"></i> <f:translate key="go-back"/></a>
             </header>
             <span class="please-wait">
                 <f:image src="EXT:ot_templating/Resources/Public/media/gear.gif"
@@ -236,13 +235,13 @@
                     <h3 class="structure-name"></h3>
 
                     <span class="social">
-                        <a href="" class="facebook" style="display: none" title="{f:translate(key: 'find-us-on')} Facebook">
+                        <a href="" class="facebook" target="_blank" style="display: none" title="{f:translate(key: 'find-us-on')} Facebook">
                             <i class="fab fa-facebook"></i>
                         </a>
-                        <a href="" class="instagram" style="display: none">
+                        <a href="" class="instagram" target="_blank" style="display: none">
                             <i class="fab fa-instagram-square" title="{f:translate(key: 'find-us-on')} Instagram"></i>
                         </a>
-                        <a href="" class="twitter" style="display: none">
+                        <a href="" class="twitter" target="_blank" style="display: none">
                             <i class="fab fa-twitter" title="{f:translate(key: 'find-us-on')} Twitter"></i>
                         </a>
                     </span>
@@ -250,18 +249,26 @@
                 <div class="illustration-container">
                     <f:image src="EXT:ot_templating/Resources/Public/media/event-default-modern.jpg" alt=""/>
                 </div>
-                <div class="categories-tags">
-
+                <div class="structure-practices">
+                    <span class="structure-practice-model" style="display: none"></span>
                 </div>
                 <div class="details">
+
+
                     <div class="description">
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-                        dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
-                        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
-                        eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
-                        deserunt mollit anim id est laborum.
+                        <h4>{f:translate(key: 'descriptive')}</h4>
+
+                        <p>
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+                            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+                            ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
+                            eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+                            deserunt mollit anim id est laborum.
+                        </p>
                     </div>
                     <div class="contact">
+                        <h4>{f:translate(key: 'contact')}</h4>
+
                         <table>
                             <tr>
                                 <td><i class="fas fa-map-marker-alt"></i></td>

ot_templating/Resources/Public/assets/Classic/script/structures.js

@@ -320,14 +320,23 @@ $(document).ready(function() {
                 cardDiv.data('id', structure.id);
 
                 if (structure.practices !== null) {
-                    structure.practices.forEach(function (practice) {
+                    let i = 1;
+                    for (const practice of structure.practices) {
                         let tag = practiceTagModel.clone();
-                        tag.text(practicesFr[practice]);
+
+                        if (i <= 3) {
+                            tag.text(practicesFr[practice]);
+                        } else {
+                            tag.text('+ ' + (practice.length - 3) + ' ...');
+                        }
                         tag.removeClass('structure-practice-model')
                         tag.addClass('structure-practice')
                         tag.show();
                         practiceTagModel.parent().append(tag);
-                    });
+
+                        if (i > 3) { break; }
+                        i++;
+                    }
                 }
 
                 if (structure.logoId) {
@@ -582,13 +591,14 @@ $(document).ready(function() {
             resultDiv.empty();
         }
         inputName.css("cursor", "inherit");
+        inputName.removeClass('loading');
     }
 
     document.click(function() {
         hideCityResults();
     });
 
-    $(document).keyup(function(e) {
+    $(document).keydown(function(e) {
         if(e.key === "Escape") {
             hideCityResults();
         }
@@ -601,6 +611,25 @@ $(document).ready(function() {
         e.stopPropagation();
     });
 
+    inputName.keypress(function (e) {
+        if (e.key === "Enter") {
+
+            let results = resultDiv.children('.city-search-item');
+
+            if (inputName.hasClass('loading')) {
+                // A request is currently running, enter will select the first result when the request will complete
+                inputName.addClass('enter-pressed');
+                e.preventDefault();
+            } else if (results.length > 0) {
+                // If results are displayed and no request is currently running, enter select the first result
+                setNewLocation(results[0].text(), results[0].data("x"), results[0].data("y"))
+                e.stopPropagation();
+            }
+        } else {
+            inputName.addClass('loading');
+        }
+    });
+
     resultDiv.on('click', '.city-search-item', function (e) {
         setNewLocation($(this).text(), $(this).data("x"), $(this).data("y"))
         e.stopPropagation();
@@ -627,9 +656,10 @@ $(document).ready(function() {
 
         inputLat.val('');
         inputLong.val('');
-        loadingDiv.show();
-        resultDiv.empty();
         resultDropdownDiv.show();
+        if (resultDiv.children('.city-search-item').length === 0) {
+            loadingDiv.show()
+        }
         noResultDiv.hide();
 
         $.ajax({
@@ -641,19 +671,34 @@ $(document).ready(function() {
         .done(function(res) {
             console.log(res);
             let features = res.features;
+            resultDiv.empty();
+
             if (!features.length > 0) {
                 noResultDiv.show();
-                return;
+                resultDiv.hide();
+            } else if (inputName.hasClass('enter-pressed')) {
+                // the enter key has been pressed before the request terminate
+                let f = features[0];
+                setNewLocation(
+                    f.properties.name + ' (' + f.properties.postcode + ')',
+                    f.geometry.coordinates[0],
+                    f.geometry.coordinates[1]
+                )
+                resultDiv.hide();
+            } else {
+                for (const f of features) {
+                    let x = f.geometry.coordinates[0];
+                    let y = f.geometry.coordinates[1];
+                    let name = f.properties.name;
+                    let postcode = f.properties.postcode;
+                    let span = '<div class="city-search-item" data-x="' + x + '" data-y="' + y + '">' + name + ' (' + postcode + ')</div>';
+                    resultDiv.append(span);
+                }
+                resultDiv.show();
             }
-            features.forEach(function (f) {
-                let x = f.geometry.coordinates[0];
-                let y = f.geometry.coordinates[1];
-                let name = f.properties.name;
-                let postcode = f.properties.postcode;
-                let span = '<div class="city-search-item" data-x="' + x + '" data-y="' + y + '">' + name + ' (' + postcode + ')</div>';
-                resultDiv.append(span);
-            });
-            loadingDiv.hide();
+            inputName.removeClass('loading');
+            inputName.removeClass('enter-pressed');
+            loadingDiv.hide()
         })
         .fail(function(e) {
             console.error(e);
@@ -743,6 +788,30 @@ $(document).ready(function() {
             instagramLink.hide();
         }
 
+        let practiceTagModel = structureFrameDetails.find('.structure-practice-model').first();
+        let practiceContainer = practiceTagModel.parent();
+        practiceContainer.children('.structure-practice').remove();
+
+        if (structure.practices !== null) {
+            let i = 1;
+            for (const practice of structure.practices) {
+                let tag = practiceTagModel.clone();
+
+                if (i <= 3) {
+                    tag.text(practicesFr[practice]);
+                } else {
+                    tag.text('+ ' + (practice.length - 3) + ' ...');
+                }
+                tag.removeClass('structure-practice-model')
+                tag.addClass('structure-practice')
+                tag.show();
+                practiceContainer.append(tag);
+
+                if (i > 3) { break; }
+                i++;
+            }
+        }
+
         let contact = structureFrameDetails.find('.contact').first();
         contact.find('.address').first().text(
             [structure.streetAddress, structure.postalCode, structure.addressCity].join(" ")
@@ -823,6 +892,7 @@ $(document).ready(function() {
             timeout : 5000
         })
         .done(function(structure) {
+            structure.practices = structure.practices !== null ? structure.practices.split(",") : [];
             populateDetailsView(structure)
 
             structureFrameDetails.find('.please-wait').first().hide();

ot_templating/Resources/Public/assets/Classic/style/module/_structuresframe.scss

@@ -6,6 +6,8 @@ $input-border-color: #bfbfbf;
 
 .ot-structures-frame, .ot-structures-frame-details {
   @include flex;
+  font-family: "Helvetica Neue Bold Condensed", "Helvetica Neue", Arial, serif;
+  font-stretch: condensed;
 
   header {
     display: flex;
@@ -85,13 +87,14 @@ $input-border-color: #bfbfbf;
 
   #structure-map-bar {
     margin: 16px 2% 6px 2%;
-    max-width: 100%;
+    width: 100%;
   }
 
   #structure-map-bar .advice {
-    color: #e4611b;
+    color: #262626;
     font-weight: 750;
     text-align: center;
+    font-size: 12px;
   }
 
   #overseas-provinces-list {
@@ -99,20 +102,23 @@ $input-border-color: #bfbfbf;
     flex-direction: row;
     list-style: none;
     align-items: center;
+    justify-content: center;
     flex-wrap: wrap;
     padding: 0;
+    width: 100%;
   }
 
   #overseas-provinces-list li {
-    border: solid 1px #000000;
-    height: 80px;
-    width: 80px;
-    margin: 0 6px 6px 0;
+    margin: 5px;
+    min-width: 50px;
+    width: 75px;
+    height: 75px;
   }
 
   #overseas-provinces-list li img {
-    width: 100%;
+    border: solid 1px #000000;
     max-width: 100%;
+    width: 100%;
     height: 100%;
     cursor: pointer;
   }
@@ -160,6 +166,9 @@ $input-border-color: #bfbfbf;
   }
 
   .search-bar-btn {
+    @include flex;
+    flex-direction: column;
+    justify-content: center;
     border: none;
     background: none;
     width: 5%;
@@ -196,7 +205,7 @@ $input-border-color: #bfbfbf;
     width:30px;
   }
 
-  .city-search-item {
+  .city-search-item, .city-search-no-result {
     display: block;
     padding: 12px 24px;
     white-space: nowrap;
@@ -210,9 +219,10 @@ $input-border-color: #bfbfbf;
   .structure-search select {
     color: $btn-background-color;
     padding: 4px 6px;
-    margin: 3px 6px;
+    margin: 3px 1.5%;
     font-weight: 750;
-    width: 127px;
+    width: 22%;
+    min-width: 110px;
     font-size: 12px;
   }
 
@@ -241,16 +251,17 @@ $input-border-color: #bfbfbf;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
+    justify-content: center;
   }
 
   .structure-card {
     display: flex;
     flex-direction: column;
-    width: 44%;
-    min-width: 240px;
+    width: 42%;
+    min-width: 200px;
     border: solid 1px #cccccc;
     border-radius: 4px;
-    padding: 12px 8px;
+    padding: 12px;
     margin: 8px 1%;
     background-color: #f2f2f2;
   }
@@ -260,12 +271,14 @@ $input-border-color: #bfbfbf;
     flex-direction: row;
     justify-content: center;
     margin: 8px;
-    min-width: 200px;
+    min-width: 160px;
+    height: 80px;
   }
 
   .structure-poster img {
     width: auto;
     height: auto;
+    max-width: 100%;
   }
 
   .structure-details {
@@ -295,17 +308,13 @@ $input-border-color: #bfbfbf;
   }
 
   .structure-name {
-    font-size: 21px;
+    font-size: 18px;
     font-weight: 750;
     width: 100%;
     text-align: left;
     color: $btn-background-color;
   }
 
-  .structure-details-table tr {
-    background-color: #eeeeee !important;
-  }
-
   .structure-details-table td {
     border:none;
   }
@@ -335,9 +344,10 @@ $input-border-color: #bfbfbf;
     width: 100%;
     display: flex;
     flex-direction: row;
-    justify-content: center;
+    justify-content: flex-start;
     color: #666666;
     font-size: 0.8em;
+    padding-left: 12px;
   }
 
   .pagination-bar {
@@ -423,6 +433,36 @@ $input-border-color: #bfbfbf;
   font-weight: 750;
 }
 
+// Medium screens
+@media screen and (min-width: 700px) and (max-width: 1048px) {
+  .ot-structures-frame.map-view {
+    #overseas-provinces-list li {
+      width: 85px;
+      height: 85px;
+      margin: 5px 12px;
+    }
+
+    .structure-search select {
+      margin: 3px 2%;
+      width: 46%;
+    }
+  }
+
+  .ot-structures-frame.list-view {
+    .structure-search-row {
+      flex-wrap: nowrap;
+    }
+
+    .filters {
+      select, button {
+        width: 15%;
+        margin: 1%;
+      }
+    }
+  }
+}
+
+
 // Small screens
 @media screen and (max-width: 700px) {
   .ot-structures-frame {
@@ -437,12 +477,6 @@ $input-border-color: #bfbfbf;
       overflow: hidden;
     }
 
-    #overseas-provinces-list li {
-      margin: 0 auto 6px auto;
-      height: 90px;
-      width: 90px;
-    }
-
     .structure-search-row {
       flex-direction: column;
     }
@@ -465,10 +499,31 @@ $input-border-color: #bfbfbf;
     .structure-card {
       width: 100%;
     }
+  }
+  .ot-structures-frame.list-view {
+
+    .search-bar-wrapper {
+      width: 85%;
+    }
 
-    .list-view .structure-card {
+    .structure-card {
       flex-direction: column;
     }
+
+    .structure-search-row {
+      flex-wrap: nowrap;
+    }
+
+    .structure-search-row.filters {
+      margin: 0;
+    }
+
+    .filters {
+      select, button {
+        width: 80%;
+        margin: 5px auto;
+      }
+    }
   }
 }
 
@@ -492,11 +547,12 @@ $input-border-color: #bfbfbf;
   header {
     @include flex;
     flex-direction: row;
-    background-color: #d9d9d9;
 
     .go-back {
-      margin: 0 16px;
+      margin: 16px;
       padding: 4px 8px;
+      color: #737373;
+      font-weight: 700;
     }
 
     h2 {
@@ -539,6 +595,28 @@ $input-border-color: #bfbfbf;
     }
   }
 
+  .structure-practices {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    margin: 6px auto;
+    padding-bottom: 6px;
+    flex-wrap: wrap;
+    min-height: 18px;
+    justify-content: center;
+    border-bottom: solid 1px #a6a6a6;
+  }
+
+  .structure-practice {
+    background-color: #d9d9d9;
+    color: #262626;
+    font-size: 11px;
+    margin: 1px 4px 1px 0;
+    padding: 1px 5px 3px 5px;
+    height: 16px;
+    border-radius: 6px;
+  }
+
   .illustration-container {
     @include flex;
     flex-direction: row;
@@ -560,6 +638,16 @@ $input-border-color: #bfbfbf;
     @include flex;
     flex-direction: row;
     max-width: 100%;
+    color: #666666;
+
+    h4 {
+      font-size: 18px;
+      font-weight: 750;
+      border-bottom: solid 1px $btn-background-color;
+      align-self: flex-start;
+      color: #666666;
+      margin: 8px 0;
+    }
 
     .description {
       @include flex;