Joakim Mörling
7a95c1423c
Mobile traffic was breaking on narrow viewports because the header nav overflowed and several pages used desktop-only spacing. This adds a shared phone breakpoint, a hamburger menu, and scroll-to-top on route changes so footer and menu navigation always land at the top of the page. - Add --page-gutter and max-width 639px rules in base.css - AppHeader: hamburger panel on small screens; flat account links on mobile - AppFooter: stack footer links vertically on phones - Home, compose, edit order, orders, auth, and legal pages: tighter gutters and responsive layout (orders card actions stack; home grids single-column) - Router scrollBehavior: scroll to top on navigation; restore on browser back - Tests: AppHeader menu toggle, Router scrollBehavior, mobile Playwright checks Admin page is intentionally unchanged. Co-authored-by: Cursor <cursoragent@cursor.com>
240 lines
7 KiB
Vue
240 lines
7 KiB
Vue
<script setup lang="ts">
|
|
import { RouterLink } from 'vue-router'
|
|
|
|
const sections = [
|
|
{
|
|
id: 'ansvarig',
|
|
title: 'Personuppgiftsansvarig',
|
|
paragraphs: [
|
|
'Bilhej (bilhej.se) är personuppgiftsansvarig för den behandling som sker när du använder tjänsten som avsändare.',
|
|
'Frågor om integritet: kontakt@bilhej.se. Klagomål som rör tjänsten: klagomal@bilhej.se.',
|
|
],
|
|
},
|
|
{
|
|
id: 'vilka-uppgifter',
|
|
title: 'Vilka uppgifter behandlar vi?',
|
|
paragraphs: [
|
|
'Kontouppgifter: e-postadress och lösenord. Lösenordet lagras så att varken vi eller obehöriga kan läsa det.',
|
|
'Beställningar: registreringsnummer, brevtext, status, betalningsbelopp och eventuellt spårningsnummer kopplat till utskick.',
|
|
'Fordonsuppgifter: märke och modell för att du ska kunna verifiera nummerplåten. Vi lagrar inte mottagarens namn eller adress i tjänsten.',
|
|
'Mottagarens postadress används enbart för att posta brevet och sparas inte efter utskick.',
|
|
],
|
|
},
|
|
{
|
|
id: 'varfor',
|
|
title: 'Varför behandlar vi uppgifterna?',
|
|
paragraphs: [
|
|
'För att tillhandahålla tjänsten: konto, beställning, betalning och utskick av brev.',
|
|
'För att uppfylla rättsliga skyldigheter, till exempel bokföring av betalningar där så krävs.',
|
|
'För att skicka nödvändiga meddelanden till dig, till exempel återställning av lösenord.',
|
|
'Mottagaren informeras i brevets fot om att brevet skickats via Bilhej och hur hen kan kontakta oss.',
|
|
],
|
|
},
|
|
{
|
|
id: 'delning',
|
|
title: 'Vem delar vi uppgifter med?',
|
|
paragraphs: [
|
|
'Leverantörer som hjälper oss att skicka e-post, ta emot supportmail och driva webbplatsen.',
|
|
'Behörig myndighet och postoperatör i den utsträckning som krävs för att posta brevet till rätt mottagare.',
|
|
'Offentliga fordonsregister när du verifierar registreringsnummer (endast fordonsdata, inte ägaruppgifter).',
|
|
'Vi säljer inte personuppgifter och visar inte mottagarens identitet eller adress för dig som avsändare.',
|
|
],
|
|
},
|
|
{
|
|
id: 'lagring',
|
|
title: 'Hur länge sparar vi uppgifterna?',
|
|
paragraphs: [
|
|
'Kontouppgifter sparas tills du ber oss radera kontot.',
|
|
'Beställningshistorik (nummerplåt, brevtext, status) sparas så att du kan se Mina beställningar och så att vi kan hantera support.',
|
|
'Mottagarens adress sparas inte efter utskick.',
|
|
'Lösenordsåterställning gäller under begränsad tid och upphör efter användning.',
|
|
],
|
|
},
|
|
{
|
|
id: 'rattigheter',
|
|
title: 'Dina rättigheter',
|
|
paragraphs: [
|
|
'Du kan begära tillgång till, rättelse eller radering av dina uppgifter, begränsa behandling eller invända mot viss behandling.',
|
|
'Du kan begära radering av ditt konto genom att kontakta oss.',
|
|
'Du har rätt att lämna klagomål till Integritetsskyddsmyndigheten (IMY), imy.se.',
|
|
'Kontakta kontakt@bilhej.se för att utöva dina rättigheter. Vi svarar inom en månad om inte något annat anges.',
|
|
],
|
|
},
|
|
{
|
|
id: 'mottagare',
|
|
title: 'Om du fått ett brev via Bilhej',
|
|
paragraphs: [
|
|
'Din adress användes en gång för att posta brevet och ska ha raderats hos oss efter utskick.',
|
|
'För frågor eller invändning mot att få brev via tjänsten: kontakt@bilhej.se. Ange registreringsnummer om du kan.',
|
|
],
|
|
},
|
|
{
|
|
id: 'andringar',
|
|
title: 'Ändringar',
|
|
paragraphs: [
|
|
'Vi kan uppdatera denna policy när tjänsten utvecklas. Datum för senaste version anges nedan.',
|
|
],
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<div class="policy">
|
|
<section class="policy__hero">
|
|
<p class="policy__eyebrow">Integritet</p>
|
|
<h1 class="policy__title">Integritetspolicy</h1>
|
|
<p class="policy__lead">
|
|
Här beskriver vi hur Bilhej behandlar personuppgifter när du skickar
|
|
brev via tjänsten, och vilka rättigheter du har.
|
|
</p>
|
|
<p class="policy__updated">Senast uppdaterad: 22 maj 2026</p>
|
|
</section>
|
|
|
|
<section
|
|
v-for="section in sections"
|
|
:key="section.id"
|
|
:id="section.id"
|
|
class="policy__section"
|
|
>
|
|
<h2 class="policy__section-title">{{ section.title }}</h2>
|
|
<div class="policy__prose">
|
|
<p v-for="(paragraph, index) in section.paragraphs" :key="index">
|
|
{{ paragraph }}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="policy__section policy__section--cta">
|
|
<div class="policy__cta-box">
|
|
<h2 class="policy__cta-title">Frågor om integritet?</h2>
|
|
<p class="policy__cta-text">
|
|
Hör av dig via
|
|
<a class="policy__mailto" href="mailto:kontakt@bilhej.se"
|
|
>kontakt@bilhej.se</a
|
|
>
|
|
eller vår
|
|
<RouterLink to="/kontakt" class="policy__link">kontaktsida</RouterLink
|
|
>.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.policy {
|
|
max-width: 48rem;
|
|
margin: 0 auto;
|
|
padding: clamp(var(--space-xl), 6vw, var(--space-3xl)) var(--page-gutter);
|
|
}
|
|
|
|
.policy__hero {
|
|
margin-bottom: var(--space-2xl);
|
|
padding: var(--space-2xl);
|
|
background: linear-gradient(
|
|
145deg,
|
|
var(--color-surface) 0%,
|
|
#f8faff 55%,
|
|
var(--color-paper) 100%
|
|
);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-xl);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.policy__eyebrow {
|
|
display: inline-block;
|
|
margin: 0 0 var(--space-md) 0;
|
|
font-size: 0.8125rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: var(--color-primary-dark);
|
|
background: var(--color-primary-soft);
|
|
border: 1px solid #bfdbfe;
|
|
padding: 0.35rem 0.75rem;
|
|
border-radius: var(--radius-full);
|
|
}
|
|
|
|
.policy__title {
|
|
margin: 0 0 var(--space-md) 0;
|
|
font-size: clamp(1.75rem, 4vw, 2.25rem);
|
|
font-weight: 800;
|
|
letter-spacing: -0.02em;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.policy__lead {
|
|
margin: 0 0 var(--space-md) 0;
|
|
font-size: 1.0625rem;
|
|
line-height: 1.75;
|
|
color: var(--color-muted);
|
|
}
|
|
|
|
.policy__updated {
|
|
margin: 0;
|
|
font-size: 0.8125rem;
|
|
color: var(--color-soft);
|
|
}
|
|
|
|
.policy__section {
|
|
margin-bottom: var(--space-2xl);
|
|
scroll-margin-top: var(--space-lg);
|
|
}
|
|
|
|
.policy__section-title {
|
|
margin: 0 0 var(--space-md) 0;
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.policy__prose p {
|
|
margin: 0 0 var(--space-md) 0;
|
|
font-size: 0.9375rem;
|
|
line-height: 1.75;
|
|
color: var(--color-muted);
|
|
}
|
|
|
|
.policy__prose p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.policy__cta-box {
|
|
padding: var(--space-xl);
|
|
text-align: center;
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--color-primary-soft) 0%,
|
|
#eef2ff 100%
|
|
);
|
|
border: 1px solid #bfdbfe;
|
|
border-radius: var(--radius-xl);
|
|
}
|
|
|
|
.policy__cta-title {
|
|
margin: 0 0 var(--space-sm) 0;
|
|
font-size: 1.25rem;
|
|
color: var(--color-primary-dark);
|
|
}
|
|
|
|
.policy__cta-text {
|
|
margin: 0;
|
|
font-size: 0.9375rem;
|
|
line-height: 1.65;
|
|
color: var(--color-primary-dark);
|
|
}
|
|
|
|
.policy__mailto,
|
|
.policy__link {
|
|
font-weight: 600;
|
|
color: var(--color-primary);
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
}
|
|
|
|
.policy__mailto:hover,
|
|
.policy__link:hover {
|
|
color: var(--color-primary-dark);
|
|
}
|
|
</style>
|