-
Notifications
You must be signed in to change notification settings - Fork 22
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: #781 Book a viewing #931
Changes from 6 commits
64677aa
2fb4996
007f6c5
7a9d7c4
8c3e41d
e5faf81
414f91a
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,6 +2,7 @@ | |
import ClickOutSide from './click-out-side.svelte' | ||
export let isModalOpen | ||
export let toggleModal | ||
export let title = 'Modal Title' | ||
</script> | ||
|
||
<style> | ||
|
@@ -17,12 +18,78 @@ | |
background: #00000052; | ||
z-index: 1; | ||
} | ||
@media only screen and (min-width: 48em) { | ||
.reapit-modal-wrapper .reapit-modal { | ||
top: 50% !important; | ||
left: 50% !important; | ||
width: auto !important; | ||
height: auto !important; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. pls avoid to use !important because it's very hard to debug There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm updated |
||
transform: translate(-50%, -50%); | ||
border-radius: 4px; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. pls use rem instead of em. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm updated |
||
overflow: hidden; | ||
max-width: 80%; | ||
} | ||
} | ||
|
||
.reapit-modal-wrapper .reapit-modal { | ||
position: absolute; | ||
top: 0; | ||
left: 0; | ||
width: 100%; | ||
height: 100%; | ||
min-width: 50%; | ||
font-size: 16px; | ||
background: #ffffff; | ||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); | ||
overflow: hidden; | ||
} | ||
|
||
.reapit-modal-wrapper .modal-title { | ||
font-weight: 600; | ||
border-bottom: 1px solid #ddd; | ||
margin: 0; | ||
text-align: center; | ||
font-size: 1em; | ||
padding: 1em 50px; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. pls use em instead of px There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm updated |
||
overflow: hidden; | ||
text-overflow: ellipsis; | ||
white-space: nowrap; | ||
} | ||
|
||
.reapit-modal-wrapper .modal-close { | ||
position: absolute; | ||
top: 0; | ||
left: 0; | ||
padding: 1em 1.2em; | ||
cursor: pointer; | ||
} | ||
.reapit-modal-wrapper .modal-close:hover { | ||
background: #ddd; | ||
} | ||
|
||
.reapit-modal-wrapper .modal-close-btn { | ||
transform: rotate(135deg); | ||
-webkit-transform: rotate(135deg); | ||
border: solid black; | ||
border-width: 0 2px 2px 0; | ||
display: inline-block; | ||
padding: 4px; | ||
cursor: pointer; | ||
} | ||
</style> | ||
|
||
{#if isModalOpen} | ||
<div class="reapit-modal-wrapper"> | ||
<ClickOutSide on:click-out-side={toggleModal}> | ||
<slot /> | ||
<div class="reapit-modal"> | ||
<div class="modal-close" on:click={toggleModal}> | ||
<i class="modal-close-btn" /> | ||
</div> | ||
<h3 class="modal-title" {title}>{title}</h3> | ||
<div class="modal-content"> | ||
<slot /> | ||
</div> | ||
</div> | ||
</ClickOutSide> | ||
</div> | ||
{/if} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
const defaultVariant = { | ||
baseBackgroundColor: '#f9fbfd', | ||
basefontSize: '16px', | ||
basefontColor: '#12263f', | ||
inverseFontColor: '#f9fbfd', | ||
secondaryfontColor: '#1e2554', | ||
primaryHeadingFontSize: '24px', | ||
secondaryHeadingFontSize: '20px', | ||
baseFontFamily: '"Roboto", sans-serif', | ||
headingFontFamily: '"Open Sans", sans-serif', | ||
primaryAccentColor: '#0061a8', | ||
secondaryAccentColor: '#6c757d', | ||
mapAccentColor: '#7bc9eb', | ||
breakPoints: { | ||
mobile: '', | ||
tablet: '', | ||
laptop: '', | ||
desktop: '', | ||
}, | ||
} | ||
|
||
window.theme = defaultVariant |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import { validateEmail } from '../validate' | ||
|
||
describe('validate email', () => { | ||
it('should return true', () => { | ||
const mail = '[email protected]' | ||
expect(validateEmail(mail)).toBe(true) | ||
}) | ||
|
||
it('should return false', () => { | ||
let mail = 'abcedf.com' | ||
expect(validateEmail(mail)).toBe(false) | ||
|
||
mail = '[email protected]' | ||
expect(validateEmail(mail)).toBe(false) | ||
|
||
mail = 'abc@edf' | ||
expect(validateEmail(mail)).toBe(false) | ||
}) | ||
}) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
export function validateEmail(email: string) { | ||
//eslint-disable-next-line | ||
const regex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ | ||
return regex.test(email) | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import svelte from 'rollup-plugin-svelte' | ||
import baseConfig from './rollup.config.base' | ||
import replace from '@rollup/plugin-replace' | ||
import path from 'path' | ||
|
||
const config = require(path.resolve(__dirname, '../..', 'config.json')) | ||
const production = !process.env.ROLLUP_WATCH | ||
|
||
export default { | ||
...baseConfig, | ||
input: 'src/viewing-booking/client/core/index.ts', | ||
output: { | ||
sourcemap: !production, | ||
format: 'iife', | ||
name: 'app', | ||
file: './public/dist/viewing-booking.js', | ||
}, | ||
plugins: [ | ||
svelte({ | ||
dev: !production, | ||
css: css => { | ||
css.write('./public/dist/viewing-booking.css') | ||
}, | ||
}), | ||
replace({ | ||
'process.env.NODE_ENV': JSON.stringify(config.NODE_ENV), | ||
}), | ||
...baseConfig.plugins, | ||
], | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
pls avoid to use !important because it's very hard to debug
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm updated