CaWittMN08/custom_ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Shrank Cards on the Dashboard. Implemented own Card as well.

Browse Source
This commit is contained in:
rocketdebris 2025-12-20 14:54:07 -05:00
parent 796b835c08
commit 6d9342a970
3 changed files with 58 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/components/common/Card.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<div class="card">
<slot name="header">
</slot>
<slot name="content">
</slot>
</div>
</template>
<script setup>
</script>
<style scoped>
.card {
width: 200px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-radius: 12px;
display: flex;
justify-content: space-between;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
background-color: var(--theme-surface-alt);
}
.card:hover {
/*transform: translateY(-2px);*/
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
</style>

6
frontend/src/components/common/TodoChart.vue
View File

@ -232,11 +232,13 @@ watch(() => props.completedNumber, (newValue) => {
.chart-wrapper {
position: relative;
height: 300px;
margin-top: 20px;
height: 200px;
width: 200px;
/*margin-top: 20px;*/
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.chart-canvas {

42
frontend/src/components/pages/Home.vue
View File

@ -4,7 +4,7 @@
<div class="widgets-grid">
<!-- Locates Widget -->
<Card class="widget-card">
<Card>
<template #header>
<div class="widget-header">
<ShieldSearch class="widget-icon" />
@ -26,7 +26,7 @@
</template>
</Card>
<!-- Permits Widget -->
<Card class="widget-card">
<Card >
<template #header>
<div class="widget-header">
<ClipboardCheck class="widget-icon" />
@ -48,7 +48,7 @@
</template>
</Card>
<!-- Permits Finalization Widget -->
<Card class="widget-card">
<Card >
<template #header>
<div class="widget-header">
<DoubleCheck class="widget-icon" />
@ -70,7 +70,7 @@
</template>
</Card>
<!-- Warranties Widget -->
<Card class="widget-card">
<Card >
<template #header>
<div class="widget-header">
<Shield class="widget-icon" />
@ -92,7 +92,7 @@
</template>
</Card>
<!-- Incomplete Bids Widget -->
<Card class="widget-card">
<Card >
<template #header>
<div class="widget-header">
<Edit class="widget-icon" />
@ -115,7 +115,7 @@
</template>
</Card>
<!-- Unapproved Estimates Widget -->
<Card class="widget-card">
<Card >
<template #header>
<div class="widget-header">
<ChatBubbleQuestion class="widget-icon" />
@ -138,7 +138,7 @@
</template>
</Card>
<!-- Half Down Widget -->
<Card class="widget-card">
<Card >
<template #header>
<div class="widget-header">
<CreditCard class="widget-icon" />
@ -161,7 +161,7 @@
</template>
</Card>
<!-- Late Balances Widget -->
<Card class="widget-card">
<Card >
<template #header>
<div class="widget-header">
<CardNoAccess class="widget-icon" />
@ -184,7 +184,7 @@
</template>
</Card>
<!-- Backflow Tests Widget -->
<Card class="widget-card">
<Card >
<template #header>
<div class="widget-header">
<WateringSoil class="widget-icon" />
@ -207,7 +207,7 @@
</template>
</Card>
<!-- Curbing Widget -->
<Card class="widget-card">
<Card >
<template #header>
<div class="widget-header">
<SoilAlt class="widget-icon" />
@ -230,7 +230,7 @@
</template>
</Card>
<!-- Hyrdoseeding Widget -->
<Card class="widget-card">
<Card >
<template #header>
<div class="widget-header">
<SoilAlt class="widget-icon" />
@ -253,7 +253,7 @@
</template>
</Card>
<!-- Machines Widget -->
<Card class="widget-card">
<Card >
<template #header>
<div class="widget-header">
<Truck class="widget-icon" />
@ -276,7 +276,7 @@
</template>
</Card>
<!-- Deliveries Widget -->
<Card class="widget-card">
<Card >
<template #header>
<div class="widget-header">
<Truck class="widget-icon" />
@ -305,7 +305,8 @@
<script setup>
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import Card from "primevue/card";
//import Card from "primevue/card";
import Card from "../common/Card.vue";
import Tag from "primevue/tag";
import { Calendar, Community, Hammer, PathArrowSolid, Clock, Shield, ShieldSearch,
ClipboardCheck, DoubleCheck, CreditCard, CardNoAccess, ChatBubbleQuestion, Edit,
@ -361,13 +362,15 @@ onMounted(() => {
}
.widgets-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 30px;
}
.widget-card {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 20%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-radius: 12px;
display: flex;
@ -375,7 +378,7 @@ onMounted(() => {
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
background-color: var(--theme-surface-alt)
background-color: var(--theme-surface-alt);
}
.widget-card:hover {
@ -406,6 +409,9 @@ onMounted(() => {
display: flex;
flex-direction: column;
margin: 0;
width: 200px;
align-items: center;
padding: 20px 20px 20px;
/*gap: 15px;*/
}