WIP #2738 @8

diff --git a/public/images/icon-close-thin.svg b/public/images/icon-close-thin.svg
new file mode 100644 (file)
index 0000000..4844901
--- /dev/null
+++ b/public/images/icon-close-thin.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26"><path d="M26 1.4L24.6 0 13 11.6 1.4 0 0 1.4 11.6 13 0 24.6 1.4 26 13 14.4 24.6 26l1.4-1.4L14.4 13z"/></svg>

diff --git a/public/images/icon-close.svg b/public/images/icon-close.svg
index a120653060a35787967d8526d5940b2ec727c591..ad0d1deffe52a3658c61ff96dbf721c262042baf 100644 (file)
--- a/public/images/icon-close.svg
+++ b/public/images/icon-close.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 10.828 10.828"><g fill="none" stroke="#6b7287" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"><path d="M9.413 1.414l-8 8"/><path d="M1.413 1.414l8 8"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11"><path fill="#6B7287" d="M11 1.4L9.6 0 5.5 4.1 1.4 0 0 1.4l4.1 4.1L0 9.6 1.4 11l4.1-4.1L9.6 11 11 9.6 6.9 5.5z"/></svg>

diff --git a/public/images/pmi-logo.svg b/public/images/pmi-logo.svg
index e36e6db26e047ab0ed213c5b3ece4485e0f26b66..8e375cfcc2df6c61b86927fca700c28004b213f8 100644 (file)
--- a/public/images/pmi-logo.svg
+++ b/public/images/pmi-logo.svg
@@ -1,27 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="144" height="70.459" viewBox="0 0 144 70.459">
-  <g id="Group_70" data-name="Group 70" transform="translate(-110 -59)">
-    <g id="Group_69" data-name="Group 69" transform="translate(110 59)">
-      <path id="Path_43" data-name="Path 43" d="M452.742,446.057,436.168,471.84l-16.574-25.782h-7.81V495.5h10.1V468.31l14.281,22.214,3.679-5.724,10.6-16.491V495.5h10.1V446.057Z" transform="translate(-365.365 -446.057)" fill="#fff"/>
-      <rect id="Rectangle_396" data-name="Rectangle 396" width="38.709" height="10.104" transform="translate(105.291 39.341)" fill="#0eaada"/>
-      <path id="Path_44" data-name="Path 44" d="M308.8,446.057H288V495.5h10.1V484.8h10.7a19.372,19.372,0,1,0,0-38.744Zm0,28.641H298.1V456.161h10.7a9.268,9.268,0,1,1,0,18.537Z" transform="translate(-288 -446.057)" fill="#fff"/>
-      <g id="Group_68" data-name="Group 68" transform="translate(0 57.023)">
-        <rect id="Rectangle_397" data-name="Rectangle 397" width="2.852" height="13.284" fill="#fff"/>
-        <path id="Path_45" data-name="Path 45" d="M338.673,616.775a2.478,2.478,0,0,0,1.073-2.109,2.45,2.45,0,0,0-.646-1.775,4.23,4.23,0,0,0-2.1-1l-1.594-.357a2.064,2.064,0,0,1-.851-.336.679.679,0,0,1-.247-.544.8.8,0,0,1,.411-.708,2.115,2.115,0,0,1,1.108-.249,4.561,4.561,0,0,1,1.485.265,6.207,6.207,0,0,1,1.462.748l.759-1.826a6.03,6.03,0,0,0-1.71-.85,6.535,6.535,0,0,0-1.977-.308,5.444,5.444,0,0,0-2.106.382,3.329,3.329,0,0,0-1.419,1.066,2.549,2.549,0,0,0-.509,1.554,2.349,2.349,0,0,0,.637,1.719,3.955,3.955,0,0,0,2,.947l1.558.356a2.792,2.792,0,0,1,1.008.363.7.7,0,0,1,.3.593.754.754,0,0,1-.413.689,2.342,2.342,0,0,1-1.144.23,6.233,6.233,0,0,1-1.887-.293,5.874,5.874,0,0,1-1.641-.811l-.723,1.9a6.991,6.991,0,0,0,4.214,1.139A4.984,4.984,0,0,0,338.673,616.775Z" transform="translate(-315.186 -604.121)" fill="#fff"/>
-        <path id="Path_46" data-name="Path 46" d="M357.914,611.75a3.484,3.484,0,0,0,2.665.983,4.523,4.523,0,0,0,1.595-.251V610.36a3.871,3.871,0,0,1-.9.121,1.594,1.594,0,0,1-1.094-.375,1.508,1.508,0,0,1-.425-1.182v-3.733h2.42v-2.046h-2.42v-3.138L357,600.9v2.243h-1.8v2.046H357v3.79A3.92,3.92,0,0,0,357.914,611.75Z" transform="translate(-329.996 -599.298)" fill="#fff"/>
-        <path id="Path_47" data-name="Path 47" d="M401.73,617.963a3.4,3.4,0,0,0,1.633-.39,3.028,3.028,0,0,0,1.168-1.13l.069-.115v1.485h2.683v-9.438h-2.777v5.235a2.3,2.3,0,0,1-.553,1.6,1.878,1.878,0,0,1-1.453.613c-1.008,0-1.52-.593-1.52-1.764v-5.685h-2.758V614a4.4,4.4,0,0,0,.872,2.977A3.355,3.355,0,0,0,401.73,617.963Z" transform="translate(-356.889 -604.528)" fill="#fff"/>
-        <path id="Path_48" data-name="Path 48" d="M481.951,612.509a5.076,5.076,0,0,0-1.154-3.493,4.017,4.017,0,0,0-3.143-1.292,4.669,4.669,0,0,0-2.4.624,4.291,4.291,0,0,0-1.646,1.749,5.5,5.5,0,0,0-.587,2.563,4.769,4.769,0,0,0,1.359,3.585,5.186,5.186,0,0,0,3.745,1.313,6.826,6.826,0,0,0,2.006-.308,4.994,4.994,0,0,0,1.645-.83l-.722-1.842a4.731,4.731,0,0,1-1.322.689,4.673,4.673,0,0,1-1.476.246,2.563,2.563,0,0,1-1.865-.621,2.914,2.914,0,0,1-.705-1.966l0-.04h6.268Zm-6.217-.957.007-.043a2.4,2.4,0,0,1,.658-1.391,1.87,1.87,0,0,1,1.33-.479c1.08,0,1.7.629,1.857,1.871l.005.042Z" transform="translate(-403.637 -604.121)" fill="#fff"/>
-        <path id="Path_49" data-name="Path 49" d="M532.326,611.75a3.482,3.482,0,0,0,2.665.983,4.521,4.521,0,0,0,1.595-.251V610.36a3.87,3.87,0,0,1-.9.121,1.594,1.594,0,0,1-1.095-.375,1.508,1.508,0,0,1-.425-1.182v-3.733h2.42v-2.046h-2.42v-3.138l-2.758.895v2.243h-1.8v2.046h1.8v3.79A3.92,3.92,0,0,0,532.326,611.75Z" transform="translate(-439.004 -599.298)" fill="#fff"/>
-        <path id="Path_50" data-name="Path 50" d="M560.945,617.406v-9.438h-2.72v1.451l-.07-.118a3.1,3.1,0,0,0-1.206-1.15,3.628,3.628,0,0,0-1.764-.427,3.857,3.857,0,0,0-2.156.622,4.164,4.164,0,0,0-1.478,1.758,6.087,6.087,0,0,0-.531,2.593,5.894,5.894,0,0,0,.531,2.563,4.015,4.015,0,0,0,1.469,1.7,3.975,3.975,0,0,0,2.166.595,3.764,3.764,0,0,0,1.766-.408,2.972,2.972,0,0,0,1.2-1.131l.07-.118v1.507Zm-3.291-2.66a1.979,1.979,0,0,1-1.643.727,2.039,2.039,0,0,1-1.671-.717,3.209,3.209,0,0,1-.58-2.059,3.374,3.374,0,0,1,.589-2.106,1.989,1.989,0,0,1,1.662-.765,1.969,1.969,0,0,1,1.643.737,3.366,3.366,0,0,1,.571,2.1A3.321,3.321,0,0,1,557.654,614.746Z" transform="translate(-452.388 -604.121)" fill="#fff"/>
-        <path id="Path_51" data-name="Path 51" d="M583.661,611.75a3.483,3.483,0,0,0,2.665.983,4.526,4.526,0,0,0,1.6-.251V610.36a3.873,3.873,0,0,1-.9.121,1.594,1.594,0,0,1-1.095-.375,1.507,1.507,0,0,1-.425-1.182v-3.733h2.42v-2.046H585.5v-3.138l-2.758.895v2.243h-1.8v2.046h1.8v3.79A3.92,3.92,0,0,0,583.661,611.75Z" transform="translate(-471.088 -599.298)" fill="#fff"/>
-        <rect id="Rectangle_398" data-name="Rectangle 398" width="2.759" height="9.438" transform="translate(118.352 3.847)" fill="#fff"/>
-        <path id="Path_52" data-name="Path 52" d="M623.643,608.32a5.493,5.493,0,0,0-2.609-.6,5.591,5.591,0,0,0-2.638.6,4.128,4.128,0,0,0-1.729,1.711,5.921,5.921,0,0,0,0,5.217,4.13,4.13,0,0,0,1.729,1.711,5.588,5.588,0,0,0,2.638.6,5.489,5.489,0,0,0,2.609-.6,4.149,4.149,0,0,0,1.72-1.711,5.925,5.925,0,0,0,0-5.217A4.147,4.147,0,0,0,623.643,608.32Zm-.976,6.445a1.973,1.973,0,0,1-1.633.708c-1.482,0-2.233-.953-2.233-2.833a3.347,3.347,0,0,1,.571-2.115,2.011,2.011,0,0,1,1.662-.718,1.965,1.965,0,0,1,1.633.718,4.284,4.284,0,0,1,0,4.24Z" transform="translate(-493.038 -604.121)" fill="#fff"/>
-        <path id="Path_53" data-name="Path 53" d="M307.319,609.863a1.428,1.428,0,0,1,1.184.474,2.378,2.378,0,0,1,.374,1.477v5.591h2.759v-5.723c0-2.627-1.124-3.959-3.34-3.959a3.745,3.745,0,0,0-1.83.445,3.484,3.484,0,0,0-1.309,1.282l-.055.093-.2-1.576H302.46v9.438h2.759v-5.291a2.31,2.31,0,0,1,.573-1.639A2,2,0,0,1,307.319,609.863Z" transform="translate(-297.038 -604.121)" fill="#fff"/>
-        <path id="Path_54" data-name="Path 54" d="M382.962,610.157a3.337,3.337,0,0,1,1.352.3l.018-2.507a2.452,2.452,0,0,0-.976-.175,3.133,3.133,0,0,0-1.7.473,2.765,2.765,0,0,0-1.1,1.361l-.055.138L380.3,608h-2.443v9.438h2.758V612.5a2.384,2.384,0,0,1,.6-1.724A2.328,2.328,0,0,1,382.962,610.157Z" transform="translate(-344.162 -604.153)" fill="#fff"/>
-        <path id="Path_55" data-name="Path 55" d="M439.311,609.863a1.25,1.25,0,0,1,1.081.457,2.543,2.543,0,0,1,.326,1.457v5.629h2.758v-5.723a4.718,4.718,0,0,0-.789-2.988,2.918,2.918,0,0,0-2.4-.972,3.593,3.593,0,0,0-1.811.474,3.453,3.453,0,0,0-1.29,1.271l-.039.067-.028-.072a2.7,2.7,0,0,0-2.78-1.74,3.617,3.617,0,0,0-1.774.427,2.982,2.982,0,0,0-1.2,1.223l-.056.1-.179-1.511h-2.444v9.438h2.759V612.19a2.7,2.7,0,0,1,.486-1.712,1.661,1.661,0,0,1,1.371-.615,1.241,1.241,0,0,1,1.071.466,2.493,2.493,0,0,1,.336,1.448v5.629h2.759V612.19a2.732,2.732,0,0,1,.477-1.711A1.633,1.633,0,0,1,439.311,609.863Z" transform="translate(-375.932 -604.121)" fill="#fff"/>
-        <path id="Path_56" data-name="Path 56" d="M506.648,609.863a1.427,1.427,0,0,1,1.184.474,2.375,2.375,0,0,1,.374,1.477v5.591h2.758v-5.723c0-2.627-1.123-3.959-3.34-3.959a3.746,3.746,0,0,0-1.83.445,3.482,3.482,0,0,0-1.309,1.281l-.056.093-.2-1.576h-2.444v9.438h2.758v-5.291a2.308,2.308,0,0,1,.573-1.639A2,2,0,0,1,506.648,609.863Z" transform="translate(-421.618 -604.121)" fill="#fff"/>
-        <path id="Path_57" data-name="Path 57" d="M652.392,609.863a1.427,1.427,0,0,1,1.183.474,2.378,2.378,0,0,1,.374,1.477v5.591h2.759v-5.723c0-2.627-1.124-3.959-3.34-3.959a3.746,3.746,0,0,0-1.83.445,3.485,3.485,0,0,0-1.309,1.281l-.056.093-.2-1.576h-2.444v9.438h2.758v-5.291a2.308,2.308,0,0,1,.573-1.639A2,2,0,0,1,652.392,609.863Z" transform="translate(-512.708 -604.121)" fill="#fff"/>
-        <circle id="Ellipse_17" data-name="Ellipse 17" cx="1.379" cy="1.379" r="1.379" transform="translate(118.352)" fill="#fff"/>
-      </g>
-    </g>
-  </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="144" height="70" viewBox="0 0 144 70"><path fill="#FFF" d="M87.4 0L70.8 25.6 54.2 0h-7.8v49.1h10.1v-27l14.3 22.1 3.7-5.7 10.6-16.4v27h10.1V0h-7.8z"/><path fill="#0EAADA" d="M105.3 39.1H144v10h-38.7z"/><path fill="#FFF" d="M20.8 0H0v49.1h10.1V38.5h10.7c10.7 0 19.4-8.6 19.4-19.2S31.5 0 20.8 0zm0 28.4H10.1V10h10.7c5.1 0 9.3 4.1 9.3 9.2s-4.2 9.2-9.3 9.2z"/><g transform="translate(0 57.023)" fill="#FFF"><path d="M0-.4h2.9v13.2H0zM23.5 12.2c.7-.5 1.1-1.3 1.1-2.1 0-.6-.2-1.3-.6-1.8-.6-.5-1.3-.9-2.1-1L20.2 7c-.3 0-.6-.2-.9-.3-.2-.1-.3-.3-.2-.5 0-.3.2-.6.4-.7.3-.2.7-.3 1.1-.2.5 0 1 .1 1.5.3.5.2 1 .4 1.5.7l.8-1.8c-.5-.4-1.1-.7-1.7-.8-.6-.2-1.3-.3-2-.3s-1.4.1-2.1.4c-.6.2-1.1.6-1.4 1.1-.3.4-.5 1-.5 1.5 0 .6.2 1.2.6 1.7.6.5 1.3.8 2 .9l1.6.4c.4.1.7.2 1 .4.2.1.3.4.3.6 0 .3-.2.6-.4.7-.4-.1-.8 0-1.2-.1-.6 0-1.3-.1-1.9-.3-.6-.2-1.1-.5-1.6-.8l-.7 1.9c1.2.8 2.7 1.2 4.2 1.1 1 .1 2-.2 2.9-.7zM27.9 12c.7.7 1.7 1 2.7 1 .5 0 1.1-.1 1.6-.2v-2.1c-.3.1-.6.1-.9.1-.4 0-.8-.1-1.1-.4-.3-.3-.5-.7-.4-1.2V5.5h2.4v-2h-2.4V.3l-2.8.9v2.2h-1.8v2H27v3.8c-.1 1 .3 2 .9 2.8zM44.8 13c.6 0 1.1-.1 1.6-.4.5-.3.9-.6 1.2-1.1l.1-.1v1.5h2.7V3.4h-2.8v5.2c0 .6-.2 1.1-.6 1.6-.4.4-.9.6-1.5.6-1 0-1.5-.6-1.5-1.8V3.4h-2.8V9c-.1 1.1.2 2.1.9 3 .8.7 1.8 1 2.7 1zM78.3 7.9c.1-1.3-.3-2.5-1.2-3.5-.8-.9-2-1.3-3.1-1.3-.8 0-1.7.2-2.4.6-.7.4-1.3 1-1.6 1.7-.4.8-.6 1.7-.6 2.5-.1 1.3.4 2.6 1.4 3.6 1 .9 2.4 1.4 3.7 1.3.7 0 1.4-.1 2-.3.6-.2 1.2-.5 1.6-.8l-.7-1.7c-.4.3-.8.5-1.3.7-.5.2-1 .2-1.5.2-.7 0-1.4-.2-1.9-.6-.5-.5-.7-1.2-.7-2h6.3v-.4zM72.1 7c.1-.6.3-1 .7-1.4.4-.3.8-.5 1.3-.5 1.1 0 1.7.6 1.9 1.9h-3.9zM93.3 12c.7.7 1.7 1 2.7 1 .5 0 1.1-.1 1.6-.2v-2.1c-.3.1-.6.1-.9.1-.4 0-.8-.1-1.1-.4-.3-.3-.5-.7-.4-1.2V5.5h2.4v-2h-2.4V.3l-2.8.9v2.2h-1.8v2h1.8v3.8c-.1 1 .3 2 .9 2.8zM108.6 12.8V3.4h-2.7v1.4l-.1-.1c-.3-.5-.7-.9-1.2-1.1-.5-.3-1.1-.4-1.8-.4-.8 0-1.5.2-2.2.6-.6.4-1.2 1-1.5 1.7-.4.8-.5 1.7-.5 2.6 0 .9.2 1.7.5 2.5.3.7.8 1.3 1.5 1.7.6.4 1.4.6 2.2.6.6 0 1.2-.1 1.8-.4.5-.3.9-.6 1.2-1.1l.1-.1v1.5h2.7zm-3.3-2.6c-.4.5-1 .8-1.6.7-.6 0-1.3-.2-1.7-.7-.4-.6-.6-1.3-.6-2s.2-1.5.6-2.1c.4-.5 1-.8 1.7-.8.6 0 1.2.2 1.6.7.4.6.6 1.3.6 2.1 0 .7-.2 1.5-.6 2.1zM112.6 12c.7.7 1.7 1 2.7 1 .5 0 1.1-.1 1.6-.2v-2.1c-.3.1-.6.1-.9.1-.4 0-.8-.1-1.1-.4-.3-.3-.5-.7-.4-1.2V5.5h2.4v-2h-2.4V.3l-2.8.9v2.2h-1.8v2h1.8v3.8c-.1 1 .2 2 .9 2.8zM118.4 3.4h2.8v9.4h-2.8zM130.6 3.8c-.8-.4-1.7-.6-2.6-.6-.9 0-1.8.2-2.6.6-.7.4-1.3 1-1.7 1.7-.8 1.6-.8 3.5 0 5.2.4.7 1 1.3 1.7 1.7.8.4 1.7.6 2.6.6.9 0 1.8-.2 2.6-.6.7-.4 1.3-1 1.7-1.7.8-1.6.8-3.5 0-5.2-.4-.7-1-1.3-1.7-1.7zm-1 6.4c-.4.5-1 .7-1.6.7-1.5 0-2.2-.9-2.2-2.8-.1-.7.1-1.5.6-2.1.4-.5 1-.8 1.7-.7.6 0 1.2.2 1.6.7.7 1.3.7 2.9-.1 4.2zM10.3 5.3c.4 0 .9.1 1.2.5.3.4.4 1 .4 1.5v5.6h2.8V7.1c0-2.6-1.1-3.9-3.3-3.9-.6 0-1.3.1-1.8.4-.5.3-1 .7-1.3 1.3l-.2.1-.2-1.6H5.4v9.4h2.8V7.6c0-.6.2-1.2.6-1.6.4-.5.9-.7 1.5-.7zM38.8 5.6c.5 0 .9.1 1.4.3V3.4c-.3-.1-.6-.2-1-.2-.6 0-1.2.2-1.7.5s-.9.8-1.1 1.3l-.1.1-.2-1.7h-2.4v9.4h2.8V7.9c0-.6.2-1.2.6-1.7.4-.4 1.1-.7 1.7-.6zM63.4 5.3c.4 0 .8.1 1.1.5.3.4.4.9.3 1.4v5.6h2.8V7.1c.1-1-.2-2.1-.8-3-.6-.7-1.5-1-2.4-1-.6 0-1.3.2-1.8.5s-1 .7-1.3 1.3V5v-.1c-.4-1.1-1.6-1.8-2.8-1.7-.6 0-1.2.1-1.8.4-.5.3-.9.7-1.2 1.2l-.1.1-.2-1.5h-2.4v9.4h2.8V7.6c0-.6.1-1.2.5-1.7.3-.4.8-.6 1.4-.6.4 0 .8.1 1.1.5.3.4.4.9.3 1.4v5.6h2.8V7.6c0-.6.1-1.2.5-1.7.1-.4.7-.6 1.2-.6zM85 5.3c.4 0 .9.1 1.2.5.3.4.4 1 .4 1.5v5.6h2.8V7.1c0-2.6-1.1-3.9-3.3-3.9-.6 0-1.3.1-1.8.4-.5.3-1 .7-1.3 1.3l-.2.1-.2-1.6h-2.4v9.4H83V7.6c0-.6.2-1.2.6-1.6.3-.5.9-.7 1.4-.7zM139.7 5.3c.4 0 .9.1 1.2.5.3.4.4 1 .4 1.5v5.6h2.8V7.1c0-2.6-1.1-3.9-3.3-3.9-.6 0-1.3.1-1.8.4-.5.3-1 .7-1.3 1.3l-.2.1-.2-1.6h-2.4v9.4h2.8V7.6c0-.6.2-1.2.6-1.6.3-.5.8-.7 1.4-.7z"/><ellipse cx="119.7" cy="1" rx="1.4" ry="1.4"/></g></svg>

