diff options
Diffstat (limited to 'src/DevHive.Angular')
5 files changed, 90 insertions, 17 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 093e2f8..aa3c392 100644 --- a/src/DevHive.Angular/src/app/components/feed/feed.component.css +++ b/src/DevHive.Angular/src/app/components/feed/feed.component.css @@ -1,7 +1,7 @@ #feed-page { max-width: 40em; margin: 0 auto; - border: .5em solid white; + border: .5em solid var(--bg-color); border-bottom: 0; box-sizing: border-box; display: flex; @@ -31,10 +31,21 @@ } #posts { - max-height: calc(100vh - 3em); + max-height: calc(100vh - 3.5em); overflow-y: auto; } + /* Hide scrollbar for Chrome, Safari and Opera */ +#posts::-webkit-scrollbar { + display: none; +} + + /* Hide scrollbar for IE, Edge and Firefox */ +#posts { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} + /* Profile bar */ #profile-bar { @@ -43,9 +54,14 @@ display: flex; flex-direction: column; align-items: center; + box-sizing: border-box; + background-color: var(--bg-color); + margin-right: .5em; padding-bottom: 1em; + padding: .5em; + border-radius: .6em; } #profile-bar-profile-pic { @@ -63,8 +79,12 @@ #top-bar { display: flex; + width: 95%; + margin: 0 auto; + margin-bottom: .5em; } + #top-bar-profile-pic { height: 2.5em; width: 2.5em; @@ -79,6 +99,13 @@ #top-bar-create-post { flex: 1; font-size: inherit; + width: 100%; + margin: 0 auto; + box-sizing: border-box; + border: 2px solid var(--bg-color); + padding: .5em; + border-radius: .6em; + box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; } #top-bar-open-chat { @@ -86,6 +113,11 @@ display: none; } +#profile-bar, +#top-bar > * { + box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; +} + /* Elements, that act as buttons */ #profile-bar:hover, @@ -93,3 +125,12 @@ cursor: pointer; } +/* Can't copy text from */ + +#profile-bar, +.vote { + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ +} 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 3253b54..5d7c86a 100644 --- a/src/DevHive.Angular/src/app/components/feed/feed.component.html +++ b/src/DevHive.Angular/src/app/components/feed/feed.component.html @@ -4,7 +4,7 @@ </div> <div id="feed-page" *ngIf="dataArrived"> - <nav id="profile-bar" class="rounded-border" (click)="goToProfile()"> + <nav id="profile-bar" (click)="goToProfile()"> <img id="profile-bar-profile-pic" class="round-image" src="assets/images/feed/profile-pic.png" alt=""/> <div id="profile-bar-name"> {{ user.firstName }} {{ user.lastName }} @@ -16,7 +16,7 @@ <div id="feed-content"> <nav id="top-bar"> <img id="top-bar-profile-pic" class="round-image" src="assets/images/feed/profile-pic.png" alt="" (click)="goToProfile()"> - <input id="top-bar-create-post" class="rounded-border" type="text" placeholder="What's on your mind?"/> + <input id="top-bar-create-post" type="text" placeholder="What's on your mind?"/> <a id="top-bar-open-chat" href=""> <img src="assets/images/feed/chat-pic.png" alt=""/> </a> 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 e53eb2c..4769191 100644 --- a/src/DevHive.Angular/src/app/components/post/post.component.css +++ b/src/DevHive.Angular/src/app/components/post/post.component.css @@ -1,7 +1,26 @@ .post { display: flex; - width: inherit; - margin: .5em 0; + width: 95%; + + margin: .5em auto; + box-sizing: border-box; + border: 2px solid var(--card-bg); + padding: .5em; + background-color: var(--card-bg); + border-radius: .6em; +box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; +} + + /* So the bottom shadow of the last element + * doesn't get cut off + */ +.post:nth-last-child(1) { + margin-bottom: 1.1em; +} + +hr { + border: 1px solid black; + width: 90%; } /* Author */ @@ -43,22 +62,32 @@ display: flex; flex-direction: column; align-items: center; - margin-right: -.2em; + margin-right: -.1em; +} + +.score { + flex: 1; + display: flex; + align-items: center; } + .vote { + display: flex; + align-items: center; flex: 1; - background: white; + + background: var(--card-bg); font-size: 1em; + + border: 1px solid var(--card-bg); box-sizing: border-box; - border: 2px solid white; - border-radius: .3em; -} + border-radius: .2em; -.vote:hover { - background: lightgray; -} + } -.vote:active { - border-color: black; +.vote:hover { + border: 1px solid var(--focus-color); + color: var(--focus-color); + cursor: pointer; } 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 b6fab55..041158f 100644 --- a/src/DevHive.Angular/src/app/components/post/post.component.html +++ b/src/DevHive.Angular/src/app/components/post/post.component.html @@ -1,4 +1,4 @@ -<div class="post rounded-border"> +<div class="post"> <div class="content"> <div class="author"> <img class="round-image" src="assets/images/feed/profile-pic.png"> diff --git a/src/DevHive.Angular/src/styles.css b/src/DevHive.Angular/src/styles.css index 3d6d2f4..95592a1 100644 --- a/src/DevHive.Angular/src/styles.css +++ b/src/DevHive.Angular/src/styles.css @@ -4,6 +4,7 @@ :root { --bg-color: white; --focus-color: forestgreen; + --card-bg: white; } html, body { @@ -12,6 +13,7 @@ html, body { } body { font: 21px sans-serif !important; + background-color: var(--bg-color); } input:focus, button:focus { @@ -68,6 +70,7 @@ input:focus, button:focus { .input-field { width: 100%; + background-color: var(--bg-color); border: 0; border-bottom: 1px solid grey; |