Skip to content

Commit d957687

Browse files
kpetrov24exoftrnastyuk
kpetrov24exoft
and
rnastyuk
authored
Chore/65 setup home page (#14)
* moved components to the core/components folder * added basic login component * added auth service and auth store * removed login component, added sign-in and sign-up components * removed redundant modifiers in auth service * chore(primeng-setup): basic design system configuration * chore(primeng-setup): removed sign-in component * chore(home-page design): setup home page design * chore(home-page-design): minor fixes --------- Co-authored-by: Roman Nastyuk <rnastyuk@exoft.net>
1 parent 7cb96ca commit d957687

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

74 files changed

+1358
-4
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
width: 2.6rem;
4040
border-radius: 0.5rem;
4141
background-color: var.$pr-blue-1;
42+
text-decoration: none;
4243

4344
i {
4445
color: white;
@@ -50,7 +51,7 @@
5051

5152
.footer-secondary-nav {
5253
height: 2.6rem;
53-
background-color: var.$bg-blue-2;
54+
background: var.$bg-blue-2;
5455

5556
.footer-copyright {
5657
@include mix.flex-center;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@use "assets/styles/mixins" as mix;
22

33
:host {
4+
position: absolute;
45
height: 4.5rem;
56
padding-right: 1rem;
67
width: 100%;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
min-height: 100%;
1818
background: url("/assets/images/sign-up-background.png") center no-repeat;
1919
background-size: cover;
20+
position: relative;
2021
}
2122
}
2223
}

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

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,114 @@
88
<!--<p-button label="Default" severity="info"/>-->
99
<!--<p-button label="Default" class="btn-icon-text"/>-->
1010
<!--<p-button label="Default" class="btn-icon-text-success"/>-->
11+
<div class="dashboard-header">
12+
<img
13+
ngSrc="assets/icons/system/home.svg"
14+
alt="dashboard"
15+
width="36"
16+
height="36"
17+
/>
18+
<span class="dashboard-title">Dashboard</span>
19+
<p-button>Create New Project</p-button>
20+
</div>
21+
22+
<div class="quick-search-container">
23+
<p class="text-center">
24+
Go to <a routerLink="/myprojects">My Projects</a> to organize your work or
25+
<a routerLink="/search">search</a> OSF
26+
</p>
27+
28+
<div class="search-container">
29+
<i class="osf-icon-search"></i>
30+
<input
31+
class="search-input"
32+
type="text"
33+
placeholder="Search in your projects"
34+
pInputText
35+
[(ngModel)]="searchValue"
36+
/>
37+
</div>
38+
39+
<p-table
40+
[value]="filteredProjects()"
41+
[rows]="5"
42+
[rowsPerPageOptions]="[2, 5, 10]"
43+
[paginator]="true"
44+
[resizableColumns]="true"
45+
[autoLayout]="true"
46+
>
47+
class="projects-table">
48+
<ng-template #header>
49+
<tr>
50+
<th pSortableColumn="title">Title <p-sortIcon field="title" /></th>
51+
<th>Contributors</th>
52+
<th pSortableColumn="modified">
53+
Modified <p-sortIcon field="modified" />
54+
</th>
55+
</tr>
56+
</ng-template>
57+
<ng-template #body let-project>
58+
<tr>
59+
<td>{{ project.title }}</td>
60+
<td>{{ getContributorsList(project) }}</td>
61+
<td>{{ project.dateModified | date: "MMM d, y, h:mm a" }}</td>
62+
</tr>
63+
</ng-template>
64+
</p-table>
65+
</div>
66+
67+
<div class="public-projects-container">
68+
<i class="osf-icon-search"></i>
69+
<div class="title-container">
70+
<h1>Discover Public Projects</h1>
71+
</div>
72+
</div>
73+
74+
<div class="noteworthy-container">
75+
<div class="news-section">
76+
<h2>New And Noteworthy</h2>
77+
@for (block of noteworthy; track block.title) {
78+
<div class="news-block">
79+
<p class="title">{{ block.title }}</p>
80+
<br />
81+
<p class="authors">{{ block.authors }}</p>
82+
</div>
83+
}
84+
</div>
85+
<div class="news-section">
86+
<h2>Most Popular</h2>
87+
@for (block of mostPopular; track block.title) {
88+
<div class="news-block">
89+
<p class="title">{{ block.title }}</p>
90+
<br />
91+
<p class="authors">{{ block.authors }}</p>
92+
</div>
93+
}
94+
</div>
95+
</div>
96+
97+
<div class="latest-research-container">
98+
<div class="content">
99+
<div class="text-container">
100+
<h1>Browse the latest research</h1>
101+
<h2>
102+
Check out the latest preprints hosted on OSF covering a variety of
103+
research areas
104+
</h2>
105+
</div>
106+
<p-button label="View Preprints" severity="success" />
107+
</div>
108+
</div>
109+
110+
<div class="hosting-container">
111+
<div class="content">
112+
<div class="text-container">
113+
<h1>Hosting a conference or meeting?</h1>
114+
<h2>
115+
Use the OSF for Meetings service to provide a central location for
116+
conference submissions
117+
</h2>
118+
</div>
119+
<p-button label="View Meetings" severity="success" />
120+
</div>
121+
</div>

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

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
@use "assets/styles/variables" as var;
2+
3+
@mixin flex-container($direction: row, $justify: flex-start, $align: center) {
4+
display: flex;
5+
flex-direction: $direction;
6+
justify-content: $justify;
7+
align-items: $align;
8+
}
9+
10+
:host {
11+
@include flex-container(column);
12+
13+
.dashboard-header {
14+
@include flex-container(row, start);
15+
width: 100%;
16+
padding: 7.14rem 1.71rem 3.43rem 1.71rem;
17+
background: var.$gradient-1;
18+
19+
.dashboard-title {
20+
font-size: 1.71rem;
21+
color: var.$dark-blue-1;
22+
font-weight: 700;
23+
margin-left: 0.86rem;
24+
}
25+
26+
p-button {
27+
margin-left: auto;
28+
}
29+
}
30+
31+
.quick-search-container {
32+
background: white;
33+
padding: 1.71rem;
34+
width: 100%;
35+
36+
.text-center {
37+
font-size: 1rem;
38+
font-weight: 400;
39+
color: var.$dark-blue-1;
40+
text-align: center;
41+
margin-bottom: 3.43rem;
42+
43+
a {
44+
color: var.$pr-blue-1;
45+
}
46+
}
47+
48+
.search-container {
49+
@include flex-container(row, flex-start, center);
50+
position: relative;
51+
52+
i {
53+
position: absolute;
54+
left: 0.86rem;
55+
color: var.$dark-blue-1;
56+
font-size: 1.1rem;
57+
}
58+
59+
.search-input {
60+
width: 100%;
61+
background: white;
62+
border: 1px solid var.$grey-2;
63+
border-radius: 0.57rem;
64+
font-size: 1.1rem;
65+
font-weight: 400;
66+
padding-left: 2.86rem;
67+
color: var.$dark-blue-1;
68+
height: 3.29rem;
69+
}
70+
}
71+
}
72+
73+
.public-projects-container {
74+
width: 100%;
75+
background: var.$gradient-1;
76+
height: 14.57rem;
77+
padding: 8.57rem 0 3.43rem 1.71rem;
78+
display: flex;
79+
flex-direction: row;
80+
81+
h1 {
82+
color: var.$dark-blue-1;
83+
font-weight: 700;
84+
margin: 0;
85+
}
86+
87+
i {
88+
color: var.$dark-blue-1;
89+
font-size: 2.3rem;
90+
margin-right: 0.86rem;
91+
}
92+
}
93+
94+
.noteworthy-container {
95+
width: 100%;
96+
display: flex;
97+
flex-direction: row;
98+
background: white;
99+
padding: 1.71rem;
100+
column-gap: 1.71rem;
101+
102+
.news-section {
103+
display: flex;
104+
flex-direction: column;
105+
row-gap: 0.86rem;
106+
width: 50%;
107+
108+
h2 {
109+
color: var.$dark-blue-1;
110+
font-weight: 700;
111+
margin: 0;
112+
}
113+
114+
.news-block {
115+
border: 1px solid var.$grey-2;
116+
border-radius: 0.86rem;
117+
padding: 1.71rem;
118+
119+
p {
120+
margin: 0 0 0 0;
121+
}
122+
123+
.title {
124+
font-size: 1.29rem;
125+
color: var.$dark-blue-1;
126+
font-weight: 700;
127+
}
128+
129+
.authors {
130+
font-size: 1rem;
131+
color: var.$dark-blue-1;
132+
font-weight: 400;
133+
margin-top: 1.71rem;
134+
}
135+
}
136+
}
137+
}
138+
139+
.latest-research-container {
140+
width: 100%;
141+
background: var.$gradient-2;
142+
height: 11.14rem;
143+
padding: 3.43rem 3.43rem 3.43rem 1.71rem;
144+
145+
.content {
146+
display: flex;
147+
flex-direction: row;
148+
149+
.text-container {
150+
display: flex;
151+
flex-direction: column;
152+
}
153+
}
154+
155+
h1 {
156+
color: var.$dark-blue-1;
157+
font-weight: 700;
158+
margin: 0;
159+
}
160+
161+
h2 {
162+
color: var.$dark-blue-1;
163+
font-weight: 400;
164+
margin: 0;
165+
}
166+
167+
p-button {
168+
margin-left: auto;
169+
170+
button {
171+
width: 10.29rem;
172+
height: 3.14rem;
173+
}
174+
}
175+
}
176+
177+
.hosting-container {
178+
width: 100%;
179+
height: 11.14rem;
180+
padding: 3.43rem 3.43rem 3.43rem 1.71rem;
181+
background: url("/assets/images/hosting-background.svg") no-repeat center
182+
center;
183+
background-size: cover;
184+
185+
.content {
186+
display: flex;
187+
flex-direction: row;
188+
189+
.text-container {
190+
display: flex;
191+
flex-direction: column;
192+
}
193+
}
194+
195+
h1 {
196+
color: var.$dark-blue-1;
197+
font-weight: 700;
198+
margin: 0;
199+
}
200+
201+
h2 {
202+
color: var.$dark-blue-1;
203+
font-weight: 400;
204+
margin: 0;
205+
}
206+
207+
p-button {
208+
margin-left: auto;
209+
align-self: center;
210+
}
211+
}
212+
}

0 commit comments

Comments
 (0)