diff --git a/resources/js/app.js b/resources/js/app.js
index 962c369c17b5a60323b58f793e090d6b019ea21c..048f8d465c636337e377744d082c82957fe2039a 100644 (file)
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -27,5 +27,19 @@ files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(
  */
 
 const app = new Vue({
-    el: '#app'
+    el: '#app',
+
+    data: {
+      showSearchBar: false
+    },
+
+    methods: {
+      // Todo: find a better way to structure this with Vue
+      openCart() {
+        document.body.classList.add('cart-open');
+      }
+    }
+
+
+
 });

diff --git a/resources/js/components/Search.vue b/resources/js/components/Search.vue
index d3ee9b9cdd393c681b8e344054dc2a1c4aed1e40..34ce91cdf750647ae0686aeafeda48eb980b4db7 100644 (file)
--- a/resources/js/components/Search.vue
+++ b/resources/js/components/Search.vue
@@ -27,13 +27,16 @@
     export default {
 
         data() {
-            return {
-               visible: false
-            }
+            return {}
         },
 
         mounted() {
             console.log('Search component mounted.')
+        },
+
+        props: ['visible'],
+        methods: {
+
         }
     }
 </script>

diff --git a/resources/styles/components/cart.styl b/resources/styles/components/cart.styl
index 50cd81e2e1bea4795588f26fa88f4163a7d7cbd3..a6966fe676ed08da6b7c1737b58ba5fd4853e676 100644 (file)
--- a/resources/styles/components/cart.styl
+++ b/resources/styles/components/cart.styl
@@ -1,4 +1,4 @@
-.cart
+.cart-header
 
   &-title
     @apply mr-4
@@ -17,3 +17,36 @@
     font-size: 14px
     padding-left: 11px
     padding-right: 4px
+
+  &-popout
+    display: none
+    position: absolute
+    top: 0
+    constrain(right, 5vw)
+    width: 450px
+    max-height: 100vh
+    background-color: #fff
+
+    &-title
+      background-color: #314D6E
+      height: 134px // Todo: handle this when header is smaller (on scroll down)
+
+    &-content
+      max-height: calc(100vh - 134px - 120px)
+      overflow-y: auto
+
+// Show cart popout when .cart-open is applied to body
+.cart-open
+  .cart-header-popout
+    display: block
+
+  // Also show overlay under cart popout
+  .body-overlay
+    position: fixed
+    top: 0
+    right: 0
+    bottom: 0
+    left: 0
+    z-index: 15
+    background-color: theme('colors.navy')
+    opacity: 0.1

diff --git a/resources/styles/components/text-block.styl b/resources/styles/components/text-block.styl
index 823da832b0a0599cdc47ebe6a56117f2c5c561c2..011bcf7585f0f259dd542f4f22005ac6b8c11bd5 100644 (file)
--- a/resources/styles/components/text-block.styl
+++ b/resources/styles/components/text-block.styl
@@ -1,8 +1,11 @@
 .text-block
 
   +below($breakpoint-columns)
-    padding-left: 0
-    padding-right: 0
+    // If padding hasn't been customised, this class will be
+    // set and we can assume the padding should be reset
+    &.text-block-default-padding
+      padding-left: 0
+      padding-right: 0
 
   &-body
     @apply max-w-text

diff --git a/resources/views/components/text-block.blade.php b/resources/views/components/text-block.blade.php
index 5d43db75bce02637df43bde30fc05eadb85cb6ac..5c8cae58d5bce0330dbea3a91231d47dd823a77a 100644 (file)
--- a/resources/views/components/text-block.blade.php
+++ b/resources/views/components/text-block.blade.php
@@ -2,14 +2,15 @@
 @php
     // Default classes
     $class = $class ?? '';
-    $padding = $padding ?? 'pl-2v';
+    $padding = $padding ?? 'text-block-default-padding pl-2v';
+    $titleTag = $titleTag ?? 'h2';
     $titleClass = $titleClass ?? 'h1';
 @endphp
 
 <div class="text-block {{ $class }} {{ $padding }}">
 
     @isset($title)
-        <h2 class="{{ $titleClass }}">{{ $title }}</h2>
+        <{{ $titleTag }} class="{{ $titleClass }}">{{ $title }}</{{ $titleTag }}>
     @endisset
 
     <div class="text-block-body">

diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index a51dec7898932065f9a448b22666025127cd0e3c..8fd674c091efd24e2d79eab278b44b39fa575ccc 100644 (file)
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -32,6 +32,8 @@
     @include('partials.footer')
 </div>
 
+<div class="body-overlay"></div>
+
 <script src="{{ mix('/js/app.js') }}"></script>
 
 @include('cubist::body.end')

diff --git a/resources/views/pages/product-detail.blade.php b/resources/views/pages/product-detail.blade.php
index 5c73343fbe65d61acda99e756632781d76f09a6e..dd3b8ba06053a5b54e52e7061dec17d030a1d35b 100644 (file)
--- a/resources/views/pages/product-detail.blade.php
+++ b/resources/views/pages/product-detail.blade.php
@@ -3,7 +3,7 @@
 @section('content')
 
         <content class="pt-1v">
-            <text-block title-class="h1 text-6xl">
+            <text-block title-class="h1 text-6xl" title-tag="h1">
                 <slot name="title">
                     Modèle 1200<br>
                     de 1.5 kN à 900kN
@@ -11,7 +11,7 @@
             </text-block>
 
             {{-- Product details --}}
-            <div class="flex mb-2v">
+            <div class="flex mb-2v sm:block">
                 {{-- Product images --}}
                 <div class="product-detail-images-wrapper flex-grow" style="max-width: 348px">
                     <div class="product-detail-images-main border-gray-100 border-4 pb-100p w-full bg-center bg-contain bg-no-repeat mb-3"
@@ -28,7 +28,7 @@
                 </div>
 
                 {{-- Product text --}}
-                <text-block class="product-detail-text">
+                <text-block class="product-detail-text sm:mt-6">
                     <ul>
                         <li>Non-linéarité ± 0.03 % pleine échelle</li>
                         <li>Compensation mécanique des efforts transverses.</li>
@@ -42,7 +42,10 @@
 
                     <p class="mt-4"><a href="#">Télécharger la fiche produit</a></p>
 
-                    <link-button href="#">Ajouter à ma sélection</link-button>
+                    <link-button href="#" class="align-middle">Ajouter à ma sélection</link-button>
+
+                    <span class="font-display text-lg inline-block align-middle rounded-full border-grey-dark border-2 h-8 w-8 text-center ml-6">?</span>
+
                 </text-block>
 
 

diff --git a/resources/views/pages/products.blade.php b/resources/views/pages/products.blade.php
index 1dea93c66413c32ee1f6bb3c1e0287ea7bbd929c..679509012515bb6047adf2de4ce9c76c76bc5cfc 100644 (file)
--- a/resources/views/pages/products.blade.php
+++ b/resources/views/pages/products.blade.php
@@ -14,7 +14,7 @@
                 </column>
 
                 <column>
-                    <text-block class="pt-2v" title_class="h1 overlap-left" :title="isset($category) ? ucfirst($category) : 'Lorem ipsum'">
+                    <text-block class="pt-2v" title-tag="h1" title-class="h1 overlap-left" :title="isset($category) ? ucfirst($category) : 'Lorem ipsum'">
 
                         <p>
                             La mesure de force se réalise avec les capteurs de force ou des cellules de charge. Ils sont constitués d'un corps d'épreuve sur lequel sont collées des jauges de contrainte. La mesure de force s'exprime en Newton.

diff --git a/resources/views/partials/cart.blade.php b/resources/views/partials/cart.blade.php
index 89f4ae49f2cb559abb316addb39532f2ee329545..1292c2ad7a31e5f0a7ced3d51872f1fa30a35861 100644 (file)
--- a/resources/views/partials/cart.blade.php
+++ b/resources/views/partials/cart.blade.php
@@ -1,2 +1,2 @@
-<span class="cart-title">My Selection</span>
-<span class="cart-icon">0</span>
+<span class="cart-header-title">My Selection</span>
+<span class="cart-header-icon">0</span>

diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php
index f4a150a92fd630edaca2272e65d869594f2f37e1..60f5fe32ce9b9c5286197c392bc1cf84f1208f34 100644 (file)
--- a/resources/views/partials/header.blade.php
+++ b/resources/views/partials/header.blade.php
@@ -11,15 +11,57 @@
 
         <div class="nav mx-auto flex items-center">
             @include('partials.nav')
-            @svg('search', 'nav-search-icon text-white fill-current hover:text-blue cursor-pointer')
+            <a class="text-white hover:text-blue" href="#" @click.prevent="showSearchBar = !showSearchBar">
+                @svg('search', 'nav-search-icon')
+            </a>
         </div>
 
-        <div class="cart text-right flex items-center">
+        <div class="cart-header text-right flex items-center cursor-pointer hover:text-blue" @click="openCart">
             @include('partials.cart')
         </div>
 
+        <div class="cart-header-popout">
+            <div class="cart-header-popout-title flex justify-between items-center px-1v py-1v">
+                <span>
+                    {{ __('My Selection') }}
+                </span>
+
+                <a href="#" class="close-cart-popout text-white hover:text-blue">
+                    @svg('icon-close-thin')
+                </a>
+            </div>
+            <div class="cart-header-popout-content text-navy font-body p-1v pb-0">
+
+                @for ($i = 1; $i <= 6; $i++)
+                    <div class="cart-header-popout-item flex mb-1v">
+                        <div class="border-gray-100 border-2 bg-center bg-contain bg-no-repeat"
+                             style="background-image: url({{ asset('storage/products/'. rand(1, 6) .'.png') }}); width: 144px; height: 144px">
+                        </div>
+                        <div class="pl-6 leading-relaxed flex-grow">
+                            <div class="font-bold">Capteur de force<br>Modèle 1220</div>
+                            <div class="bg-grey-100 py-1 pl-3 my-2 flex items-center justify-between">
+                                <span>Quantité</span>
+                                <div>
+                                    <span class="px-3">-</span>
+                                    <span class="text-sm">3</span>
+                                    <span class="px-3">+</span>
+                                </div>
+                            </div>
+                            <a href="#" class="cart-delete-item text-red">
+                                Supprimer
+                            </a>
+                        </div>
+                    </div>
+                @endfor
+
+            </div>
+            <div class="cart-header-popout-footer bg-grey-100 p-1v">
+                <link-button class="block text-center">Obtenir un devis</link-button>
+            </div>
+        </div>
+
     </div>
 
 </header>
 
-<search></search>
+<search :visible="showSearchBar"></search>

diff --git a/tailwind.config.js b/tailwind.config.js
index 96c42cdec50ff1434ef915d062bf784450b6af8c..d51ceec35a430ebc3d0d248ac25a7a1c6953c878 100644 (file)
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -17,6 +17,7 @@ module.exports = {
         'navy': '#152F4E',
         'navy-dark': '#0C213A',
         'blue': '#0EAADA',
+        'red': '#F81E60',
         'grey': {
           '100': '#F7F8FC',
           '200': '#EEF1F8',