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

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

@ -2,15 +2,13 @@
<div class="no-auth-wrapper">
<Logo class="logo" width="200" height="58"/>
<div class="noauth-container">
<section class="image">
<div class="overlay" :class="{'has-message': motd !== ''}">
<Message v-if="motd !== ''">
{{ motd }}
</Message>
<h2 class="title">
{{ $t('misc.welcomeBack') }}
</h2>
</div>
<section class="image" :class="{'has-message': motd !== ''}">
<Message v-if="motd !== ''">
{{ motd }}
</Message>
<h2 class="title">
{{ $t('misc.welcomeBack') }}
</h2>
</section>
<section class="content">
<slot/>
@ -60,25 +58,7 @@ const motd = computed(() => store.state.config.motd)
.image {
width: 50%;
@media screen and (max-width: $tablet) {
display: none;
}
@media screen and (min-width: $tablet) {
background: url('@/assets/no-auth-image.jpg') no-repeat bottom/cover;
position: relative;
}
}
.overlay {
padding: 1rem;
konrad marked this conversation as resolved Outdated
dpschen commented 2021-11-28 15:43:08 +00:00
Outdated
Review
Copy Link

Use mobile first:

.image {
    @media screen and (max-width: $tablet) {
        display: none;
    }
    @media screen and (min-width: $tablet) {
        width: 40%;
        background: url('@/assets/no-auth-image.jpg') no-repeat bottom/cover;
        position: relative;
    }
    @media screen and (min-width: $desktop) {
        width: 60%;
    }
}

Compress image and load with something like https://github.com/JonasKruckenberg/imagetools

Use mobile first: ```scss .image { @media screen and (max-width: $tablet) { display: none; } @media screen and (min-width: $tablet) { width: 40%; background: url('@/assets/no-auth-image.jpg') no-repeat bottom/cover; position: relative; } @media screen and (min-width: $desktop) { width: 60%; } } ``` Compress image and load with something like https://github.com/JonasKruckenberg/imagetools
konrad commented 2021-12-11 19:44:06 +00:00
Outdated
Review
Copy Link

Compress image and load with something like https://github.com/JonasKruckenberg/imagetools

With the vite wrapper and use it for other images as well?

> Compress image and load with something like https://github.com/JonasKruckenberg/imagetools With the vite wrapper and use it for other images as well?
dpschen commented 2021-12-12 15:02:55 +00:00
Outdated
Review
Copy Link

Yes. But maybe let's move this to a new issue.

Yes. But maybe let's move this to a new issue.
👍 1
konrad commented 2021-12-12 15:03:23 +00:00
Outdated
Review
Copy Link

yeah I think we should.

yeah I think we should.
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .2);
display: flex;
flex-direction: column;
justify-content: end;
@ -86,6 +66,30 @@ const motd = computed(() => store.state.config.motd)
&.has-message {
justify-content: space-between;
}
&::after {
content: '';
position: absolute;
top: 0;
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);
z-index: 10;
}
> * {
z-index: 20;
}
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.
@media screen and (max-width: $tablet) {
display: none;
}
@media screen and (min-width: $tablet) {
background: url('@/assets/no-auth-image.jpg') no-repeat bottom/cover;
position: relative;
}
dpschen marked this conversation as resolved Outdated
dpschen commented 2021-12-09 17:58:49 +00:00
Outdated
Review
Copy Link

If .image is either 40% or 60% why is this 50% wide? Also use mobile first for the width value.

If `.image` is either 40% or 60% why is this 50% wide? Also use mobile first for the width value.
konrad commented 2021-12-11 17:37:23 +00:00
Outdated
Review
Copy Link

Change it so everything is always 50%. That seems to work great.

Also use mobile first for the width value.

I'm not quite sure why but it does not work when I only use min-width: $desktop.

Change it so everything is always 50%. That seems to work great. > Also use mobile first for the width value. I'm not quite sure why but it does not work when I only use `min-width: $desktop`.
dpschen commented 2021-12-12 15:16:44 +00:00
Outdated
Review
Copy Link

The default width of a flex child is auto as far as i know.

The default width of a flex child is auto as far as i know.
}
.content {