Skip to content
This repository has been archived by the owner on Dec 14, 2021. It is now read-only.

Commit

Permalink
search bar implemented fixed #57
Browse files Browse the repository at this point in the history
  • Loading branch information
@hmert
hmert committed Jul 11, 2014
1 parent 378a88c commit ed86c01
Show file tree
Hide file tree
Showing 3 changed files with 165 additions and 74 deletions.
159 changes: 85 additions & 74 deletions app/Resources/views/ojsheader.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,95 +9,106 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Ojstr</a>
<a class="navbar-brand" href="/">Ojstrx</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="ojs-navbar-collapse">

{%include '::language_selector.html.twig'%}

<div class="navbar-right">
<ul class="nav navbar-nav">
{% if ojsuser %}
<li class="dropdown messages-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope"></i>
<span class="label label-success"><!--$count--></span>
</a>
<ul class="dropdown-menu">
<li>
<ul class="menu">
{% if ojsuser %}
<li class="dropdown messages-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope"></i>
<span class="label label-success"><!--$count--></span>
</a>
<ul class="dropdown-menu">
<li>
<ul class="menu">

</ul>
</li>
<li class="footer"><a href="#">See All Messages</a></li>
</ul>
</li>
<li class="dropdown notifications-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-warning"></i>
<span class="label label-warning"><!--$count--></span>
</a>
<ul class="dropdown-menu">
</ul>
</li>
<li class="footer"><a href="#">See All Messages</a></li>
</ul>
</li>
<li class="dropdown notifications-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-warning"></i>
<span class="label label-warning"><!--$count--></span>
</a>
<ul class="dropdown-menu">

<li>
<ul class="menu">
<li>
<ul class="menu">

</ul>
</li>
<li class="footer"><a href="#">View all</a></li>
</ul>
</li>
<li class="dropdown tasks-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-tasks"></i>
<span class="label label-danger"><!--$count--></span>
</a>
<ul class="dropdown-menu">
<li>
<ul class="menu">
</ul>
</li>
<li class="footer"><a href="#">View all</a></li>
</ul>
</li>
<li class="dropdown tasks-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-tasks"></i>
<span class="label label-danger"><!--$count--></span>
</a>
<ul class="dropdown-menu">
<li>
<ul class="menu">

</ul>
</li>
<li class="footer">
<a href="#">View all</a>
</li>
</ul>
</li>
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="glyphicon glyphicon-user"></i>
<span>{{ojsuser.getUsername()}} <i class="caret"></i></span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header bg-light-blue">
{% if(ojsuser.getAvatar()) %}
<img src="/uploads/avatars/thumbnail/{{ojsuser.getAvatar()}}" class="img-circle" alt="User Image" />
{%else%}
<img src="/assets/images/buddy_sample.png" class="img-circle" alt="User Image" />
{%endif%}
<p>
<small>Last login : {{ojsuser.getLastogin()|date('Y-m-d H:i:s')}}</small>
</p>
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="{{path('manager_profile')}}" class="btn btn-default btn-flat">Profile</a>
</div>
<div class="pull-right">
<a href="{{ path('logout') }}" class="btn btn-default btn-flat">Sign out</a>
</div>
</li>
</ul>
</li>
{%endif%}
</ul>
</li>
<li class="footer">
<a href="#">View all</a>
</li>
</ul>
</li>
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="glyphicon glyphicon-user"></i>
<span>{{ojsuser.getUsername()}} <i class="caret"></i></span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header bg-light-blue">
{% if(ojsuser.getAvatar()) %}
<img src="/uploads/avatars/thumbnail/{{ojsuser.getAvatar()}}" class="img-circle" alt="User Image" />
{%else%}
<img src="/assets/images/buddy_sample.png" class="img-circle" alt="User Image" />
{%endif%}
<p>
<small>Last login : {{ojsuser.getLastogin()|date('Y-m-d H:i:s')}}</small>
</p>
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="{{path('manager_profile')}}" class="btn btn-default btn-flat">Profile</a>
</div>
<div class="pull-right">
<a href="{{ path('logout') }}" class="btn btn-default btn-flat">Sign out</a>
</div>
</li>
</ul>
</li>
{%endif%}
<ul class="nav navbar-nav navbar-right">
<li><a href="#search">Search</a>
<div id="search">
<button type="button" class="close">×</button>
<form>
<input type="search" value="" placeholder="type keyword(s) here" />
<button type="submit" class="btn btn-primary">Search</button>
</form>
</div>
</li>
</ul>
</ul>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

</header>
</header>
68 changes: 68 additions & 0 deletions web/assets/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,71 @@ ul.nav-wizard.nav-wizard-backnav li:hover,ul.nav-wizard.nav-wizard-backnav li:ho
.modal_standart{width:600px;display:none;background:#FFF;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;box-shadow:0 0 4px rgba(0,0,0,0.7);-webkit-box-shadow:0 0 4px rgba(0,0,0,0.7);-moz-box-shadow:0 0 4px rgba(0,0,0,0.7);padding:30px;}
.modal_close{cursor:pointer;position:absolute;top:12px;right:12px;display:block;width:14px;height:14px;z-index:2;}
.modal_close:after{content:"x";}

#search {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);

-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;

-webkit-transform: translate(0px, -100%) scale(0, 0);
-moz-transform: translate(0px, -100%) scale(0, 0);
-o-transform: translate(0px, -100%) scale(0, 0);
-ms-transform: translate(0px, -100%) scale(0, 0);
transform: translate(0px, -100%) scale(0, 0);

opacity: 0;
z-index: 9999;
}

#search.open {
-webkit-transform: translate(0px, 0px) scale(1, 1);
-moz-transform: translate(0px, 0px) scale(1, 1);
-o-transform: translate(0px, 0px) scale(1, 1);
-ms-transform: translate(0px, 0px) scale(1, 1);
transform: translate(0px, 0px) scale(1, 1);
opacity: 1;
}

#search input[type="search"] {
position: absolute;
top: 50%;
width: 100%;
color: rgb(255, 255, 255);
background: rgba(0, 0, 0, 0);
font-size: 60px;
font-weight: 300;
text-align: center;
border: 0px;
margin: 0px auto;
margin-top: -51px;
padding-left: 30px;
padding-right: 30px;
outline: none;
}
#search .btn {
position: absolute;
top: 50%;
left: 50%;
margin-top: 61px;
margin-left: -45px;
}
#search .close {
position: fixed;
top: 15px;
right: 15px;
color: #fff;
background-color: #428bca;
border-color: #357ebd;
opacity: 1;
padding: 10px 17px;
font-size: 27px;
}
12 changes: 12 additions & 0 deletions web/assets/js/common.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,18 @@ $(document).ready(function() {
$(".right-side").toggleClass("strech");
}
});

$('a[href="#search"]').on('click', function(event) {
event.preventDefault();
$('#search').addClass('open');
$('#search > form > input[type="search"]').focus();
});

$('#search, #search button.close').on('click keyup', function(event) {
if (event.target == this || event.target.className == 'close' || event.keyCode == 27) {
$(this).removeClass('open');
}
});
});


Expand Down

0 comments on commit ed86c01

Please sign in to comment.