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

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

@ -106,16 +106,19 @@ useTitle(() => title.value)
}
konrad marked this conversation as resolved Outdated
dpschen commented 2021-12-09 18:01:28 +00:00
Outdated
Review
Copy Link

Picky: new css love: use margin-block: 1rem; => transformed by postcss-preset-env. Reason: you don't want to define the inline (left, right) value, but do it here as a sideeffect.

Picky: new css love: use `margin-block: 1rem;` => transformed by postcss-preset-env. Reason: you don't want to define the inline (left, right) value, but do it here as a sideeffect.
konrad commented 2021-12-11 19:52:42 +00:00
Outdated
Review
Copy Link

hmm it looks like this isn't transformed. But it definitely is a nice propery.

hmm it looks like this isn't transformed. But it definitely is a nice propery.
dpschen commented 2021-12-12 14:45:31 +00:00
Outdated
Review
Copy Link

I checked this again.

I think that the browsers that we want to support according to our browserslist all support it natively so there is no need for postcss-preset-env to transform it =)

Because it does do that via postcss-logical

I checked this again. I think that the browsers that we want to support according to our browserslist all support it natively so there is no need for postcss-preset-env to transform it =) Because it does do that via [postcss-logical](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-logical)
👍 1
.content {
width: 50%;
padding: 2rem 2rem 1.5rem;
display: flex;
konrad marked this conversation as resolved Outdated
dpschen commented 2021-12-09 17:38:38 +00:00
Outdated
Review
Copy Link

Add class to Message component and use that.
=> By using a class inside the component we would create an implicit dependency.

Add class to Message component and use that. => By using a class inside the component we would create an implicit dependency.
konrad commented 2021-12-11 19:37:57 +00:00
Outdated
Review
Copy Link

It looks like the class here wasn't used anywhere. I've removed it.

It looks like the class here wasn't used anywhere. I've removed it.
👍 1
dpschen commented 2021-12-12 14:21:19 +00:00
Outdated
Review
Copy Link

Use mobile first:

.content {
    // start with common stuff
    display: flex;
    justify-content: space-between;
    flex-direction: column;
	padding: 2rem 2rem 1.5rem;
    
    // define stuff that applies mobile only
	@media screen and (max-width: $desktop) {
        width: 100%;
		max-width: 450px;
		margin-inline: auto;
	}
    
    // define desktop only stuff
    @media screen and (min-width: $desktop) {
		width: 50%;
	}
}
Use mobile first: ```scss .content { // start with common stuff display: flex; justify-content: space-between; flex-direction: column; padding: 2rem 2rem 1.5rem; // define stuff that applies mobile only @media screen and (max-width: $desktop) { width: 100%; max-width: 450px; margin-inline: auto; } // define desktop only stuff @media screen and (min-width: $desktop) { width: 50%; } } ```
konrad commented 2021-12-12 14:56:14 +00:00
Outdated
Review
Copy Link

Done!

Done!
justify-content: space-between;
flex-direction: column;
padding: 2rem 2rem 1.5rem;
@media screen and (max-width: $desktop) {
width: 100%;
max-width: 450px;
margin: 0 auto;
margin-inline: auto;
}
@media screen and (min-width: $desktop) {
width: 50%;
}
}