From 31f2ecc09b63990e46cc0439671103a4324c4e47 Mon Sep 17 00:00:00 2001 From: Jonatan Nilsson Date: Wed, 10 May 2023 15:32:28 +0000 Subject: [PATCH] Heimaerbest: More development --- heimaerbest/app/header.js | 20 +- heimaerbest/app/site_frontpage.js | 240 +++++++++++------- heimaerbest/build-package.json | 8 + .../public/assets/img/orange_circle_plus.svg | 3 + heimaerbest/public/assets/img/remove.svg | 3 + heimaerbest/public/index.html | 66 +++++ 6 files changed, 250 insertions(+), 90 deletions(-) create mode 100644 heimaerbest/build-package.json create mode 100644 heimaerbest/public/assets/img/orange_circle_plus.svg create mode 100644 heimaerbest/public/assets/img/remove.svg diff --git a/heimaerbest/app/header.js b/heimaerbest/app/header.js index b718411..cb063fd 100644 --- a/heimaerbest/app/header.js +++ b/heimaerbest/app/header.js @@ -11,9 +11,8 @@ const Header = { onbeforeupdate: function() { let currentPath = m.route.get() - console.log(currentPath) - if (currentPath === '/') this.currentActive = 'home' + if (!currentPath || currentPath === '/' || currentPath.startsWith('/#')) this.currentActive = 'home' else if (currentPath === '/login') this.currentActive = 'login' }, @@ -22,6 +21,17 @@ const Header = { m.route.set('/') }, + scrollToView: function(e, name) { + if (this.currentActive === 'home') { + var el = document.getElementById(name) + if (el) { + el.scrollIntoView({ behavior: 'smooth' }) + e.preventDefault() + return false + } + } + }, + view: function() { return [ m(m.route.Link, @@ -34,7 +44,11 @@ const Header = { m('div.links', [ m(m.route.Link, { href: '/#Heim' }, 'Heim'), m(m.route.Link, { href: '/#GoodAdvice' }, 'Góð ráð'), - //m(m.route.Link, { class: 'button-active', href: '/#Subscribe' }, 'Subscribe'), + m(m.route.Link, { + class: 'button-active', + href: '/#subscribe', + onclick: (e) => { this.scrollToView(e, 'subscribe') }, + }, 'Subscribe'), ]), ] }, diff --git a/heimaerbest/app/site_frontpage.js b/heimaerbest/app/site_frontpage.js index 805e4f4..c36afe2 100644 --- a/heimaerbest/app/site_frontpage.js +++ b/heimaerbest/app/site_frontpage.js @@ -3,6 +3,70 @@ const m = require('mithril') const Frontpage = { oninit: function(vnode) { this.error = '' + this.showAddLocation = false + this.form = { + city: '', + zip: '', + street_name: '', + locations: [ + 'Hverfisgata, 101 - Reykjavík', + ], + type: [ true, false, false, false, false ], + size: [ true, false, false, false, false ], + rooms: [ true, false, false, false, false ], + } + this.values = { + type: [ 'Alveg sama', 'Einbýli', 'Fjölbýli', 'Rað/Parhús', 'Hæð/Íbuð' ], + size: [ 'Alveg sama', '0 - 50fm', '50 - 80fm', '80 - 120fm', '120fm +'], + rooms: [ 'Alveg sama', 'Stúdíó', '2 - 3 herb.', '3 - 4 herb.', '5 + herb.' ], + } + }, + + onFormUpdate: function(vnode, key, index, event) { + if (['city', 'zip', 'street_name'].includes(key)) { + this.form[key] = event.target.value + } else if (key === 'type' || key === 'size' || key === 'rooms') { + if (index > 0) { + this.form[key][0] = false + this.form[key][index] = true + } else { + for (let i = 1; i < this.form[key].length; i++) { + this.form[key][i] = false + } + this.form[key][0] = true + } + } + console.log(key, event.target.value) + }, + + onLocationAdd: function(vnode, event) { + if (!this.form.city) return false + this.showAddLocation = false + let entry = this.form.city + if (this.form.zip) { + entry = this.form.zip + ' - ' + this.form.city + } + if (this.form.street_name) { + if (entry !== this.form.city) { + entry = ', ' + entry + } else { + entry = ' - ' + entry + } + entry = this.form.street_name + entry + } + this.form.city = '' + this.form.zip = '' + this.form.street_name = '' + this.form.locations.push(entry) + return false + }, + + removeLocationIndex: function(index) { + this.form.locations.splice(index, 1) + if (!this.form.locations.length) { + this.showAddLocation = true + } + return false }, view: function(vnode) { @@ -16,53 +80,82 @@ const Frontpage = { m('div.filler'), m('div.house1'), ]), - m('div.form', [ + m('div.form#subscribe', [ m('h5', 'What are you looking for?'), - m('form.form-group', [ - m('div.form-item', [ - m('label', 'City*'), - m('input', { type: 'text', placeholder: 'Reykjavík' }), - ]), - m('div.form-item', [ - m('label', 'Postal code (optional)'), - m('input', { type: 'text', placeholder: '000' }), - ]), - m('div.form-item.form-fill', [ - m('label', 'Street name (optional)'), - m('input', { type: 'text', placeholder: 'Enter your dream street adress' }), - ]), - m('div.form-item.form-small.form-no-label', [ - m('input.button-flat.disabled', { type: 'submit', value: 'Add location' }), + m('form.form-list-vertical', { hidden: !this.form.locations.length }, [ + m('div.form-item.no-margin', [ + m('label', 'Location'), ]), + this.form.locations.map((location, i) => { + return m('div.form-item', [ + m('div.fake-input', [ + m('p', location), + m('button.remove-item', { onclick: (e) => this.removeLocationIndex(i) }) + ]) + ]) + }), ]), - m('button', { hidden: true }, [ - m('i.ic-plus'), - m('span', 'Add more locations') + m('form.form-group', { + hidden: !this.showAddLocation, + onsubmit: (e) => this.onLocationAdd(e), + }, [ + m('div.form-item', [ + m('label', 'City*'), + m('input', { + type: 'text', + placeholder: 'Reykjavík', + oninput: (e) => this.onFormUpdate(vnode, 'city', null, e), + }), + ]), + m('div.form-item', [ + m('label', 'Postal code (optional)'), + m('input', { + type: 'text', + placeholder: '000', + oninput: (e) => this.onFormUpdate(vnode, 'zip', null, e), + }), + ]), + m('div.form-item.form-fill', [ + m('label', 'Street name (optional)'), + m('input', { + type: 'text', + placeholder: 'Enter your dream street adress', + oninput: (e) => this.onFormUpdate(vnode, 'street_name', null, e), + }), + ]), + m('div.form-item.form-small.form-no-label', [ + m('input', { + class: this.form.city ? 'button-active' : 'button-outline', + type: 'submit', + value: 'Add location', + }), + ]), + ] + ), + m('div.form-group', { hidden: this.showAddLocation }, [ + m('div.form-item', [ + m('button.button-flat', { + onclick: () => { this.showAddLocation = !this.showAddLocation } + }, [ + m('i.ic-plus'), + m('span', 'Add more locations') + ]), + ]), ]), m('div.form-group', [ m('div.form-item', [ m('label', 'Tegund'), m('div.form-list', [ - m('label.checkbox', [ - m('input', { type: 'checkbox' }), - m('div.button-checkbox', 'Alveg sama'), - ]), - m('label.checkbox', [ - m('input', { type: 'checkbox' }), - m('div.button-checkbox', 'Einbýli'), - ]), - m('label.checkbox', [ - m('input', { type: 'checkbox' }), - m('div.button-checkbox', 'Fjölbýli'), - ]), - m('label.checkbox', [ - m('input', { type: 'checkbox' }), - m('div.button-checkbox', 'Rað/Parhús'), - ]), - m('label.checkbox', [ - m('input', { type: 'checkbox' }), - m('div.button-checkbox', 'Hæð/Íbuð'), - ]), + this.values.type.map((type, i) => { + return m('label.checkbox', [ + m('input', { + type: 'checkbox', + checked: this.form.type[i], + oninput: (e) => this.onFormUpdate(vnode, 'type', i, e), + }), + m('div.button-checkbox', type), + ]) + }), ]), ]), ]), @@ -70,30 +163,16 @@ const Frontpage = { m('div.form-item', [ m('label', 'Size'), m('div.form-list', [ - m('label.checkbox', [ - m('input', { type: 'checkbox', checked: true, }), - m('div.button-checkbox', 'Alveg sama'), - ]), - m('label.checkbox', [ - m('input', { type: 'checkbox' }), - m('div.button-checkbox', '0 - 50fm'), - ]), - m('label.checkbox', [ - m('input', { type: 'checkbox' }), - m('div.button-checkbox', '50 - 80fm'), - ]), - m('label.checkbox', [ - m('input', { type: 'checkbox' }), - m('div.button-checkbox', '80 - 120fm'), - ]), - m('label.checkbox', [ - m('input', { type: 'checkbox' }), - m('div.button-checkbox', '120fm +'), - ]), - /*m('label.checkbox', [ - m('input', { type: 'checkbox' }), - m('div.button-checkbox', 'velja svið'), - ]),*/ + this.values.size.map((size, i) => { + return m('label.checkbox', [ + m('input', { + type: 'checkbox', + checked: this.form.size[i], + oninput: (e) => this.onFormUpdate(vnode, 'size', i, e), + }), + m('div.button-checkbox', size), + ]) + }), ]), ]), ]), @@ -101,34 +180,21 @@ const Frontpage = { m('div.form-item', [ m('label', 'Rooms'), m('div.form-list', [ - m('label.checkbox', [ - m('input', { type: 'checkbox', checked: true, }), - m('div.button-checkbox', 'Alveg sama'), - ]), - m('label.checkbox', [ - m('input', { type: 'checkbox' }), - m('div.button-checkbox', 'Stúdíó'), - ]), - m('label.checkbox', [ - m('input', { type: 'checkbox' }), - m('div.button-checkbox', '2 - 3 herb.'), - ]), - m('label.checkbox', [ - m('input', { type: 'checkbox' }), - m('div.button-checkbox', '3 - 4 herb.'), - ]), - m('label.checkbox', [ - m('input', { type: 'checkbox' }), - m('div.button-checkbox', '5 + herb.'), - ]), - /*m('label.checkbox', [ - m('input', { type: 'checkbox' }), - m('div.button-checkbox', 'velja svið'), - ]),*/ + this.values.rooms.map((rooms, i) => { + return m('label.checkbox', [ + m('input', { + type: 'checkbox', + checked: this.form.rooms[i], + oninput: (e) => this.onFormUpdate(vnode, 'rooms', i, e), + }), + m('div.button-checkbox', rooms), + ]) + }), ]), ]), ]), + m('div.form-group', [ m('div.form-small.form-no-label', [ m('button.button-inactive', { disabled: true }, 'Continue') diff --git a/heimaerbest/build-package.json b/heimaerbest/build-package.json new file mode 100644 index 0000000..f03ccc7 --- /dev/null +++ b/heimaerbest/build-package.json @@ -0,0 +1,8 @@ +{ + "scripts": { + "build": "echo done;" + }, + "dependencies": { + "service-core": "^3.0.0-beta.17" + } +} diff --git a/heimaerbest/public/assets/img/orange_circle_plus.svg b/heimaerbest/public/assets/img/orange_circle_plus.svg new file mode 100644 index 0000000..e0dbbab --- /dev/null +++ b/heimaerbest/public/assets/img/orange_circle_plus.svg @@ -0,0 +1,3 @@ + + + diff --git a/heimaerbest/public/assets/img/remove.svg b/heimaerbest/public/assets/img/remove.svg new file mode 100644 index 0000000..dca58d6 --- /dev/null +++ b/heimaerbest/public/assets/img/remove.svg @@ -0,0 +1,3 @@ + + + diff --git a/heimaerbest/public/index.html b/heimaerbest/public/index.html index 1d2be26..c08d28e 100644 --- a/heimaerbest/public/index.html +++ b/heimaerbest/public/index.html @@ -58,6 +58,8 @@ body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } +[hidden] { display: none !important; } + body { min-height: 100vh; text-rendering: optimizeSpeed; @@ -142,7 +144,9 @@ header, main, footer { max-width: var(--content-max-width); } + .button-flat, +.button-outline, .button-inactive, .button-active, .button-white { @@ -150,9 +154,18 @@ header, main, footer { padding: 0.9rem 2rem; display: inline-block; align-self: flex-start; + border: none; } .button-flat { + display: inline-flex; + align-items: center; + color: #909090; + background: transparent; + padding: 0.9rem 0; +} + +.button-outline { background: transparent; border: var(--form-border); color: var(--main-fg-light); @@ -173,6 +186,14 @@ header, main, footer { color: var(--section-blue-bg); } +.button-flat i, +.button-outline i, +.button-inactive i, +.button-active i, +.button-white i { + margin-right: 0.5rem; +} + /* ---------------- header ---------------- */ header { @@ -253,6 +274,13 @@ section.title .form { z-index: 2; } +section.title .remove-item { + height: 2.5rem; + width: 2.5rem; + background: url('/assets/img/remove.svg') center no-repeat; + background-size: 1.5rem auto; +} + section.title .form h5 { color: var(--main-accent); margin: 2rem 0; @@ -446,6 +474,10 @@ footer button { margin-right: 1rem; } +.form-item.no-margin { + margin: 0; +} + .form-fill { flex: 2 1 60%; } @@ -468,6 +500,11 @@ footer button { display: flex; } +.form-list-vertical { + display: flex; + flex-direction: column; +} + label.checkbox { display: block; position: relative; @@ -505,6 +542,35 @@ label.checkbox input[type=checkbox]:checked ~ .button-checkbox { width: 100%; } +.form-item .fake-input { + border-radius: var(--form-radius); + border: none; + padding: 0.5rem 0.5rem; + width: 100%; + background: rgba(237, 101, 3, 0.1); + display: flex; +} + +.form-item .fake-input p { + padding: 0.5rem; + line-height: 1.5rem; + font-size: 0.8rem; + flex: 2 1 auto; +} + +/* ---------------- icons ---------------- */ + +i { + display: inline-block; +} + +i.ic-plus { + width: 1.5rem; + height: 1.5rem; + background: url('/assets/img/orange_circle_plus.svg') center no-repeat; + background-size: contain; +} +