feat(ui): Convert profile pages to single-page layout

libs/openchallenges/challenge/src/lib/_challenge-theme.scss

@@ -63,6 +63,12 @@
   .text-grey {
     color: rgba(black, 0.38);
   }
+  .created-updated-dates {
+    color: mat.get-color-from-palette($figma, dl-color-default-navbardark);
+  }
+  hr {
+    background-color: map.get($figma, dl-color-default-primary1);
+  }
 
   @media (max-width: 479px) {
     .profile-pic {
@@ -83,6 +89,9 @@
       font-family: 'Lato', sans-serif !important;
     }
   }
+  .created-updated-dates {
+    font-style: italic !important;
+  }
   @media screen and (max-width: 641px) {
     #profile-details > h2 {
       font-size: 32px;

libs/openchallenges/challenge/src/lib/challenge-contributors/challenge-contributors.component.html

@@ -1,23 +1,21 @@
-<main>
-  <div id="contributors">
-    <h3>Contributors</h3>
-    <p>
-      List of organizations whose contributions made possible the challenge. Contributions can range
-      from planning and organizing the challenge to contributing data and providing technical
-      support.
-    </p>
-    <ng-container *ngIf="organizationCards!.length > 0; else na_text">
-      <div class="card-group">
-        <openchallenges-organization-card
-          *ngFor="let organizationCard of organizationCards"
-          [organizationCard]="organizationCard"
-          [showMember]="false"
-        >
-        </openchallenges-organization-card>
-      </div>
-    </ng-container>
-    <ng-template #na_text>
-      <h4 class="text-grey">Not available</h4>
-    </ng-template>
-  </div>
-</main>
+<div id="contributors">
+  <h3 class="section-title">Contributors</h3>
+  <p>
+    List of organizations whose contributions made possible the challenge. Contributions can range
+    from planning and organizing the challenge to contributing data and providing technical
+    support.
+  </p>
+  <ng-container *ngIf="organizationCards!.length > 0; else na_text">
+    <div class="card-group">
+      <openchallenges-organization-card
+        *ngFor="let organizationCard of organizationCards"
+        [organizationCard]="organizationCard"
+        [showMember]="false"
+      >
+      </openchallenges-organization-card>
+    </div>
+  </ng-container>
+  <ng-template #na_text>
+    <h4 class="text-grey">Not available</h4>
+  </ng-template>
+</div>

libs/openchallenges/challenge/src/lib/challenge-contributors/challenge-contributors.component.scss

@@ -1,7 +1,11 @@
-#contributors h3 {
-  margin-top: 14px;
-}
+@use 'libs/openchallenges/styles/src/lib/_constants' as constants;
 
+#contributors {
+  scroll-margin-top: constants.$navbar-height + 20px;
+}
+.section-title {
+  margin-top: 32px;
+}
 .text-grey {
   margin: 2em 0;
 }

libs/openchallenges/challenge/src/lib/challenge-links.ts

@@ -0,0 +1,24 @@
+import { Link } from './link.model';
+
+export const CHALLENGE_LINKS: Link[] = [
+  {
+    id: 'overview',
+    name: 'Overview',
+  },
+  {
+    id: 'details',
+    name: 'Challenge Details',
+  },
+  {
+    id: 'organizers',
+    name: 'Organizers',
+  },
+  {
+    id: 'contributors',
+    name: 'Contributors',
+  },
+  // {
+  //   id: 'stargazers',
+  //   name: 'Stargazers',
+  // },
+];

libs/openchallenges/challenge/src/lib/challenge-organizers/challenge-organizers.component.html

@@ -1,20 +1,18 @@
-<main>
-  <div id="organizers">
-    <h3>Organizers</h3>
-    <p>The organizing team for the challenge (names and affiliations).</p>
-    <ng-container *ngIf="organizers.length > 0; else na_text">
-      <div class="card-group">
-        <openchallenges-person-card
-          *ngFor="let organizer of organizers"
-          [name]="organizer.name"
-          [avatarSize]="120"
-          [affiliation]="organizationCard.name"
-        >
-        </openchallenges-person-card>
-      </div>
-    </ng-container>
-    <ng-template #na_text>
-      <h4 class="text-grey">Not available</h4>
-    </ng-template>
-  </div>
-</main>
+<div id="organizers">
+  <h3 class="section-title">Organizers</h3>
+  <p>The organizing team for the challenge (names and affiliations).</p>
+  <ng-container *ngIf="organizers.length > 0; else na_text">
+    <div class="card-group">
+      <openchallenges-person-card
+        *ngFor="let organizer of organizers"
+        [name]="organizer.name"
+        [avatarSize]="120"
+        [affiliation]="organizationCard.name"
+      >
+      </openchallenges-person-card>
+    </div>
+  </ng-container>
+  <ng-template #na_text>
+    <h4 class="text-grey">Not available</h4>
+  </ng-template>
+</div>

