Move button bar to bottom

administration/src/bp-modules/ButtonBar.tsx

@@ -0,0 +1,17 @@
+import { Card } from '@blueprintjs/core'
+import styled from 'styled-components'
+
+const ButtonBar = styled(Card)`
+  width: 100%;
+  padding: 15px;
+  background: #fafafa;
+  bottom: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  & button {
+    margin: 5px;
+  }
+`
+
+export default ButtonBar

administration/src/bp-modules/cards/CreateCardsForm.tsx

@@ -1,40 +1,50 @@
-import { Button, Card, Tooltip } from '@blueprintjs/core'
-import React, { useContext, useState } from 'react'
+import { Button, Icon, Tooltip } from '@blueprintjs/core'
+import { useContext, useRef, useState } from 'react'
 import FlipMove from 'react-flip-move'
 import styled from 'styled-components'
 
 import { CardBlueprint } from '../../cards/CardBlueprint'
 import { Region } from '../../generated/graphql'
 import { ProjectConfigContext } from '../../project-configs/ProjectConfigContext'
 import useBlockNavigation from '../../util/useBlockNavigation'
-import AddEakButton from './AddEakButton'
+import ButtonBar from '../ButtonBar'
 import CreateCardForm from './CreateCardForm'
 
-const ButtonBar = styled(({ stickyTop: number, ...rest }) => <Card {...rest} />)<{ stickyTop: number }>`
-  width: 100%;
-  padding: 15px;
-  background: #fafafa;
-  position: sticky;
-  z-index: 1;
-  top: ${props => props.stickyTop}px;
-  display: flex;
+const FormsWrapper = styled(FlipMove)`
+  flex-wrap: wrap;
+  flex-grow: 1;
   flex-direction: row;
-  justify-content: flex-end;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  align-items: center;
+`
 
-  & button {
-    margin: 5px;
+const AddButton = styled(Button)`
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  padding: 10px;
+  justify-content: center;
+  align-items: center;
+  transition: 0.2s background;
+  background: white;
+
+  :hover {
+    background: #f0f0f0;
   }
 `
 
-const FormsWrapper = styled(FlipMove)`
+const Scrollable = styled.div`
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  flex-basis: 0;
   padding: 10px;
   width: 100%;
-  z-index: 0;
-  flex-grow: 1;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-evenly;
-  align-items: center;
+  overflow: auto;
 `
 
 const FormColumn = styled.div`
@@ -52,12 +62,18 @@ interface Props {
 
 const CreateCardsForm = (props: Props) => {
   const { cardBlueprints, setCardBlueprints, region } = props
+  const bottomRef = useRef<HTMLDivElement>(null)
   const projectConfig = useContext(ProjectConfigContext)
   const [isModified, setModified] = useState(false)
 
+  const scrollToBottom = () => {
+    if (bottomRef.current) bottomRef.current.scrollIntoView({ behavior: 'smooth' })
+  }
+
   const addForm = () => {
     setCardBlueprints([...cardBlueprints, projectConfig.createEmptyCard(region)])
     setModified(true)
+    scrollToBottom()
   }
   const removeCardBlueprint = (oldBlueprint: CardBlueprint) => {
     setCardBlueprints(cardBlueprints.filter(blueprint => blueprint !== oldBlueprint))
@@ -74,7 +90,28 @@ const CreateCardsForm = (props: Props) => {
 
   return (
     <>
-      <ButtonBar stickyTop={0}>
+      <Scrollable>
+        <FormsWrapper onFinish={scrollToBottom}>
+          {cardBlueprints.map(blueprint => (
+            <FormColumn key={blueprint.id}>
+              <CreateCardForm
+                cardBlueprint={blueprint}
+                onRemove={() => removeCardBlueprint(blueprint)}
+                onUpdate={() => {
+                  notifyUpdate()
+                }}
+              />
+            </FormColumn>
+          ))}
+          <FormColumn key='AddButton'>
+            <AddButton icon={<Icon style={{ margin: 10 }} icon={'add'} iconSize={20} />} onClick={addForm}>
+              Karte hinzufügen
+            </AddButton>
+          </FormColumn>
+        </FormsWrapper>
+        <div ref={bottomRef} />
+      </Scrollable>
+      <ButtonBar>
         <Tooltip>
           <Button
             icon='export'
@@ -87,23 +124,6 @@ const CreateCardsForm = (props: Props) => {
           {cardBlueprints.length === 0 && 'Legen Sie zunächst eine Karte an.'}
         </Tooltip>
       </ButtonBar>
-      {/* @ts-ignore */}
-      <FormsWrapper>
-        {cardBlueprints.map(blueprint => (
-          <FormColumn key={blueprint.id}>
-            <CreateCardForm
-              cardBlueprint={blueprint}
-              onRemove={() => removeCardBlueprint(blueprint)}
-              onUpdate={() => {
-                notifyUpdate()
-              }}
-            />
-          </FormColumn>
-        ))}
-        <FormColumn key='AddButton'>
-          <AddEakButton onClick={addForm} />
-        </FormColumn>
-      </FormsWrapper>
     </>
   )
 }

administration/src/bp-modules/regions/RegionOverview.tsx

@@ -1,4 +1,4 @@
-import { Button, Card, H3, TextArea } from '@blueprintjs/core'
+import { Button, H3, TextArea } from '@blueprintjs/core'
 import { Tooltip2 } from '@blueprintjs/popover2'
 import React, { ReactElement, useState } from 'react'
 import styled from 'styled-components'
@@ -7,6 +7,7 @@ import defaultErrorMap from '../../errors/DefaultErrorMap'
 import getMessageFromApolloError from '../../errors/getMessageFromApolloError'
 import { GraphQlExceptionCode, useUpdateDataPolicyMutation } from '../../generated/graphql'
 import { useAppToaster } from '../AppToaster'
+import ButtonBar from '../ButtonBar'
 
 const Content = styled.div`
   padding: 0 6rem;
