wip

code4romania · Nov 13, 2023 · c9790ea · c9790ea
1 parent 77d94f1
commit c9790ea
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 28 deletions.
diff --git a/app/Models/Project.php b/app/Models/Project.php
@@ -163,7 +163,7 @@ public function getPercentageAttribute(): float
             return 0;
         }
 
-        return min(100, $this->total_donations / $this->target_budget * 100);
+        return min(100, round($this->total_donations / $this->target_budget * 100, 2));
     }
 
     public function getActiveAttribute(): bool

diff --git a/resources/js/Components/cards/ProjectCard.vue b/resources/js/Components/cards/ProjectCard.vue
@@ -1,8 +1,8 @@
 <template>
-    <article class="flex flex-col overflow-hidden bg-white divide-y divide-gray-200 rounded-lg drop-shadow-lg">
+    <article class="flex flex-col overflow-hidden bg-white rounded-lg drop-shadow-lg">
         <Link
             :href="project.type === 'project' ? route('projects.show', project) : route('bcr.show', project)"
-            class="relative w-full overflow-hidden group aspect-w-5 aspect-h-3"
+            class="relative w-full overflow-hidden group aspect-w-5 aspect-h-3 drop-shadow-sm"
         >
             <img
                 :src="project.image"
@@ -44,7 +44,7 @@
             </div>
         </Link>
 
-        <div class="p-6 text-left">
+        <div class="flex-1 p-6 text-left">
             <Link
                 v-if="project.type === 'project'"
                 :href="route('organizations.show', project.organization)"
@@ -71,22 +71,6 @@
                 </div>
             </div>
 
-            <div class="mt-8" v-if="project.donations">
-                <div class="flex items-center justify-between mb-1 text-lg font-bold">
-                    <p class="text-cyan-900" v-text="project.donations.total" />
-                    <p class="text-primary-500" v-text="project.donations.target" />
-                </div>
-
-                <div class="w-full h-5 bg-gray-200">
-                    <div
-                        :class="[`h-5`, project.donations.percentage >= 100 ? 'bg-primary-500' : 'bg-cyan-900']"
-                        :style="{
-                            width: `${project.donations.percentage}%`,
-                        }"
-                    ></div>
-                </div>
-            </div>
-
             <div
                 v-if="'admin' == cardType"
                 class="flex mt-4 overflow-hidden border border-gray-300 divide-x divide-gray-300 rounded-md shadow-sm"
@@ -151,14 +135,31 @@
                 </div>
             </Modal>
         </div>
+
+        <div class="px-6 pb-6" v-if="project.donations">
+            <div class="flex items-center justify-between mb-1 text-lg font-bold">
+                <p class="text-cyan-900" v-text="project.donations.total" />
+                <p class="text-primary-500" v-text="project.donations.target" />
+            </div>
+
+            <progress
+                class="w-full h-5 progress-unfilled:bg-gray-200"
+                :class="[
+                    project.donations.percentage >= 100
+                        ? 'progress-filled:bg-primary-500'
+                        : 'progress-filled:bg-cyan-900',
+                ]"
+                :value="project.donations.percentage"
+                max="100"
+            >
+                {{ project.donations.percentage }}%
+            </progress>
+        </div>
     </article>
 </template>
 
 <script setup>
-    import { computed, onMounted } from 'vue';
-
-    /** Import components. */
-    import Icon from '@/Components/Icon.vue';
+    import { computed } from 'vue';
     import SecondaryButton from '@/Components/buttons/SecondaryButton.vue';
     import DonateModal from '@/Components/modals/DonateModal.vue';
     import Modal from '@/Components/modals/Modal.vue';

diff --git a/resources/js/Components/templates/PaginatedGrid.vue b/resources/js/Components/templates/PaginatedGrid.vue
@@ -3,8 +3,8 @@
         <slot />
 
         <template v-if="list.data?.length">
-            <ul class="grid mb-10" :class="classes">
-                <li v-for="item in list.data" :key="item.id">
+            <div class="grid mb-10" :class="classes">
+                <template v-for="item in list.data" :key="item.id">
                     <ProjectCard v-if="'project' === type" :project="item" :cardType="cardType" />
 
                     <OrganizationCard v-else-if="'ong' === type" :organization="item" />
@@ -14,8 +14,8 @@
                     <RegionalProject v-else-if="'project-regional' === cardType" :data="item" />
 
                     <ChampionshipProject v-else-if="'project-championship' === cardType" :data="item" />
-                </li>
-            </ul>
+                </template>
+            </div>
 
             <!-- Pagination -->
             <Pagination v-if="list.links && list.links.first !== list.links.last" :resource="list" />

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,5 +1,6 @@
 const defaultTheme = require('tailwindcss/defaultTheme');
 const colors = require('tailwindcss/colors');
+const plugin = require('tailwindcss/plugin');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -78,5 +79,9 @@ module.exports = {
         require('@tailwindcss/forms'),
         require('@tailwindcss/aspect-ratio'),
         require('@tailwindcss/typography'),
+        plugin(function ({ addVariant }) {
+            addVariant('progress-unfilled', ['&::-webkit-progress-bar', '&']);
+            addVariant('progress-filled', ['&::-webkit-progress-value', '&::-moz-progress-bar', '&']);
+        })
     ],
 };