libs/openchallenges/challenge/src/lib/challenge-organizers/challenge-organizers.component.scss

@@ -1,11 +1,14 @@
-#organizers h3 {
-  margin-top: 14px;
-}
+@use 'libs/openchallenges/styles/src/lib/_constants' as constants;
 
+#organizers {
+  scroll-margin-top: constants.$navbar-height + 20px;
+}
+.section-title {
+  margin-top: 32px;
+}
 .card-group {
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 }
-
 .text-grey {
   margin: 2em 0;
 }

libs/openchallenges/challenge/src/lib/challenge-overview/_challenge-overview-theme.scss

@@ -7,10 +7,6 @@
   $accent: map.get($config, 'accent');
   $figma: map.get($config, 'figma');
 
-  .created-updated-dates {
-    color: mat.get-color-from-palette($figma, dl-color-default-navbardark);
-  }
-
   .text-grey {
     color: rgba(black, 0.38);
   }
@@ -20,9 +16,6 @@
   .text-right {
     font-weight: 600;
   }
-  .created-updated-dates {
-    font-style: italic !important;
-  }
 }
 
 @mixin theme($theme) {

libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.html

@@ -1,5 +1,5 @@
-<main *ngIf="challenge">
-  <div id="bio">
+<div *ngIf="challenge">
+  <div id="overview">
     <h3 class="top-section-title">Overview</h3>
     <p>{{ use_default(challenge.description) }}</p>
   </div>
@@ -24,10 +24,6 @@ <h3 class="section-title">Challenge Details</h3>
           {{ use_default(challenge.platform.name) }}
         </td>
       </tr>
-      <!-- <tr>
-        <td class="text-right">Website URL</td>
-        <td>{{ challenge.websiteUrl }}</td>
-      </tr> -->
       <tr>
         <td class="text-right">DOI</td>
         <td>
@@ -75,27 +71,4 @@ <h3 class="section-title">Challenge Details</h3>
       </tr>
     </table>
   </div>
-  <!-- <div id="info">
-    <div class="col">
-      <h3 class="section-title">Hosted By</h3>
-      <div class="card-group">
-        <openchallenges-organization-card
-          *ngFor="let organization of organizations"
-          [organization]="organization"
-        ></openchallenges-organization-card>
-      </div>
-    </div>
-  </div> -->
-  <hr />
-  <span class="mat-caption created-updated-dates">
-    Added to the OC on {{ challenge.createdAt }} and last modified on {{ challenge.updatedAt }} //
-    See something missing or not up-to-date?
-    <a
-      href="https://docs.google.com/forms/d/e/1FAIpQLSdkgAVOuof-tE4PvCnpPbbGnQvvMhLuTkXikDXTbsCHqcMVSw/viewform?usp=pp_url&entry.2102238281={{
-        challenge.id
-      }}&entry.1040159972={{ challenge.slug }}"
-      target="_blank"
-      >Suggest an edit here!</a
-    >
-  </span>
-</main>
+</div>

libs/openchallenges/challenge/src/lib/challenge-overview/challenge-overview.component.scss

@@ -1,6 +1,12 @@
+@use 'libs/openchallenges/styles/src/lib/_constants' as constants;
+
+#overview,
+#details {
+  scroll-margin-top: constants.$navbar-height + 20px;
+}
 .top-section-title {
   margin-top: 14px;
 }
 .section-title {
-  margin-top: 24px;
+  margin-top: 32px;
 }

libs/openchallenges/challenge/src/lib/challenge-stargazers/challenge-stargazers.component.html

