risadmin_prod/authsec_angular_clarity_modern
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

todo

Browse Source
This commit is contained in:
string 2025-10-29 12:21:24 +05:30
parent 4c135c4901
commit cf4fc1be93
2 changed files with 117 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/to-do-chart/to-do-chart.component.html
View File

@ -280,31 +280,28 @@
</div>
<!-- Existing content -->
<table class="table todo-table">
<thead>
<th class="c-col">#</th>
<th>Item</th>
<th></th>
</thead>
<tr class="ui basic segment" *ngFor="let todo of todoList; let i = index">
<td class="c-col">{{i + 1}}</td>
<td>{{todo}}</td>
<td style="text-align:right">
<a routerLink="." (click)="removeTodo(i)">
<clr-icon shape="times"></clr-icon>
</a>
</td>
</tr>
<tr>
<td></td>
<td>
<input [(ngModel)]="todo" (keyup.enter)="addTodo(todo)" placeholder="Add Todo" class="clr-input todo-input">
</td>
<td style="text-align:right">
<a color='primary' (click)="addTodo(todo)" class="add-button">
<clr-icon shape="plus"></clr-icon>
</a>
</td>
</tr>
</table>
<div class="todo-table-container">
<table class="table todo-table">
<thead>
<th class="c-col">#</th>
<th>Item</th>
<th></th>
</thead>
<tr class="ui basic segment" *ngFor="let todo of todoList; let i = index">
<td class="c-col">{{i + 1}}</td>
<td>{{todo}}</td>
<td style="text-align:right">
<a (click)="removeTodo(i)" class="remove-button">
<clr-icon shape="times"></clr-icon>
</a>
</td>
</tr>
</table>
</div>
<div class="add-todo-section">
<input [(ngModel)]="todo" (keyup.enter)="addTodo(todo)" placeholder="Add Todo" class="clr-input todo-input">
<button (click)="addTodo(todo)" class="btn btn-primary add-button">
<clr-icon shape="plus"></clr-icon> Add
</button>
</div>
</div>

146
frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/to-do-chart/to-do-chart.component.scss
View File

@ -1,3 +1,92 @@
// To Do Chart specific styles
.to-do-chart-container {
padding: 20px;
height: 100%;
display: flex;
flex-direction: column;
}
.todo-table-container {
flex: 1;
overflow-y: auto;
max-height: 400px;
border: 1px solid #ddd;
border-radius: 4px;
margin-bottom: 20px; // Add margin at the bottom for spacing
.todo-table {
width: 100%;
border-collapse: collapse;
margin: 0;
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
font-weight: bold;
position: sticky;
top: 0;
z-index: 10;
}
tr:hover {
background-color: #f5f5f5;
}
.c-col {
width: 50px;
}
// Add padding at the bottom of the table body
tbody {
tr:last-child td {
padding-bottom: 20px; // Extra padding for the last row
}
}
}
}
.add-todo-section {
display: flex;
gap: 10px;
margin-top: 15px;
padding: 20px; // Increased padding all around
border-top: 1px solid #eee;
border: 1px solid #ddd;
border-radius: 4px;
background-color: #f9f9f9;
.todo-input {
flex: 1;
padding: 12px; // Increased padding for better touch targets
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
}
.add-button {
white-space: nowrap;
padding: 12px 20px; // Increased padding for better touch targets
}
}
.remove-button {
background: none;
border: none;
cursor: pointer;
padding: 8px; // Increased padding for better touch targets
border-radius: 3px;
color: #dc3545;
&:hover {
background-color: #e0e0e0;
}
}
.filter-section {
margin-bottom: 20px;
padding: 15px;
@ -189,61 +278,12 @@
font-size: 16px;
}
}
}
// To Do Chart specific styles
.to-do-chart-container {
padding: 20px;
}
.todo-table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
.add-todo-section {
flex-direction: column;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
tr:hover {
background-color: #f5f5f5;
}
.c-col {
width: 50px;
}
.todo-input {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.add-button, .remove-button {
background: none;
border: none;
cursor: pointer;
padding: 5px;
border-radius: 3px;
&:hover {
background-color: #e0e0e0;
}
}
.add-button {
color: #28a745;
}
.remove-button {
color: #dc3545;
.to-do-chart-container {
padding: 15px; // Adjust padding for mobile
}
}