wip #6867 @2

diff --git a/js/libs/fluidbook/cart/fluidbook.cart.bastide-resah-guest.js b/js/libs/fluidbook/cart/fluidbook.cart.bastide-resah-guest.js
new file mode 100644 (file)
index 0000000..b70f859
--- /dev/null
+++ b/js/libs/fluidbook/cart/fluidbook.cart.bastide-resah-guest.js
@@ -0,0 +1,63 @@
+function FluidbookCartBastideResahGuest(cart) {
+    this.cart = cart;
+    this.fluidbook = this.cart.fluidbook;
+    this.init();
+}
+
+FluidbookCartBastideResahGuest.prototype = {
+    init: function () {
+        let $this = this;
+
+        $(document).on(this.fluidbook.input.clickEvent, '[data-cart-ref]', function () {
+            $this.addToCart($(this).data('cart-ref'));
+            return false;
+        });
+    },
+
+    addToCart: function (reference) {
+        window.location.hash = '#/cart';
+        return false;
+    },
+
+    updateCart: function () {
+        if ($('#Bastide_cart').length > 0) {
+            $('#Bastide_cart .content').html(this.getCartContent());
+            this.fluidbook.resize.resize();
+        }
+    },
+
+    updateIcon: function () {
+        $(this.fluidbook).trigger('fluidbook.cart.updateIcon', {number: this.getItemCount()});
+    },
+
+    openModal: function (title, content, callback) {
+        let view = `<div id="Bastide_cart">
+                        ${this.fluidbook.menu.getCaption(title)}
+                        <div class="content">
+                            ${content}
+                        </div>
+                    </div>`;
+        this.fluidbook.menu.viewWrap(view, 'cart');
+        callback();
+    },
+
+    openMenu: function (p1, p2, callback) {
+        this.fluidbook.menu.quickCloseView();
+        return this.openCart(p2, callback);
+    },
+
+    openCart: function (p2, callback) {
+        this.openModal('Connexion', this.getCartContent(), function () {
+            callback();
+        });
+    },
+
+    getCartContent: function () {
+        return '<div><form action=""><p>Pour afficher les tarifs, ajouter des produits à votre sélection, et nous envoyer une demande de devis, veuillez vous identifier :</p></form></div>';
+    },
+
+    getMenuWidth: function () {
+        return window.location.hash === '#/cart/validate' ? 990 : 1190; // Validate modal is narrower than main cart
+    },
+
+};

diff --git a/js/libs/fluidbook/fluidbook.cart.js b/js/libs/fluidbook/fluidbook.cart.js
index bd6514d77d9213ec0b589514fe2ba91bd9ef12b4..a70c0ce91e1b98ad90596977ee9ea128ab8bea29 100644 (file)
--- a/js/libs/fluidbook/fluidbook.cart.js
+++ b/js/libs/fluidbook/fluidbook.cart.js
@@ -219,6 +219,8 @@ FluidbookCart.prototype = {
                 return new FluidbookCartBastide(this);
             case 'BastideResah':
                 return new FluidbookCartBastideResah(this);
+            case 'BastideResahGuest':
+                return new FluidbookCartBastideResahGuest(this);
             default:
                 return null;
         }

