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