midgard/zeus.ugent.be
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

sliding search

Browse source
This commit is contained in:
Lorin Werthen 2016-10-08 19:18:37 +02:00
parent 596b077797
commit 91df459dc6
3 changed files with 19 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
content/assets/scripts/search.coffee Normal file
View file

@ -0,0 +1,6 @@
$ ->
$('#tipue_search_input_field').focusin ->
$('#tipue_search_input').addClass("focused")
$('#tipue_search_input_field').focusout ->
$('#tipue_search_input').removeClass("focused")

12
content/assets/stylesheets/includes/general.scss
View file

@ -96,9 +96,16 @@ footer.footer {
font: inherit; font: inherit;
color: inherit; color: inherit;
width: 40px;
border-color: rgba(0, 0, 0, 0);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
transition: all 0.5s;
input { input {
background: none; background: none;
border: none; border: none;
@ -111,6 +118,11 @@ footer.footer {
color: inherit; color: inherit;
} }
&:hover, &:focus, &.focused {
width: 170px;
border: 1px solid #e2e2e2;
}
&::before { &::before {
font: normal normal normal 14px/1 FontAwesome; font: normal normal normal 14px/1 FontAwesome;
content: "\f002 "; content: "\f002 ";

1
layouts/default.erb
View file

@ -25,6 +25,7 @@
<link href="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch_set.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch_set.js"></script>
<%= asset :js, :tipuesearch %> <%= asset :js, :tipuesearch %>
<%= asset :js, :search %>
<!-- Place this tag in your head or just before your close body tag. --> <!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script> <script async defer src="https://buttons.github.io/buttons.js"></script>