Chore/65 setup home page

src/app/core/components/footer/footer.component.scss

@@ -50,7 +50,7 @@
 
  .footer-secondary-nav {
  height: 2.6rem;
- background-color: var.$bg-blue-2;
+ background: var.$gradient-3;
 
  .footer-copyright {
  @include mix.flex-center;

src/app/core/components/header/header.component.scss

@@ -1,6 +1,7 @@
 @use "assets/styles/mixins" as mix;
 
 :host {
+ position: absolute;
  height: 4.5rem;
  padding-right: 1rem;
  width: 100%;

src/app/core/components/root/root.component.scss

@@ -17,6 +17,7 @@
  min-height: 100%;
  background: url("/assets/images/sign-up-background.png") center no-repeat;
  background-size: cover;
+ position: relative;
  }
  }
 }

src/app/features/home/home.component.html

@@ -8,3 +8,113 @@
 <!--<p-button label="Default" severity="info"/>-->
 <!--<p-button label="Default" class="btn-icon-text"/>-->
 <!--<p-button label="Default" class="btn-icon-text-success"/>-->
+<div class="dashboard-header">
+ <img
+ ngSrc="assets/icons/system/dashboard.svg"
+ alt="dashboard"
+ width="36"
+ height="36"
+ />
+ <span class="dashboard-title">Dashboard</span>
+ <button class="create-project-button">Create New Project</button>
+</div>
+
+<div class="quick-search-container">
+ <p class="text-center">
+ Go to <a routerLink="/myprojects">My Projects</a> to organize your work or
+ <a routerLink="/search">search</a> OSF
+ </p>
+
+ <div class="search-container">
+ <i class="icon icon-search"></i>
+ <input
+ class="search-input"
+ type="text"
+ placeholder="Search in your projects"
+ pInputText
+ [(ngModel)]="searchValue"
+ />
+ </div>
+
+ <p-table
+ [value]="filteredProjects()"
+ [rows]="5"
+ [rowsPerPageOptions]="[2, 5, 10]"
+ [paginator]="true"
+ [resizableColumns]="true"
+ [autoLayout]="true"
+ >
+ class="projects-table">
+ <ng-template #header>
+ <tr>
+ <th pSortableColumn="title">Title <p-sortIcon field="title" /></th>
+ <th>Contributors</th>
+ <th pSortableColumn="modified">
+ Modified <p-sortIcon field="modified" />
+ </th>
+ </tr>
+ </ng-template>
+ <ng-template #body let-project>
+ <tr>
+ <td>{{ project.title }}</td>
+ <td>{{ getContributorsList(project) }}</td>
+ <td>{{ project.dateModified | date: "MMM d, y, h:mm a" }}</td>
+ </tr>
+ </ng-template>
+ </p-table>
+</div>
+
+<div class="public-projects-container">
+ <div class="title-container">
+ <h1>Discover Public Projects</h1>
+ </div>
+</div>
+
+<div class="noteworthy-container">
+ <div class="news-section">
+ <h2>New And Noteworthy</h2>
+ @for (block of noteworthy; track block.title) {
+ <div class="news-block">
+ <p class="title">{{ block.title }}</p>
+ <br />
+ <p class="authors">{{ block.authors }}</p>
+ </div>
+ }
+ </div>
+ <div class="news-section">
+ <h2>Most Popular</h2>
+ @for (block of mostPopular; track block.title) {
+ <div class="news-block">
+ <p class="title">{{ block.title }}</p>
+ <br />
+ <p class="authors">{{ block.authors }}</p>
+ </div>
+ }
+ </div>
+</div>
+
+<div class="latest-research-container">
+ <div class="content">
+ <div class="text-container">
+ <h1>Browse the latest research</h1>
+ <h2>
+ Check out the latest preprints hosted on OSF covering a variety of
+ research areas
+ </h2>
+ </div>
+ <p-button label="View Preprints" severity="success" />
+ </div>
+</div>
+
+<div class="hosting-container">
+ <div class="content">
+ <div class="text-container">
+ <h1>Hosting a conference or meeting?</h1>
+ <h2>
+ Use the OSF for Meetings service to provide a central location for
+ conference submissions
+ </h2>
+ </div>
+ <p-button label="View Meetings" severity="success" />
+ </div>
+</div>

src/app/features/home/home.component.scss

