maggicl/theshell.ch
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

css-team: properly format search bar results

Browse source 
git-svn-id: svn+ssh://atelier.inf.usi.ch/home/bevilj/group-1@101 a672b425-5310-4d7a-af5c-997e18724b81
This commit is contained in:
terehm 2018-11-11 13:22:26 +00:00
parent eedf029e48
commit a1886d8752
3 changed files with 30 additions and 16 deletions
site
_includes
header.html
_layouts
main.html
_sass
_header.scss

14
site/_includes/header.html
View file

@ -1,11 +1,11 @@
<div class="menuDesktop">
<div class="logo">
<a href="/index.html"><img src="/assets/style/logo_white.png" height="50"></a>
</div>
<div class="fill-space"></div>
<div class="search-box"><input type="text" id="search-bar"><label for="search-bar"><img src="/assets/style/search_icon.png"></label>
<ul id="search-results">
</ul>
<div class="logo">
<a href="/index.html"><img src="/assets/style/logo_white.png" height="50"></a>
</div>
<div class="fill-space"></div>
<div class="search-box">
<input type="text" id="search-bar"><label for="search-bar"><img src="/assets/style/search_icon.png"></label>
<ul id="search-results"></ul>
</div>
<nav class="nav-menu">
<div>Learn

2
site/_layouts/main.html
View file

@ -20,7 +20,7 @@
resultsContainer: results,
json: '/search.json',
searchResultTemplate:
'<a href="{url}"><h3>{title}</h3><h4>{category}</h4></a>',
'<li><a href="{url}"><h3>{title}</h3><h4>{category}</h4></a></li>',
success: function(sr) {
results.setAttribute("class", sr.length <= 1 ? "" : "show");
}

30
site/_sass/_header.scss
View file

@ -37,11 +37,13 @@ header{
li:hover {
color: #66aa66;
}
a{
text-decoration: none;
color: inherit;
}
}
.search-box ul.show {
display: block;
}
.nav-menu {
@ -58,10 +60,10 @@ header{
font-size: 20px;
padding: 0 5px;
a{
text-decoration: none;
color: inherit;
}
//a{
// text-decoration: none;
// color: inherit;
//}
ul:hover {
display: block;
@ -99,6 +101,14 @@ header{
color: #FFFFFF;
}
ul {
display: none;
li{
margin-top: 15px;
margin-bottom: 15px;
}
}
img{
vertical-align: middle;
cursor: pointer;
@ -106,9 +116,13 @@ header{
}
}
.search-box:focus-within {
.search-box:focus-within, .search-box:active {
input {
margin-left: 0;
opacity: 1;
}
ul{
display: block;
}
}