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 b25dbca4f6
commit 7702e63aca
3 changed files with 30 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
site/_includes/header.html
View File

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

2
site/_layouts/main.html
View File

@ -20,7 +20,7 @@
resultsContainer: results, resultsContainer: results,
json: '/search.json', json: '/search.json',
searchResultTemplate: 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) { success: function(sr) {
results.setAttribute("class", sr.length <= 1 ? "" : "show"); results.setAttribute("class", sr.length <= 1 ? "" : "show");
} }

30
site/_sass/_header.scss
View File

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