diff --git a/src/App.vue b/src/App.vue index 1a76e35..9429471 100644 --- a/src/App.vue +++ b/src/App.vue @@ -44,7 +44,7 @@ export default {

Où atterrir

- + @@ -58,7 +58,7 @@ export default { :opened="concernement.opened" /> -
+
diff --git a/src/api/gql/concernement.fragment.gql b/src/api/gql/concernement.fragment.gql index 7b98431..b189b15 100644 --- a/src/api/gql/concernement.fragment.gql +++ b/src/api/gql/concernement.fragment.gql @@ -1,6 +1,7 @@ fragment ConcernementFields on Concernement { id - texte + description + caillou title recit { file { diff --git a/src/assets/common.scss b/src/assets/common.scss index bd0aef6..b52607d 100644 --- a/src/assets/common.scss +++ b/src/assets/common.scss @@ -1,6 +1,8 @@ +@use "sass:math"; + $pad_btn: 0.5em; @mixin btn() { - padding: $pad_btn/2 $pad_btn; + padding: math.div($pad_btn,2) $pad_btn; border-radius: 5px; background-color: $btns_back; cursor: pointer; diff --git a/src/assets/layout.scss b/src/assets/layout.scss index ab1b7e2..9c5e88f 100644 --- a/src/assets/layout.scss +++ b/src/assets/layout.scss @@ -85,14 +85,16 @@ html,body{ } } - >.row{ - @include layout-row(); - } + // >.row{ + // @include layout-row(); + // } #content{ + box-sizing: border-box; position: absolute; top:0; right:0; height:100vh; + padding: 0.5rem; } } diff --git a/src/assets/main.scss b/src/assets/main.scss index c11531a..00dd139 100644 --- a/src/assets/main.scss +++ b/src/assets/main.scss @@ -69,6 +69,12 @@ body{ } #content{ - + section.concernement{ + background-color: rgba(255, 255, 255, 0.9); + box-sizing: border-box; + width:30em; + height: 100%; + padding: 1rem; + } } } diff --git a/src/components/MapConcernements.vue b/src/components/MapConcernements.vue index 5cf2e3f..6a70936 100644 --- a/src/components/MapConcernements.vue +++ b/src/components/MapConcernements.vue @@ -79,13 +79,13 @@ export default { let canvas_h = this.canvasMap.canvas.height = this.canvasMap.canvas.parentElement.clientHeight; // MATTER - let wall_w = 5; + let wall_w = 100; Matter.Composite.add(this.world, [ // walls - Matter.Bodies.rectangle(canvas_w/2, 0, canvas_w, wall_w, { isStatic: true }), // top - Matter.Bodies.rectangle(canvas_w/2, canvas_h-wall_w, canvas_w, wall_w, { isStatic: true }), // bottom - Matter.Bodies.rectangle(0, canvas_h/2, wall_w, canvas_h, { isStatic: true }), // left - Matter.Bodies.rectangle(canvas_w-wall_w, canvas_h/2, wall_w, canvas_h, { isStatic: true }) // right + Matter.Bodies.rectangle(canvas_w/2, -wall_w/2, canvas_w, wall_w, { isStatic: true }), // top + Matter.Bodies.rectangle(canvas_w/2, canvas_h+wall_w/2, canvas_w, wall_w, { isStatic: true }), // bottom + Matter.Bodies.rectangle(-wall_w/2, canvas_h/2, wall_w, canvas_h, { isStatic: true }), // left + Matter.Bodies.rectangle(canvas_w+wall_w/2, canvas_h/2, wall_w, canvas_h, { isStatic: true }) // right ]); // add mouse control diff --git a/src/main.js b/src/main.js index 7528999..737a330 100644 --- a/src/main.js +++ b/src/main.js @@ -12,6 +12,8 @@ const app = createApp(App) // https://vuejs.org/guide/components/provide-inject.html#provide app.config.unwrapInjectedRef = true; -app.use(createPinia()) +const pinia = createPinia() +pinia.use( ({store}) => { store.router = router } ) +app.use(pinia) app.use(router) app.mount('#app') diff --git a/src/router/index.js b/src/router/index.js index 8a0564c..c1fa7bf 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,6 +1,7 @@ import { createRouter, createWebHistory } from 'vue-router' import HomeView from '@views/Home.vue' -import StaticView from '@views/Static.vue' +// import StaticView from '@views/Static.vue' +// import ConcernementView from '@views/Concernement.vue' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), @@ -18,6 +19,16 @@ const router = createRouter({ // which is lazy-loaded when the route is visited. component: () => import('../views/Static.vue'), props: true + }, + { + path: '/concernement/:id', + name: 'concernement', + // component: ConcernementView, + // route level code-splitting + // this generates a separate chunk (About.[hash].js) for this route + // which is lazy-loaded when the route is visited. + component: () => import('../views/Concernement.vue'), + props: true } ] }) diff --git a/src/stores/concernements.js b/src/stores/concernements.js index a2c7a26..65ff139 100644 --- a/src/stores/concernements.js +++ b/src/stores/concernements.js @@ -2,6 +2,8 @@ import { defineStore } from 'pinia' import { print } from 'graphql/language/printer' import gql from 'graphql-tag' + + // import REST from '@api/rest-axios' import GQL from '@api/graphql-axios' // import JSONAPI from '@api/json-axios' @@ -47,6 +49,10 @@ export const ConcernementsStore = defineStore({ openCloseConcernement (id, state) { // console.log('openCloseConcernement', id, state); this.concernementsByID[id].opened = state; + if (state) { + this.opened = this.concernementsByID[id]; + this.router.push({name: 'concernement', params: {id: id}}); + } } } }) \ No newline at end of file diff --git a/src/views/Concernement.vue b/src/views/Concernement.vue new file mode 100644 index 0000000..55dda52 --- /dev/null +++ b/src/views/Concernement.vue @@ -0,0 +1,40 @@ + + + + + diff --git a/vite.config.js b/vite.config.js index 0bc7628..1018248 100644 --- a/vite.config.js +++ b/vite.config.js @@ -10,6 +10,7 @@ export default defineConfig({ resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)), + '@stores': fileURLToPath(new URL('./src/stores', import.meta.url)), '@components': fileURLToPath(new URL('./src/components', import.meta.url)), '@views': fileURLToPath(new URL('./src/views', import.meta.url)), '@api': fileURLToPath(new URL('./src/api', import.meta.url))