diff options
Diffstat (limited to 'src/DevHive.Angular')
5 files changed, 98 insertions, 56 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 d19330e..ec2c3d6 100644 --- a/src/DevHive.Angular/src/app/components/feed/feed.component.css +++ b/src/DevHive.Angular/src/app/components/feed/feed.component.css @@ -1,46 +1,87 @@ #feed-page { - width: 45%; - display: flex; + max-width: 40em; + margin: 0 auto; + border: .5em solid white; + border-bottom: 0; + box-sizing: border-box; + display: flex; +} + +@media screen and (max-width: 750px) { + #profile-bar { + display: none !important; + } + #top-bar-profile-pic { + display: initial; + } +} +@media screen and (min-width: 750px) { + #profile-bar { + display: initial; + } + #top-bar-profile-pic { + display: none !important; + } +} + +/* Content */ - margin-left: auto; - margin-right: auto; - margin-top: 10px; +#content { + flex: 1; +} - place-content: center center; +#posts { + max-height: calc(100vh - 3em); + overflow-y: auto; } -.side-bar { +/* Profile bar */ + +#profile-bar { + width: 20%; + height: fit-content; + display: flex; + flex-direction: column; + align-items: center; + box-sizing: border-box; + margin-right: .5em; + padding-bottom: 1em; } -.top-bar { - display: flex; - width: 100%; +#profile-bar-profile-pic { + width: 100%; + box-sizing: border-box; + padding: .5em; } -.top-bar img { - width: 50px; - height: 50px; +/* Top bar */ + +#top-bar { + display: flex; } -.nav-bar-profile-pic { - border-radius: 50%; +#top-bar img { + height: 1.6em; + width: 1.6em; } -.on-your-mind { - margin-left: 10px; - margin-right: 10px; +#top-bar-profile-pic { + height: 2.5em; + width: 2.5em; + margin-right: .5em; } -.on-your-mind input { - box-sizing: border-box; - width: 100%; - height: 100%; +#top-bar-profile-pic > img { + height: inherit; + width: inherit; +} - border: 2px solid black; - border-radius: 10px; +#top-bar-create-post { + flex: 1; + font-size: inherit; } -.post { - padding: 1% 0%; - box-sizing: border-box; -}
\ No newline at end of file +#top-bar-open-chat { + /* Until implemented */ + display: none; +} 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 465adeb..7375587 100644 --- a/src/DevHive.Angular/src/app/components/feed/feed.component.html +++ b/src/DevHive.Angular/src/app/components/feed/feed.component.html @@ -1,30 +1,24 @@ <div id="feed-page"> - <nav class="side-bar"> - <div class="side-bar-profile-pic"></div> - <div class="side-bar-names"></div> - <div class="side-bar-username"></div> + <nav id="profile-bar" class="rounded-border"> + <img id="profile-bar-profile-pic" class="round-image" src="assets/images/feed/profile-pic.png" alt=""/> + <div id="profile-bar-name"> + Static + </div> + <div id="profile-bar-username"> + @static + </div> </nav> - <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> + <div id="content"> + <nav id="top-bar"> + <a id="top-bar-profile-pic" class="round-image" href=""> + <img class="round-image" src="assets/images/feed/profile-pic.png" alt=""/> + </a> + <input id="top-bar-create-post" class="rounded-border" 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> </nav> - <ul> + <ul id="posts"> <li *ngFor="let post of posts" class="post"> <app-post></app-post> </li> 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 1d41398..e53eb2c 100644 --- a/src/DevHive.Angular/src/app/components/post/post.component.css +++ b/src/DevHive.Angular/src/app/components/post/post.component.css @@ -1,6 +1,7 @@ .post { display: flex; width: inherit; + margin: .5em 0; } /* Author */ @@ -14,8 +15,6 @@ width: 2.2em; height: 2.2em; margin-right: .2em; - border-radius: 50%; - object-fit: cover; } .author-info > .handle { 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 c4f3f8c..b6fab55 100644 --- a/src/DevHive.Angular/src/app/components/post/post.component.html +++ b/src/DevHive.Angular/src/app/components/post/post.component.html @@ -1,7 +1,7 @@ <div class="post rounded-border"> <div class="content"> <div class="author"> - <img src="assets/images/feed/profile-pic.png"> + <img class="round-image" src="assets/images/feed/profile-pic.png"> <div class="author-info"> <div class="name"> {{ user.firstName }} {{ user.lastName }} diff --git a/src/DevHive.Angular/src/styles.css b/src/DevHive.Angular/src/styles.css index 07a0462..2bd0a3b 100644 --- a/src/DevHive.Angular/src/styles.css +++ b/src/DevHive.Angular/src/styles.css @@ -1,11 +1,14 @@ /* You can add global styles to this file, and also import other style files */ @import "./reset.css"; +:root { + --bg-color: white; +} + html, body { height: 100%; margin: 0; } - body { font: 21px sans-serif !important; } @@ -19,3 +22,8 @@ input:focus, button:focus { border-radius: .6em; padding: .4em; } + +.round-image { + border-radius: 50%; + object-fit: cover; +} |