Mer om statistikk (#201)

* Legg til 'Mer om sykefraværsstatistikk' panel * Bedre layout på små flater * Endre tekst noen steder * Deploy til dev * Fiks build * Fjerne komponenter som ikke trenger å vises ved loading (viser 'skeleton' i stedet) * Forbedringer ved innhold og tekst på Innloggingsside * Ny design på Innloggingsside: flytte innlogging knapp over ekstern lenke til 'informasjon om tilgangsstyring' * Fjerne ubrukt styling
navikt · Dec 3, 2024 · e424f64 · e424f64
1 parent de75a3a
commit e424f64
Show file tree

Hide file tree

Showing 20 changed files with 697 additions and 504 deletions.
diff --git a/.github/workflows/build-deploy.yaml b/.github/workflows/build-deploy.yaml
@@ -4,7 +4,7 @@ on:
   push:
     branches:
       - main
-      - oasis-upgrade
+      - mer-om-statistikk
     paths-ignore:
       - "**.md"
       - "**/**.md"

diff --git a/src/Innlogginsside/Innloggingsside.module.scss b/src/Innlogginsside/Innloggingsside.module.scss
@@ -20,7 +20,7 @@
   }
 
   &__link {
-    margin-bottom: 2rem;
+    margin-top: 2rem;
   }
 
   .ikke-innlogget-side {

diff --git a/src/Innlogginsside/Innloggingsside.tsx b/src/Innlogginsside/Innloggingsside.tsx
@@ -24,23 +24,25 @@ export const Innloggingsside: FunctionComponent<InnloggingssideProps> = ({
           Forebygge fravær
         </Heading>
 
-        <BodyLong spacing>Inkluderende arbeidsliv</BodyLong>
+        <BodyLong spacing>Her finner du legemeldt sykefraværsstatistikk, sammenligning med din bransje og verktøy for å
+          forebygge fravær</BodyLong>
+
+        <Button
+            onClick={redirectTilLogin}
+            style={{paddingLeft: 40, paddingRight: 40}}
+        >
+          Logg inn
+        </Button>
 
         <Link
           href={
             "https://arbeidsgiver.nav.no/min-side-arbeidsgiver/informasjon-om-tilgangsstyring"
           }
           className={styles.innloggingsside__link}
         >
-          Les mer om roller og tilganger
+          Siden krever Altinn-tilganger, les mer om roller og tilganger her
         </Link>
 
-        <Button
-          onClick={redirectTilLogin}
-          style={{ paddingLeft: 40, paddingRight: 40 }}
-        >
-          Logg inn
-        </Button>
       </div>
     </div>
   );

diff --git a/src/komponenter/Banner/TestVersjonBanner.module.css b/src/komponenter/Banner/TestVersjonBanner.module.css
@@ -1,5 +1,5 @@
 .alert {
-  max-width: 60rem;
+  max-width: 80rem;
   width: 100%;
   margin: 0.5rem auto 1.5rem auto;
 }
diff --git a/src/sykefravarsstatistikk/Forside/Forside.module.css b/src/sykefravarsstatistikk/Forside/Forside.module.css
@@ -1,5 +1,5 @@
 .forside {
-    max-width: 60rem;
+    max-width: 90rem;
     margin: 0 auto 0;
 
     display: flex;
@@ -11,8 +11,25 @@
     padding: 1.5rem 1rem 5rem;
 }
 
+.forside__header_kun_print {
+    display: none;
+}
+
+.forside__wrapper_to_kolonner {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 2rem;
+}
+
+.forside__wrapper_venstre_kolonne {
+    display: flex;
+    flex-direction: column;
+    min-height: 20rem;
+
+}
+
 .forside__innhold {
-    background: white;
     padding: 2rem 1.5rem;
     width: 100%;
     border-radius: 0.25rem;
@@ -39,16 +56,45 @@
 }
 
 .forside__innhold__header {
-    display: block;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    background: white;
+    padding: 1.5rem 1rem 1rem;
+    border: 1px solid var(--a-border-default);
+    border-radius: var(--a-border-radius-small);
+}
+
+.forside__innhold__header_tekst {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.forside__innhold__header_last_ned_knapp {
+    display: flex;
+    padding: 1rem;
 }
 
 .forside__innhold__href {
     display: none;
 }
 
+.forside__wrapper_venstre_kolonne {
+    display: flex;
+    flex-direction: column;
+    min-height: 20rem;
+}
+
 @media print, (min-width: 768px) {
+    .forside__innhold__header {
+        display: flex;
+        flex-direction: row;
+    }
+
     .forside__innhold {
-        padding: 2rem;
+        padding: 2rem 5rem;
     }
 
     .forside__innhold__knapp {
@@ -59,6 +105,9 @@
 }
 
 @media print {
+    .forside__header_kun_print {
+        display: block;
+    }
     .forside__innhold__kun-print {
         display: block;
         page-break-before: always;
@@ -75,17 +124,4 @@
         display: block;
         padding-bottom: 1rem;
     }
-}
-
-.lenkepanelWrapper {
-    display: grid;
-    gap: 1rem;
-    grid-template-columns: repeat(1, 1fr);
-    margin: 1rem 0 1rem 0;
-
-}
-@media (min-width: 768px) {
-    .lenkepanelWrapper {
-        grid-template-columns: repeat(2, 1fr);
-    }
-}
+}