From: Benjamin Auder Date: Mon, 13 Apr 2020 08:27:53 +0000 (+0200) Subject: Improve login/register page presentation X-Git-Url: https://git.auder.net/variants/Chakart/doc/scripts/pieces/css/DESCRIPTION?a=commitdiff_plain;h=8bbf9c0242c5430a7531b0eb88e30bf61018446a;p=vchess.git Improve login/register page presentation --- diff --git a/client/public/images/icons/SOURCE b/client/public/images/icons/SOURCE index 235d0b93..2946454f 100644 --- a/client/public/images/icons/SOURCE +++ b/client/public/images/icons/SOURCE @@ -17,3 +17,4 @@ https://www.flaticon.com/free-icon/clear_1632708?term=delete&page=1&position=3 https://iconscout.com/icon/discord-1 https://www.onlinewebfonts.com/icon/154680 https://www.flaticon.com/free-icon/bleach_481058?term=triangle&page=1&position=2 +https://www.onlinewebfonts.com/icon/89755 diff --git a/client/public/images/icons/rightArrow.svg b/client/public/images/icons/rightArrow.svg new file mode 100644 index 00000000..1d79d37d --- /dev/null +++ b/client/public/images/icons/rightArrow.svg @@ -0,0 +1,7 @@ + + + + + Svg Vector Icons : http://www.onlinewebfonts.com/icon + + \ No newline at end of file diff --git a/client/src/components/UpsertUser.vue b/client/src/components/UpsertUser.vue index dc948cf1..6fc67742 100644 --- a/client/src/components/UpsertUser.vue +++ b/client/src/components/UpsertUser.vue @@ -10,7 +10,21 @@ div ) .card label.modal-close(for="modalUser") - h3.section {{ st.tr[stage] }} + h3.section + span.title {{ st.tr[stage] }} + | ( + span.link( + v-if="stage!='Update'" + @click="toggleStage()" + ) + | {{ st.tr[stage=="Login" ? "Register" : "Login"] }} + span.link( + v-else + @click="doLogout()" + ) + | {{ st.tr["Logout"] }} + img(src="/images/icons/rightArrow.svg") + | ) div(@keyup.enter="onSubmit()") div(v-show="stage!='Login'") fieldset @@ -38,20 +52,8 @@ div type="text" v-model="nameOrEmail" ) - .button-group - button(@click="onSubmit()") - span {{ st.tr[submitMessage] }} - button( - v-if="stage!='Update'" - type="button" - @click="toggleStage()" - ) - span {{ st.tr[stage=="Login" ? "Register" : "Login"] }} - button( - v-else type="button" - @click="doLogout()" - ) - span {{ st.tr["Logout"] }} + button#submitBtn(@click="onSubmit()") + | {{ st.tr[submitMessage] }} #dialog.text-center {{ st.tr[infoMsg] }} @@ -206,6 +208,22 @@ export default { max-width: 450px max-height: 100% +h3.section + span.title + padding-right: 10px + span.link + color: darkred + font-size: 0.8em + text-decoration: underline + cursor: pointer + img + height: 1em + padding-left: 5px + +#submitBtn + width: 50% + margin: 0 auto + #dialog padding: 5px color: blue