refactor: enhance AnnualBudget component layout with improved dark mode support, streamline table structure, and update CSS for better visual consistency
This commit is contained in:
parent
24e8b7a3a8
commit
f073f91569
14 changed files with 1440 additions and 922 deletions
1305
pages/budget.vue
1305
pages/budget.vue
File diff suppressed because it is too large
Load diff
|
|
@ -1,46 +1,56 @@
|
|||
<template>
|
||||
<div>
|
||||
<div
|
||||
class="template-container min-h-screen bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100 py-8"
|
||||
>
|
||||
class="template-container min-h-screen bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100 py-8">
|
||||
<div class="max-w-6xl mx-auto px-4 relative">
|
||||
<div class="mb-8">
|
||||
<h1 class="text-3xl font-bold text-neutral-900 dark:text-white mb-2">
|
||||
More Resources & Templates
|
||||
</h1>
|
||||
<p class="text-neutral-700 dark:text-neutral-200">
|
||||
Additional tools, templates, and resources to support your cooperative journey.
|
||||
Additional tools, templates, and resources to support your
|
||||
cooperative journey.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-8">
|
||||
<!-- External Templates Section -->
|
||||
<section>
|
||||
<h2 class="text-2xl font-semibold text-neutral-900 dark:text-white mb-4">
|
||||
<h2
|
||||
class="text-2xl font-semibold text-neutral-900 dark:text-white mb-4">
|
||||
External Templates
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Miro Template -->
|
||||
<div class="template-card">
|
||||
<div class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
|
||||
<div
|
||||
class="relative bg-white dark:bg-neutral-950 border border-black dark:border-white p-6"
|
||||
>
|
||||
<h3 class="text-xl font-semibold text-neutral-900 dark:text-white mb-2">
|
||||
class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
|
||||
<div
|
||||
class="relative bg-white dark:bg-neutral-950 border border-black dark:border-white p-6">
|
||||
<h3
|
||||
class="text-xl font-semibold text-neutral-900 dark:text-white mb-2">
|
||||
Goals & Values Exercise
|
||||
</h3>
|
||||
<p class="text-neutral-700 dark:text-neutral-200 mb-4">
|
||||
A Miro template to help your team align on shared goals and values through collaborative exercises.
|
||||
A Miro template to help your team align on shared goals and
|
||||
values through collaborative exercises.
|
||||
</p>
|
||||
<a
|
||||
href="https://miro.com/miroverse/goals-values-exercise/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-flex items-center px-4 py-2 bg-black dark:bg-white text-white dark:text-black font-medium hover:opacity-90 transition-opacity"
|
||||
>
|
||||
class="inline-flex items-center px-4 py-2 bg-black dark:bg-white text-white dark:text-black font-medium hover:opacity-90 transition-opacity">
|
||||
Open in Miro
|
||||
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||
<svg
|
||||
class="w-4 h-4 ml-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -48,25 +58,34 @@
|
|||
|
||||
<!-- CommunityRule Templates -->
|
||||
<div class="template-card">
|
||||
<div class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
|
||||
<div
|
||||
class="relative bg-white dark:bg-neutral-950 border border-black dark:border-white p-6"
|
||||
>
|
||||
<h3 class="text-xl font-semibold text-neutral-900 dark:text-white mb-2">
|
||||
class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
|
||||
<div
|
||||
class="relative bg-white dark:bg-neutral-950 border border-black dark:border-white p-6">
|
||||
<h3
|
||||
class="text-xl font-semibold text-neutral-900 dark:text-white mb-2">
|
||||
CommunityRule Governance Templates
|
||||
</h3>
|
||||
<p class="text-neutral-700 dark:text-neutral-200 mb-4">
|
||||
A collection of governance templates and patterns for democratic organizations and communities.
|
||||
A collection of governance templates and patterns for
|
||||
democratic organizations and communities.
|
||||
</p>
|
||||
<a
|
||||
href="https://communityrule.info/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-flex items-center px-4 py-2 bg-black dark:bg-white text-white dark:text-black font-medium hover:opacity-90 transition-opacity"
|
||||
>
|
||||
class="inline-flex items-center px-4 py-2 bg-black dark:bg-white text-white dark:text-black font-medium hover:opacity-90 transition-opacity">
|
||||
Browse Templates
|
||||
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002 2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||
<svg
|
||||
class="w-4 h-4 ml-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002 2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -76,7 +95,8 @@
|
|||
|
||||
<!-- PDF Downloads Section -->
|
||||
<section>
|
||||
<h2 class="text-2xl font-semibold text-neutral-900 dark:text-white mb-4">
|
||||
<h2
|
||||
class="text-2xl font-semibold text-neutral-900 dark:text-white mb-4">
|
||||
Wizard PDF Downloads
|
||||
</h2>
|
||||
<p class="text-neutral-700 dark:text-neutral-200 mb-4">
|
||||
|
|
@ -86,21 +106,23 @@
|
|||
<div
|
||||
v-for="pdf in pdfDownloads"
|
||||
:key="pdf.id"
|
||||
class="template-card"
|
||||
>
|
||||
<div class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
|
||||
class="template-card">
|
||||
<div
|
||||
class="relative bg-white dark:bg-neutral-950 border border-black dark:border-white p-6"
|
||||
>
|
||||
class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
|
||||
<div
|
||||
class="relative bg-white dark:bg-neutral-950 border border-black dark:border-white p-6">
|
||||
<div class="flex items-start justify-between mb-2">
|
||||
<h3 class="text-lg font-semibold text-neutral-900 dark:text-white">
|
||||
<h3
|
||||
class="text-lg font-semibold text-neutral-900 dark:text-white">
|
||||
{{ pdf.name }}
|
||||
</h3>
|
||||
<span class="text-xs text-neutral-600 dark:text-neutral-400 bg-neutral-100 dark:bg-neutral-800 px-2 py-1 rounded">
|
||||
<span
|
||||
class="text-xs text-neutral-600 dark:text-neutral-400 bg-neutral-100 dark:bg-neutral-800 px-2 py-1 rounded">
|
||||
PDF
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-sm text-neutral-700 dark:text-neutral-200 mb-4">
|
||||
<p
|
||||
class="text-sm text-neutral-700 dark:text-neutral-200 mb-4">
|
||||
{{ pdf.description }}
|
||||
</p>
|
||||
<button
|
||||
|
|
@ -109,13 +131,20 @@
|
|||
'inline-flex items-center px-4 py-2 font-medium transition-opacity',
|
||||
pdf.available
|
||||
? 'bg-black dark:bg-white text-white dark:text-black hover:opacity-90'
|
||||
: 'bg-neutral-200 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-500 cursor-not-allowed'
|
||||
]"
|
||||
>
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
: 'bg-neutral-200 dark:bg-neutral-800 text-neutral-500 dark:text-neutral-500 cursor-not-allowed',
|
||||
]">
|
||||
<svg
|
||||
class="w-4 h-4 mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
{{ pdf.available ? 'Download' : 'Coming Soon' }}
|
||||
{{ pdf.available ? "Download" : "Coming Soon" }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -131,48 +160,48 @@
|
|||
// PDF downloads list with placeholder data
|
||||
const pdfDownloads = [
|
||||
{
|
||||
id: 'bylaws',
|
||||
name: 'Bylaws Wizard',
|
||||
description: 'Create comprehensive bylaws for your cooperative',
|
||||
id: "bylaws",
|
||||
name: "Bylaws Wizard",
|
||||
description: "Create comprehensive bylaws for your cooperative",
|
||||
available: false,
|
||||
url: '#'
|
||||
url: "#",
|
||||
},
|
||||
{
|
||||
id: 'operating-agreement',
|
||||
name: 'Operating Agreement Wizard',
|
||||
description: 'Draft an operating agreement for your LLC cooperative',
|
||||
id: "operating-agreement",
|
||||
name: "Operating Agreement Wizard",
|
||||
description: "Draft an operating agreement for your LLC cooperative",
|
||||
available: false,
|
||||
url: '#'
|
||||
url: "#",
|
||||
},
|
||||
{
|
||||
id: 'articles',
|
||||
name: 'Articles of Incorporation',
|
||||
description: 'Template for articles of incorporation',
|
||||
id: "articles",
|
||||
name: "Articles of Incorporation",
|
||||
description: "Template for articles of incorporation",
|
||||
available: false,
|
||||
url: '#'
|
||||
url: "#",
|
||||
},
|
||||
{
|
||||
id: 'membership',
|
||||
name: 'Membership Agreement',
|
||||
description: 'Define membership terms and conditions',
|
||||
id: "membership",
|
||||
name: "Membership Agreement",
|
||||
description: "Define membership terms and conditions",
|
||||
available: false,
|
||||
url: '#'
|
||||
url: "#",
|
||||
},
|
||||
{
|
||||
id: 'patronage',
|
||||
name: 'Patronage Policy',
|
||||
description: 'Structure your patronage distribution system',
|
||||
id: "patronage",
|
||||
name: "Patronage Policy",
|
||||
description: "Structure your patronage distribution system",
|
||||
available: false,
|
||||
url: '#'
|
||||
url: "#",
|
||||
},
|
||||
{
|
||||
id: 'conflict',
|
||||
name: 'Conflict Resolution Process',
|
||||
description: 'Establish clear conflict resolution procedures',
|
||||
id: "conflict",
|
||||
name: "Conflict Resolution Process",
|
||||
description: "Establish clear conflict resolution procedures",
|
||||
available: false,
|
||||
url: '#'
|
||||
}
|
||||
]
|
||||
url: "#",
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -180,18 +209,6 @@ const pdfDownloads = [
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.dither-shadow {
|
||||
background-image: repeating-linear-gradient(
|
||||
45deg,
|
||||
transparent,
|
||||
transparent 2px,
|
||||
currentColor 2px,
|
||||
currentColor 4px
|
||||
);
|
||||
opacity: 0.1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.dither-tag {
|
||||
background-image: repeating-linear-gradient(
|
||||
135deg,
|
||||
|
|
@ -202,4 +219,4 @@ const pdfDownloads = [
|
|||
);
|
||||
background-size: 4px 4px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue