Skip to content

Commit

Permalink
chore(user-info): refactor user information display
Browse files Browse the repository at this point in the history 
- Show address only on dashboard and admin view of user page
- Display user info using flexbox for small screens.
- Added additional breakpoint of 1500px to properly display user info
- Remove all border radius from divs

[Finishes #166084608]
  • Loading branch information
@chidimo
chidimo committed May 18, 2019
1 parent d85fedd commit d7b44ad
Show file tree
Hide file tree
Showing 10 changed files with 197 additions and 139 deletions.
41 changes: 27 additions & 14 deletions UI/admin.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@

<nav class="menu">
<ul class="base_ul">
<li><a href="loan.new.html"><button id="sign_in" class="button_1">Apply for loan</button></a></li>
<li><a href="loan.new.html"><button class="button_1 apply_for_loan">Apply for loan</button></a></li>

<li>
<a id="profile_dropdown" href="#" class="">
Expand Down Expand Up @@ -71,24 +71,39 @@
</div>
</header>

<section id="dashboard">
<section id="admin_dashboard">
<div class="container">
<h2 id="page_heading">
Orji Chidi <span class="verified_user">Admin</span>
Admin - Orji Chidi</span>
</h2>

<hr class="section_divider">

<div class="user_card card">
<div class="user_photo">
<img src="./img/chidi.jpg" alt="">
<div class="admin_top_div">
<div class="user_card card">
<div class="user_photo">
<img src="./img/chidi.jpg" alt="">
</div>
<hr class="card_divider">

<div class="user_info">
<h3>Orji Chidi <span class="verified_user">&#x2714</span></h3>
<p>email@address.com</p>
<p>+2341234567890</p>
</div>
</div>
<hr class="card_divider">

<div class="user_info">
<h3>Orji Chidi <span class="verified_user">&#x2714</span></h3>
<p>email@address.com</p>
<p>+2341234567890</p>

<div class="admin_nav_buttons">
<a href="./loans.html">
<button class="button_1 dim">Loans</button>
</a>
<a href="./users.html">
<button class="button_1 dim">Users</button>
</a>
</div>
</div>

<hr class="section_divider">

<h3>Recent Loans</h3>
<div class="table_wrapper">
Expand Down Expand Up @@ -126,7 +141,6 @@ <h3>Recent Loans</h3>
</tbod>
</table>
</div>
<p><a href="loans.html" class="see_more">See All Loans</a></p>

<h3>Recent Users</h3>
<div class="table_wrapper">
Expand Down Expand Up @@ -160,7 +174,6 @@ <h3>Recent Users</h3>
</tbody>
</table>
</div>
<p><a href="users.html" class="see_more">See All Users</a></p>
</div>
</section>

Expand Down
4 changes: 2 additions & 2 deletions UI/authentication.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ <h1 class="authentication_title">Sign in to your account</h1>
<label for="remember">
<input type="checkbox" checked="checked" name="remember">Remember me
</label>
<button id="sign_in_button" type="submit" class="shadowed_button submit_button">Sign In</button>
<button id="sign_in_button" type="submit" class="dim submit_button">Sign In</button>
</form>
</div>

Expand Down Expand Up @@ -79,7 +79,7 @@ <h1 class="authentication_title">Create your account</h1>
<input type="checkbox" checked="checked">Remember me
</label>
<p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
<button id="sign_up_button" type="submit" class="shadowed_button submit_button">Sign Up</button>
<button id="sign_up_button" type="submit" class="dim submit_button">Sign Up</button>
</form>
</div>
</div>
Expand Down
123 changes: 83 additions & 40 deletions UI/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ body {
input {
padding: 15px;
border:none;
border-radius: 3px;
background:#f1f1f1;
margin-bottom: 10px;
}
Expand All @@ -42,7 +41,6 @@ input:focus {
textarea {
padding: 15px;
border:none;
border-radius: 3px;
background:#f1f1f1;
margin-bottom: 10px;
}
Expand All @@ -65,7 +63,6 @@ button {
border: 1px solid #F7F5E6;
cursor: pointer;
font-size: 18px;
border-radius: 3px;
}

hr {
Expand All @@ -83,8 +80,7 @@ hr {
margin-left: auto;
margin-right: auto;
padding: 0 30px 30px 30px;
background: #ffffff;
border-radius: 5px;
background: #FFFFFF;
box-shadow: 5px 5px 15px rgb(51, 58, 86, 0.5);
}

Expand Down Expand Up @@ -133,16 +129,6 @@ td {
padding: 5px;
}

td div.item_link {
color: #ffffff;
background: #52658F;
text-decoration: none;
width: 25px;
border-radius: 50%;
height: 25px;
margin: auto;
}

thead tr {
background: #333A56;
color: #ffffff;
Expand All @@ -164,7 +150,6 @@ table tr td a {
width: 100%;
padding: 15px 0;
color: #333A56;
/* font-weight: 600; */
}

tbody tr:hover {
Expand Down Expand Up @@ -269,7 +254,6 @@ ul.base_ul {
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
background: #F7F5E6;
border-radius: 5px;
color: #333A56;
text-align: center;
}
Expand Down Expand Up @@ -352,7 +336,6 @@ ul.base_ul {
text-align: left;
padding: 30px 20px;
font-size: 24px;
/* font-weight: bold; */
}

.info_section li {
Expand All @@ -370,6 +353,43 @@ footer {
margin-top: 20px;
}

@media (max-width: 1500px) {

/* dashboard, user */
div.user_information {
display: flex;
flex-direction: column;
width: 100%;
}

div.user_address,
div.user_card{
width: 100%;
}

/* admin */

div.admin_top_div {
display: flex;
flex-direction: column;
width: 100%;
justify-content: space-between;
}

div.admin_nav_buttons {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0;
width: 100%;
margin: auto;
}

div.card {
width: 100%
}
}

@media (max-width: 768px) {

.nav_div {
Expand Down Expand Up @@ -417,31 +437,23 @@ footer {
width: 100%;
}

div.user_card,
div.loan_card
{
margin-right: auto;
}
}

@media (max-width: 450px) {

/* loan */
div.loan_card {
display: flex;
flex-direction: column;
}

div.loan_right_grid {
div.loan_card div {
margin: 0;
text-align: center;
}

.user_photo,
hr.card_divider
{
display: none;
}
}

/* About */
Expand All @@ -462,11 +474,8 @@ footer {
margin-top: 30px;
display: grid;
max-width: 650px;
border-radius: 5px;
grid-template-columns: 50% 50%;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
background: #f1f1f1;
background: #F1F1F1;
padding-top: 0;
}

Expand All @@ -477,7 +486,6 @@ footer {
}

.selected {
/* border-bottom: 1px solid rgb(51, 58, 86, 0.3); */
background: #FFFFFF;
color:#333A56;
font-size: 18px;
Expand All @@ -496,15 +504,14 @@ footer {

.card {
padding: 10px;
max-width: 500px;
width: 450px;
margin-bottom: 15px;
background-color: #FFF;
border-radius: 10px;
box-shadow: 1px 3px ghostwhite;
box-shadow: 5px 5px 15px rgb(51, 58, 86, 0.5);
}

.user_card {
margin-right: auto;
/* margin-right: auto; */
display: grid;
grid-row-gap: 50px;
grid-template-columns: 30% 1% 68%;
Expand All @@ -526,21 +533,50 @@ footer {
}

.user_address {
margin-right: auto;
margin-left: auto;
}

span.addresses {
font-weight: bold;
}

input[id=img_uploader] {
display: none;
}

.user_information {
display: flex;
flex-direction: row;
width: 100%;
}

/* admin */

.admin_actions_buttons {
margin-left: auto;
margin-top: auto;
.admin_top_div {
display: flex;
width: 100%;
justify-content: space-between;
}

.admin_nav_buttons {
display: flex;
flex-direction: column;
justify-content: start;
padding: 0 5px;
width: calc(95% - 450px);
}

.admin_nav_buttons button {
width: 100%;
border: 1px solid #FFFFFF;
margin-bottom: 10px;
}

hr.section_divider {
margin-top: 20px;
margin-bottom: 20px;
}

.modal {
display: none;
position: fixed;
Expand Down Expand Up @@ -598,6 +634,13 @@ input[id=img_uploader] {
}

/* Loan */

.admin_actions_buttons {
margin-left: auto;
margin-top: auto;
margin-bottom: 10px;
}

.approve {
background: #008000;
}
Expand Down
Loading

0 comments on commit d7b44ad

Please sign in to comment.