From: Stephen Cameron <stephen@cubedesigners.com>
Date: Wed, 26 Jan 2022 18:36:59 +0000 (+0100)
Subject: WIP #4985 @2
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=119d45fc84197cca80e0957b8b33df2adc3bafa8;p=pmi.git

WIP #4985 @2
---

diff --git a/resources/styles/components/contact-shortcut.styl b/resources/styles/components/contact-shortcut.styl
index c98e738..af0dc8a 100644
--- a/resources/styles/components/contact-shortcut.styl
+++ b/resources/styles/components/contact-shortcut.styl
@@ -1,34 +1,39 @@
-$contact-tab-width = 60px // Width of visible tab when closed
+$contact-tab-width = 2.5em // Width of visible tab when closed (see font-size of .contact-shortcut-tab)
 
 .contact-shortcut
-  @apply fixed text-white
-  top: 215px
-  left: 100% // Container needs to be right off the screen, otherwise it might block elements below it
+  @apply fixed flex flex-col items-start text-white
+  z-index: 100
+  top: 135px // Should be 1px below header when at full size
+  // Container needs to be right off the screen, otherwise it might block elements below it
+  // Previously, we used left: 100% but this caused weird behaviour where the elements would
+  // get "cropped" on their right side, causing them to not come far enough back into view
+  // when doing translateX(-100%). It only affected the wider elements in the group.
+  left: 0
+  // To achieve the same result as left: 100% without side-effects, we translateX 100vw:
+  transform: translateX(100vw)
+  font-size: 1.5rem // 24px, controls sizing of other elements
+
+  +below(1024px)
+    font-size: 1.25rem
+  +below($breakpoint-columns)
+    font-size: 1rem
+
+  > * + *
+    margin-top: 1px // Automatic 1px space between elements
 
   a
     @apply text-inherit
 
   &-tab
+    @apply inline-flex items-center
+    padding: 0.5em 1.67em 0.5em 0.5em // Padding that scales with font-size
     white-space: nowrap
     transform: translateX(- $contact-tab-width)
     transition: transform 0.5s ease
-    font-size 1.5rem
     &:hover
       transform: translateX(-100%)
-      .contact-shortcut-detail
-        transform: none
-        transition-delay: 0s
-        //transition: none // So it snaps out on hover but animates on mouseout
 
   &-icon
-    @apply mr-4
-    height: 36px
-    width: 40px // IE11 doesn't like auto widths
-
-  &-detail
-    @apply p-3
-    border-top: 1px solid #079ECC
-    transform: translateX($contact-tab-width)
-    transition: transform 0.3s ease 0.3s // Delay so it slides out of view at the end of main animation
-    a
-      @apply underline
+    height: 1.5em
+    width: 1.6em // IE11 doesn't like auto widths
+    margin-right: 0.67em
diff --git a/resources/views/partials/contact-shortcut.blade.php b/resources/views/partials/contact-shortcut.blade.php
index 2a94dd6..cc08e1b 100644
--- a/resources/views/partials/contact-shortcut.blade.php
+++ b/resources/views/partials/contact-shortcut.blade.php
@@ -1,37 +1,38 @@
-<div class="contact-shortcut flex flex-col z-30 xs:hidden">
-    <phone-link :number="$global->phone" class="contact-shortcut-tab inline-flex self-start bg-contactshortcut p-3 pr-10">
-        <img class="contact-shortcut-icon" src="{{ asset('images/icon-phone.svg') }}" alt="{{ __('Téléphone') }}">
+<div class="contact-shortcut xs:hidden">
+
+    {{-- Phone --}}
+    <phone-link :number="$global->phone" class="contact-shortcut-tab bg-contactshortcut">
+        <img class="contact-shortcut-icon"
+             src="{{ asset('images/icon-phone.svg') }}"
+             alt="{{ __('Téléphone') }}">
         {{ $global->phone }}
     </phone-link>
-    <div class="contact-shortcut-tab mt-px">
-        <a href="/contact" class="p-3 bg-contactshortcut flex items-center pr-16">
-            <img class="contact-shortcut-icon" src="{{ asset('images/icon-email.svg') }}" alt="{{ __('Contact') }}">
-            {!! __('Formulaire de contact') !!}
-        </a>
-        {{--
-        <div class="contact-shortcut-detail bg-primary">
-            {!! sprintf(__('Utilisez notre <a href="%s">formulaire de contact</a>'), '/contact') !!}
-        </div>
-        --}}
-    </div>
-    <div class="contact-shortcut-tab mt-px">
-        <a href="https://pm-instrumentation.us20.list-manage.com/subscribe?id=a90b5c784a&u=ab875244e3b4c9c00072a0125"
-           target="_blank"
-           rel="noopener"
-           class="p-3 bg-contactshortcut flex items-center pr-16">
-            <img class="contact-shortcut-icon" src="{{ asset('images/icon-newsletter.svg') }}" alt="{{ __('Newsletter') }}">
-            {!! __("S'inscrire à la newsletter") !!}
-        </a>
-    </div>
 
+    {{-- Contact Form --}}
+    <a href="/contact" class="contact-shortcut-tab bg-contactshortcut">
+        <img class="contact-shortcut-icon"
+             src="{{ asset('images/icon-email.svg') }}"
+             alt="{{ __('Contact') }}">
+        {!! __('Formulaire de contact') !!}
+    </a>
+
+    {{-- Newsletter --}}
+    <a class="contact-shortcut-tab bg-contactshortcut"
+       href="https://pm-instrumentation.us20.list-manage.com/subscribe?id=a90b5c784a&u=ab875244e3b4c9c00072a0125"
+       target="_blank"
+       rel="noopener">
+        <img class="contact-shortcut-icon" src="{{ asset('images/icon-newsletter.svg') }}" alt="{{ __('Newsletter') }}">
+        {!! __("S'inscrire à la newsletter") !!}
+    </a>
+
+    {{-- Live Chat --}}
     @isset($crisp_ID[$variant])
-        <div class="contact-shortcut-tab mt-px">
-            <button onclick="$crisp.push(['do', 'chat:open']); $crisp.push(['do', 'chat:show'])"
-               class="p-3 bg-contactshortcut flex items-center pr-16 focus:outline-none">
-                <img class="contact-shortcut-icon" src="{{ asset('images/icon-chat.svg') }}" alt="{{ __('Démarrer un chat') }}">
-                {!! __('Démarrer un chat en ligne') !!}
-            </button>
-        </div>
+        <button onclick="$crisp.push(['do', 'chat:open']); $crisp.push(['do', 'chat:show'])"
+           class="contact-shortcut-tab bg-contactshortcut focus:outline-none">
+            <img class="contact-shortcut-icon" src="{{ asset('images/icon-chat.svg') }}" alt="{{ __('Démarrer un chat') }}">
+            {!! __('Démarrer un chat en ligne') !!}
+        </button>
     @endisset
+
 </div>