Skip to content

F
face
Commit 1aeba203 by vincent
Options

sidenav for examples

parent 91898cde
Showing with 52 additions and 15 deletions
examples/public/commons.js
......@@ -93,17 +93,42 @@ function renderNavBar(navbarId, exampleUri) {
]
const navbar = $(navbarId).get(0)
navbar.classList.add('row')
const pageContainer = $('.page-container').get(0)
const header = document.createElement('h3')
header.innerHTML = examples.find(ex => ex.uri === exampleUri).name
pageContainer.insertBefore(header, pageContainer.children[0])
const menuContent = document.createElement('ul')
menuContent.id = 'slide-out'
menuContent.classList.add('side-nav', 'fixed')
navbar.appendChild(menuContent)
const menuButton = document.createElement('a')
menuButton.href='#'
menuButton.classList.add('button-collapse', 'show-on-large')
menuButton.setAttribute('data-activates', 'slide-out')
const menuButtonIcon = document.createElement('img')
menuButtonIcon.src = 'menu_icon.png'
menuButton.appendChild(menuButtonIcon)
navbar.appendChild(menuButton)
examples
.filter(ex => ex.uri !== exampleUri)
.forEach(ex => {
const li = document.createElement('li')
const a = document.createElement('a')
navbar.appendChild(a)
li.appendChild(a)
menuContent.appendChild(li)
a.classList.add('waves-effect', 'waves-light', 'btn', 'margin-sm')
a.classList.add('waves-effect', 'waves-light')
a.href = ex.uri
a.innerHTML = ex.name
})
$('.button-collapse').sideNav({
menuWidth: 250
})
}
function renderSelectList(selectListId, onChange, initialValue, renderChildren) {
......
examples/public/styles.css
......@@ -3,6 +3,21 @@
right: 0;
margin: auto;
margin-top: 20px;
padding-left: 300px;
display: inline-flex !important;
}
@media only screen and (max-width : 992px) {
.page-container {
padding-left: 0;
display: flex !important;
}
}
#navbar {
position: absolute;
top: 20px;
left: 20px;
}
.center-content {
......
examples/views/detectAndDrawFaces.html
......@@ -9,8 +9,8 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>
<div class="center-content page-container">
<div id="navbar"></div>
<div class="center-content page-container">
<div class="progress" id="loader">
<div class="indeterminate"></div>
</div>
......
examples/views/detectAndDrawLandmarks.html
......@@ -9,8 +9,8 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>
<div class="center-content page-container">
<div id="navbar"></div>
<div class="center-content page-container">
<div class="progress" id="loader">
<div class="indeterminate"></div>
</div>
......
examples/views/detectAndRecognizeFaces.html
......@@ -9,8 +9,8 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>
<div class="center-content page-container">
<div id="navbar"></div>
<div class="center-content page-container">
<div class="progress" id="loader">
<div class="indeterminate"></div>
</div>
......
examples/views/faceAlignment.html
......@@ -9,8 +9,8 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>
<div class="center-content page-container">
<div id="navbar"></div>
<div class="center-content page-container">
<div class="progress" id="loader">
<div class="indeterminate"></div>
</div>
......
examples/views/faceDetection.html
......@@ -9,8 +9,8 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>
<div class="center-content page-container">
<div id="navbar"></div>
<div class="center-content page-container">
<div class="progress" id="loader">
<div class="indeterminate"></div>
</div>
......
examples/views/faceDetectionVideo.html
......@@ -9,8 +9,8 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>
<div class="center-content page-container">
<div id="navbar"></div>
<div class="center-content page-container">
<div class="progress" id="loader">
<div class="indeterminate"></div>
</div>
......
examples/views/faceLandmarks.html
......@@ -9,9 +9,8 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>
<div class="center-content page-container">
<div id="navbar"></div>
<div class="center-content page-container">
<div>
<div class="progress" id="loader">
<div class="indeterminate"></div>
......
examples/views/faceRecognition.html
......@@ -9,9 +9,8 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>
<div class="center-content page-container">
<div id="navbar"></div>
<div class="center-content page-container">
<div>
<div class="row center-content" id="loader">
<input disabled value="" id="status" type="text" class="bold">
......
examples/views/faceSimilarity.html
......@@ -9,9 +9,8 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>
<div class="center-content page-container">
<div id="navbar"></div>
<div class="center-content page-container">
<div>
<div class="progress" id="loader">
<div class="indeterminate"></div>
......
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