From 286691a7a3b3e5cf708b5a17cd0a4615f99a1f54 Mon Sep 17 00:00:00 2001
From: Sebastian Kuzniarz <kuzniarz@zedat.fu-berlin.de>
Date: Fri, 7 Jan 2022 14:28:27 +0100
Subject: [PATCH] Implemented Boat Manager - Added BoatManager with new Tiles
to admin menu - Fixed small issues
---
client/public/index.html | 2 +-
client/public/locales/de/translation.json | 13 ++++-
client/public/locales/en/translation.json | 12 ++++-
client/src/Router.tsx | 2 +
client/src/components/Header.tsx | 24 ---------
client/src/components/ManagedBoatTile.tsx | 17 ++++---
client/src/components/RentedBoatTile.tsx | 9 ++--
client/src/components/StaffLayout.tsx | 40 ++++++++-------
client/src/components/StaffModal.tsx | 8 +--
client/src/pages/BoatManager.tsx | 59 +++++++++++++++++++++++
client/src/pages/BoatOverview.tsx | 38 +++++++++------
client/src/pages/BoatTypeOverview.tsx | 12 ++---
client/src/styles/app.scss | 24 +++++++++
13 files changed, 180 insertions(+), 80 deletions(-)
delete mode 100644 client/src/components/Header.tsx
create mode 100644 client/src/pages/BoatManager.tsx
diff --git a/client/public/index.html b/client/public/index.html
index e589c04..677fd08 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -10,7 +10,7 @@
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
- <title>React App</title>
+ <title>Fahrtenbuch</title>
</head>
<body>
<div id="root"></div>
diff --git a/client/public/locales/de/translation.json b/client/public/locales/de/translation.json
index 25b920d..1d6c6a3 100644
--- a/client/public/locales/de/translation.json
+++ b/client/public/locales/de/translation.json
@@ -62,6 +62,16 @@
"labelCurrentlyRented": "Momentan augeliehene Boote",
"buttonShowAll": "Alle anzeigen"
},
+ "boatManager": {
+ "blockedBoats": "Gesperrte Boote",
+ "availableBoats": "Verfügbare Boote"
+ },
+ "managedBoatTile": {
+ "buttonInfo": "Info",
+ "buttonUnblock": "Entsperren",
+ "buttonBlock": "Sperren"
+
+ },
"routes": {
"/": "Wassersport",
"/book": "Boot buchen",
@@ -69,6 +79,7 @@
"/signout": "Bootrückgabe",
"/login": "Login",
"/staff/overview": "Bootsübersicht",
- "/staff/boattypes" : "Bootstypen"
+ "/staff/boattypes": "Bootstypen",
+ "/staff/manage": "Boote Verwalten"
}
}
\ No newline at end of file
diff --git a/client/public/locales/en/translation.json b/client/public/locales/en/translation.json
index 0fa76a3..31b1ff7 100644
--- a/client/public/locales/en/translation.json
+++ b/client/public/locales/en/translation.json
@@ -62,6 +62,15 @@
"labelCurrentlyRented": "Currently Rented Boats",
"buttonShowAll": "Show all"
},
+ "boatManager": {
+ "blockedBoats": "Blocked Boats",
+ "availableBoats": "Available Boats"
+ },
+ "managedBoatTile": {
+ "buttonInfo": "Info",
+ "buttonUnblock": "Unblock",
+ "buttonBlock": "Block"
+ },
"routes": {
"/": "Water Sports",
"/book": "Book a Boat",
@@ -69,6 +78,7 @@
"/signout": "Sign Out",
"/login": "Login",
"/staff/overview": "Boat Overview",
- "/staff/boattypes" : "Boat Types"
+ "/staff/boattypes" : "Boat Types",
+ "/staff/manage": "Manage Boats"
}
}
\ No newline at end of file
diff --git a/client/src/Router.tsx b/client/src/Router.tsx
index 5b22368..9e4bb84 100644
--- a/client/src/Router.tsx
+++ b/client/src/Router.tsx
@@ -2,6 +2,7 @@ import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import StaffLayout from "./components/StaffLayout";
import UserLayout from "./components/UserLayout";
+import BoatManager from "./pages/BoatManager";
import BoatOverview from "./pages/BoatOverview";
import BoatTypeOverview from "./pages/BoatTypeOverview";
import BookingForm from "./pages/BookingForm";
@@ -37,6 +38,7 @@ function Router() {
<Route path="staff" element={<StaffLayout />}>
<Route path="overview" element={<BoatOverview />} />
<Route path="boattypes" element={<BoatTypeOverview />} />
+ <Route path="manage" element={<BoatManager />} />
</Route>
</Routes>
</BrowserRouter>
diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
deleted file mode 100644
index 8a83863..0000000
--- a/client/src/components/Header.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from "react";
-import { Navbar, Container, Nav } from "react-bootstrap";
-import { Link } from "react-router-dom";
-
-function Header() {
- return (
- <Navbar bg="green" variant="dark">
- <Container>
- <Navbar.Brand as={Link} to="/">
- Navbar
- </Navbar.Brand>
- <Nav className="me-auto">
- <Nav.Link as={Link} to="/vehicleTypes">
- Types
- </Nav.Link>
- <Nav.Link as={Link} to="/login">
- Login
- </Nav.Link>
- </Nav>
- </Container>
- </Navbar>
- );
-}
-export default Header;
diff --git a/client/src/components/ManagedBoatTile.tsx b/client/src/components/ManagedBoatTile.tsx
index 3b6878f..f0e2ce4 100644
--- a/client/src/components/ManagedBoatTile.tsx
+++ b/client/src/components/ManagedBoatTile.tsx
@@ -5,17 +5,20 @@ import { useTranslation } from "react-i18next";
// import { Link } from "react-router-dom";
function ManagedBoatTile(props: any) {
- const {t} = useTranslation();
- return(
+ const { t } = useTranslation();
+ return (
<Col>
- <div className={`card-body shadow position-relative mb-1 rounded-2 ${props.blocked ? 'bg-dark' : 'bg-green'}` } style={{height : "80px"}}>
- <div className="text-uppercase fs-4 tile-label-boatName position-absolute ms-2 mt-1 top-0 start-0 text-white fw-bold">{props.boatName}</div>
+ <div className={`card-body shadow position-relative mb-1 rounded-2 ${props.blocked ? 'bg-info' : 'bg-success'}`} style={{ height: "90px" }}>
+ <div title={props.boatName} className="text-uppercase fs-4 tile-label-boatName position-absolute ms-2 mt-1 top-0 start-0 text-center text-white fw-bold"
+ style={{ width: "95%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{props.boatName}</div>
<div className="tile-label-time position-absolute me-2 mt-2 top-0 end-0 text-white">{props.lastUsed}</div>
- <Button variant="light" className="mb-2 ms-2 bottom-0 start-0 shadow-sm bg-white border w-50 text-uppercase rounded-pill">{t("managedBoatTile.buttonInfo")}</Button>
- <Button variant="light" className={`mb-2 me-2 bottom-0 end-0 shadow-sm ${props.blocked ? 'bg-green' : 'bg-danger'} border w-50 text-uppercase rounded-pill`}>{props.blocked ? t("managedBoatTile.buttonUnblock") : t("managedBoatTile.buttonUBlock")}</Button>
+ <div className="d-flex justify-content-between" style={{ marginTop: "24px", width: "104%", marginLeft: "-2%" }}>
+ <Button variant="secondary" style={{ flex: 0.48 }} className="mb-2 ms-2 bottom-0 start-0 shadow-sm text-uppercase rounded-pill">{t("managedBoatTile.buttonInfo")}</Button>
+ <Button variant={`${props.blocked ? 'success' : 'danger'}`} style={{ flex: 0.48 }} className={`mb-2 me-2 bottom-0 end-0 shadow-sm text-uppercase rounded-pill`}>{props.blocked ? t("managedBoatTile.buttonUnblock") : t("managedBoatTile.buttonBlock")}</Button>
+ </div>
</div>
</Col>
-
+
);
}
diff --git a/client/src/components/RentedBoatTile.tsx b/client/src/components/RentedBoatTile.tsx
index 1ea3c76..df40ea0 100644
--- a/client/src/components/RentedBoatTile.tsx
+++ b/client/src/components/RentedBoatTile.tsx
@@ -4,10 +4,11 @@ import { Col } from "react-bootstrap";
// import { Link } from "react-router-dom";
function RentedBoatTile(props: any) {
- return(
+ return (
<Col>
- <div className={`card-body shadow position-relative mb-1 rounded-2 ${props.overdue ? 'bg-danger' : 'bg-secondary'}` } style={{height : "80px"}}>
- <div className="text-uppercase fs-4 tile-label-boatName position-absolute ms-2 mt-1 top-0 start-0 text-white fw-bold">{props.boatName}</div>
+ <div className={`card-body shadow position-relative mb-1 rounded-2 ${props.overdue ? 'bg-danger' : 'bg-secondary'} rentedBoatTile`} style={{ height: "90px" }}>
+ <div className="text-uppercase fs-4 tile-label-boatName position-absolute ms-2 mt-1 top-0 start-0 text-white fw-bold"
+ style={{ maxWidth: "98%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{props.boatName}</div>
<div className="tile-label-time position-absolute me-2 mt-2 top-0 end-0 text-white">{props.time}</div>
<div className="tile-label-persons position-absolute ms-2 mb-2 bottom-0 start-0 text-white">{props.persons}</div>
{/* Conditonally render the overdue text if it is set*/}
@@ -16,7 +17,7 @@ function RentedBoatTile(props: any) {
}
</div>
</Col>
-
+
);
}
diff --git a/client/src/components/StaffLayout.tsx b/client/src/components/StaffLayout.tsx
index 68f1839..518f1dd 100644
--- a/client/src/components/StaffLayout.tsx
+++ b/client/src/components/StaffLayout.tsx
@@ -1,27 +1,33 @@
import { Container, Nav, Navbar } from "react-bootstrap";
import { useTranslation } from "react-i18next";
-import {Outlet, useLocation} from "react-router-dom";
+import { Outlet, useLocation } from "react-router-dom";
function StaffLayout() {
- const {t} = useTranslation();
+ const { t } = useTranslation();
const location = useLocation();
return (
<div>
- <Navbar sticky="top" className="bg-secondary" variant="dark" expand="lg">
- <Container>
- <Navbar.Brand className="fw-bold">{t(`routes.${location.pathname}`)}</Navbar.Brand>
- <Navbar.Toggle />
- <Navbar.Collapse>
- <Nav className="mr-auto" activeKey={location.pathname}>
- <Nav.Link href="/staff/overview">{t("staffNav.buttonBoatOverview")}</Nav.Link>
- <Nav.Link>{t("staffNav.buttonManageBoats")}</Nav.Link>
- <Nav.Link>{t("staffNav.buttonStatistics")}</Nav.Link>
- <Nav.Link>{t("staffNav.buttonLogout")}</Nav.Link>
- </Nav>
- </Navbar.Collapse>
- </Container>
- </Navbar>
- <Outlet />
+ <Navbar sticky="top" className="bg-secondary" variant="dark" expand="lg">
+ <Container>
+ <Navbar.Brand className="fw-bold">{t(`routes.${location.pathname}`)}</Navbar.Brand>
+ <Navbar.Toggle />
+ <Navbar.Collapse>
+ <Nav className="mr-auto d-flex justify-content-between w-100">
+ <div className="d-flex">
+ <Nav activeKey={location.pathname}>
+ <Nav.Link href="/staff/overview">{t("staffNav.buttonBoatOverview")}</Nav.Link>
+ <Nav.Link href="/staff/manage">{t("staffNav.buttonManageBoats")}</Nav.Link>
+ <Nav.Link>{t("staffNav.buttonStatistics")}</Nav.Link>
+ </Nav>
+ </div>
+ <div>
+ <Nav.Link>{t("staffNav.buttonLogout")}</Nav.Link>
+ </div>
+ </Nav>
+ </Navbar.Collapse>
+ </Container>
+ </Navbar>
+ <Outlet />
</div>
);
}
diff --git a/client/src/components/StaffModal.tsx b/client/src/components/StaffModal.tsx
index ed8f8e5..3de2e86 100644
--- a/client/src/components/StaffModal.tsx
+++ b/client/src/components/StaffModal.tsx
@@ -9,6 +9,7 @@ function StaffModal(props: {
onSuccess?: any;
onHide?: any;
successText?: string;
+ hideSuccess?: boolean;
hideText?: string;
show: boolean;
}) {
@@ -34,14 +35,15 @@ function StaffModal(props: {
variant={props.hideColor || "secondary"}
onClick={props.onHide}
>
- {props.hideText || t("staffModal.Close")}
+ {props.hideText || t("staffModal.Cancel")}
</Button>
- <Button
+ {!props.hideSuccess ? <Button
variant={props.successColor || "primary"}
onClick={props.onSuccess}
>
{props.successText || t("staffModal.Done")}
- </Button>
+ </Button> : {}}
+
</Modal.Footer>
</Modal>
);
diff --git a/client/src/pages/BoatManager.tsx b/client/src/pages/BoatManager.tsx
new file mode 100644
index 0000000..589a222
--- /dev/null
+++ b/client/src/pages/BoatManager.tsx
@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from "react";
+import { Button, Container, Row } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
+import Divider from "../components/Divider";
+import ManagedBoatTile from "../components/ManagedBoatTile";
+import { faEdit, faTrashAlt } from "@fortawesome/free-regular-svg-icons";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import StaffModal from "../components/StaffModal"
+
+function BoatManager() {
+ const { t } = useTranslation();
+ const [addElement, setAddElement] = useState<any>(false);
+
+ return (
+ <div className="text-center position-relative">
+ <h2 className="d-flex justify-content-center my-3">{t("boatManager.blockedBoats")}</h2>
+ {/*TODO: Make dynamic*/}
+ <div className="py-3 bg-light border">
+ <Container>
+ <div className="overdue-tiles text-center">
+ <Row xs={1} md={2} xxl={3}>
+ <ManagedBoatTile boatName="Nicholas Unless-Jesus-Christ-Had-Died-For-Thee-Thou-Hadst-Been-Damned Barbon" blocked={true}></ManagedBoatTile>
+ <ManagedBoatTile boatName="Canoe 7" blocked={true}></ManagedBoatTile>
+ <ManagedBoatTile boatName="Canoe 13" blocked={true}></ManagedBoatTile>
+ <ManagedBoatTile boatName="Canoe 16" blocked={true}></ManagedBoatTile>
+ <ManagedBoatTile boatName="Canoe 22" blocked={true}></ManagedBoatTile>
+ </Row>
+ </div>
+ <Button variant="light" className="mt-3 shadow-sm bg-white border w-50 text-uppercase rounded-pill">{t("boatOverview.buttonShowAll")}</Button>
+ </Container>
+ </div>
+
+ <h2 className="my-3">{t("boatManager.availableBoats")}</h2>
+ <div className="py-3 bg-light border">
+ <Container>
+ <div className="overdue-tiles text-center">
+ <Row xs={1} md={2} xxl={3}>
+ <ManagedBoatTile boatName="Canoe 2" time="13:15-15:14" persons="3 Person" blocked={false}></ManagedBoatTile>
+ <ManagedBoatTile boatName="Canoe 5" time="13:15-15:14" persons="3 Person" blocked={false}></ManagedBoatTile>
+ <ManagedBoatTile boatName="Canoe 6" time="13:15-15:14" persons="3 Person" blocked={false}></ManagedBoatTile>
+ <ManagedBoatTile boatName="Canoe 9" time="13:15-15:14" persons="3 Person" blocked={false}></ManagedBoatTile>
+ <ManagedBoatTile boatName="Canoe 18" time="13:15-15:14" persons="3 Person" blocked={false}></ManagedBoatTile>
+ <ManagedBoatTile boatName="Canoe 20" time="13:15-15:14" persons="3 Person" blocked={false}></ManagedBoatTile>
+ </Row>
+ </div>
+ <Button variant="light" className="mt-3 shadow-sm bg-white border w-50 text-uppercase rounded-pill">{t("boatOverview.buttonShowAll")}</Button>
+ </Container>
+ </div>
+ <div className="d-flex px-2 py-1 justify-content-end bg-white border-top" style={{ position: "sticky", right: "5px", bottom: "0", zIndex: 3 }}>
+ <Button onClick={() => { setAddElement(true) }} variant="secondary"><FontAwesomeIcon icon={faPlus} className="text-white" /> Add Boat</Button>
+ </div>
+ <StaffModal header={"Add BoatType"} show={addElement} successText="Add" onHide={() => { setAddElement(false) }} onSuccess={() => { setAddElement(undefined) }}>
+ </StaffModal>
+ </div>
+ );
+}
+
+export default BoatManager;
\ No newline at end of file
diff --git a/client/src/pages/BoatOverview.tsx b/client/src/pages/BoatOverview.tsx
index 78f00a5..876eafd 100644
--- a/client/src/pages/BoatOverview.tsx
+++ b/client/src/pages/BoatOverview.tsx
@@ -1,11 +1,15 @@
+import React, { useEffect, useState } from "react";
import { Button, Container, Row } from "react-bootstrap";
import { useTranslation } from "react-i18next";
import Divider from "../components/Divider";
import RentedBoatTile from "../components/RentedBoatTile";
+import StaffModal from "../components/StaffModal";
function BoatOverview() {
- const {t} = useTranslation();
+ const { t } = useTranslation();
+ const [infoElement, setInfoElement] = useState<any>(undefined);
+
return (
<div className="text-center">
{/*TODO: Make dynamic*/}
@@ -13,8 +17,8 @@ function BoatOverview() {
<div className="py-3 bg-light border">
<Container>
<div className="overdue-tiles text-center">
- <Row xs={1} md={2} xxl={3}>
- <RentedBoatTile boatName="Canoe 1" time="13:15-15:14" persons="1 Person" overdue="Overdue!"></RentedBoatTile>
+ <Row xs={1} md={2} xxl={3}>
+ <RentedBoatTile boatName="Canoe 1" time="13:15-15:14" persons="1 Person" overdue="Overdue!" onClick={()=>{setInfoElement({boatName:"ABC"})}}></RentedBoatTile>
<RentedBoatTile boatName="Canoe 7" time="13:15-15:14" persons="3 Person" overdue="Overdue!"></RentedBoatTile>
<RentedBoatTile boatName="Canoe 13" time="13:15-15:14" persons="3 Person" overdue="Overdue!"></RentedBoatTile>
<RentedBoatTile boatName="Canoe 16" time="13:15-15:14" persons="3 Person" overdue="Overdue!"></RentedBoatTile>
@@ -27,20 +31,22 @@ function BoatOverview() {
<h2 className="my-3">{t("boatOverview.labelCurrentlyRented")}</h2>
<div className="py-3 bg-light border">
- <Container>
- <div className="overdue-tiles text-center">
- <Row xs={1} md={2} xxl={3}>
- <RentedBoatTile boatName="Canoe 2" time="13:15-15:14" persons="3 Person" overdue={false}></RentedBoatTile>
- <RentedBoatTile boatName="Canoe 5" time="13:15-15:14" persons="3 Person" overdue={false}></RentedBoatTile>
- <RentedBoatTile boatName="Canoe 6" time="13:15-15:14" persons="3 Person" overdue={false}></RentedBoatTile>
- <RentedBoatTile boatName="Canoe 9" time="13:15-15:14" persons="3 Person" overdue={false}></RentedBoatTile>
- <RentedBoatTile boatName="Canoe 18" time="13:15-15:14" persons="3 Person" overdue={false}></RentedBoatTile>
- <RentedBoatTile boatName="Canoe 20" time="13:15-15:14" persons="3 Person" overdue={false}></RentedBoatTile>
- </Row>
- </div>
- <Button variant="light" className="mt-3 shadow-sm bg-white border w-50 text-uppercase rounded-pill">{t("boatOverview.buttonShowAll")}</Button>
- </Container>
+ <Container>
+ <div className="overdue-tiles text-center">
+ <Row xs={1} md={2} xxl={3}>
+ <RentedBoatTile boatName="Canoe 2" time="13:15-15:14" persons="3 Person" overdue={false}></RentedBoatTile>
+ <RentedBoatTile boatName="Canoe 5" time="13:15-15:14" persons="3 Person" overdue={false}></RentedBoatTile>
+ <RentedBoatTile boatName="Canoe 6" time="13:15-15:14" persons="3 Person" overdue={false}></RentedBoatTile>
+ <RentedBoatTile boatName="Canoe 9" time="13:15-15:14" persons="3 Person" overdue={false}></RentedBoatTile>
+ <RentedBoatTile boatName="Canoe 18" time="13:15-15:14" persons="3 Person" overdue={false}></RentedBoatTile>
+ <RentedBoatTile boatName="Canoe 20" time="13:15-15:14" persons="3 Person" overdue={false}></RentedBoatTile>
+ </Row>
+ </div>
+ <Button variant="light" className="mt-3 shadow-sm bg-white border w-50 text-uppercase rounded-pill">{t("boatOverview.buttonShowAll")}</Button>
+ </Container>
</div>
+ <StaffModal header={"Boat Info"} show={infoElement} hideSuccess={true} onHide={() => { setInfoElement(undefined) }} onSuccess={() => { setInfoElement(undefined) }}>
+ </StaffModal>
</div>
);
}
diff --git a/client/src/pages/BoatTypeOverview.tsx b/client/src/pages/BoatTypeOverview.tsx
index 77bc6da..3cff90c 100644
--- a/client/src/pages/BoatTypeOverview.tsx
+++ b/client/src/pages/BoatTypeOverview.tsx
@@ -4,9 +4,9 @@ import { useTranslation } from "react-i18next";
import { faEdit, faTrashAlt } from "@fortawesome/free-regular-svg-icons";
import { faPlus } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import StaffModal from "../components/StaffModal"
+import StaffModal from "../components/StaffModal";
-function BoatOverview() {
+function BoatTypeOverview() {
const { t } = useTranslation();
const [editElement, setEditElement] = useState<any>(undefined);
const [deleteElement, setDeleteElement] = useState<any>(undefined);
@@ -14,7 +14,7 @@ function BoatOverview() {
return (
<div className="m-1 h-100">
<div className="my-2 d-flex justify-content-end mx-2">
- <Button onClick={()=>{setAddElement(true)}} variant="secondary"><FontAwesomeIcon icon={faPlus} className="text-white" /> Add</Button>
+ <Button onClick={() => { setAddElement(true) }} variant="secondary"><FontAwesomeIcon icon={faPlus} className="text-white" /> Add</Button>
</div>
<Table responsive striped bordered hover>
<thead>
@@ -53,10 +53,10 @@ function BoatOverview() {
}
</tbody>
</Table>
- <StaffModal header={"Add BoatType"} show={addElement} successText="Add" onHide={() => { setAddElement(false) }}>
+ <StaffModal header={"Add BoatType"} show={addElement} successText="Add" onHide={() => { setAddElement(false) }} onSuccess={() => { setAddElement(undefined) }}>
</StaffModal>
- <StaffModal header={"Edit BoatType"} show={editElement} onHide={() => { setEditElement(undefined) }}>
+ <StaffModal header={"Edit BoatType"} show={editElement} onHide={() => { setEditElement(undefined) }} onSuccess={() => { setEditElement(undefined) }}>
</StaffModal>
<StaffModal header={"Delete BoatType?"} hideColor="secondary" successText="Delete" successColor="danger" show={deleteElement} onHide={() => { setDeleteElement(undefined) }} onSuccess={() => { setDeleteElement(undefined) }}>
@@ -66,4 +66,4 @@ function BoatOverview() {
);
}
-export default BoatOverview;
\ No newline at end of file
+export default BoatTypeOverview;
\ No newline at end of file
diff --git a/client/src/styles/app.scss b/client/src/styles/app.scss
index 95bc073..bc5e375 100644
--- a/client/src/styles/app.scss
+++ b/client/src/styles/app.scss
@@ -1,5 +1,7 @@
$primary: #99CC00;
$secondary: #003366;
+$info: #6c757d;
+$success: #1EB236;
$font-family: Roboto;
$font-weight-base: 300;
@@ -22,4 +24,26 @@ $body-color: $secondary;
cursor: pointer;
transform: scale(1.2);
}
+}
+.rentedBoatTile.bg-danger {
+ &:hover{
+ background: lighten(rgb(220, 53, 69), 6%)!important;
+ cursor: pointer;
+ }
+
+ &:active {
+ background: rgb(220, 53, 69)!important;
+ box-shadow: inset 0 0 8px rgba(0,0,0,0.5)!important;
+ }
+}
+.rentedBoatTile.bg-secondary {
+ &:hover{
+ background: lighten(rgb(0,51,102), 6%)!important;
+ cursor: pointer;
+ }
+
+ &:active {
+ background: rgb(0,51,102)!important;
+ box-shadow: inset 0 0 8px rgba(255,255,255,0.5)!important;
+ }
}
\ No newline at end of file
--
GitLab