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

Scale login illustration #342

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

Scale login illustration #342

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
36342ea
Fix vue build errors
Lauritz-Tieste Feb 13, 2025
a40b0b8
Fix illustration on login page
Lauritz-Tieste Feb 13, 2025
2456af7
Fix linting
Lauritz-Tieste Feb 13, 2025
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
120 changes: 67 additions & 53 deletions components/confetti.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,57 +1,44 @@
<template>
<div>
<body class="relative">
<main>
<!-- <img class="bgImg" src="https://media.tacdn.com/media/attractions-splice-spp-674x446/09/c3/33/97.jpg" alt=""> -->
<article>
<!--DEMO HTML -->
<canvas
class="confetti"
style="width: 100vw; height: 100vh"
id="canvas"
></canvas>
<!--End DEMO HTML -->
<transition name="dontShowAnimationBox">
<section
v-if="boxInfo"
class="absolute bg-white top-[20%] rounded-lg sm:left-[5%] p-5 flex gap-4 items-center mx-3"
>
<h6 class="my-4 text-accent font-bold">
{{ t("Headings.DontShowCongratsAnimationAgain") }}
</h6>

<input-switch v-model="hideAnimation" class="mt-2" />
</section>
</transition>

<transition name="infoBox">
<section
v-if="boxInfo"
class="absolute bg-white top-[70%] rounded-lg sm:left-1/2 transform sm:-translate-x-1/2 -translate-y-1/2 p-5 mx-3"
>
<h6 class="my-2 text-accent text-lg font-bold">
{{ t("Headings.CongratsAnimateText") }}
</h6>
<div class="flex justify-end w-full">
<NuxtLink @click="navigateToProfile()">
<Btn sm> Go To profile </Btn>
</NuxtLink>
</div>
</section>
</transition>

<transition name="closeAnimationBox">
<section
v-if="boxInfo"
class="absolute bg-white cursor-pointer top-[5%] rounded-lg right-[5%] p-4"
@click="fnHideAnimation()"
>
<XMarkIcon class="h-6 w-6" />
</section>
</transition>
</article>
</main>
</body>
<div class="relative">
<main>
<!-- <img class="bgImg" src="https://media.tacdn.com/media/attractions-splice-spp-674x446/09/c3/33/97.jpg" alt=""> -->
<article>
<!--DEMO HTML -->
<canvas class="confetti" style="width: 100vw; height: 100vh" id="canvas"></canvas>
<!--End DEMO HTML -->
<transition name="dontShowAnimationBox">
<section v-if="boxInfo"
class="absolute bg-white top-[20%] rounded-lg sm:left-[5%] p-5 flex gap-4 items-center mx-3">
<h6 class="my-4 text-accent font-bold">
{{ t("Headings.DontShowCongratsAnimationAgain") }}
</h6>

<input-switch v-model="hideAnimation" class="mt-2" />
</section>
</transition>

<transition name="infoBox">
<section v-if="boxInfo"
class="absolute bg-white top-[70%] rounded-lg sm:left-1/2 transform sm:-translate-x-1/2 -translate-y-1/2 p-5 mx-3">
<h6 class="my-2 text-accent text-lg font-bold">
{{ t("Headings.CongratsAnimateText") }}
</h6>
<div class="flex justify-end w-full">
<NuxtLink @click="navigateToProfile()">
<Btn sm> Go To profile </Btn>
</NuxtLink>
</div>
</section>
</transition>

<transition name="closeAnimationBox">
<section v-if="boxInfo" class="absolute bg-white cursor-pointer top-[5%] rounded-lg right-[5%] p-4"
@click="fnHideAnimation()">
<XMarkIcon class="h-6 w-6" />
</section>
</transition>
</article>
</main>
</div>
</template>

