Frontend_V2: Add Tab view on the settings page(#3551)

* add tab view to settings tab * fix worker title * change tab-heading * add :host -> does not change styles when coming from other compoenent * merge phase and leaderboard tab * show defauly options in select phase * add comments * fix private label for small screen size * fix spacing issues * add evaluation script heading * add check for empty arrays * make phase splits private when phase is private Co-authored-by: Rishabh Jain <[email protected]>
Cloud-CV · Aug 13, 2021 · c9b05b5 · c9b05b5
1 parent 797e1e7
commit c9b05b5
Show file tree

Hide file tree

Showing 9 changed files with 981 additions and 842 deletions.
diff --git a/frontend_v2/src/app/components/challenge/challenge.module.ts b/frontend_v2/src/app/components/challenge/challenge.module.ts
@@ -11,6 +11,7 @@ import {
   MatRadioModule,
   MatDialogModule,
   MatSliderModule,
+  MatTabsModule,
 } from '@angular/material';
 
 // import components
@@ -66,6 +67,7 @@ import { ChallengeanalyticsComponent } from './challengeanalytics/challengeanaly
     MatRadioModule,
     MatDialogModule,
     MatSliderModule,
+    MatTabsModule,
   ],
   exports: [
     ChallengeComponent,

diff --git a/..._v2/src/app/components/challenge/challengeleaderboard/challengeleaderboard.component.html b/..._v2/src/app/components/challenge/challengeleaderboard/challengeleaderboard.component.html
@@ -20,7 +20,7 @@ <h5 class="fw-light">Leaderboard</h5>
       <div class="row">
         <div class="col-sm-6 col-xs-12 col-lg-6 col-lr-pad phase-select-box col-lr-margin">
           <app-selectphase
-            [phases]="filteredPhaseSplits"
+            [phaseSplits]="filteredPhaseSplits"
             [phaseSelectionType]="phaseSelectionType"
             [phaseSelectionListType]="phaseSelectionListType"
             [selectedPhaseSplitUrlChange]="selectedPhaseSplitUrlChange"

diff --git a/frontend_v2/src/app/components/challenge/challengesettings/challengesettings.component.html b/frontend_v2/src/app/components/challenge/challengesettings/challengesettings.component.html
diff --git a/frontend_v2/src/app/components/challenge/challengesettings/challengesettings.component.scss b/frontend_v2/src/app/components/challenge/challengesettings/challengesettings.component.scss
@@ -3,14 +3,31 @@
 
 .challenge-card {
   .bottom-card-container {
+    padding: 0px 30px;
     .settings-section {
-      padding: 20px 30px;
+      padding: 50px;
       border: 1px solid;
       border-radius: 5px;
       min-height: 50px;
       color: rgb(101, 97, 97);
     }
   }
+  .row {
+    margin: 20px 0px 3% 0px;
+  }
+}
+
+.row .col {
+  padding: 0px;
+}
+
+input {
+  border-bottom: none;
+}
+
+:host ::ng-deep .mat-tab-label .mat-tab-label-content{
+  font-weight: $fw-light !important;
+  font-size: $fs-16 !important;
 }
 
 .phase-card {
@@ -21,21 +38,29 @@
   margin-left: 25px;
 }
 
-@include screen-medium {
+.worker-title {
+  margin-bottom: 2%;
+}
+
+.upload-container {
+  text-align:center;
+}
+
+@media (max-width: 992px) {
   .settings-section {
-    padding: 10px 20px !important;
+    padding: 50px !important;
   }
 }
 
-@include screen-small-medium {
-  .settings-section {
-    padding: 10px 10px !important;
+@media (min-width: 992px) {
+  .col-md-12 {
+    width: auto;
   }
 }
 
-@include screen-small {
+@media (max-width: 600px)  {
   .settings-section {
-    padding: 10px 5px !important;
+    padding: 25px !important;
   }
 }
 
@@ -48,7 +73,6 @@
 }
 
 .challenge-detail {
-  margin-left: 25%;
   padding: 8px;
 }