Skip to content

Commit 1a557d6

Browse files
lukablaskoviclukablaskovic
committed
UI adjustments
- smaller UI adjustments, mostly for mobile view 1.0.0-beta.5
1 parent ae1e7bd commit 1a557d6

File tree

4 files changed

+73
-51
lines changed

4 files changed

+73
-51
lines changed

‎src/components/Cardbox/CardBoxAllocation.vue

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -23,61 +23,61 @@
2323
</div>
2424

2525
<div>
26-
<p class="max-w-[40ch] text-sm text-gray-500 dark:text-gray-300">
26+
<p class="text-sm text-gray-500 dark:text-gray-300">
2727
{{ props.data.opis_zadatka }}
2828
</p>
2929
</div>
3030

3131
<div class="mt-4">
32-
<p class="max-w-[40ch] text-sm text-gray-500 dark:text-gray-300"><b>Potrebno imati:</b> {{ props.data.potrebno_imati }}</p>
33-
<p class="max-w-[40ch] text-sm text-gray-500 dark:text-gray-300">
32+
<p class="text-sm text-gray-500 dark:text-gray-300"><b>Potrebno imati:</b> {{ props.data.potrebno_imati }}</p>
33+
<p class="text-sm text-gray-500 dark:text-gray-300">
3434
<b>Preferencije za studenta:</b>
3535
{{ props.data.preferencije_za_studenta }}
3636
</p>
37-
<p class="max-w-[40ch] text-sm text-gray-500 dark:text-gray-300">
37+
<p class="text-sm text-gray-500 dark:text-gray-300">
3838
<b>Napomena:</b>
3939
{{ props.data.napomena || "Nema napomene." }}
4040
</p>
4141
</div>
4242

4343
<dl class="mt-6 flex gap-4 sm:gap-6">
4444
<div class="flex flex-col-reverse">
45-
<dt class="text-sm font-medium text-gray-600 dark:text-gray-200">Okviran početak</dt>
4645
<dd class="text-xs text-gray-500 dark:text-gray-100">
4746
{{ props.data.zeljeno_okvirno_vrijeme_pocetka }}
4847
</dd>
48+
<dt class="text-sm font-medium text-gray-600 dark:text-gray-200">Okviran početak</dt>
4949
</div>
5050

5151
<div class="flex flex-col-reverse">
52-
<dt class="text-sm font-medium text-gray-600 dark:text-gray-200">Lokacija</dt>
5352
<dd class="text-xs text-gray-500 dark:text-gray-100">
5453
{{ props.data.lokacija }}
5554
</dd>
55+
<dt class="text-sm font-medium text-gray-600 dark:text-gray-200">Lokacija</dt>
5656
</div>
5757

5858
<div class="flex flex-col-reverse">
59-
<dt class="text-sm font-medium text-gray-600 dark:text-gray-200">Trajanje</dt>
6059
<dd class="text-xs text-gray-500 dark:text-gray-100">{{ props.data.trajanje_sati }} sati</dd>
60+
<dt class="text-sm font-medium text-gray-600 dark:text-gray-200">Trajanje</dt>
6161
</div>
6262

6363
<div v-if="props.data.selekcija === true" class="flex flex-col-reverse">
64-
<dt class="text-sm font-medium text-gray-600 dark:text-gray-200">Selekcija</dt>
6564
<dd class="text-xs text-gray-500 dark:text-gray-100">
6665
{{ props.data.proces_selekcije }}
6766
</dd>
67+
<dt class="text-sm font-medium text-gray-600 dark:text-gray-200">Selekcija</dt>
6868
</div>
6969

7070
<div v-else class="flex flex-col-reverse">
71-
<dt class="text-sm font-medium text-gray-600 dark:text-gray-200">Selekcija</dt>
7271
<dd class="text-xs text-gray-500 dark:text-gray-100">Ne</dd>
72+
<dt class="text-sm font-medium text-gray-600 dark:text-gray-200">Selekcija</dt>
7373
</div>
7474

7575
<div v-if="props.data.angazman_fipu !== 'Ne' || props.data.angazman_fipu === ''" class="flex flex-col-reverse">
76-
<dt class="text-sm font-medium text-gray-600 dark:text-gray-200">FIPU Angažman</dt>
7776
<dd class="text-xs text-gray-500 dark:text-gray-100">
7877
<span v-if="props.data.angazman_fipu">{{ props.data.angazman_fipu }}</span>
7978
<span v-else>Ne</span>
8079
</dd>
80+
<dt class="text-sm font-medium text-gray-600 dark:text-gray-200">FIPU Angažman</dt>
8181
</div>
8282
</dl>
8383
</div>

