Skip to content

Commit 9011b30

Browse files
lukablaskoviclukablaskovic
committed
reworked mobile login screen, added AOS package
- UI update on mobile login screen 1.0.0-beta.4
1 parent 801dac7 commit 9011b30

File tree

5 files changed

+85
-30
lines changed

5 files changed

+85
-30
lines changed

‎package-lock.json

Lines changed: 30 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"@vuelidate/core": "^2.0.3",
1717
"@vuelidate/validators": "^2.0.4",
1818
"animate.css": "^4.1.1",
19+
"aos": "^2.3.4",
1920
"axios": "^1.7.7",
2021
"bpmn-js": "^13.2.2",
2122
"chart.js": "^4.4.0",

‎src/main.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { createApp, markRaw } from "vue";
55
import { createPinia } from "pinia";
66
import { router } from "./router";
77
import App from "./App.vue";
8+
import "aos/dist/aos.css";
89
import "./css/main.css";
910
import "animate.css";
1011

‎src/stores/main_store.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export interface Assignment {
1212

1313
export const useMainStore = defineStore("main", {
1414
state: () => ({
15-
praksa_version: "1.0.2-beta.3",
15+
praksa_version: "1.0.0-beta.4",
1616
academicYear: "2024/2025",
1717
voditelj_prakse: "doc. dr. sc. Ivan Lorencin",
1818

‎src/views/common/LoginView.vue

Lines changed: 52 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,52 @@
11
<template>
2-
<div class="flex h-full min-h-screen w-full items-center justify-center bg-[url('/background-blue.jpg')] bg-cover bg-center transition-all duration-300">
3-
<div class="flex flex-col items-center justify-center overflow-hidden transition-all duration-300">
4-
<CardBox vertical-centered class="rounded-none px-6 py-12 transition-all duration-300 sm:mx-8 sm:rounded-2xl sm:p-12 lg:mx-96" is-form>
5-
<a href="https://fipu.unipu.hr/" target="_blank" class="mx-auto w-max">
6-
<img :src="fipu_unipu" alt="Fakultet informatike u Puli - logotip" class="mb-3 object-contain transition-all duration-300 sm:h-32 2xl:mb-6" />
7-
</a>
2+
<div class="flex min-h-screen w-full flex-col items-center justify-start bg-gray-50 transition-all duration-300 sm:min-h-screen sm:justify-center sm:bg-opacity-70 sm:bg-[url('/background-blue.jpg')] sm:bg-cover sm:bg-center">
3+
<!-- Mobile only heading -->
4+
<div class="mt-12 block bg-gray-50 p-2 text-left sm:hidden">
5+
<h2 data-aos="zoom-in" class="text-7xl font-bold text-fipu_gray">Dobrodošli na</h2>
6+
<h1 data-aos="zoom-in" data-aos-delay="500" class="text-6xl font-bold text-fipu_blue">FIPU Praksu</h1>
7+
</div>
88

9-
<h2 class="mb-4 mt-6 text-center text-2xl font-bold text-fipu_gray md:text-center lg:text-3xl xl:mb-6 2xl:text-4xl">Dobrodošli na <span class="text-fipu_blue">FIPU Praksu</span></h2>
9+
<div class="mt-8 flex w-full flex-1 flex-col items-center justify-center transition-all duration-300 sm:mt-0 sm:flex-none">
10+
<CardBox vertical-centered class="mx-0 flex h-full w-full flex-1 flex-col px-0 pb-8 pt-8 transition-all duration-300 sm:mx-6 sm:h-auto sm:w-auto sm:flex-none sm:rounded-2xl sm:p-10 md:px-12 lg:mx-60 lg:p-12" is-form>
11+
<div class="flex flex-1 flex-col justify-between">
12+
<div>
13+
<!-- Logo, shown only on larger screens -->
14+
<a href="https://fipu.unipu.hr/" target="_blank" class="mx-auto hidden w-max sm:block">
15+
<img :src="fipu_unipu" alt="Fakultet informatike u Puli - logotip" class="mb-4 h-24 object-contain transition-all duration-300 sm:h-28 lg:h-32" />
16+
</a>
1017

11-
<h2 class="mx-auto mb-2 mt-6 max-w-3xl text-center sm:mt-0 md:text-sm lg:text-sm 2xl:mb-10 2xl:text-base">
12-
Molimo prijavite se kako biste pregledali stanje vaše prakse ili prijavili zadatke. Ako želite samo pregledati dostupne zadatke i poduzeća, možete nastaviti kao
13-
<a class="hover-underline-animation cursor-pointer text-fipu_text_blue hover:text-fipu_blue" @click="router.push('/moja-praksa')"> gost</a>.
14-
</h2>
18+
<!-- Hide heading on mobile -->
19+
<div data-aos="zoom-in" data-aos-delay="200" class="hidden sm:block">
20+
<h2 class="mb-4 mt-4 text-center text-2xl font-bold text-fipu_gray sm:text-2xl lg:text-4xl">Dobrodošli na <span class="text-fipu_blue">FIPU Praksu</span></h2>
21+
</div>
22+
<!-- Content paragraphs -->
23+
<p class="mx-auto mb-8 max-w-md p-2 text-left text-base text-gray-600 sm:mb-5 sm:max-w-2xl sm:p-0 sm:text-center sm:text-base lg:text-lg">
24+
Molimo prijavite se kako biste pregledali stanje vaše prakse ili prijavili zadatke. Ako želite samo pregledati dostupne zadatke i poduzeća, možete nastaviti kao
25+
<a class="hover-underline-animation cursor-pointer text-fipu_text_blue hover:text-fipu_blue" @click="router.push('/moja-praksa')"> gost. </a>
26+
</p>
1527

16-
<div class="mx-auto my-6 flex justify-center sm:my-4">
17-
<GoogleLogin :callback="callback" />
18-
</div>
28+
<div class="my-6 flex w-full justify-center sm:my-6">
29+
<GoogleLogin :callback="callback" />
30+
</div>
1931

20-
<h2 class="mb-2 text-center md:text-sm lg:text-sm 2xl:mb-4 2xl:text-base">
21-
Poslodavac ste ili mentor te želite prijaviti novi zadatak za praksu? To možete učiniti
22-
<a class="hover-underline-animation cursor-pointer text-fipu_text_blue hover:text-fipu_blue" @click="router.push('/poslodavci/novi-zadatak')"> ovdje</a>.
23-
</h2>
32+
<p class="mb-0 p-2 text-left text-base text-gray-600 sm:mb-3 sm:p-0 sm:text-center sm:text-base lg:text-lg">
33+
Poslodavac ste ili mentor te želite prijaviti novi zadatak za praksu? To možete učiniti
34+
<a class="hover-underline-animation cursor-pointer text-fipu_text_blue hover:text-fipu_blue" @click="router.push('/poslodavci/novi-zadatak')"> ovdje. </a>
35+
</p>
2436

25-
<h2 class="text-center md:text-sm lg:text-sm 2xl:mb-4 2xl:text-base">
26-
Prije nego se prijavite, pročitajte
27-
<a class="hover-underline-animation cursor-pointer text-fipu_text_blue hover:text-fipu_blue" @click="router.push('/upute')">upute</a> kako izvodimo praksu na FIPU.
28-
</h2>
37+
<p class="mb-12 p-2 text-left text-base text-gray-600 sm:mb-0 sm:p-0 sm:text-center sm:text-base lg:text-lg">
38+
Prije nego se prijavite, pročitajte
39+
<a class="hover-underline-animation cursor-pointer text-fipu_text_blue hover:text-fipu_blue" @click="router.push('/upute')"> upute </a>
40+
kako izvodimo praksu na FIPU.
41+
</p>
42+
</div>
43+
<!-- Logo at the bottom, centered on mobile -->
44+
<div class="flex justify-center sm:hidden">
45+
<a href="https://fipu.unipu.hr/" target="_blank" class="w-max">
46+
<img :src="fipu_unipu" alt="Fakultet informatike u Puli - logotip" class="h-15 object-contain p-2" />
47+
</a>
48+
</div>
49+
</div>
2950
</CardBox>
3051
</div>
3152
<SnackBar />
@@ -41,6 +62,7 @@ body {
4162
.fast-animation {
4263
animation-duration: 0.5s;
4364
}
65+
4466
.hover-underline-animation {
4567
position: relative;
4668
}
@@ -67,29 +89,30 @@ body {
6789
<script setup>
6890
import SnackBar from "@/components/Premium/SnackBar.vue";
6991
import CardBox from "@/components/Cardbox/CardBox.vue";
92+
import { decodeCredential } from "vue3-google-login";
7093
import { isUnipuEmail } from "@/helpers/validators";
7194
import { mainStore, snackBarStore } from "@/main";
95+
import fipu_unipu from "/fipu_unipu.png";
7296
import { useRouter } from "vue-router";
97+
import Utils from "@/helpers/utils";
98+
import { onMounted } from "vue";
99+
import AOS from "aos";
73100
74-
//Public images
75-
import fipu_unipu from "/fipu_unipu.png";
101+
onMounted(() => {
102+
AOS.init();
103+
});
76104
77105
const router = useRouter();
78106
79-
import { decodeCredential } from "vue3-google-login";
80-
import Utils from "@/helpers/utils";
81-
82107
const callback = async (response) => {
83108
const decodedToken = decodeCredential(response.credential);
84109
85110
if (!decodedToken) {
86111
snackBarStore.pushMessage("Prijava nije uspjela! Molimo kontaktirajte voditelja prakse.", "error");
87112
return;
88113
}
89-
console.log("decodedToken", decodedToken);
90114
if (isUnipuEmail(decodedToken.email) || decodedToken.email === "lukablaskovic2000@gmail.com") {
91115
let response = await mainStore.handleLogin(decodedToken);
92-
console.log(response);
93116
if (response.status === "success") snackBarStore.pushMessage("Uspješna prijava!", "success");
94117
await Utils.wait(1);
95118
} else {

0 commit comments

Comments
 (0)