diff options
Diffstat (limited to 'src/DevHive.Angular')
4 files changed, 62 insertions, 184 deletions
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 d81f233..b6c1d3e 100644 --- a/src/DevHive.Angular/src/app/components/feed/feed.component.css +++ b/src/DevHive.Angular/src/app/components/feed/feed.component.css @@ -1,19 +1,21 @@ #feed-page { - width: 75%; - margin-left: auto; - margin-right: auto; + width: 45%; + display: flex; + margin-left: auto; + margin-right: auto; margin-top: 10px; + + place-content: center center; +} + +.side-bar { + } .top-bar { - display: inline-grid; + display: flex; width: 100%; - - grid-template-columns: 50px auto 50px; - grid-template-rows: 50px; - place-items: stretch stretch; - place-content: stretch stretch; } .top-bar img { @@ -21,6 +23,10 @@ height: 50px; } +.nav-bar-profile-pic { + border-radius: 50%; +} + .on-your-mind { margin-left: 10px; margin-right: 10px; @@ -36,5 +42,6 @@ } .post { - padding: 1% 0%; + padding: 1% 0%; + box-sizing: border-box; }
\ 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 44ae438..465adeb 100644 --- a/src/DevHive.Angular/src/app/components/feed/feed.component.html +++ b/src/DevHive.Angular/src/app/components/feed/feed.component.html @@ -1,117 +1,33 @@ <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 class="side-bar"> + <div class="side-bar-profile-pic"></div> + <div class="side-bar-names"></div> + <div class="side-bar-username"></div> </nav> - <ul> - <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> - <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 class="content"> + <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" class="post"> + <app-post></app-post> + </li> + </ul> + </div> </div> 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 3a3300d..35bbe7a 100644 --- a/src/DevHive.Angular/src/app/components/post/post.component.css +++ b/src/DevHive.Angular/src/app/components/post/post.component.css @@ -1,13 +1,6 @@ .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; */ + display: flex; border: 2px solid black; border-radius: 10px; @@ -15,55 +8,26 @@ } .post-info { - grid-column-start: 1; - grid-column-end: 2; - - grid-row-start: 1; - grid-row-end: 4; + flex: 1; } /* Start of navigation */ .profile { width: 25%; - display: grid; + display: flex; 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; + border-radius: 50%; } .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 */ @@ -72,18 +36,15 @@ /* 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; + font-size: small; + color: grey; + /* TODO: Do this!!! */ } .separator { @@ -93,28 +54,22 @@ /* End of post */ -/* Start of ranking */ +/* Start of rating */ -.ranking { - width: 40px; +.rating { height: 100%; text-align: center; - - grid-column-start: 3; - grid-column-end: 3; - - grid-row-start: 1; - grid-row-end: 4; + align-self: center; } -.ranking button { +.rating button { background-color: transparent; background-repeat: no-repeat; border: none; } -.ranking button:hover { +.rating button:hover { cursor: pointer; } -/* End of ranking */ +/* End of rating */ 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 ee8f495..15cfc59 100644 --- a/src/DevHive.Angular/src/app/components/post/post.component.html +++ b/src/DevHive.Angular/src/app/components/post/post.component.html @@ -17,12 +17,12 @@ <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 class="date-created">17:27 - 06 dec 2020</div> </div> <hr class="separator" /> <div class="files">idk.html</div> </div> - <div class="ranking"> + <div class="rating"> <button class="upvote">++</button> <div class="number-votes">{{ votesNumber }}</div> <button class="downvote">––</button> |