@@ -23,21 +24,6 @@ const Label = styled(H3)`
   text-align: center;
   margin: 15px;
 `
-const ButtonBar = styled(({ stickyTop: number, ...rest }) => <Card {...rest} />)<{ stickyTop: number }>`
-  width: 100%;
-  padding: 15px;
-  background: #fafafa;
-  position: sticky;
-  z-index: 1;
-  top: ${props => props.stickyTop}px;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-
-  & button {
-    margin: 5px;
-  }
-`
 
 const CharCounter = styled.span<{ $hasError: boolean }>`
   text-align: center;
@@ -74,18 +60,6 @@ const RegionOverview = ({ dataPrivacyPolicy, regionId }: RegionOverviewProps): R
 
   return (
     <>
-      <ButtonBar stickyTop={0}>
-        <Tooltip2 disabled={!maxCharsExceeded} content={errorMessage}>
-          <Button
-            disabled={maxCharsExceeded}
-            icon='floppy-disk'
-            text='Speichern'
-            intent='success'
-            onClick={onSave}
-            loading={loading}
-          />
-        </Tooltip2>
-      </ButtonBar>
       <Content>
         <Label>Datenschutzerklärung</Label>
         <TextArea
@@ -100,6 +74,18 @@ const RegionOverview = ({ dataPrivacyPolicy, regionId }: RegionOverviewProps): R
           {dataPrivacyText.length}/{MAX_CHARS}
         </CharCounter>
       </Content>
+      <ButtonBar>
+        <Tooltip2 disabled={!maxCharsExceeded} content={errorMessage}>
+          <Button
+            disabled={maxCharsExceeded}
+            icon='floppy-disk'
+            text='Speichern'
+            intent='success'
+            onClick={onSave}
+            loading={loading}
+          />
+        </Tooltip2>
+      </ButtonBar>
     </>
   )
 }