Css To-do-list
This commit is contained in:
HarmandI
parent
59b55b35a7
commit
759612288a
@ -1,67 +1,70 @@
|
||||
<input
|
||||
type="text"
|
||||
class="todo-title"
|
||||
placeholder="Titre"
|
||||
value="{{ todo.nom }}"
|
||||
[(ngModel)]="todo.nom"
|
||||
(keyup.enter)="updateTodo(todo)"
|
||||
/>
|
||||
<div class="container">
|
||||
<input
|
||||
type="text"
|
||||
class="todo-title btn btn-outline-success"
|
||||
placeholder="Titre"
|
||||
value="{{ todo.nom }}"
|
||||
[(ngModel)]="todo.nom"
|
||||
(keyup.enter)="updateTodo(todo)"
|
||||
/>
|
||||
|
||||
<i class="bi bi-trash3" (click)="deleteTodo(todo.id)"></i>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
class="todo-input"
|
||||
placeholder="+ Nouvelle Tâche"
|
||||
[(ngModel)]="todoTitle"
|
||||
(keyup.enter)="addTache(todo.id)"
|
||||
/>
|
||||
|
||||
<div class="element" *ngFor="let tache of todo.taches">
|
||||
<div class="element-gauche">
|
||||
<i class="bi bi-trash3" (click)="deleteTodo(todo.id)"></i>
|
||||
<div class="row justify-align">
|
||||
<input
|
||||
type="checkbox"
|
||||
[(ngModel)]="tache.etat"
|
||||
(change)="doneEdit(tache)"
|
||||
checked="checked"
|
||||
type="text"
|
||||
class="todo-input shadow justify-center"
|
||||
placeholder="+ Nouvelle Tâche"
|
||||
[(ngModel)]="todoTitle"
|
||||
(keyup.enter)="addTache(todo.id)"
|
||||
/>
|
||||
<div
|
||||
*ngIf="!tache.editing; else editingTodo"
|
||||
class="nomTache"
|
||||
[ngClass]="{ completed: tache.etat }"
|
||||
(dblclick)="modifier(tache)"
|
||||
>
|
||||
{{ tache.texte }}
|
||||
</div>
|
||||
<ng-template #editingTodo>
|
||||
<input
|
||||
type="text"
|
||||
class="modifier-element"
|
||||
[(ngModel)]="tache.texte"
|
||||
(blur)="doneEdit(tache)"
|
||||
(keyup.enter)="doneEdit(tache)"
|
||||
(keyup.esc)="cancelEdit(tache)"
|
||||
autofocus
|
||||
/>
|
||||
</ng-template>
|
||||
</div>
|
||||
<div class="deleteTache" (click)="deleteTache(tache.id)">×</div>
|
||||
</div>
|
||||
|
||||
<div class="extra-container">
|
||||
<div>
|
||||
<label
|
||||
><input
|
||||
<div
|
||||
class="element btn btn-outline-success shadow"
|
||||
*ngFor="let tache of todo.taches"
|
||||
>
|
||||
<div class="element-gauche">
|
||||
<input
|
||||
type="checkbox"
|
||||
[(ngModel)]="tache.etat"
|
||||
(change)="doneEdit(tache)"
|
||||
checked="checked"
|
||||
/>
|
||||
<div
|
||||
*ngIf="!tache.editing; else editingTodo"
|
||||
class="nomTache"
|
||||
[ngClass]="{ completed: tache.etat }"
|
||||
(dblclick)="modifier(tache)"
|
||||
>
|
||||
{{ tache.texte }}
|
||||
</div>
|
||||
<ng-template #editingTodo>
|
||||
<input
|
||||
type="text"
|
||||
class="modifier-element"
|
||||
[(ngModel)]="tache.texte"
|
||||
(blur)="doneEdit(tache)"
|
||||
(keyup.enter)="doneEdit(tache)"
|
||||
(keyup.esc)="cancelEdit(tache)"
|
||||
autofocus
|
||||
/>
|
||||
</ng-template>
|
||||
</div>
|
||||
<div class="deleteTache" (click)="deleteTache(tache.id)">×</div>
|
||||
</div>
|
||||
<div class="selection">
|
||||
<label>
|
||||
<input
|
||||
class="selection"
|
||||
type="checkbox"
|
||||
(change)="cocherAllTodoList()"
|
||||
[(ngModel)]="masterSelected"
|
||||
/>Selectionner toutes les tâches</label
|
||||
>
|
||||
<div class="casesRestantes">{{ toDoRest() }} tâche(s) restante(s)</div>
|
||||
</div>
|
||||
<div>{{ toDoRest() }} tâches restantes</div>
|
||||
</div>
|
||||
<div class="extra-container">
|
||||
<!-- <div>
|
||||
<!--<div class="extra-container">
|
||||
<div>
|
||||
<button [ngClass]="{ active: filter === 'tous' }" (click)="filter = 'tous'">
|
||||
Toutes la To Do List
|
||||
</button>
|
||||
@ -78,5 +81,5 @@
|
||||
Terminées
|
||||
</button>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
|
||||
</div> -->
|
||||
|
||||
@ -1,30 +1,60 @@
|
||||
.container {
|
||||
border: 3px #4e9e7b solid;
|
||||
padding: 5%;
|
||||
min-width: 300px;
|
||||
max-width: 30%;
|
||||
margin: 5%;
|
||||
border-radius: 5%;
|
||||
margin-bottom: 20% !important;
|
||||
}
|
||||
|
||||
.todo-title {
|
||||
width: 25%;
|
||||
width: 75%;
|
||||
padding: 10px 18px;
|
||||
font-size: xx-large;
|
||||
margin-bottom: 16px;
|
||||
font-size: large !important;
|
||||
font-weight: bold !important;
|
||||
color: #4e9e7b !important;
|
||||
border-top-color: #4e9e7b !important;
|
||||
border-left-color: #4e9e7b !important;
|
||||
border-radius: 5% !important;
|
||||
margin-top: 0%;
|
||||
margin-bottom: 5%;
|
||||
margin-right: 3% !important;
|
||||
color: black;
|
||||
box-shadow: 5px 5px 5px gray;
|
||||
&:focus {
|
||||
outline: 0;
|
||||
background-color: lightgray;
|
||||
}
|
||||
}
|
||||
|
||||
.todo-input {
|
||||
width: 20%;
|
||||
width: 75%;
|
||||
padding: 10px 18px;
|
||||
font-size: 18px;
|
||||
margin-bottom: 16px;
|
||||
color: white !important;
|
||||
background-color: #4e9e7b !important;
|
||||
border-radius: 5%;
|
||||
margin-left: 4%;
|
||||
&:focus {
|
||||
outline: 0;
|
||||
background-color: lightgray;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.element {
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
animation-duration: 0.3s;
|
||||
color: black;
|
||||
background-color: #4e9e7b;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.deleteTache {
|
||||
@ -36,56 +66,66 @@
|
||||
}
|
||||
}
|
||||
|
||||
.element-gauche { // later
|
||||
.element-gauche {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nomTache{
|
||||
.nomTache {
|
||||
padding: 10px;
|
||||
border: 1px solid white;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.modifier-element {
|
||||
font-size: 24px;
|
||||
color: #2c3e50;
|
||||
color: white;
|
||||
margin-left: 12px;
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid rgb(204, 204, 204); //override defaults
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
font-family: "Avenir", Helvetica, Arial, sans-serif;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
background-color:aquamarine;
|
||||
background-color: grey;
|
||||
}
|
||||
}
|
||||
|
||||
.selection {
|
||||
margin-left: 0%;
|
||||
text-align: left;
|
||||
font-size: medium;
|
||||
font-weight: bold;
|
||||
color: #4e9e7b;
|
||||
}
|
||||
|
||||
.completed {
|
||||
text-decoration: line-through;
|
||||
color: grey;
|
||||
color: white !important;
|
||||
}
|
||||
.casesRestantes {
|
||||
color: #4cc690;
|
||||
}
|
||||
|
||||
|
||||
button {
|
||||
/* button {
|
||||
font-size: 14px;
|
||||
background-color: white;
|
||||
appearance: none;
|
||||
|
||||
&:hover {
|
||||
background: lightgreen;
|
||||
background: grey;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
} */
|
||||
|
||||
.active {
|
||||
background: lightgreen;
|
||||
}
|
||||
.completed {
|
||||
/* .active {
|
||||
background: grey;
|
||||
} */
|
||||
/* .completed {
|
||||
text-decoration: line-through;
|
||||
color: grey;
|
||||
}
|
||||
*/
|
||||
|
||||
@ -8,15 +8,19 @@
|
||||
<div class="d-flex align-items-stretch"></div>
|
||||
<input
|
||||
type="text"
|
||||
class="todo-input"
|
||||
placeholder="+ Nouvelle To-Do-List"
|
||||
class="btn btn-outline-success"
|
||||
placeholder=" Ajouter une To-Do-List"
|
||||
[(ngModel)]="todoListTitle"
|
||||
(keyup.enter)="addTodoByTeamId()"
|
||||
/>
|
||||
|
||||
<div class="d-flex align-items-stretch">
|
||||
<div class="col" *ngFor="let todos of listTodos">
|
||||
<app-to-do-list [todo]="todos"> </app-to-do-list>
|
||||
<div class="custom-main container p-3">
|
||||
<div class="row">
|
||||
<div class="col" *ngFor="let todos of listTodos">
|
||||
<app-to-do-list [todo]="todos"> </app-to-do-list>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,6 @@
|
||||
.btn {
|
||||
margin-top: 1%;
|
||||
margin-bottom: 1%;
|
||||
color: black;
|
||||
box-shadow: 5px 5px 5px gray;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user