removed require for css, outsourced css, created symbolic links, reworked and outsourced injects

2021-05-23 14:18:30 +02:00
parent d40672fe9f
commit dc5ccfe949
12 changed files with 590 additions and 152 deletions
--- a/client/src/css/styleChild.css
+++ b/client/src/css/styleChild.css
@@ -0,0 +1,291 @@
+div.seatCharts-cell {
+  height: 1vw;
+  display: table-cell;
+  width: 1vw;
+  margin: 0.1vw;
+  white-space: nowrap;
+  font-size: 0.6vw;
+  line-height: 1.1vw;
+  color: black;
+  font-weight: bold;
+}
+
+div.seatCharts-row {
+  height: 1.6vw;
+  display: table-row;
+}
+
+div.seatCharts-space {
+  background-color: transparent;
+}
+
+div.seatCharts-seat {
+  -webkit-border-radius: 0.2vw;
+  -moz-border-radius: 0.2vw;
+  border-radius: 0.2vw;
+}
+
+/* div.seatCharts-seat,
+div.seatCharts-seat.available {
+  border: 0.1rem solid #5c5c5c;
+} */
+
+div.seatCharts-seat.selected,
+div.seatCharts-seat.focused {
+  border: 0.1vw solid black;
+  /* filter: brightness(2); */
+}
+
+div.seatCharts-seat.selected {
+  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjAuMjg1IDJsLTExLjI4NSAxMS41NjctNS4yODYtNS4wMTEtMy43MTQgMy43MTYgOSA4LjcyOCAxNS0xNS4yODV6Ii8+PC9zdmc+);
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 100% 100%, auto;
+}
+
+select#dropdownSeatmap {
+  color: #5c5c5c;
+  font-weight: bold;
+}
+
+/* #loftloader-wrapper .loader-inner {
+  top: 50%;
+} */
+
+ul.seatCharts-legendList {
+  list-style: none;
+  margin: 0;
+}
+
+li.seatCharts-legendItem {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  line-height: 1.6rem;
+}
+
+#JSCLegend div.seatCharts-cell {
+  height: 1rem;
+  width: 1rem;
+  margin: 0 0.5rem 0 0;
+}
+
+span.seatCharts-legendDescription {
+  margin: 0;
+}
+
+div.seatCharts-seat.unavailable {
+  background-color: #ccc !important;
+  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M100 0 L0 100 ' stroke='black' stroke-width='4'/><path d='M0 0 L100 100 ' stroke='black' stroke-width='4'/></svg>");
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 100% 100%, auto;
+  border: none;
+}
+
+#JSCLegendInner select {
+  color: #5c5c5c;
+  font-weight: bold;
+}
+
+#JSCLegendInner select option {
+  color: white;
+}
+
+.jBox-Notice .jBox-content {
+  font-size: 1rem;
+  padding: .1rem 2rem;
+}
+
+select#dropdownLegend, select#dropdownSeatmap, .dropdownBuyerTypes {
+  width: 14rem;
+  border-radius: 4px;
+  border-color: #ccc;
+  height: 3rem;
+}
+
+#modalCart .uabb-button {
+  width: 15rem;
+}
+
+.cartItemColoredSquare {
+  width: 1rem;
+  height: 1rem;
+  margin: .4rem 1rem 0 0;
+  border: 1px solid black;
+  float: left;
+}
+
+.cartItemCategory {
+  font-weight: bold;
+}
+
+.cartItem {
+  padding: 1rem;
+  border-radius: 5px;
+  margin: 0 0 1rem 0;
+  width: 20rem;
+  border: 1px solid #ccc;
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+}
+
+.cartItemCategory, .cartItemSeat {
+  color: black;
+}
+
+#cartItemHTML {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#modalCartRow {
+  /* max-height: 40vw; */
+  overflow: auto;
+}
+
+/* .cartItemCross {
+  text-align: right;
+  line-height: 0;
+  cursor: pointer;
+} */
+
+#modalCart-overlay .uabb-overlay {
+  background: white;
+}
+
+
+#modalCart-overlay .uabb-close-icon {
+  margin-top: 2.2rem;
+  display: none;
+}
+
+.dropdownBuyerTypes {
+  padding: .2rem;
+  margin-top: .4rem;
+}
+
+#modalCart .uabb-button:hover {
+  border: 1px solid #5c5c5c;
+}
+
+.trimText {
+  line-height: normal;
+  font-size: 1vw;
+}
+
+span.trimChar {
+  font-weight: normal;
+  font-size: 1vw;
+}
+
+/**
+ * ==============================================
+ * Dot Pulse
+ * ==============================================
+ */
+ .dot-pulse {
+  position: relative;
+  left: -9999px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #5c5c5c;
+  color: #5c5c5c;
+  box-shadow: 9999px 0 0 -5px #5c5c5c;
+  animation: dotPulse 1.5s infinite linear;
+  animation-delay: .25s;
+}
+
+.dot-pulse::before, .dot-pulse::after {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #5c5c5c;
+  color: #5c5c5c;
+}
+
+.dot-pulse::before {
+  box-shadow: 9984px 0 0 -5px #5c5c5c;
+  animation: dotPulseBefore 1.5s infinite linear;
+  animation-delay: 0s;
+}
+
+.dot-pulse::after {
+  box-shadow: 10014px 0 0 -5px #5c5c5c;
+  animation: dotPulseAfter 1.5s infinite linear;
+  animation-delay: .5s;
+}
+
+@keyframes dotPulseBefore {
+  0% {
+    box-shadow: 9984px 0 0 -5px #5c5c5c;
+  }
+  30% {
+    box-shadow: 9984px 0 0 2px #5c5c5c;
+  }
+  60%,
+  100% {
+    box-shadow: 9984px 0 0 -5px #5c5c5c;
+  }
+}
+
+@keyframes dotPulse {
+  0% {
+    box-shadow: 9999px 0 0 -5px #5c5c5c;
+  }
+  30% {
+    box-shadow: 9999px 0 0 2px #5c5c5c;
+  }
+  60%,
+  100% {
+    box-shadow: 9999px 0 0 -5px #5c5c5c;
+  }
+}
+
+@keyframes dotPulseAfter {
+  0% {
+    box-shadow: 10014px 0 0 -5px #5c5c5c;
+  }
+  30% {
+    box-shadow: 10014px 0 0 2px #5c5c5c;
+  }
+  60%,
+  100% {
+    box-shadow: 10014px 0 0 -5px #5c5c5c;
+  }
+}
+
+#btnCloseModal {
+  cursor: pointer;
+}
+
+#htmlSeatmapInner {
+  /* background: grey; */
+  height: 66vh;
+}
+
+#htmlSeatmapInner .fl-module-content, #htmlSeatmapInner .fl-html {
+  height: 100%;
+}
+
+#containerSeatmapInner {
+  border: 1px solid black;
+  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
+}
+
+#modalCart-overlay {
+  overflow-y: scroll;
+}
+
+#bottomHTML {
+  text-align: center;
+}
+
+#bottomHTML h6, #bottomHTML a {
+  color: #999;
+}
--- a/client/src/css/styleParent.css
+++ b/client/src/css/styleParent.css
@@ -0,0 +1,93 @@
+ #containerBookingBtn {
+    display: none;
+    margin: 0;
+}
+
+#get_flash {
+    display: none;
+}
+
+.ui-dialog-titlebar {
+    margin-left: 1rem;
+    margin-right: 1rem;
+}
+
+.ui-dialog-title {
+    text-align: center;
+}
+
+.ui-widget-overlay {
+    background: white;
+    opacity: 1;
+    width: 100vw;
+    height: 100vh;
+}
+
+#openSeatmap img {
+    width: 64px;
+}
+
+#openSeatmap {
+    padding: 1rem;
+    font-weight: bold;
+    color: #ffb201;
+    font-size: 1rem;
+    cursor: pointer;
+}
+
+#openSeatmap span {
+    font-size: .8rem;
+    /* color: #5c5c5c; */
+}
+
+#foobarParent {
+    display: none;
+}
+
+div#dialogSeatmap {
+    padding-top: 0;
+}
+
+.ui-widget-header {
+    background: #fff;
+    border: 1px solid #c6c6c6;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.ui-dialog {
+    background: white;
+    left: 0 !important;
+    padding: 0;
+    top: 0 !important;
+    right: 0 !important;
+}
+
+.ui-dialog .ui-dialog-content {
+    padding: 0;
+}
+
+.ui-dialog-titlebar {
+    margin-left: 0;
+    margin-right: 0;
+    padding: 0 !important;
+    display: none;
+}
+
+#iframeSeatmap {
+    height: 100vh;
+    background: white;
+    width: 100%;
+}
+
+.ui-corner-all {
+    border-radius: 0;
+}
+
+.ui-dialog-title {
+    display: none;
+}
+
+.ui-widget {
+    border: none !important;
+}
--- a/client/src/inject.ts
+++ b/client/src/inject.ts
@@ -7,6 +7,7 @@ import * as Parser from './modules/parser';
 import * as UI from "./modules/ui";
 import * as BookingBtn from "./modules/bookingButton";
 import * as Parent from "./modules/parent";
