Skip to content

Commit 06d8a37

Browse files
devnamdev2003devnamdev2003
committed
update ui
1 parent 4595b9d commit 06d8a37

2 files changed

Lines changed: 5 additions & 5 deletions

File tree

‎documentation/components/CalendarComponent.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1637,7 +1637,7 @@ <h3 id="inputs">
16371637
</div>
16381638

16391639
<div class="tab-pane fade " id="templateData">
1640-
<pre class="line-numbers"><code class="language-html">&lt;section id&#x3D;&quot;calendar&quot; class&#x3D;&quot;section p-4&quot;&gt;
1640+
<pre class="line-numbers"><code class="language-html">&lt;section id&#x3D;&quot;calendar&quot; class&#x3D;&quot;section p-3&quot;&gt;
16411641

16421642
&lt;!-- ░░ TOP BAR ░░ --&gt;
16431643
&lt;div class&#x3D;&quot;flex flex-col justify-between md:w-[60%] m-auto&quot;&gt;
@@ -1701,7 +1701,7 @@ <h3 id="inputs">
17011701
&lt;!-- &lt;h3 class&#x3D;&quot;text-center font-semibold text-[var(--color-text)] mb-2&quot;&gt;
17021702
Heatmap Legend
17031703
&lt;/h3&gt; --&gt;
1704-
&lt;div class&#x3D;&quot;flex justify-center gap-4 text-sm&quot;&gt;
1704+
&lt;div class&#x3D;&quot;flex justify-between md:justify-center md:gap-4 text-sm&quot;&gt;
17051705
&lt;div class&#x3D;&quot;flex items-center gap-1&quot;&gt;
17061706
&lt;span class&#x3D;&quot;w-5 h-5 rounded bg-[var(--color-gray)] inline-block&quot;&gt;&lt;/span&gt;
17071707
&lt;span class&#x3D;&quot;text-[var(--color-text)]&quot;&gt;No expense&lt;/span&gt;
@@ -1781,7 +1781,7 @@ <h3 id="inputs">
17811781
<script src="../js/libs/htmlparser.js"></script>
17821782
<script src="../js/libs/deep-iterator.js"></script>
17831783
<script>
1784-
var COMPONENT_TEMPLATE = '<div><section id="calendar" class="section p-4"> <!-- ░░ TOP BAR ░░ --> <div class="flex flex-col justify-between md:w-[60%] m-auto"> <div class="flex items-center justify-start pb-2"> <label for="isShowHeatmap" class="font-semibold pr-2">Show HeatMap</label> <label class="relative inline-flex items-center cursor-pointer"> <input type="checkbox" id="isShowHeatmap" [checked]="isShowHeatmap" (change)="toggleHeatmap()" class="sr-only peer"> <div class="w-10 h-6 bg-gray-600 rounded-full peer peer-checked:bg-[var(--color-accent)] transition-all"> </div> <span class="absolute left-1 top-1 w-4 h-4 bg-white rounded-full transition-all peer-checked:translate-x-4"></span> </label> </div> <div class="flex justify-between items-center pt-2 pb-6"> <button class="shrink-0" (click)="changeMonth(-1)"> <img src="assets/img/icon/icons8-left-arrow-50.png" alt="prev" class="w-[25px] h-[25px] transition-all duration-300 ease-in-out" style="filter: var(--icon-color2);"> </button> <div class="text-center font-semibold"> <a href="/music">Total Expenses: </a> <span class="text-[var(--color-green)]">{{currency}} {{ totalExpenses }}</span> </div> <button class="shrink-0" (click)="changeMonth(1)"> <img src="assets/img/icon/icons8-right-arrow-50.png" alt="next" class="w-[25px] h-[25px] transition-all duration-300 ease-in-out" style="filter: var(--icon-color2);"> </button> </div> <!-- ░░ CALENDAR ░░ --> <div> <h2 class="border-b border-[var(--color-white)] p-2 bg-[var(--color-accent)] text-[var(--color-white)] text-lg font-semibold text-center"> {{ calendarTitle }} </h2> <div class="grid grid-cols-7 text-center font-semibold shadow bg-[var(--color-accent)] text-[var(--color-white)] uppercase text-xs"> <div class="border-r border-[var(--color-white)] p-2" *ngFor="let day of weekDays">{{ day }}</div> </div> <div class="grid grid-cols-7 gap-2 mt-2 text-center text-sm"> <ng-container *ngFor="let day of calendarDays"> <div [ngClass]="day.classes" class="p-2 rounded" (click)="day.isCurrentMonth && openModal(day.date)"> {{ day.label }} </div> </ng-container> </div> </div> </div> <!-- ░░ HEATMAP LEGEND ░░ --> <div class="mt-10" *ngIf="isShowHeatmap"> <!-- <h3 class="text-center font-semibold text-[var(--color-text)] mb-2"> Heatmap Legend </h3> --> <div class="flex justify-center gap-4 text-sm"> <div class="flex items-center gap-1"> <span class="w-5 h-5 rounded bg-[var(--color-gray)] inline-block"></span> <span class="text-[var(--color-text)]">No expense</span> </div> <div class="flex items-center gap-1"> <span class="w-5 h-5 rounded bg-[var(--color-emerald)] inline-block"></span> <span class="text-[var(--color-text)]">&lt; 300</span> </div> <div class="flex items-center gap-1"> <span class="w-5 h-5 rounded bg-[var(--color-amber)] inline-block"></span> <span class="text-[var(--color-text)]">300 – 1000</span> </div> <div class="flex items-center gap-1"> <span class="w-5 h-5 rounded bg-[var(--color-rose)] inline-block"></span> <span class="text-[var(--color-text)]">&gt; 1000</span> </div> </div> </div> <!-- Modal --> <div id="dayModal" class="fixed inset-0 bg-black bg-opacity-50 items-center justify-center z-50 flex" *ngIf="showModal"> <div class="bg-[var(--color-bg)] p-6 rounded-xl w-11/12 md:w-1/2 max-h-[60vh] flex flex-col shadow-xl"> <div class="flex justify-between items-center mb-4"> <h2 class="text-lg font-bold text-[var(--color-text)]">{{ modalTitle }}</h2> <button (click)="closeModal()" class="text-[var(--color-red)] font-bold text-xl">&times;</button> </div> <ul class="space-y-3 overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-[var(--color-gray-500)] scrollbar-track-[var(--color-gray-500)] " style="max-height: 60vh;"> <li *ngIf="modalExpenses.length === 0" class="text-[var(--color-gray-500)]">No expenses found for this date.</li> <li *ngFor="let exp of modalExpenses" class="bg-[var(--color-surface)] hover:bg-[var(--list-hover)] rounded-lg p-4 shadow-md"> <div class="flex justify-between items-center mb-2"> <span class="text-lg font-semibold text-[var(--color-green)]">{{currency}} {{ exp.amount }}</span> <span class="text-sm">{{ exp.category_name || \'Uncategorized\' }}</span> </div> <div class="text-sm space-y-1"> <div><strong>Time:</strong> {{ exp.time }}</div> <div *ngIf="exp.note"><strong>Note:</strong> {{ exp.note }}</div> <div *ngIf="exp.location"><strong>Location:</strong> {{ exp.location }}</div> <div *ngIf="exp.payment_mode"><strong>Payment Mode:</strong> {{ exp.payment_mode }}</div> </div> </li> </ul> </div> </div></section></div>'
1784+
var COMPONENT_TEMPLATE = '<div><section id="calendar" class="section p-3"> <!-- ░░ TOP BAR ░░ --> <div class="flex flex-col justify-between md:w-[60%] m-auto"> <div class="flex items-center justify-start pb-2"> <label for="isShowHeatmap" class="font-semibold pr-2">Show HeatMap</label> <label class="relative inline-flex items-center cursor-pointer"> <input type="checkbox" id="isShowHeatmap" [checked]="isShowHeatmap" (change)="toggleHeatmap()" class="sr-only peer"> <div class="w-10 h-6 bg-gray-600 rounded-full peer peer-checked:bg-[var(--color-accent)] transition-all"> </div> <span class="absolute left-1 top-1 w-4 h-4 bg-white rounded-full transition-all peer-checked:translate-x-4"></span> </label> </div> <div class="flex justify-between items-center pt-2 pb-6"> <button class="shrink-0" (click)="changeMonth(-1)"> <img src="assets/img/icon/icons8-left-arrow-50.png" alt="prev" class="w-[25px] h-[25px] transition-all duration-300 ease-in-out" style="filter: var(--icon-color2);"> </button> <div class="text-center font-semibold"> <a href="/music">Total Expenses: </a> <span class="text-[var(--color-green)]">{{currency}} {{ totalExpenses }}</span> </div> <button class="shrink-0" (click)="changeMonth(1)"> <img src="assets/img/icon/icons8-right-arrow-50.png" alt="next" class="w-[25px] h-[25px] transition-all duration-300 ease-in-out" style="filter: var(--icon-color2);"> </button> </div> <!-- ░░ CALENDAR ░░ --> <div> <h2 class="border-b border-[var(--color-white)] p-2 bg-[var(--color-accent)] text-[var(--color-white)] text-lg font-semibold text-center"> {{ calendarTitle }} </h2> <div class="grid grid-cols-7 text-center font-semibold shadow bg-[var(--color-accent)] text-[var(--color-white)] uppercase text-xs"> <div class="border-r border-[var(--color-white)] p-2" *ngFor="let day of weekDays">{{ day }}</div> </div> <div class="grid grid-cols-7 gap-2 mt-2 text-center text-sm"> <ng-container *ngFor="let day of calendarDays"> <div [ngClass]="day.classes" class="p-2 rounded" (click)="day.isCurrentMonth && openModal(day.date)"> {{ day.label }} </div> </ng-container> </div> </div> </div> <!-- ░░ HEATMAP LEGEND ░░ --> <div class="mt-10" *ngIf="isShowHeatmap"> <!-- <h3 class="text-center font-semibold text-[var(--color-text)] mb-2"> Heatmap Legend </h3> --> <div class="flex justify-between md:justify-center md:gap-4 text-sm"> <div class="flex items-center gap-1"> <span class="w-5 h-5 rounded bg-[var(--color-gray)] inline-block"></span> <span class="text-[var(--color-text)]">No expense</span> </div> <div class="flex items-center gap-1"> <span class="w-5 h-5 rounded bg-[var(--color-emerald)] inline-block"></span> <span class="text-[var(--color-text)]">&lt; 300</span> </div> <div class="flex items-center gap-1"> <span class="w-5 h-5 rounded bg-[var(--color-amber)] inline-block"></span> <span class="text-[var(--color-text)]">300 – 1000</span> </div> <div class="flex items-center gap-1"> <span class="w-5 h-5 rounded bg-[var(--color-rose)] inline-block"></span> <span class="text-[var(--color-text)]">&gt; 1000</span> </div> </div> </div> <!-- Modal --> <div id="dayModal" class="fixed inset-0 bg-black bg-opacity-50 items-center justify-center z-50 flex" *ngIf="showModal"> <div class="bg-[var(--color-bg)] p-6 rounded-xl w-11/12 md:w-1/2 max-h-[60vh] flex flex-col shadow-xl"> <div class="flex justify-between items-center mb-4"> <h2 class="text-lg font-bold text-[var(--color-text)]">{{ modalTitle }}</h2> <button (click)="closeModal()" class="text-[var(--color-red)] font-bold text-xl">&times;</button> </div> <ul class="space-y-3 overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-[var(--color-gray-500)] scrollbar-track-[var(--color-gray-500)] " style="max-height: 60vh;"> <li *ngIf="modalExpenses.length === 0" class="text-[var(--color-gray-500)]">No expenses found for this date.</li> <li *ngFor="let exp of modalExpenses" class="bg-[var(--color-surface)] hover:bg-[var(--list-hover)] rounded-lg p-4 shadow-md"> <div class="flex justify-between items-center mb-2"> <span class="text-lg font-semibold text-[var(--color-green)]">{{currency}} {{ exp.amount }}</span> <span class="text-sm">{{ exp.category_name || \'Uncategorized\' }}</span> </div> <div class="text-sm space-y-1"> <div><strong>Time:</strong> {{ exp.time }}</div> <div *ngIf="exp.note"><strong>Note:</strong> {{ exp.note }}</div> <div *ngIf="exp.location"><strong>Location:</strong> {{ exp.location }}</div> <div *ngIf="exp.payment_mode"><strong>Payment Mode:</strong> {{ exp.payment_mode }}</div> </div> </li> </ul> </div> </div></section></div>'
17851785
var COMPONENTS = [{'name': 'AddExpenseComponent', 'selector': 'app-add-expense'},{'name': 'AiComponent', 'selector': 'app-ai'},{'name': 'AppComponent', 'selector': 'app-root'},{'name': 'BudgetComponent', 'selector': 'app-budget'},{'name': 'CalendarComponent', 'selector': 'app-calendar'},{'name': 'CategoryDropdownComponent', 'selector': 'app-category-dropdown'},{'name': 'DownloadComponentComponent', 'selector': 'app-download-component'},{'name': 'ExpenseDetailsModalComponent', 'selector': 'app-expense-details-modal'},{'name': 'ExpenseListComponent', 'selector': 'app-expense-list'},{'name': 'ExpenseWiseComponent', 'selector': 'app-expense-wise'},{'name': 'FooterComponent', 'selector': 'app-footer'},{'name': 'FormModelComponent', 'selector': 'app-form-model'},{'name': 'GlobalLoaderComponent', 'selector': 'app-global-loader'},{'name': 'GraphsComponent', 'selector': 'app-graphs'},{'name': 'HamburgerMenuComponent', 'selector': 'app-hamburger-menu'},{'name': 'HomeComponent', 'selector': 'app-home'},{'name': 'InstallAppPopupComponentComponent', 'selector': 'app-install-app-popup-component'},{'name': 'ListExpensesComponent', 'selector': 'app-list-expenses'},{'name': 'MusicComponent', 'selector': 'app-music'},{'name': 'NavbarComponent', 'selector': 'app-navbar'},{'name': 'PieChartComponent', 'selector': 'app-pie-chart'},{'name': 'PlaylistMusicComponent', 'selector': 'app-playlist-music'},{'name': 'SearchButtonComponent', 'selector': 'app-search-button'},{'name': 'SearchMusicComponent', 'selector': 'app-search-music'},{'name': 'SettingItemComponent', 'selector': 'app-setting-item'},{'name': 'SettingsComponent', 'selector': 'app-settings'},{'name': 'SidebarComponent', 'selector': 'app-sidebar'},{'name': 'TemplatePlaygroundComponent', 'selector': 'template-playground-root'},{'name': 'ToastComponent', 'selector': 'app-toast'}];
17861786
var DIRECTIVES = [];
17871787
var ACTUAL_COMPONENT = {'name': 'CalendarComponent'};

‎src/app/features/calendar/calendar.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<section id="calendar" class="section p-4">
1+
<section id="calendar" class="section p-3">
22

33
<!-- ░░ TOP BAR ░░ -->
44
<div class="flex flex-col justify-between md:w-[60%] m-auto">
@@ -62,7 +62,7 @@
6262
<!-- <h3 class="text-center font-semibold text-[var(--color-text)] mb-2">
6363
Heatmap Legend
6464
</h3> -->
65-
<div class="flex justify-center gap-4 text-sm">
65+
<div class="flex justify-between md:justify-center md:gap-4 text-sm">
6666
<div class="flex items-center gap-1">
6767
<span class="w-5 h-5 rounded bg-[var(--color-gray)] inline-block"></span>
6868
<span class="text-[var(--color-text)]">No expense</span>

0 commit comments

Comments
 (0)