Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(presenter): improve sign in/up buttons #383

Merged
merged 9 commits into from
Mar 27, 2024
Merged

fix(presenter): improve sign in/up buttons #383

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
10b1a16
Merge branch 'master' of github.com:dreammall-earth/dreammall.earth
maeckes1 Mar 22, 2024
2bc29e6
[fix] fixed issues with sign in buttons
maeckes1 Mar 22, 2024
87c5e0a
code linting
maeckes1 Mar 22, 2024
f990a04
updated snapshots
maeckes1 Mar 22, 2024
8b7468c
cleand up code
maeckes1 Mar 22, 2024
9dadc39
reduce coverage requirement
ulfgebhardt Mar 26, 2024
0a4c512
Merge branch 'master' into 353-fix-buttons
ulfgebhardt Mar 26, 2024
eb23f82
Merge branch 'master' into 353-fix-buttons
ulfgebhardt Mar 26, 2024
8ce55d7
Merge branch 'master' into 353-fix-buttons
maeckes1 Mar 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions presenter/src/components/language/LanguageSelector.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ const languages = ref(localizedLocale)
@import '#root/src/assets/scss/style';

.language-select {
min-width: 70px;
max-width: 80px;

@include section-content-font;
Expand Down
55 changes: 48 additions & 7 deletions presenter/src/components/menu/HeaderMenu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
<div class="d-flex align-center mr-0 mr-md-8 language-column">
<LanguageSelector />
</div>
<div v-if="showAuthentication" class="d-flex align-center mr-0 mr-md-8">
<div v-if="showAuthentication" class="d-none d-md-flex align-center mr-0 mr-md-8">
<div v-if="auth.isLoggedIn">
<!--<MainButton
variant="third-inverse"
Expand All @@ -36,25 +36,27 @@
/>-->
<MainButton
class="sign-out"
:class="[buttonsInBackground ? 'video-helper' : '']"
variant="third"
label="Sign Out"
size="small"
size="auto"
@click="signOut"
/>
</div>
<div v-else>
<div v-else class="d-flex">
<MainButton
variant="third-inverse"
class="mr-1 sign-in"
class="mr-4 sign-in"
label="Sign in"
size="small"
size="auto"
@click="signIn"
/>
<MainButton
class="sign-up"
:class="[buttonsInBackground ? 'video-helper' : '']"
variant="third"
label="Sign up"
size="small"
size="auto"
@click="signUp"
/>
</div>
Expand All @@ -72,7 +74,7 @@
location="right"
class="nav-drawer d-flex d-md-none"
>
<div class="d-flex flex-column py-8">
<div class="d-flex flex-column pt-8">
<!-- TODO same as above: refactor -->
<AnchorLink
class="ma-4"
Expand All @@ -93,6 +95,34 @@
@click="mobileMenu = !mobileMenu"
></AnchorLink>
</div>
<div v-if="showAuthentication" class="">
<v-divider class="ma-4"></v-divider>
<div v-if="auth.isLoggedIn" class="d-flex flex-column justify-center align-center">
<MainButton
class="sign-out ma-4"
variant="third"
label="Sign Out"
size="auto"
@click="signOut"
/>
</div>
<div v-else class="d-flex flex-column justify-center align-center">
<MainButton
variant="third-inverse"
class="sign-in ma-4"
label="Sign in"
size="auto"
@click="signIn"
/>
<MainButton
class="sign-up ma-4"
variant="third"
label="Sign up"
size="auto"
@click="signUp"
/>
</div>
</div>
</v-navigation-drawer>
</div>
</template>
Expand Down Expand Up @@ -165,20 +195,25 @@ async function signOut() {
const appBackground = ref('transparent')
const navBackground = ref('#d8d8d8')
const mobileMenu = ref(false)
const buttonsInBackground = ref(true)

let videoSlideObserver: IntersectionObserver

function changeAppBarBackground() {
if (appBackground.value !== '#f5f5f5') {
appBackground.value = '#f5f5f5'
navBackground.value = '#f5f5f5'

buttonsInBackground.value = false
}
}

function resetAppBarBackground() {
if (appBackground.value !== 'transparent') {
appBackground.value = 'transparent'
navBackground.value = 'transparent'

buttonsInBackground.value = true
}
}

Expand Down Expand Up @@ -226,6 +261,12 @@ onMounted(() => {
$background-color-primary 0.06%,
$background-color-primary-transition 100%
);

.video-helper {
color: $font-color-default !important;
background-color: transparent !important;
border: 1px solid $font-color-default !important;
}
}
</style>

Expand Down
3 changes: 2 additions & 1 deletion presenter/src/components/menu/__snapshots__/HeaderMenu.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -367,7 +367,7 @@ exports[`HeaderMenu > renders 1`] = `
>

<div
class="d-flex flex-column py-8"
class="d-flex flex-column pt-8"
data-v-5e2a2776=""
>
<!-- TODO same as above: refactor -->
Expand Down Expand Up @@ -456,6 +456,7 @@ exports[`HeaderMenu > renders 1`] = `
<!---->
</a>
</div>
<!--v-if-->

</div>
<!---->
Expand Down
3 changes: 2 additions & 1 deletion presenter/src/layouts/__snapshots__/DefaultLayout.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -377,7 +377,7 @@ exports[`DefaultLayout > renders 1`] = `
>

<div
class="d-flex flex-column py-8"
class="d-flex flex-column pt-8"
data-v-5e2a2776=""
>
<!-- TODO same as above: refactor -->
Expand Down Expand Up @@ -466,6 +466,7 @@ exports[`DefaultLayout > renders 1`] = `
<!---->
</a>
</div>
<!--v-if-->

</div>
<!---->
Expand Down
3 changes: 2 additions & 1 deletion presenter/src/pages/auth/__snapshots__/Page.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -378,7 +378,7 @@ exports[`AuthPage > signin callback without error > renders 1`] = `
>

<div
class="d-flex flex-column py-8"
class="d-flex flex-column pt-8"
data-v-5e2a2776=""
>
<!-- TODO same as above: refactor -->
Expand Down Expand Up @@ -467,6 +467,7 @@ exports[`AuthPage > signin callback without error > renders 1`] = `
<!---->
</a>
</div>
<!--v-if-->

</div>
<!---->
Expand Down
3 changes: 2 additions & 1 deletion presenter/src/pages/datenschutz/__snapshots__/Page.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -377,7 +377,7 @@ exports[`DataPrivacyPage > renders 1`] = `
>

<div
class="d-flex flex-column py-8"
class="d-flex flex-column pt-8"
data-v-5e2a2776=""
>
<!-- TODO same as above: refactor -->
Expand Down Expand Up @@ -466,6 +466,7 @@ exports[`DataPrivacyPage > renders 1`] = `
<!---->
</a>
</div>
<!--v-if-->

</div>
<!---->
Expand Down
3 changes: 2 additions & 1 deletion presenter/src/pages/impressum/__snapshots__/Page.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -377,7 +377,7 @@ exports[`ImpressumPage > renders 1`] = `
>

<div
class="d-flex flex-column py-8"
class="d-flex flex-column pt-8"
data-v-5e2a2776=""
>
<!-- TODO same as above: refactor -->
Expand Down Expand Up @@ -466,6 +466,7 @@ exports[`ImpressumPage > renders 1`] = `
<!---->
</a>
</div>
<!--v-if-->

</div>
<!---->
Expand Down
3 changes: 2 additions & 1 deletion presenter/src/pages/index/__snapshots__/Page.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -378,7 +378,7 @@ exports[`IndexPage > renders 1`] = `
>

<div
class="d-flex flex-column py-8"
class="d-flex flex-column pt-8"
data-v-5e2a2776=""
>
<!-- TODO same as above: refactor -->
Expand Down Expand Up @@ -467,6 +467,7 @@ exports[`IndexPage > renders 1`] = `
<!---->
</a>
</div>
<!--v-if-->

</div>
<!---->
Expand Down
9 changes: 6 additions & 3 deletions presenter/src/pages/optin/__snapshots__/Page.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -378,7 +378,7 @@ exports[`OptinPage > API call with error > renders error message 1`] = `
>

<div
class="d-flex flex-column py-8"
class="d-flex flex-column pt-8"
data-v-5e2a2776=""
>
<!-- TODO same as above: refactor -->
Expand Down Expand Up @@ -467,6 +467,7 @@ exports[`OptinPage > API call with error > renders error message 1`] = `
<!---->
</a>
</div>
<!--v-if-->

</div>
<!---->
Expand Down Expand Up @@ -1878,7 +1879,7 @@ exports[`OptinPage > API call with failure > renders error message 1`] = `
>

<div
class="d-flex flex-column py-8"
class="d-flex flex-column pt-8"
data-v-5e2a2776=""
>
<!-- TODO same as above: refactor -->
Expand Down Expand Up @@ -1967,6 +1968,7 @@ exports[`OptinPage > API call with failure > renders error message 1`] = `
<!---->
</a>
</div>
<!--v-if-->

</div>
<!---->
Expand Down Expand Up @@ -3378,7 +3380,7 @@ exports[`OptinPage > API call with success > renders success 1`] = `
>

<div
class="d-flex flex-column py-8"
class="d-flex flex-column pt-8"
data-v-5e2a2776=""
>
<!-- TODO same as above: refactor -->
Expand Down Expand Up @@ -3467,6 +3469,7 @@ exports[`OptinPage > API call with success > renders success 1`] = `
<!---->
</a>
</div>
<!--v-if-->

</div>
<!---->
Expand Down
3 changes: 2 additions & 1 deletion presenter/src/pages/silent-refresh/__snapshots__/Page.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -378,7 +378,7 @@ exports[`SilentRefreshPage > auth service with succes > renders 1`] = `
>

<div
class="d-flex flex-column py-8"
class="d-flex flex-column pt-8"
data-v-5e2a2776=""
>
<!-- TODO same as above: refactor -->
Expand Down Expand Up @@ -467,6 +467,7 @@ exports[`SilentRefreshPage > auth service with succes > renders 1`] = `
<!---->
</a>
</div>
<!--v-if-->

</div>
<!---->
Expand Down
2 changes: 1 addition & 1 deletion presenter/vitest.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default mergeConfig(
thresholds: {
lines: 98,
// functions: 73, // has problems see https://github.com/vitest-dev/vitest/issues/3607
branches: 98,
branches: 97,
statements: 98,
},
},
Expand Down