Merge branch 'midiland/monnaie-libre-fr-fix_css_footer'

components/global/G1Crowdfunding.vue

 <template>
-  <div class="overflow-hidden whitespace-nowrap relative">
+  <div class="lg:flex-nowrap flex-wrap justify-between relative">
     <slot
       name="stats"
       :node="node"
@@ -13,7 +13,7 @@
       :issuers="issuers"
       :graph="graph"
     >
-      <div class="mr-8 pt-2 leading-5">
+      <div class="leading-5 px-2 lg:px-0">
         <div v-if="unit === 'DU'">
           <span v-if="total && dividend" class="text-xl font-bold">
             {{
@@ -28,31 +28,39 @@
           </span>
           {{ ' Ğ1' }}
         </div>
-        <div class="font-extralight">
+        <div class="text-xl font-extralight">
           {{ `Montant collecté en ${months} mois` }}
         </div>
       </div>
 
-      <div class="mr-8 pt-2 leading-5">
+      <div class="leading-5 px-2 lg:px-0">
         <div class="text-xl font-bold">{{ issuers.length }}</div>
-        <div class="font-extralight">{{ 'Donneurs' }}</div>
+        <div class="text-xl font-extralight">{{ 'Donneurs' }}</div>
       </div>
     </slot>
 
-    <div class="flex items-center pt-2">
-      <slot name="button" :on-click="onClick">
-        <t-button :text="buttonText" @click="onClick" />
+    <div
+      class="flex items-center w-full lg:w-max justify-center px-2 lg:px-0 pt-2 lg:pt-0"
+    >
+      <slot
+        v-if="!isKeyCopied"
+        name="button"
+        class="w-full lg:w-max"
+        :on-click="onClick"
+      >
+        <t-button class="w-full lg:w-max" @click="onClick">
+          {{ buttonText }}
+        </t-button>
       </slot>
-    </div>
-
-    <div class="absolute">
-      <t-alert variant="success" :show="isKeyCopied">
-        <div class="flex items-center">
-          <div>Clé copiée :</div>
-          <div class="ml-2 select-all text-xs" v-text="pubkey" />
-        </div>
-        <div>Ouvrez Césium pour faire votre don. Merci !</div>
-      </t-alert>
+      <t-button
+        v-else
+        variant="success"
+        class="w-full lg:w-max"
+        @click="onClick"
+      >
+        <fa icon="check" />
+        Clé copiée
+      </t-button>
     </div>
   </div>
 </template>

components/layout/LayoutFooter.vue

@@ -21,7 +21,7 @@
               class="flex"
             >
               <template #button="{ onClick }">
-                <t-button @click="onClick">
+                <t-button @click="onClick" class="w-full lg:w-max">
                   <fa icon="heart"></fa><span class="ml-2">Je participe !</span>
                 </t-button>
               </template>
@@ -29,7 +29,9 @@
           </div>
         </div>
 
-        <div class="w-full sm:w-1/2 md:w-1/2 pl-8 flex justify-between">
+        <div
+          class="w-full flex flex-col pl-0 sm:w-1/2 sm:items-start sm:pl-8 md:justify-around md:flex-row"
+        >
           <div>
             <h3 class="text-3xl py-4">Sections</h3>
             <ul>

nuxt.config.js

@@ -78,6 +78,7 @@ export default {
             'faHeart',
             'faInfoCircle',
             'faCheckCircle',
+            'faCheck',
             'faExclamationCircle',
             'faExclamationTriangle',
             'faExternalLinkAlt',

plugins/vue-tailwind.js

@@ -50,6 +50,8 @@ const settings = {
           'block px-4 py-2 transition duration-100 ease-in-out rounded hover:shadow-sm hover:underline hover:bg-white hover:bg-opacity-50 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed',
         custom:
           'block px-4 py-2 text-white transition duration-100 ease-in-out border border-transparent rounded shadow-sm  focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed',
+        success:
+          'text-white bg-green-500 border border-transparent shadow-sm rounded hover:bg-green-600 block px-4 py-2 transition duration-100 ease-in-out focus:border-green-500 focus:ring-2 focus:ring-green-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed',
       },
     },
   },