diff options
| -rw-r--r-- | public/stylesheets/style_new.css | 205 | ||||
| -rw-r--r-- | routes/index.js | 6 | ||||
| -rw-r--r-- | views/index.jade | 18 |
3 files changed, 223 insertions, 6 deletions
diff --git a/public/stylesheets/style_new.css b/public/stylesheets/style_new.css new file mode 100644 index 0000000..f6c6b25 --- /dev/null +++ b/public/stylesheets/style_new.css @@ -0,0 +1,205 @@ +* { + box-sizing: border-box; +} + +html, body { + margin: 0; + font-family: 'Roboto', sans-serif; + display: flex; + -js-display: flex; + flex-direction: column; + width: 100vw; + height: 100vh; +} + +.other { + color: gray; + font-style: italic; + margin-left: 5px; +} + +#search { + z-index: 2; + background-color: #F44336; + margin: 0 auto; + width: 100%; + position: absolute; + /*box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);*/ + /*box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);*/ + box-shadow: 0 0.5px 1.5px rgba(0,0,0,0.06), 0 0.5px 1px rgba(0,0,0,0.12); +} + +#search .top-bar { + position: relative; + margin: 0 auto; + max-width: 600px; + padding: 10px; + display: flex; +} + +#search .input-wrapper { + position: relative; + flex-grow: 1; + color: #FFFFFF; +} + +#search input[type='text'] { + display: block; + background-color: #f6695e; + color: inherit; + border-radius: 2px; + width: 100%; + display: block; + outline: none; + border: 0; + padding: 16px; + font-size: 1.1em; + transition: box-shadow 200ms ease-in-out; +} + +#search input[type='text']:focus { + background-color: #FFFFFF; + color: #212121; + box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); +} + +#search input[type='text']:focus + button { + color: #212121; +} + +/* WebKit, Blink, Edge */ +input::-webkit-input-placeholder { + color: #FFCDD2; +} +input:focus::-webkit-input-placeholder { + color: #757575; +} + +/* Mozilla Firefox 4 to 18 */ +input:-moz-placeholder { + color: #FFCDD2; + opacity: 1; +} +input:focus:-moz-placeholder { + color: #757575; +} + +/* Mozilla Firefox 19+ */ +input::-moz-placeholder { + color: #FFCDD2; + opacity: 1; +} +input:focus::-moz-placeholder { + color: #757575; +} + +/* Internet Explorer 10-11 */ +input:-ms-input-placeholder { + color: #FFCDD2; +} +input:focus:-ms-input-placeholder { + color: #757575; +} + +li:hover { + background-color: lightgray; + cursor: pointer; +} + +.selected { + background-color: lightgray; +} + +#schedule { + flex-grow: 1; + width: 100vw; + border: 0; + padding: 0; +} + +#search-space-filler { + height: 73px; +} + +.autocomplete-wrapper { + background-color: white; +} + +.autocomplete { + max-width: 600px; + margin: 0 auto; + padding: 0; +} + +.autocomplete li { + list-style: none; + padding: 10px; +} + +#week-selector { + z-index: 1; + background-color: #F44336; + box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); + color: white; +} + +#week-selector .week-wrapper { + max-width: 600px; + padding: 10px !important; + margin: 0 auto; + display: flex; + -js-display: flex; + padding: 10px 0; +} + +#week-selector .current { + flex-grow: 1; + text-align: center; + padding: 5px; +} + +#week-selector input[type='button'] { + background: inherit; + color: white; + border: 0px; + padding: 5px 10px; + border-radius: 2px; +} + +input { + -webkit-appearance: none; +} + +#search .fav { + position: absolute; + font-size: 1.8em; + color: inherit; + right: 8.5px; + top: 8.5px; + border: 0; + padding: 4px; + border-radius: 2px; + background: none; +} + +#week-selector input[type='button']:focus, #search #overflow-button:focus, #search .fav:focus { + outline: none; + background-color: #D32F2F; +} + +#search #overflow-button { + background: none; + border: none; + padding: 3px 9px; + color: white; + border-radius: 2px; +} + +.hidden { + display: none !important; +} + +ul a { + color: inherit; + text-decoration: none; +} diff --git a/routes/index.js b/routes/index.js index f30abb5..07192b7 100644 --- a/routes/index.js +++ b/routes/index.js @@ -4,7 +4,11 @@ const users = require('../lib/getUserIndex') /* GET home page. */ router.get('/', function (req, res, next) { - res.render('index', { users: users.users }) + if (req.query.v === 'n') { + res.render('index', { version: 'new', users: users.users }) + } else { + res.render('index', { version: 'old', users: users.users }) + } }) module.exports = router diff --git a/views/index.jade b/views/index.jade index 8f575e5..31e9186 100644 --- a/views/index.jade +++ b/views/index.jade @@ -1,7 +1,10 @@ extends layout block head - link(rel='stylesheet', href='/stylesheets/style.css') + if version == 'new' + link(rel='stylesheet', href='/stylesheets/style_new.css') + else + link(rel='stylesheet', href='/stylesheets/style.css') link(rel='stylesheet', href='/stylesheets/print.css', media='print') link(rel='stylesheet', href='https://fonts.googleapis.com/icon?family=Material+Icons') link(rel='stylesheet', href='https://code.getmdl.io/1.2.1/material.indigo-pink.min.css') @@ -20,7 +23,7 @@ block content form#search .top-bar .input-wrapper - input(type='text', placeholder='Search') + input(type='text', placeholder='Zoeken') button.material-icons.fav(tabindex='0', type='button')  button#overflow-button(type='button') i.material-icons  @@ -36,9 +39,14 @@ block content #week-selector #search-space-filler .week-wrapper - input(type='button', value='Vorige') - span.current Loading... - input(type='button', value='Volgende') + if version == 'new' + input(type='button', value='arrow_back').material-icons + span.current Loading... + input(type='button', value='arrow_forward').material-icons + else + input(type='button', value='Vorige') + span.current Loading... + input(type='button', value='Volgende') iframe(src='/hello', scrolling='no')#schedule |