@@ -0,0 +1,239 @@
+@use "assets/styles/variables" as var;
+
+@mixin flex-container($direction: row, $justify: flex-start, $align: center) {
+ display: flex;
+ flex-direction: $direction;
+ justify-content: $justify;
+ align-items: $align;
+}
+
+@mixin button-style(
+ $bg-color: var.$pr-blue-1,
+ $text-color: white,
+ $radius: 8px
+) {
+ font-family: var.$openSans;
+ font-weight: 700;
+ font-size: 1rem;
+ border-radius: $radius;
+ color: $text-color;
+ background-color: $bg-color;
+ border: none;
+ box-shadow: none;
+ cursor: pointer;
+}
+
+:host {
+ @include flex-container(column);
+
+ .dashboard-header {
+ @include flex-container(row, start);
+ width: 100%;
+ padding: 100px 24px 48px 24px;
+ background: var.$gradient-1;
+
+ .dashboard-title {
+ font-family: var.$openSans;
+ font-size: 24px;
+ color: var.$dark-blue-1;
+ font-weight: 700;
+ margin-left: 12px;
+ }
+
+ .create-project-button {
+ @include button-style;
+ width: 164px;
+ height: 44px;
+ margin-left: auto;
+ }
+ }
+
+ .quick-search-container {
+ background: white;
+ padding: 24px;
+ width: 100%;
+
+ .text-center {
+ font-family: var.$openSans;
+ font-size: 1rem;
+ font-weight: 400;
+ color: var.$dark-blue-1;
+ text-align: center;
+ margin-bottom: 48px;
+
+ a {
+ color: var.$pr-blue-1;
+ }
+ }
+
+ .search-container {
+ @include flex-container(row, flex-start, center);
+ position: relative;
+
+ img {
+ position: absolute;
+ left: 12px;
+ color: var.$dark-blue-1;
+ }
+
+ .search-input {
+ width: 100%;
+ background: white;
+ border: 1px solid var.$grey-2;
+ border-radius: 8px;
+ font-family: var.$openSans;
+ font-size: 1.1rem;
+ font-weight: 400;
+ padding-left: 40px;
+ color: var.$dark-blue-1;
+ height: 46px;
+ }
+ }
+ }
+
+ .public-projects-container {
+ width: 100%;
+ background: var.$gradient-1;
+ height: 204px;
+ padding: 120px 0 48px 24px;
+
+ h1 {
+ font-family: var.$openSans;
+ font-size: 24px;
+ color: var.$dark-blue-1;
+ font-weight: 700;
+ margin: 0;
+ }
+ }
+
+ .noteworthy-container {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ background: white;
+ padding: 24px;
+ column-gap: 24px;
+
+ .news-section {
+ display: flex;
+ flex-direction: column;
+ row-gap: 12px;
+ width: 50%;
+
+ h2 {
+ font-family: var.$openSans;
+ font-size: 18px;
+ color: var.$dark-blue-1;
+ font-weight: 700;
+ margin: 0;
+ }
+
+ .news-block {
+ border: 1px solid var.$grey-2;
+ border-radius: 12px;
+ padding: 24px;
+
+ p {
+ margin: 0 0 0 0;
+ }
+
+ .title {
+ font-family: var.$openSans;
+ font-size: 18px;
+ color: var.$dark-blue-1;
+ font-weight: 700;
+ }
+
+ .authors {
+ font-family: var.$openSans;
+ font-size: 1rem;
+ color: var.$dark-blue-1;
+ font-weight: 400;
+ margin-top: 24px;
+ }
+ }
+ }
+ }
+
+ .latest-research-container {
+ width: 100%;
+ background: var.$gradient-2;
+ height: 156px;
+ padding: 48px 48px 48px 24px;
+
+ .content {
+ display: flex;
+ flex-direction: row;
+
+ .text-container {
+ display: flex;
+ flex-direction: column;
+ }
+ }
+
+ h1 {
+ font-family: var.$openSans;
+ font-size: 24px;
+ color: var.$dark-blue-1;
+ font-weight: 700;
+ margin: 0;
+ }
+
+ h2 {
+ font-family: var.$openSans;
+ font-size: 1rem;
+ color: var.$dark-blue-1;
+ font-weight: 400;
+ margin: 0;
+ }
+
+ p-button {
+ margin-left: auto;
+
+ button {
+ width: 144px;
+ height: 44px;
+ }
+ }
+ }
+
+ .hosting-container {
+ width: 100%;
+ height: 156px;
+ padding: 48px 48px 48px 24px;
+ background: url("/assets/images/hosting-background.svg") no-repeat center
+ center;
+ background-size: cover;
+
+ .content {
+ display: flex;
+ flex-direction: row;
+
+ .text-container {
+ display: flex;
+ flex-direction: column;
+ }
+ }
+
+ h1 {
+ font-family: var.$openSans;
+ font-size: 24px;
+ color: var.$dark-blue-1;
+ font-weight: 700;
+ margin: 0;
+ }
+
+ h2 {
+ font-family: var.$openSans;
+ font-size: 1rem;
+ color: var.$dark-blue-1;
+ font-weight: 400;
+ margin: 0;
+ }
+
+ p-button {
+ margin-left: auto;
+ align-self: center;
+ }
+ }
+}