adm/website
10
0
Fork 1
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity

New Website in VueJS #6

Open
alice wants to merge 11 commits from new-website into main
pull from: new-website
merge into: adm:main
Conversation 2 Commits 11 Files changed 127 +100 -88
4 changed files with 100 additions and 88 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 88aadd0b21 - Show all commits

2
index.html
View file

@ -5,7 +5,7 @@
<link
rel="icon"
type="image/png"
href="/assets/ADMstaff_logo-favicon.png"
href="/src/assets/ADMstaff_logo-favicon.png"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ADMStaff - University of Bologna</title>

176
src/components/Header.vue
View file

@ -1,55 +1,91 @@
<template>
fabio commented 2026-04-16 10:11:12 +00:00
Review
Copy link

secondo me è un po piccolino, preferirei il testo più grande o anche più grande tutto

secondo me è un po piccolino, preferirei il testo più grande o anche più grande tutto
alice commented 2026-04-16 11:18:33 +00:00
Review
Copy link

ma dici le scritte dentro all'header, il loghetto o proprio tutto?

ma dici le scritte dentro all'header, il loghetto o proprio tutto?
<header class="bg-neutral border-b border-base-300">
<nav class="container mx-auto px-4 py-4">
<div class="flex justify-between items-center">
<RouterLink to="/" class="logo">
<span class="logo__mark">
<svg
xmlns="http://www.w3.org/2000/svg"
class="greater-icon"
viewBox="0 0 44 44"
>
<path fill="none" d="M15 8l14.729 14.382L15 35.367" />
</svg>
</span>
<span class="logo__text">ADMStaff</span>
<span class="logo__cursor blinking-cursor"></span>
</RouterLink>
<div class="flex gap-6 items-center">
<nav class="container mx-auto px-4">
<div class="navbar min-h-16 px-0">
<div class="navbar-start">
<RouterLink
v-for="link in links"
:key="link.path"
:to="link.path"
class="text-base-content hover:text-primary transition-colors"
to="/"
class="group inline-flex shrink-0 items-center font-bold no-underline"
>
{{ $t(link.nameKey) }}
<span class="mr-1 inline-flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-3.5 w-3.5 text-base-content/70"
viewBox="0 0 44 44"
>
<path
fill="none"
class="stroke-current stroke-[6]"
d="M15 8l14.729 14.382L15 35.367"
/>
</svg>
</span>
<span class="inline text-lg text-base-content/70 transition-colors group-hover:text-primary"
>ADMStaff</span
>
<span class="blinking-cursor ml-1"></span>
</RouterLink>
</div>
<!-- Language Switcher -->
<div class="flex gap-2 ml-4">
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1 gap-1">
<li v-for="link in links" :key="link.path">
<RouterLink :to="link.path" class="text-base-content hover:text-primary">
{{ $t(link.nameKey) }}
</RouterLink>
</li>
</ul>
</div>
<div class="navbar-end gap-2">
<div class="join hidden lg:flex">
<button
@click="setLocale('it')"
:class="[
'px-2 py-1 rounded transition-colors',
locale === 'it'
? 'bg-primary text-white'
: 'text-base-content hover:text-primary',
]"
v-for="lang in languages"
:key="`desktop-${lang.code}`"
@click="setLocale(lang.code)"
:class="languageBtnClass(lang.code)"
>
IT
{{ lang.label }}
</button>
<button
@click="setLocale('en')"
:class="[
'px-2 py-1 rounded transition-colors',
locale === 'en'
? 'bg-primary text-white'
: 'text-base-content hover:text-primary',
]"
</div>
<div class="dropdown dropdown-end lg:hidden">
<label tabindex="0" class="btn btn-ghost btn-square" aria-label="Open navigation menu">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
class="h-5 w-5 stroke-current"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
</label>
<ul
tabindex="0"
class="menu menu-sm dropdown-content mt-3 z-[1] w-56 rounded-box border border-base-300 bg-base-100 p-2 shadow"
>
EN
</button>
<li v-for="link in links" :key="`mobile-${link.path}`">
<RouterLink :to="link.path">{{ $t(link.nameKey) }}</RouterLink>
</li>
<li class="menu-title"><span>Language</span></li>
<li>
<div class="join justify-start">
<button
v-for="lang in languages"
:key="`mobile-${lang.code}`"
@click="setLocale(lang.code)"
:class="languageBtnClass(lang.code, true)"
>
{{ lang.label }}
</button>
</div>
</li>
</ul>
</div>
</div>
</div>
@ -61,7 +97,7 @@
import { RouterLink } from "vue-router";
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();
const { locale } = useI18n();
const links = [
samu commented 2026-04-20 08:18:30 +00:00
Review
Copy link

I would also add Home, even though you could reach it by clicking the logo

I would also add `Home`, even though you could reach it by clicking the logo
{ path: "/about", nameKey: "nav.about" },
@ -72,47 +108,23 @@ const links = [
{ path: "/lab", nameKey: "nav.lab" },
];
const languages = [
{ code: "it", label: "IT" },
{ code: "en", label: "EN" },
];
function languageBtnClass(code, isMobile = false) {
if (locale.value === code) {
return "btn btn-sm join-item btn-primary text-white";
}
return isMobile
? "btn btn-sm join-item btn-ghost"
: "btn btn-sm join-item btn-ghost text-base-content hover:text-primary";
}
function setLocale(lang) {
locale.value = lang;
localStorage.setItem("locale", lang);
}
</script>
<style scoped>
.logo {
display: flex;
align-items: center;
flex: 0 0 auto;
text-decoration: none;
font-weight: bold;
}
.logo__mark {
display: inline-flex;
align-items: center;
margin-right: 5px;
}
.greater-icon {
width: 14px;
height: 14px;
}
.greater-icon path {
stroke: #a9a9b3;
stroke-width: 6px;
}
.logo__text {
font-size: 1.125rem;
color: #a9a9b3;
}
.logo:hover .logo__text {
color: #618375;
}
.logo__cursor {
margin-left: 5px;
}
</style>

4
src/views/AboutView.vue
View file

@ -1,9 +1,9 @@
<template>
<div class="max-w-4xl mx-auto">
<div class="mx-auto flex flex-col md:flex-row gap-8 items-start">
<img
src="/img/ADMstaff_logo-modern.png"
alt="ADMstaff logo"
class="w-96 mx-auto mb-8"
class="md:w-96 md:sticky md:top-4 rounded-2xl"
/>
<div v-if="loading" class="text-center py-12">

6
src/views/HomeView.vue
View file

@ -1,13 +1,13 @@
<template>
<div>
<!-- About Section con cursore -->
<div class="about relative flex flex-row items-center mx-[5%] my-12 gap-5">
<div class="flex flex-col md:flex-row md:items-center md:mx-[5%] mb-12 md:my-12 md:gap-5">
<img
src="@/assets/ADMstaff_logo-modern-trasp.png"
alt="ADMStaff Logo"
class="w-1/3"
class="md:w-1/3"
/>
<h4 id="about-text" class="leading-relaxed md:text-xl">
<h4 id="about-text" class=" md:text-xl">
ADMstaff nasce come gruppo che fornisce servizi da studenti per
studenti.<br /><br />
Il nostro obiettivo è sperimentare e fare pratica su ciò che ci