+// require("../src/css/styleParent.css");

 let inputsWithValue: I.InputsWithValue;

--- a/client/src/modules/child.ts
+++ b/client/src/modules/child.ts
@@ -103,4 +103,5 @@ export function injectResources(): void {
    Utils.inject(resources.CSSJSC, "css", "body");
    Utils.inject(resources.CSSChild, "css", "body");
    Utils.inject(resources.CSSjQueryUI, "css", "body");
+    Utils.inject(resources.CSSjBox, "css", "body");
 }
--- a/client/src/modules/config.ts
+++ b/client/src/modules/config.ts
@@ -13,7 +13,8 @@ export const config: I.Config = {
            CSSChild: "https://tickets.zinomedia.de/dist/styleChild.css",
            CSSJSC: "https://tickets.zinomedia.de/libs/jQuery-Seat-Charts/jquery.seat-charts.css",
            CSSParent: "https://tickets.zinomedia.de/dist/styleParent.css",
-            CSSjQueryUI: "https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
+            CSSjQueryUI: "https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css",
+            CSSjBox: "https://tickets.zinomedia.de/dist/jBox.all.min.css"
        },
        staging: {
            seatmap: "https://staging.tickets.zinomedia.de",
@@ -21,7 +22,8 @@ export const config: I.Config = {
            CSSChild: "https://staging.tickets.zinomedia.de/dist/styleChild.css",
            CSSJSC: "https://staging.tickets.zinomedia.de/libs/jQuery-Seat-Charts/jquery.seat-charts.css",
            CSSParent: "https://staging.tickets.zinomedia.de/dist/styleParent.css",
-            CSSjQueryUI: "https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
+            CSSjQueryUI: "https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css",
+            CSSjBox: "https://staging.tickets.zinomedia.de/dist/jBox.all.min.css"
        }
    },
    state: {
--- a/client/src/seatmap.ts
+++ b/client/src/seatmap.ts
@@ -4,11 +4,12 @@ import * as I from "./types/types";
 import { config } from "./modules/config";
 import Utils from "./modules/utils";
 import * as Events from "./modules/events";
-require("jbox/dist/jBox.all.css");
 import * as Cart from "./modules/cart";
 import * as BookingBtn from "./modules/bookingButton";
 import * as Child from './modules/child';
 import * as UI from "./modules/ui";
+// require("jbox/dist/jBox.all.css");
+// require("../src/css/styleChild.css");

 window.addEventListener('load', () => {
    // Inject JSC (jQuery Seat Charts)
--- a/client/src/types/types.d.ts
+++ b/client/src/types/types.d.ts
@@ -103,6 +103,7 @@ export interface ResourcesURL {
    CSSJSC: string;
    CSSParent: string;
    CSSjQueryUI: string;
+    CSSjBox: string;
 }

 export interface Message {