Merge branch 'master' into tittel

Artsdatabanken · Apr 10, 2019 · 2bcac0c · 2bcac0c
2 parents 1ee5e04 + ed75b3f
commit 2bcac0c
Show file tree

Hide file tree

Showing 15 changed files with 229 additions and 192 deletions.
diff --git a/src/App.js b/src/App.js
@@ -3,7 +3,8 @@ import MainDrawer from "./MainDrawer/MainDrawer";
 import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
 import React from "react";
 import { BrowserRouter } from "react-router-dom";
-import "./App.css";
+import "./style/App.css";
+import "./style/Sidebar.css";
 import Grunnkart from "./Grunnkart/Grunnkart";
 import Informasjon from "./Informasjon/Informasjon";
 import SettingsContainer from "./SettingsContainer";

diff --git a/src/InfoTab/index.js b/src/InfoTab/index.js
@@ -17,36 +17,36 @@ const InfoTab = () => (
     <h2>Hvordan navigere?</h2>
     <h3>Søkefeltet</h3>
     <p>
-      Hvis du vet hva du vil se på, anbefaler vi å bruke søkefeltet. 
-      Her kan du skive inn og få forslag basert på eksisterende
-      undersider i Natur i Norge-systemet.
+      Hvis du vet hva du vil se på, anbefaler vi å bruke søkefeltet. Her kan du
+      skive inn og få forslag basert på eksisterende undersider i Natur i
+      Norge-systemet.
     </p>
     <h3>Finn en lokalitet</h3>
     <p>
-      For å finne all informasjon kartet inneholder på et bestemt sted er det best å navigere i selve kartet.
-      Her kan du velge å zoome inn og ut enten ved hjelp av pluss og
-      minusknappene, bruke fingrene på mobil eller scrollbar på
-      desktop-løsninger. Om du trykker på kartet setter du en markør på stedet
-      du trykte på, og du vil få opp mer informasjon om denne plassen. Ønsker du
-      å se samlet informasjon om et område, er det den letteste måten å få dette
-      opp på.
+      For å finne all informasjon kartet inneholder på et bestemt sted er det
+      best å navigere i selve kartet. Her kan du velge å zoome inn og ut enten
+      ved hjelp av pluss og minusknappene, bruke fingrene på mobil eller
+      scrollbar på desktop-løsninger. Om du trykker på kartet setter du en
+      markør på stedet du trykte på, og du vil få opp mer informasjon om denne
+      plassen. Ønsker du å se samlet informasjon om et område, er det den
+      letteste måten å få dette opp på.
     </p>
     <h3>Benytt deg av hierarkiet</h3>
     <p>
       Inne i informasjonsboksen på pc-enheter eller informasjonsfanen på mobil
       vil du kunne finne et felt kalt hierarki som viser hvor du har havnet i
       sidesystemet. Alt inne i boksen hierarki er høyere nivå enn ditt nåværende
       utvalg. Under dette hierarkiet vil det være forskjellige bokser med
-      undersider du kan navigere deg videre til. 
+      undersider du kan navigere deg videre til.
     </p>
 
     <h2>Fravær av data</h2>
     <p>
       Vi jobber fortløpende med tilgjengeliggjøre data fra våre
       samarbeidspartnere, men kan ikke garantere at alt finnes til en hver tid.
-      Vi er avhengige av at våre dataleverandører gir
-      oss fri bruk og tilgang. Hvis
-      du savner et datasett, anbefaler vi deg å ta kontakt med Artsdatabanken, eller den enkelte dataeier.
+      Vi er avhengige av at våre dataleverandører gir oss fri bruk og tilgang.
+      Hvis du savner et datasett, anbefaler vi deg å ta kontakt med
+      Artsdatabanken, eller den enkelte dataeier.
     </p>
   </div>
 );

