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;
+}
+