Add proper styling, Add tutorial box with placeholders

frontend/src/app/upload/upload.component.html

@@ -4,9 +4,15 @@
     <section class="column__header">
       <div>
         <h1>Narzędzie do komputerowej analizy dyskusji na forum</h1>
-        <button status="success" nbButton>Jak wyeksportować pliki XML?</button>
+        <button
+          status="success"
+          size="large"
+          nbButton
+          (click)="scrollTo(xmltutorial)"
+        >
+          Jak wyeksportować pliki XML?
+        </button>
       </div>
-
       <div>
         <p class="h6">Załaduj plik aby rozpocząć</p>
         <app-open-file-button
@@ -18,8 +24,8 @@
       </div>
     </section>
 
-    <div class="properties">
-      <section class="properties__element">
+    <section class="properties">
+      <div class="properties__element">
         <div class="properties__icon">
           <nb-icon icon="info-outline"></nb-icon>
         </div>
@@ -29,9 +35,9 @@
           wątków na forach platform e-learningowych, takich jak Moodle i
           Edumatic
         </p>
-      </section>
+      </div>
 
-      <section class="properties__element">
+      <div class="properties__element">
         <div class="properties__icon">
           <nb-icon icon="person-outline"></nb-icon>
         </div>
@@ -40,9 +46,9 @@
           System opiera się na przetwarzaniu języka naturalnego, które umożliwia
           coś tam
         </p>
-      </section>
+      </div>
 
-      <section class="properties__element">
+      <div class="properties__element">
         <div class="properties__icon">
           <nb-icon icon="trending-up-outline"></nb-icon>
         </div>
@@ -51,14 +57,59 @@
           Dzięki ogromnej gamie możliwości wizualizacji danych, użytkownik może
           zrobić coś tam
         </p>
-      </section>
+      </div>
+    </section>
+    <div class="column__wave">
+      <img src="../../assets/wave.svg" />
     </div>
 
-    <!-- <app-open-file-button
-      (selectedFile)="parseFile($event)"
-    ></app-open-file-button>
-    <button nbButton status="success" (click)="sendFile($event)">
-      Wyślij!
-    </button> -->
+    <section class="column__instruction">
+      <h1 class="text-alternate" #xmltutorial>Jak wyeksportować pliki XML?</h1>
+      <nb-card class="column__instruction-card">
+        <nb-stepper orientation="vertical">
+          <nb-step label="Krok 1">
+            <h5>Krok #1</h5>
+            <p class="paragraph">
+              Proin varius accumsan semper. Praesent consequat tincidunt
+              sagittis. Curabitur egestas sem a ipsum bibendum, sit amet
+              fringilla orci efficitur. Nam bibendum lectus ut viverra
+              tristique. Fusce eu pulvinar magna, quis viverra ex. Lorem ipsum
+              dolor sit amet, consectetur adipiscing elit. Praesent metus
+              turpis, commodo vel placerat quis, lobortis in ligula.
+            </p>
+            <button nbButton disabled nbStepperNext>Poprzedni krok</button>
+            <button nbButton nbStepperNext>Następny krok</button>
+          </nb-step>
+
+          <nb-step label="Krok 2">
+            <h5>Krok #2</h5>
+            <p class="paragraph">
+              Proin varius accumsan semper. Praesent consequat tincidunt
+              sagittis. Curabitur egestas sem a ipsum bibendum, sit amet
+              fringilla orci efficitur. Nam bibendum lectus ut viverra
+              tristique. Fusce eu pulvinar magna, quis viverra ex. Lorem ipsum
+              dolor sit amet, consectetur adipiscing elit. Praesent metus
+              turpis, commodo vel placerat quis, lobortis in ligula.
+            </p>
+            <button nbButton nbStepperPrevious>Poprzedni krok</button>
+            <button nbButton nbStepperNext>Następny krok</button>
+          </nb-step>
+
+          <nb-step label="Krok 3">
+            <h5>Krok #3</h5>
+            <p class="paragraph">
+              Proin varius accumsan semper. Praesent consequat tincidunt
+              sagittis. Curabitur egestas sem a ipsum bibendum, sit amet
+              fringilla orci efficitur. Nam bibendum lectus ut viverra
+              tristique. Fusce eu pulvinar magna, quis viverra ex. Lorem ipsum
+              dolor sit amet, consectetur adipiscing elit. Praesent metus
+              turpis, commodo vel placerat quis, lobortis in ligula.
+            </p>
+            <button nbButton nbStepperPrevious>Poprzedni krok</button>
+            <button nbButton nbStepperNext disabled>Następny krok</button>
+          </nb-step>
+        </nb-stepper>
+      </nb-card>
+    </section>
   </nb-layout-column>
 </nb-layout>

frontend/src/app/upload/upload.component.scss

@@ -7,7 +7,7 @@
 .column {
   display: flex;
   flex-flow: column nowrap;
-  max-width: 80rem;
+  padding: 0 !important;
   margin: 0 auto;
   &__header {
     display: flex;
@@ -17,10 +17,27 @@
       width: 30rem;
     }
   }
+
+  &__wave {
+    display: flex;
+  }
+
+  &__instruction {
+    margin-top: -1px;
+    background-color: #3366ff;
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+  }
+
+  &__instruction-card {
+    max-width: 50%;
+    padding: 2.25rem;
+  }
 }
 
 .properties {
-  margin: 3rem 0;
+  margin: 4rem 3rem 0;
   display: flex;
   flex-flow: row;
   justify-content: center;
@@ -42,7 +59,3 @@
     text-align: center;
   }
 }
-
-.nb-theme-default nb-layout .layout {
-  background-image: url("../../assets/wave.svg");
-}

frontend/src/app/upload/upload.component.ts

@@ -13,13 +13,14 @@ export class UploadComponent implements OnInit {
   public fileName: string;
   private file: File;
 
-  constructor(private sendService: SendDataService) {
-    this.file = {} as File;
-    this.fileName = '';
-  }
+  constructor(private sendService: SendDataService) {}
 
   ngOnInit(): void {}
 
+  scrollTo(el: HTMLElement) {
+    el.scrollIntoView({ behavior: 'smooth' });
+  }
+
   parseFile(event: any) {
     this.file = event;
   }

frontend/src/app/upload/upload.module.ts

@@ -7,6 +7,7 @@ import {
   NbCardModule,
   NbLayoutModule,
   NbIconModule,
+  NbStepperModule,
 } from '@nebular/theme';
 
 import { DragAndDropComponent } from './drag-and-drop/drag-and-drop.component';
@@ -28,6 +29,7 @@ import { SendDataService } from './send-data.service';
     NbButtonModule,
     NbCardModule,
     NbIconModule,
+    NbStepperModule,
   ],
   exports: [UploadComponent],
   providers: [SendDataService],

frontend/src/styles.scss

@@ -6,7 +6,3 @@
   @include nb-theme-global();
 }
 /* You can add global styles to this file, and also import other style files */
-
-.nb-theme-default nb-layout .layout {
-  background-image: url("./assets/wave.svg");
-}

frontend/src/themes.scss

@@ -13,7 +13,6 @@ $nb-themes: nb-register-theme(
       // color-primary-700: #1a34b8,
       // color-primary-800: #102694,
       // color-primary-900: #091c7a,
-      layout-bg: url("./assets/wave.svg")
   ),
   default,
   default

frontend/tsconfig.json

@@ -12,7 +12,8 @@
     "importHelpers": true,
     "target": "es2015",
     "lib": ["es2018", "dom"],
-    "strict": true
+    "strict": true,
+    "strictPropertyInitialization": false
   },
   "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,