X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fapp%2F%2Bsignup%2F%2Bregister%2Fcustom-stepper.component.html;h=f2687e520956687e64f921b780b66b301b71600e;hb=HEAD;hp=bf507fc4f59b27fbdc5b8985893232f9af193dec;hpb=b247a132709eb212fef4f77c4912dc0ec108f36b;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/app/+signup/+register/custom-stepper.component.html b/client/src/app/+signup/+register/custom-stepper.component.html
index bf507fc4f..f2687e520 100644
--- a/client/src/app/+signup/+register/custom-stepper.component.html
+++ b/client/src/app/+signup/+register/custom-stepper.component.html
@@ -1,24 +1,30 @@
-<section class="container">
-  <header>
-    <ng-container *ngFor="let step of steps; let i = index; let isLast = last;">
-      <div
-        class="step-info" [ngClass]="{ active: selectedIndex === i, completed: isCompleted(step) }"
-        (click)="onClick(i)"
-      >
-        <div class="step-index">
-          <ng-container *ngIf="!isCompleted(step)">{{ i + 1 }}</ng-container>
-          <my-global-icon *ngIf="isCompleted(step)" iconName="tick"></my-global-icon>
-        </div>
+<section>
+  <header *ngIf="steps.length > 2">
+    <div class="header-steps">
+      <ng-container *ngFor="let step of steps; let i = index; let isLast = last;">
+        <button
+          class="step-info button-unstyle" [ngClass]="{ active: selectedIndex === i, completed: isCompleted(step) }"
+          [disabled]="!isAccessible(step)"
+          [attr.aria-current]="selectedIndex === i" (click)="onClick(i)"
+        >
+          <div class="step-index">
+            <span class="visually-hidden" i18n>Step</span> {{ i + 1 }}
 
-        <div class="step-label">{{ step.label }}</div>
-      </div>
+            <div class="completed-icon" *ngIf="isCompleted(step)">
+              <my-global-icon iconName="tick"></my-global-icon>
+            </div>
+          </div>
 
-      <!-- Do no display if this is the last child -->
-      <div *ngIf="!isLast" class="connector"></div>
-    </ng-container>
+          <div class="step-label">{{ step.label }}</div>
+        </button>
+
+        <!-- Do no display if this is the last child -->
+        <div *ngIf="!isLast" class="connector"></div>
+      </ng-container>
+    </div>
   </header>
 
-  <div [style.display]="selected ? 'block' : 'none'">
+  <div class="margin-content" [style.display]="selected ? 'block' : 'none'">
     <ng-container [ngTemplateOutlet]="selected.content"></ng-container>
   </div>