iticket-seatingplan-dev 1.7.0 → 1.7.2

package/dist/components/styles/index.css

@@ -37,10 +37,11 @@ button {
 }
 
 .legendBox {
-  background: rgba(0, 0, 0, 0.1);
+  background: rgba(255, 255, 255, 0.8);
   padding: 0.5rem 0.8rem;
   border-radius: 3px;
   text-align: left;
+  backdrop-filter: blur(2px);
 }
 
 .legend-header {
@@ -992,13 +993,20 @@ svg.leaflet-image-layer.leaflet-interactive path {
   content: "";
 }
 
-@media screen and (max-width: 1024px) {
+@media screen and (max-width: 1023px) {
   .seatname-tooltip {
     display: none;
     pointer-events: none;
   }
 }
 
+@media screen and (min-width: 1024px) {
+  .mobile-tooltip {
+    display: none;
+    pointer-events: none;
+  }
+}
+
 /* Directions */
 
 .leaflet-tooltip-bottom {
@@ -1098,6 +1106,471 @@ svg.leaflet-image-layer.leaflet-interactive path {
   }
 }
 
+.seatingplan-dialog-backdrop {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: 1001;
+  animation: fade-in 400ms;
+}
+
+.seatingplan-dialog-content {
+  padding: 1rem;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.seatingplan-dialog {
+  position: absolute;
+  z-index: 1002;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation: fade-in 400ms;
+  background-color: #fff;
+  /* font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; */
+  font-family: inherit;
+  color: #333;
+  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
+  border-radius: 12px;
+  min-width: 20rem;
+  max-width: 30rem;
+  max-height: 95%;
+  display: flex;
+  flex-direction: column;
+}
+
+@media screen and (max-width: 600px) {
+  .seatingplan-dialog {
+    width: 100%;
+    min-width: unset;
+  }
+}
+
+.seatingplan-dialog.remove-multiple-seats-popup {
+  min-width: unset;
+  max-width: 28rem;
+}
+
+.seatingplan-dialog .popup-header {
+  margin-top: 0;
+  padding: 1rem;
+  border-radius: 12px 12px 0px 0px;
+  flex-direction: column;
+  text-align: left;
+  gap: 0.5rem;
+}
+
+.seatingplan-dialog .popup-header .close-button {
+  margin: -2px -2px 0px 0px;
+  align-self: flex-end;
+}
+
+.seatingplan-dialog h3,
+.seatingplan-dialog h4 {
+  font-weight: bold;
+  margin: 0;
+}
+
+.seatingplan-dialog .quantity-heading {
+  font-weight: normal;
+  text-align: left;
+  font-size: 0.875rem;
+  margin-bottom: 8px;
+}
+
+.seatingplan-dialog .seat-qty-select {
+  display: flex;
+  flex-direction: column;
+}
+
+.seatingplan-dialog p {
+  margin: 0;
+  max-width: 30rem;
+}
+
+.seatingplan-dialog .seat-names {
+  font-size: 0.75rem;
+  display: flex;
+  gap: 0.375rem;
+  flex-wrap: wrap;
+  font-weight: 500;
+}
+
+.seat-name {
+  display: block;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  background: #f3f4f6;
+  font-weight: 500;
+  line-height: normal;
+}
+
+.seatingplan-dialog .seat-list {
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.seatingplan-dialog .price-section-list {
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.seatingplan-dialog .seat-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+}
+
+.seatingplan-dialog .single-seat-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.25rem;
+  padding: 0.75rem;
+}
+
+.seatingplan-dialog .seat-group-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  font-size: 0.875rem;
+}
+
+.seatingplan-dialog .ps-name {
+  color: #075985;
+  background-color: #e0f2fe;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+}
+
+.seatingplan-dialog .no-of-seats {
+  color: #4b5563;
+}
+
+.seatingplan-dialog .single-seat-select-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.seatingplan-dialog .single-seat-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  font-size: 0.75rem;
+}
+
+.seatingplan-dialog select {
+  flex: 1;
+  padding: 0.3rem 0.2rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.25rem;
+}
+
+.seatingplan-dialog .buttons {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-top: 1.2rem;
+}
+
+.seatingplan-dialog .buttons.buttons-single {
+  justify-content: center;
+}
+
+.seatingplan-dialog .buttons button {
+  display: block;
+  background: transparent;
+  min-width: 12rem;
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+  margin-bottom: 0.2rem;
+  cursor: pointer;
+  margin-bottom: 0;
+  transition: all 0.2s ease-in-out;
+}
+
+.seatingplan-dialog .buttons.buttons-single button {
+  width: 100%;
+}
+
+.seatingplan-dialog .buttons button.add-cart {
+  background: var(--accent);
+  color: white;
+  font-weight: bold;
+  border: none;
+}
+
+.seatingplan-dialog .buttons button.add-cart:hover:not(:disabled) {
+  background: var(--accent-light);
+  color: var(--accent-dark);
+}
+
+.seatingplan-dialog .buttons button.add-cart:disabled {
+  cursor: default;
+  color: #9ca3af;
+  background: #f3f4f6;
+}
+
+@media screen and (max-width: 600px) {
+  .seatingplan-dialog .buttons button {
+    min-width: 8rem;
+  }
+}
+
+.seatingplan-dialog .buttons button:disabled {
+  cursor: default;
+  color: #9ca3af;
+  border-color: #9ca3af;
+}
+
+.seatingplan-dialog .buttons button:hover:not(:disabled) {
+  background: #ecf0f1;
+}
+
+.seatingplan-dialog .no-prices-available {
+  font-size: 0.8rem;
+  color: red;
+}
+
+.seatingplan-dialog button.cancel {
+  background: #f3f4f6;
+  border: none;
+  font-weight: bold;
+}
+
+.seatingplan-dialog .bulk-price-select {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.seatingplan-dialog .price-select-wrapper p {
+  font-size: 0.875rem;
+}
+
+.seatingplan-dialog .single-seat-select {
+  display: flex;
+  gap: 0.5rem;
+  flex-direction: column;
+}
+
+.seatingplan-dialog .flexi-button {
+  width: max-content;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  border-radius: 0.25rem;
+  padding: 0px;
+  border: none;
+  text-decoration: underline;
+  background: transparent;
+  cursor: pointer;
+  animation: fade-in 200ms;
+  font-weight: 600;
+  transition: 0.2s;
+}
+
+.priceage-option .flexi-button,
+.seat-list .flexi-button {
+  color: var(--flexi-accent);
+}
+
+.priceage-option {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.875rem;
+  background: var(--accent-light);
+  padding: 0.5rem;
+  border-radius: 0.375rem;
+  color: var(--accent-dark);
+}
+
+.priceage-option.sold-out {
+  color: #6b7280;
+  background: #f3f4f6;
+}
+
+.priceage-option .pa-name {
+  font-weight: bold;
+}
+
+.priceage-option .pa-price {
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+}
+
+.priceage-option input[type="text"] {
+  width: 2.5rem;
+  padding: 0.375rem 0.5rem;
+  border-radius: 0.375rem;
+  outline-color: transparent;
+  border: 1px solid #d1d5db;
+}
+
+.priceage-option input[type="text"]:focus {
+  outline-color: var(--accent);
+}
+
+.priceage-option input[type="text"]:disabled {
+  background: #f3f4f6;
+  color: #6b7280;
+}
+
+.priceage-option .price-qty-select {
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+}
+
+.priceage-option .price-qty-button {
+  background: #fff;
+  color: var(--accent-dark);
+  border: none;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+
+.priceage-option .price-qty-button:hover:not(:disabled) {
+  background: var(--accent);
+  color: var(--accent-light);
+}
+
+.priceage-option .price-qty-button:disabled {
+  cursor: default;
+  color: #d1d5db;
+}
+
+.selected-qty {
+  color: #ef4444;
+  font-weight: 500;
+  transition: color 0.2s ease-in-out;
+}
+
+.selected-qty.complete {
+  color: #10b981;
+}
+
+.hover-popup {
+  min-width: 150px;
+  max-width: 250px;
+  position: absolute;
+  pointer-events: none;
+  z-index: 1000;
+  background: #fff;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+  transition-property: opacity, left, top;
+  transition-duration: 100ms, 50ms, 50ms;
+  transition-timing-function: ease-in-out, ease-in-out, ease-in-out;
+}
+
+.hover-popup p {
+  margin: 0;
+  font-size: 0.75rem;
+}
+
+.hover-popup-header {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  padding: 0.5rem;
+}
+
+.hover-popup .hover-popup-header-title {
+  font-weight: bold;
+  font-size: 0.5rem;
+  margin-bottom: 0.25rem;
+  color: #6b7280;
+}
+
+.hover-popup-row,
+.hover-popup-column {
+  text-align: center;
+  font-weight: bold;
+  display: flex;
+  flex-direction: column;
+}
+
+/* .hover-popup-row {
+  border-right: 1px solid #d1d5db;
+} */
+
+.hover-popup-row .row-name {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 1.375rem;
+}
+
+.hover-popup-row .row-name p {
+  font-size: 0.875rem;
+}
+
+.hover-popup-column .seat-name {
+  padding: 2px 4px;
+  width: fit-content;
+  height: fit-content;
+  min-width: 0.75rem;
+}
+
+.hover-popup-seats {
+  display: flex;
+  gap: 0.25rem;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.hover-popup-price {
+  padding: 0.5rem;
+  font-size: 0.875rem;
+  background: var(--accent-light);
+  color: var(--accent-dark);
+  border-radius: 0 0 0.5rem 0.5rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.hover-popup-psname {
+  font-weight: 500;
+}
+
+.hover-popup-pricetext {
+  font-weight: 500;
+}
+
+.hover-popup-divider {
+  border-right: 1px solid var(--accent-dark);
+  height: 0.875rem;
+}
+
 /* Printing */
 
 @media print {

package/dist/components/styles/pos.css

@@ -1,209 +1,3 @@
-/* Popup to select prices */
-
-.pricing-popup-backdrop {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  background-color: rgba(0, 0, 0, 0.4);
-  z-index: 1001;
-  animation: fade-in 400ms;
-}
-
-.pricing-popup-content {
-  padding: 1rem;
-  flex: 1;
-  overflow-y: auto;
-}
-
-.pricing-popup {
-  position: absolute;
-  z-index: 1002;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  animation: fade-in 400ms;
-  background-color: #fff;
-  /* font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; */
-  font-family: inherit;
-  color: #333;
-  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
-  border-radius: 12px;
-  min-width: 20rem;
-  max-height: 95%;
-  display: flex;
-  flex-direction: column;
-}
-
-@media screen and (max-width: 600px) {
-  .pricing-popup {
-    width: 100%;
-    min-width: unset;
-  }
-}
-
-.pricing-popup.remove-multiple-seats-popup {
-  min-width: unset;
-  max-width: 28rem;
-}
-
-.pricing-popup .popup-header {
-  margin-top: 0;
-  padding: 1rem;
-  border-radius: 12px 12px 0px 0px;
-  flex-direction: column;
-  text-align: left;
-  gap: 0.5rem;
-}
-
-.pricing-popup .popup-header .close-button {
-  margin: -2px -2px 0px 0px;
-  align-self: flex-end;
-}
-
-.pricing-popup h3,
-.pricing-popup h4 {
-  font-weight: bold;
-  margin: 0;
-}
-
-.pricing-popup .quantity-heading {
-  font-weight: normal;
-  text-align: left;
-  font-size: 0.875rem;
-  margin-bottom: 8px;
-}
-
-.pricing-popup p {
-  margin: 0;
-  max-width: 30rem;
-}
-
-.pricing-popup .seat-names {
-  font-size: 0.9rem;
-}
-
-.pricing-popup .seat-list {
-  text-align: left;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.pricing-popup .seat-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.pricing-popup .seat-group-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  gap: 1rem;
-  font-size: 0.9rem;
-}
-
-.pricing-popup select {
-  flex: 1;
-  padding: 0.3rem 0.2rem;
-  border: 1px solid #ccc;
-  border-radius: 0.25rem;
-}
-
-.pricing-popup .buttons {
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  gap: 1rem;
-  margin-top: 1.2rem;
-}
-
-.pricing-popup .buttons.buttons-single {
-  justify-content: center;
-}
-
-.pricing-popup .buttons button {
-  display: block;
-  background: transparent;
-  min-width: 12rem;
-  border-radius: 0.25rem;
-  padding: 0.5rem;
-  border: 1px solid #333;
-  margin-bottom: 0.2rem;
-  cursor: pointer;
-  margin-bottom: 0;
-}
-
-.pricing-popup .buttons.buttons-single button {
-  width: 100%;
-}
-
-.pricing-popup .buttons button.add-cart {
-  background: var(--accent);
-  color: white;
-  font-weight: bold;
-  border: none;
-}
-
-.pricing-popup .buttons button.add-cart:hover:not(:disabled) {
-  background: var(--accent-light);
-  color: var(--accent-dark);
-}
-
-@media screen and (max-width: 600px) {
-  .pricing-popup .buttons button {
-    min-width: 8rem;
-  }
-}
-
-.pricing-popup .buttons button:disabled {
-  cursor: default;
-  color: #bdc3c7;
-  border-color: #bdc3c7;
-}
-
-.pricing-popup .buttons button:hover:not(:disabled) {
-  background: #ecf0f1;
-  transition: 0.2s;
-}
-
-.pricing-popup .no-prices-available {
-  font-size: 0.8rem;
-  color: red;
-}
-
-.pricing-popup button.cancel {
-  background: #dcdcdc;
-  border: none;
-}
-
-.pricing-popup .price-select {
-  display: flex;
-  gap: 8px;
-}
-
-.pricing-popup .flexi-button {
-  width: max-content;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  border-radius: 0.25rem;
-  padding: 0.5rem;
-  border: none;
-  text-decoration: underline;
-  background: transparent;
-  cursor: pointer;
-  animation: fade-in 200ms;
-  font-weight: 600;
-  transition: 0.2s;
-}
-
-.flexi-button:hover {
-  background: #ecf0f1;
-}
-
 /* Button controls */
 
 .leaflet-draw.leaflet-control {