Skip to content

Commit

Permalink
Merge a936551 into 4d98e92
Browse files Browse the repository at this point in the history
  • Loading branch information
@NkFab
NkFab committed Mar 25, 2019
2 parents 4d98e92 + a936551 commit 5769f24
Show file tree
Hide file tree
Showing 4 changed files with 252 additions and 57 deletions.
43 changes: 24 additions & 19 deletions ui/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1044,10 +1044,12 @@ a.button {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1rem;
padding-bottom: 2px;
font-size: 0.9rem;
margin: 5px 0;
font-family: Roboto-Light; }
font-family: Roboto-Light;
line-height: 1.5em;
height: 3em;
width: 100%; }

.article-card__content-meta {
display: flex;
Expand Down Expand Up @@ -1583,7 +1585,7 @@ p {

.profile-view {
width: 80%;
border: 1px solid #C4C4C4;
border: 1px solid #c4c4c4;
box-sizing: border-box;
backdrop-filter: blur(4px);
border-radius: 5px;
Expand All @@ -1609,17 +1611,17 @@ p {
flex-direction: column; }

.profile-avatar-wrapper > p {
font-family: Roboto;
font-family: Roboto-Regular;
font-weight: bolder;
font-style: normal;
font-weight: bold;
line-height: normal;
font-size: 20px;
margin-bottom: -10px; }

.profile-avatar {
width: 100px;
display: inline-block;
border: 1px solid #C4C4C4;
border: 1px solid #c4c4c4;
border-radius: 50%;
box-sizing: border-box;
margin-bottom: -15px; }
Expand Down Expand Up @@ -1649,7 +1651,8 @@ p {

.profile-meta__text {
color: #3f51b5;
margin-bottom: 5px; }
margin-bottom: 5px;
font-size: 0.9rem; }

.profile-meta__button {
margin-right: 10px; }
Expand All @@ -1667,10 +1670,12 @@ p {

.bio-header {
color: #3f51b5;
margin-bottom: 5px; }
margin-bottom: 5px;
font-family: Roboto-Regular;
font-size: bolder; }

.bio-text {
font-family: Roboto;
font-family: Roboto-Light;
font-style: normal;
font-weight: 300;
line-height: normal;
Expand All @@ -1692,7 +1697,7 @@ p {
display: flex;
flex-direction: column;
width: 70%;
border: 0px solid #C4C4C4;
border: 0px solid #c4c4c4;
box-sizing: border-box;
backdrop-filter: blur(4px);
bottom: 20px;
Expand All @@ -1709,26 +1714,26 @@ p {
.profile-form .single-input {
width: 90%;
height: auto;
border: 1px solid #C4C4C4;
border: 1px solid #c4c4c4;
margin: 0 auto;
border-radius: 3px;
margin: 5px 20px; }

.profile-form .large-input {
width: 94%;
height: 193px;
border: 1px solid #C4C4C4;
border: 1px solid #c4c4c4;
margin-top: 40px;
margin: 20px;
border-radius: 5px; }

[type="date"] {
color: #C4C4C4;
[type='date'] {
color: #c4c4c4;
padding: 0 0.3em; }

.profile-form .single-input input[type="date"] {
.profile-form .single-input input[type='date'] {
width: 100%;
border: 0px solid #C4C4C4;
border: 0px solid #c4c4c4;
font-size: 16px;
height: 30px;
position: relative;
Expand All @@ -1737,13 +1742,13 @@ p {

.profile-form .single-input select {
width: 100%;
border: 0px solid #C4C4C4;
border: 0px solid #c4c4c4;
font-size: 16px;
height: 30px;
position: relative;
margin: 0 auto;
border-radius: 3px;
color: #C4C4C4; }
color: #c4c4c4; }

textarea::placeholder {
color: rgba(0, 0, 0, 0.3); }
Expand Down
188 changes: 188 additions & 0 deletions ui/pages/profile-view-stats.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,188 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../css/font-awesome.min.css" />
<title>Authors Haven</title>
</head>

<body>
<nav class="top-navbar container">
<div class="col-3-mob">
<a href="../index.html">
<img src="../images/logo-white.png" alt="brand-logo" class="brand-logo" />
</a>
</div>
<div class="col-8-mob content-right">
<div class="input nav-search">
<input type="text" placeholder="" />
<img src="../images/search.svg" alt="" />
</div>
</div>
<div class="col-1-mob content-right color-white">
<button class="toggle-menu is-tablet">
<div class="hamburger"></div>
<div class="hamburger-nav">
<ul>
<li><a href="./articles-create.html">New article</a></li>
<li><a href="./articles-all.html">Articles</a></li>
<li><a href="./articles-user-all.html">My Articles</a></li>
<li class="separator"></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Sign out</a></li>
</ul>
</div>
</button>
<button class="nav-button navbar-dropdown is-desktop color-white">
<img src="../images/avatar.png" class="top-navbar__avatar" alt="User logo" />
<ul class="dropdown">
<li><a href="./articles-create.html">New article</a></li>
<li><a href="./articles-all.html">Articles</a></li>
<li><a href="./articles-user-all.html">My Articles</a></li>
<li class="separator"></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Sign out</a></li>
</ul>
</button>
</div>
</nav>
<section class="main-content content-margin">
<div class="container">
<div class="profile-view">
<div class="profile-cover">
<div class="profile-avatar-wrapper">
<img src="../images/avatar.png" class="profile-avatar" alt="" />
<p>Jane Doe</p>
</div>
</div>
<div class="row">
<div class="col-9 content-right">
<div class="profile-meta">
<div>
<span class="profile-meta__text">Followers</span>
<span class="profile-meta__count">57 K</span>
</div>
<div>
<span class="profile-meta__text">Following</span>
<span class="profile-meta__count">2 K</span>
</div>
<div>
<span class="profile-meta__text">Published</span>
<span class="profile-meta__count">16</span>
</div>
<div>
<span class="profile-meta__text">Read</span>
<span class="profile-meta__count">30</span>
</div>
</div>
</div>
<div class="col-3 content-right">
<button class="button secondary profile-meta__button">Edit Profile</button>
</div>

<div class="profile-bio">
<div class="bio-header">Bio:</div>
<div class="bio-text">
Mauris vel pretium dolor, et hendrerit leo. Donec condimentum eget nisl et lobortis.
Etiam id imperdiet urna. Sed eget neque facilisis, feugiat ligula dictum, tempus
lectus. Donec nec magna nibh. Nullam molestie nisi nisl, aliquet congue purus tempor
ut. Praesent ut quam vel mauris accumsan tincidunt. In et mi non libero ultricies
</div>
</div>
</div>
<div class="row content-margin">
<div class="col-1"></div>
<div class="col-10 mt-10">
<h3 class="profile-meta__text">ARTICLES</h3>

<div class="article-card profile">
<div class="article-card__image"></div>
<div class="article-card__content">
<h3 class="article-card__content-title">
<a href="./articles-view.html">Automobile Industry Trends</a>
</h3>
<p class="article-card__content-text">
New cars to watch in 2019 are ultricies vitae risus ut aliquam. Quisque at maximus
justo, eu luctus lorem. Nullam mollis felis ligula, sit amet luctus sem luctus non
New cars to watch in 2019 are ultricies vitae risus ut aliquam. Quisque at maximus
justo, eu luctus lorem. Nullam mollis felis ligula, sit amet luctus sem luctus non
</p>
<div class="article-card__content-meta">
<span>5 min</span>
<span><i class="fa fa-eye"></i> 200</span>
<span><i class="fa fa-thumbs-up"></i> 15k</span>
</div>
</div>
</div>
<div class="article-card profile">
<div class="article-card__image"></div>
<div class="article-card__content">
<h3 class="article-card__content-title">
<a href="./articles-view.html">Automobile Industry Trends</a>
</h3>
<p class="article-card__content-text">
New cars to watch in 2019 are ultricies vitae risus ut aliquam. Quisque at maximus
justo, eu luctus lorem. Nullam mollis felis ligula, sit amet luctus sem luctus non
New cars to watch in 2019 are ultricies vitae risus ut aliquam. Quisque at maximus
justo, eu luctus lorem. Nullam mollis felis ligula, sit amet luctus sem luctus non
</p>
<div class="article-card__content-meta">
<span>5 min</span>
<span><i class="fa fa-eye"></i> 200</span>
<span><i class="fa fa-thumbs-up"></i> 15k</span>
</div>
</div>
</div>
<div class="article-card profile">
<div class="article-card__image"></div>
<div class="article-card__content">
<h3 class="article-card__content-title">
<a href="./articles-view.html">Automobile Industry Trends</a>
</h3>
<p class="article-card__content-text">
New cars to watch in 2019 are ultricies vitae risus ut aliquam. Quisque at maximus
justo, eu luctus lorem. Nullam mollis felis ligula, sit amet luctus sem luctus non
New cars to watch in 2019 are ultricies vitae risus ut aliquam. Quisque at maximus
justo, eu luctus lorem. Nullam mollis felis ligula, sit amet luctus sem luctus non
</p>
<div class="article-card__content-meta">
<span>5 min</span>
<span><i class="fa fa-eye"></i> 200</span>
<span><i class="fa fa-thumbs-up"></i> 15k</span>
</div>
</div>
</div>
<div class="article-card profile">
<div class="article-card__image"></div>
<div class="article-card__content">
<h3 class="article-card__content-title">
<a href="./articles-view.html">Automobile Industry Trends</a>
</h3>
<p class="article-card__content-text">
New cars to watch in 2019 are ultricies vitae risus ut aliquam. Quisque at maximus
justo, eu luctus lorem. Nullam mollis felis ligula, sit amet luctus sem luctus non
New cars to watch in 2019 are ultricies vitae risus ut aliquam. Quisque at maximus
justo, eu luctus lorem. Nullam mollis felis ligula, sit amet luctus sem luctus non
</p>
<div class="article-card__content-meta">
<span>5 min</span>
<span><i class="fa fa-eye"></i> 200</span>
<span><i class="fa fa-thumbs-up"></i> 15k</span>
</div>
</div>
</div>
<div class="col-12 content-right">
<a href="#" class="profile-meta__text">More Articles...</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
6 changes: 4 additions & 2 deletions ui/scss/_article-card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,12 @@
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1rem;
padding-bottom: 2px;
font-size: 0.9rem;
margin: 5px 0;
font-family: Roboto-Light;
line-height: 1.5em;
height: 3em;
width: 100%;
}
.article-card__content-meta {
display: flex;
Expand Down
Loading

0 comments on commit 5769f24

Please sign in to comment.