Expand Down Expand Up @@ -243,9 +230,11 @@ onMounted(() => {
opacity: 1;
top: 70%;
}

.infoBox-enter-active {
transition: all 2s;
}

.dontShowAnimationBox-enter-from {
scale: 0;
opacity: 0;
Expand All @@ -259,9 +248,11 @@ onMounted(() => {
top: 20%;
left: 5%;
}

.closeAnimationBox-enter-active {
transition: all 2s;
}

.closeAnimationBox-enter-from {
scale: 0;
opacity: 0;
Expand All @@ -275,9 +266,11 @@ onMounted(() => {
top: 5%;
right: 5%;
}

.dontShowAnimationBox-enter-active {
transition: all 2s;
}

body {
font-family: "Roboto", sans-serif;
font-style: normal;
Expand All @@ -291,9 +284,11 @@ body {
font-size: 15px;
background: transparent;
}

main {
@apply backdrop-blur-sm;
}

.intro {
background: #fff;
padding: 60px 30px;
Expand All @@ -302,10 +297,12 @@ main {
line-height: 1.5;
text-align: center;
}

.intro h1 {
font-size: 18pt;
padding-bottom: 15px;
}

.intro p {
font-size: 14px;
}
Expand All @@ -324,26 +321,32 @@ a.btn {
display: inline-block;
margin-left: 5px;
}

a.btn:hover {
background: #666;
color: #fff;
transition: 0.3s;
-webkit-transition: 0.3s;
}

.btn:before {
font-family: FontAwesome;
font-weight: normal;
margin-right: 10px;
}

.github:before {
content: "\f09b";
}

.down:before {
content: "\f019";
}

.back:before {
content: "\f112";
}

.credit {
background: #fff;
padding: 12px;
Expand All @@ -352,18 +355,22 @@ a.btn:hover {
color: #333;
margin-top: 40px;
}

.credit span:before {
font-family: FontAwesome;
color: #e41b17;
content: "\f004";
}

.credit a {
color: #333;
text-decoration: none;
}

.credit a:hover {
color: #1dbf73;
}

.credit a:hover:after {
font-family: FontAwesome;
content: "\f08e";
Expand All @@ -379,6 +386,7 @@ article li {
line-height: 1.5;
padding: 5px;
}

article h1,
article h2,
article h3,
Expand All @@ -387,6 +395,7 @@ article p {
padding: 14px;
color: #333;
}

article p {
font-size: 15px;
line-height: 1.5;
Expand All @@ -408,6 +417,7 @@ article p {
color: #333;
font-size: 16px;
}

.set-overlayer:after,
.set-glass:after,
.to-active:after,
Expand All @@ -417,6 +427,7 @@ article p {
position: relative;
float: right;
}

.set-overlayer:after,
.set-glass:after,
.set-sticky:after {
Expand All @@ -429,6 +440,7 @@ article p {
color: #008080;
transition: 0.6s;
}

.set-overlayer,
.set-glass,
.set-sticky,
Expand All @@ -440,6 +452,7 @@ article p {
border: 2px solid #f1f1f1;
box-sizing: border-box;
}

/* Syntax Highlighter*/

pre.prettyprint {
Expand All @@ -455,6 +468,7 @@ pre.prettyprint {
overflow: auto;
max-height: 400px;
}

code {
border: 1px solid #ddd;
padding: 2px;
Expand Down
8 changes: 7 additions & 1 deletion nuxt.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

export default defineNuxtConfig({
ssr: false,

app: {
head: {
title: "Bootstrap Academy",
Expand Down Expand Up @@ -31,13 +32,16 @@ export default defineNuxtConfig({
pageTransition: { name: "page", mode: "out-in" },
layoutTransition: { name: "layout", mode: "out-in" },
},

css: ["~/assets/css/tailwind.css"],

postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},

runtimeConfig: {
public: {
BASE_API_URL: "https://api.test.bootstrap.academy",
Expand All @@ -47,4 +51,6 @@ export default defineNuxtConfig({
NODE_ENV: "production",
},
},
});

compatibilityDate: "2025-02-13",
});
46 changes: 6 additions & 40 deletions pages/auth/login.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,6 @@
<!--
❌ Responsive UI
✅ Page Title
✅ Translation
❌ Animation

✅ Tested on chrome
✅ Tested on firefox
✅ Tested on safari
❌ Tested on android mobile
❌ Tested on apple mobile

✅ Recaptcha
✅ Api implemented
✅ Form Client Side Error Handling
✅ Form Submission Process
✅ Form Post Api Error Handling + ✅ Translation
✅ Form Post Api Success Handling + ✅ Translation
-->

<template>
<main
class="container-fluid pt-container pb-container h-screen-inner min grid gap-container grid-cols-1 midXl:grid-cols-[auto_minmax(0,0.8fr)] items-center"
>
class="container-fluid pt-container pb-container h-screen-inner min grid gap-container grid-cols-1 midXl:grid-cols-[auto_minmax(0,0.8fr)] items-center">
<section class="container-form">
<h3 class="text-center text-heading-3 mb-2">
{{ t('Forms.Login') }}
Expand All @@ -32,38 +11,25 @@
</section>

<article class="hidden midXl:flex gap-8 flex-col items-center">
<SectionTitle
center
subheading="Buttons.Login"
heading="Headings.WelcomeBack"
body="Body.Login"
/>
<SvgLogin />
<SectionTitle center subheading="Buttons.Login" heading="Headings.WelcomeBack" body="Body.Login" />
<SvgLogin class="max-w-3xl" />
</article>
</main>
</template>

<script>
import { useI18n } from 'vue-i18n';

definePageMeta({
layout: 'inner',
});
definePageMeta({ layout: 'inner' });

export default {
head: {
title: 'Login',
},
head: { title: 'Login' },
setup() {
const { t } = useI18n();

onMounted(async () => {
await getOAuthProviders();
});
onMounted(async () => await getOAuthProviders());

return { t };
},
};
</script>

<style scoped></style>
Loading