diff --git a/components/global/G1Crowdfunding.vue b/components/global/G1Crowdfunding.vue index 130c06da3e38c5abf9f53601335c164462c0d50f..f6fa1dd31229a44cfed68b2b452cad4a4c93cfa7 100644 --- a/components/global/G1Crowdfunding.vue +++ b/components/global/G1Crowdfunding.vue @@ -1,5 +1,5 @@ <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> diff --git a/components/layout/LayoutFooter.vue b/components/layout/LayoutFooter.vue index eab2813914e175c365980d673735d3fa3f13c264..23d402d8657c1c582e66c8812bae7943f5aea271 100644 --- a/components/layout/LayoutFooter.vue +++ b/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> diff --git a/nuxt.config.js b/nuxt.config.js index eac103853cb3a90af727063749c54bef3fe553f8..92c3a443c0737d7472bc1f9a0ca9c9cc88a5435f 100644 --- a/nuxt.config.js +++ b/nuxt.config.js @@ -78,6 +78,7 @@ export default { 'faHeart', 'faInfoCircle', 'faCheckCircle', + 'faCheck', 'faExclamationCircle', 'faExclamationTriangle', 'faExternalLinkAlt', diff --git a/plugins/vue-tailwind.js b/plugins/vue-tailwind.js index 0c799ef395d359b8dd29e9885097d2348730b423..178a64d14f79736ab8e846e1d330ef463601c707 100644 --- a/plugins/vue-tailwind.js +++ b/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', }, }, },