vikunja/frontend
Archived
6
39
Fork 48
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 -4
1 changed files with 0 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit be8f93c50b - Show all commits

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

@ -105,10 +105,6 @@ const motd = computed(() => store.state.config.motd)
margin: 1rem 0;
}
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
.message {
margin: 1rem;
}
.title {
color: var(--white);
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!
font-size: 2.5rem;