Skip to content

Commit

Permalink
Rewrote header to fix issues on mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@demilad
demilad committed Jan 24, 2019
1 parent ab77e12 commit 40fec96
Show file tree
Hide file tree
Showing 6 changed files with 165 additions and 135 deletions.
10 changes: 10 additions & 0 deletions images/dropdown_button.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
33 changes: 17 additions & 16 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,25 +58,26 @@
<body>
<header>
<div class="heading">
<div class="logo">
<div class="site-logo">
<img src="/images/nigerialogos_logo.svg" alt="NigeriaLogos logo">
</div>
<h1>An <a href="https://github.com/PaystackHQ/nigerialogos" target="_blank">open source</a> collection of high quality, <br> pixel perfect Nigerian company logos <br> for free use.</h1>
</div>
<div class="searchbar">
<div class="select">
<select name="Categories">
<option value="All Categories">All Categories</option>
<option value="Banking / Financial Services">Banking / Financial Services</option>
<option value="Ecommerce / Construction / Real Estate">Ecommerce / Construction / Real Estate</option>
<option value="FMCG / Conglomerate">FMCG / Conglomerate</option>
<option value="Gaming / Sports">Gaming / Sports</option>
</select>
</div>
<div class="search">
<label>
<input type="text" name="search" placeholder="search for a company">
</label>

<div class="searchbar">
<div class="select">
<select name="Categories">
<option value="All Categories">All Categories</option>
<option value="Banking / Financial Services">Banking / Financial Services</option>
<option value="Ecommerce / Construction / Real Estate">Ecommerce / Construction / Real Estate</option>
<option value="FMCG / Conglomerate">FMCG / Conglomerate</option>
<option value="Gaming / Sports">Gaming / Sports</option>
</select>
</div>
<div class="search">
<label>
<input type="text" name="search" placeholder="search for a company">
</label>
</div>
</div>
</div>
</header>
Expand Down
2 changes: 2 additions & 0 deletions scss/base/_resets.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,6 @@ html {
}
body {
box-sizing: inherit;
overflow-x: hidden;
width: 100vw;
}
124 changes: 70 additions & 54 deletions scss/layout/_header.scss
View file
Original file line number Diff line number Diff line change
@@ -1,83 +1,92 @@
header {
display: flex;
justify-content: space-between;
width: 74vw;
margin-top: 5%;
margin-left: 12%;
width: 75vw;
margin: 5% auto;

.heading {
display: flex;
flex-direction: column;
width: 29.5vw;
width: 76.2vw;
height: 20vh;
margin: 0 auto;
position: relative;

& .logo {
width: 70px;
height: 70px;
margin-bottom: 3.6vh;
margin-top: 0;
& .site-logo {
width: 5vh;
position: absolute;
top: 0;
left: 0;

& img {
width: 5vh;
transform: translateY(-15%);
width: 100%;
}
}
}
.searchbar {
display: flex;
width: 35.9vw;
min-width: 550px;
height: 4.5vh;
font-family: inherit;
position: absolute;
right: 1.5%;

.search {
flex-basis: 100%;
position: relative;

&::after {
content: '';
position: absolute;
background-image: url(../../images/icons/search.svg);
right: -3%;
top: .7rem;
width: 1.2rem;
height: 1.2rem;
transform: scale(.8);
}
width: 65%;

& input {
font-family: inherit;
width: 100%;
height: 20%;
background-color: $col-green-2;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
outline: none;
border: none;
box-sizing: border-box;
border: 1px solid $col-green-1;
padding: 0 3%;
border-radius: 4px;
margin-left: 1%;

&:focus{
outline-color: $col-green-1;
}
width: 100%;
height: 100%;
border-radius: .2em;
line-height: 1.3;
margin: 0;
font-size: 16px;
font-family: inherit;
background-color: $col-green-2;
background-image: url('/images/icons/search.svg');
background-repeat: no-repeat;
background-position: right 1em top 50%;
background-size: 1em auto;
padding-left: 1em;
margin-left: 5px;
}
}
.select {
flex-basis: 30%;
min-width: 120px;
position: relative;
cursor: pointer;
.select{
width: calc(35% - 5px); // account for the margin on the input

& select {
border: none;
cursor: pointer;
font-size: 16px; // iOS Safari zooms in if less than 16px causing weird issues
font-family: inherit;
color: $col-white;
padding: .6em 1.4em .5em .8em;
line-height: 1.3;
height: 100%;
width: 100%;
height: 20%;
background-color: $col-green-1;
color: white;
box-sizing: border-box;
font-size: 80%;
border-radius: 4px;
text-indent: 5%;

&:focus{
outline-color: $col-green-1;
margin: 0;
border-radius: .2em;
border-color: $col-green-1;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-color: $col-green-1;
background-image: url('/images/dropdown_button.svg'), linear-gradient($col-green-1, $col-green-1);
background-repeat: no-repeat;
background-position: right .7em top 50%;
background-size: .65em auto;

&::-ms-expand {
display: none;
}
&:focus,
&:active {
border-color: $col-green-2;
outline: none;
}
}
}
Expand All @@ -86,10 +95,17 @@ header {
font-weight: $fw-medium;
font-size: 150%;
min-width: 500px;
position: absolute;
left: 0;
top: 10vh;

& a {
color: inherit;
text-decoration-color: $col-green-1;

&:hover{
text-decoration-color: inherit;
}
}
}
}
13 changes: 3 additions & 10 deletions scss/layout/_section.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ main {
&::after {
content: "";
flex: auto;
}
}
}
.logo {
box-sizing: border-box;
width: 25%;
border: 20px solid transparent;
margin-top: 8%;
margin-bottom: 8%;

&__holder {
border-radius: 4px;
Expand Down Expand Up @@ -86,13 +86,6 @@ main {
color: inherit;
transition: all .5s ease-in-out;

// &:first-of-type > span {
// transform: translateY(25%);
// }
// &:last-of-type > span {
// transform: translateY(-25%);
// }

&:hover{
text-decoration: none;
font-weight: $fw-medium;
Expand All @@ -114,4 +107,4 @@ main {
}
}
}
}
}
Loading

0 comments on commit 40fec96

Please sign in to comment.