Merge pull request #630 from StartupsPoleEmploi/fix/jepostule_button_…

…responsiveness PELBB-85: corrige le bouton postuler sur mobile
StartupsPoleEmploi · Sep 5, 2022 · 5b43228 · 5b43228
2 parents 5bba2ce + 69cc0c3
commit 5b43228
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 25 deletions.
diff --git a/labonneboite/web/static/css/search_results.css b/labonneboite/web/static/css/search_results.css
@@ -213,8 +213,15 @@
     font-size: 13px;
     font-size: 0.8125rem;
     font-family: inherit; /*"Open Sans", sans-serif*/
-    padding-left: 18px;
-    margin-left: 0;
+}
+
+.lbb-result__actions .btn-favorite {
+    margin-left: -8px;
+    margin-right: 35px;
+}
+
+.lbb-result__actions .btn-postulate {
+    width: 102px;
 }
 
 @media (min-width: 800px) {
@@ -223,26 +230,13 @@
     }
 }
 
-/* Media queries for small devices */
 @media (max-width: 800px) {
-    .lbb-result__actions .btn-memo {
-        padding-left: 2px;
-    }
-}
-
-
-@media (min-width: 400px) and (max-width: 800px) {
     .lbb-result__actions .row {
         display: block;
         width: 100%;
         text-align: left;
         margin-left: 35%;
-    }
-}
-
-@media (max-width: 400px) {
-    .lbb-result__actions .row {
-        margin-left: 17%;
+        margin-top: 10px;
     }
 }
 
@@ -280,6 +274,9 @@
     content: '-';
 }
 
+.lbb-result__actions .btn-more-infos {
+    margin-right:8px;
+}
 
 @media print {
     .lbb-result {

diff --git a/labonneboite/web/templates/includes/office/header.html b/labonneboite/web/templates/includes/office/header.html
@@ -49,8 +49,8 @@ <h4>Cette entreprise recrute aussi dans votre région.</h4>
   {% if hide_footer is none or not hide_footer %}
   <div class="lbb-result__actions">
     <div class="grid-row">
-      <div class="grid-col-9">
-        <div class="row">
+      <div class="grid-col-9 text-left">
+        <div class="row btn-more-infos">
           {% if show_more_info %}
             <a href="#" class="btn btn-small js-result-toggle-details gtm-company-detail">Plus d'infos</a>
           {% endif %}
@@ -74,7 +74,7 @@ <h4>Cette entreprise recrute aussi dans votre région.</h4>
                   action="{{ url_for('user.favorites_add', siret=company.siret, rome_code=rome_code) }}"
                   method="post"
                   class="form-inline">
-                <button class="invisible no-padding gtm-favorites-add" type="submit">
+                <button class="invisible no-padding btn-favorite" type="submit">
                   <span class="rounded-icon"><img class="img-icon" alt="" src="{{ url_for('static', filename='images/icons/heart.svg') }}"></span>
                   <span class="btn btn-small invisible">Garder pour plus tard</span>
                 </button>
@@ -83,7 +83,7 @@ <h4>Cette entreprise recrute aussi dans votre région.</h4>
               </form>
             {% else %}
               <form action="{{ url_for('user.favorites_delete', siret=company.siret) }}" method="post" class="form-inline">
-                <button class="invisible no-padding" type="submit">
+                <button class="invisible no-padding btn-favorite" type="submit">
                   <span class="rounded-icon"><img class="img-icon" alt="" src="{{ url_for('static', filename='images/icons/heart.svg') }}"></span>
                   <span class="btn btn-small invisible">Supprimer des favoris</span>
                 </button>
@@ -112,18 +112,17 @@ <h4>Cette entreprise recrute aussi dans votre région.</h4>
         <div class="row">
           {% if jepostule_globally_enabled %}
             {% if jepostule_enabled(user, company) %}
-              <a class="jepostule-button no-underline" href="{{ url_for('jepostule.application', siret=company.siret, rome_code=rome_code) }}" target="_blank" rel="noopener">
-                <button class="btn btn-small full-width gtm-company-apply" type="submit">Postuler
-                </button>
+              <a class="btn btn-small btn-postulate" href="{{ url_for('jepostule.application', siret=company.siret, rome_code=rome_code) }}" target="_blank" rel="noopener"> Postuler
               </a>
             {% endif %}
 
             {% if not user.is_authenticated and company.email %}
-              <button class="jepostule-not-authentified jepostule-buttoninvisible btn btn-small full-width gtm-company-apply-unlogged" id="">Postuler
-              </button>
+              <a class="jepostule-not-authentified btn-postulate jepostule-buttoninvisible btn btn-small gtm-company-apply-unlogged" id="">Postuler
+              </a>
             {% endif %}
           {% endif %}
         </div>
+
       </div> <!-- right buttons -->
     </div>