edit: ajout d'une interface type boite de récéption pour poster des annonces régulières + structure système like et particpation (à reprendre)
This commit is contained in:
@@ -157,12 +157,6 @@ a{
|
||||
background-color: var(--light-color);
|
||||
}
|
||||
|
||||
.icon{
|
||||
height:16.1px;
|
||||
width:auto;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.windowContent{
|
||||
height:77%;
|
||||
width:100%;
|
||||
@@ -171,3 +165,9 @@ a{
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.icon{
|
||||
height:16.1px;
|
||||
width:auto;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
262
v1-com-officielle/package-lock.json
generated
262
v1-com-officielle/package-lock.json
generated
@@ -9,7 +9,8 @@
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"vite-svg-loader": "^5.1.1",
|
||||
"vue": "^3.5.25"
|
||||
"vue": "^3.5.25",
|
||||
"vue3-moveable": "^0.28.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^6.0.2",
|
||||
@@ -62,6 +63,48 @@
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@cfcs/core": {
|
||||
"version": "0.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@cfcs/core/-/core-0.0.6.tgz",
|
||||
"integrity": "sha512-FxfJMwoLB8MEMConeXUCqtMGqxdtePQxRBOiGip9ULcYYam3WfCgoY6xdnMaSkYvRvmosp5iuG+TiPofm65+Pw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@egjs/component": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@daybrush/utils": {
|
||||
"version": "1.13.0",
|
||||
"resolved": "https://registry.npmjs.org/@daybrush/utils/-/utils-1.13.0.tgz",
|
||||
"integrity": "sha512-ALK12C6SQNNHw1enXK+UO8bdyQ+jaWNQ1Af7Z3FNxeAwjYhQT7do+TRE4RASAJ3ObaS2+TJ7TXR3oz2Gzbw0PQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@egjs/agent": {
|
||||
"version": "2.4.4",
|
||||
"resolved": "https://registry.npmjs.org/@egjs/agent/-/agent-2.4.4.tgz",
|
||||
"integrity": "sha512-cvAPSlUILhBBOakn2krdPnOGv5hAZq92f1YHxYcfu0p7uarix2C6Ia3AVizpS1SGRZGiEkIS5E+IVTLg1I2Iog==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@egjs/children-differ": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@egjs/children-differ/-/children-differ-1.0.1.tgz",
|
||||
"integrity": "sha512-DRvyqMf+CPCOzAopQKHtW+X8iN6Hy6SFol+/7zCUiE5y4P/OB8JP8FtU4NxtZwtafvSL4faD5KoQYPj3JHzPFQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@egjs/list-differ": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@egjs/component": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@egjs/component/-/component-3.0.5.tgz",
|
||||
"integrity": "sha512-cLcGizTrrUNA2EYE3MBmEDt2tQv1joVP1Q3oDisZ5nw0MZDx2kcgEXM+/kZpfa/PAkFvYVhRUZwytIQWoN3V/w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@egjs/list-differ": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@egjs/list-differ/-/list-differ-1.0.1.tgz",
|
||||
"integrity": "sha512-OTFTDQcWS+1ZREOdCWuk5hCBgYO4OsD30lXcOCyVOAjXMhgL5rBRDnt/otb6Nz8CzU0L/igdcaQBDLWc4t9gvg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@esbuild/aix-ppc64": {
|
||||
"version": "0.27.4",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.4.tgz",
|
||||
@@ -867,6 +910,34 @@
|
||||
"win32"
|
||||
]
|
||||
},
|
||||
"node_modules/@scena/dragscroll": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@scena/dragscroll/-/dragscroll-1.4.0.tgz",
|
||||
"integrity": "sha512-3O8daaZD9VXA9CP3dra6xcgt/qrm0mg0xJCwiX6druCteQ9FFsXffkF8PrqxY4Z4VJ58fFKEa0RlKqbsi/XnRA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@daybrush/utils": "^1.6.0",
|
||||
"@scena/event-emitter": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@scena/event-emitter": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@scena/event-emitter/-/event-emitter-1.0.5.tgz",
|
||||
"integrity": "sha512-AzY4OTb0+7ynefmWFQ6hxDdk0CySAq/D4efljfhtRHCOP7MBF9zUfhKG3TJiroVjASqVgkRJFdenS8ArZo6Olg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@daybrush/utils": "^1.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@scena/matrix": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@scena/matrix/-/matrix-1.1.1.tgz",
|
||||
"integrity": "sha512-JVKBhN0tm2Srl+Yt+Ywqu0oLgLcdemDQlD1OxmN9jaCTwaFPZ7tY8n6dhVgMEaR9qcR7r+kAlMXnSfNyYdE+Vg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@daybrush/utils": "^1.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/estree": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
|
||||
@@ -1006,6 +1077,52 @@
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/croact": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/croact/-/croact-1.0.4.tgz",
|
||||
"integrity": "sha512-9GhvyzTY/IVUrMQ2iz/mzgZ8+NcjczmIo/t4FkC1CU0CEcau6v6VsEih4jkTa4ZmRgYTF0qXEZLObCzdDFplpw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@daybrush/utils": "^1.13.0",
|
||||
"@egjs/list-differ": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/croact-css-styled": {
|
||||
"version": "1.1.9",
|
||||
"resolved": "https://registry.npmjs.org/croact-css-styled/-/croact-css-styled-1.1.9.tgz",
|
||||
"integrity": "sha512-G7yvRiVJ3Eoj0ov2h2xR4312hpOzATay2dGS9clK8yJQothjH1sBXIyvOeRP5wBKD9mPcKcoUXPCPsl0tQog4w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@daybrush/utils": "^1.13.0",
|
||||
"css-styled": "~1.0.8",
|
||||
"framework-utils": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/croact-moveable": {
|
||||
"version": "0.9.0",
|
||||
"resolved": "https://registry.npmjs.org/croact-moveable/-/croact-moveable-0.9.0.tgz",
|
||||
"integrity": "sha512-fc3bieV6CdqqZFtzsSLi9KmvUMFW3oakUfhPCls1BxKjOfUfn8rktteGED2341A/Qghy8tI3Hm6SdocIc68IKg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@daybrush/utils": "^1.13.0",
|
||||
"@egjs/agent": "^2.2.1",
|
||||
"@egjs/children-differ": "^1.0.1",
|
||||
"@egjs/list-differ": "^1.0.0",
|
||||
"@scena/dragscroll": "^1.4.0",
|
||||
"@scena/event-emitter": "^1.0.5",
|
||||
"@scena/matrix": "^1.1.1",
|
||||
"croact-css-styled": "^1.1.9",
|
||||
"css-to-mat": "^1.1.1",
|
||||
"framework-utils": "^1.1.0",
|
||||
"gesto": "^1.19.3",
|
||||
"overlap-area": "^1.1.0",
|
||||
"react-css-styled": "^1.1.9",
|
||||
"react-moveable": "~0.56.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"croact": "^1.0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/css-select": {
|
||||
"version": "5.2.2",
|
||||
"resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
|
||||
@@ -1022,6 +1139,25 @@
|
||||
"url": "https://github.com/sponsors/fb55"
|
||||
}
|
||||
},
|
||||
"node_modules/css-styled": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/css-styled/-/css-styled-1.0.8.tgz",
|
||||
"integrity": "sha512-tCpP7kLRI8dI95rCh3Syl7I+v7PP+2JYOzWkl0bUEoSbJM+u8ITbutjlQVf0NC2/g4ULROJPi16sfwDIO8/84g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@daybrush/utils": "^1.13.0"
|
||||
}
|
||||
},
|
||||
"node_modules/css-to-mat": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/css-to-mat/-/css-to-mat-1.1.1.tgz",
|
||||
"integrity": "sha512-kvpxFYZb27jRd2vium35G7q5XZ2WJ9rWjDUMNT36M3Hc41qCrLXFM5iEKMGXcrPsKfXEN+8l/riB4QzwwwiEyQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@daybrush/utils": "^1.13.0",
|
||||
"@scena/matrix": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/css-tree": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
|
||||
@@ -1248,6 +1384,12 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/framework-utils": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/framework-utils/-/framework-utils-1.1.0.tgz",
|
||||
"integrity": "sha512-KAfqli5PwpFJ8o3psRNs8svpMGyCSAe8nmGcjQ0zZBWN2H6dZDnq+ABp3N3hdUmFeMrLtjOCTXD4yplUJIWceg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/fsevents": {
|
||||
"version": "2.3.3",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
||||
@@ -1263,6 +1405,34 @@
|
||||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/gesto": {
|
||||
"version": "1.19.4",
|
||||
"resolved": "https://registry.npmjs.org/gesto/-/gesto-1.19.4.tgz",
|
||||
"integrity": "sha512-hfr/0dWwh0Bnbb88s3QVJd1ZRJeOWcgHPPwmiH6NnafDYvhTsxg+SLYu+q/oPNh9JS3V+nlr6fNs8kvPAtcRDQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@daybrush/utils": "^1.13.0",
|
||||
"@scena/event-emitter": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/keycode": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.1.tgz",
|
||||
"integrity": "sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/keycon": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/keycon/-/keycon-1.4.0.tgz",
|
||||
"integrity": "sha512-p1NAIxiRMH3jYfTeXRs2uWbVJ1WpEjpi8ktzUyBJsX7/wn2qu2VRXktneBLNtKNxJmlUYxRi9gOJt1DuthXR7A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@cfcs/core": "^0.0.6",
|
||||
"@daybrush/utils": "^1.7.1",
|
||||
"@scena/event-emitter": "^1.0.2",
|
||||
"keycode": "^2.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/magic-string": {
|
||||
"version": "0.30.21",
|
||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
|
||||
@@ -1278,6 +1448,19 @@
|
||||
"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
|
||||
"license": "CC0-1.0"
|
||||
},
|
||||
"node_modules/moveable": {
|
||||
"version": "0.53.0",
|
||||
"resolved": "https://registry.npmjs.org/moveable/-/moveable-0.53.0.tgz",
|
||||
"integrity": "sha512-71jS9zIoQzMhnNvduhg4tUEdm23+fO/40FN7muVMbZvVwbTku2MIxxLhnU4qFvxI4oVxn75l79SbtgjuA+s7Pw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@daybrush/utils": "^1.13.0",
|
||||
"@scena/event-emitter": "^1.0.5",
|
||||
"croact": "^1.0.4",
|
||||
"croact-moveable": "~0.9.0",
|
||||
"react-moveable": "~0.56.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ms": {
|
||||
"version": "2.1.3",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||
@@ -1314,6 +1497,15 @@
|
||||
"url": "https://github.com/fb55/nth-check?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/overlap-area": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/overlap-area/-/overlap-area-1.1.0.tgz",
|
||||
"integrity": "sha512-3dlJgJCaVeXH0/eZjYVJvQiLVVrPO4U1ZGqlATtx6QGO3b5eNM6+JgUKa7oStBTdYuGTk7gVoABCW6Tp+dhRdw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@daybrush/utils": "^1.7.1"
|
||||
}
|
||||
},
|
||||
"node_modules/picocolors": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
|
||||
@@ -1361,6 +1553,46 @@
|
||||
"node": "^10 || ^12 || >=14"
|
||||
}
|
||||
},
|
||||
"node_modules/react-css-styled": {
|
||||
"version": "1.1.9",
|
||||
"resolved": "https://registry.npmjs.org/react-css-styled/-/react-css-styled-1.1.9.tgz",
|
||||
"integrity": "sha512-M7fJZ3IWFaIHcZEkoFOnkjdiUFmwd8d+gTh2bpqMOcnxy/0Gsykw4dsL4QBiKsxcGow6tETUa4NAUcmJF+/nfw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"css-styled": "~1.0.8",
|
||||
"framework-utils": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-moveable": {
|
||||
"version": "0.56.0",
|
||||
"resolved": "https://registry.npmjs.org/react-moveable/-/react-moveable-0.56.0.tgz",
|
||||
"integrity": "sha512-FmJNmIOsOA36mdxbrc/huiE4wuXSRlmon/o+/OrfNhSiYYYL0AV5oObtPluEhb2Yr/7EfYWBHTxF5aWAvjg1SA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@daybrush/utils": "^1.13.0",
|
||||
"@egjs/agent": "^2.2.1",
|
||||
"@egjs/children-differ": "^1.0.1",
|
||||
"@egjs/list-differ": "^1.0.0",
|
||||
"@scena/dragscroll": "^1.4.0",
|
||||
"@scena/event-emitter": "^1.0.5",
|
||||
"@scena/matrix": "^1.1.1",
|
||||
"css-to-mat": "^1.1.1",
|
||||
"framework-utils": "^1.1.0",
|
||||
"gesto": "^1.19.3",
|
||||
"overlap-area": "^1.1.0",
|
||||
"react-css-styled": "^1.1.9",
|
||||
"react-selecto": "^1.25.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-selecto": {
|
||||
"version": "1.26.3",
|
||||
"resolved": "https://registry.npmjs.org/react-selecto/-/react-selecto-1.26.3.tgz",
|
||||
"integrity": "sha512-Ubik7kWSnZyQEBNro+1k38hZaI1tJarE+5aD/qsqCOA1uUBSjgKVBy3EWRzGIbdmVex7DcxznFZLec/6KZNvwQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"selecto": "~1.26.3"
|
||||
}
|
||||
},
|
||||
"node_modules/rollup": {
|
||||
"version": "4.59.0",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.0.tgz",
|
||||
@@ -1415,6 +1647,24 @@
|
||||
"node": ">=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/selecto": {
|
||||
"version": "1.26.3",
|
||||
"resolved": "https://registry.npmjs.org/selecto/-/selecto-1.26.3.tgz",
|
||||
"integrity": "sha512-gZHgqMy5uyB6/2YDjv3Qqaf7bd2hTDOpPdxXlrez4R3/L0GiEWDCFaUfrflomgqdb3SxHF2IXY0Jw0EamZi7cw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@daybrush/utils": "^1.13.0",
|
||||
"@egjs/children-differ": "^1.0.1",
|
||||
"@scena/dragscroll": "^1.4.0",
|
||||
"@scena/event-emitter": "^1.0.5",
|
||||
"css-styled": "^1.0.8",
|
||||
"css-to-mat": "^1.1.1",
|
||||
"framework-utils": "^1.1.0",
|
||||
"gesto": "^1.19.4",
|
||||
"keycon": "^1.2.0",
|
||||
"overlap-area": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map-js": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
|
||||
@@ -1574,6 +1824,16 @@
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/vue3-moveable": {
|
||||
"version": "0.28.0",
|
||||
"resolved": "https://registry.npmjs.org/vue3-moveable/-/vue3-moveable-0.28.0.tgz",
|
||||
"integrity": "sha512-vplQO0XkxVEtXMDh2/lZE+c5kMycGXAfYFMvbwFKi8UVYzVk8MTgVHr4fxO9Z+4i4Rb+U/IEIgkhHRMAbx8FJg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"framework-utils": "^1.1.0",
|
||||
"moveable": "~0.53.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,7 +10,8 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"vite-svg-loader": "^5.1.1",
|
||||
"vue": "^3.5.25"
|
||||
"vue": "^3.5.25",
|
||||
"vue3-moveable": "^0.28.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^6.0.2",
|
||||
|
||||
@@ -45,6 +45,10 @@ a{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
p{
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/*=====================Référencement*/
|
||||
.referenceText{
|
||||
position:absolute;
|
||||
@@ -111,6 +115,7 @@ canvas {
|
||||
|
||||
|
||||
/*=============Classes générales*/
|
||||
/*==============Main UI*/
|
||||
.uiStyle{
|
||||
background-color: var(--back-color);
|
||||
border-style: solid;
|
||||
@@ -140,6 +145,7 @@ canvas {
|
||||
.iconBtnStyle:hover{
|
||||
background-color: var(--main-color);
|
||||
color: var(--back-color);
|
||||
border-color: var(--back-color);
|
||||
}
|
||||
|
||||
.textBtnStyle{
|
||||
@@ -156,6 +162,12 @@ canvas {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.textBtnStyle:hover{
|
||||
background-color: var(--main-color);
|
||||
color: var(--back-color);
|
||||
border-color: var(--back-color);
|
||||
}
|
||||
|
||||
/*================ PC LARGE*/
|
||||
@media(min-width:1000px){
|
||||
.textBtnStyle{
|
||||
@@ -163,7 +175,70 @@ canvas {
|
||||
}
|
||||
}
|
||||
|
||||
.textBtnStyle:hover{
|
||||
background-color: var(--main-color);
|
||||
color: var(--back-color);
|
||||
/*==============Window*/
|
||||
.windowStyle{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
background-color: var(--back-color);
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
border-radius: 16.1px;
|
||||
border-color: var(--main-color);
|
||||
}
|
||||
|
||||
.windowTitle{
|
||||
width:100%;
|
||||
height:50px;
|
||||
background-color: var(--main-color);
|
||||
border-radius: 16.1px 16.1px 0 0;
|
||||
font-family: 'lineal';
|
||||
font-size: 16.1px;
|
||||
color: var(--back-color);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.windowTitleLower{
|
||||
font-family: 'velvelyne';
|
||||
font-weight: lighter;
|
||||
font-size: 13.12px;
|
||||
}
|
||||
|
||||
.closeBtn{
|
||||
color: var(--back-color);
|
||||
background-color: var(--main-color);
|
||||
border-style: solid;
|
||||
border-width: thin;
|
||||
border-radius: 16.1px;
|
||||
border-color: var(--back-color);
|
||||
width: 50px;
|
||||
height: 33px;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.closeBtn:hover{
|
||||
color: var(--main-color);
|
||||
background-color: var(--back-color);
|
||||
}
|
||||
|
||||
.windowContent{
|
||||
height:77%;
|
||||
width:100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/*==========================Moveable*/
|
||||
.moveable-control-box {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,69 @@
|
||||
<script setup>
|
||||
import CloseIcon from '../assets/icons/close.svg'
|
||||
import { msgDataList } from './msgData.js'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="inboxContainer" class="uiStyle">
|
||||
<div id="inboxHeader">
|
||||
<div id="inboxTitle">
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
|
||||
</div>
|
||||
<div id="msgNumberStyle">
|
||||
<p>{{msgNumber}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="inboxList">
|
||||
<div :class="{msgStyle: true, selectedStyle: item.isSelected, unreadStyle: !item.wasRead}" v-for="item in msgList" @click="selectMsg(item)">
|
||||
<div class="msgTitle">
|
||||
<p><strong>{{item.date}}</strong><br>{{item.title}}</p>
|
||||
</div>
|
||||
<div class="msgReact">
|
||||
<p>{{item.like}}</p>
|
||||
<button type="button" class="iconBtnStyle" @click.stop @touchstart.stop>
|
||||
<CloseIcon name="test" class="icon"/>
|
||||
</button>
|
||||
<p v-show="item.isEvent">{{item.going}}</p>
|
||||
<button type="button" class="textBtnStyle" v-show="item.isEvent" @click.stop @touchstart.stop>
|
||||
JE PARTICIPE!
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="windowStyle" v-show="msgSelected" id="msgVisualizer" ref="msgPannel">
|
||||
<Moveable
|
||||
className="moveable"
|
||||
:target="$refs.msgPannel"
|
||||
:draggable="true"
|
||||
@drag="onDrag"
|
||||
/>
|
||||
<div class="windowTitle">
|
||||
<p>
|
||||
<b class="windowTitleLower">Message du {{selectedMsgDate}}</b>
|
||||
<br>
|
||||
{{selectedMsgTitle}}
|
||||
</p>
|
||||
<!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
|
||||
<button type="button" class="closeBtn" @mousedown.stop @touchstart.capture="toggleMsg" @click="toggleMsg">
|
||||
<CloseIcon name="close" class="icon"/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="windowContent">
|
||||
<div class="msgReact">
|
||||
<p>{{selectedMsgLikes}}</p>
|
||||
<button type="button" class="iconBtnStyle" @mousedown.stop @touchstart.stop>
|
||||
<CloseIcon name="test" class="icon"/>
|
||||
</button>
|
||||
<p>{{selectedMsgGoings}}</p>
|
||||
<button type="button" class="textBtnStyle" @mousedown.stop @touchstart.stop>
|
||||
JE PARTICIPE!
|
||||
</button>
|
||||
</div>
|
||||
<p id="selectedMsgText" @touchstart.stop>{{selectedMsgContent}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@@ -18,19 +80,261 @@
|
||||
@media(min-width:1000px){}
|
||||
*/
|
||||
|
||||
#msgVisualizer{
|
||||
position: fixed;
|
||||
top:50%;
|
||||
left:3.33%;
|
||||
width: 333px;
|
||||
height: 333px;
|
||||
}
|
||||
|
||||
/*================ PC LARGE*/
|
||||
@media(min-width:1000px){
|
||||
#msgVisualizer{
|
||||
left: 45%;
|
||||
top: 33.3%;
|
||||
}
|
||||
}
|
||||
|
||||
#inboxContainer{
|
||||
width:100%;
|
||||
position:relative;
|
||||
height:50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
#inboxHeader{
|
||||
width: 100%;
|
||||
height: 20%;
|
||||
position: relative;
|
||||
background-color: var(--main-color);
|
||||
color: var(--back-color);
|
||||
font-size: 16.1px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#inboxTitle{
|
||||
font-family: 'velvelyne';
|
||||
font-weight: bold;
|
||||
padding-left: 33px;
|
||||
}
|
||||
|
||||
#msgNumberStyle{
|
||||
font-family: 'lineal';
|
||||
font-size: 33px;
|
||||
padding-right: 44px;
|
||||
}
|
||||
|
||||
#inboxList{
|
||||
width:100%;
|
||||
height: 75%;
|
||||
overflow-y: scroll;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.msgStyle{
|
||||
width:100%;
|
||||
height: 55px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: var(--main-color);
|
||||
border-style: solid;
|
||||
border-color: var(--main-color);
|
||||
border-width: thin;
|
||||
border-radius: 0;
|
||||
font-family: 'velvelyne';
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.selectedStyle{
|
||||
background-color: var(--main-color);
|
||||
color: var(--accent-color);
|
||||
border-color: var(--accent-color);
|
||||
font-family: 'lineal';
|
||||
}
|
||||
|
||||
.selectedStyle .msgTitle{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.unreadStyle{
|
||||
font-family: 'lineal';
|
||||
}
|
||||
|
||||
.unreadStyle .msgTitle{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.msgStyle:hover{
|
||||
background-color: var(--accent-color);
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
.selectedStyle:hover{
|
||||
color: var(--back-color);
|
||||
background-color: var(--main-color);
|
||||
border-color: var(--back-color);
|
||||
}
|
||||
.msgStyle .icon{
|
||||
height: 13.12px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.msgStyle .iconBtnStyle{
|
||||
height: 25px;
|
||||
width: auto;
|
||||
}
|
||||
.msgStyle .textBtnStyle{
|
||||
font-size: 11px;
|
||||
height: 25px;
|
||||
width: 100px;
|
||||
font-family: 'velvelyne';
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.msgTitle{
|
||||
padding-left: 33px;
|
||||
width: 53%;
|
||||
font-size: 16.1px;
|
||||
align-items: center;
|
||||
opacity: 0.333;
|
||||
}
|
||||
|
||||
.msgTitle:hover{
|
||||
opacity: inherit;
|
||||
}
|
||||
|
||||
.msgTitle strong{
|
||||
font-family: 'velvelyne';
|
||||
font-size: 11px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.msgReact{
|
||||
padding-right: 33px;
|
||||
padding-top:16.1px;
|
||||
width: 47%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
font-size: 16.1px;
|
||||
}
|
||||
|
||||
.msgReact p{
|
||||
width: 33px;
|
||||
font-family: 'lineal';
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.windowContent .msgReact{
|
||||
width: 99%;
|
||||
justify-content: flex-start;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.windowContent .icon{
|
||||
height: 13.12px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.windowContent .iconBtnStyle{
|
||||
height: 33px;
|
||||
width: 33px;
|
||||
border-radius: 33px;
|
||||
}
|
||||
.windowContent .textBtnStyle{
|
||||
height: 33px;
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
#selectedMsgText{
|
||||
white-space: pre-line;
|
||||
font-size: 16.1px;
|
||||
font-family: 'velvelyne';
|
||||
color: var(--main-color);
|
||||
font-weight: bold;
|
||||
padding-right: 16.1px;
|
||||
padding-left: 7.77px;
|
||||
margin-top: 0;
|
||||
height: 77%;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
|
||||
/*================ PC LARGE*/
|
||||
@media(min-width:1000px){}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Moveable from 'vue3-moveable';
|
||||
|
||||
export default {
|
||||
name : 'InboxContent',
|
||||
methods:{
|
||||
onDrag({ target, transform }) {
|
||||
target.style.transform = transform;
|
||||
},
|
||||
toggleMsg(){
|
||||
this.msgSelected = !this.msgSelected;
|
||||
if (!this.msgSelected){
|
||||
for (let k in this.msgList){
|
||||
this.msgList[k].isSelected = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
selectMsg(e){
|
||||
for(let i in this.msgList){
|
||||
this.msgList[i].isSelected = false;
|
||||
}
|
||||
this.selectedMsgTitle = e.title;
|
||||
this.selectedMsgContent = e.content;
|
||||
this.selectedMsgLikes = e.like;
|
||||
this.selectedMsgGoings = e.going;
|
||||
this.selectedMsgDate = e.date;
|
||||
|
||||
e.isSelected = true;
|
||||
e.wasRead = true;
|
||||
this.unreadMsg();
|
||||
if(!this.msgSelected){
|
||||
this.msgSelected = true;
|
||||
}
|
||||
},
|
||||
unreadMsg(){
|
||||
this.msgNumber = 0;
|
||||
for(let j in this.msgList){
|
||||
if (!this.msgList[j].wasRead)
|
||||
this.msgNumber += 1;
|
||||
}
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
msgList: [...msgDataList],
|
||||
msgNumber: 0,
|
||||
selectedMsgTitle: 'no selected message!',
|
||||
selectedMsgContent: 'no selected message!',
|
||||
selectedMsgLikes: 0,
|
||||
selectedMsgGoings: 0,
|
||||
selectedMsgDate: 'NSM!!!',
|
||||
msgSelected: false
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.msgNumber = this.msgList.length
|
||||
console.log("Inbox content is loaded!");
|
||||
}
|
||||
};
|
||||
|
||||
36
v1-com-officielle/src/infoComponents/msgData.js
Normal file
36
v1-com-officielle/src/infoComponents/msgData.js
Normal file
@@ -0,0 +1,36 @@
|
||||
//ecrire les messages ici avec 6 paramètres : title, content, likes, going, isSelected, isEvent
|
||||
// like & going à 0 par défaut (fonctionnel)
|
||||
// isSelected: false par défault (fonctionnel)
|
||||
// isEvent: true si le message concerne un évènement
|
||||
export const msgDataList = [
|
||||
{
|
||||
title: 'Atelier Meetup 1/3',
|
||||
date: '21/03',
|
||||
content: 'Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos. \n\n Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.',
|
||||
like: 0,
|
||||
going: 0,
|
||||
wasRead: false,
|
||||
isSelected: false,
|
||||
isEvent: true
|
||||
},
|
||||
{
|
||||
title: 'Atelier Meetup 1/3',
|
||||
date: '21/03',
|
||||
content: 'Lorem ipsum dolor sit amet consectetur adipiscing elit.',
|
||||
like: 1,
|
||||
going: 161,
|
||||
isSelected: false,
|
||||
wasRead: false,
|
||||
isEvent: false
|
||||
},
|
||||
{
|
||||
title: 'test00333',
|
||||
date: '21/03',
|
||||
content: 'Lorem ipsum dolor sit amet consectetur adipiscing elit. Lorem ipsum dolor sit amet consectetur adipiscing elit',
|
||||
like: 333,
|
||||
going: 0,
|
||||
isSelected: false,
|
||||
wasRead: false,
|
||||
isEvent: true
|
||||
}
|
||||
]
|
||||
Reference in New Issue
Block a user