nfp
/
nfp_sites
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases 51 Wiki Activity

Heimaerbest: More development
continuous-integration/appveyor/branch AppVeyor build succeeded Details

master heimaerbest_v1.0.0
Jonatan Nilsson 2023-05-10 15:32:28 +00:00
parent aa324cf0f1
commit 31f2ecc09b
6 changed files with 250 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
heimaerbest/app/header.js
View File

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

240
heimaerbest/app/site_frontpage.js
View File

@ -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')

8
heimaerbest/build-package.json Normal file
View File

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

3
heimaerbest/public/assets/img/orange_circle_plus.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 783 B

3
heimaerbest/public/assets/img/remove.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 905 B

66
heimaerbest/public/index.html
View File

@ -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>