diff --git a/src/Informasjon/Informasjon.js b/src/Informasjon/Informasjon.js
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { withRouter } from "react-router";
-import "./Informasjon.css";
+import ".././style/Informasjon.css";
 
 const Informasjon = props => {
   if (props.location.pathname !== "/") return null;

diff --git a/src/Kodetre/Kodeliste/Bildeavatar.js b/src/Kodetre/Kodeliste/Bildeavatar.js
@@ -25,6 +25,8 @@ const styles = {
 };
 
 class BildeAvatar extends Component {
+  // Primarily used to display avatars of searchable content, such as logos in the search menu
+  // And also in the sidebar display box header thing
   render() {
     const { farge, farge0, classes, kode, url } = this.props;
     const size = this.props.size || "big";

diff --git a/src/Kodetre/Kodeliste/Ekspander.js b/src/Kodetre/Kodeliste/Ekspander.js
@@ -1,53 +1,12 @@
 import React from "react";
-import {
-  ExpansionPanelDetails,
-  ExpansionPanel,
-  withStyles,
-  Typography
-} from "@material-ui/core";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import Link from "@material-ui/icons/Link";
 import OpenData from "./OpenData";
-import EkspanderSummary from "./EkspanderSummary";
-
-const styles = theme => ({
-  root: {
-    width: "100%"
-  },
-  icon: {
-    position: "absolute",
-    left: 16,
-    top: "50%",
-    transform: "translateY(-50%) rotate(0deg)",
-    paddingRight: 6,
-    color: "rgba(0,0,0,0.5)"
-  },
-  heading: {
-    fontSize: theme.typography.pxToRem(15),
-    flexBasis: "90%",
-    flexShrink: 1,
-    lineHeight: "2.6em",
-    paddingLeft: 24,
-    color: "rgba(0,0,0,0.5)"
-  },
-  secondaryHeading: {
-    fontSize: theme.typography.pxToRem(15),
-    lineHeight: "2.6em",
-    fontWeight: 500,
-    whiteSpace: "nowrap",
-    color: "rgba(0,0,0,0.3)"
-  },
-  panelDetails: {
-    display: "block",
-    _padding: 0
-  }
-});
 
 const Ekspander = ({
   expanded,
   visible = true,
   onExpand,
-  classes,
   children,
   heading,
   heading2,
@@ -56,28 +15,28 @@ const Ekspander = ({
   if (!visible) return null;
   if (heading === "Datakilde") icon = <OpenData />;
   return (
-    <ExpansionPanel
+    <div
       expanded={expanded}
-      onChange={onExpand}
-      className={classes.panel}
+      onClick={onExpand}
+      className="sidebar_element clickable_element"
     >
-      <EkspanderSummary
-        expandIcon={<ExpandMoreIcon />}
-        className={classes.panelSummary}
-      >
-        <div className={classes.icon}>{icon || <Link />}</div>
-        <Typography className={classes.heading}>{heading}</Typography>
+      <h3>
+        {icon || <Link />}
+        {heading}
         {heading2 && (
-          <Typography className={classes.secondaryHeading}>
+          <span className="sidebar_title_number">
             {heading2}
-          </Typography>
+            {expanded === true && (
+              <ExpandMoreIcon className="expand_icon rotated" />
+            )}
+            {expanded !== true && <ExpandMoreIcon className="expand_icon" />}
+          </span>
         )}
-      </EkspanderSummary>
-      <ExpansionPanelDetails className={classes.panelDetails}>
-        {children}
-      </ExpansionPanelDetails>
-    </ExpansionPanel>
+      </h3>
+
+      {expanded === true && <div className="expander_content">{children}</div>}
+    </div>
   );
 };
 
-export default withStyles(styles)(Ekspander);
+export default Ekspander;
diff --git a/src/Kodetre/Kodeliste/Knapperad.js b/src/Kodetre/Kodeliste/Knapperad.js
@@ -1,5 +1,5 @@
-import { Button, CardActions, withStyles } from "@material-ui/core";
-import { ZoomOutMap } from "@material-ui/icons/";
+import { Button, withStyles } from "@material-ui/core";
+import { OpenInNew } from "@material-ui/icons/";
 //import { LibraryAdd, ZoomOutMap, ColorLens } from "@material-ui/icons/";
 import React from "react";
 import { withRouter } from "react-router";
@@ -28,7 +28,7 @@ const Knapperad = ({
 }) => (
   <>
     {bbox && (
-      <CardActions className={classes.cardActions}>
+      <div className="sidebar_element">
         {/* 
       <Button
           className={classes.button}
@@ -47,11 +47,11 @@ const Knapperad = ({
       </Button>
       */}
 
-        <Button className={classes.button} onClick={() => onFitBounds(bbox)}>
-          <ZoomOutMap className={classes.iconSmall} />
+        <Button className="zoom_button" onClick={() => onFitBounds(bbox)}>
+          <OpenInNew className="classes.iconSmall" />
           Zoom til
         </Button>
-      </CardActions>
+      </div>
     )}
   </>
 );

diff --git a/src/Kodetre/Kodeliste/KodeVindu.js b/src/Kodetre/Kodeliste/KodeVindu.js
@@ -9,16 +9,11 @@ import Kodeliste from "./Kodeliste";
 import Statistikk from "./Statistikk";
 import Gradienter from "./Gradienter";
 import Ekspander from "./Ekspander";
-import Ingress from "./Ingress";
 import Kurver from "./Kurver";
 import Kurve from "./Kurve";
-import {
-  CallSplit,
-  MergeType,
-  DescriptionOutlined,
-  ShowChart,
-  Gradient
-} from "@material-ui/icons/";
+import Knapperad from "./Knapperad";
+import Link from "@material-ui/icons/Link";
+import { CallSplit, MergeType, ShowChart, Gradient } from "@material-ui/icons/";
 import KurveContainer from "./KurveContainer";
 import Nedlasting from "./Nedlasting";
 
@@ -53,6 +48,7 @@ const KodeVindu = ({
     bbox,
     ingress,
     infoUrl,
+    classes,
     tittel,
     nivå,
     overordnet,
@@ -98,17 +94,32 @@ const KodeVindu = ({
                 value={meta.depth}
               />
             )}
-            <Ekspander
-              visible={!!ingress}
-              expanded={expand.ingress}
-              heading="Beskrivelse"
-              icon={<DescriptionOutlined />}
-              onExpand={() =>
-                setExpand({ ...expand, ingress: !expand.ingress })
-              }
-            >
-              <Ingress beskrivelse={ingress} infoUrl={infoUrl} />
-            </Ekspander>
+
+            {ingress && (
+              <div className="sidebar_description sidebar_element">
+                <p>
+                  {ingress} <br />
+                  {infoUrl && (
+                    <a href={infoUrl}>
+                      <Link /> Les mer
+                    </a>
+                  )}
+                </p>
+              </div>
+            )}
+
+            {overordnet.length > 0 && (
+              <Knapperad
+                overordnet={overordnet}
+                classes={classes}
+                erAktivert={erAktivert}
+                bbox={bbox}
+                onFitBounds={onFitBounds}
+                onToggleLayer={onToggleLayer}
+                className="Temporary_class_for_detection_3"
+              />
+            )}
+
             <Ekspander
               visible={prefiks !== "AO" && !!stats}
               expanded={expand.stats}

diff --git a/src/Kodetre/Kodeliste/Kodekort.js b/src/Kodetre/Kodeliste/Kodekort.js
@@ -1,13 +1,15 @@
-import { Card, CardMedia } from "@material-ui/core";
+import { CardMedia } from "@material-ui/core";
 import React from "react";
 import config from "../../config";
 import språk from "../../språk";
 import Tittelblokk from "./Tittelblokk";
 import tinycolor from "tinycolor2";
-import Knapperad from "./Knapperad";
+
 import { kontrastfarge } from "../../farger";
 
 class Kodekort extends React.Component {
+  // This component is used in the top part of the sidebar,
+  // contains image, header-row (Tittelblokk), and the zoom button navbar (Knapperad)
   state = {
     visBilde: false
   };
@@ -46,25 +48,34 @@ class Kodekort extends React.Component {
       url,
       farge,
       prefiks,
-      bbox,
       tittel,
       nivå,
       overordnet,
-      classes,
-      erAktivert,
-      onNavigate,
-      onFitBounds,
-      onToggleLayer
+      onNavigate
     } = this.props;
     const tc = new tinycolor(farge);
+    //var new_url = config.getFotoOmslag(url, 408);
     return (
-      <Card square={false}>
+      <div
+        square={false}
+        className="sidebar_top_area sidebar_background_element"
+      >
         <CardMedia
+          className="Temporary_class_for_detection"
           style={this.styles(url)}
           onClick={this.handleOpen}
           image={config.getFotoOmslag(url, 408)}
           alt={"foto av" + tittel}
         />
+
+        {/*
+      // for fremtidig oppgradering om vi ønsker det, isåfal må vi detektere transparang bakgrunn på et vis
+        <div
+          className="sidebar_top_image"
+          style={{ backgroundImage: "url(" + new_url + ")" }}
+        />
+        */}
+
         <Tittelblokk
           tittel={språk(tittel)}
           farge={tc.desaturate(30).toHexString()}
@@ -79,17 +90,7 @@ class Kodekort extends React.Component {
           onNavigate={onNavigate}
           overordnet={overordnet}
         />
-        {overordnet.length > 0 && (
-          <Knapperad
-            overordnet={overordnet}
-            classes={classes}
-            erAktivert={erAktivert}
-            bbox={bbox}
-            onFitBounds={onFitBounds}
-            onToggleLayer={onToggleLayer}
-          />
-        )}
-      </Card>
+      </div>
     );
   }
 }