branch bow-v2-go updated (4bbf358 -> 3334a36)
This is an automated email from the git hooks/post-receive script. New change to branch bow-v2-go in repository bow. See https://gitlab.nuiton.org/chorem/bow.git from 4bbf358 Mise en place du menu pour mobile/tablette new 14a9778 Réorganisation des fichiers de style Less new 9b374b1 Modifications d'affichage des boutons new e5b5fe2 Modifications d'affichage du menu principal new 593e29b Modifications d'affichage des formulaires new 3334a36 Ajout de la police Fira The 5 revisions listed above as "new" are entirely new to this repository and will be described in separate emails. The revisions listed as "adds" were already present in the repository and have only been added to this reference. Detailed log of new commits: commit 3334a36b89219b25ca542b8556f781cf57dbf0e8 Author: kaufmann <kaufmann@codelutin.com> Date: Wed Aug 5 17:53:10 2020 +0200 Ajout de la police Fira commit 593e29b3111b2822929062bd6c574e2168b449f7 Author: kaufmann <kaufmann@codelutin.com> Date: Wed Aug 5 17:51:29 2020 +0200 Modifications d'affichage des formulaires commit e5b5fe235d808334dbacef4b7e9cbb4baa5feb55 Author: kaufmann <kaufmann@codelutin.com> Date: Wed Aug 5 17:50:05 2020 +0200 Modifications d'affichage du menu principal commit 9b374b14adba4cce735939b49e7d2e3cbb9db3d6 Author: kaufmann <kaufmann@codelutin.com> Date: Wed Aug 5 17:49:52 2020 +0200 Modifications d'affichage des boutons commit 14a97783fcf3d4a58e568edb2de2c44d932160a6 Author: kaufmann <kaufmann@codelutin.com> Date: Wed Aug 5 17:49:29 2020 +0200 Réorganisation des fichiers de style Less Summary of changes: web/src/App.vue | 13 ++-- web/src/assets/font/FiraSans-Bold.otf | Bin 0 -> 369296 bytes web/src/assets/font/FiraSans-Regular.otf | Bin 0 -> 357996 bytes web/src/assets/less/_base.less | 2 +- web/src/assets/less/_colors.less | 47 +++---------- web/src/assets/less/_globals.less | 30 -------- web/src/assets/less/_sizes.less | 21 ------ web/src/assets/less/_templates.less | 18 ----- web/src/assets/less/_theme-default.less | 44 ++++++++++++ web/src/assets/less/_titles.less | 17 ----- web/src/assets/less/globals.less | 2 + web/src/assets/less/main.less | 6 +- web/src/components/Bookmark.vue | 4 +- web/src/components/CloudTags.vue | 4 +- web/src/components/Navigation.vue | 4 +- web/src/components/common/Button.vue | 49 +++++-------- web/src/components/common/FormRow.vue | 44 ++++++++++++ web/src/components/common/PageMainTitle.vue | 30 ++++++++ web/src/components/common/TagsInput.vue | 9 ++- web/src/components/layout/Header.vue | 8 +-- web/src/components/layout/HeaderSearchInput.vue | 2 +- web/src/components/layout/Sidebar.vue | 33 +++++++-- web/src/components/layout/SidebarLink.vue | 15 ++-- web/src/views/BookmarkEdit.vue | 88 ++++++++++++++---------- web/src/views/Login.vue | 44 +++++++----- 25 files changed, 286 insertions(+), 248 deletions(-) create mode 100644 web/src/assets/font/FiraSans-Bold.otf create mode 100644 web/src/assets/font/FiraSans-Regular.otf delete mode 100644 web/src/assets/less/_globals.less delete mode 100644 web/src/assets/less/_sizes.less delete mode 100644 web/src/assets/less/_templates.less create mode 100644 web/src/assets/less/_theme-default.less delete mode 100644 web/src/assets/less/_titles.less create mode 100644 web/src/assets/less/globals.less create mode 100644 web/src/components/common/FormRow.vue create mode 100644 web/src/components/common/PageMainTitle.vue -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
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 14a97783fcf3d4a58e568edb2de2c44d932160a6 Author: kaufmann <kaufmann@codelutin.com> Date: Wed Aug 5 17:49:29 2020 +0200 Réorganisation des fichiers de style Less --- web/src/App.vue | 13 +++---- web/src/assets/less/_base.less | 2 +- web/src/assets/less/_colors.less | 47 ++++++------------------- web/src/assets/less/_globals.less | 30 ---------------- web/src/assets/less/_sizes.less | 21 ----------- web/src/assets/less/_templates.less | 18 ---------- web/src/assets/less/_theme-default.less | 44 +++++++++++++++++++++++ web/src/assets/less/_titles.less | 17 --------- web/src/assets/less/globals.less | 2 ++ web/src/assets/less/main.less | 6 +--- web/src/components/Bookmark.vue | 4 +-- web/src/components/CloudTags.vue | 4 +-- web/src/components/Navigation.vue | 4 +-- web/src/components/layout/Header.vue | 8 ++--- web/src/components/layout/HeaderSearchInput.vue | 2 +- 15 files changed, 74 insertions(+), 148 deletions(-) diff --git a/web/src/App.vue b/web/src/App.vue index a4e7b57..5c70801 100644 --- a/web/src/App.vue +++ b/web/src/App.vue @@ -72,19 +72,16 @@ export default App <style lang="less"> @import './assets/less/main'; - -body { - background-color: var(--color-bg); -} +@import './assets/less/globals'; #app { - font-family: Avenir, Helvetica, Arial, sans-serif; + color: var(--color-text); + font-family: var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - text-align: center; - color: #2c3e50; -} + background-color: var(--color-bg); +} main { min-height: 100vh; diff --git a/web/src/assets/less/_base.less b/web/src/assets/less/_base.less index 7490175..3bb11e4 100644 --- a/web/src/assets/less/_base.less +++ b/web/src/assets/less/_base.less @@ -24,7 +24,7 @@ textarea { } select { - padding: var(--default-marge--small) var(--default-marge--medium); + padding: var(--margin--small) var(--margin--medium); background-color: inherit; border: 1px solid var(--color-main); diff --git a/web/src/assets/less/_colors.less b/web/src/assets/less/_colors.less index 4def905..872f5d1 100644 --- a/web/src/assets/less/_colors.less +++ b/web/src/assets/less/_colors.less @@ -1,45 +1,18 @@ * { - --color-link : var(--color-analog); - --color-hover : var(--color-complementary); - --color-active : var(--color-complementary--darker); + --color-text : #2c3e50; + --color-bg : var(--color-white); --color-bg-sidebar : var(--color-black); - - --color-error : var(--color-complementary); - - --color-text : var(--color-black); - --color-bookmarks-header : var(--color-grey-pale); --color-separation-border : #EEE; -} - - /* - --color-green-2 : #057974; - --color-grey : #999; ---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-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-form-label : lighten(@color-black, 25%); -@color-form-input-border : @color-grey; + --color-link : var(--color-analog); + --color-hover : var(--color-complementary); + --color-active : var(--color-complementary--darker); + --color-bookmarks-header : var(--color-white--darker); + --color-bookmark-bg : #FAFDFD; -@color-text-secondary : @color-grey; + --color-list-bg-odd : #E9F2F5; + --color-list-bg-even : #d7e8ed; +} -*/ diff --git a/web/src/assets/less/_globals.less b/web/src/assets/less/_globals.less deleted file mode 100644 index d157add..0000000 --- a/web/src/assets/less/_globals.less +++ /dev/null @@ -1,30 +0,0 @@ -:root { - --font: 'Fira Sans'; - --font-size : 16px; - - - --color-main : #09827C; //#079992; - --color-main--darker : #07625E; //#057974; - --color-complementary : #b71540; - --color-complementary--darker : #450818; //darken(@color-red, 25%); - --color-analog : #0a3d62; - --color-black : #1e2a2f; - --color-grey : #999999; - --color-grey-pale : #F4F4F4; - --color-white : #FFF; - --color-bg-bookmark : #FAFDFD; - - --default-footer-height : 100px; - - --default-marge--tiny: 5px; - --default-marge--small: 10px; - --default-marge--medium: 30px; - --default-marge--large: 50px; - - - --default-bookmark-radius : 3px; - -} - -@screen-desktop-low : 984px; -@screen-desktop-large : 1200px; diff --git a/web/src/assets/less/_sizes.less b/web/src/assets/less/_sizes.less deleted file mode 100644 index 736f6fb..0000000 --- a/web/src/assets/less/_sizes.less +++ /dev/null @@ -1,21 +0,0 @@ -* { - --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/_templates.less b/web/src/assets/less/_templates.less deleted file mode 100644 index d194b2c..0000000 --- a/web/src/assets/less/_templates.less +++ /dev/null @@ -1,18 +0,0 @@ -.template-form-row { - padding-top: var(--margin--small); - padding-bottom: var(--margin--small); - display: flex; - flex-direction: column; - - text-align: left; - - label { - display: block; - float: left; - - margin-bottom: var(--margin--small); - margin-top: var(--margin--small); - font-size: 110%; - min-width: 25%; - } -} \ No newline at end of file diff --git a/web/src/assets/less/_theme-default.less b/web/src/assets/less/_theme-default.less new file mode 100644 index 0000000..b86308b --- /dev/null +++ b/web/src/assets/less/_theme-default.less @@ -0,0 +1,44 @@ +* { + /* Defaults font configuration */ + --font : 'Fira Sans', Helvetica, sans-serif; + --font-size : 16px; + + /* Defaults colors, mainly used in _colors.less */ + --color-main : #097772; //#09827C; + --color-main--darker : #07625E; + --color-complementary : #b71540; + --color-complementary--darker : #450818; + --color-analog : #0a3d62; + --color-analog--darker : #0a3d62; + --color-black : #1e2a2f; + --color-grey : #999999; + --color-white--darker : #F4F4F4; + --color-error : #b71540; + + /* Main display elements default sizes */ + --sidebar-width : 75px; + --header-height : var(--sidebar-width); + --footer-height : 100px; + + /* Default margin between elements */ + --margin--tiny : 5px; + --margin--small : 10px; + --margin--medium : 30px; + --margin--large : 50px; + + /* Some display configuration for reusable components */ + --default-bookmark-radius : 3px; + +} + +@font-face { + font-family: 'Fira Sans'; + src: url('../font/FiraSans-Regular.otf?v=eTg'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'Fira Sans'; + src: url('../font/FiraSans-Bold.otf?v=eTg'); + font-weight: bold; +} \ No newline at end of file diff --git a/web/src/assets/less/_titles.less b/web/src/assets/less/_titles.less deleted file mode 100644 index 95a555e..0000000 --- a/web/src/assets/less/_titles.less +++ /dev/null @@ -1,17 +0,0 @@ -h1 { - margin-bottom: var(--default-marge--medium); - margin-top: var(--default-marge--small); - color: var(--color-main); - - &.list-title, - &.form-title { - margin-top: 0; - margin-bottom: var(--default-marge--small); - padding: var(--default-marge--large); - - text-align: center; - } - &.form-title { - background-color: var(--color-grey-pale); - } -} \ No newline at end of file diff --git a/web/src/assets/less/globals.less b/web/src/assets/less/globals.less new file mode 100644 index 0000000..4aab5b8 --- /dev/null +++ b/web/src/assets/less/globals.less @@ -0,0 +1,2 @@ +@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 index 2781612..5289347 100644 --- a/web/src/assets/less/main.less +++ b/web/src/assets/less/main.less @@ -1,10 +1,6 @@ -@import "_globals"; +@import "_theme-default"; @import "_animations"; @import "_base"; @import "_colors"; -// @import "_font"; @import "_icons"; -@import "_sizes"; -@import "_templates"; -@import "_titles"; diff --git a/web/src/components/Bookmark.vue b/web/src/components/Bookmark.vue index 09e5069..e252f37 100644 --- a/web/src/components/Bookmark.vue +++ b/web/src/components/Bookmark.vue @@ -116,8 +116,8 @@ b { margin-bottom: var(--margin--small); - background-color: var(--color-bg-bookmark); - border: 1px solid #eee; + background-color: var(--color-bookmark-bg); + border: 1px solid var(--color-separation-border); .screenshot { flex-grow: 0; diff --git a/web/src/components/CloudTags.vue b/web/src/components/CloudTags.vue index c3e998d..afa777b 100644 --- a/web/src/components/CloudTags.vue +++ b/web/src/components/CloudTags.vue @@ -53,8 +53,8 @@ export default CloudTags justify-content: center; align-items: center; - margin-bottom: var(--default-marge--small); - padding: var(--default-marge--large); + margin-bottom: var(--margin--small); + padding: var(--margin--large); color: white; text-align: center; diff --git a/web/src/components/Navigation.vue b/web/src/components/Navigation.vue index b8d5052..6aa9d46 100644 --- a/web/src/components/Navigation.vue +++ b/web/src/components/Navigation.vue @@ -69,8 +69,8 @@ export default Navigation align-items: center; justify-content: center; - margin: var(--default-marge--medium); - padding: var(--default-marge--small); + margin: var(--margin--medium); + padding: var(--margin--small); background: var(--color-bookmarks-header); border: 1px solid var(--color-separation-border); diff --git a/web/src/components/layout/Header.vue b/web/src/components/layout/Header.vue index b5355d8..000c4a0 100644 --- a/web/src/components/layout/Header.vue +++ b/web/src/components/layout/Header.vue @@ -52,14 +52,14 @@ export default Header </script> <style scoped lang="less"> -@import '../../assets/less/_globals'; +@import '../../assets/less/globals'; header { display: flex; flex-direction: column; align-items: center; justify-content: center; - border-bottom: 1px solid #eee; + border-bottom: 1px solid var(--color-separation-border); #header-search { flex-grow: 2; @@ -101,8 +101,8 @@ header { padding: 20px; background: #CCC; - border-left: 1px solid #EEE; - border-right: 1px solid #EEE; + border-left: 1px solid var(--color-separation-border); + border-right: 1px solid var(--color-separation-border); } #header-user-infos * { diff --git a/web/src/components/layout/HeaderSearchInput.vue b/web/src/components/layout/HeaderSearchInput.vue index a1ee01b..2af88f6 100644 --- a/web/src/components/layout/HeaderSearchInput.vue +++ b/web/src/components/layout/HeaderSearchInput.vue @@ -113,7 +113,7 @@ export default SearchInput & > * { - margin: var(--default-marge--small); + margin: var(--margin--small); } } </style> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
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 9b374b14adba4cce735939b49e7d2e3cbb9db3d6 Author: kaufmann <kaufmann@codelutin.com> Date: Wed Aug 5 17:49:52 2020 +0200 Modifications d'affichage des boutons --- web/src/components/common/Button.vue | 49 ++++++++++++++---------------------- 1 file changed, 19 insertions(+), 30 deletions(-) diff --git a/web/src/components/common/Button.vue b/web/src/components/common/Button.vue index ab7bfcf..6799618 100644 --- a/web/src/components/common/Button.vue +++ b/web/src/components/common/Button.vue @@ -25,56 +25,45 @@ padding: var(--margin--tiny) var(--margin--small); + color: var(--color-main); + font-size: 16px; + background-color: transparent; border: 2px solid var(--color-main); border-right-color: var(--color-main--darker); border-top-color: var(--color-main--darker); border-radius: 2px; - color: var(--color-main); - cursor: pointer; outline: none; - transition: color 0.3s ease , border 1s ease ; - - &::after { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - - background: linear-gradient(to top right, var(--color-main), var(--color-main--darker)); - opacity: 0.2; - - transform: scaleY(0.1); - transform-origin: bottom; - transition: all 0.2s ease-in-out; - z-index: -1; - } + transition: 0.25s ease; &:hover:not(:disabled) { color: white; - &::after { - transform: scaleY(1); - - opacity: 0.8 - } - } - - &:not(:disabled) { + border-color: var(--color-hover); + background: var(--color-hover); + box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.15); cursor: pointer; } + &:disabled { - background-color: #EEE; - color: #777; + color: var(--color-grey); + background-color: var(--color-separation-border); + border-color: var(--color-separation-border); + cursor: not-allowed; } &[filled] { background-color: var(--color-main); color: #FFF; } + + &[primary] { + color: white; + + background-color: var(--color-main); + border-color: var(--color-main--darker); + } } -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
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 e5b5fe235d808334dbacef4b7e9cbb4baa5feb55 Author: kaufmann <kaufmann@codelutin.com> Date: Wed Aug 5 17:50:05 2020 +0200 Modifications d'affichage du menu principal --- web/src/components/layout/Sidebar.vue | 33 ++++++++++++++++++++++++------- web/src/components/layout/SidebarLink.vue | 15 ++++++-------- 2 files changed, 32 insertions(+), 16 deletions(-) diff --git a/web/src/components/layout/Sidebar.vue b/web/src/components/layout/Sidebar.vue index e1bd41f..561f2f7 100644 --- a/web/src/components/layout/Sidebar.vue +++ b/web/src/components/layout/Sidebar.vue @@ -7,20 +7,39 @@ <div id="sidebar-menu" :class="{'opened' : mobileMenuOpened}"> <SidebarLink + v-if="authenticated" title="Add" linkTo="/edit/new" iconName="icon-square-plus"/> <SidebarLink - v-if="user.admin" - title="Stats" - :linkTo="statsUrl" - iconName="icon-graph"/> + v-if="authenticated" + title="(ToDo) Users group" + linkTo="#" + iconName="icon-user-group"/> + + <SidebarLink + v-if="authenticated" + title="(ToDo) Shared Users" + linkTo="#" + iconName="icon-share"/> <SidebarLink title="About" linkTo="/about" iconName="icon-help"/> + + <SidebarLink + v-if="authenticated && user.admin" + title="Stats" + :linkTo="statsUrl" + iconName="icon-graph"/> + + <SidebarLink + v-if="authenticated" + title="(ToDo) Settings" + linkTo="#" + iconName="icon-settings"/> </div> </div> </template> @@ -58,7 +77,7 @@ export default Sidebar </script> <style scoped lang="less"> -@import '../../assets/less/_globals'; +@import '../../assets/less/globals'; #sidebar { position: fixed; @@ -78,7 +97,7 @@ export default Sidebar text-align: center; - border-right: 1px solid #eee; + border-right: 1px solid var(--color-separation-border); font-size: 36px; } @@ -114,7 +133,7 @@ export default Sidebar text-align: center; .icon { - color: var(--color-white); + color: white; font-size: 30px; } a, diff --git a/web/src/components/layout/SidebarLink.vue b/web/src/components/layout/SidebarLink.vue index 9a7537a..a8911a2 100644 --- a/web/src/components/layout/SidebarLink.vue +++ b/web/src/components/layout/SidebarLink.vue @@ -28,7 +28,7 @@ export default SidebarLink </script> <style scoped lang="less"> -@import '../../assets/less/_globals'; +@import '../../assets/less/globals'; .sidebar-menu-link { display: flex; @@ -37,12 +37,12 @@ export default SidebarLink position: relative; flex: 1; - max-height: 150px; + max-height: 25%; text-align: center; .icon { - color: var(--color-white); + color: white; font-size: 30px; } a, @@ -59,7 +59,7 @@ export default SidebarLink height: 100%; } &:hover .icon { - color: #fff; + color: white; } &:before { content: ''; @@ -73,14 +73,11 @@ export default SidebarLink background-color: var(--color-hover); opacity: 0; - transform: scaleX(0); - transform-origin: left; - transition: transform 0.4s ease-in-out, opacity 0.6s ease-in-out; + transition: opacity 0.4s ease-in-out; } &:hover:before { - transform: scaleX(1); opacity: 1; - transition: transform 0.4s ease-in-out, opacity 0.2s ease-in-out; + transition: opacity 0.2s ease-in-out; } a::after { -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
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 593e29b3111b2822929062bd6c574e2168b449f7 Author: kaufmann <kaufmann@codelutin.com> Date: Wed Aug 5 17:51:29 2020 +0200 Modifications d'affichage des formulaires --- web/src/components/common/FormRow.vue | 44 +++++++++++++++ web/src/components/common/PageMainTitle.vue | 30 ++++++++++ web/src/components/common/TagsInput.vue | 9 ++- web/src/views/BookmarkEdit.vue | 88 +++++++++++++++++------------ web/src/views/Login.vue | 44 +++++++++------ 5 files changed, 161 insertions(+), 54 deletions(-) diff --git a/web/src/components/common/FormRow.vue b/web/src/components/common/FormRow.vue new file mode 100644 index 0000000..c411f20 --- /dev/null +++ b/web/src/components/common/FormRow.vue @@ -0,0 +1,44 @@ +<template> + <div class="bow-form-row"> + <slot></slot> + </div> +</template> + +<script> + export default {} +</script> + +<style scoped lang="less"> +@import '../../assets/less/globals'; + +.bow-form-row { + padding-top: var(--margin--small); + padding-bottom: var(--margin--small); + display: flex; + flex-direction: column; + min-width: 90vw; + text-align: left; +} + +label { + display: block; + float: left; + margin-bottom: var(--margin--small); + margin-top: var(--margin--small); + font-size: 110%; + min-width: 25%; +} + + +@media screen and (min-width: @screen-desktop-low) { + .bow-form-row { + min-width: 450px; + } +} + +@media screen and (min-width: @screen-desktop-large) { + .bow-form-row { + min-width: 600px; + } +} +</style> diff --git a/web/src/components/common/PageMainTitle.vue b/web/src/components/common/PageMainTitle.vue new file mode 100644 index 0000000..558d6c8 --- /dev/null +++ b/web/src/components/common/PageMainTitle.vue @@ -0,0 +1,30 @@ +<template> + <h1> + <slot></slot> + </h1> +</template> + +<script> + export default {} +</script> + +<style scoped> +h1 { + margin-bottom: var(--margin--medium); + margin-top: var(--margin--small); + color: var(--color-main); +} + +h1.bow-list-title, +h1.bow-form-title { + margin-top: 0; + margin-bottom: var(--margin--small); + padding: var(--margin--large); + + text-align: center; +} + +h1.bow-form-title { + background-color: var(--color-white--darker); +} +</style> diff --git a/web/src/components/common/TagsInput.vue b/web/src/components/common/TagsInput.vue index b3a1b6d..5fbfa93 100644 --- a/web/src/components/common/TagsInput.vue +++ b/web/src/components/common/TagsInput.vue @@ -93,8 +93,15 @@ class TagsInput extends Vue { export default TagsInput </script> -<style scoped lang="less"> +<style lang="less"> .tags-input { max-width: 100%; + + .ti-input { + background-color: transparent; + color: var(--color-black); + border: 1px solid var(--color-grey); + border-radius: 3px; + } } </style> diff --git a/web/src/views/BookmarkEdit.vue b/web/src/views/BookmarkEdit.vue index 03da800..e40ed0e 100644 --- a/web/src/views/BookmarkEdit.vue +++ b/web/src/views/BookmarkEdit.vue @@ -1,42 +1,64 @@ <template> <div class="bookmark-editor"> - <h1 class="form-title">Ajouter ou modifier une URL</h1> + <PageMainTitle class="bow-form-title"> + Ajouter ou modifier une URL + </PageMainTitle> <div>{{ errorMsg }}</div> <form class="bow-form"> - <BookmarkDate :creationDate="bookmark.importdate || bookmark.creationdate"></BookmarkDate> - - <div class="form-row"> + <FormRow> + <label>Date</label> + <BookmarkDate + :creationDate="bookmark.importdate || bookmark.creationdate" + ></BookmarkDate> + </FormRow> + + <FormRow> <label for="uri">Uri</label> - <input id="uri" type="text" v-model.trim="bookmark.uri" placeholder="add uri" /> - </div> + <input + id="uri" + type="text" + v-model.trim="bookmark.uri" + /> + </FormRow> <!-- <span>{{ bookmark.authenticationinfo }}</span> faire afficher une popup de modification de l'objet auth--> - <div class="form-row"> + <FormRow> <label for="description">Description</label> - <textarea id="description" v-model.trim="bookmark.description" placeholder="add description"></textarea> - </div> + <textarea + id="description" + v-model.trim="bookmark.description" + ></textarea> + </FormRow> - <div class="form-row"> + <FormRow> <label for="tags">Tags</label> <TagsInput id="tags" v-model="bookmark.tags"></TagsInput> - </div> + </FormRow> <!-- <span>{{ bookmark.lang }}</span> --> <!-- <span>{{ bookmark.owner }}</span> si mon id n'est pas le meme alors c'est le bookmark d'un autre partage par un group --> - <div class="form-row"> + <FormRow> <label for="private-alias">Private alias</label> - <input id="private-alias" type="text" v-model.trim="bookmark.privatealias" /> - </div> - - <div class="form-row"> + <input + id="private-alias" + type="text" + v-model.trim="bookmark.privatealias" + /> + </FormRow> + + <FormRow> <label for="public-alias">Public alias</label> - <input id="public-alias" type="text" v-model.trim="bookmark.publicalias" /> - </div> + <input + id="public-alias" + type="text" + v-model.trim="bookmark.publicalias" + /> + </FormRow> <div class="actions"> <Button class="button" v-on:click.prevent="cancel">Cancel</Button> - <Button class="button" v-on:click.prevent="save">Save</Button> + <Button class="button" primary v-on:click.prevent="save">Save</Button> </div> </form> </div> @@ -45,8 +67,10 @@ <script> import { Component, Prop, Vue } from 'vue-property-decorator' import BookmarkDate from '@/components/common/BookmarkDate' -import TagsInput from '@/components/common/TagsInput' import Button from '@/components/common/Button.vue' +import FormRow from '@/components/common/FormRow' +import PageMainTitle from '@/components/common/PageMainTitle' +import TagsInput from '@/components/common/TagsInput' @Component({ name: 'BookmarkEdit', @@ -62,6 +86,8 @@ import Button from '@/components/common/Button.vue' components: { BookmarkDate, Button, + FormRow, + PageMainTitle, TagsInput } }) @@ -182,27 +208,19 @@ export default BookmarkEdit </script> <style lang="less" scoped> -@import '../assets/less/main'; - .bow-form { display: flex; flex-direction: column; width: min-content; - margin: var(--default-marge--small) auto var(--default-marge--large) auto; -} - -.form-row { - .template-form-row(); + margin: var(--margin--small) auto; } -.actions button { - margin-left: 20px; - margin-right: 20px; -} +.actions { + display: flex; + justify-content: space-around; + margin-top: var(--margin--small); + padding: var(--margin--medium) var(--margin--small); -@media screen and (min-width: 984px) { - .form-row { - min-width: 400px; - } + border-top: 5px solid var(--color-white--darker); } </style> \ No newline at end of file diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue index d939d54..6f3fbd0 100644 --- a/web/src/views/Login.vue +++ b/web/src/views/Login.vue @@ -3,19 +3,19 @@ <form> <h1>Connexion</h1> - <div class="form-row"> + <FormRow> <label for="login">Login</label> <input v-model="data.email" type="text" name="login" placeholder="somebody@somewhere.world" /> - </div> + </FormRow> - <div class="form-row"> + <FormRow> <label for="password">Password</label> <input v-model="data.password" type="password" name="password" /> - </div> + </FormRow> - <div class="form-row"> + <FormRow> <Button class="button" v-on:click.prevent="login">Login</Button> - </div> + </FormRow> <div class="form-links"> <SimpleLink href="#" class="link colored-bg">Register</SimpleLink> @@ -31,12 +31,14 @@ <script> import { Component, Vue } from 'vue-property-decorator' import Button from '@/components/common/Button.vue' +import FormRow from '@/components/common/FormRow' import SimpleLink from '@/components/common/SimpleLink.vue' @Component({ name: 'Login', components: { Button, + FormRow, SimpleLink } }) @@ -72,7 +74,11 @@ export default Login </script> <style scoped lang="less"> -@import '../assets/less/main'; +@import '../assets/less/globals'; + +h1 { + color: white; +} .login { display: flex; @@ -95,11 +101,6 @@ export default Login animation: reveal-down 1s ease; } } -.form-row { - .template-form-row(); - - min-width: 300px; -} .form-links { display: flex; @@ -134,14 +135,21 @@ input[type='password'] { .error-message { - padding: var(--margin--small); - min-width: calc(300px + 2 * var(--margin--large)); + background: #e3d0d0; + padding: 20px; + list-style: none; + border-left: 10px solid var(--color-error); + color: var(--color-black); - background: var(--color-complementary); - border-top: 3px solid #fff; - border-radius: 0 0 10px 10px; - font-weight: bold; + font-size:14px; animation: reveal-down 1s ease; } + + +@media screen and (min-width: @screen-desktop-low) { + form { + min-width: 400px; + } +} </style> -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
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 3334a36b89219b25ca542b8556f781cf57dbf0e8 Author: kaufmann <kaufmann@codelutin.com> Date: Wed Aug 5 17:53:10 2020 +0200 Ajout de la police Fira --- web/src/assets/font/FiraSans-Bold.otf | Bin 0 -> 369296 bytes web/src/assets/font/FiraSans-Regular.otf | Bin 0 -> 357996 bytes 2 files changed, 0 insertions(+), 0 deletions(-) diff --git a/web/src/assets/font/FiraSans-Bold.otf b/web/src/assets/font/FiraSans-Bold.otf new file mode 100644 index 0000000..0182159 Binary files /dev/null and b/web/src/assets/font/FiraSans-Bold.otf differ diff --git a/web/src/assets/font/FiraSans-Regular.otf b/web/src/assets/font/FiraSans-Regular.otf new file mode 100644 index 0000000..98ef98c Binary files /dev/null and b/web/src/assets/font/FiraSans-Regular.otf differ -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
participants (1)
-
chorem.org scm