vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

feat: restyle unauthenticated screens #1103

Merged
dpschen merged 29 commits from feature/login-pages into main 2021-12-12 16:40:14 +00:00
Conversation 12 Commits 29 Files Changed 10 +8 -13
5 changed files with 8 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit eb6347712e - Show all commits

10
src/components/misc/no-auth-wrapper.vue
View File

@ -14,6 +14,8 @@
</section>
<section class="content">
<slot/>
<legal/>
</section>
</div>
</div>
@ -21,7 +23,8 @@
<script setup>
import Logo from '@/components/home/Logo.vue'
import message from '@/components/misc/message'
import Message from '@/components/misc/message'
konrad marked this conversation as resolved Outdated
dpschen commented 2021-11-28 14:59:38 +00:00
Outdated
Review
Copy Link

Use @

Use `@`
konrad commented 2021-12-11 17:26:40 +00:00
Outdated
Review
Copy Link

Done.

Done.
👍 1
import Legal from '../../components/misc/legal'
import {useStore} from 'vuex'
import {computed} from 'vue'
@ -72,7 +75,10 @@ const motd = computed(() => store.state.config.motd)
.content {
width: 50%;
padding: 2rem;
padding: 2rem 2rem 1.5rem;
display: flex;
justify-content: space-between;
flex-direction: column;
}
.logo {
konrad marked this conversation as resolved Outdated
dpschen commented 2021-12-09 17:25:21 +00:00
Outdated
Review
Copy Link

Since the image is defined via CSS:
Not sure why the overlay is needed at all:
If the image uses flex itself you could position the title and message directly as a child.

Title could have: margin-top: auto or justify-self: flex-end. I think both should work.

EDIT:
I just saw that the overlay is used for the background-overlay. But the same could be archieved without DOM impact / new element by styling a ::after.

I got a warning for end so I guess it's still better to use flex-end.
=> Maybe support is better, and it seems that postcss-preset-env / autoprefixer doesn't change this automatically.

Picky: same for background as above.

Since the image is defined via CSS: Not sure why the overlay is needed at all: If the image uses flex itself you could position the title and message directly as a child. Title could have: `margin-top: auto` or `justify-self: flex-end`. I think both should work. **EDIT:** I just saw that the overlay is used for the background-overlay. But the same could be archieved without DOM impact / new element by styling a `::after`. I got a warning for `end` so I guess it's still better to use `flex-end`. => Maybe support is better, and it seems that postcss-preset-env / autoprefixer doesn't change this automatically. Picky: same for background as above.
konrad commented 2021-12-11 19:51:15 +00:00
Outdated
Review
Copy Link

Moved this to an after pseudo class.

Moved this to an after pseudo class.

4
src/views/user/Login.vue
View File

@ -95,8 +95,6 @@
{{ $t('user.auth.loginWith', {provider: p.name}) }}
</x-button>
</div>
<legal/>
</div>
</template>
@ -105,7 +103,6 @@ import {mapState} from 'vuex'
import {HTTPFactory} from '@/http-common'
import {LOADING} from '@/store/mutation-types'
import legal from '../../components/misc/legal'
import ApiConfig from '@/components/misc/api-config.vue'
import {getErrorText} from '@/message'
import Message from '@/components/misc/message'
@ -116,7 +113,6 @@ export default {
components: {
Message,
ApiConfig,
legal,
},
data() {
return {

2
src/views/user/PasswordReset.vue
View File

@ -59,7 +59,6 @@
{{ $t('user.auth.login') }}
</x-button>
</div>
<Legal/>
</div>
</template>
@ -67,7 +66,6 @@
import {ref, reactive} from 'vue'
import {useI18n} from 'vue-i18n'
import Legal from '@/components/misc/legal'
import PasswordResetModel from '@/models/passwordReset'
import PasswordResetService from '@/services/passwordReset'
import {useTitle} from '@/composables/useTitle'

2
src/views/user/Register.vue
View File

@ -89,7 +89,6 @@
{{ errorMessage }}
</message>
</form>
<legal/>
</div>
</template>
@ -100,7 +99,6 @@ import {useI18n} from 'vue-i18n'
import router from '@/router'
import {store} from '@/store'
import {useTitle} from '@/composables/useTitle'
import Legal from '@/components/misc/legal'
import Message from '@/components/misc/message'
// FIXME: use the `beforeEnter` hook of vue-router

3
src/views/user/RequestPasswordReset.vue
View File

@ -42,7 +42,6 @@
{{ $t('user.auth.login') }}
</x-button>
</div>
<Legal/>
</div>
</template>
@ -50,8 +49,6 @@
import {ref, reactive} from 'vue'
import {useI18n} from 'vue-i18n'
import Legal from '@/components/misc/legal'
import PasswordResetModel from '@/models/passwordReset'
import PasswordResetService from '@/services/passwordReset'
import {useTitle} from '@/composables/useTitle'