diff --git a/src/assets/Blogger_Sans-Bold.woff b/src/assets/Blogger_Sans-Bold.woff new file mode 100644 index 0000000..877defb Binary files /dev/null and b/src/assets/Blogger_Sans-Bold.woff differ diff --git a/src/assets/Blogger_Sans-Medium.woff b/src/assets/Blogger_Sans-Medium.woff new file mode 100644 index 0000000..8992dca Binary files /dev/null and b/src/assets/Blogger_Sans-Medium.woff differ diff --git a/src/assets/Blogger_Sans.woff b/src/assets/Blogger_Sans.woff new file mode 100644 index 0000000..3f5d235 Binary files /dev/null and b/src/assets/Blogger_Sans.woff differ diff --git a/src/main.css b/src/main.css new file mode 100644 index 0000000..4a1f898 --- /dev/null +++ b/src/main.css @@ -0,0 +1,29 @@ +@font-face { + font-family: 'Blogger'; + src: url('./assets/Blogger_Sans.woff') format('woff'); + font-weight: 400; + font-stretch: 75% 125%; + font-style: normal; +} +@font-face { + font-family: 'BloggerMedium'; + src: url('./assets/Blogger_Sans-Medium.woff') format('woff'); + font-weight: 500; + font-stretch: 75% 125%; + font-style: normal; +} +@font-face { + font-family: 'BloggerBold'; + src: url('./assets/Blogger_Sans-Bold.woff') format('woff'); + font-weight: 600 700; + font-stretch: 75% 125%; + font-style: normal; +} + +body { font-family: 'Blogger'; height: 100%; margin: 0; display: flex; flex-direction: column; } +html { height: 100%; margin: 0} + +strong { + font-family: 'BloggerBold'; + font-weight: normal; +} \ No newline at end of file diff --git a/src/router.imba b/src/router.imba index c2656da..3e13b49 100644 --- a/src/router.imba +++ b/src/router.imba @@ -2,13 +2,30 @@ import "pro-router/standalone" import "./lib/router_tag.imba" import { compact, fromPairs, chunk, includes, reject, toPairs, flatten } from 'lodash' -let helpers = - compact: compact - fromPairs: fromPairs - chunk: chunk - includes: includes - reject: reject - toPairs: toPairs - flatten: flatten - -R.init(helpers: helpers, views: ['day-select', 'choose-slot', 'booking-confirmation'], root: 'day-select', render: imba.commit) \ No newline at end of file +global.H = + compact: compact + fromPairs: fromPairs + chunk: chunk + includes: includes + reject: reject + toPairs: toPairs + flatten: flatten + +R.init(helpers: H, views: ['day-select', 'choose-slot', 'booking-confirmation'], root: 'day-select', render: imba.commit) + +import "./views/day-select.imba" +import "./main.css" + +global css + body jc@portrait:flex-end + .active filter:hue-rotate(45deg) bxs:md + .clickable us:none cursor@hover:pointer o@hover:0.7 tween:opacity 300ms + .bordered bd: 2px solid violet5 rd: 10px + .bordered-complex > bdr: 2px solid violet5 bdl: 2px solid violet5 + @first bdt:2px solid violet6 rd:20px 20px 0 0 + @last bdb:2px solid violet6 rd:0 0 20px 20px + +tag app + + +imba.mount \ No newline at end of file diff --git a/src/ui/action-button.imba b/src/ui/action-button.imba new file mode 100644 index 0000000..8f9d0a4 --- /dev/null +++ b/src/ui/action-button.imba @@ -0,0 +1,3 @@ +tag action-button + css p:13px 5px mx: 5px bgc:violet5 c:white fw:bold d:inline-block bxs:sm + \ No newline at end of file diff --git a/src/ui/date-input.imba b/src/ui/date-input.imba new file mode 100644 index 0000000..8a28361 --- /dev/null +++ b/src/ui/date-input.imba @@ -0,0 +1,47 @@ +import './plus-minus.imba' + +let h = + today: do new Date + + modify: do |what, n, date=R.param('date')| + date["set{what}"]( date["get{what}"]() + n ) + date + + change: do |what, n, date=R.param('date')| + h.save h.modify(*arguments) + + save: do |date| + R.write 'date', date + + incr_day: do h.change "Date", 1 + decr_day: do h.change "Date", -1 + incr_month: do h.change "Month", 1 + decr_month: do h.change "Month", -1 + incr_year: do h.change "FullYear", 1 + decr_year: do h.change "FullYear", -1 + + no_time: do |date| + date.setHours(0,0,0,0) + date + + valid: do |date| + ( date || R.param('date') ) > h.no_time! h.today! + + format: do |n| + "{if n < 10 then 0 else ''}{n}" + +export default h + +R.setters.date = do |v| "{v.getFullYear!}-{h.format(v.getMonth!+1)}-{h.format(v.getDate!)}" if h.valid(v) +R.getters.date = do |v| + if v + let date = new Date(v) + return date if h.valid(date) + h.today! + +tag date-input + + + + + \ No newline at end of file diff --git a/src/ui/plus-minus.imba b/src/ui/plus-minus.imba new file mode 100644 index 0000000..2351b01 --- /dev/null +++ b/src/ui/plus-minus.imba @@ -0,0 +1,22 @@ +tag plus-minus + prop value + prop decorate + prop incr + prop decr + + css m: 10px + > miw:50px h:50px p:19px 5px 0 ta:center fs:180% + + + + if value +
decorate ? decorate(value) : value + + +tag plus-minus-plus + prop incr + '+' + +tag plus-minus-minus + prop decr + '-' \ No newline at end of file diff --git a/src/views/day-select.imba b/src/views/day-select.imba new file mode 100644 index 0000000..c2b00c2 --- /dev/null +++ b/src/views/day-select.imba @@ -0,0 +1,24 @@ +import dh from "../ui/date-input.imba" +import "../ui/action-button.imba" + +let h = + tomorrow: do dh.modify "Date", 1, dh.today! + in_a_week: do dh.modify "Date", 7, dh.today! + day_word: do /^\w*/.exec(R.param('date').toString!)[0] + +tag view-day-select + +

"Which day?" + "Today" + "Tomorrow" + "In a week" + + + "Check slots for {h.day_word!}" + +tag DayHint < action-button + prop day + + + get compare_days + R.setters.date(R.param('date')) == R.setters.date(day) \ No newline at end of file