From 20b48b0003f198ef51eb982735526011f59c511d Mon Sep 17 00:00:00 2001
From: MikunoNaka <bokuwakanojogahoshii@yahoo.com>
Date: Sun, 29 Aug 2021 10:46:06 +0530
Subject: styled SubmitButton and making it disappear when invalid
---
src/components/Display/Display.scss | 8 ++++++++
src/components/Display/SummaryDisplay.tsx | 8 +++++---
src/components/Pages/BillingPage.scss | 20 ++++++++++++++++++++
src/components/Pages/BillingPage.tsx | 1 +
src/styles/global.scss | 16 ----------------
5 files changed, 34 insertions(+), 19 deletions(-)
create mode 100644 src/components/Pages/BillingPage.scss
(limited to 'src')
diff --git a/src/components/Display/Display.scss b/src/components/Display/Display.scss
index 8be6c4e..214cb18 100644
--- a/src/components/Display/Display.scss
+++ b/src/components/Display/Display.scss
@@ -58,10 +58,18 @@
}
.SummaryDisplay {
+ position: relative;
width: 30%;
padding: 0.5rem 2rem;
}
+.SummaryDisplay .SubmitButton {
+ position: absolute;
+ bottom: 1rem;
+ right: 1rem;
+ padding: 0.3rem;
+}
+
.SummaryDisplay h1 {
font-size: 3rem;
margin: 0.5rem -1.5rem;
diff --git a/src/components/Display/SummaryDisplay.tsx b/src/components/Display/SummaryDisplay.tsx
index 5d1589e..37ba077 100644
--- a/src/components/Display/SummaryDisplay.tsx
+++ b/src/components/Display/SummaryDisplay.tsx
@@ -92,9 +92,11 @@ const SummaryDisplay: React.FC<props> = (props) => {
</tbody>
</table>
- <button onClick={() => props.setShowSubmitMenu(true)}>
- Submit
- </button>
+ {props.items.length > 0 &&
+ <button className={"SubmitButton"} onClick={() => props.setShowSubmitMenu(true)}>
+ Submit (experimental)
+ </button>
+ }
</div>
);
}
diff --git a/src/components/Pages/BillingPage.scss b/src/components/Pages/BillingPage.scss
new file mode 100644
index 0000000..f359df1
--- /dev/null
+++ b/src/components/Pages/BillingPage.scss
@@ -0,0 +1,20 @@
+@import "./../../styles/theme";
+
+.BillingPageFlex div {
+ box-sizing: border-box;
+ border: 1px solid $border1;
+}
+
+.BillingPageFlex {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ height: 27rem;
+}
+
+@media only screen and (max-device-width: 480px) {
+ .BillingPageFlex {
+ flex-direction: column;
+ height: 35rem;
+ }
+}
diff --git a/src/components/Pages/BillingPage.tsx b/src/components/Pages/BillingPage.tsx
index c1d30a5..e065cbc 100644
--- a/src/components/Pages/BillingPage.tsx
+++ b/src/components/Pages/BillingPage.tsx
@@ -7,6 +7,7 @@
*/
import React, { useState, useEffect } from "react";
+import "./BillingPage.scss";
import { Item, Person, Transport/*, Invoice*/ } from "../../interfaces";
import axios from "axios";
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 3d077f6..769f07a 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -57,18 +57,6 @@ body {
max-width: 1920px;
}
-.BillingPageFlex {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
- height: 27rem;
-}
-
-.BillingPageFlex div {
- box-sizing: border-box;
- border: 1px solid $border1;
-}
-
.floatingMenuBG {
height: 100%;
width: 100%;
@@ -100,8 +88,4 @@ body {
padding: 0.5rem;
}
- .BillingPageFlex {
- flex-direction: column;
- height: 35rem;
- }
}
--
cgit v1.2.3