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

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

@ -74,7 +74,7 @@ const motd = computed(() => store.state.config.motd)
left: 0;
konrad marked this conversation as resolved
dpschen commented 2021-12-12 14:14:07 +00:00
Review
Copy Link

Move these rules to the @media screen and (min-width: $tablet) media query
=> makes it clearer that it just appies there.

	width: 50%;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
    
	&::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, .2);
		z-index: 10;
	}

	> * {
		z-index: 20;
	}

Move media queries before &::after and > *
=> those are styling other elements
=> move styles together that style the same stuff

If you change &::after in &::before you can remove the z-index if you replace
z-index: 20; with position: relative (this creates a new stacking context.
=> less complexity with managing z-index.

Move these rules to the `@media screen and (min-width: $tablet)` media query => makes it clearer that it just appies there. ```scss width: 50%; padding: 1rem; display: flex; flex-direction: column; justify-content: flex-end; &::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, .2); z-index: 10; } > * { z-index: 20; } ``` Move media queries before `&::after` and `> *` => those are styling other elements => move styles together that style the same stuff If you change `&::after` in `&::before` you can remove the z-index if you replace `z-index: 20;` with `position: relative` (this creates a new [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context). => less complexity with managing z-index.
konrad commented 2021-12-12 14:52:53 +00:00
Review
Copy Link

Done!

Done!
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .2);
background-color: rgba(0, 0, 0, .2);
z-index: 10;
}