This is an automated email from the git hooks/post-receive script. New commit to branch bow-v2-go in repository bow. See https://gitlab.nuiton.org/chorem/bow.git commit cdd7878c96c750a0be5e7e299044ec844321dc91 Author: kaufmann <kaufmann@codelutin.com> Date: Mon Apr 13 13:46:15 2020 +0200 Nouvelle UI - Layout général --- web/package.json | 2 + web/src/App.vue | 78 ++++++++++++++------- web/src/assets/font/bow-icons.eot | Bin 0 -> 5318 bytes web/src/assets/font/bow-icons.svg | 125 ++++++++++++++++++++++++++++++++++ web/src/assets/font/bow-icons.ttf | Bin 0 -> 5140 bytes web/src/assets/font/bow-icons.woff | Bin 0 -> 3372 bytes web/src/assets/img/logos/bow-text.svg | 64 +++++++++++++++++ web/src/assets/img/logos/bow.svg | 8 +++ web/src/assets/less/_base.less | 6 ++ web/src/assets/less/_colors.less | 49 +++++++++++++ web/src/assets/less/_icons.less | 81 ++++++++++++++++++++++ web/src/assets/less/_sizes.less | 21 ++++++ web/src/assets/less/main.less | 5 ++ web/src/assets/logo.png | Bin 6849 -> 0 bytes web/src/components/HelloWorld.vue | 122 --------------------------------- web/src/components/layout/Footer.vue | 62 +++++++++++++++++ web/src/components/layout/Header.vue | 60 ++++++++++++++++ web/src/components/layout/Sidebar.vue | 117 +++++++++++++++++++++++++++++++ 18 files changed, 655 insertions(+), 145 deletions(-) diff --git a/web/package.json b/web/package.json index 4eda9fa..5d1d465 100644 --- a/web/package.json +++ b/web/package.json @@ -24,6 +24,8 @@ "eslint": "^6.7.2", "eslint-plugin-prettier": "^3.1.1", "eslint-plugin-vue": "^6.2.2", + "less": "^3.11.1", + "less-loader": "^5.0.0", "prettier": "^1.19.1", "vue-template-compiler": "^2.6.11" } diff --git a/web/src/App.vue b/web/src/App.vue index 55fa01d..f6fe46f 100644 --- a/web/src/App.vue +++ b/web/src/App.vue @@ -1,33 +1,65 @@ <template> <div id="app"> - <div id="nav"> - <router-link to="/">Home</router-link> | - <router-link to="/about">About</router-link> | - <router-link to="/login">Login</router-link> - </div> - <router-view /> + <Sidebar /> + + <main> + <Header /> + <router-view /> + </main> + + <Footer /> </div> </template> -<style> -#app { - font-family: Avenir, Helvetica, Arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-align: center; - color: #2c3e50; -} +<script> +import { Component, Vue } from 'vue-property-decorator' +import Footer from './components/layout/Footer.vue'; +import Header from './components/layout/Header.vue'; +import Sidebar from './components/layout/Sidebar.vue'; -#nav { - padding: 30px; +@Component({ + name: 'App', + components: { Header, Footer, Sidebar } +}) +class App extends Vue { } +export default App +</script> -#nav a { - font-weight: bold; - color: #2c3e50; -} +<style lang="less"> + @import './assets/less/main'; -#nav a.router-link-exact-active { - color: #42b983; -} + body { + padding-left: var(--sidebar-width); + + background-color: var(--color-bg); + } + + #app { + font-family: Avenir, Helvetica, Arial, sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-align: center; + color: #2c3e50; + } + + #nav { + padding: var(--margin--medium) ; + } + + #nav a { + font-weight: bold; + color: #2c3e50; + } + + #nav a.router-link-exact-active { + color: #42b983; + } + + main { + // width: calc(100vw - var(--sidebar-width)); + // min-height: 100vh; + + padding-bottom: var(--footer-height); + } </style> diff --git a/web/src/assets/font/bow-icons.eot b/web/src/assets/font/bow-icons.eot new file mode 100644 index 0000000..70a280e Binary files /dev/null and b/web/src/assets/font/bow-icons.eot differ diff --git a/web/src/assets/font/bow-icons.svg b/web/src/assets/font/bow-icons.svg new file mode 100644 index 0000000..d98eebb --- /dev/null +++ b/web/src/assets/font/bow-icons.svg @@ -0,0 +1,125 @@ +<?xml version="1.0" standalone="no"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > +<!-- +2020-4-13: Created. +--> +<svg xmlns="http://www.w3.org/2000/svg"> +<metadata> +Created by FontForge 20110222 at Mon Apr 13 11:34:09 2020 + By root +Created by root with FontForge 2.0 (http://fontforge.sf.net) +</metadata> +<defs> +<font id="bow-icons" horiz-adv-x="512" > + <font-face + font-family="bow-icons" + font-weight="500" + font-stretch="normal" + units-per-em="512" + panose-1="2 0 6 3 0 0 0 0 0 0" + ascent="448" + descent="-64" + bbox="-1.73438 -67.3076 520.103 451.313" + underline-thickness="25.6" + underline-position="-51.2" + unicode-range="U+0020-F114" + /> + <missing-glyph /> + <glyph glyph-name="space" unicode=" " horiz-adv-x="200" + /> + <glyph glyph-name="uniF113" unicode="" +d="M309.817 233.958c-2.45996 -41.7812 -29.5713 -83.5469 -35.5781 -88.1777l-0.517578 -0.303711c-10.835 -6.34863 -19.0117 -8.12012 -28.0273 -0.552734l-0.948242 0.794922c-5.50879 1.53711 4.73438 -1.32129 -0.774414 0.21582 +c-6.24707 5.05273 -35.9482 48.2373 -35.1602 87.7529c0.618164 31.0107 23.0635 55.2188 50.5039 55.2188c27.498 0 50.375 -24.4111 50.502 -54.9482zM321.257 233.825c-0.150391 36.335 -27.3311 66.5205 -61.9414 66.5205 +c-34.6689 0 -61.2188 -30.249 -61.9404 -66.4307c-0.932617 -46.7666 32.7061 -94.1992 41.5557 -98.2803c16.0625 -11.9102 28.8486 -6.55176 40.2529 -0.232422c11.3291 5.83301 39.2998 51.1201 42.0635 98.0625c6.87988 116.671 -15.0654 -255.503 0.0107422 0.179688 +c-0.523438 131.023 0.972656 -243.167 -0.000976562 0.180664zM215.551 151.561l-7.61133 8.53809l-40.335 -35.9531l-23.4346 -112.832h230.291l-23.4346 112.832l-40.335 35.9531l-7.61133 -8.53809l37.5146 -33.4395l19.8076 -95.3691h-202.174l19.8076 95.3691z +M215.094 152.162l-11.0889 -2.80762l3.00586 -11.8701c4.97949 -19.6494 19.6553 -31.498 36.1025 -35.8398c26.8945 -7.09863 61.0186 5.06445 68.5459 35.7559l2.83789 11.584l-11.1104 2.7207l-2.83789 -11.584c-5.5498 -22.6279 -32.0391 -33.3486 -54.5166 -27.416 +c-13.1768 3.47754 -24.0781 12.377 -27.9336 27.5889zM453.819 298.625c-2.46387 -41.7783 -29.5752 -83.5439 -35.5771 -88.1768l-0.515625 -0.301758c-10.8418 -6.34961 -19.0205 -8.12012 -28.0342 -0.554688l-0.946289 0.794922 +c-7.70508 2.15332 6.92969 -1.9375 -0.775391 0.216797c-6.24902 5.05469 -35.9453 48.2373 -35.1582 87.751c0.620117 31.0098 23.0605 55.2227 50.5 55.2227c27.5059 0 50.3789 -24.415 50.5068 -54.9521zM465.259 298.492 +c-0.152344 36.335 -27.3271 66.5244 -61.9463 66.5244c-34.6699 0 -61.2139 -30.2559 -61.9375 -66.4336c-0.930664 -46.7627 32.7227 -94.2041 41.5303 -98.2686c16.2598 -11.9844 28.8232 -6.57422 40.3428 -0.212891c11.21 5.78223 39.2324 51.0967 42.001 98.0303 +l0.00976562 0.180664c-0.536133 132.225 0.981445 -241.953 0 0.179688zM376.828 87.4229v-11.4395h141.639l-23.4385 112.834l-40.332 35.9521l-7.61133 -8.53906l37.5117 -33.4385l19.8115 -95.3691h-127.58zM359.549 216.23l-7.61328 8.53906l-15.2031 -13.5547 +l7.61328 -8.53906zM359.091 216.835l-11.0879 -2.81055l3.00781 -11.8662c13.3018 -52.5195 92.7598 -48.5576 104.646 -0.0849609l2.84375 11.5781l-11.1094 2.72852l-2.84375 -11.5781c-9.03613 -36.8555 -72.2031 -40.2842 -82.4482 0.165039zM165.819 298.625 +c-2.46387 -41.7783 -29.5752 -83.5439 -35.5771 -88.1768l-0.515625 -0.301758c-10.8418 -6.34961 -19.0205 -8.12012 -28.0342 -0.554688l-0.946289 0.794922c-7.70508 2.15332 6.92969 -1.93652 -0.775391 0.216797c-6.24902 5.05469 -35.9453 48.2373 -35.1582 87.751 +c0.620117 31.0098 23.0605 55.2227 50.5 55.2227c27.5059 0 50.3789 -24.4141 50.5068 -54.9521zM177.259 298.492c-0.152344 36.335 -27.3271 66.5244 -61.9463 66.5244c-34.6699 0 -61.2139 -30.2559 -61.9375 -66.4336 +c-0.930664 -46.7627 32.7227 -94.2041 41.5303 -98.2686c16.2598 -11.9844 28.8232 -6.57422 40.3418 -0.212891c11.2109 5.78223 39.2334 51.0967 42.002 98.0303l0.00976562 0.180664v0.179688zM174.225 202.731l7.61328 8.53711l-15.1406 13.5l-7.61328 -8.53711z +M71.5479 216.23l-7.61133 8.53906l-40.332 -35.9521l-23.4385 -112.834h141.74v11.4395h-127.682l19.8115 95.3691zM71.0908 216.835l-11.0879 -2.81055l3.00781 -11.8662c13.3018 -52.5195 92.7598 -48.5576 104.646 -0.0849609l2.84375 11.5781l-11.1094 2.72852 +l-2.84375 -11.5781c-9.03613 -36.8555 -72.2031 -40.2842 -82.4482 0.165039z" /> + <glyph glyph-name="uniF104" unicode="" +d="M384 416c80.1201 0 128 -69.1523 128 -136c0 -68.7119 -42.6084 -142.04 -126.64 -217.936c-61.9043 -55.9121 -124.712 -92.6162 -125.345 -92.9844l-4.01562 -2.32812l-4.01562 2.32812c-0.624023 0.368164 -63.4404 37.0723 -125.345 92.9844 +c-84.0312 75.8955 -126.64 149.224 -126.64 217.936c0 66.8477 47.8799 136 128 136c58.8564 0 109.112 -33.168 128 -79.4316c18.8877 46.2637 69.1436 79.4316 128 79.4316zM384 400c-256 -309.333 -128 -154.667 0 0z" /> + <glyph glyph-name="uniF10D" unicode="" +d="M16 280c0 102.85 49.0957 152 152 152c102.85 0 152 -49.0957 152 -152c0 -102.85 -49.0957 -152 -152 -152c-102.85 0 -152 49.0957 -152 152zM0 280c0 -110.43 57.5166 -168 168 -168c110.43 0 168 57.5166 168 168c0 110.43 -57.5166 168 -168 168 +c-110.429 0 -168 -57.5166 -168 -168zM285.657 173.657l-11.3145 -11.3145l48 -48l11.3145 11.3145zM352.012 132.686l140.68 -140.68l-36.6865 -36.6865l-140.68 140.68zM352.012 155.313l-59.3135 -59.3145l163.307 -163.307l59.3135 59.3135z" /> + <glyph glyph-name="uniF10B" unicode="" +d="M300.155 360l64 -80h131.845v-240h-480v240h131.845l64 80h88.3105zM371.845 296l-64 80h-103.689l-64 -80h-140.155v-272h512v272h-140.155zM200 160c0 38.9014 17.0967 56 56 56c38.9023 0 56 -17.0967 56 -56c0 -38.9023 -17.0967 -56 -56 -56 +c-38.9014 0 -56 17.0967 -56 56zM184 160c0 -46.4297 25.5684 -72 72 -72c46.4297 0 72 25.5684 72 72c0 46.4297 -25.5684 72 -72 72c-46.4297 0 -72 -25.5684 -72 -72zM80 288h-16v-256h16v256zM432 224z" /> + <glyph glyph-name="uniF105" unicode="" +d="M16 192c0 161.566 78.4307 240 240 240c161.566 0 240 -78.4307 240 -240c0 -161.566 -78.4307 -240 -240 -240c-161.566 0 -240 78.4307 -240 240zM0 192c0 -169.098 86.8994 -256 256 -256c169.098 0 256 86.8994 256 256c0 169.098 -86.8994 256 -256 256 +c-169.098 0 -256 -86.8994 -256 -256zM144 192c0 76.2354 35.7637 112 112 112c76.2354 0 112 -35.7637 112 -112c0 -76.2354 -35.7637 -112 -112 -112c-76.2354 0 -112 35.7637 -112 112zM128 192c0 -83.7637 44.2354 -128 128 -128c83.7637 0 128 44.2354 128 128 +c0 83.7637 -44.2354 128 -128 128c-83.7637 0 -128 -44.2354 -128 -128zM200 304h16v136h-16v-136zM296 304h16v136h-16v-136zM200 -56h16v136h-16v-136zM296 -56h16v136h-16v-136zM368 248v-16h136v16h-136zM368 152v-16h136v16h-136zM8 248v-16h136v16h-136zM8 152v-16 +h136v16h-136z" /> + <glyph glyph-name="uniF114" unicode="" +d="M256.008 448.906c-141.908 0 -256.931 -115.021 -256.906 -256.915c-0.0078125 -141.891 114.997 -256.905 256.898 -256.897c141.885 -0.0166016 256.914 115.005 256.906 256.906c0.0078125 141.885 -115.005 256.906 -256.898 256.906zM256.008 432.906 +c133.06 0 240.906 -107.854 240.898 -240.906c0.0078125 -133.067 -107.854 -240.922 -240.906 -240.906c-133.067 -0.0078125 -240.906 107.837 -240.898 240.899c-0.0224609 133.059 107.83 240.913 240.906 240.913zM264 440h-16v-496h16v496zM504 184v16h-496v-16h496z +M244.969 433.729l-9.9375 12.541c-0.601562 -0.477539 -115.031 -90.3389 -115.031 -254.271c0 -163.929 114.432 -253.795 115.031 -254.271l9.9375 12.541s-108.969 85.3018 -108.969 241.729c0 156.431 108.969 241.729 108.969 241.729zM276.969 446.271 +l-9.9375 -12.541s108.969 -85.2988 108.969 -241.729c0 -156.428 -108.969 -241.729 -108.969 -241.729l9.9375 -12.541c0.599609 0.475586 115.031 90.3418 115.031 254.271c0 163.932 -114.43 253.793 -115.031 254.271zM71.1221 355.643l-14.2441 -7.28516 +c0.920898 -1.80176 43.7959 -84.3574 199.122 -84.3574c155.325 0 198.201 82.5557 199.122 84.3574l-14.2441 7.28516s-35.5127 -75.6426 -184.878 -75.6426s-184.878 75.6426 -184.878 75.6426zM56.8779 35.6426l14.2441 -7.28516s35.5127 75.6426 184.878 75.6426 +s184.878 -75.6426 184.878 -75.6426l14.2441 7.28516c-0.920898 1.80176 -43.7969 84.3574 -199.122 84.3574c-155.326 0 -198.201 -82.5557 -199.122 -84.3574z" /> + <glyph glyph-name="uniF10A" unicode="" +d="M154.343 10.3428l11.3145 11.3145l-80 80l-11.3145 -11.3145zM86.5752 91.2607l337.425 337.426l68.6865 -68.6865l-337.426 -337.425l-137.372 -68.6865zM73.4248 100.739l-75.1592 -150.319l16.1543 -16.1543l150.319 75.1592l350.574 350.575l-91.3135 91.3135z +M426.343 282.343l11.3145 11.3145l-80 80l-11.3145 -11.3145zM458.343 314.343l11.3145 11.3145l-80 80l-11.3145 -11.3145zM41.9404 23.7607l-3.88086 -15.5215l27.3438 -6.83594l6.83594 -27.3438l15.5215 3.88086l-9.16406 36.6562z" /> + <glyph glyph-name="uniF102" unicode="" +d="M184 -64h-112v288h112v-288zM88 -48h80v256h-80v-256zM440 -64h-112v208h112v-208zM344 -48h80v176h-80v-176zM312 -64h-112v512h112v-512zM216 -48h80v480h-80v-480z" /> + <glyph glyph-name="uniF10E" unicode="" +d="M328 147.312l24 24l163.312 -163.312l-59.3125 -59.3125l-163.312 163.312l24 24l-33.3037 33.2881l-199.84 -196.536l-54.8555 -13.5684l-23.7441 22.3447l15.9355 54.6475l1.42383 1.44043l194.929 197.84l-97.2324 97.2314l-25.584 -25.5918l-56.4883 94.1445 +l24.832 24.832l94.1367 -56.4883l-25.585 -25.584l97.1523 -97.1523l59.5361 60.4326v28.7197c0 39.9121 18.7363 88 108 88h12.1924l-30.7207 -71.0244l24.3047 -25.3115l70.2236 32.9199v-12.584c0 -89.2637 -47.8477 -108 -88 -108h-28.7275l-60.4727 -59.4883z +M58.0723 398.76l39.5117 -65.8555l33.5117 33.5117l-65.8555 39.5117zM75.4561 -12.7598l273.271 268.76h35.2725c44.3203 0 68.376 26.6396 71.6162 79.2402l-57.3926 -26.8965l-39.6953 40.9365l25.1357 57.8877c-53.5762 -3 -79.6641 -26.3682 -79.6641 -71.168v-35.2803 +l-268.88 -272.903l-12.0645 -41.3525l10.2559 -9.65625zM456 -28.6875l36.6875 36.6875l-140.688 140.688l-36.6875 -36.6875z" /> + <glyph glyph-name="uniF106" unicode="" +d="M36 234.626h440v-85.252h-440v85.252zM36 412h440v-85.252h-440v85.252zM36 57.252h440v-85.252h-440v85.252z" /> + <glyph glyph-name="uniF100" unicode="" +d="M64 448h-16v-512h16v512zM232 368l29.5898 25.8281l-10.1797 12.3438l-51.4102 -42.4004v-203.771h268.944l-52 104l52 104h-236.944zM216 352h227.056l-44 -88l44 -88h-227.056v176zM208 200v16h-144v176h184v-32h16v48h-216v-208h160z" /> + <glyph glyph-name="uniF103" unicode="" +d="M36 412h98.3984v-98.3984h-98.3984v98.3984zM206.801 412h98.3984v-98.3984h-98.3984v98.3984zM377.602 412h98.3984v-98.3984h-98.3984v98.3984zM36 241.199h98.3984v-98.3984h-98.3984v98.3984zM206.801 241.199h98.3984v-98.3984h-98.3984v98.3984zM377.602 241.199 +h98.3984v-98.3984h-98.3984v98.3984zM36 70.3984h98.3984v-98.3984h-98.3984v98.3984zM206.801 70.3984h98.3984v-98.3984h-98.3984v98.3984zM377.602 70.3984h98.3984v-98.3984h-98.3984v98.3984z" /> + <glyph glyph-name="uniF112" unicode="" +d="M326.64 293.281c-3.44043 -58.4404 -41.3633 -116.86 -49.7646 -123.337l-0.724609 -0.424805c-15.1553 -8.88086 -26.5918 -11.3584 -39.2031 -0.774414l-1.3252 1.1123c-7.70605 2.15039 6.62109 -1.84766 -1.08398 0.302734 +c-8.73828 7.06738 -50.2832 67.4717 -49.1807 122.743c0.866211 43.376 32.2598 77.2373 70.6426 77.2373c38.4629 0 70.4619 -34.1455 70.6396 -76.8594zM342.641 293.096c-0.210938 50.8232 -38.2285 93.0449 -86.6406 93.0449 +c-48.4922 0 -85.6289 -42.3105 -86.6387 -92.9189c-1.30566 -65.4141 45.7471 -131.761 58.125 -137.469c22.4678 -16.6602 40.3525 -9.16504 56.3047 -0.325195c15.8457 8.1582 54.9697 71.5029 58.8359 137.164c9.62207 163.192 -21.0723 -357.383 0.0146484 0.251953 +c-0.732422 183.268 1.35938 -340.129 -0.000976562 0.251953zM194.784 178.028l-10.6465 11.9434l-56.418 -50.2891l-32.7783 -157.823h322.117l-32.7783 157.823l-56.418 50.2891l-10.6465 -11.9434l52.4727 -46.7734l27.7061 -133.396h-282.789l27.7061 133.396z +M194.146 178.87l-15.5098 -3.92773l4.20312 -16.6025c6.96484 -27.4844 27.4932 -44.0586 50.498 -50.1299c37.6191 -9.92969 85.3506 7.08301 95.8789 50.0117l3.96875 16.2031l-15.541 3.80664l-3.96875 -16.2031c-7.7627 -31.6514 -44.8145 -46.6465 -76.2549 -38.3486 +c-18.4307 4.86523 -33.6787 17.3125 -39.0713 38.5898z" /> + <glyph glyph-name="uniF10C" unicode="" +d="M104 296h-16v-360h16v360zM424 448h-16v-360h16v360zM264 144h-16v-208h16v208zM264 448h-16v-208h16v208zM56 344c0 28.2363 11.7637 40 40 40s40 -11.7637 40 -40s-11.7637 -40 -40 -40s-40 11.7637 -40 40zM40 344c0 -35.7637 20.2363 -56 56 -56s56 20.2363 56 56 +s-20.2363 56 -56 56s-56 -20.2363 -56 -56zM376 40c0 28.2363 11.7637 40 40 40s40 -11.7637 40 -40s-11.7637 -40 -40 -40s-40 11.7637 -40 40zM360 40c0 -35.7637 20.2363 -56 56 -56s56 20.2363 56 56s-20.2363 56 -56 56s-56 -20.2363 -56 -56zM216 192 +c0 28.2363 11.7637 40 40 40s40 -11.7637 40 -40s-11.7637 -40 -40 -40s-40 11.7637 -40 40zM200 192c0 -35.7637 20.2363 -56 56 -56s56 20.2363 56 56s-20.2363 56 -56 56s-56 -20.2363 -56 -56zM104 448h-16v-56h16v56zM424 -8h-16v-56h16v56z" /> + <glyph glyph-name="uniF107" unicode="" +d="M392 312v-120h64v-256h-400v256h64v120c0 74.9922 61.0078 136 136 136s136 -61.0078 136 -136zM136 312v-120h240v120c0 66.168 -53.832 120 -120 120s-120 -53.832 -120 -120zM440 -48v224h-368v-224h368zM248 32.8164c-18.2324 3.70312 -32 19.8711 -32 39.1836 +c0 22.0557 17.9443 40 40 40s40 -17.9443 40 -40c0 -19.3115 -13.7676 -35.4717 -32 -39.1836v-24.8164h-16v24.8164zM256 96c-13.2324 0 -24 -10.7676 -24 -24s10.7676 -24 24 -24s24 10.7676 24 24s-10.7676 24 -24 24z" /> + <glyph glyph-name="uniF111" unicode="" +d="M176 384h16v48h96v-48h16v64h-128v-64zM104 368h-16v-432h304v432h-16v-416h-272v416zM200 288h-16v-272h16v272zM296 288h-16v-272h16v272zM64 384v-16h352v16h-352z" /> + <glyph glyph-name="uniF108" unicode="" +d="M352 73.7656h-16v-121.766h-320v480h320v-121.766h16v137.766h-352v-512h352v137.766zM429.337 144.566l14.0732 -14.0723l76.6924 76.6924l-76.6924 76.6924l-14.0732 -14.0732l62.6201 -62.6191zM506.029 197.235v19.9023h-353.604v-19.9023h353.604z" /> + <glyph glyph-name="uniF10F" unicode="" +d="M320 344c0 60.1797 27.7627 88 88 88c60.1797 0 88 -27.7627 88 -88c0 -60.1797 -27.7627 -88 -88 -88c-60.1797 0 -88 27.7627 -88 88zM304 344c0 -67.7627 36.1797 -104 104 -104c67.7627 0 104 36.1797 104 104c0 67.7627 -36.1797 104 -104 104 +c-67.7627 0 -104 -36.1797 -104 -104zM16 112c0 49.5605 22.4307 72 72 72c49.5605 0 72 -22.4307 72 -72c0 -49.5605 -22.4307 -72 -72 -72c-49.5605 0 -72 22.4307 -72 72zM0 112c0 -57.0977 30.8945 -88 88 -88c57.0977 0 88 30.8945 88 88c0 57.0977 -30.8945 88 -88 88 +c-57.0977 0 -88 -30.8945 -88 -88zM328 8c0 38.9023 17.0967 56 56 56c38.9023 0 56 -17.0967 56 -56c0 -38.9023 -17.0967 -56 -56 -56c-38.9023 0 -56 17.0967 -56 56zM312 8c0 -46.4297 25.5684 -72 72 -72c46.4297 0 72 25.5684 72 72c0 46.4297 -25.5684 72 -72 72 +c-46.4297 0 -72 -25.5684 -72 -72zM317.029 8.57227l5.94141 14.8555l-160 64l-5.94141 -14.8555zM147.705 174.749l8.58984 -13.498l176 112l-8.58984 13.498z" /> + <glyph glyph-name="uniF109" unicode="" +d="M140.296 0.0859375l0.0166016 0.0322266c3.26465 2.28809 7.8418 2.28809 10.7871 0.319336c5.55273 -3.60059 10.7871 -8.17773 15.0439 -14.3877c12.4355 -17.333 13.0918 -37.9473 1.3125 -46.4453c-11.4434 -8.51465 -31.0654 -1.3125 -43.501 16.0205 +c-5.88965 8.16211 -9.16992 16.9971 -9.49023 25.1748c-0.320312 4.89746 2.94434 9.47559 7.52246 10.7871c6.5293 2.28906 12.4189 4.89746 18.3086 8.49902zM59.5215 -1.22656v-0.015625c6.54492 -3.58594 13.0752 -6.53027 19.6211 -7.84277 +c5.2334 -1.3125 8.83496 -6.5459 8.17871 -11.7793c-0.992188 -7.8418 -4.25781 -16.0205 -9.49121 -23.543c-12.0996 -17.333 -31.7207 -24.5186 -43.5 -16.0205c-11.4434 8.17871 -11.1074 29.1123 1.3125 46.4453c3.60059 4.89746 7.8418 8.83496 12.0986 12.0996 +c3.28125 2.625 8.17871 2.625 11.7803 0.65625zM99.4209 202.527h0.015625h-1.3125c-33.0332 0 -57.8887 29.1123 -53.3115 61.4902c7.52246 50.6865 18.6455 80.7744 31.0654 114.465c8.17773 22.5498 21.5898 59.1846 47.4209 67.3623 +c14.0527 4.25781 31.4014 3.26562 36.2988 -12.7549c3.9209 -12.4199 -5.88965 -37.6113 -12.7559 -27.1445c-1.3125 1.64844 3.26562 33.6904 -16.6768 21.5908c-12.4355 -7.52246 -3.60059 -50.3662 -1.96875 -61.1533 +c4.25781 -31.0811 14.3887 -53.6475 23.8789 -99.1006c6.86621 -33.3535 -18.3086 -64.7549 -52.6543 -64.7549zM98.7646 8.58398c-32.3779 0 -61.1543 21.2539 -73.5898 53.9678c-2.28809 5.55371 -5.55273 11.123 -9.81055 16.0205 +c-10.1309 10.7871 -15.3643 23.543 -15.3643 36.2979c0 18.6455 10.4668 35.6426 29.7529 48.7344c18.6445 12.4199 43.1641 19.3018 69.0117 19.3018c25.8467 0 50.6865 -6.86621 69.0117 -19.3018c18.9648 -12.7559 29.7686 -30.0889 29.7686 -48.7344 +c0 -13.0752 -5.23438 -25.5107 -15.3652 -36.2979c-4.57715 -4.89746 -7.8418 -10.1309 -10.1309 -16.0205c-12.0986 -33.0332 -41.2119 -53.9678 -73.2529 -53.9678h-0.03125z" /> + <glyph glyph-name="uniF110" unicode="" +d="M248 48h16v288h-16v-288zM112 200v-16h288v16h-288zM16 -48v480h480v-480h-480zM0 -64h512v512h-512v-512z" /> + <glyph glyph-name="uniF101" unicode="" +d="M216 432h80v-69.7656l58.1611 -19.3877l45.8389 45.8398l52.6865 -52.6865l-45.8398 -45.8389l19.3877 -58.1611h69.7656v-80h-69.7656l-19.3877 -58.1611l45.8398 -45.8389l-52.6865 -52.6865l-45.8389 45.8398l-58.1611 -19.3877v-69.7656h-80v69.7656 +l-58.1611 19.3877l-45.8389 -45.8398l-52.6865 52.6865l45.8398 45.8389l-19.3877 58.1611h-69.7656v80h69.7656l19.3877 58.1611l-45.8398 45.8389l52.6865 52.6865l45.8389 -45.8398l58.1611 19.3877v69.7656zM312 448h-112v-74.2344l-37.8389 -12.6123l-50.1611 50.1602 +l-75.3135 -75.3135l50.1602 -50.1611l-12.6123 -37.8389h-74.2344v-112h74.2344l12.6123 -37.8389l-50.1602 -50.1611l75.3135 -75.3135l50.1611 50.1602l37.8389 -12.6123v-74.2344h112v74.2344l37.8389 12.6123l50.1611 -50.1602l75.3135 75.3135l-50.1602 50.1611 +l12.6123 37.8389h74.2344v112h-74.2344l-12.6123 37.8389l50.1602 50.1611l-75.3135 75.3135l-50.1611 -50.1602l-37.8389 12.6123v74.2344zM216 192c0 28.2363 11.7637 40 40 40s40 -11.7637 40 -40s-11.7637 -40 -40 -40s-40 11.7637 -40 40zM200 192 +c0 -35.7637 20.2363 -56 56 -56s56 20.2363 56 56s-20.2363 56 -56 56s-56 -20.2363 -56 -56z" /> + </font> +</defs></svg> diff --git a/web/src/assets/font/bow-icons.ttf b/web/src/assets/font/bow-icons.ttf new file mode 100644 index 0000000..f32ae32 Binary files /dev/null and b/web/src/assets/font/bow-icons.ttf differ diff --git a/web/src/assets/font/bow-icons.woff b/web/src/assets/font/bow-icons.woff new file mode 100644 index 0000000..57763cf Binary files /dev/null and b/web/src/assets/font/bow-icons.woff differ diff --git a/web/src/assets/img/logos/bow-text.svg b/web/src/assets/img/logos/bow-text.svg new file mode 100644 index 0000000..d56cc6e --- /dev/null +++ b/web/src/assets/img/logos/bow-text.svg @@ -0,0 +1,64 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="66" + height="20" + viewBox="0 0 66 20" + fill="none" + version="1.1" + id="svg8" + sodipodi:docname="bow-text.svg" + inkscape:version="0.92.4 5da689c313, 2019-01-14"> + <metadata + id="metadata14"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + <dc:title></dc:title> + </cc:Work> + </rdf:RDF> + </metadata> + <defs + id="defs12" /> + <sodipodi:namedview + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1" + objecttolerance="10" + gridtolerance="10" + guidetolerance="10" + inkscape:pageopacity="0" + inkscape:pageshadow="2" + inkscape:window-width="1920" + inkscape:window-height="1031" + id="namedview10" + showgrid="false" + inkscape:zoom="7.5757576" + inkscape:cx="33" + inkscape:cy="10" + inkscape:window-x="0" + inkscape:window-y="25" + inkscape:window-maximized="1" + inkscape:current-layer="svg8" /> + <path + d="M0 0.889452C0 0.706326 0.0479548 0.562441 0.143864 0.457798C0.248508 0.344437 0.392397 0.287756 0.575531 0.287756H9.26096C10.0283 0.287756 10.7521 0.436001 11.4323 0.732492C12.1125 1.02026 12.7055 1.4214 13.2112 1.93589C13.7257 2.44167 14.1312 3.03901 14.4277 3.72791C14.7242 4.4081 14.8725 5.1406 14.8725 5.92543C14.8725 6.57945 14.7678 7.18987 14.5585 7.75669C14.358 8.31479 14.0702 8.81621 13.6952 9.26094C14.3231 9.83648 14.8201 10.521 15.1864 11.3146C15.5526 12.1081 15.7358 12.9 [...] + fill="#0A3D62" + id="path2" /> + <path + d="M22.6051 10.0065C22.6051 10.7303 22.7272 11.4061 22.9713 12.034C23.2155 12.6618 23.5556 13.2112 23.9916 13.6821C24.4363 14.1443 24.9596 14.5106 25.5613 14.7809C26.163 15.0425 26.8257 15.1733 27.5495 15.1733C28.2733 15.1733 28.936 15.0425 29.5377 14.7809C30.1481 14.5106 30.6714 14.1443 31.1074 13.6821C31.5521 13.2112 31.8966 12.6618 32.1407 12.034C32.3849 11.4061 32.507 10.7303 32.507 10.0065C32.507 9.29146 32.3849 8.61999 32.1407 7.99213C31.8966 7.35555 31.5521 6.80181 31.1074 6. [...] + fill="#0A3D62" + id="path4" /> + <path + d="M44.6685 19.4375C44.5813 19.2893 44.4985 19.1367 44.42 18.9797C44.3416 18.8227 44.2718 18.6658 44.2106 18.5088C43.0857 15.5439 41.9652 12.6052 40.8489 9.69259C39.7328 6.78001 38.6122 3.84127 37.4873 0.876371C37.4873 0.832767 37.4786 0.79353 37.4611 0.75866C37.4529 0.723773 37.4487 0.688894 37.4487 0.654024C37.4487 0.409855 37.6101 0.287771 37.9327 0.287771H42.1446C42.476 0.287771 42.7027 0.453456 42.8248 0.784827L46.8274 12.7011L50.5292 0.784827C50.6513 0.453456 50.8911 0.287771 [...] + fill="#0A3D62" + id="path6" /> +</svg> diff --git a/web/src/assets/img/logos/bow.svg b/web/src/assets/img/logos/bow.svg new file mode 100644 index 0000000..c700a85 --- /dev/null +++ b/web/src/assets/img/logos/bow.svg @@ -0,0 +1,8 @@ +<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"> +<rect x="3.75" y="3.35" width="32.55" height="33.3" fill="white"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M5 4C4.44772 4 4 4.44772 4 5V35C4 35.5523 4.44772 36 5 36H35C35.5523 36 36 35.5523 36 35V5C36 4.44772 35.5523 4 35 4H5ZM2.5 0C1.11929 0 0 1.11929 0 2.5V37.5C0 38.8807 1.11929 40 2.5 40H37.5C38.8807 40 40 38.8807 40 37.5V2.5C40 1.11929 38.8807 0 37.5 0H2.5Z" fill="#079992"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M40 37.5C40 38.1774 39.7306 38.7918 39.2931 39.242L35.8413 35.5406C35.9417 35.3848 36 35.1992 36 35V5C36 4.44772 35.5522 4 35 4H19.95V0H37.5C38.8807 0 40 1.11929 40 2.5V37.5Z" fill="#057974"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M4.94995 4C4.39767 4 3.94995 4.44772 3.94995 5V6H32.9999C33.5522 6 33.9999 6.44772 33.9999 7V36H34.9999C35.5522 36 36 35.5523 36 35V5C36 4.44772 35.5522 4 34.9999 4H4.94995Z" fill="#E9E9E9"/> +<path d="M10.5 26.5679V0H20V18.275L11.3536 26.9214C11.0386 27.2364 10.5 27.0133 10.5 26.5679Z" fill="#B71540"/> +<path d="M29.475 26.5679V0H19.975V18.275L28.6214 26.9214C28.9364 27.2364 29.475 27.0133 29.475 26.5679Z" fill="#921032"/> +</svg> diff --git a/web/src/assets/less/_base.less b/web/src/assets/less/_base.less new file mode 100644 index 0000000..933cd34 --- /dev/null +++ b/web/src/assets/less/_base.less @@ -0,0 +1,6 @@ +*{ + margin:0; + padding:0; + vertical-align: baseline; + box-sizing: border-box; +} diff --git a/web/src/assets/less/_colors.less b/web/src/assets/less/_colors.less new file mode 100644 index 0000000..fa5e3db --- /dev/null +++ b/web/src/assets/less/_colors.less @@ -0,0 +1,49 @@ +* { + --color-main : #079992; + --color-main--darker : #057974; + --color-complementary : #b71540; + --color-analog : #0a3d62; + --color-black : #1e2a2f; + --color-white : #FFF; + + --color-hover : var(--color-complementary); + --color-bg : var(--color-white); + --color-bg-sidebar : var(--color-black); +} + + + /* + --color-green-2 : #057974; +--color-grey : #999; +--color-grey-pale : #f4f4f4; +--color-blue-pale : #E9F2F5; + +@color-main : @color-green; + +@color-background : #FFF; +@color-background-sidebar : @color-black; +@color-background-tag-cloud : @color-blue; +@color-background-list-odd : @color-blue-pale; +@color-background-list-even : darken(@color-blue-pale, 5%); +@color-background-title : @color-grey-pale; + + @color-menu-link : #FFF; + @color-menu-link-hover : @color-red; +@color-link : @color-main; +@color-link-hover : @color-red; //darken(@color-green, 25%); +@color-link-active : darken(@color-red, 25%); +@color-button-border-1 : @color-main; +@color-button-border-2 : @color-green-2; + +@color-bookmark-background : mix(#FFF, @color-main, 98%); +@color-bookmark-title : @color-black; +@color-bookmarks-header : #F3F4F4; + +@color-form-label : lighten(@color-black, 25%); +@color-form-input-border : @color-grey; +@color-separation-border : #EEE; + +@color-text : @color-black; +@color-text-secondary : @color-grey; + +*/ diff --git a/web/src/assets/less/_icons.less b/web/src/assets/less/_icons.less new file mode 100644 index 0000000..821ec0b --- /dev/null +++ b/web/src/assets/less/_icons.less @@ -0,0 +1,81 @@ +/* + Icon Font: bow-icons +*/ + +@font-face { + font-family: "bow-icons"; + src: url("../font/bow-icons.eot"); + src: url("../font/bow-icons.eot?#iefix") format("embedded-opentype"), + url("../font/bow-icons.woff") format("woff"), + url("../font/bow-icons.ttf") format("truetype"), + url("../font/bow-icons.svg#bow-icons") format("svg"); + font-weight: normal; + font-style: normal; +} + +@media screen and (-webkit-min-device-pixel-ratio:0) { + @font-face { + font-family: "bow-icons"; + src: url("../font/bow-icons.svg#bow-icons") format("svg"); + } +} + +[data-icon]:before { content: attr(data-icon); } + +[data-icon]:before, +.icon-flag:before, +.icon-gear:before, +.icon-graph:before, +.icon-grid:before, +.icon-heart:before, +.icon-help:before, +.icon-list:before, +.icon-lock:before, +.icon-logout:before, +.icon-lutin:before, +.icon-pencil:before, +.icon-photo:before, +.icon-preferences:before, +.icon-search:before, +.icon-settings:before, +.icon-share:before, +.icon-square-plus:before, +.icon-trashcan:before, +.icon-user:before, +.icon-user-group:before, +.icon-world:before { + display: inline-block; + font-family: "bow-icons"; + font-style: normal; + font-weight: normal; + font-variant: normal; + line-height: 1; + text-decoration: inherit; + text-rendering: optimizeLegibility; + text-transform: none; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + font-smoothing: antialiased; +} + +.icon-flag:before { content: "\f100"; } +.icon-gear:before { content: "\f101"; } +.icon-graph:before { content: "\f102"; } +.icon-grid:before { content: "\f103"; } +.icon-heart:before { content: "\f104"; } +.icon-help:before { content: "\f105"; } +.icon-list:before { content: "\f106"; } +.icon-lock:before { content: "\f107"; } +.icon-logout:before { content: "\f108"; } +.icon-lutin:before { content: "\f109"; } +.icon-pencil:before { content: "\f10a"; } +.icon-photo:before { content: "\f10b"; } +.icon-preferences:before { content: "\f10c"; } +.icon-search:before { content: "\f10d"; } +.icon-settings:before { content: "\f10e"; } +.icon-share:before { content: "\f10f"; } +.icon-square-plus:before { content: "\f110"; } +.icon-trashcan:before { content: "\f111"; } +.icon-user:before { content: "\f112"; } +.icon-user-group:before { content: "\f113"; } +.icon-world:before { content: "\f114"; } diff --git a/web/src/assets/less/_sizes.less b/web/src/assets/less/_sizes.less new file mode 100644 index 0000000..736f6fb --- /dev/null +++ b/web/src/assets/less/_sizes.less @@ -0,0 +1,21 @@ +* { + --sidebar-width : 75px; + --header-height : var(--sidebar-width); + --footer-height : 100px; + + --margin--tiny : 5px; + --margin--small : 10px; + --margin--medium : 30px; + --margin--large : 50px; +} + + + +// +// @default-font: 'Fira Sans'; +// @defaut-font-size: 16px; +// +// @default-bookmark-radius: 3px; +// +// @screen-desktop-low : 984px; +// @screen-desktop-large : 1200px; \ No newline at end of file diff --git a/web/src/assets/less/main.less b/web/src/assets/less/main.less new file mode 100644 index 0000000..d0eae96 --- /dev/null +++ b/web/src/assets/less/main.less @@ -0,0 +1,5 @@ +@import "_base"; +@import "_colors"; +@import "_sizes"; +// @import "_font"; +@import "_icons"; diff --git a/web/src/assets/logo.png b/web/src/assets/logo.png deleted file mode 100644 index f3d2503..0000000 Binary files a/web/src/assets/logo.png and /dev/null differ diff --git a/web/src/components/HelloWorld.vue b/web/src/components/HelloWorld.vue deleted file mode 100644 index a8674f3..0000000 --- a/web/src/components/HelloWorld.vue +++ /dev/null @@ -1,122 +0,0 @@ -<template> - <div class="hello"> - <h1>{{ msg }}</h1> - <p> - For a guide and recipes on how to configure / customize this project,<br /> - check out the - <a href="https://cli.vuejs.org" target="_blank" rel="noopener" - >vue-cli documentation</a - >. - </p> - <h3>Installed CLI Plugins</h3> - <ul> - <li> - <a - href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" - target="_blank" - rel="noopener" - >babel</a - > - </li> - <li> - <a - href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" - target="_blank" - rel="noopener" - >router</a - > - </li> - <li> - <a - href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" - target="_blank" - rel="noopener" - >eslint</a - > - </li> - </ul> - <h3>Essential Links</h3> - <ul> - <li> - <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a> - </li> - <li> - <a href="https://forum.vuejs.org" target="_blank" rel="noopener" - >Forum</a - > - </li> - <li> - <a href="https://chat.vuejs.org" target="_blank" rel="noopener" - >Community Chat</a - > - </li> - <li> - <a href="https://twitter.com/vuejs" target="_blank" rel="noopener" - >Twitter</a - > - </li> - <li> - <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a> - </li> - </ul> - <h3>Ecosystem</h3> - <ul> - <li> - <a href="https://router.vuejs.org" target="_blank" rel="noopener" - >vue-router</a - > - </li> - <li> - <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a> - </li> - <li> - <a - href="https://github.com/vuejs/vue-devtools#vue-devtools" - target="_blank" - rel="noopener" - >vue-devtools</a - > - </li> - <li> - <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener" - >vue-loader</a - > - </li> - <li> - <a - href="https://github.com/vuejs/awesome-vue" - target="_blank" - rel="noopener" - >awesome-vue</a - > - </li> - </ul> - </div> -</template> - -<script> -export default { - name: "HelloWorld", - props: { - msg: String - } -}; -</script> - -<!-- Add "scoped" attribute to limit CSS to this component only --> -<style scoped> -h3 { - margin: 40px 0 0; -} -ul { - list-style-type: none; - padding: 0; -} -li { - display: inline-block; - margin: 0 10px; -} -a { - color: #42b983; -} -</style> diff --git a/web/src/components/layout/Footer.vue b/web/src/components/layout/Footer.vue new file mode 100644 index 0000000..3c5c75f --- /dev/null +++ b/web/src/components/layout/Footer.vue @@ -0,0 +1,62 @@ +<template> + <footer> + <p> + Fait avec <i class="icon icon-heart"></i> par + <a href="http://www.codelutin.com" title="Code Lutin"><i class="icon icon-lutin"></i></a> + </p> + <p> + <a href="http://www.chorem.org/projects/bow">bow</a> - + <a href="http://www.gnu.org/licenses/agpl.html">License</a> - + <span title="Copyright">©2010-2018</span> + <a href="http://www.codelutin.com">Code Lutin</a> - + <a href="http://www.chorem.org/projects/bow/issues">Bug report</a> - + <a href="http://list.chorem.org/cgi-bin/mailman/listinfo/bow-users">Support</a> - + </p> + </footer> +</template> + +<script> +import { Component, Vue } from 'vue-property-decorator' + +@Component({ + name: 'Footer', + components: {} +}) +class Footer extends Vue { +} + +export default Footer +</script> + +<style scoped lang="less"> + footer { + height: var(--footer-height); + + padding: var(--margin--small); + margin-top: calc(-1 * var(--footer-height)); + + text-align: center; + color: #CCC; + + p { + margin-top: var(--margin--small); + } + + a { + color: inherit; + + &:hover { + color: var(--color-hover); + } + } + + .icon { + margin-left: var(--margin--tiny);; + margin-right: var(--margin--tiny);; + } + .icon-lutin { + font-size: 140%; + } + } + +</style> diff --git a/web/src/components/layout/Header.vue b/web/src/components/layout/Header.vue new file mode 100644 index 0000000..4cdc293 --- /dev/null +++ b/web/src/components/layout/Header.vue @@ -0,0 +1,60 @@ +<template> + <header> + <router-link to="/" class="header-logo"> + <img alt="Bow logo" src="../../assets/img/logos/bow-text.svg"> + </router-link> + + <div id="header-user-infos"> + <router-link to="/login">Login</router-link> + + <!-- <a href="/preferences" cssClass="header-link">User Login</a> + <a href="/logout" class="header-link"> + <i class="icon-logout icon"></i> + </a> --> + </div> + </header> +</template> + +<script> +import { Component, Vue } from 'vue-property-decorator' + +@Component({ + name: 'Header', + components: {} +}) +class Header extends Vue { +} + +export default Header +</script> + +<style scoped lang="less"> + header { + display: flex; + flex-direction: row; + align-items: center; + + height: var(--header-height); + + border-bottom: 1px solid #EEE; + + & > a, + & > div { + flex: 1; + height: 100%; + + padding: var(--margin--medium); + } + } + + .header-logo { + text-align: left; + } + + #header-user-infos { + display: flex; + flex-direction: row; + align-items: center; + justify-content: right; + } +</style> diff --git a/web/src/components/layout/Sidebar.vue b/web/src/components/layout/Sidebar.vue new file mode 100644 index 0000000..a59c81a --- /dev/null +++ b/web/src/components/layout/Sidebar.vue @@ -0,0 +1,117 @@ +<template> + <div class="sidebar"> + <div class="sidebar-logo"> + <a href="/"><img src="../../assets/img/logos/bow.svg" alt="Bow Logo" /></a> + </div> + <div class="sidebar-menu"> + <div class="sidebar-menu-link"> + <router-link to="/about">About</router-link> + </div> + </div> + </div> +</template> + +<script> +import { Component, Vue } from 'vue-property-decorator' + +@Component({ + name: 'Sidebar', + components: {} +}) +class Sidebar extends Vue { +} + +export default Sidebar +</script> + +<style scoped lang="less"> + .sidebar { + position: fixed; + left: 0; + + width: var(--sidebar-width); + height: 100%; + /* FIXME LK : TMP */ overflow: hidden; + } + + .sidebar-logo { + display: flex; + justify-content: center; + position: fixed; + + width: var(--sidebar-width); + height: var(--header-height); + padding: 20px; + + text-align: center; + + background-color: #FFF; + border-right: 1px solid #EEE; + + font-size: 36px; + } + + .sidebar-menu { + display: flex; + flex-direction: column; + justify-content: space-between; + + height: 100%; + padding-top: var(--header-height); + + background-color: var(--color-bg-sidebar); + } + + + .sidebar-menu-link { + display: flex; + justify-content: center; + align-items: center; + + position: relative; + flex: 1; + max-height: 150px; + + text-align: center; + + .icon { + color: var(--color-white); + font-size: 30px; + } + a, + span { + width: 100%; + + z-index: 10; + } + a { + display: flex; + align-items: center; + justify-content: center; + + height: 100%; + } + &:hover .icon { + color: #FFF; + } + &:before{ + content: ''; + position: absolute; + top: 0; + left: 0; + + height: 100%; + width: 0; + + background-color: var(--color-hover); + opacity: 0; + + transition: width 0.4s ease-in-out, opacity 0.4s ease-in-out; + } + &:hover:before { + width: 100%; + + opacity: 1; + } + } +</style> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.