Skip to content

Mynij
Mynij
Commit 13fb10cf authored by Alexandra Rogova's avatar Alexandra Rogova
Browse files
Options

navigation bar + options popup (no content)

parent 342dcb09
Hide whitespace changes
Inline Side-by-side
Showing with 226 additions and 38 deletions
gadget_parser.html
View file @ 13fb10cf
......@@ -9,4 +9,4 @@
</head>
<body>
</body>
</html>
\ No newline at end of file
</html>
\ No newline at end of file
gadget_result.js
View file @ 13fb10cf
......@@ -54,6 +54,7 @@
.declareMethod("clear", function(){
var list = document.getElementById("list");
console.log(list);
while (list.firstChild) {
list.removeChild(list.firstChild);
}
......
mynij.css
View file @ 13fb10cf
body {
padding: 0;
margin: 0;
height: 100vh;
width: 100%;
background: #fff;
padding: 0;
margin: 0;
height: 100vh;
width: 100%;
background: #fff;
}
form{
position: relative;
top: 3%;
left: 10%;
width: 86%;
max-width: 50em;
height: 5%;
border: 2px solid #cecece;
background: white;
box-sizing: border-box;
border-radius: 25px;
transition:all 200ms ease-out;
position: relative;
top: 3%;
left: 10%;
width: 86%;
max-width: 50em;
height: 5%;
border: 1px solid #cecece;
background: white;
box-sizing: border-box;
border-radius: 25px;
transition:all 200ms ease-out;
}
form:hover{
cursor: pointer;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
transition:all 200ms ease-out;
cursor: pointer;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
transition:all 200ms ease-out;
}
form:hover input{
display: block;
display: block;
}
input{
position: absolute;
top: 0;
left: 0;
width: 100%;;
height: 100%;
line-height: 5%;
outline: 0;
border: 0;
font-size: 1em;
border-radius: 20px;
padding: 0 20px;
position: absolute;
top: 0;
left: 0;
width: 100%;;
height: 100%;
line-height: 5%;
outline: 0;
border: 0;
font-size: 1em;
border-radius: 20px;
padding: 0 20px;
}
::-webkit-scrollbar {
display: none;
}
#navbar {
margin-top : 3%;
margin-left : 10.3%;
font-size: 1em;
max-width: 49em;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
#navbar > ul {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
margin-left:15%;
}
#navbar > ul > li {
display: inline-block;
}
#navbar > ul > li > a {
display: inline-block;
color : #777;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#navbar > ul > li > a:hover {
color : black;
}
.active{
color: #1A73E8 !important;
border-bottom: 3px solid #1A73E8;
font-weight: bold;
}
#options{
float: left;
position: absolute;
margin-left:-6%;
background:#fff;
padding-bottom:0.2%;
}
#mynij{
position: absolute;
left: 1%;
top: 3%;
font-size: 3em;
position: fixed;
left: 1.5%;
top: 3.5%;
font-size: 250%;
font-family: "Roboto", Geneva, "Lucida Console", sans-serif;
font-weight: 500;
color: #485a67;
......
result.css 0 → 100644
View file @ 13fb10cf
#list{
margin-top : 4%;
text-align: left;
}
#list > li {
margin: auto;
list-style-type: none;
position: relative;
display: table;
margin-left: 8.3%;
margin-top: 1%;
padding-top: 1%;
padding-bottom: 1%;
padding-left : 1%;
background: #fff;
color: #2b2b5d;
width: 98%;
max-width: 48em;
text-align : left;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border-radius: 8px;
}
.title {
color: #1122CC;
text-decoration: none;
font-size: x-large;
max-width: 48em;
}
.link, .link:visited {
text-decoration: none;
color: #009933;
max-width: 48em;
}
.body {
color : #444444;
max-width: 48em;
}
#list > a {
position: relative;
}
#list > a:after {
content: '';
position: absolute;
bottom: -.4em;
left: 50%;
right: 50%;
height: 1px;
background: #2b2b5d;
transition: all ease .2s;
}
#list > a:hover:after {
left: 0;
right: 0;
height: 2px;
}
#list > a:before {
position: absolute;
transform: translateX(-100%);
left: -10px;
color: #2b2b5d;
opacity: .3;
font-weight: 100;
font-size: .8em;
}
\ No newline at end of file
search.html
View file @ 13fb10cf
......@@ -17,6 +17,25 @@
<form id = "search_bar">
<input type="search" required>
</form>
<nav id="navbar">
<ul>
<li id="options"><a>Mes index</a></li>
<li><a class="active">Scolaire</a></li>
<li><a>Index 1</a></li>
<li><a>Index 2</a></li>
<li><a>Index 3</a></li>
<li><a>Index 4</a></li>
<li><a>Index 5</a></li>
<li><a>Index 6</a></li>
<li><a>Index 7</a></li>
<li><a>Index 8</a></li>
<li><a>Index 9</a></li>
<li><a>Index 10</a></li>
</ul>
</nav>
<dialog id="myDialog">
This is an open dialog window
</dialog>
<div data-gadget-url="gadget_result.html"
data-gadget-scope="result"
data-gadget-sandbox="public">
......
search.js
View file @ 13fb10cf
(function (window, document, rJS, RSVP) {
var gadget;
var preventDefault = function (e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
};
rJS(window)
.setState({
......@@ -24,10 +30,11 @@
.ready(function(){
var model_gadget,
result_gadget;
result_gadget,
gadget;
console.log("ready !");
var gadget = this;
gadget = this;
return gadget.getDeclaredGadget("model")
.push(function(model){
model_gadget = model;
......@@ -47,6 +54,17 @@
parser_gadget : result,
result_gadget : result_gadget
});
})
.push(function(){
return gadget.set_on_click_options();
})
.push(function(){
document.addEventListener("keydown", function(event){
if (event.key === "Escape" && document.getElementById("myDialog").open){
document.getElementById("myDialog").close();
return gadget.enableScroll();
}
}, true);
});
})
......@@ -89,5 +107,31 @@
.onEvent("submit", function(event){
this.search(event.target.elements[0].value);
})
.declareMethod("set_on_click_options", function(){
var options = document.getElementById("options"),
gadget = this;
options.onclick = function(){
document.getElementById("myDialog").showModal();
return gadget.disableScroll();
};
})
.declareMethod("disableScroll", function(){
if (window.addEventListener) window.addEventListener('DOMMouseScroll', preventDefault, false);
document.addEventListener('wheel', preventDefault, {passive: false}); // Disable scrolling in Chrome
window.onwheel = preventDefault; // modern standard
window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
window.ontouchmove = preventDefault; // mobile
})
.declareMethod("enableScroll", function(){
if (window.removeEventListener) window.removeEventListener('DOMMouseScroll', preventDefault, false);
document.removeEventListener('wheel', preventDefault, {passive: false}); // Enable scrolling in Chrome
window.onmousewheel = document.onmousewheel = null;
window.onwheel = null;
window.ontouchmove = null;
});
}(window, document, rJS, RSVP));
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7