aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/DevHive.Angular/.editorconfig4
-rw-r--r--src/DevHive.Angular/src/app/app.component.html4
-rw-r--r--src/DevHive.Angular/src/app/components/feed/feed.component.css143
-rw-r--r--src/DevHive.Angular/src/app/components/feed/feed.component.html214
-rw-r--r--src/DevHive.Angular/src/app/components/feed/feed.component.ts14
-rw-r--r--src/DevHive.Angular/src/app/components/post/post.component.css120
-rw-r--r--src/DevHive.Angular/src/app/components/post/post.component.html31
-rw-r--r--src/DevHive.Angular/src/app/components/post/post.component.ts25
-rw-r--r--src/DevHive.Angular/src/assets/images/feed/chat-pic.pngbin0 -> 7634 bytes
-rw-r--r--src/DevHive.Angular/src/assets/images/feed/profile-pic.pngbin0 -> 7870 bytes
-rw-r--r--src/DevHive.Angular/src/models/identity/user.ts47
-rw-r--r--src/DevHive.Angular/src/test.ts25
12 files changed, 376 insertions, 251 deletions
diff --git a/src/DevHive.Angular/.editorconfig b/src/DevHive.Angular/.editorconfig
index 59d9a3a..3d9a482 100644
--- a/src/DevHive.Angular/.editorconfig
+++ b/src/DevHive.Angular/.editorconfig
@@ -3,8 +3,8 @@ root = true
[*]
charset = utf-8
-indent_style = space
-indent_size = 2
+indent_style = tab
+indent_size = 4
insert_final_newline = true
trim_trailing_whitespace = true
diff --git a/src/DevHive.Angular/src/app/app.component.html b/src/DevHive.Angular/src/app/app.component.html
index bb3fbbb..2bb3494 100644
--- a/src/DevHive.Angular/src/app/app.component.html
+++ b/src/DevHive.Angular/src/app/app.component.html
@@ -1,7 +1,7 @@
<div class="main">
<!-- <app-login></app-login> -->
- <app-register></app-register>
- <!-- <app-feed></app-feed> -->
+ <!-- <app-register></app-register> -->
+ <app-feed></app-feed>
</div>
<!-- <router-outlet></router-outlet> -->
diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.css b/src/DevHive.Angular/src/app/components/feed/feed.component.css
index 7715234..d81f233 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.css
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.css
@@ -1,109 +1,40 @@
-#feed {
- max-width: 50%;
+#feed-page {
+ width: 75%;
margin-left: auto;
margin-right: auto;
-}
-
+
+ margin-top: 10px;
+}
+
+.top-bar {
+ display: inline-grid;
+ width: 100%;
+
+ grid-template-columns: 50px auto 50px;
+ grid-template-rows: 50px;
+ place-items: stretch stretch;
+ place-content: stretch stretch;
+}
+
+.top-bar img {
+ width: 50px;
+ height: 50px;
+}
+
+.on-your-mind {
+ margin-left: 10px;
+ margin-right: 10px;
+}
+
+.on-your-mind input {
+ box-sizing: border-box;
+ width: 100%;
+ height: 100%;
+
+ border: 2px solid black;
+ border-radius: 10px;
+}
+
.post {
- margin: 1em 0;
-}
-
-.post-content {
- background-color: var(--dark-blue);
- border: 2px solid var(--orange);
- border-radius: 0.5em;
- padding: 0.6em;
- overflow: hidden;
- display: flex;
-}
-
-.author {
- margin-bottom: 0.5em;
- display: flex;
- position: relative;
-}
-
-.profile-picture {
- height: 2.1em;
- width: 2.1em;
- border-radius: 50%;
- margin-right: 0.5em;
- object-fit: cover;
-}
-
-.author-info > .name {
- font-weight: bold;
-}
-
-.author-info > .handle {
- font-size: 0.9em;
-}
-
-.post-content > .rating {
- margin-left: auto;
- display: flex;
- align-items: center;
- flex-direction: column;
-}
-
-.timestamp {
- font-size: 0.5em;
- color: var(--gray);
- padding-top: 0.8em;
-}
-
-.score {
- margin-top: auto;
- margin-bottom: auto;
-}
-
-.attachments {
- position: relative;
- z-index: -1;
- display: flex;
-}
-
-.attachment {
- background-color: var(--dark-blue);
- border: 1px solid var(--orange);
- border-bottom-width: 2px;
- border-radius: 0 0 0.5em 0.5em;
- padding: 0.5em;
- margin-top: -0.6em;
- padding-top: 1em;
- flex: 1;
- display: flex;
- overflow: hidden;
-}
-
-.attachment:nth-of-type(1) {
- border-left-width: 2px;
-}
-
-.attachment:nth-last-of-type(1) {
- border-right-width: 2px;
-}
-
-.filename {
- font-style: italic;
- text-shadow: 0.1em 0.1em 0.1em black;
-}
-
-.file-picture {
- height: 1.9em;
- width: 1.9em;
- object-fit: cover;
- margin-left: auto;
-}
-
-.info-reminder {
- font-size: 0.5em;
- color: var(--gray);
- padding-top: 0.2em;
- align-self: flex-end;
-}
-
-.loading-more {
- text-align: center;
-}
- \ No newline at end of file
+ padding: 1% 0%;
+} \ No newline at end of file
diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.html b/src/DevHive.Angular/src/app/components/feed/feed.component.html
index 96864c7..44ae438 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.html
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.html
@@ -1,107 +1,117 @@
-<div id="feed">
+<div id="feed-page">
+ <nav class="top-bar">
+ <div class="nav-bar-profile-pic">
+ <a href=""><img src="assets/images/feed/profile-pic.png" alt="profile-pic"></a>
+ </div>
+ <div class="on-your-mind">
+ <a href=""><input type="text" placeholder="What's on yo' mind?"></a>
+ </div>
+ <div class="nav-bar-chat-pic">
+ <a href=""><img src="assets/images/feed/chat-pic.png" alt="chat-pic"></a>
+ </div>
+ </nav>
<ul>
- <li *ngFor="let post of posts; let c = count;">
- <h1> {{ c }} post</h1>
- <!-- <app-post class="post"></app-post> -->
+ <li *ngFor="let post of posts" class="post">
+ <app-post></app-post>
</li>
</ul>
<!-- <div class="post">
- <div class="post-content">
- <div class="content">
- <div class="author">
- <img src="https://cdn.pixabay.com/photo/2020/03/01/12/36/fire-4892711_960_720.jpg" class="profile-picture">
- <div class="author-info">
- <div class="name">
- Gosho Ivanov
- </div>
- <div class="handle">
- @givanov
- </div>
- </div>
- </div>
- <div class="message">
- Here, a cool way to style elements in CSS
- </div>
- <div class="timestamp">
- 17:41 - 27 Dec 2020
- </div>
- </div>
- <div class="rating">
- <div class="upvote">
- ᐃ
- </div>
- <div class="score">
- 11
- </div>
- <div class="downvote">
- ᐁ
- </div>
- </div>
- </div>
- <div class="attachments">
- <div class="attachment">
- <div class="filename">
- index.html
- <div class="info-reminder">
- Click to preview
- </div>
- </div>
- <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.iconscout.com%2Ficon%2Ffree%2Fpng-256%2Ftxt-file-20-504249.png&f=1&nofb=1" class="file-picture">
+ <div class="post-content">
+ <div class="content">
+ <div class="author">
+ <img src="https://cdn.pixabay.com/photo/2020/03/01/12/36/fire-4892711_960_720.jpg" class="profile-picture">
+ <div class="author-info">
+ <div class="name">
+ Gosho Ivanov
+ </div>
+ <div class="handle">
+ @givanov
+ </div>
+ </div>
+ </div>
+ <div class="message">
+ Here, a cool way to style elements in CSS
+ </div>
+ <div class="timestamp">
+ 17:41 - 27 Dec 2020
+ </div>
+ </div>
+ <div class="rating">
+ <div class="upvote">
+ ᐃ
+ </div>
+ <div class="score">
+ 11
+ </div>
+ <div class="downvote">
+ ᐁ
+ </div>
+ </div>
</div>
- <div class="attachment">
- <div class="filename">
- styles.css
- <div class="info-reminder">
- Click to preview
- </div>
- </div>
- <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.iconscout.com%2Ficon%2Ffree%2Fpng-256%2Ftxt-file-20-504249.png&f=1&nofb=1" class="file-picture">
- </div>
- </div>
- </div>
- <div class="post">
- <div class="post-content">
- <div class="content">
- <div class="author">
- <img src="https://cdn.pixabay.com/photo/2020/09/06/20/21/cat-5550033_960_720.jpg" class="profile-picture">
- <div class="author-info">
- <div class="name">
- Petio Draganov
- </div>
- <div class="handle">
- @pen15
- </div>
- </div>
- </div>
- <div class="message">
- Your opinion on my idea?
- </div>
- <div class="timestamp">
- 17:41 - 27 Dec 2020
- </div>
- </div>
- <div class="rating">
- <div class="upvote">
- ᐃ
- </div>
- <div class="score">
- -2
- </div>
- <div class="downvote">
- ᐁ
- </div>
- </div>
- </div>
- <div class="attachments">
- <div class="attachment">
- <div class="filename">
- my_new_idea1.txt
- <div class="info-reminder">
- Click to preview
- </div>
- </div>
- <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.iconscout.com%2Ficon%2Ffree%2Fpng-256%2Ftxt-file-20-504249.png&f=1&nofb=1" class="file-picture">
- </div>
- </div>
- </div> -->
-</div> \ No newline at end of file
+ <div class="attachments">
+ <div class="attachment">
+ <div class="filename">
+ index.html
+ <div class="info-reminder">
+ Click to preview
+ </div>
+ </div>
+ <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.iconscout.com%2Ficon%2Ffree%2Fpng-256%2Ftxt-file-20-504249.png&f=1&nofb=1" class="file-picture">
+ </div>
+ <div class="attachment">
+ <div class="filename">
+ styles.css
+ <div class="info-reminder">
+ Click to preview
+ </div>
+ </div>
+ <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.iconscout.com%2Ficon%2Ffree%2Fpng-256%2Ftxt-file-20-504249.png&f=1&nofb=1" class="file-picture">
+ </div>
+ </div>
+ </div>
+ <div class="post">
+ <div class="post-content">
+ <div class="content">
+ <div class="author">
+ <img src="https://cdn.pixabay.com/photo/2020/09/06/20/21/cat-5550033_960_720.jpg" class="profile-picture">
+ <div class="author-info">
+ <div class="name">
+ Petio Draganov
+ </div>
+ <div class="handle">
+ @pen15
+ </div>
+ </div>
+ </div>
+ <div class="message">
+ Your opinion on my idea?
+ </div>
+ <div class="timestamp">
+ 17:41 - 27 Dec 2020
+ </div>
+ </div>
+ <div class="rating">
+ <div class="upvote">
+ ᐃ
+ </div>
+ <div class="score">
+ -2
+ </div>
+ <div class="downvote">
+ ᐁ
+ </div>
+ </div>
+ </div>
+ <div class="attachments">
+ <div class="attachment">
+ <div class="filename">
+ my_new_idea1.txt
+ <div class="info-reminder">
+ Click to preview
+ </div>
+ </div>
+ <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.iconscout.com%2Ficon%2Ffree%2Fpng-256%2Ftxt-file-20-504249.png&f=1&nofb=1" class="file-picture">
+ </div>
+ </div>
+ </div> -->
+</div>
diff --git a/src/DevHive.Angular/src/app/components/feed/feed.component.ts b/src/DevHive.Angular/src/app/components/feed/feed.component.ts
index a0efd17..fa2575f 100644
--- a/src/DevHive.Angular/src/app/components/feed/feed.component.ts
+++ b/src/DevHive.Angular/src/app/components/feed/feed.component.ts
@@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core';
+import { Title } from '@angular/platform-browser';
import { FeedService } from 'src/app/services/feed.service';
import { PostComponent } from '../post/post.component';
@@ -8,10 +9,19 @@ import { PostComponent } from '../post/post.component';
styleUrls: ['./feed.component.css']
})
export class FeedComponent implements OnInit {
- public posts: PostComponent[] = [ ];
+ private _title = 'Feed';
+ public posts: PostComponent[];
- constructor(private service: FeedService) { }
+ constructor(private titleService: Title, private service: FeedService) {
+ this.titleService.setTitle(this._title);
+ }
ngOnInit(): void {
+ this.posts = [
+ new PostComponent(),
+ new PostComponent(),
+ new PostComponent(),
+ new PostComponent(),
+ ]
}
}
diff --git a/src/DevHive.Angular/src/app/components/post/post.component.css b/src/DevHive.Angular/src/app/components/post/post.component.css
index e69de29..3a3300d 100644
--- a/src/DevHive.Angular/src/app/components/post/post.component.css
+++ b/src/DevHive.Angular/src/app/components/post/post.component.css
@@ -0,0 +1,120 @@
+.post {
+ width: 100%;
+ display: grid;
+ position: relative;
+
+ grid-template-columns: 25% auto 40px;
+ grid-template-rows: 10% 10% auto 5% 10%;
+
+ /* justify-content: space-between;
+ align-items: center; */
+
+ border: 2px solid black;
+ border-radius: 10px;
+ padding: 4px;
+}
+
+.post-info {
+ grid-column-start: 1;
+ grid-column-end: 2;
+
+ grid-row-start: 1;
+ grid-row-end: 4;
+}
+
+/* Start of navigation */
+
+.profile {
+ width: 25%;
+ display: grid;
+ box-sizing: border-box;
+
+ grid-column-start: 1;
+ grid-column-end: 2;
+
+ grid-row-start: 1;
+ grid-row-end: 2;
+}
+
+.post-profile-pic img {
+ width: 60px;
+ height: 60px;
+
+ grid-column-start: 1;
+ grid-column-end: 1;
+
+ grid-row-start: 1;
+ grid-row-end: 2;
+}
+
+.user-info {
+ width: 100%;
+ padding-left: 5px;
+
+ grid-column-start: 2;
+ grid-column-end: 2;
+
+ grid-row-start: 1;
+ grid-row-end: 2;
+}
+
+.profile-names {
+ grid-row: 1;
+}
+
+.profile-username {
+ grid-row: 2;
+}
+
+/* End of navigation */
+
+
+/* Start of post */
+
+.content {
+ grid-column-start: 1;
+ grid-column-end: 2;
+}
+
+.message {
+ grid-row-start: 3;
+ grid-row-end: 3;
+}
+
+.date-created {
+ grid-row-start: 4;
+ grid-row-end: 4;
+}
+
+.separator {
+ width: 100%;
+}
+
+/* End of post */
+
+
+/* Start of ranking */
+
+.ranking {
+ width: 40px;
+ height: 100%;
+ text-align: center;
+
+ grid-column-start: 3;
+ grid-column-end: 3;
+
+ grid-row-start: 1;
+ grid-row-end: 4;
+}
+
+.ranking button {
+ background-color: transparent;
+ background-repeat: no-repeat;
+ border: none;
+}
+
+.ranking button:hover {
+ cursor: pointer;
+}
+
+/* End of ranking */
diff --git a/src/DevHive.Angular/src/app/components/post/post.component.html b/src/DevHive.Angular/src/app/components/post/post.component.html
index 71b500c..ee8f495 100644
--- a/src/DevHive.Angular/src/app/components/post/post.component.html
+++ b/src/DevHive.Angular/src/app/components/post/post.component.html
@@ -1 +1,30 @@
-<p>post works!</p>
+<div class="post">
+ <div class="post-info">
+ <nav class="profile">
+ <div class="post-profile-pic">
+ <img
+ src="assets/images/feed/profile-pic.png"
+ alt="profile-pic"
+ />
+ </div>
+ <div class="user-info">
+ <div class="profile-names">
+ {{ user.firstName }} {{ user.lastName }}
+ </div>
+ <div class="profile-username">@{{ user.userName }}</div>
+ </div>
+ </nav>
+
+ <div class="content">
+ <div class="message">Here, a cool way to style elements in CSS</div>
+ <div class="date-created">12.01.2021</div>
+ </div>
+ <hr class="separator" />
+ <div class="files">idk.html</div>
+ </div>
+ <div class="ranking">
+ <button class="upvote">++</button>
+ <div class="number-votes">{{ votesNumber }}</div>
+ <button class="downvote">&ndash;&ndash;</button>
+ </div>
+</div>
diff --git a/src/DevHive.Angular/src/app/components/post/post.component.ts b/src/DevHive.Angular/src/app/components/post/post.component.ts
index c61410b..72c7aec 100644
--- a/src/DevHive.Angular/src/app/components/post/post.component.ts
+++ b/src/DevHive.Angular/src/app/components/post/post.component.ts
@@ -1,15 +1,28 @@
import { Component, OnInit } from '@angular/core';
+import { Guid } from 'guid-typescript';
+import { User } from 'src/models/identity/user';
@Component({
- selector: 'app-post',
- templateUrl: './post.component.html',
- styleUrls: ['./post.component.css']
+ selector: 'app-post',
+ templateUrl: './post.component.html',
+ styleUrls: ['./post.component.css'],
})
export class PostComponent implements OnInit {
+ public user: User;
+ public votesNumber: number;
- constructor() { }
+ constructor() {}
- ngOnInit(): void {
- }
+ ngOnInit(): void {
+ //Fetch data in post service
+ this.user = new User(
+ Guid.create(),
+ 'gosho_trapov',
+ 'Gosho',
+ 'Trapov',
+ 'assets/images/feed/profile-pic.png'
+ );
+ this.votesNumber = 23;
+ }
}
diff --git a/src/DevHive.Angular/src/assets/images/feed/chat-pic.png b/src/DevHive.Angular/src/assets/images/feed/chat-pic.png
new file mode 100644
index 0000000..60241fa
--- /dev/null
+++ b/src/DevHive.Angular/src/assets/images/feed/chat-pic.png
Binary files differ
diff --git a/src/DevHive.Angular/src/assets/images/feed/profile-pic.png b/src/DevHive.Angular/src/assets/images/feed/profile-pic.png
new file mode 100644
index 0000000..87f67f5
--- /dev/null
+++ b/src/DevHive.Angular/src/assets/images/feed/profile-pic.png
Binary files differ
diff --git a/src/DevHive.Angular/src/models/identity/user.ts b/src/DevHive.Angular/src/models/identity/user.ts
index 7fcda42..e16c908 100644
--- a/src/DevHive.Angular/src/models/identity/user.ts
+++ b/src/DevHive.Angular/src/models/identity/user.ts
@@ -1,15 +1,52 @@
import { Guid } from "guid-typescript";
export class User {
- private id: Guid;
- private userName: string;
- private firstName: string;
- private lastName: string;
+ private _id : Guid;
+ private _lastName : string;
+ private _firstName : string;
+ private _userName : string;
+ private _imageUrl : string;
- constructor(id: Guid, userName: string, firstName: string, lastName: string) {
+ constructor(id: Guid, userName: string, firstName: string, lastName: string, imageUrl: string) {
this.id = id;
this.userName = userName;
this.firstName = firstName;
this.lastName = lastName;
}
+
+
+ public get id() : Guid {
+ return this._id;
+ }
+ public set id(v : Guid) {
+ this._id = v;
+ }
+
+ public get userName() : string {
+ return this._userName;
+ }
+ public set userName(v : string) {
+ this._userName = v;
+ }
+
+ public get firstName() : string {
+ return this._firstName;
+ }
+ public set firstName(v : string) {
+ this._firstName = v;
+ }
+
+ public get lastName() : string {
+ return this._lastName;
+ }
+ public set lastName(v: string) {
+ this._lastName = v;
+ }
+
+ public get imageUrl() : string {
+ return this._imageUrl;
+ }
+ public set imageUrl(v : string) {
+ this._imageUrl = v;
+ }
}
diff --git a/src/DevHive.Angular/src/test.ts b/src/DevHive.Angular/src/test.ts
deleted file mode 100644
index 50193eb..0000000
--- a/src/DevHive.Angular/src/test.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js/dist/zone-testing';
-import { getTestBed } from '@angular/core/testing';
-import {
- BrowserDynamicTestingModule,
- platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-declare const require: {
- context(path: string, deep?: boolean, filter?: RegExp): {
- keys(): string[];
- <T>(id: string): T;
- };
-};
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
- BrowserDynamicTestingModule,
- platformBrowserDynamicTesting()
-);
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
generated by cgit v1.2.3 (git 2.46.0) at 2026-03-16 16:14:33 +0000