bnilsen/custom_ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Moved cards to our card implementation.

Browse source
This commit is contained in:
rocketdebris 2025-12-20 15:24:39 -05:00
parent 25f6d73fc7
commit 290998da96
1 changed files with 12 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

34
frontend/src/components/pages/Clients.vue
View file

@ -4,7 +4,7 @@
<!-- Status Chart Section -->
<div class="widgets-grid">
<!-- Incomplete Bids Widget -->
<Card class="widget-card">
<Card>
<template #header>
<div class="widget-header">
<Edit class="widget-icon" />
@ -27,7 +27,7 @@
</template>
</Card>
<!-- Unapproved Estimates Widget -->
<Card class="widget-card">
<Card>
<template #header>
<div class="widget-header">
<ChatBubbleQuestion class="widget-icon" />
@ -50,7 +50,7 @@
</template>
</Card>
<!-- Half Down Widget -->
<Card class="widget-card">
<Card>
<template #header>
<div class="widget-header">
<CreditCard class="widget-icon" />
@ -73,7 +73,7 @@
</template>
</Card>
<!-- Late Balances Widget -->
<Card class="widget-card">
<Card>
<template #header>
<div class="widget-header">
<CardNoAccess class="widget-icon" />
@ -113,7 +113,7 @@
</template>
<script setup>
import { onMounted, ref, watch, computed } from "vue";
import Card from "primevue/card";
import Card from "../common/Card.vue";
import DataTable from "../common/DataTable.vue";
import StatusChart from "../common/StatusChart.vue";
import Api from "../../api";
@ -462,25 +462,11 @@ onMounted(async () => {
</script scoped>
<style lang="css">
.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 {
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)
}
.widget-card:hover {
/*transform: translateY(-2px);*/
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
margin-left: 30px;
}
.widget-header {
@ -506,11 +492,15 @@ onMounted(async () => {
display: flex;
flex-direction: column;
margin: 0;
width: 200px;
align-items: center;
padding: 20px 20px 20px;
/*gap: 15px;*/
}
.sidebar-button {
justify-content: center;
}
.page-container {
height: 100%;
}