Skip to content

Fix menu dropdown and add searchbar to mobile layout #244

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jan 11, 2016
Merged

Fix menu dropdown and add searchbar to mobile layout #244

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
14785e7
Fix menu dropdown
panicbit Dec 18, 2015
89004f5
Remove searchbar from dropdown menu
panicbit Jan 6, 2016
8da6840
Add mobile searchbar
panicbit Jan 6, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 25 additions & 21 deletions app/styles/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,27 +72,6 @@ body {
right: 0;
left: auto;
min-width: 200px;

li.search {
padding: 5px;
input.search {
margin: 0;
border: 1px solid black;
}
}
}

input.search {
font-size: 90%;
border: none;
color: black;
outline: 0;
margin-left: 30px;
padding: 5px 5px 5px 25px;
background-image: url('/assets/search.png');
background-repeat: no-repeat;
background-position: 6px 6px;
@include border-radius(15px);
}

button {
Expand Down Expand Up @@ -126,6 +105,31 @@ body {
}
}

#header input.search, #mobile-search input.search {
font-size: 90%;
border: none;
color: black;
outline: 0;
margin-left: 30px;
padding: 5px 5px 5px 25px;
background-image: url('/assets/search.png');
background-repeat: no-repeat;
background-position: 6px 6px;
@include border-radius(15px);
}

#mobile-search {
display: none;
margin-bottom: 10px;
input.search {
width: 100%;
margin: 0;
}
@media only screen and (max-width: 820px) {
display: block;
}
}

span.small {
color: $main-color-light;
font-size: 80%;
Expand Down
27 changes: 13 additions & 14 deletions app/templates/application.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,14 +48,12 @@
</div>

<div class='menu'>
<div class='dropdown-container'>
<button {{action 'toggleUserOptions'}}
class='{{if showUserOptions "active"}} dropdown'>
{{#rl-dropdown-container class='dropdown-container'}}
{{#rl-dropdown-toggle class='dropdown'}}
Menu
<span class='arrow'></span>
</button>
<ul id='current-user-links'
class='{{if showUserOptions "open"}} dropdown'>
{{/rl-dropdown-toggle}}
{{#rl-dropdown tagName='ul' id='current-user-links' class='dropdown' closeOnChildClick='a:link'}}
<li>{{#link-to "crates"}}Browse All Crates{{/link-to}}</li>
{{#if session.currentUser}}
<li>{{#link-to 'dashboard'}}Dashboard{{/link-to}}</li>
Expand All @@ -64,20 +62,21 @@
{{else}}
<li>{{#link-to "login"}}Log in with GitHub{{/link-to}}</li>
{{/if}}
<li class='search'>
{{input type="text" class="search"
placeholder="Search"
value=search
enter="search"}}
</li>
</ul>
</div>
{{/rl-dropdown}}
{{/rl-dropdown-container}}
</div>

<div class='links'>
</div>
</div>

<form id='mobile-search' class='search' action='/search' {{ action "search" on="submit" }} >
{{input type="text" class="search" name="q"
placeholder="Search"
value=search
tabindex="1"}}
</form>

<div id="main" class='inner-content'>
<p id='flash' class={{if flashError "shown"}}>{{flashError}}</p>

Expand Down