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

Compare commits

base: bnilsen:25f6d73fc719965ef6708871848f67f47284ce11
Branches Tags
bnilsen:main
bnilsen:test-fixtures
..
compare: bnilsen:9c9050c558a612e1ddafd050674531f3a1ef2b69
Branches Tags
bnilsen:main
bnilsen:test-fixtures

No commits in common. "25f6d73fc719965ef6708871848f67f47284ce11" and "9c9050c558a612e1ddafd050674531f3a1ef2b69" have entirely different histories.
25f6d73fc7 ... 9c9050c558

3 changed files with 20 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

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

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