Refactor layout and styling: update HTML structure and apply Bootstrap for improved responsiveness
This commit is contained in:
Cédric OLIVIER
@@ -1,13 +1,13 @@
|
||||
<header class="page-header">
|
||||
<header class="page-header mb-4">
|
||||
<div>
|
||||
<h1>Detail de l'issue</h1>
|
||||
<p>Informations de creation et de suivi de l'issue.</p>
|
||||
</div>
|
||||
<div class="header-meta">
|
||||
<div class="status-inline">
|
||||
<div class="header-meta d-flex align-items-start gap-3 flex-wrap justify-content-end">
|
||||
<div class="status-inline d-flex align-items-center gap-2 bg-white border rounded-3 px-3 py-2 shadow-sm">
|
||||
<span class="status-label">Status</span>
|
||||
<select
|
||||
class="status-select"
|
||||
class="status-select form-select form-select-sm w-auto"
|
||||
[ngModel]="issue.status"
|
||||
(ngModelChange)="updateStatus($event)"
|
||||
>
|
||||
@@ -17,13 +17,13 @@
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="header-actions">
|
||||
<div class="header-actions d-flex gap-2 flex-wrap justify-content-end">
|
||||
<div class="more-wrapper">
|
||||
<button type="button" class="more-button" (click)="toggleMoreMenu()">More ▾</button>
|
||||
<button type="button" class="more-button btn btn-outline-secondary btn-sm dropdown-toggle" (click)="toggleMoreMenu()">More</button>
|
||||
|
||||
@if (moreMenuOpen) {
|
||||
<div class="more-menu">
|
||||
<button type="button" class="more-menu-item delete-action" (click)="deleteIssue()">
|
||||
<div class="more-menu dropdown-menu show position-absolute end-0 mt-2 p-1 shadow">
|
||||
<button type="button" class="more-menu-item delete-action dropdown-item text-danger" (click)="deleteIssue()">
|
||||
Supprimer
|
||||
</button>
|
||||
</div>
|
||||
@@ -33,8 +33,8 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="detail-card" aria-label="Informations de l'issue">
|
||||
<table>
|
||||
<section class="detail-card card shadow-sm" aria-label="Informations de l'issue">
|
||||
<table class="table table-borderless align-middle mb-0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
@@ -43,13 +43,13 @@
|
||||
<tr>
|
||||
<th>Nom</th>
|
||||
<td>
|
||||
<input type="text" [(ngModel)]="issue.name" (blur)="saveIssue()" />
|
||||
<input class="form-control form-control-sm" type="text" [(ngModel)]="issue.name" (blur)="saveIssue()" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Type</th>
|
||||
<td>
|
||||
<select [(ngModel)]="issueTypeValue" (change)="saveIssue()">
|
||||
<select class="form-select form-select-sm" [(ngModel)]="issueTypeValue" (change)="saveIssue()">
|
||||
@for (type of typeOptions; track type) {
|
||||
<option [value]="type">{{ type }}</option>
|
||||
}
|
||||
@@ -60,7 +60,7 @@
|
||||
<tr>
|
||||
<th>Epic</th>
|
||||
<td>
|
||||
<select [(ngModel)]="issue.epic" (change)="saveIssue()">
|
||||
<select class="form-select form-select-sm" [(ngModel)]="issue.epic" (change)="saveIssue()">
|
||||
<option value="">-</option>
|
||||
@for (epicIssue of epicIssues; track epicIssue.id) {
|
||||
<option [value]="epicIssue.name">{{ epicIssue.name }}</option>
|
||||
@@ -72,7 +72,7 @@
|
||||
<tr>
|
||||
<th>Depend de</th>
|
||||
<td>
|
||||
<select multiple [(ngModel)]="dependencyIds" class="dependency-multiselect" (change)="saveIssue()">
|
||||
<select multiple class="dependency-multiselect form-select form-select-sm" [(ngModel)]="dependencyIds" (change)="saveIssue()">
|
||||
@for (candidate of dependencyCandidates; track candidate.id) {
|
||||
<option [ngValue]="candidate.id">
|
||||
#{{ candidate.id }} - {{ candidate.name || 'Sans nom' }}
|
||||
@@ -84,31 +84,31 @@
|
||||
<tr>
|
||||
<th>Assignee</th>
|
||||
<td>
|
||||
<input type="text" [(ngModel)]="issue.assignee" (blur)="saveIssue()" />
|
||||
<input class="form-control form-control-sm" type="text" [(ngModel)]="issue.assignee" (blur)="saveIssue()" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Date d'echeance</th>
|
||||
<td>
|
||||
<input type="date" [(ngModel)]="issue.dueDate" (blur)="saveIssue()" />
|
||||
<input class="form-control form-control-sm" type="date" [(ngModel)]="issue.dueDate" (blur)="saveIssue()" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Temps estimé</th>
|
||||
<td>
|
||||
<input type="number" min="0" step="0.5" [(ngModel)]="estimatedTimeValue" (blur)="saveIssue()" />
|
||||
<input class="form-control form-control-sm" type="number" min="0" step="0.5" [(ngModel)]="estimatedTimeValue" (blur)="saveIssue()" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Description</th>
|
||||
<td>
|
||||
<textarea rows="4" [(ngModel)]="issue.description" (blur)="saveIssue()"></textarea>
|
||||
<textarea class="form-control form-control-sm" rows="4" [(ngModel)]="issue.description" (blur)="saveIssue()"></textarea>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Priorite</th>
|
||||
<td>
|
||||
<select [(ngModel)]="issue.priority" (change)="saveIssue()">
|
||||
<select class="form-select form-select-sm" [(ngModel)]="issue.priority" (change)="saveIssue()">
|
||||
<option value="Basse">Basse</option>
|
||||
<option value="Moyenne">Moyenne</option>
|
||||
<option value="Haute">Haute</option>
|
||||
@@ -118,7 +118,7 @@
|
||||
<tr>
|
||||
<th>Progression</th>
|
||||
<td>
|
||||
<input type="number" min="0" max="100" [(ngModel)]="issue.progress" (blur)="saveIssue()" />
|
||||
<input class="form-control form-control-sm" type="number" min="0" max="100" [(ngModel)]="issue.progress" (blur)="saveIssue()" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -126,23 +126,25 @@
|
||||
</section>
|
||||
|
||||
@if (isEpicIssue) {
|
||||
<section class="epic-issues-card" aria-label="Issues composant cet epic">
|
||||
<div class="epic-issues-header">
|
||||
<h2>Issues composant cet Epic</h2>
|
||||
<span>{{ composedIssues.length }}</span>
|
||||
<section class="epic-issues-card card shadow-sm mt-4" aria-label="Issues composant cet epic">
|
||||
<div class="epic-issues-header card-header d-flex align-items-center justify-content-between">
|
||||
<h2 class="h5 mb-0">Issues composant cet Epic</h2>
|
||||
<span class="badge text-bg-primary">{{ composedIssues.length }}</span>
|
||||
</div>
|
||||
|
||||
@if (composedIssues.length === 0) {
|
||||
<p class="epic-empty">Aucune issue ne compose encore cet Epic.</p>
|
||||
<div class="card-body">
|
||||
<p class="epic-empty mb-0 text-secondary">Aucune issue ne compose encore cet Epic.</p>
|
||||
</div>
|
||||
} @else {
|
||||
<ul class="epic-issues-list">
|
||||
<ul class="epic-issues-list list-group list-group-flush">
|
||||
@for (composedIssue of composedIssues; track composedIssue.id) {
|
||||
<li class="epic-issue-item">
|
||||
<div>
|
||||
<li class="epic-issue-item list-group-item d-flex justify-content-between align-items-start gap-3">
|
||||
<div class="grow">
|
||||
<strong>#{{ composedIssue.id }} - {{ composedIssue.name || 'Sans nom' }}</strong>
|
||||
<p>{{ composedIssue.type }} · {{ composedIssue.status }}</p>
|
||||
<p class="mb-0 text-secondary">{{ composedIssue.type }} · {{ composedIssue.status }}</p>
|
||||
</div>
|
||||
<span>{{ composedIssue.assignee || 'Non assigné' }}</span>
|
||||
<span class="text-secondary fw-semibold text-nowrap">{{ composedIssue.assignee || 'Non assigné' }}</span>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
|
||||
Reference in New Issue
Block a user