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=4cfe54152d5826993d6cfc1cbd348b5a0fd5a72c;hpb=09c55770bcc96785fb1f199b4cd8ce66b545486a;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 4cfe54152..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">
+<section>
   <header *ngIf="steps.length > 2">
-    <ng-container *ngFor="let step of steps; let i = index; let isLast = last;">
-      <div
-        class="step-info" [ngClass]="{ active: selectedIndex === i, completed: isCompleted(step) }" [attr.aria-current]="selectedIndex === i"
-        (click)="onClick(i)"
-      >
-        <div class="step-index">
-          <ng-container *ngIf="!isCompleted(step)"><span class="sr-only" i18n>Step</span> {{ i + 1 }}</ng-container>
-          <my-global-icon *ngIf="isCompleted(step)" iconName="tick"></my-global-icon>
-        </div>
+    <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>