diff --git a/style/cart/bastide-resah.less b/style/cart/bastide-resah.less
new file mode 100644 (file)
index 0000000..2aba15b
--- /dev/null
+++ b/style/cart/bastide-resah.less
@@ -0,0 +1,401 @@
+@breakpoint_table: ~"(max-width: 700px)";
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap');
+
+// Nav override
+.icon-cart {
+  // Display the tooltip label before the cart icon
+  &:before {
+    content: attr(data-tooltip);
+    display: inline-block;
+    text-transform: uppercase;
+    font-size: 12px;
+    font-weight: bold;
+    font-family: 'Roboto Condensed', sans-serif;
+    letter-spacing: 1px;
+    margin-left: 17px;
+    margin-right: -14px;
+    vertical-align: text-bottom;
+  }
+
+  span.number {
+    background-color: #E41C38;
+    top: 1em;
+    right: 1em;
+  }
+}
+
+// Cart modals
+#Bastide_cart {
+  background-color: #fff;
+  color: #000;
+  height: 100%;
+  min-height: 35vh;
+  min-width: 320px;
+  font-size: 18px;
+
+  @media (max-width: 1060px) {
+    font-size: 15px;
+  }
+  @media @breakpoint_table {
+    font-size: 1rem; // Once we're in the stacked view, the font can be a normal size again
+  }
+  @media (max-width: 450px) {
+    font-size: 14px;
+  }
+
+  .caption {
+    padding: 30px 20px;
+    height: auto;
+  }
+
+  #mview-dialog-title {
+    font-size: 16px;
+    font-weight: bold;
+    text-transform: uppercase;
+  }
+
+  > .content .inner-content {
+    width: 94%;
+    margin: 0 auto;
+    position: relative;
+
+    @media @breakpoint_table {
+      width: 90%;
+    }
+  }
+
+  // Main table
+  table.cart-items {
+    width: 100%;
+    max-width: none;
+    margin: 0;
+    border-collapse: collapse;
+    font-size: 0.75em;
+
+    thead {
+      background-color: @menu-background;
+
+      @media @breakpoint_table {
+        display: none;
+      }
+    }
+
+    th {
+      color: #fff;
+      font-weight: bold;
+      text-align: left;
+    }
+
+    th, td {
+      padding: 1.5em 1.75em;
+
+      @media (max-width: 1060px) {
+        padding: 1em 0.5em;
+      }
+    }
+
+    tbody tr {
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.05);
+      }
+
+      @media @breakpoint_table {
+        display: block;
+        padding-top: 1em;
+        border-top: 1px solid;
+      }
+    }
+
+    // Collapse table cells and display header labels before items
+    tbody td {
+      white-space: normal;
+
+      @media @breakpoint_table {
+        display: flex;
+        align-items: center;
+        text-align: left;
+        padding-top: 0;
+
+        &:before {
+          content: attr(data-label) ' : ';
+          font-weight: bold;
+          flex: 0 0 9.5em; // Set width of "label" column in stacked mode
+          text-align: right;
+          padding-right: 10px;
+          line-height: 1;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+
+  // Modal close button
+  .caption .back {
+    background-color: transparent;
+  }
+
+  [data-name="QUANTITY"] {
+    user-select: none; // Stop text being selected when clicking quickly on -/+ buttons
+  }
+
+  .quantity-controls {
+    display: flex;
+    align-items: center;
+  }
+
+  .quantity-button {
+    -webkit-appearance: none;
+    appearance: none;
+    border: none;
+    background: transparent;
+    padding: 0.25em 0.5em;
+    cursor: pointer;
+    height: 16px; // For better vertical alignment with input
+    box-sizing: content-box;
+
+    svg {
+      height: 100%;
+      width: auto;
+    }
+  }
+
+  // Cart item delete buttons
+  [data-name="DELETE"] {
+
+    a {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background: #E41C38;
+      width: 2em;
+      height: 2em;
+    }
+
+    svg {
+      width: 0.9em;
+      fill: #fff;
+    }
+
+    @media @breakpoint_table {
+      &:before {
+        content: '' !important; // No label in stacked mode for this item
+      }
+
+      a {
+        width: auto;
+        color: #fff;
+        padding: 0 1em;
+
+        &:before {
+          content: attr(title);
+          text-transform: uppercase;
+          margin-right: 1em;
+        }
+      }
+
+    }
+
+  }
+
+  input[type=email], input[type=number], input[type=text], select, textarea {
+    -webkit-appearance: none;
+    appearance: none;
+    border: 2px solid;
+    border-radius: 0;
+    padding: 0.25em 0.5em;
+    font-size: 1em;
+    width: 100%;
+  }
+  input, select, textarea {
+    background-color: #fff;
+    font-family: inherit;
+    outline: none;
+  }
+
+  select {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.4 8.1' xml:space='preserve'%3E%3Cpath d='m.7.7 6 6 6-6' fill='none' stroke='%231c1c1c' stroke-width='2'/%3E%3C/svg%3E");
+    background-position: calc(100% - 0.6em) 50%;
+    background-repeat: no-repeat;
+    background-size: 0.85em auto;
+    padding-right: 1.8em;
+
+    &.alert, &:invalid { // Warning for unset colour selection
+      color: red;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.4 8.1' xml:space='preserve'%3E%3Cpath d='m.7.7 6 6 6-6' fill='none' stroke='red' stroke-width='2'/%3E%3C/svg%3E");
+    }
+
+    @media @breakpoint_table {
+      width: max-content; // When switching to stacked view, select boxes should only be as wide as their content
+    }
+  }
+
+  // Quantity inputs - hide browser up/down arrows
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  input[type=number] {
+    -moz-appearance: textfield;
+  }
+
+  input[data-item-quantity] {
+    width: 2.5em;
+    text-align: center;
+    padding: 0.25em 0.25em;
+  }
+
+  // Cart footer
+  tfoot.cart-footer {
+
+    // Extra spacing between table footer and table body
+    // Margins don't work in the middle of a table and we need to ensure the columns structure remains consistent
+    &:before {
+      content: '';
+      display: table-row;
+      height: 1em;
+    }
+
+    // Border + extra padding on the first row of cells
+    // Once again, this is more convoluted because we can't use margins in the table
+    tr:first-of-type td {
+      padding-top: 1.5em;
+      border-top: 2px solid;
+    }
+
+    td {
+      padding-top: 0.5em;
+      padding-bottom: 0.5em;
+      text-align: right;
+    }
+
+    // When cart popup goes into "full screen" / cover mode
+    [data-menu="cart"].fs & {
+      top: unset;
+      position: unset; // This needs to be unset so .exclusivity-notice remains relative to .content-inner
+    }
+
+    // Responsive overrides for small screens
+    @media @breakpoint_table {
+      tr {
+        display: flex;
+      }
+
+      td {
+        // Middle columns that contain labels and totals
+        // The fixed size makes them centred, while other cells flex to take space on left and right
+        // Their size is set in em units so that it works regardless of the actual font size
+        flex: 0 0 7.5em; // The flex-basis might need to be adjusted if labels or values get any wider
+
+        &:first-child, &:last-child {
+          flex: 1;
+        }
+      }
+    }
+
+  }
+
+  .fonctions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 1em;
+    padding: 2em 0;
+
+    // Reorganise footer for better display and wrapping
+    @media @breakpoint_table {
+      flex-wrap: wrap;
+      flex-direction: row-reverse;
+      justify-content: flex-start;
+    }
+
+    a {
+      background-color: @menu-background;
+      color: #fff;
+      white-space: nowrap;
+      margin: 0;
+
+      @media @breakpoint_table {
+        flex: 1; // Allows items to grow to maximise width
+      }
+    }
+  }
+
+  .validate-cart, .send-cart {
+    min-width: 30%;
+    font-weight: bold;
+
+    @media @breakpoint_table {
+      min-width: unset; // Without resetting this, the flex items weren't wrapping
+    }
+  }
+
+  //==== User details modal
+
+  #Bastide_user_details {
+    width: 90% !important;
+
+    .details-form {
+      font-size: 0.75em;
+    }
+
+    form {
+      max-width: 680px;
+      margin-left: auto;
+
+      display: grid;
+      /* 1st column should be max-content but it can shrink if needed... */
+      /* 2nd column should take remaining width but not get smaller than 15em */
+      grid-template-columns: minmax(min-content, max-content) minmax(15em, 1fr);
+      text-align: right; /* Right align for labels */
+      grid-row-gap: 0.5em;
+      grid-column-gap: 1em;
+
+      @media (max-width: 550px) {
+        grid-template-columns: 1fr;
+        text-align: left;
+      }
+
+      label {
+        text-transform: uppercase;
+        margin-top: 0.4em;
+        margin-bottom: -0.2em; // Only really applies when form is 1 column
+      }
+
+    }
+  }
+
+  .required-fields-notice {
+    margin-top: 1em;
+    text-align: right;
+
+    @media @breakpoint_table {
+      position: initial;
+      transform: none;
+      flex-basis: 100%;
+    }
+  }
+
+  .back-to-cart, .close-cart {
+    background-color: transparent !important;
+    border: 2px solid currentColor;
+    color: @menu-background !important;
+    display: inline-flex;
+    font-weight: bold;
+    align-items: center;
+    margin: 0;
+    justify-content: center;
+
+    @media @breakpoint_table {
+      order: 3; // Switch position (since we're in flex-direction: row-reverse)
+    }
+  }
+
+  .server-response {
+    max-width: 50ch;
+    margin: 2em auto 0;
+  }
+
+}