diff --git a/package.json b/package.json index 9aeb0f2..a94c2a2 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,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,pug --watch src --watch template --watch router --exec \"yarn build && yarn start\"" + "demon": "nodemon -e ts,js --watch src --watch template --watch router --exec \"yarn build && yarn start\"" }, "repository": { "type": "git", @@ -20,19 +20,13 @@ "@fastify/leveldb": "^6.0.0", "@fastify/static": "^8.0.0", "@fastify/view": "^10.0.0", - "@prettier/plugin-pug": "^3.0.0", "@types/node": "^22.13.5", "esbuild": "^0.25.0", "fastify": "^5.2.1", "jsdom": "^26.0.0", - "leaflet": "^1.9.4", "nodemon": "^3.0.1", "prettier": "^3.5.2", "pug": "^3.0.2", - "undici": "^7.3.0", - "vue": "2", - "vue-multiselect": "2", - "vue-textarea-autosize": "^1.1.1", - "vue2-leaflet": "^2.7.1" + "undici": "^7.3.0" } -} +} \ No newline at end of file diff --git a/public/css/index.css b/public/css/index.css index 2c167f6..1202b96 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -15,22 +15,9 @@ --pink: #F57DB9; --red: #F57D7D; - --pri: var(--blue); - --alt: var(--pink); - --valid: var(--green); - --error: var(--red); - --warn: var(--orange); - --info: var(--yellow); - --bg: var(--darkdark); - --fg: var(--white); + --border-radius: 3px; } -/** - * SETTINGS - */ -/** - * COMPONENTS - */ /** * BACKGROUND */ @@ -74,74 +61,16 @@ background-color: var(--lightlight); } -/** - * BORDER - */ -.border { - border: 1px solid var(--white); -} - -.border-bottom { - border-bottom: 1px solid var(--white); -} - -.border-left { - border-left: 1px solid var(--white); -} - -.border-right { - border-right: 1px solid var(--white); -} - -.border-top { - border-top: 1px solid var(--white); -} /** * ALIGNERS */ -.aligner { - display: flex; -} -.aligner--spaceBetween { - justify-content: space-between; - width: 100%; -} - -.aligner--spaceAround { - justify-content: space-around; - width: 100%; -} - -.aligner--centerVertical { +.align { align-items: center; -} - -.aligner--centerHoritzontal { justify-content: center; } -.aligner--contentStart { - justify-content: flex-start; -} - -.aligner--contentEnd { - justify-content: flex-end; -} - -.aligner--itemTop { - align-self: flex-start; -} - -.aligner--itemBottom { - align-self: flex-end; -} - -.flex-grow, -.aligner--grow { - flex-grow: 1; -} /** * FLOATS @@ -160,88 +89,6 @@ display: table; } -/** - * MARGINS - */ -.m-xsmall { - margin: 4px; -} - -.mb-xsmall { - margin-bottom: 4px; -} - -.m-small { - margin: 8px; -} - -.mb-small { - margin-bottom: 8px; -} - -.m-medium { - margin: 16px; -} - -.mb-medium { - margin-bottom: 16px; -} - -.m-big { - margin: 36px; -} - -.mb-big { - margin-bottom: 36px; -} - -.m-huge { - margin: 48px; -} - -.mb-huge { - margin-bottom: 48px; -} - -.m-none { - margin: 0 !important; -} - -/** - * PADDINGS - */ -.p-small { - padding: 4px; -} - -.pb-small { - padding-bottom: 4px; -} - -.p-medium { - padding: 8px; -} - -.pb-medium { - padding-bottom: 8px; -} - -.p-big { - padding: 16px; -} - -.pb-big { - padding-bottom: 16px; -} - -.p-huge { - padding: 36px; -} - -.pb-huge { - padding-bottom: 36px; -} - /** * OTHERS */ @@ -253,16 +100,8 @@ overflow: hidden; } -.opacity-low { - opacity: 0.5; -} - -.rounded-corners { - border-radius: 5px; -} - .rounded { - border-radius: 100%; + border-radius: var(--border-radius); } /** @@ -285,7 +124,6 @@ } .container { - background-color: transparent; margin: 0 auto; max-width: 1380px; padding-left: 12px; @@ -477,70 +315,6 @@ h4 { text-align: left; } -/** - * BADGE - * - * Markup: - * ------- - * - * - * - */ -.badge { - background-color: #eceff1; - border-radius: 3px; - color: #272727; - display: inline-block; - line-height: 1.2em; - padding: 8px 16px; -} - -.badge--big { - font-size: 1.3em; -} - -.badge--small { - font-size: 0.7em; -} - -.badge--primary { - background-color: #03a9f4; - color: #fff; -} - -.badge--secondary { - background-color: #e91e63; - color: #fff; -} - -.badge--dark { - background-color: #18232f; - color: #fff; -} - -.badge--light { - background-color: #969da6; - color: #fff; -} - -.badge--success { - background-color: #4caf50; - color: #fff; -} - -.badge--error { - background-color: #e74c3c; - color: #fff; -} - -.badge--warning { - background-color: #f0ad4e; - color: #fff; -} - /** * BUTTON * @@ -567,7 +341,6 @@ button { font-size: 16px; font-weight: 600; line-height: 1.5em; - margin: 0 8px 16px 8px; padding: 8px 16px; text-align: center; text-decoration: none; @@ -721,6 +494,7 @@ textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; + resize: none; } label { @@ -736,11 +510,10 @@ input:-webkit-autofill { .input, .select { border: 1px solid var(--white); - border-radius: 3px; + border-radius: var(--border-radius); box-shadow: none; display: inline-block; font-weight: normal; - margin-bottom: 20px; overflow: hidden; } @@ -904,7 +677,7 @@ input:-webkit-autofill { .checkbox input[type="checkbox"]+label::before { background-color: #eceff1; border: 1px solid var(--white); - border-radius: 3px; + border-radius: var(--border-radius); content: ""; display: inline-block; height: 20px; @@ -1023,16 +796,15 @@ input:-webkit-autofill { } .input { - background-color: #eceff1; - margin-right: 10px; + background-color: var(--white); padding: 0; position: relative; } .input :focus, .input :active { - background-color: #fbfbfc; - border-radius: 3px; + background-color: var(--white); + border-radius: var(--border-radius); } .input input, @@ -1080,61 +852,6 @@ input:-webkit-autofill { width: 16px; } -.input-fullWidth { - display: block; - margin-left: 0; - margin-right: 0; - width: 100%; -} - -/** - * FORM COLLAPSED (items in row without gap between them) - * - * Markup: - * ------- - * - *
- *
- * - *
- *
- * - *
- * - *
- **/ -.formCollapsed { - display: flex; - margin-bottom: 20px; -} - -.formCollapsed-item { - border-radius: 0 !important; - margin: 0 !important; -} - -.formCollapsed-item:first-child { - border-bottom-left-radius: 3px !important; - border-top-left-radius: 3px !important; -} - -.formCollapsed-item:last-child { - border-bottom-right-radius: 3px !important; - border-top-right-radius: 3px !important; -} - -.formCollapsed-item:not(:last-child) { - border-right: 0; -} - -.formCollapsed-itemPrimary { - flex: 1; -} - /** * LOADING BAR * @@ -1220,596 +937,6 @@ input:-webkit-autofill { } } -/** - * LOADING SPINNER - * - * Markup: - * --------- - *
- * - * - * - * - *
- * - */ -.loadingSpinner { - -webkit-animation: rotateLoader 4s infinite; - animation: rotateLoader 4s infinite; - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; - display: block; - height: 30px; - left: 50%; - margin-left: -15px; - margin-top: -15px; - position: fixed; - top: 50%; - width: 30px; - z-index: 1000; -} - -.loadingSpinner-inner { - -webkit-animation-timing-function: ease-in-out; - animation-timing-function: ease-in-out; - background-color: #e91e63; - border-radius: 100%; - display: block; - height: 9px; - position: absolute; - width: 9px; -} - -.loadingSpinner-inner:nth-child(1) { - -webkit-animation: translateBall1 1s infinite; - animation: translateBall1 1s infinite; - left: 0; - top: 0; - -webkit-transform: translate3d(4.5px, 4.5px, 0); - transform: translate3d(4.5px, 4.5px, 0); -} - -.loadingSpinner-inner:nth-child(2) { - -webkit-animation: translateBall2 1s infinite; - animation: translateBall2 1s infinite; - right: 0; - top: 0; -} - -.loadingSpinner-inner:nth-child(3) { - -webkit-animation: translateBall3 1s infinite; - animation: translateBall3 1s infinite; - bottom: 0; - right: 0; -} - -.loadingSpinner-inner:nth-child(4) { - -webkit-animation: translateBall4 1s infinite; - animation: translateBall4 1s infinite; - bottom: 0; - left: 0; -} - -@-webkit-keyframes rotateLoader { - 0% { - -webkit-transform: rotate(0); - transform: rotate(0); - } - - 25% { - -webkit-transform: rotate(90deg); - transform: rotate(90deg); - } - - 50% { - -webkit-transform: rotate(180deg); - transform: rotate(180deg); - } - - 75% { - -webkit-transform: rotate(270deg); - transform: rotate(270deg); - } - - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} - -@keyframes rotateLoader { - 0% { - -webkit-transform: rotate(0); - transform: rotate(0); - } - - 25% { - -webkit-transform: rotate(90deg); - transform: rotate(90deg); - } - - 50% { - -webkit-transform: rotate(180deg); - transform: rotate(180deg); - } - - 75% { - -webkit-transform: rotate(270deg); - transform: rotate(270deg); - } - - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg); - } -} - -@-webkit-keyframes translateBall1 { - 0% { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - 50% { - -webkit-transform: translate3d(4.5px, 4.5px, 0); - transform: translate3d(4.5px, 4.5px, 0); - } - - 100% { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -@keyframes translateBall1 { - 0% { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - 50% { - -webkit-transform: translate3d(4.5px, 4.5px, 0); - transform: translate3d(4.5px, 4.5px, 0); - } - - 100% { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -@-webkit-keyframes translateBall2 { - 0% { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - 50% { - -webkit-transform: translate3d(-4.5px, 4.5px, 0); - transform: translate3d(-4.5px, 4.5px, 0); - } - - 100% { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -@keyframes translateBall2 { - 0% { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - 50% { - -webkit-transform: translate3d(-4.5px, 4.5px, 0); - transform: translate3d(-4.5px, 4.5px, 0); - } - - 100% { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -@-webkit-keyframes translateBall3 { - 0% { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - 50% { - -webkit-transform: translate3d(-4.5px, -4.5px, 0); - transform: translate3d(-4.5px, -4.5px, 0); - } - - 100% { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -@keyframes translateBall3 { - 0% { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - 50% { - -webkit-transform: translate3d(-4.5px, -4.5px, 0); - transform: translate3d(-4.5px, -4.5px, 0); - } - - 100% { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -@-webkit-keyframes translateBall4 { - 0% { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - 50% { - -webkit-transform: translate3d(4.5px, -4.5px, 0); - transform: translate3d(4.5px, -4.5px, 0); - } - - 100% { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -@keyframes translateBall4 { - 0% { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } - - 50% { - -webkit-transform: translate3d(4.5px, -4.5px, 0); - transform: translate3d(4.5px, -4.5px, 0); - } - - 100% { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); - } -} - -/** - * NOTIFICATION - * - * Markup: - * ------- - * - *
Success notification
- *
Success info
- *
Success error
- *
Success warning
- * - */ -.notification { - border-radius: 3px; - color: #fff; - margin-bottom: 36px; - padding: 16px; -} - -.notification p:last-child { - margin-bottom: 0; -} - -.notification--primary { - background-color: #03a9f4; -} - -.notification--dark { - background-color: #18232f; -} - -.notification--secondary { - background-color: #e91e63; -} - -.notification--white { - background-color: #fff; -} - -.notification--success { - background-color: #4caf50; -} - -.notification--info { - background-color: #5bc0de; -} - -.notification--warning { - background-color: #f0ad4e; -} - -.notification--error { - background-color: #e74c3c; -} - -.notification--gray { - background-color: #969da6; -} - -.notification--gray-light { - background-color: #eceff1; -} - -/** - * PAGINATOR - * - * Markup: - * ------- - * - * - */ -.paginator-item { - display: inline-block; - margin-right: 4px; -} - -.paginator-itemLink { - background-color: #eceff1; - border-radius: 3px; - display: block; - padding: 8px 16px; -} - -.paginator-itemLink.is-active { - background-color: #03a9f4; - color: #fff; - cursor: default; -} - -/** - * TABLE - * - * Markup: - * ------- - * - * - * - * - * - * - * - * - * Blue - * One - * My life fades - * - *
First columnSecond columnThird column
- * - */ -.table { - background-color: #eceff1; - border: 1px solid var(--white); - border-collapse: collapse; - color: #272727; - max-width: 100%; - width: 100%; -} - -.table th, -.table td { - border-bottom: 1px solid var(--white); - padding: 8px; - position: relative; -} - -.table thead { - border-bottom: 1px solid var(--white); -} - -.table th { - background-color: #fff; - color: #969da6; - font-size: 12px; - font-weight: normal; - padding: 8px; - white-space: nowrap; -} - -/** - * TABLE RESPONSIVE - * - * Markup: - * ------- - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - *
First columnSecond columnThird column
BlueOneMy life fades
GreenTwo - * when the world was powered by the black fuel... and the desert - * sprouted great cities of pipe and steel. - *
YellowThree - * A whirlwind of looting, a firestorm of fear. - *
- * - */ -.table--responsive th { - display: none; -} - -.table--responsive td { - display: block; -} - -@media (max-width: 767px) { - .table--responsive td { - border: 0; - } -} - -.table--responsive td::before { - color: #969da6; - content: attr(data-th) ": "; - display: block; - font-weight: normal; -} - -@media (min-width: 576px) { - .table--responsive td::before { - display: none; - } -} - -.table--responsive td:first-child { - border-top: 1px solid var(--white); -} - -.table--responsive th, -.table--responsive td { - text-align: left; -} - -@media (min-width: 576px) { - - .table--responsive th, - .table--responsive td { - border-top: 1px solid var(--white); - display: table-cell; - } -} - -/** - * TABS - * - * Markup: - * ------- - * - *
- * [...] - * [...] - *
- * - */ -.tabs { - border-bottom: 1px solid var(--white); - text-align: center; -} - -.tabs-item { - border-bottom: 3px solid transparent; - color: #969da6; - display: inline-block; - margin: 0 16px 0 0; - min-width: 70px; - padding: 16px; - position: relative; -} - -.tabs-item:hover { - color: #03a9f4; - text-decoration: none; -} - -.tabs-item.is-selected { - border-bottom: 3px solid #03a9f4; - color: #03a9f4; -} - -/** - * TAG - * - * Markup: - * ------- - * - * - * - * - * - */ -.tag { - background-color: #eceff1; - border-radius: 3px 0 0 3px; - color: #272727; - display: inline-block; - line-height: 16px; - margin: 0 16px 16px 0; - padding: 8px; - position: relative; -} - -.tag::before { - border-bottom: 16px solid transparent; - border-left: 8px solid #eceff1; - border-top: 16px solid transparent; - content: ""; - height: 0; - position: absolute; - right: -8px; - top: 0; - width: 0; -} - -.tag::after { - background: #fff; - border-radius: 100%; - content: ""; - height: 5px; - margin-top: -2.5px; - position: absolute; - right: -2.5px; - top: 50%; - width: 5px; -} .container { width: 100%; @@ -1858,17 +985,6 @@ input:-webkit-autofill { margin-left: -12px; } -.no-gutters { - margin-left: 0; - margin-right: 0; -} - -.no-gutters>.col, -.no-gutters>[class*="col-"] { - padding-left: 0; - padding-right: 0; -} - .col-1, .col-2, .col-3, @@ -2018,102 +1134,6 @@ input:-webkit-autofill { max-width: 100%; } -.order-first { - order: -1; -} - -.order-1 { - order: 1; -} - -.order-2 { - order: 2; -} - -.order-3 { - order: 3; -} - -.order-4 { - order: 4; -} - -.order-5 { - order: 5; -} - -.order-6 { - order: 6; -} - -.order-7 { - order: 7; -} - -.order-8 { - order: 8; -} - -.order-9 { - order: 9; -} - -.order-10 { - order: 10; -} - -.order-11 { - order: 11; -} - -.order-12 { - order: 12; -} - -.offset-1 { - margin-left: 8.33333%; -} - -.offset-2 { - margin-left: 16.66667%; -} - -.offset-3 { - margin-left: 25%; -} - -.offset-4 { - margin-left: 33.33333%; -} - -.offset-5 { - margin-left: 41.66667%; -} - -.offset-6 { - margin-left: 50%; -} - -.offset-7 { - margin-left: 58.33333%; -} - -.offset-8 { - margin-left: 66.66667%; -} - -.offset-9 { - margin-left: 75%; -} - -.offset-10 { - margin-left: 83.33333%; -} - -.offset-11 { - margin-left: 91.66667%; -} - @media (min-width: 576px) { .col-sm { flex-basis: 0; @@ -2186,106 +1206,6 @@ input:-webkit-autofill { flex: 0 0 100%; max-width: 100%; } - - .order-sm-first { - order: -1; - } - - .order-sm-1 { - order: 1; - } - - .order-sm-2 { - order: 2; - } - - .order-sm-3 { - order: 3; - } - - .order-sm-4 { - order: 4; - } - - .order-sm-5 { - order: 5; - } - - .order-sm-6 { - order: 6; - } - - .order-sm-7 { - order: 7; - } - - .order-sm-8 { - order: 8; - } - - .order-sm-9 { - order: 9; - } - - .order-sm-10 { - order: 10; - } - - .order-sm-11 { - order: 11; - } - - .order-sm-12 { - order: 12; - } - - .offset-sm-0 { - margin-left: 0; - } - - .offset-sm-1 { - margin-left: 8.33333%; - } - - .offset-sm-2 { - margin-left: 16.66667%; - } - - .offset-sm-3 { - margin-left: 25%; - } - - .offset-sm-4 { - margin-left: 33.33333%; - } - - .offset-sm-5 { - margin-left: 41.66667%; - } - - .offset-sm-6 { - margin-left: 50%; - } - - .offset-sm-7 { - margin-left: 58.33333%; - } - - .offset-sm-8 { - margin-left: 66.66667%; - } - - .offset-sm-9 { - margin-left: 75%; - } - - .offset-sm-10 { - margin-left: 83.33333%; - } - - .offset-sm-11 { - margin-left: 91.66667%; - } } @media (min-width: 768px) { @@ -2360,106 +1280,6 @@ input:-webkit-autofill { flex: 0 0 100%; max-width: 100%; } - - .order-md-first { - order: -1; - } - - .order-md-1 { - order: 1; - } - - .order-md-2 { - order: 2; - } - - .order-md-3 { - order: 3; - } - - .order-md-4 { - order: 4; - } - - .order-md-5 { - order: 5; - } - - .order-md-6 { - order: 6; - } - - .order-md-7 { - order: 7; - } - - .order-md-8 { - order: 8; - } - - .order-md-9 { - order: 9; - } - - .order-md-10 { - order: 10; - } - - .order-md-11 { - order: 11; - } - - .order-md-12 { - order: 12; - } - - .offset-md-0 { - margin-left: 0; - } - - .offset-md-1 { - margin-left: 8.33333%; - } - - .offset-md-2 { - margin-left: 16.66667%; - } - - .offset-md-3 { - margin-left: 25%; - } - - .offset-md-4 { - margin-left: 33.33333%; - } - - .offset-md-5 { - margin-left: 41.66667%; - } - - .offset-md-6 { - margin-left: 50%; - } - - .offset-md-7 { - margin-left: 58.33333%; - } - - .offset-md-8 { - margin-left: 66.66667%; - } - - .offset-md-9 { - margin-left: 75%; - } - - .offset-md-10 { - margin-left: 83.33333%; - } - - .offset-md-11 { - margin-left: 91.66667%; - } } @media (min-width: 992px) { @@ -2535,105 +1355,6 @@ input:-webkit-autofill { max-width: 100%; } - .order-lg-first { - order: -1; - } - - .order-lg-1 { - order: 1; - } - - .order-lg-2 { - order: 2; - } - - .order-lg-3 { - order: 3; - } - - .order-lg-4 { - order: 4; - } - - .order-lg-5 { - order: 5; - } - - .order-lg-6 { - order: 6; - } - - .order-lg-7 { - order: 7; - } - - .order-lg-8 { - order: 8; - } - - .order-lg-9 { - order: 9; - } - - .order-lg-10 { - order: 10; - } - - .order-lg-11 { - order: 11; - } - - .order-lg-12 { - order: 12; - } - - .offset-lg-0 { - margin-left: 0; - } - - .offset-lg-1 { - margin-left: 8.33333%; - } - - .offset-lg-2 { - margin-left: 16.66667%; - } - - .offset-lg-3 { - margin-left: 25%; - } - - .offset-lg-4 { - margin-left: 33.33333%; - } - - .offset-lg-5 { - margin-left: 41.66667%; - } - - .offset-lg-6 { - margin-left: 50%; - } - - .offset-lg-7 { - margin-left: 58.33333%; - } - - .offset-lg-8 { - margin-left: 66.66667%; - } - - .offset-lg-9 { - margin-left: 75%; - } - - .offset-lg-10 { - margin-left: 83.33333%; - } - - .offset-lg-11 { - margin-left: 91.66667%; - } } @media (min-width: 1200px) { @@ -2709,288 +1430,14 @@ input:-webkit-autofill { max-width: 100%; } - .order-xl-first { - order: -1; - } - - .order-xl-1 { - order: 1; - } - - .order-xl-2 { - order: 2; - } - - .order-xl-3 { - order: 3; - } - - .order-xl-4 { - order: 4; - } - - .order-xl-5 { - order: 5; - } - - .order-xl-6 { - order: 6; - } - - .order-xl-7 { - order: 7; - } - - .order-xl-8 { - order: 8; - } - - .order-xl-9 { - order: 9; - } - - .order-xl-10 { - order: 10; - } - - .order-xl-11 { - order: 11; - } - - .order-xl-12 { - order: 12; - } - - .offset-xl-0 { - margin-left: 0; - } - - .offset-xl-1 { - margin-left: 8.33333%; - } - - .offset-xl-2 { - margin-left: 16.66667%; - } - - .offset-xl-3 { - margin-left: 25%; - } - - .offset-xl-4 { - margin-left: 33.33333%; - } - - .offset-xl-5 { - margin-left: 41.66667%; - } - - .offset-xl-6 { - margin-left: 50%; - } - - .offset-xl-7 { - margin-left: 58.33333%; - } - - .offset-xl-8 { - margin-left: 66.66667%; - } - - .offset-xl-9 { - margin-left: 75%; - } - - .offset-xl-10 { - margin-left: 83.33333%; - } - - .offset-xl-11 { - margin-left: 91.66667%; - } -} - -/** - * Demo website styles - */ -body { - padding-top: 60px; -} - -@media (min-width: 576px) { - body { - padding-top: 80px; - } -} - -.anchor { - display: block; - position: relative; - top: -65px; - visibility: hidden; -} - -.main-logo { - width: 150px; - fill: #03a9f4; -} - -@media (max-width: 767px) { - .main-logo { - width: 100px; - } -} - -@media screen and (max-width: 550px) { - .example-image { - width: 50px; - } -} - -.examples { - width: 100%; -} - -.example1, -.example2 { - background-color: #eceff1; - display: inline-block; - max-width: 300px; - padding: 16px; - text-align: center; -} - -@media screen and (max-width: 550px) { - - .example1, - .example2 { - max-width: 100%; - } - - .example1 img, - .example2 img { - width: 100% !important; - } -} - -.language-js { - font-size: 14px; -} - -:not(pre)>code[class*="language-"], -pre[class*="language-"] { - background-color: #eceff1 !important; -} - -pre { - margin-bottom: 2em !important; - overflow-x: auto; -} - -.example-code { - max-width: 700px; -} - -.example-code pre[class*="language-"] { - font-size: 14px; - margin: 0 !important; -} - -.token.tag { - background-color: transparent; - border-radius: 0; - color: #905; - line-height: auto; - margin: 0; - padding: 0; -} - -.token.tag:before, -.token.tag:after { - display: none; -} - -.token.operator { - background: none !important; -} - -.header { - background-color: #fff; - z-index: 2000; -} - -@media (min-width: 576px) { - .header { - padding: 16px 0; - } -} - -.header.is-visible { - top: 0; -} - -.header-inner { - align-items: center; - display: flex; - justify-content: space-between; -} - -.header-logo { - align-items: center; - display: flex; - flex-shrink: 0; - position: relative; -} - -.header-logoImage { - margin-right: 8px; -} - -@media (min-width: 576px) { - .header-logoImage { - margin-right: 8px; - } -} - -.header-nav { - align-items: center; - display: flex; - margin: 0; - margin-right: -12px; - overflow-x: auto; - padding: 20px 16px 20px 8px; - white-space: nowrap; -} - -@media (min-width: 576px) { - .header-nav { - margin-right: 0; - padding: 0; - } -} - -.header-navItem { - margin: 0; - margin-right: 16px; -} - -.header-navItem:last-child { - margin-right: 0; -} - -@media (max-width: 767px) { - .hide-small { - display: none; - } } [v-cloak] { display: none; } -/** - * Reset - */ + + html, body, body, @@ -3082,9 +1529,7 @@ section { box-sizing: border-box; } -/** - * MAIN RULES - */ + *, *::after, *::before { @@ -3121,6 +1566,9 @@ li { margin-bottom: 0.5em; } +/* CUSTOM ELEMENTS */ + + .leaflet-popup-close-button { visibility: hidden; } @@ -3137,36 +1585,16 @@ li { } .list-group-item { - border: 1px solid rgba(0, 0, 0, 0.125); + border: 1px solid var(--darkdark); display: inline-block; position: relative; + cursor: pointer; + text-align: center; + padding: 0.5rem 0.8rem; } -.list-group-item div { - display: block; - padding: 0.5rem 1.5rem; -} - - - - -.custom-pin { - position: relative; - width: 32px; - height: 32px; - background-color: #ff5733; - border-radius: 50%; -} - -.custom-pin::after { - content: ""; - position: absolute; - bottom: -10px; - left: 50%; - transform: translateX(-50%); - border-left: 10px solid transparent; - border-right: 10px solid transparent; - background-color: 15px solid #ff5733; +.list-group-item:hover { + filter: brightness(85%); } .leaflet-control-attribution { @@ -3179,7 +1607,7 @@ li { .col-0 { flex: 0 0 0%; - max-width: 100%; + max-width: 0%; overflow: hidden; } @@ -3188,31 +1616,16 @@ li { transition: flex 0.5s ease-in-out, max-width 0.5s ease-in-out; } +.map-container { + min-width: 52px; + height: 100%; +} + .drawer-container { + height: 100%; right: 0; top: 0; -} - -.map-menu { - position: absolute; - top: 0; - right: 0; - display: flex; - z-index: 500; - flex-direction: column; - gap: 10px; - margin: 5px; -} - -.map-menu-item { - background-color: var(--darkdark); - padding: 5px; - border-radius: 50%; - cursor: pointer; -} - -.map-menu-item:hover { - filter: brightness(150%); + overflow: scroll; } .travel-path-icon { @@ -3220,6 +1633,52 @@ li { margin-top: -32px; } + +@-webkit-keyframes spinning { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0); + } + + 25% { + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + } + + 50% { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); + } + + 75% { + -webkit-transform: rotate(270deg); + transform: rotate(270deg); + } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@keyframes spinning { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0); + } + + 50% { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); + } + + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + .spinner { position: absolute; right: 0; @@ -3257,6 +1716,141 @@ li { animation-iteration-count: infinite } +.ml-auto { + margin-left: auto; +} + +.mr-auto { + margin-right: auto; +} + .input .mx-input { height: 40px; +} + +.h-100 { + height: 100%; +} + +.map-menu { + position: absolute; + display: flex; + z-index: 1100; + right: 0; + flex-direction: column; + gap: 10px; + margin: 5px; +} + +.map-menu-top { + top: 0; +} + +.map-menu-bottom { + bottom: 0; +} + +.map-menu-center { + top: 50%; +} + +.map-menu-item { + background-color: var(--darkdark); + padding: 5px; + border-radius: 50%; + cursor: pointer; +} + +.map-menu-item:hover { + filter: brightness(150%); +} + +.map-menu-sub { + display: flex; + flex-direction: row-reverse; + gap: 5px; +} + +.map-menu-item, +.map-menu-sub-item { + background-color: var(--darkdark); + padding: 5px; + border-radius: 50%; + cursor: pointer; + float: right; + width: 42px; + height: 42px; + align-content: center; + text-align: center; +} + +.vue2leaflet-map { + border-radius: var(--border-radius); +} + +.leaflet-popup-content { + margin: 10px 20px !important; + /* display: flex; + align-items: center; + justify-content: center; + width: auto !important; + max-width: 100%; */ +} + + +.leaflet-popup>.leaflet-popup-content-wrapper { + border-radius: var(--border-radius); + width: 350px; +} + +.leaflet-popup-button-group { + position: absolute; + top: 0; + right: 0; + display: flex; + flex-direction: row; + gap: 5px; + margin: 2px 6px; +} + +.leaflet-popup-button-group>a { + cursor: pointer; +} + +.leaflet-popup-button-group>a:hover { + cursor: pointer; + filter: brightness(150%); +} + +.leaflet-popup-button-group>a>i { + font-size: 1em; +} + +.query-result { + display: flex; + align-items: center; + border-radius: var(--border-radius); + cursor: pointer; +} + +.query-result:hover { + filter: brightness(85%); +} + +.scroll-content>div:first-child { + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); +} + +.scroll-content>div:nth-last-child(3) { + border-top-right-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); +} + +.scroll-content>div:last-child { + border-radius: var(--border-radius); +} + +.mx-datepicker { + width: 100% !important; } \ No newline at end of file diff --git a/src/client/api.ts b/src/client/api.ts index 8ac2945..a1dee6b 100644 --- a/src/client/api.ts +++ b/src/client/api.ts @@ -124,7 +124,7 @@ export const icon_type = (item: string | NominatimResult): string => { "place_of_worship", "attraction", "information", - "university", "theatre", "opera" + "university", "science_park", "theatre", "opera" ], mountain: ["peak", "viewpoint"], parking: ["parking"], diff --git a/src/client/old.js b/src/client/old.js index e845b5c..fb488a4 100644 --- a/src/client/old.js +++ b/src/client/old.js @@ -12,8 +12,6 @@ Vue.component("l-popup", window.Vue2Leaflet.LPopup); Vue.component("l-tooltip", window.Vue2Leaflet.LTooltip); Vue.component("l-polyline", window.Vue2Leaflet.LPolyline); Vue.component("l-control-scale", window.Vue2Leaflet.LControlScale); -// Vue.component("multiselect", window.VueMultiselect.default); -Vue.use(window.VueTextareaAutosize); var first_boot = true @@ -24,7 +22,7 @@ const app = new Vue({ journey: new journey_wrapper(window.location.pathname.split("/").pop() || String.gen_id(16)), map_override: { active: false, elements: [] }, query: { - type: "", res: [], load: false, sub: false, + type: "", res: [], load: false, sub: false, note: false, drawer: false, }, leg_nav: { scrollInterval: null, @@ -43,6 +41,7 @@ const app = new Vue({ start_journey: function () { window.location.href = "/" + this.journey.id }, compute_bb: function () { + if (!this.$refs.map) return undefined const bounds = this.$refs.map.mapObject.getBounds(); return [[bounds.getSouthWest().lng, bounds.getSouthWest().lat], [bounds.getNorthEast().lng, bounds.getNorthEast().lat]] @@ -64,7 +63,7 @@ const app = new Vue({ ` }, generate_icon: function (item, fcolor = "", styling = "", classes = "") { - return ``; + return ``; }, @@ -169,7 +168,10 @@ const app = new Vue({ drawer_click_item: function (item) { const tpe = this.query.type; this.query.res = []; + this.query.note = false; this.query.type = null; + this.query.drawer = item ? true : false; + setTimeout(() => this.$refs.map.mapObject.invalidateSize(), 500); this.query.sub = false; this.drawer_hover_item() if (item) { @@ -197,10 +199,19 @@ const app = new Vue({ }, search_enable: function (f) { + this.query.drawer = true; + setTimeout(() => this.$refs.map.mapObject.invalidateSize(), 500); + if (f == "notes") { + this.query.note = true; + this.query.type = null; + const query_in = document.getElementById('query_note') + setTimeout(() => query_in.focus(), 500); + return; + } + this.query.note = false; this.query.type = f; const query_in = document.getElementById('query_input') - - query_in.focus() + setTimeout(() => query_in.focus(), 500); this.search_active({ target: query_in }) }, @@ -219,9 +230,10 @@ const app = new Vue({ }, nav_mousemove(e) { const c = document.querySelector('.scroll-content') + const left = e.pageX - c.getBoundingClientRect().left; const newDir = - e.pageX < c.offsetWidth * 0.1 ? 'left' : - (e.pageX > c.offsetWidth * 0.9 ? 'right' : 'none') + 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) this.sideScroll(c, newDir, 25, 10); @@ -232,6 +244,13 @@ const app = new Vue({ this.leg_nav.scrollDir = 'none' this.leg_nav.scrollInterval = null }, + + refreshTextAreaHeight(event) { + console.log("AAA", event.target.scrollHeight, event.target) + event.target.style['height'] = 'auto'; + event.target.style['height'] = event.target.scrollHeight + 'px'; + event.target.style['max-height'] = "100%"; + }, }, created: function () { this.search_hotel = api.throttle(this.search_nominatim("hotel"), 1000) diff --git a/src/client/types/format.ts b/src/client/types/format.ts index 335f189..a0f1ff9 100644 --- a/src/client/types/format.ts +++ b/src/client/types/format.ts @@ -38,14 +38,8 @@ declare global { } } -const journey_template: journey = { - fmt_ver: 1, - title: "New Journey", - main: [], -} - const leg_template: leg = { - title: "New Leg", + title: "", day_title: [], map: { zoom: 2, center: { lng: 0, lat: 0 } }, travel: [], @@ -54,6 +48,12 @@ const leg_template: leg = { notes: "", date_range: null } +const journey_template: journey = { + fmt_ver: 1, + title: "New Journey", + main: [leg_template], +} + export { map, geoloc, leg, journey } export { journey_template, leg_template } \ No newline at end of file diff --git a/src/client/types/wrapper.ts b/src/client/types/wrapper.ts index db9923c..ade7429 100644 --- a/src/client/types/wrapper.ts +++ b/src/client/types/wrapper.ts @@ -29,6 +29,7 @@ class journey_wrapper { rm_leg(idx: number): void { this.data.main.splice(idx, 1); if (this.sel_leg == idx) this.leg_prev(); + if (this.sel_leg > this.data.main.length - 1) this.leg_next(); } tot_len(): number | "?" { if (this.leg_count() == 0) return 0; diff --git a/src/server/api_nominatim.ts b/src/server/api_nominatim.ts index 58a48f6..874b77c 100644 --- a/src/server/api_nominatim.ts +++ b/src/server/api_nominatim.ts @@ -15,6 +15,7 @@ export function nominatim_get_data(id: string, bb: string[][] | null = null): Pr const url = new URL("https://nominatim.openstreetmap.org/search"); url.searchParams.append('format', 'jsonv2') url.searchParams.append('q', id) + url.searchParams.append('limit', '20') if (bb) { url.searchParams.append('viewbox', `${bb[0][0]},${bb[0][1]},${bb[1][0]},${bb[1][1]}`) url.searchParams.append('bounded', `1`) diff --git a/template/home.pug b/template/home.pug index 9de3b59..2a3d520 100644 --- a/template/home.pug +++ b/template/home.pug @@ -2,76 +2,31 @@ doctype html include module/head.pug main#app - .container - section.mb-big + .bg-white.section.text-dark + .container.mb-big .text-center - img.main-logo.mb-medium( - src="/public/img/helcel.png", - alt="Helcel logo" - ) div h1.text-huge.text-withSubtitle Open Tourism Map h2.text-big.text-gray Collaborative Holiday Planner - p#js-header-waypoint.m-none - a.button.button--primary.button--mobileFull(href="#go") Get started - .bg-dark - .container - .row.text-center - .col-12.col-sm-3 - .section - img( - src="/public/img/lightweight.png", - alt="Lightweight", - width="118" - ) + .spacer + .section.bg-dark.text-white + .container-medium + .row + .col-8 + h2.text-big Your journey + p.text-gray + | Browse hotels, restaurants and attractions,.... br - h2.text-withSubtitle.text-big.text-white - | Lightweight - br - span.text-medium.text-gray - | Powered By - br - | Fastify & Sierra - .col-12.col-sm-4 - .section - img( - src="/public/img/customizable.png", - alt="Customizable", - width="118" - ) - br - h2.text-withSubtitle.text-big.text-white - | Customizable - br - span.text-medium.text-gray - | Many Templates - br - | to choose from - .col-12.col-sm-4 - .section - h2.text-withSubtitle.text-big.text-white - img( - src="/public/img/opensource.png", - alt="Open Source", - width="118" - ) - br - | - | FOSS - br - span.text-medium.text-gray :-) - #go.container-medium.section - h2.text-big Your journey - p - | Browse hotels, restaurants and attractions,.... - br - | - | Select and plan the varying elements of your journey - .aligner.aligner--contentEnd - .input - input#journey.id(v-model="journey.id", placeholder="ID", type="text") - button.button.button--primary.button--mobileFull( - v-on:click="start_journey" - ) Start the journey + | + | Select and plan the varying elements of your journey + .col-4 + .row.align + .input + input#journey.id(v-model="journey.id", placeholder="ID", type="text") + p + .row.align + button.button.button--primary.button--mobileFull( + v-on:click="start_journey" + ) Start the journey include module/foot.pug diff --git a/template/journey.pug b/template/journey.pug index 0ca849f..3b3e81b 100644 --- a/template/journey.pug +++ b/template/journey.pug @@ -3,6 +3,5 @@ doctype html include module/head.pug main#app(v-cloak) - include module/nav.pug - include module/journey.pug + include module/journey/main.pug include module/foot.pug diff --git a/template/module/foot.pug b/template/module/foot.pug index 8580614..6ea8792 100644 --- a/template/module/foot.pug +++ b/template/module/foot.pug @@ -2,21 +2,12 @@ script(src="https://unpkg.com/leaflet") script(src="https://unpkg.com/vue@2") script(src="https://unpkg.com/vue2-datepicker") -script(src="https://unpkg.com/vue-textarea-autosize") script(src="https://unpkg.com/vue2-leaflet") script(src="https://unpkg.com/sortablejs") script(src="https://unpkg.com/vuedraggable") script(src="/public/main.js", type="text/javascript", charset="utf-8") -footer.bg-dark - .container - .section.text-center.text-small - p.text-white - img(src="/public/img/helcel.png", alt="helcel logo", width="100") - br - br - | +footer.bg-dark.section + .container.text-center.text-small.text-white | Built with   ❤   by Helcel br span.text-small.text-gray v0.0.1 - p.text-gray - a(href="https://git.helcel.net") Helcel Git diff --git a/template/module/journey.pug b/template/module/journey.pug deleted file mode 100644 index ed370b3..0000000 --- a/template/module/journey.pug +++ /dev/null @@ -1,3 +0,0 @@ -.journey - include journey/leg.pug -include journey/impexp.pug \ No newline at end of file diff --git a/template/module/journey/leg.pug b/template/module/journey/leg.pug deleted file mode 100644 index 58eb20f..0000000 --- a/template/module/journey/leg.pug +++ /dev/null @@ -1,11 +0,0 @@ -include leg/nav.pug -.bg-dark.text-white(v-if="journey && journey.leg_get()") - .container.section - include leg/top.pug - .row(style="aspect-ratio:1.25;") - .map-container(:class="{ 'col-9': query.type, 'col-12': !query.type }" ) - include map.pug - .drawer-container(:class="{ 'col-3': query.type, 'col-0': !query.type }") - include leg/drawer.pug - - include leg/old_cfg.pug \ No newline at end of file diff --git a/template/module/journey/leg/drawer-notes.pug b/template/module/journey/leg/drawer-notes.pug new file mode 100644 index 0000000..0f4a1c7 --- /dev/null +++ b/template/module/journey/leg/drawer-notes.pug @@ -0,0 +1,8 @@ +.col-12.input.text-dark() + textarea.text-small#query_note( + v-model="journey.leg_get().notes" + @input="refreshTextAreaHeight" + @focus="refreshTextAreaHeight" + rows="1" + placeholder="...", + ) \ No newline at end of file diff --git a/template/module/journey/leg/drawer.pug b/template/module/journey/leg/drawer.pug index 9deaa70..cc30f3e 100644 --- a/template/module/journey/leg/drawer.pug +++ b/template/module/journey/leg/drawer.pug @@ -1,16 +1,18 @@ -.input.text-dark(style="width: 100%") + +.col-12.input.text-dark input#query_input( type="search" @input="search_active" + @focus="search_active" placeholder="Search ... " style="width:85%;" + :disabled="query.note" ) .spinner(v-if="query.load") -div(style="width:100%" - v-if="['hotel', 'restaurant', 'place','other', 'travel'].indexOf(query.type)>=0") + +div(v-if="['hotel', 'restaurant', 'place','other', 'travel'].indexOf(query.type)>=0") template(v-for="(item, idx) in query.res" ) - .col-12.bg-white.text-dark( - style="display:flex;align-items:center; border-radius:3px;" + .query-result.col-12.bg-white.text-dark( :key="'q'+idx" @mouseover="drawer_hover_item(item)" @mouseleave="drawer_hover_item()" @@ -20,20 +22,17 @@ div(style="width:100%" | {{ item.name }} .bg-dark.divider( :key="'qdiv'+idx" style="height:1px" ) - .col-12.bg-white.text-dark( - v-if="query.load==false && query.res.length==0" - style="display:flex;align-items:center; border-radius:3px;" ) + .query-result.col-12.bg-white.text-dark( + v-if="query.load==false && query.res.length==0" ) div( v-html="generate_icon('star', 'var(--dark)')") .col-10() | Add custom .col-12.text-white.text-center( ) {{query.load? `Loading ...` : `Found ${query.res.length} results`}} -div(style="width:100%" - v-else-if="['flight'].indexOf(query.type)>=0") +div(v-else-if="['flight'].indexOf(query.type)>=0") template(v-for="(item, idx) in query.res" ) - .col-12.bg-white.text-dark( - style="display:flex;align-items:center; border-radius:3px;" + .query-result.col-12.bg-white.text-dark( :key="'q'+idx" @mouseover="drawer_hover_item(item)" @mouseleave="drawer_hover_item()" @@ -41,10 +40,9 @@ div(style="width:100%" div( v-html="generate_icon('plane', 'var(--dark)')") .col-10() | {{ item.from }} => {{item.to}} - .bg-dark.divider( + bg-dark.divider( :key="'qdiv'+idx" style="height:1px" ) -div(style="width:100%" v-else) +div(v-else) template() - .col-12.bg-white.text-dark( - style="display:flex;align-items:center; border-radius:3px;") - | Unsuppored Query type {{query.type}} \ No newline at end of file + .query-result.col-12.bg-white.text-dark() + | Unsuppored Query type {{query.type}} diff --git a/template/module/journey/leg/nav.pug b/template/module/journey/leg/nav.pug index 94802f3..736c95e 100644 --- a/template/module/journey/leg/nav.pug +++ b/template/module/journey/leg/nav.pug @@ -1,23 +1,34 @@ -.scroll-handler( +.scroll-handler.row( @mouseleave="nav_mouseleave" @mousemove="nav_mousemove") - draggable.scroll-content.list-group.bg-dark( - tag="div", - :list="journey.data.main", - handle=".handle" - ) - .list-group-item.handle( - v-for="(element, idx) in journey.data.main", - :key="idx", - @click="journey.leg_sel(idx)", - :class="journey.sel_leg == idx ? 'bg-primary' : 'bg-white'" - ) - .text {{ element.title }} - i.fa.fa-times.close.fright( - style="top: 2px; right: 2px; position: absolute", - @click="journey.rm_leg(idx)" - ) - .list-group-item.bg-white(@click="journey.add_leg()") - .text Add Leg - i.fa.fa-plus.add(style="top: 12px; right: 5px; position: absolute") + .col-3.col-sm-2.col-md-1 + .list-group.text-dark.h-100 + .fleft.list-group-item.bg-white.text-small.rounded.h-100(v-on:click.prevent="journey.leg_prev()") + i.fas.fa-angle-left + .col-6.col-sm-8.col-md-10 + draggable.scroll-content.list-group.bg-dark( + tag="div", + :list="journey.data.main", + handle=".handle" + ) + .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' : 'bg-white'" + ) + .text {{ element.title || "Leg "+idx}} + i.fa.fa-times.close.fright( + style="top: 2px; right: 2px; position: absolute", + @click="journey.rm_leg(idx)" + ) + .list-group-item.bg-dark + .list-group-item.bg-white.text-dark(@click="journey.add_leg()") + div + i.fa.fa-plus.add() + + .col-3.col-sm-2.col-md-1 + .list-group.text-dark.h-100 + a.fright.list-group-item.bg-white.text-small.rounded.h-100(v-on:click.prevent="journey.leg_next()") + i.fas.fa-angle-right \ No newline at end of file diff --git a/template/module/journey/leg/old_cfg.pug b/template/module/journey/leg/old_cfg.pug deleted file mode 100644 index 06b75f4..0000000 --- a/template/module/journey/leg/old_cfg.pug +++ /dev/null @@ -1,12 +0,0 @@ -div - div - .row.text-center - div - label Notes - .input.text-dark(style="width: 100%") - textarea-autosize.text-small( - v-model="journey.leg_get().notes", - placeholder="Notes", - :min-height="30", - :max-height="350" - ) diff --git a/template/module/journey/leg/top.pug b/template/module/journey/leg/top.pug index a42a692..bd63bec 100644 --- a/template/module/journey/leg/top.pug +++ b/template/module/journey/leg/top.pug @@ -1,15 +1,17 @@ -.row.text-center - .col-sm-2 - .input - input(v-model="journey.leg_get().title") - .col-sm-2 +.row.text-center.align + .col-5.col-sm-4.col-md-2 .input input( - placeholder="Day title", + placeholder="Leg" + v-model="journey.leg_get().title") + + .col-5.col-sm-4.col-md-2.mr-auto + .input + input( + placeholder="Day" v-model="journey.leg_get().day_title[journey.sel_day]" ) - - .col-sm-4 + .col-8.col-sm-6.col-md-4 .input //- label Date Range ({{ journey.leg_len() }}) date-picker( @@ -20,10 +22,15 @@ placeholder="Date Range", v-on:change="journey.date_update(journey.sel_leg)" ) - .col-sm-2 - .right.col-sm-2 + .col-4.col-sm-4.col-md-3.ml-auto .input input( disabled="", :value="journey.date_sel() + ' (' + journey.sel_day + ')'" - ) \ No newline at end of file + ) + //- .col-6.list-group-item.align.center.bg-white(style="padding: 0.5rem 0;") + //- i.fas.fa-angle-double-right(v-on:click.prevent="journey.day_next()") + .col-sm-1.text-small + + //- a(href="#prev", v-on:click.prevent="journey.day_prev()") + i.fas.fa-angle-left \ No newline at end of file diff --git a/template/module/journey/main.pug b/template/module/journey/main.pug new file mode 100644 index 0000000..fb8d244 --- /dev/null +++ b/template/module/journey/main.pug @@ -0,0 +1,31 @@ +.row.fleft(style="position:absolute;right:0;") + .col-1 + a(:href="'/short/' + journey.id") + i.fas.fa-file-contract + .col-1 + a(:href="'/view/' + journey.id") + i.fas.fa-camera + .col-1 + a(href="#", v-on:click.prevent="first_step") + i.fas.fa-tools + + +.bg-dark.text-white(v-if="journey && journey.leg_get()") + .container + .row.align(style="padding-top:45px;") + .col-6.col-sm-4.col-md-3.input.text-big + 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 + .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 + .row.drawer-container(:class="{ 'col-10 col-sm-7 col-md-4': query.type, 'col-10 col-sm-7 col-md-6': query.note, 'col-0': (!query.type && !query.note) }") + .drawer-container(:class="{ 'col-12 ': query.type, 'col-0': !query.type }") + include leg/drawer.pug + .drawer-container(:class="{ 'col-12': query.note, 'col-0': !query.note }") + include leg/drawer-notes.pug + +//- include impexp.pug \ No newline at end of file diff --git a/template/module/journey/map.pug b/template/module/journey/map.pug index db88834..a2e17ad 100644 --- a/template/module/journey/map.pug +++ b/template/module/journey/map.pug @@ -3,12 +3,13 @@ l-map( :center.sync="journey.leg_get().map.center", style="height:100%" no-blocking-animations=true + ref="map" ) l-tile-layer( url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", attribution="© OpenStreetMap contributors" ) - l-control-scale(position="bottomright", :imperial="false", :metric="true") + l-control-scale(position="bottomleft", :imperial="false", :metric="true") include map/override.pug include map/hotel.pug diff --git a/template/module/journey/map/mixin-marker.pug b/template/module/journey/map/mixin-marker.pug index cc4ca6b..9dc67e4 100644 --- a/template/module/journey/map/mixin-marker.pug +++ b/template/module/journey/map/mixin-marker.pug @@ -15,27 +15,23 @@ mixin map_marker(place, color_sel_c, color_sel_o, color_else) v-else v-html="generate_marker(place, \""+color_else+"\")" ) - l-popup() + l-popup( + :options="{maxWidth:400, minWidth:300}") h1.row.text-medium.text-center {{ place.sname }} span.row.text-small.text-gray {{ place.display_name }} span(v-if="edit_active") - .row.input(style="margin-bottom:0") - textarea-autosize.col-12.col-sm-12.text-small( - placeholder="Notes", + .row.input() + textarea.col-12.col-sm-12.text-small( + placeholder="", v-model="place.notes", - :min-height="30", - :max-height="350" ) - a.leaflet-popup-close-button.text-gray( - style="right: 4px; visibility: visible", - href="#rm", - v-on:click.prevent="place_delete(\""+place+"\",index)" - v-html="generate_icon('trash', 'NA')" - ) - a.leaflet-popup-close-button.text-gray( - style="right: 20px; visibility: visible", - href="#toggle_day", + .leaflet-popup-button-group(v-if="edit_active") + a.text-gray( v-on:click.prevent="place.step = ((place.step==journey.sel_day)?-1:journey.sel_day)" v-html="generate_icon(((place.step==journey.sel_day)?'calendar-xmark':'calendar-plus'), 'NA')" ) + a.text-gray( + v-on:click.prevent="place_delete(\""+place+"\",index)" + v-html="generate_icon('trash', 'NA')" + ) span.row.text-small.text-dark(v-else) {{ place.notes }} diff --git a/template/module/journey/map/right_menu.pug b/template/module/journey/map/right_menu.pug index b61174e..bd5990a 100644 --- a/template/module/journey/map/right_menu.pug +++ b/template/module/journey/map/right_menu.pug @@ -1,5 +1,5 @@ -.map-menu - div( v-if="query.type" @click="drawer_click_item()" ) +.map-menu.map-menu-top + div(v-if="query.type" @click="drawer_click_item()" ) .map-menu-item(v-html="generate_icon('close')") div(v-if="!query.type" @click="search_enable('hotel')") .map-menu-item( v-html="generate_icon('bed')") @@ -14,24 +14,8 @@ .map-menu-item(v-if="query.sub" @click="search_enable('car')" v-html="generate_icon('car')") .map-menu-item(v-if="query.sub" @click="search_enable('other')" v-html="generate_icon('person-biking')") - -//- .map-menu-sub { -//- display: flex; -//- flex-direction: row-reverse; -//- gap: 5px; -//- } -//- .map-menu-item, -//- .map-menu-sub-item { -//- background-color: var(--darkdark); -//- padding: 5px; -//- border-radius: 50%; -//- cursor: pointer; -//- float: right; -//- height: fit-content; -//- } -//- .vue2leaflet-map { -//- border-radius: 3px; -//- } -//- .leaflet-popup-content { -//- margin: 10px 20px; -//- } \ No newline at end of file +.map-menu.map-menu-center + div(v-if="query.note" @click="drawer_click_item()" ) + .map-menu-item(v-html="generate_icon('close')") + div(v-if="!query.note" @click="search_enable('notes')") + .map-menu-item( v-html="generate_icon('pencil')") \ No newline at end of file diff --git a/template/module/journey/map/travel.pug b/template/module/journey/map/travel.pug index dee910c..d7e0799 100644 --- a/template/module/journey/map/travel.pug +++ b/template/module/journey/map/travel.pug @@ -1,22 +1,22 @@ mixin flight_popup() - l-popup() - h1.row.text-medium.text-center {{ travel.id.toUpperCase() }} + l-popup( + :options="{maxWidth:400, minWidth:300}" + ) + h1.row.text-medium.text-center.text-uppercase {{ travel.id }} span.row.text-small.text-gray {{ travel.from }} - {{travel.to}} span(v-if="edit_active") .row.input(style="margin-bottom:0") - textarea-autosize.col-12.col-sm-12.text-small( - placeholder="Notes", + textarea.col-12.col-sm-12.text-small( + placeholder="", v-model="travel.notes", - :min-height="30", - :max-height="350" ) - a.leaflet-popup-close-button.text-gray( - style="right: 4px; visibility: visible", - href="#rm", - v-on:click.prevent="place_delete('flight',idx)" - v-html="generate_icon('trash', 'NA')" - ) span.row.text-small.text-dark(v-else) {{ travel.notes }} + span(v-if="edit_active") + .leaflet-popup-button-group(v-if="edit_active") + a.text-gray( + v-on:click.prevent="place_delete('flight',idx)" + v-html="generate_icon('trash', 'NA')" + ) div(v-for= "(travel, idx) in journey.leg_get().travel") l-polyline(:lat-lngs="travel.path" :color="travel.color || 'gray'") diff --git a/template/module/nav.pug b/template/module/nav.pug deleted file mode 100644 index 96eb3f7..0000000 --- a/template/module/nav.pug +++ /dev/null @@ -1,38 +0,0 @@ -header.header - .header-inner.container - a.header-logo.text-dark(href="/") - img.header-logoImage( - src="/public/img/helcel.png", - alt="Helcel logo", - width="40" - ) - span.hide-small OTM - .input.input-invis.row - input.col-6.small(v-model="journey.data.name", type="text") - input.col-6.small( - disabled, - type="text", - :placeholder="journey.date_tot() + ' (' + journey.tot_len() + ')'" - ) - .row.header-nav.text-big(style="margin-bottom: 0") - .col-sm-2 - a(:href="'/short/' + journey.id") - i.fas.fa-file-contract - .col-sm-2 - a(:href="'/view/' + journey.id") - i.fas.fa-camera - .col-sm-2 - a(href="#main", v-on:click.prevent="first_step") - i.fas.fa-tools - .col-sm-1.text-small - a(href="#prevprev", v-on:click.prevent="journey.leg_prev()") - i.fas.fa-angle-double-left - .col-sm-1 - a(href="#prev", v-on:click.prevent="journey.day_prev()") - i.fas.fa-angle-left - .col-sm-1 - a(href="#next", v-on:click.prevent="journey.day_next()") - i.fas.fa-angle-right - .col-sm-1.text-small - a(href="#nextnext", v-on:click.prevent="journey.leg_next()") - i.fas.fa-angle-double-right diff --git a/template/module/view/nav.pug b/template/module/view/nav.pug index ab88fb2..3ab7e57 100644 --- a/template/module/view/nav.pug +++ b/template/module/view/nav.pug @@ -1,12 +1,5 @@ header.header .header-inner.container - a.header-logo.text-dark(href="/") - img.header-logoImage( - src="/public/img/helcel.png", - alt="Helcel logo", - width="40" - ) - span.hide-small HOTM .input.input-invis input.small(:value="journey.data.name", type="text", disabled="") .row.header-nav.text-big(style="margin-bottom: 0") diff --git a/template/module/view/short_leg.pug b/template/module/view/short_leg.pug index bc005b0..c767330 100644 --- a/template/module/view/short_leg.pug +++ b/template/module/view/short_leg.pug @@ -16,28 +16,22 @@ input(disabled="", :value="item.map((v) => v.id).join(', ')") .row.text-center .input.col-sm-8(v-if="item.places && item.places.restaurants") - textarea-autosize.text-small( + .text-small( placeholder="No Restaurants", :value="item.places.restaurants.map((v) => v.sname + (v.notes ? '(' + v.notes + ')' : '')).join(', ')", - :min-height="30", - :max-height="350", disabled="" ) .row.text-center .input.col-sm-8(v-if="item.places && item.places.activities") - textarea-autosize.text-small( + .text-small( placeholder="No Activities", :value="item.places.activities.map((v) => v.sname + (v.notes ? '(' + v.notes + ')' : '')).join(', ')", - :min-height="30", - :max-height="350", disabled="" ) .row.text-center .input.col-sm-8(v-if="item.notes") - textarea-autosize.text-small( + .text-small( placeholder="No Notes", :value="item.notes", - :min-height="30", - :max-height="350", disabled="" ) diff --git a/template/view.pug b/template/view.pug index 96c486d..ff1fff4 100644 --- a/template/view.pug +++ b/template/view.pug @@ -1,6 +1,6 @@ doctype html include module/head.pug main#app(v-cloak) - div(v-if="journey.data.main[journey.sel_leg] != undefined") + div(v-if="journey.leg_get()") include module/view/view_day.pug include module/foot.pug