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 +3 -3
1 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 925e4a5b03 - Show all commits

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

@ -45,14 +45,14 @@ useTitle(() => title.value)
<style lang="scss" scoped>
.no-auth-wrapper {
background-color: var(--site-background);
background: var(--site-background) url('@/assets/llama.svg?url') no-repeat fixed bottom left;
min-height: 100vh;
konrad marked this conversation as resolved Outdated
dpschen commented 2021-12-09 17:41:57 +00:00
Outdated
Review
Copy Link

Picky:
Use background-color => more specific, doesn't change other values if they are set (they are not in this case). Makes it easier to overwrite if necessary.

Picky: Use `background-color` => more specific, doesn't change other values if they are set (they are not in this case). Makes it easier to overwrite if necessary.
display: flex;
flex-direction: column;
place-items: center;
konrad marked this conversation as resolved Outdated
dpschen commented 2021-12-09 17:42:17 +00:00
Outdated
Review
Copy Link

Why overflow: hidden?

Why overflow: hidden?
konrad commented 2021-12-11 17:29:25 +00:00
Outdated
Review
Copy Link

To prevent the background from overflowing in the (rounded) corners.

To prevent the background from overflowing in the (rounded) corners.
@media screen and (min-width: $fullhd) {
background: url('@/assets/llama.svg?url') no-repeat bottom left fixed;
@media screen and (max-width: $fullhd) {
konrad marked this conversation as resolved Outdated
dpschen commented 2021-12-09 17:40:19 +00:00
Outdated
Review
Copy Link

Use mobile first:

	@media screen and (min-width: $desktop) {
    		border-radius: $radius;
    }

=> no need to reset the border-radius for mobile

Use mobile first: ```scss @media screen and (min-width: $desktop) { border-radius: $radius; } ``` => no need to reset the border-radius for mobile
padding-bottom: 15rem;
konrad marked this conversation as resolved Outdated
dpschen commented 2021-12-12 13:41:40 +00:00
Outdated
Review
Copy Link

Just checked this: The llama is so nice, it's too bad it's not visivle on mobile. How about adding a padding-bottom for mobile?

Just checked this: The llama is so nice, it's too bad it's not visivle on mobile. How about adding a padding-bottom for mobile?
konrad commented 2021-12-12 13:54:40 +00:00
Outdated
Review
Copy Link

done!

done!
🎉 1
}
}