From 974d0354b4267c39a403eb3b16fa4125bc45921f Mon Sep 17 00:00:00 2001 From: soraefir Date: Tue, 4 Mar 2025 01:45:28 +0100 Subject: [PATCH] wip --- package.json | 4 +- src/client/old.js | 26 +++++---- src/client/types/migration.ts | 1 + src/client/types/wrapper.ts | 4 ++ src/style/custom.css | 32 ++++++++--- src/template/module/journey/leg/top_day.pug | 54 +++++++++++++++++ src/template/module/journey/leg/top_leg.pug | 64 +++++++++++++++++++++ src/template/module/journey/main.pug | 6 +- 8 files changed, 170 insertions(+), 21 deletions(-) create mode 100644 src/template/module/journey/leg/top_day.pug create mode 100644 src/template/module/journey/leg/top_leg.pug diff --git a/package.json b/package.json index 1362059..08e99a6 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "build-client": "esbuild src/client/main.ts --outfile=public/main.js --tree-shaking=true --bundle --minify --sourcemap --tsconfig=tsconfig-client.json", "build-server": "esbuild src/server/**/*.ts --outdir=build --platform=node --format=cjs", "start": "node build/main.js", - "demon": "nodemon -e ts,js --watch src --watch template --watch router --exec \"yarn build && yarn start\"" + "demon": "nodemon -e ts,js,css --watch src --watch template --watch router --exec \"yarn build && yarn start\"" }, "repository": { "type": "git", @@ -30,4 +30,4 @@ "pug": "^3.0.2", "undici": "^7.3.0" } -} +} \ No newline at end of file diff --git a/src/client/old.js b/src/client/old.js index ebb97bd..b2fdafb 100644 --- a/src/client/old.js +++ b/src/client/old.js @@ -22,7 +22,7 @@ const app = new Vue({ query: { type: "", res: [], load: false, sub: false, note: false, drawer: false, }, - leg_nav: { + nav: { scrollInterval: null, scrollDir: null }, @@ -215,9 +215,9 @@ const app = new Vue({ sideScroll: function (element, direction, speed, step) { - this.leg_nav.scrollDir = direction + this.nav.scrollDir = direction if (direction == 'none') return; - this.leg_nav.scrollInterval = setInterval(() => { + this.nav.scrollInterval = setInterval(() => { element.scrollLeft += (direction == 'left') ? -step : step; }, speed); }, @@ -228,27 +228,33 @@ const app = new Vue({ }, focus_leg(idx) { - const c = document.querySelector('.scroll-content') + const c = document.querySelector('.scroll-content.nav-leg') const item = c.children[(idx != undefined ? idx : this.journey.sel_leg) + 1]; c.scrollLeft = item.offsetLeft + (item.offsetWidth / 2) - c.offsetWidth / 2 }, + focus_day(idx) { + const c = document.querySelector('.scroll-content.nav-day') + const item = c.children[(idx != undefined ? idx : this.journey.sel_day) + 1]; + c.scrollLeft = item.offsetLeft + (item.offsetWidth / 2) - c.offsetWidth / 2; + this.focus_leg() + }, nav_mousemove(e) { if (e.pointerType != 'mouse') return; - const c = document.querySelector('.scroll-content') + const c = e.target.closest('.scroll-content') || e.target.firstChild; const left = e.pageX - c.getBoundingClientRect().left; const newDir = left < c.offsetWidth * 0.1 ? 'left' : (left > c.offsetWidth * 0.9 ? 'right' : 'none') - if (!this.leg_nav.scrollInterval || this.leg_nav.scrollDir != newDir) { - if (this.leg_nav.scrollInterval) clearInterval(this.leg_nav.scrollInterval) + if (!this.nav.scrollInterval || this.nav.scrollDir != newDir) { + if (this.nav.scrollInterval) clearInterval(this.nav.scrollInterval) this.sideScroll(c, newDir, 25, 10); } }, nav_mouseleave(e) { - clearInterval(this.leg_nav.scrollInterval); - this.leg_nav.scrollDir = 'none' - this.leg_nav.scrollInterval = null + clearInterval(this.nav.scrollInterval); + this.nav.scrollDir = 'none' + this.nav.scrollInterval = null }, refreshTextAreaHeight(event) { diff --git a/src/client/types/migration.ts b/src/client/types/migration.ts index 2ccf0c0..14f8963 100644 --- a/src/client/types/migration.ts +++ b/src/client/types/migration.ts @@ -8,6 +8,7 @@ function migrate_A_to_0(e: journey): journey { v.day_title = v.day_title || (v as any).step_title; v.places.activities = v.places.activities || (v as any).places.places; v.travel = v.travel || []; + v.day_title = typeof (v.day_title) == "string" ? [v.day_title] : [] }) console.log(e) return e; diff --git a/src/client/types/wrapper.ts b/src/client/types/wrapper.ts index 639f29c..bbf9efb 100644 --- a/src/client/types/wrapper.ts +++ b/src/client/types/wrapper.ts @@ -56,6 +56,10 @@ class journey_wrapper { this.sel_leg = Math.max(this.sel_leg - 1, 0); this.sel_day = 0; } + + day_sel(idx: number): void { + this.sel_day = idx; + } day_next() { this.sel_day += 1 if (this.sel_day > this.leg_len() - 1) { diff --git a/src/style/custom.css b/src/style/custom.css index 6c99be7..394ce05 100644 --- a/src/style/custom.css +++ b/src/style/custom.css @@ -197,10 +197,6 @@ main { background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, var(--white) 50%); } -.list-group-item.add { - position: absolute; - right: 0 -} .scroll-content>.list-group-item.active, .scroll-content>.list-group-item.show { @@ -212,7 +208,7 @@ main { border-bottom-left-radius: var(--border-radius); } -.scroll-content>div:nth-last-child(4) { +.scroll-content>div:nth-last-child(3) { border-top-right-radius: var(--border-radius); border-bottom-right-radius: var(--border-radius); } @@ -221,6 +217,11 @@ main { border-radius: var(--border-radius); } +.list-group-item.add { + position: absolute; + right: 0; +} + @media (min-width: 768px) { .scroll-content.list-group>.list-group-item { display: inline-block; @@ -230,6 +231,12 @@ main { .scroll-content>.list-group-item.placeholder-right { display: none; } + + .list-group-item.add { + position: relative; + right: 0; + margin-left: 1em; + } } .list-group { @@ -240,6 +247,16 @@ main { padding: 1rem 0rem; } +.list-group-item>.text { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.list-group-item.show { + min-width: 24px; +} + .list-group-item { border: 1px solid var(--darkdark); display: inline-block; @@ -247,10 +264,11 @@ main { cursor: pointer; text-align: center; padding: .5rem .5rem; - max-width: 90%; + max-width: calc(100% - 48px); + display: inline-block; } -.list-group-item:hover { +.list-group-item:not(.show):hover { filter: brightness(85%); } diff --git a/src/template/module/journey/leg/top_day.pug b/src/template/module/journey/leg/top_day.pug new file mode 100644 index 0000000..d8833c3 --- /dev/null +++ b/src/template/module/journey/leg/top_day.pug @@ -0,0 +1,54 @@ +.row + .mr-auto.col-auto + .list-group.text-dark + .list-group-item.show.bg-white.rounded(v-on:click.prevent="journey.day_prev(); focus_day();") + i.fas.fa-angle-left + .col-8.col-sm-8.col-md-10.scroll-handler( + @pointerleave="nav_mouseleave" + @pointermove="nav_mousemove") + + draggable.scroll-content.nav-day.list-group.bg-dark( + tag="div", + :list="journey.leg_get().day_title", + handle=".handle" + ) + .list-group-item.bg-white.text-white.show.placeholder-left( + :class="journey.sel_day >0? '': 'bg-dark'" + slot="header" + ) + .text {{'⋅'}} + .list-group-item.handle.text-dark( + v-for="(element, idx) in journey.leg_len()", + :key="idx", + @click="journey.day_sel(idx)", + :class="journey.sel_day == idx ? 'bg-primary active' : 'bg-white'" + ) + .text {{ journey.leg_get().day_title[idx] || "Leg "+idx}} + .list-group-item.bg-white.text-white.show.placeholder-right( + :class="journey.sel_leg < journey.data.main.length-1? '': 'bg-dark'" + slot="footer" + ) + .text {{'⋅'}} + .list-group-item.bg-dark.text-white( + style="display:none" + slot="footer" + ) + .text {{'⋅'}} + + .ml-auto.col-auto + .list-group.text-dark + .list-group-item.show.bg-white.rounded(v-on:click.prevent="journey.day_next(); focus_day();") + i.fas.fa-angle-right +.row + .col-8.col-sm-6.col-md-4 + .input.w-100 + input.col-8( + placeholder="Day" + v-model="journey.leg_get().day_title[journey.sel_day]" + ) + .ml-auto.col-4.col-sm-4.col-md-3 + .input.w-100 + input.text-right( + disabled="", + :value="journey.date_sel() + ' (' + journey.sel_day + ')'" + ) diff --git a/src/template/module/journey/leg/top_leg.pug b/src/template/module/journey/leg/top_leg.pug new file mode 100644 index 0000000..ba90561 --- /dev/null +++ b/src/template/module/journey/leg/top_leg.pug @@ -0,0 +1,64 @@ +.row + .mr-auto.col-auto + .list-group.text-dark + .list-group-item.show.bg-white.rounded(v-on:click.prevent="journey.leg_prev(); focus_leg();") + i.fas.fa-angle-left + .col-8.col-sm-8.col-md-10.scroll-handler( + @pointerleave="nav_mouseleave" + @pointermove="nav_mousemove") + + draggable.scroll-content.nav-leg.list-group.bg-dark( + tag="div", + :list="journey.data.main", + handle=".handle" + ) + .list-group-item.bg-white.text-white.show.placeholder-left( + :class="journey.sel_leg >0? '': 'bg-dark'" + slot="header" + ) + .text {{'⋅'}} + .list-group-item.handle.text-dark( + v-for="(element, idx) in journey.data.main", + :key="idx", + @click="journey.leg_sel(idx)", + :class="journey.sel_leg == idx ? 'bg-primary active' : 'bg-white'" + ) + .text {{ element.title || "Leg "+idx}} + i.fa.fa-times.text-small.fright( + style="top: 2px; right: 2px; position: absolute", + @click="journey.rm_leg(idx); focus_leg();" + ) + .list-group-item.bg-white.text-white.show.placeholder-right( + :class="journey.sel_leg < journey.data.main.length-1? '': 'bg-dark'" + slot="footer" + ) + .text {{'⋅'}} + .list-group-item.bg-white.text-dark.add(@click="journey.add_leg(); focus_leg();" + slot="footer" + :class="journey.sel_leg >= journey.data.main.length-1? 'show': ''") + div + i.fa.fa-plus() + + .ml-auto.col-auto + .list-group.text-dark + .list-group-item.show.bg-white.rounded(v-on:click.prevent="journey.leg_next(); focus_leg();") + i.fas.fa-angle-right +.row.text-center + .col-12.col-sm-12.col-md-5.mr-auto + .row + .col-5.col-md-6.mr-auto + .input.w-100 + input( + placeholder="Leg" + v-model="journey.leg_get().title") + .col-7.col-sm-6.col-md-4 + .input.w-100 + //- label Date Range ({{ journey.leg_len() }}) + date-picker( + :lang="lang", + v-model="journey.leg_get().date_range", + range="", + format="ddd D MMM", + placeholder="Date Range", + v-on:change="journey.date_update(journey.sel_leg)" + ) diff --git a/src/template/module/journey/main.pug b/src/template/module/journey/main.pug index fb8d244..c6701f7 100644 --- a/src/template/module/journey/main.pug +++ b/src/template/module/journey/main.pug @@ -17,8 +17,10 @@ input.text-center(v-model="journey.data.name" placeholder="My Journey" type="text") //- input.small(type="text", :placeholder="journey.date_tot() + ' (' + journey.tot_len() + ')'" ) - include leg/nav.pug - include leg/top.pug + include leg/top_leg.pug + include leg/top_day.pug + //- include leg/nav.pug + //- include leg/top.pug .row(style="aspect-ratio:1.25;") .map-container(:class=" { 'col-2 col-sm-5 col-md-8': query.type, 'col-2 col-sm-5 col-md-6': query.note , 'col-12': (!query.type && !query.note) }" ) include map.pug