‎src/components/Cardbox/CardBoxModal.vue

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ window.addEventListener("keydown", (e) => {
7373
'2xl:3/12 modal-scrollable fipu_vertical_scrollbar z-50 max-h-modal w-11/12 rounded shadow-lg md:w-3/5 lg:w-2/5 xl:w-6/12': !large && !isLogout,
7474
'modal-scrollable fipu_vertical_scrollbar z-50 max-h-modal w-full rounded shadow-lg md:w-4/5 lg:w-3/5 xl:w-3/5': large && !isLogout,
7575
'2xl:3/12 modal-scrollable fipu_vertical_scrollbar z-50 max-h-modal w-11/12 rounded shadow-lg md:w-3/5 lg:w-1/5 xl:w-4/12': isLogout,
76+
'mobile-fullscreen': !isLogout,
7677
}"
7778
is-modal>
7879
<CardBoxComponentTitle :title="title"> </CardBoxComponentTitle>
@@ -92,4 +93,22 @@ window.addEventListener("keydown", (e) => {
9293
max-height: 90vh;
9394
overflow-y: auto;
9495
}
96+
97+
/* Fullscreen modal on mobile */
98+
@media (max-width: 640px) {
99+
.mobile-fullscreen {
100+
width: 100vw;
101+
height: 100vh;
102+
max-height: 100vh;
103+
top: 0;
104+
left: 0;
105+
right: 0;
106+
bottom: 0;
107+
position: fixed;
108+
margin: 0;
109+
border-radius: 0;
110+
overflow-y: auto;
111+
padding: 1rem;
112+
}
113+
}
95114
</style>

‎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.0-beta.4",
15+
praksa_version: "1.0.0-beta.5",
1616
academicYear: "2024/2025",
1717
voditelj_prakse: "doc. dr. sc. Ivan Lorencin",
1818

‎src/views/common/LoginView.vue

Lines changed: 43 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,57 @@
11
<template>
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">
2+
<div class="flex min-h-screen w-full flex-col items-center justify-between bg-gray-50 transition-all duration-300 sm:justify-center sm:bg-opacity-70 sm:bg-[url('/background-blue.jpg')] sm:bg-cover sm:bg-center">
33
<!-- Mobile only heading -->
4-
<div class="mt-12 block bg-gray-50 p-2 text-left sm:hidden">
4+
<div class="mt-4 flex flex-col justify-center bg-gray-50 p-2 text-left sm:hidden">
55
<h2 data-aos="zoom-in" class="mb-4 text-7xl font-bold text-fipu_gray">Dobrodošli na</h2>
66
<h1 data-aos="zoom-in" data-aos-delay="500" class="text-6xl font-bold text-fipu_blue">FIPU Praksu</h1>
77
</div>
88

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>
17-
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>
27-
28-
<div class="my-6 flex w-full justify-center sm:my-6">
29-
<GoogleLogin :callback="callback" />
30-
</div>
31-
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>
36-
37-
<p class="mb-4 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>
9+
<!-- Main content area -->
10+
<div class="flex w-full flex-1 flex-col items-center justify-center transition-all duration-300 sm:flex-none">
11+
<CardBox vertical-centered class="mx-0 flex w-full flex-col px-0 transition-all duration-300 sm:mx-6 sm:w-auto sm:flex-none sm:rounded-2xl sm:p-10 sm:pt-8 md:px-12 lg:mx-60 lg:p-12" is-form>
12+
<!-- Content area -->
13+
<div class="flex flex-grow flex-col items-center">
14+
<!-- Logo, shown only on larger screens -->
15+
<a href="https://fipu.unipu.hr/" target="_blank" class="mx-auto hidden w-max sm:block">
16+
<img :src="fipu_unipu" alt="Fakultet informatike u Puli - logotip" class="mb-4 h-24 object-contain transition-all duration-300 lg:h-24" />
17+
</a>
18+
<hr class="hidden w-full sm:block" />
19+
<!-- Hide heading on mobile -->
20+
<div data-aos="zoom-in" data-aos-delay="200" class="hidden sm:block">
21+
<h2 class="mb-4 mt-4 text-center text-2xl font-bold text-fipu_gray lg:text-4xl">Dobrodošli na <span class="text-fipu_blue">FIPU Praksu</span></h2>
4222
</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>
23+
<!-- Content paragraphs -->
24+
<p class="mx-auto mb-4 max-w-md p-2 py-8 text-left text-lg text-gray-600 sm:mb-5 sm:max-w-2xl sm:p-0 sm:text-center lg:text-lg">
25+
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
26+
<a class="hover-underline-animation cursor-pointer text-fipu_text_blue hover:text-fipu_blue" @click="router.push('/moja-praksa')"> gost. </a>
27+
</p>
28+
29+
<div class="my-4 flex w-full justify-center sm:my-6">
30+
<GoogleLogin :callback="callback" />
4831
</div>
32+
33+
<p class="mb-0 p-2 text-left text-lg text-gray-600 sm:mb-3 sm:p-0 sm:text-center lg:text-lg">
34+
Poslodavac ste ili mentor te želite prijaviti novi zadatak za praksu? To možete učiniti
35+
<a class="hover-underline-animation cursor-pointer text-fipu_text_blue hover:text-fipu_blue" @click="router.push('/poslodavci/novi-zadatak')"> ovdje. </a>
36+
</p>
37+
38+
<p class="mb-0 p-2 text-left text-lg text-gray-600 sm:mb-0 sm:p-0 sm:text-center lg:text-lg">
39+
Prije nego se prijavite, pročitajte
40+
<a class="hover-underline-animation cursor-pointer text-fipu_text_blue hover:text-fipu_blue" @click="router.push('/upute')"> upute </a>
41+
kako izvodimo praksu na FIPU.
42+
</p>
4943
</div>
5044
</CardBox>
5145
</div>
46+
<hr class="block w-full sm:hidden" />
47+
48+
<!-- Logo at the bottom, centered on mobile -->
49+
<div class="flex justify-center sm:hidden">
50+
<a href="https://fipu.unipu.hr/" target="_blank" class="w-max">
51+
<img :src="fipu_unipu" alt="Fakultet informatike u Puli - logotip" class="h-24 object-contain p-2" />
52+
</a>
53+
</div>
54+
5255
<SnackBar />
5356
</div>
5457
</template>

0 commit comments

Comments
 (0)