Heimaerbest: More development

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'),
       ]),
     ]
   },

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('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('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' }),
+                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' }),
+                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' }),
+                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.button-flat.disabled', { type: 'submit', value: 'Add location' }),
+                m('input', {
+                  class: this.form.city ? 'button-active' : 'button-outline',
+                  type: 'submit',
+                  value: 'Add location',
+                }),
               ]),
-          ]),
-          m('button', { hidden: true }, [
+            ]
+          ),
+          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')

heimaerbest/build-package.json

@@ -0,0 +1,8 @@
+{
+  "scripts": {
+    "build": "echo done;"
+  },
+  "dependencies": {
+    "service-core": "^3.0.0-beta.17"
+  }
+}

heimaerbest/public/assets/img/orange_circle_plus.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 12.9412C24 19.5686 18.6274 24.9412 12 24.9412C5.37259 24.9412 0 19.5686 0 12.9412C0 6.31375 5.37259 0.941162 12 0.941162C18.6274 0.941162 24 6.31375 24 12.9412ZM12 6.51259C12.7101 6.51259 13.2857 7.08823 13.2857 7.79831V11.6554H17.1429C17.8529 11.6554 18.4286 12.2311 18.4286 12.9412C18.4286 13.6512 17.8529 14.2269 17.1429 14.2269H13.2857V18.084C13.2857 18.7941 12.7101 19.3697 12 19.3697C11.2899 19.3697 10.7143 18.7941 10.7143 18.084V14.2269H6.85714C6.14707 14.2269 5.57143 13.6512 5.57143 12.9412C5.57143 12.2311 6.14707 11.6554 6.85714 11.6554H10.7143V7.79831C10.7143 7.08823 11.2899 6.51259 12 6.51259Z" fill="#EF6C10"/>
+</svg>

heimaerbest/public/assets/img/remove.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.5146 21.4558C15.8283 26.1421 8.23031 26.1421 3.54402 21.4558C-1.14227 16.7696 -1.14228 9.17158 3.54402 4.48528C8.2303 -0.201006 15.8283 -0.201006 20.5146 4.48528C25.2009 9.17158 25.2009 16.7696 20.5146 21.4558ZM16.575 8.42488C17.0771 8.92697 17.0771 9.74105 16.575 10.2432L13.8476 12.9706L16.575 15.698C17.0771 16.2001 17.0771 17.0142 16.575 17.5162C16.0729 18.0183 15.2588 18.0183 14.7567 17.5162L12.0293 14.7888L9.30189 17.5162C8.7998 18.0183 7.98571 18.0183 7.48361 17.5162C6.98151 17.0142 6.98153 16.2001 7.48361 15.698L10.211 12.9706L7.48361 10.2432C6.98151 9.74105 6.98151 8.92697 7.48361 8.42488C7.98571 7.92278 8.79979 7.92278 9.30189 8.42488L12.0293 11.1523L14.7567 8.42488C15.2588 7.92278 16.0729 7.92278 16.575 8.42488Z" fill="#EF6C10"/>
+</svg>

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;
+}
+
   </style>
   <link id="headstyle" rel="Stylesheet" href="/assets/app.css?v=2" type="text/css" media="none" />
 </head>