@@ -1,14 +1,12 @@
-<main>
-  <div id="stargazers">
-    <h3>Stargazers</h3>
-    <div class="card-group">
-      <openchallenges-person-card
-        *ngFor="let stargazer of stargazers"
-        [name]="stargazer.name"
-        [avatarSize]="120"
-        [affiliation]="organizationCard.name"
-      >
-      </openchallenges-person-card>
-    </div>
+<div id="stargazers">
+  <h3 class="section-title">Stargazers</h3>
+  <div class="card-group">
+    <openchallenges-person-card
+      *ngFor="let stargazer of stargazers"
+      [name]="stargazer.name"
+      [avatarSize]="120"
+      [affiliation]="organizationCard.name"
+    >
+    </openchallenges-person-card>
   </div>
-</main>
+</div>

libs/openchallenges/challenge/src/lib/challenge-stargazers/challenge-stargazers.component.scss

@@ -1,3 +1,8 @@
-#stargazers h3 {
-  margin-top: 14px;
+@use 'libs/openchallenges/styles/src/lib/_constants' as constants;
+
+#stargazers {
+  scroll-margin-top: constants.$navbar-height + 20px;
+}
+.section-title {
+  margin-top: 32px;
 }

libs/openchallenges/challenge/src/lib/challenge.component.html

@@ -27,62 +27,40 @@ <h2>
       <div class="profile-sidenav col">
         <div class="profile-nav-group">
           <a
+            *ngFor="let link of links"
             class="profile-nav-item"
-            routerLink="."
-            [queryParams]="{ tab: 'overview' }"
-            [ngClass]="{ 'active-tab': activeTab === tabs['overview'] }"
+            href="{{rootUrl}}#{{link.id}}"
+            [ngClass]="{ 'active-tab': activeLink === link.id }"
           >
-            Overview
+            {{link.name}}
           </a>
-          <a
-            class="profile-nav-item"
-            routerLink="."
-            [queryParams]="{ tab: 'organizers' }"
-            [ngClass]="{ 'active-tab': activeTab === tabs['organizers'] }"
-          >
-            Organizers
-          </a>
-          <a
-            class="profile-nav-item"
-            routerLink="."
-            [queryParams]="{ tab: 'contributors' }"
-            [ngClass]="{ 'active-tab': activeTab === tabs['contributors'] }"
-          >
-            Contributors
-          </a>
-          <!-- <a
-            class="profile-nav-item"
-            routerLink="."
-            [queryParams]="{ tab: 'stargazers' }"
-            [ngClass]="{ 'active-tab': activeTab === tabs['stargazers'] }"
-          >
-            Stargazers
-          </a> -->
         </div>
       </div>
       <div class="main col">
-        <ng-container [ngSwitch]="activeTab">
-          <openchallenges-challenge-overview
-            *ngSwitchCase="tabs['overview']"
-            [challenge]="challenge"
-          >
-          </openchallenges-challenge-overview>
-          <openchallenges-challenge-organizers
-            *ngSwitchCase="tabs['organizers']"
-            [challenge]="challenge"
-          >
-          </openchallenges-challenge-organizers>
-          <openchallenges-challenge-contributors
-            *ngSwitchCase="tabs['contributors']"
-            [challenge]="challenge"
-          >
-          </openchallenges-challenge-contributors>
-          <!-- <openchallenges-challenge-stargazers
-            *ngSwitchCase="tabs['stargazers']"
-            [challenge]="challenge"
+        <openchallenges-challenge-overview
+          [challenge]="challenge"
+        ></openchallenges-challenge-overview>
+        <openchallenges-challenge-organizers
+          [challenge]="challenge"
+        ></openchallenges-challenge-organizers>
+        <openchallenges-challenge-contributors
+          [challenge]="challenge"
+        ></openchallenges-challenge-contributors>
+        <!-- <openchallenges-challenge-stargazers
+          [challenge]="challenge"
+        ></openchallenges-challenge-stargazers> -->
+        <hr />
+        <span class="mat-caption created-updated-dates">
+          Added to the OC on {{ challenge.createdAt }} and last modified on {{ challenge.updatedAt }} //
+          See something missing or not up-to-date?
+          <a
+            href="https://docs.google.com/forms/d/e/1FAIpQLSdkgAVOuof-tE4PvCnpPbbGnQvvMhLuTkXikDXTbsCHqcMVSw/viewform?usp=pp_url&entry.2102238281={{
+              challenge.id
+            }}&entry.1040159972={{ challenge.slug }}"
+            target="_blank"
+            >Suggest an edit here!</a
           >
-          </openchallenges-challenge-stargazers> -->
-        </ng-container>
+        </span>
       </div>
     </section>
   </ng-container>