Browse Source

fix(gui-v2): overflow container on signin/signup forms

# What's changed?

* increase signup form size by logo height so we can properly scroll the form
pull/2718/head
braks 2 years ago
parent
commit
a35dffdd3c
  1. 13
      packages/nc-gui-v2/assets/style-v2.css
  2. 13
      packages/nc-gui-v2/pages/projects/index.vue
  3. 10
      packages/nc-gui-v2/pages/signin.vue
  4. 4
      packages/nc-gui-v2/pages/signup.vue

13
packages/nc-gui-v2/assets/style-v2.css

@ -2,7 +2,18 @@ html,
body,
#__nuxt,
.v-application__wrap {
@apply m-0 h-[100vh] w-[100vw] bg-white dark:(bg-black text-white);
@apply m-0 h-full w-full bg-white dark:(bg-black text-white);
}
.v-main {
@apply w-full h-full;
overflow: hidden;
flex: unset !important;
}
.v-main .v-main__wrap {
@apply flex-0 w-full relative scrollbar-thin-primary;
overflow-x: hidden;
}
nav,

13
packages/nc-gui-v2/pages/projects/index.vue

@ -130,16 +130,3 @@ const activePage = $ref(navDrawerOptions[0].title)
</v-container>
</NuxtLayout>
</template>
<style scoped>
.v-main {
@apply w-full;
overflow: hidden;
flex: unset !important;
}
:deep(.v-main__wrap) {
@apply flex-0 w-full relative scrollbar-thin-primary;
overflow-x: hidden;
}
</style>

10
packages/nc-gui-v2/pages/signin.vue

@ -120,13 +120,13 @@ const resetError = () => {
@focus="resetError"
/>
<div class="self-end">
<div class="hidden md:block self-end mx-8">
<nuxt-link class="prose-sm text-primary underline hover:opacity-75" to="/forgot-password">
{{ $t('msg.info.signUp.forgotPassword') }}
</nuxt-link>
</div>
<div class="self-center flex items-center justify-between w-100">
<div class="self-center flex flex-wrap gap-4 items-center mt-4 md:mx-8 md:justify-between justify-center w-full">
<button
:disabled="!valid"
:class="[
@ -143,6 +143,12 @@ const resetError = () => {
{{ $t('msg.info.signUp.dontHaveAccount') }}
<nuxt-link class="text-primary underline hover:opacity-75" to="/signup">{{ $t('general.signUp') }}</nuxt-link>
</div>
<div class="prose-sm md:hidden">
<nuxt-link class="prose-sm text-primary underline hover:opacity-75" to="/forgot-password">
{{ $t('msg.info.signUp.forgotPassword') }}
</nuxt-link>
</div>
</div>
</div>
</div>

4
packages/nc-gui-v2/pages/signup.vue

@ -64,7 +64,7 @@ const resetError = () => {
<v-form
ref="formValidator"
v-model="valid"
class="h-full min-h-[600px] flex justify-center items-center"
class="h-[calc(100%_+_90px)] min-h-[600px] flex justify-center items-center"
@submit.prevent="signUp"
>
<div class="h-full w-full flex flex-col flex-wrap justify-center items-center">
@ -112,7 +112,7 @@ const resetError = () => {
<v-text-field
id="password_repeat"
v-model="form.password"
v-model="form.passwordRepeat"
class="bg-white dark:!bg-gray-900"
:rules="formRules.passwordRepeat"
:label="`Repeat ${$t('labels.password')}`"

Loading…
Cancel
Save