Skip to content

Commit

Permalink
bug(UI): correct extra space on screen for small devices
Browse files Browse the repository at this point in the history 
On pages with the profile icon, the hidden submenu creates an extra
space to the right of the screen. This commit corrects this
by changing the submenu width for smaller devices

[Finishes #166104469]
  • Loading branch information
@chidimo
chidimo committed May 18, 2019
1 parent 11efcbe commit 4af3ed3
Show file tree
Hide file tree
Showing 9 changed files with 25 additions and 22 deletions.
2 changes: 1 addition & 1 deletion UI/admin.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@

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

<li>
<a id="profile_dropdown" href="#" class="">
Expand Down
29 changes: 16 additions & 13 deletions UI/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ body {
font-family: 'Open Sans', sans-serif;
padding: 0;
margin: 0;
background: #e8e8e8;
background: #E8E8E8;
color: #333A56;
/* font-size: 16px; */
}
Expand Down Expand Up @@ -78,9 +78,7 @@ button.dim:hover {
opacity: 0.8;
}

button.apply_for_loan,
button.get_started
{
button.bordered {
border: 1px solid #FFFFFF;
}

Expand Down Expand Up @@ -254,18 +252,19 @@ ul.base_ul {
}

#sub_menu {
width: 250%;
position: absolute;
top: 105%;
left: -75px;
padding: 0;
width: 230%;
position: absolute;
top: 105%;
left: -75px;
padding: 0;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
background: #F7F5E6;
color: #333A56;
text-align: center;
box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
background: #F7F5E6;
color: #333A56;
text-align: center;
overflow: hidden;
}

.submenu_username {
Expand Down Expand Up @@ -453,6 +452,10 @@ footer {
{
margin-right: auto;
}

ul#sub_menu {
width: 200%;
}
}

@media (max-width: 450px) {
Expand Down
2 changes: 1 addition & 1 deletion UI/dashboard.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 class="button_1 apply_for_loan">Apply for loan</button></a></li>
<li><a href="loan.new.html"><button class="button_1 bordered">Apply for loan</button></a></li>

<li>
<a id="profile_dropdown" href="#" class="">
Expand Down
4 changes: 2 additions & 2 deletions UI/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
<nav class="menu">
<ul class="base_ul">
<li><a class="active" href="index.html">Home</a></li>
<li><a href="authentication.html"><button id="sign_in" class="button_1 get_started">Get started</button></a></li>
<li><a href="authentication.html"><button id="sign_in" class="button_1 bordered">Get started</button></a></li>
</ul>
</nav>
</div>
Expand All @@ -42,7 +42,7 @@ <h1>Accessible and affordable funds for businesses</h1>
<h1>Subscribe To Our Newsletter</h1>
<form action="">
<input type="email" placeholder="Email">
<button class="button_1 subscribe_button">Subscribe</button>
<button class="button_1 subscribe_button bordered">Subscribe</button>
</form>
</div>
</section>
Expand Down
2 changes: 1 addition & 1 deletion UI/loan.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 class="button_1 apply_for_loan">Apply for loan</button></a></li>
<li><a href="loan.new.html"><button class="button_1 bordered">Apply for loan</button></a></li>

<li>
<a id="profile_dropdown" href="#" class="">
Expand Down
2 changes: 1 addition & 1 deletion UI/loans.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 class="button_1 apply_for_loan">Apply for loan</button></a></li>
<li><a href="loan.new.html"><buttoN class="button_1 bordered">Apply for loan</button></a></li>

<li>
<a id="profile_dropdown" href="#" class="">
Expand Down
2 changes: 1 addition & 1 deletion UI/profile.edit.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 class="button_1 apply_for_loan">Apply for loan</button></a></li>
<li><a href="loan.new.html"><button class="button_1 bordered">Apply for loan</button></a></li>

<li>
<a id="profile_dropdown" href="#" class="">
Expand Down
2 changes: 1 addition & 1 deletion UI/user.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 class="button_1 apply_for_loan">Apply for loan</button></a></li>
<li><a href="loan.new.html"><button class="button_1 bordered">Apply for loan</button></a></li>

<li>
<a id="profile_dropdown" href="#" class="">
Expand Down
2 changes: 1 addition & 1 deletion UI/users.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 class="button_1 apply_for_loan">Apply for loan</button></a></li>
<li><a href="loan.new.html"><button class="button_1 bordered">Apply for loan</button></a></li>

<li>
<a id="profile_dropdown" href="#" class="">
Expand Down

0 comments on commit 4af3ed3

Please sign in to comment.