Fix hover logic on touchables

* fix cards removal * fix cards progress bar overlay * fix cards warning overlay Signed-off-by: Egor Savkin <es@m-labs.hk>
Use thin spaces between initials
2023-11-07 14:59:20 +08:00 · 2023-10-26 10:28:41 +08:00 · 2023-10-26 10:28:21 +08:00
9 changed files with 606 additions and 280 deletions
--- a/content/experiment-control/publications.md
+++ b/content/experiment-control/publications.md
@ -1,103 +1,15 @@
 +++
 title = "Publications"
 weight = 4
-template = "page.html"
+template = "publications.html"

 [extra]
+data = "content/experiment-control/publications.yaml"
 +++

 ##### This page lists publications about experiments performed using ARTIQ, or which otherwise cite ARTIQ.

- **Fast quantum logic gates with trapped-ion qubits**<br />
-  V. M. Schäfer, C. J. Ballance, K. Thirumalai, L. J. Stephenson, T. G. Ballance, A. M. Steane & D. M. Lucas<br />
-  [Nature volume 555, pages75-78(2018)](https://www.nature.com/articles/nature25737) | [arXiv](https://arxiv.org/pdf/1709.06952.pdf)
- **Programming languages and compiler design for realistic quantum hardware**<br />
-  Frederic T. Chong, Diana Franklin & Margaret Martonosi<br />
-  [Nature volume 549, pages180-187(2017)](https://www.nature.com/articles/nature23459)
- **High-rate, high-fidelity entanglement of qubits across an elementary quantum network**<br />
-  L. J. Stephenson, D. P. Nadlinger, B. C. Nichol, S. An, P. Drmota, T. G. Ballance, K. Thirumalai, J. F. Goodwin, D. M. Lucas & C. J. Ballance<br />
-  [Phys. Rev. Lett. 124, 110501](https://journals.aps.org/prl/abstract/10.1103/PhysRevLett.124.110501) | [arXiv](https://arxiv.org/abs/1911.10841)
- **Device-Independent Quantum Key Distribution**<br />
-  D. P. Nadlinger, P. Drmota, B. C. Nichol, G. Araneda, D. Main, R. Srinivas, D. M. Lucas, C. J. Ballance, K. Ivanov, E. Y-Z. Tan, P. Sekatski, R. L. Urbanke, R. Renner, N. Sangouard & J-D. Bancal<br />
-  [arXiv](https://arxiv.org/abs/2109.14600)
- **Universal Graph-Based Scheduling for Quantum Systems**<br />
-  L. Riesebos, B. Bondurant, & Kenneth R. Brown<br />
-  [IEEE Micro, Volume: 41, Issue: 5, Sept.-Oct. 1 2021](https://doi.org/10.1109/MM.2021.3094968)<br />
- **Functional simulation of real-time quantum control software**<br />
-  Leon Riesebos & Kenneth R. Brown<br />
-  [QCE2022](https://doi.org/10.1109/QCE53715.2022.00076) (Best Paper Award) | [arXiv](https://arxiv.org/abs/2210.14364)<br />
- **Modular software for real-time quantum control systems**<br />
-  Leon Riesebos, Brad Bondurant, Jacob Whitlow, Junki Kim, Mark Kuzyk, Tianyi Chen, Samuel Phiri, Ye Wang, Chao Fang, Andrew Van Horn, Jungsang Kim & Kenneth R. Brown<br />
-  [QCE2022](https://doi.org/10.1109/QCE53715.2022.00077) | [arXiv](https://arxiv.org/abs/2210.14341)<br />
- **Fault-Tolerant Operation of a Quantum Error-Correction Code**<br />
-  Laird Egan, Dripto M. Debroy, Crystal Noel, Andrew Risinger, Daiwei Zhu, Debopriyo Biswas, Michael Newman, Muyuan Li, Kenneth R. Brown, Marko Cetina & Christopher Monroe<br />
-  [arXiv](https://arxiv.org/abs/2009.11482)
- **Probing Qubit Memory Errors at the Part-per-Million Level**<br />
-  M. A. Sepiol, A. C. Hughes, J. E. Tarlton, D. P. Nadlinger, T. G. Ballance, C. J. Ballance, T. P. Harty, A. M. Steane, J. F. Goodwin & D. M. Lucas<br />
-  [Phys. Rev. Lett. 123, 110503](https://journals.aps.org/prl/abstract/10.1103/PhysRevLett.123.110503) | [arXiv](https://arxiv.org/abs/1905.06878)
- **Quantum amplification of mechanical oscillator motion**<br />
-  S. C. Burd, R. Srinivas, J. J. Bollinger, A. C. Wilson, D. J. Wineland, D. Leibfried, D. H. Slichter & D. T. C. Allcock<br />
-  [Science, Vol 364, Issue 6446, 21 June 2019](https://science.sciencemag.org/content/364/6446/1163)
- **State Readout of a Trapped Ion Qubit Using a Trap-Integrated Superconducting Photon Detector**<br />
-  S. L. Todaro, V. B. Verma, K. C. McCormick, D. T. C. Allcock, R. P. Mirin, D. J. Wineland, S. W. Nam, A. C. Wilson, D. Leibfried & D. H. Slichter<br />
-  [arXiv](https://arxiv.org/abs/2008.00065)
- **Trapped-Ion Spin-Motion Coupling with Microwaves and a Near-Motional Oscillating Magnetic Field Gradient**<br />
-  R. Srinivas, S. C. Burd, R. T. Sutherland, A. C. Wilson, D. J. Wineland, D. Leibfried, D. T. C. Allcock & D. H. Slichter<br />
-  [Phys. Rev. Lett. 122, 163201](https://journals.aps.org/prl/abstract/10.1103/PhysRevLett.122.163201) | [arXiv](https://arxiv.org/abs/1812.02098.pdf)
- **Speed, retention loss, and motional heating of atoms in an optical conveyor belt**<br />
-  G. T. Hickman & M. Saffman<br />
-  [Phys. Rev. A 101, 063411](https://journals.aps.org/pra/abstract/10.1103/PhysRevA.101.063411) | [arXiv](https://arxiv.org/abs/2004.04848)
- **A hybrid ion-atom trap with integrated high resolution mass spectrometer**<br />
-  S. Jyothi, Kisra N. Egodapitiya, Brad Bondurant, Zhubing Jia, Eric Pretzsch, Piero Chiappina, Gang Shu & Kenneth R. Brown<br />
-  [Review of Scientific Instruments 90, 103201 (2019)](https://aip.scitation.org/doi/abs/10.1063/1.5121431) | [arXiv](https://arxiv.org/abs/1907.10455)
- **Photon-mediated charge-exchange reactions between <sup>39</sup>K atoms and <sup>40</sup>Ca<sup>+</sup> ions in a hybrid trap**<br />
-  Hui Li, S. Jyothi, Ming Li, Jacek Klos, Alexander Petrov, Kenneth R Brown & Svetlana Kotochigova<br />
-  [Phys. Chem. Chem. Phys., 2020,22, 10870-10881](https://pubs.rsc.org/en/content/articlelanding/2020/cp/d0cp01131b) | [arXiv](https://arxiv.org/abs/2003.03430)
- **Spin Readout Techniques of the Nitrogen-Vacancy Center in Diamond**<br />
-  David A. Hopper, Henry J. Shulevitz, & Lee C. Bassett<br />
-  [Micromachines 2018, 9(9), 437](https://www.mdpi.com/2072-666X/9/9/437) | [arXiv](https://arxiv.org/abs/1809.05237)
- **High-accuracy inertial measurements with cold-atom sensors**<br />
-  Remi Geiger, Arnaud Landragin, Sébastien Merlet & Franck Pereira Dos Santos<br />
-  [AVS Quantum Sci. 2, 024702 (2020)](https://avs.scitation.org/doi/10.1116/5.0009093) | [arXiv](https://arxiv.org/abs/2003.12516)
- **Dynamical low-noise microwave source for cold atom experiments**<br />
-  Bernd Meyer, Alexander Idel, Fabian Anders, Jan Peise & Carsten Klempt<br />
-  [arXiv](https://arxiv.org/abs/2003.10989)
- **Ion-trapping lab setup for quantum information experiments**<br />
-  Alexander Quinn, Jeremy Metzner, Daniel Moore, Vikram Sandhu, Dave Wineland, David Allcock<br />
-  [DAMOP20 poster](https://meetings.aps.org/Meeting/DAMOP20/Session/K01.113)
- **Short Time Fourier Transform Pulse Generator for Trapped Ion Quantum Gates**<br />
-  Norman Krackow<br />
-  [local copy](/thesis_nkrackow.pdf)
- **Precise PID controller for quantum applications**<br />
-  Jakub Matyas<br />
-  [Warsaw University of Technology, Engineer's thesis](https://repo.pw.edu.pl/info/bachelor/WUTe90de3461b53456c9d63c55d80d34220/) | [local copy](/JMatyas_inz_v6.pdf)
- **Controller module for real-time quantum applications**<br />
-  Paweł Kulik<br />
-  [Warsaw University of Technology, Masters's diploma thesis](https://repo.pw.edu.pl/info/master/WUT6212c3c3cdcd40ea9095f4ead6482596/) | [local copy](/pawel_kulik_kasli_thesis_2019_compressed.pdf)
- **Driver module for quantum computer experiments: Kasli**<br />
-  Paweł Kulik, Grzegorz Kasprowicz and Michał Gąska<br />
-  [Proceedings Volume 10808, Photonics Applications in Astronomy, Communications, Industry, and High-Energy Physics Experiments 2018](https://doi.org/10.1117/12.2501709) | [slides](https://raw.githubusercontent.com/wiki/sinara-hw/meta/talks/pawel_kasli_mgr2.pdf)
- **Urukul – open-source frequency synthesizer module for quantum physics**<br />
-  Grzegorz Kasprowicz, Thomas Harty, Sébastien Bourdeauducq, Robert Jördens, David Allcock, David Nadlinger, Joseph Britton, Ana Sotirova, Dorota Nowicka<br />
-  [International Journal of Electronics and Telecommunications, Vol 68, No 1 (2022)](http://ijet.pl/index.php/ijet/issue/view/58)
- **Control system for ion Penning traps at the AEgIS experiment at CERN**<br />
-  Dorota Nowicka<br />
-  [TIPP 2021 Poster](https://indico.cern.ch/event/981823/contributions/4295432/attachments/2250078/3816845/poster_445.pdf)
- **Integrated photonic control of trapped ion qubits**<br />
-  Jules Stuart, Dave Reens, Cheri Sorace-Agaskar, Dave Kharas, Jeremy Sage, John Chiaverini<br />
-  [NY CREATES presentation](https://ny-creates.org/wp-content/uploads/Niffenegger_NY_CREATES_04_22_2021.pdf)
- **Sayma: Agile RF for Coherent Quantum Control Using ARTIQ**<br />
-   Joseph W. Britton, David T. C. Allcock, Chris Ballance, Tom P. Harty, Robert Jordens, Greg Kasprowicz, Pawel Kulik, Daniel H. Slichter, Weida Zhang, Sebastien Bourdeauducq<br />
-   APS Division of Atomic and Molecular Physics Meeting 2019, abstract id.E01.164
- **Programowalny sterownik siłownika piezoelektrycznego**<br />
-   Adam Kołodyński<br />
-   Warsaw University of Technology, Engineer's thesis | [local copy](/AdamKolodynski.pdf)
- **Microwave synthesizer for driving ion traps in quantum computing**<br />
-   Krzysztof Belewicz<br />
-   Warsaw University of Technology, Bachelor's dipoma thesis | [local copy](/Krzysztof_Belewicz_V1.1.pdf)
- **Wielokanałowy moduł sterujący pułapką jonową w standardzie MicroTCA.4**<br />
-   Tomasz Przywózki<br />
-   Warsaw University of Technology, Master's thesis | [local copy](/TomaszPrzywozki_v3.pdf)

-To have your publication listed here, write to sb@m-l\*\*\*.hk.
+
+

--- a/content/experiment-control/publications.yaml
+++ b/content/experiment-control/publications.yaml
@ -0,0 +1,215 @@
+- title: "Fast quantum logic gates with trapped-ion qubits"
+  authors: "V. M. Schäfer, C. J. Ballance, K. Thirumalai, L. J. Stephenson, T. G. Ballance, A. M. Steane & D. M. Lucas"
+  links:
+    - name: "Nature volume 555, pages75-78(2018)"
+      path: "https://www.nature.com/articles/nature25737"
+    - name: "arXiv"
+      path: "https://arxiv.org/pdf/1709.06952.pdf"
+
+- title: "Programming languages and compiler design for realistic quantum hardware"
+  authors: "Frederic T. Chong, Diana Franklin & Margaret Martonosi"
+  links:
+    - name: "Nature volume 549, pages180-187(2017)"
+      path: "https://www.nature.com/articles/nature23459"
+
+- title: "High-rate, high-fidelity entanglement of qubits across an elementary quantum network"
+  authors: "L. J. Stephenson, D. P. Nadlinger, B. C. Nichol, S. An, P. Drmota, T. G. Ballance, K. Thirumalai, J. F. Goodwin, D. M. Lucas & C. J. Ballance"
+  links:
+    - name: "Phys. Rev. Lett. 124, 110501"
+      path: "https://journals.aps.org/prl/abstract/10.1103/PhysRevLett.124.110501"
+    - name: "arXiv"
+      path: "https://arxiv.org/abs/1911.10841"
+
+- title: "Device-Independent Quantum Key Distribution"
+  authors: "D. P. Nadlinger, P. Drmota, B. C. Nichol, G. Araneda, D. Main, R. Srinivas, D. M. Lucas, C. J. Ballance, K. Ivanov, E. Y-Z. Tan, P. Sekatski, R. L. Urbanke, R. Renner, N. Sangouard & J-D. Bancal"
+  links:
+    - name: "arXiv"
+      path: "https://arxiv.org/abs/2109.14600"
+
+- title: "Universal Graph-Based Scheduling for Quantum Systems"
+  authors: "L. Riesebos, B. Bondurant, & Kenneth R. Brown"
+  links:
+    - name: "IEEE Micro, Volume: 41, Issue: 5, Sept.-Oct. 1 2021"
+      path: "https://doi.org/10.1109/MM.2021.3094968"
+
+- title: "Functional simulation of real-time quantum control software"
+  authors: "Leon Riesebos & Kenneth R. Brown"
+  links:
+    - name: "QCE2022 (Best Paper Award)"
+      path: "https://doi.org/10.1109/QCE53715.2022.00076"
+    - name: "arXiv"
+      path: "https://arxiv.org/abs/2210.14364"
+
+- title: "Modular software for real-time quantum control systems"
+  authors: "Leon Riesebos, Brad Bondurant, Jacob Whitlow, Junki Kim, Mark Kuzyk, Tianyi Chen, Samuel Phiri, Ye Wang, Chao Fang, Andrew Van Horn, Jungsang Kim & Kenneth R. Brown"
+  links:
+    - name: "QCE2022"
+      path: "https://doi.org/10.1109/QCE53715.2022.00077"
+    - name: "arXiv"
+      path: "https://arxiv.org/abs/2210.14341"
+
+- title: "Fault-Tolerant Operation of a Quantum Error-Correction Code"
+  authors: "Laird Egan, Dripto M. Debroy, Crystal Noel, Andrew Risinger, Daiwei Zhu, Debopriyo Biswas, Michael Newman, Muyuan Li, Kenneth R. Brown, Marko Cetina & Christopher Monroe"
+  links:
+    - name: "arXiv"
+      path: "https://arxiv.org/abs/2009.11482"
+
+- title: "Probing Qubit Memory Errors at the Part-per-Million Level"
+  authors: "M. A. Sepiol, A. C. Hughes, J. E. Tarlton, D. P. Nadlinger, T. G. Ballance, C. J. Ballance, T. P. Harty, A. M. Steane, J. F. Goodwin & D. M. Lucas"
+  links:
+    - name: "Phys. Rev. Lett. 123, 110503"
+      path: "https://journals.aps.org/prl/abstract/10.1103/PhysRevLett.123.110503"
+    - name: "arXiv"
+      path: "https://arxiv.org/abs/1905.06878"
+
+- title: "Quantum amplification of mechanical oscillator motion"
+  authors: "S. C. Burd, R. Srinivas, J. J. Bollinger, A. C. Wilson, D. J. Wineland, D. Leibfried, D. H. Slichter & D. T. C. Allcock"
+  links:
+    - name: "Science, Vol 364, Issue 6446, 21 June 2019"
+      path: "https://science.sciencemag.org/content/364/6446/1163"
+
+- title: "State Readout of a Trapped Ion Qubit Using a Trap-Integrated Superconducting Photon Detector"
+  authors: "S. L. Todaro, V. B. Verma, K. C. McCormick, D. T. C. Allcock, R. P. Mirin, D. J. Wineland, S. W. Nam, A. C. Wilson, D. Leibfried & D. H. Slichter"
+  links:
+    - name: "arXiv"
+      path: "https://arxiv.org/abs/2008.00065"
+
+- title: "Trapped-Ion Spin-Motion Coupling with Microwaves and a Near-Motional Oscillating Magnetic Field Gradient"
+  authors: "R. Srinivas, S. C. Burd, R. T. Sutherland, A. C. Wilson, D. J. Wineland, D. Leibfried, D. T. C. Allcock & D. H. Slichter"
+  links:
+    - name: "Phys. Rev. Lett. 122, 163201"
+      path: "https://journals.aps.org/prl/abstract/10.1103/PhysRevLett.122.163201"
+    - name: "arXiv"
+      path: "https://arxiv.org/abs/1812.02098.pdf"
+
+- title: "Speed, retention loss, and motional heating of atoms in an optical conveyor belt"
+  authors: "G. T. Hickman & M. Saffman"
+  links:
+    - name: "Phys. Rev. A 101, 063411"
+      path: "https://journals.aps.org/pra/abstract/10.1103/PhysRevA.101.063411"
+    - name: "arXiv"
+      path: "https://arxiv.org/abs/2004.04848"
+
+- title: "A hybrid ion-atom trap with integrated high resolution mass spectrometer"
+  authors: "S. Jyothi, Kisra N. Egodapitiya, Brad Bondurant, Zhubing Jia, Eric Pretzsch, Piero Chiappina, Gang Shu & Kenneth R. Brown"
+  links:
+    - name: "Review of Scientific Instruments 90, 103201 (2019)"
+      path: "https://aip.scitation.org/doi/abs/10.1063/1.5121431"
+    - name: "arXiv"
+      path: "https://arxiv.org/abs/1907.10455"
+
+
+- title: "Photon-mediated charge-exchange reactions between <sup>39</sup>K atoms and <sup>40</sup>Ca<sup>+</sup> ions in a hybrid trap"
+  authors: "Hui Li, S. Jyothi, Ming Li, Jacek Klos, Alexander Petrov, Kenneth R Brown & Svetlana Kotochigova"
+  links:
+    - name: "Phys. Chem. Chem. Phys., 2020,22, 10870-10881"
+      path: "https://pubs.rsc.org/en/content/articlelanding/2020/cp/d0cp01131b"
+    - name: "arXiv"
+      path: "https://arxiv.org/abs/2003.03430"
+
+
+- title: "Spin Readout Techniques of the Nitrogen-Vacancy Center in Diamond"
+  authors: "David A. Hopper, Henry J. Shulevitz, & Lee C. Bassett"
+  links:
+    - name: "Micromachines 2018, 9(9), 437"
+      path: "https://www.mdpi.com/2072-666X/9/9/437"
+    - name: "arXiv"
+      path: "https://arxiv.org/abs/1809.05237"
+
+- title: "High-accuracy inertial measurements with cold-atom sensors"
+  authors: "Remi Geiger, Arnaud Landragin, Sébastien Merlet & Franck Pereira Dos Santos"
+  links:
+    - name: "AVS Quantum Sci. 2, 024702 (2020)"
+      path: "https://avs.scitation.org/doi/10.1116/5.0009093"
+    - name: "arXiv"
+      path: "https://arxiv.org/abs/2003.12516"
+
+- title: "Dynamical low-noise microwave source for cold atom experiments"
+  authors: "Bernd Meyer, Alexander Idel, Fabian Anders, Jan Peise & Carsten Klempt"
+  links:
+    - name: "arXiv"
+      path: "https://arxiv.org/abs/2003.10989"
+
+- title: "Ion-trapping lab setup for quantum information experiments"
+  authors: "Alexander Quinn, Jeremy Metzner, Daniel Moore, Vikram Sandhu, Dave Wineland, David Allcock"
+  links:
+    - name: "DAMOP20 poster"
+      path: "https://meetings.aps.org/Meeting/DAMOP20/Session/K01.113"
+
+- title: "Short Time Fourier Transform Pulse Generator for Trapped Ion Quantum Gates"
+  authors: "Norman Krackow"
+  links:
+    - name: "local copy"
+      path: "/thesis_nkrackow.pdf"
+
+- title: "Precise PID controller for quantum applications"
+  authors: "Jakub Matyas"
+  links:
+    - name: "Warsaw University of Technology, Engineer's thesis"
+      path: "https://repo.pw.edu.pl/info/bachelor/WUTe90de3461b53456c9d63c55d80d34220/"
+    - name: "local copy"
+      path: "/JMatyas_inz_v6.pdf"
+
+- title: "Controller module for real-time quantum applications"
+  authors: "Paweł Kulik"
+  links:
+    - name: "Warsaw University of Technology, Masters's diploma thesis"
+      path: "https://repo.pw.edu.pl/info/master/WUT6212c3c3cdcd40ea9095f4ead6482596/"
+    - name: "local copy"
+      path: "/pawel_kulik_kasli_thesis_2019_compressed.pdf"
+
+- title: "Driver module for quantum computer experiments: Kasli"
+  authors: "Paweł Kulik, Grzegorz Kasprowicz and Michał Gąska"
+  links:
+    - name: "Proceedings Volume 10808, Photonics Applications in Astronomy, Communications, Industry, and High-Energy Physics Experiments 2018"
+      path: "https://doi.org/10.1117/12.2501709"
+    - name: "slides"
+      path: "https://raw.githubusercontent.com/wiki/sinara-hw/meta/talks/pawel_kasli_mgr2.pdf"
+
+- title: "Urukul – open-source frequency synthesizer module for quantum physics"
+  authors: "Grzegorz Kasprowicz, Thomas Harty, Sébastien Bourdeauducq, Robert Jördens, David Allcock, David Nadlinger, Joseph Britton, Ana Sotirova, Dorota Nowicka"
+  links:
+    - name: "International Journal of Electronics and Telecommunications, Vol 68, No 1 (2022)"
+      path: "http://ijet.pl/index.php/ijet/issue/view/58"
+
+- title: "Control system for ion Penning traps at the AEgIS experiment at CERN"
+  authors: "Dorota Nowicka"
+  links:
+    - name: "TIPP 2021 Poster"
+      path: "https://indico.cern.ch/event/981823/contributions/4295432/attachments/2250078/3816845/poster_445.pdf"
+
+- title: "Integrated photonic control of trapped ion qubits"
+  authors: "Jules Stuart, Dave Reens, Cheri Sorace-Agaskar, Dave Kharas, Jeremy Sage, John Chiaverini"
+  links:
+    - name: "NY CREATES presentation"
+      path: "https://ny-creates.org/wp-content/uploads/Niffenegger_NY_CREATES_04_22_2021.pdf"
+
+- title: "Sayma: Agile RF for Coherent Quantum Control Using ARTIQ"
+  authors: "Joseph W. Britton, David T. C. Allcock, Chris Ballance, Tom P. Harty, Robert Jordens, Greg Kasprowicz, Pawel Kulik, Daniel H. Slichter, Weida Zhang, Sebastien Bourdeauducq"
+  links:
+    - name: "APS Division of Atomic and Molecular Physics Meeting 2019, abstract id.E01.164"
+      path: null
+
+- title: "Programowalny sterownik siłownika piezoelektrycznego"
+  authors: "Adam Kołodyński"
+  links:
+    - name: "Warsaw University of Technology, Engineer's thesis"
+      path: null
+    - name: "local copy"
+      path: "/AdamKolodynski.pdf"
+
+- title: "Microwave synthesizer for driving ion traps in quantum computing"
+  authors: "Krzysztof Belewicz"
+  links:
+    - name: "Warsaw University of Technology, Bachelor's dipoma thesis"
+      path: null
+    - name: "local copy"
+      path: "/Krzysztof_Belewicz_V1.1.pdf"
+
+- title: "Wielokanałowy moduł sterujący pułapką jonową w standardzie MicroTCA.4"
+  authors: "Tomasz Przywózki"
+  links:
+    - name: "Warsaw University of Technology, Master's thesis"
+      path: null
+    - name: "local copy"
+      path: "/TomaszPrzywozki_v3.pdf"
--- a/package-lock.json
+++ b/package-lock.json
@ -20,6 +20,7 @@
        "prop-types": "^15.8.1",
        "react": "^18.2.0",
        "react-beautiful-dnd": "^13.1.1",
+        "react-bootstrap": "^2.8.0",
        "react-dom": "^18.2.0",
        "uuid": "^9.0.0",
        "webpack": "^5.88.1",
@ -1922,12 +1923,77 @@
      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
      "dev": true,
-      "peer": true,
      "funding": {
        "type": "opencollective",
        "url": "https://opencollective.com/popperjs"
      }
    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.8.0.tgz",
+      "integrity": "sha512-Y54xs483rglN5DxbwfCPHxnkvZ+gZ0LbSYmR72LyWPGft8hN/lrl1VRS1EW2SMjnkEWlj+Km2mwvA3kEHDUA0A==",
+      "dev": true,
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+      }
+    },
+    "node_modules/@restart/hooks": {
+      "version": "0.4.11",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.11.tgz",
+      "integrity": "sha512-Ft/ncTULZN6ldGHiF/k5qt72O8JyRMOeg0tApvCni8LkoiEahO+z3TNxfXIVGy890YtWVDvJAl662dVJSJXvMw==",
+      "dev": true,
+      "dependencies": {
+        "dequal": "^2.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.6.6.tgz",
+      "integrity": "sha512-eC3puKuWE1SRYbojWHXnvCNHGgf3uzHCb6JOhnF4OXPibOIPEkR1sqDSkL643ydigxwh+ruCa1CmYHlzk7ikKA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "@popperjs/core": "^2.11.6",
+        "@react-aria/ssr": "^3.5.0",
+        "@restart/hooks": "^0.4.9",
+        "@types/warning": "^3.0.0",
+        "dequal": "^2.0.3",
+        "dom-helpers": "^5.2.0",
+        "uncontrollable": "^8.0.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
+    "node_modules/@restart/ui/node_modules/uncontrollable": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz",
+      "integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==",
+      "dev": true,
+      "peerDependencies": {
+        "react": ">=16.14.0"
+      }
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.3.tgz",
+      "integrity": "sha512-FaruWX6KdudYloq1AHD/4nU+UsMTdNE8CKyrseXWEcgjDAbvkwJg2QGPAnfIJLIWsjZOSPLOAykK6fuYp4vp4A==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
    "node_modules/@types/eslint": {
      "version": "8.44.0",
      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.0.tgz",
@ -2005,12 +2071,27 @@
        "redux": "^4.0.0"
      }
    },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.8",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.8.tgz",
+      "integrity": "sha512-QmQ22q+Pb+HQSn04NL3HtrqHwYMf4h3QKArOy5F8U5nEVMaihBs3SR10WiOM1iwPz5jIo8x/u11al+iEGZZrvg==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
    "node_modules/@types/scheduler": {
      "version": "0.16.3",
      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==",
      "dev": true
    },
+    "node_modules/@types/warning": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.2.tgz",
+      "integrity": "sha512-S/2+OjBIcBl8Kur23YLe0hG1e7J5m2bHfB4UuMNoLZjIFhQWhTf1FeS+WFoXHUC6QsCEfk4pftj4J1KIKC1glA==",
+      "dev": true
+    },
    "node_modules/@webassemblyjs/ast": {
      "version": "1.11.6",
      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz",
@ -2784,6 +2865,12 @@
        "node": ">=6.0"
      }
    },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==",
+      "dev": true
+    },
    "node_modules/clone-deep": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
@ -2929,6 +3016,25 @@
        "node": ">=0.4.0"
      }
    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
    "node_modules/electron-to-chromium": {
      "version": "1.4.454",
      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.454.tgz",
@ -3393,6 +3499,15 @@
        "node": ">=10.13.0"
      }
    },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dev": true,
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
    "node_modules/is-binary-path": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@ -3860,6 +3975,25 @@
        "react-is": "^16.13.1"
      }
    },
+    "node_modules/prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "dev": true,
+      "dependencies": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0"
+      }
+    },
+    "node_modules/prop-types-extra/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true
+    },
    "node_modules/prop-types/node_modules/react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@ -3927,6 +4061,36 @@
        "react-dom": "^16.8.5 || ^17.0.0 || ^18.0.0"
      }
    },
+    "node_modules/react-bootstrap": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.9.1.tgz",
+      "integrity": "sha512-ezgmh/ARCYp18LbZEqPp0ppvy+ytCmycDORqc8vXSKYV3cer4VH7OReV8uMOoKXmYzivJTxgzGHalGrHamryHA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.22.5",
+        "@restart/hooks": "^0.4.9",
+        "@restart/ui": "^1.6.6",
+        "@types/react-transition-group": "^4.4.6",
+        "classnames": "^2.3.2",
+        "dom-helpers": "^5.2.1",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.8.1",
+        "prop-types-extra": "^1.1.0",
+        "react-transition-group": "^4.4.5",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.14.8",
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/react-dom": {
      "version": "18.2.0",
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@ -3946,6 +4110,12 @@
      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
      "dev": true
    },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
+      "dev": true
+    },
    "node_modules/react-redux": {
      "version": "7.2.9",
      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz",
@ -3971,6 +4141,22 @@
        }
      }
    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
    "node_modules/readdirp": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@ -4404,6 +4590,27 @@
        "node": ">=8.0"
      }
    },
+    "node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+      "dev": true
+    },
+    "node_modules/uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0"
+      }
+    },
    "node_modules/unicode-canonical-property-names-ecmascript": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
@ -4501,6 +4708,15 @@
        "uuid": "dist/bin/uuid"
      }
    },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dev": true,
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
    "node_modules/watchpack": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
--- a/package.json
+++ b/package.json
@ -27,7 +27,8 @@
    "axios": "^1.4.0",
    "prop-types": "^15.8.1",
    "jquery": "^3.7.0",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "react-bootstrap": "^2.8.0"
  },
  "babel": {
    "presets": [
--- a/sass/css/_shop.scss
+++ b/sass/css/_shop.scss
@ -438,50 +438,6 @@ button {
                            width: 20px;
                            padding-bottom: 3px;
                        }
-
-                        .k-popup-connectors,
-                        .k-popup-warning {
-                            position: absolute;
-                            background-color: $color-primary;
-                            color: white;
-                            font-weight: 700;
-                            font-size: .6rem;
-                            padding: .8rem 1rem;
-                            box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
-                            text-align: left;
-
-                            p {
-                                margin-bottom: 0;
-                            }
-
-                            p + p {
-                                padding-bottom: 8px;
-                            }
-                        }
-
-                        .k-popup-connectors {
-                            min-width: 200px;
-                            bottom: 50px;
-                        }
-
-                        .k-popup-warning {
-                            background-color: #c75e5e;
-                            min-width: 350px;
-
-                            .rule.warning {
-                                display: flex;
-                                font-size: .75rem;
-
-                                img {
-                                    margin-right: 10px;
-                                    height: 100%;
-                                }
-                            }
-                        }
-
-                        .k-popup-warning.inverted {
-                            right: 0;
-                        }
                    }

                    .overlayRemove {
@ -551,3 +507,42 @@ button {
    }

 }
+
+.k-popup-connectors,
+.k-popup-warning {
+    background-color: $color-primary;
+    color: white;
+    font-weight: 700;
+    font-size: .6rem;
+    padding: .8rem 1rem;
+    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
+    text-align: left;
+
+    p {
+        margin-bottom: 0;
+    }
+
+    p + p {
+        padding-bottom: 8px;
+    }
+}
+
+.k-popup-connectors {
+    min-width: 200px;
+}
+
+.k-popup-warning {
+    background-color: #c75e5e;
+    min-width: 300px;
+
+    .rule.warning {
+        display: flex;
+        font-size: .75rem;
+
+        img {
+            margin-right: 10px;
+            height: 100%;
+        }
+    }
+}
+
--- a/static/js/shop.bundle.js
+++ b/static/js/shop.bundle.js
--- a/static/js/shop.jsx
+++ b/static/js/shop.jsx
@ -6,6 +6,7 @@ import { createRoot } from "react-dom/client";
 import PropTypes from "prop-types";
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 import { v4 as uuidv4 } from 'uuid';
+import { OverlayTrigger } from "react-bootstrap";


 const data = window.shop_data;
@ -532,15 +533,14 @@ class ProductCartItem extends React.PureComponent {
  static get propTypes() {
    return {
      isMobile: PropTypes.bool,
+      isTouch: PropTypes.bool,
      hovered: PropTypes.bool,
      index: PropTypes.number.isRequired,
      model: PropTypes.object.isRequired,
      data: PropTypes.object,
-      onToggleProgress: PropTypes.func,
-      onToggleWarning: PropTypes.func,
      onToggleOverlayRemove: PropTypes.func,
      onClickRemoveItem: PropTypes.func,
-      shouldTooltipWarningClassInverted: PropTypes.bool,
+      onClickItem: PropTypes.func,
    };
  }

@ -552,47 +552,10 @@ class ProductCartItem extends React.PureComponent {

  constructor(props) {
    super(props);
-    this.handleOnMouseEnterItem = this.handleOnMouseEnterItem.bind(this);
-    this.handleOnMouseLeaveItem = this.handleOnMouseLeaveItem.bind(this);
-    this.handleOnMouseEnterWarningItem = this.handleOnMouseEnterWarningItem.bind(this);
-    this.handleOnMouseLeaveWarningItem = this.handleOnMouseLeaveWarningItem.bind(this);
    this.handleOnMouseEnterRemoveItem = this.handleOnMouseEnterRemoveItem.bind(this);
    this.handleOnMouseLeaveRemoveItem = this.handleOnMouseLeaveRemoveItem.bind(this);
    this.handleOnClickRemoveItem = this.handleOnClickRemoveItem.bind(this);
-  }
-
-  handleOnMouseEnterItem(index, e) {
-    if (this.props.onToggleProgress) {
-      this.props.onToggleProgress(index, true);
-    }
-    e.preventDefault();
-  }
-
-  handleOnMouseLeaveItem(index, e) {
-    if (this.props.onToggleProgress) {
-      this.props.onToggleProgress(index, false);
-    }
-    e.preventDefault();
-  }
-
-  handleOnMouseEnterWarningItem(index, isWarning, e) {
-    if (!isWarning) {
-      return;
-    }
-    if (this.props.onToggleWarning) {
-      this.props.onToggleWarning(index, true);
-    }
-    e.preventDefault();
-  }
-
-  handleOnMouseLeaveWarningItem(index, isWarning, e) {
-    if (!isWarning) {
-      return;
-    }
-    if (this.props.onToggleWarning) {
-      this.props.onToggleWarning(index, false);
-    }
-    e.preventDefault();
+    this.handleOnClickItem = this.handleOnClickItem.bind(this);
  }

  handleOnMouseEnterRemoveItem(index, e) {
@ -609,6 +572,13 @@ class ProductCartItem extends React.PureComponent {
    e.preventDefault();
  }

+  handleOnClickItem(index, e) {
+    if (this.props.onClickItem && this.props.isTouch) {
+      this.props.onClickItem(index);
+    }
+    e.preventDefault();
+  }
+
  handleOnClickRemoveItem(index, e) {
    if (this.props.onClickRemoveItem) {
      this.props.onClickRemoveItem(index);
@ -621,7 +591,6 @@ class ProductCartItem extends React.PureComponent {
      model,
      data,
      index,
-      shouldTooltipWarningClassInverted,
    } = this.props;

    let warning;
@ -634,7 +603,7 @@ class ProductCartItem extends React.PureComponent {
    }

    let render_progress;
-    if (model.showProgress && data) {
+    if (data) {
      switch(model.type) {
        case 'kasli':
          render_progress = (
@ -696,28 +665,29 @@ class ProductCartItem extends React.PureComponent {
              >

            {/* warning container */}
-            <div
-                className="progress-container warning"
-                onMouseEnter={this.handleOnMouseEnterWarningItem.bind(this, index, warning)}
-                onMouseLeave={this.handleOnMouseLeaveWarningItem.bind(this, index, warning)}>
+            <OverlayTrigger
+                placement="bottom"
+                trigger={warning ? ['click', 'hover', 'focus'] : []}
+                overlay={
+                  warning ? (<div className="k-popup-warning">
+                    <p className="rule warning">
+                      <i>{warning.message}</i>
+                    </p>
+                  </div>) : null
+                }
+                rootClose
+            >
+              <div className="progress-container warning">
+                {warning && (<img className="alert-warning" src={warning ? `/images${warning.icon}` : null}/>)}
+              </div>
+            </OverlayTrigger>

-              {warning && (
-                <img className="alert-warning" src={warning ? `/images${warning.icon}` : null} />
-              )}
-
-              {warning && model.showWarning &&  (
-                <div className={`k-popup-warning ${shouldTooltipWarningClassInverted ? 'inverted': ''}`}>
-                  <p className="rule warning">
-                    <i>{warning.message}</i>
-                  </p>
-                </div>
-              )}
-            </div>

            <h6>{model.name_number}</h6>

            <div
              onMouseEnter={this.handleOnMouseEnterRemoveItem.bind(this, index)}
+              onClick={this.handleOnClickItem.bind(this, index)}
              >

              <img
@ -737,26 +707,30 @@ class ProductCartItem extends React.PureComponent {
            </div>

            {/* progression container */}
-            <div
-                className="progress-container"
-                onMouseEnter={this.handleOnMouseEnterItem.bind(this, index)}
-                onMouseLeave={this.handleOnMouseLeaveItem.bind(this, index)}>
+            {render_progress && (
+              <OverlayTrigger
+                placement="top"
+                trigger={['click', 'hover', 'focus']}
+                overlay={render_progress}
+                rootClose
+              >
+                <div className="progress-container">

-              {model.nbrSlotMax > 0 && (
-                <div className="nbr-connectors">
-                  <div style={{ ...nbrConnectorsStyle(data)}}></div>
+                  {model.nbrSlotMax > 0 && (
+                      <div className="nbr-connectors">
+                        <div style={{ ...nbrConnectorsStyle(data)}}></div>
+                      </div>
+                  )}
+
+                  {model.nbrClockMax > 0 && (
+                      <div className="nbr-clocks">
+                        <div style={{ ...nbrClocksStyle(data)}}></div>
+                      </div>
+                  )}
                </div>
-              )}
+            </OverlayTrigger>
+            )}

-              {model.nbrClockMax > 0 && (
-                <div className="nbr-clocks">
-                  <div style={{ ...nbrClocksStyle(data)}}></div>
-                </div>
-              )}
-
-              {/* progress info when mouse over */}
-              {render_progress}
-            </div>

          </div>
        )}
@ -820,32 +794,28 @@ class Cart extends React.PureComponent {
  static get propTypes() {
    return {
      isMobile: PropTypes.bool,
+      isTouch: PropTypes.bool,
      nbrSlots: PropTypes.number,
      itemHovered: PropTypes.string,
      data: PropTypes.object.isRequired,
-      onToggleProgress: PropTypes.func,
-      onToggleWarning: PropTypes.func,
      onToggleOverlayRemove: PropTypes.func,
      onClickRemoveItem: PropTypes.func,
+      onClickItem: PropTypes.func,
    };
  }

  render() {
    const {
      isMobile,
+      isTouch,
      nbrSlots,
      itemHovered,
      data,
-      onToggleProgress,
-      onToggleWarning,
      onToggleOverlayRemove,
      onClickRemoveItem,
+      onClickItem,
    } = this.props;

-    const nbrOccupied = nbrOccupiedSlotsInCrate(data.items);
-
-    const shouldTooltipWarningClassInverted = nbrSlots - nbrOccupied < 5;
-
    const products = data.items.map((item, index) => {
      let itemData;
      if (data.itemsData && index in data.itemsData) {
@ -854,15 +824,14 @@ class Cart extends React.PureComponent {
      return (
        <ProductCartItem
            isMobile={isMobile}
+            isTouch={isTouch}
            hovered={item.id === itemHovered}
            key={item.id}
            index={index}
            data={itemData}
-            shouldTooltipWarningClassInverted={shouldTooltipWarningClassInverted && index > 10}
-            onToggleProgress={onToggleProgress}
-            onToggleWarning={onToggleWarning}
            onToggleOverlayRemove={onToggleOverlayRemove}
            onClickRemoveItem={onClickRemoveItem}
+            onClickItem={onClickItem}
            model={item}>
        </ProductCartItem>
      );
@ -1261,7 +1230,7 @@ class OrderForm extends React.PureComponent {

          <textarea
              onChange={handleNote}
-              value={note}
+              defaultValue={note}
              rows="5"
              placeholder="Additional notes" />

@ -1269,7 +1238,7 @@ class OrderForm extends React.PureComponent {
            <input
              className="btn btn-outline-primary w-100 m-0 mb-2 mb-sm-0 me-sm-2"
              style={{'cursor': 'pointer', 'fontWeight': '700'}}
-              value="Show JSON"
+              defaultValue="Show JSON"
              onClick={onClickShow} />

            <input className="btn btn-primary w-100 m-0 ms-sm-2" type="submit" value={`${isProcessing ? 'Processing ...' : 'Request quote'}`} />
@ -1620,11 +1589,10 @@ class Shop extends React.PureComponent {
    this.handleMouseLeaveItem = this.handleMouseLeaveItem.bind(this);
    this.handleClickAddItem = this.handleClickAddItem.bind(this);
    this.checkAlerts = this.checkAlerts.bind(this);
-    this.handleToggleItemProgress = this.handleToggleItemProgress.bind(this);
-    this.handleToggleItemWarning = this.handleToggleItemWarning.bind(this);
    this.handleClickSelectItem = this.handleClickSelectItem.bind(this);
    this.handleClickSubmit = this.handleClickSubmit.bind(this);
    this.handleToggleOverlayRemove = this.handleToggleOverlayRemove.bind(this);
+    this.handleShowOverlayRemove = this.handleShowOverlayRemove.bind(this);
    this.handleClickToggleMobileSideMenu = this.handleClickToggleMobileSideMenu.bind(this);
    this.handleClickCloseRFQFeedback = this.handleClickCloseRFQFeedback.bind(this);
    this.handleClickShowOrder = this.handleClickShowOrder.bind(this);
@ -1632,6 +1600,7 @@ class Shop extends React.PureComponent {
    this.handleLoadCustomConf = this.handleLoadCustomConf.bind(this);

    this.timer = null;
+    this.timer_remove = null;
  }

  componentDidMount() {
@ -1748,50 +1717,6 @@ class Shop extends React.PureComponent {
    }, tap);
  }

-  handleToggleItemProgress(index, show) {
-    const itemsCloned = Array.from(this.state.columns.cart.items);
-
-    this.setState({
-      ...this.state,
-      columns: {
-        ...this.state.columns,
-        cart: {
-          ...this.state.columns.cart,
-          items: itemsCloned.map((item, i) => {
-            return {
-              ...item,
-              showProgress: i === index ? show : false,
-              showOverlayRemove: false,
-              showWarning: false,
-            };
-          }),
-        }
-      },
-    });
-  }
-
-  handleToggleItemWarning(index, show) {
-    const itemsCloned = Array.from(this.state.columns.cart.items);
-
-    this.setState({
-      ...this.state,
-      columns: {
-        ...this.state.columns,
-        cart: {
-          ...this.state.columns.cart,
-          items: itemsCloned.map((item, i) => {
-            return {
-              ...item,
-              showWarning: i === index ? show : false,
-              showProgress: false,
-              showOverlayRemove: false,
-            };
-          }),
-        }
-      },
-    });
-  }
-
  handleClickSelectItem(index) {
    const itemsCloned = Array.from(this.state.columns.cart.items);

@ -1821,9 +1746,7 @@ class Shop extends React.PureComponent {
          items: itemsCloned.map((item, id) => {
            return {
              ...item,
-              showOverlayRemove: id === index ? show : false,
-              showProgress: false,
-              showWarning: false,
+              showOverlayRemove: id === index ? show : false
            };
          }),
        }
@ -1831,6 +1754,17 @@ class Shop extends React.PureComponent {
    });
  }

+  handleShowOverlayRemove(index) {
+    if (this.timer_remove)
+      clearTimeout(this.timer_remove);
+
+    this.handleToggleOverlayRemove(index, true);
+
+    this.timer_remove = setTimeout(() => {
+      this.handleToggleOverlayRemove(index, false);
+    }, 2000);
+  }
+
  handleClickShowOrder() {
    const crate = {
      items: [],
@ -2364,6 +2298,7 @@ class Shop extends React.PureComponent {
    } = this.state;

    const isMobile = window.deviceIsMobile();
+    const isTouch = window.isTouchEnabled();

    return (
      <DragDropContext onDragEnd={this.handleOnDragEnd}>
@ -2411,11 +2346,11 @@ class Shop extends React.PureComponent {
                              nbrSlots={crateModeSlots[currentMode]}
                              data={columns['cart']}
                              isMobile={isMobile}
+                              isTouch={isTouch}
                              itemHovered={currentItemHovered}
-                              onToggleProgress={this.handleToggleItemProgress}
-                              onToggleWarning={this.handleToggleItemWarning}
                              onToggleOverlayRemove={this.handleToggleOverlayRemove}
-                              onClickRemoveItem={this.handleDeleteItem}>
+                              onClickRemoveItem={this.handleDeleteItem}
+                              onClickItem={this.handleShowOverlayRemove}>
                          </Cart>
                        }
                        rules={Object.values(rules).filter(rule => rule)}>
--- a/templates/page-place-order.html
+++ b/templates/page-place-order.html
@ -31,7 +31,15 @@
        return window.innerWidth < 768;
      }

+      function isTouchEnabled() {
+        return ('ontouchstart' in window) ||
+               (navigator.maxTouchPoints > 0) ||
+               (navigator.msMaxTouchPoints > 0);
+      }
+
+
      window.deviceIsMobile = deviceIsMobile;
+      window.isTouchEnabled = isTouchEnabled;
    })();
  </script>

--- a/templates/publications.html
+++ b/templates/publications.html
@ -0,0 +1,44 @@
+{% extends 'page.html' %}
+
+{% block main %}
+
+<main class="container {% block maincss %}{% endblock %}">
+
+    <div class="row">
+        {% block main_content %}
+            {% if page and page.content %}
+                {{ page.content | safe }}
+            {% endif %}
+            <div class="container">
+                <div class="row row-cols-1 row-cols-md-3 g-4">
+                {% set publications = load_data(path=page.extra.data, format="yaml") -%}
+                {% for publication in publications %}
+                    <div class="col">
+                        <div class="card shadow h-100" >
+                            <div class="card-body">
+                                <strong class="card-title">{{ publication.title }}</strong>
+                                <p class="card-text">{{ publication.authors }}</p>
+                            </div>
+                            <div class="card-footer border-light-subtle">
+                                {% for link in publication.links %}
+                                    {% if link.path %}
+                                        <a href="{{link.path}}" class="card-link">{{link.name}}</a>
+                                    {% else %}
+                                        <div class="card-link d-inline">{{link.name}}</div>
+                                    {% endif %}
+                                {% endfor %}
+                            </div>
+                        </div>
+                    </div>
+                {% endfor %}
+                </div>
+            </div>
+        {% endblock %}
+    </div>
+
+
+</main>
+
+{% block outside %}{% endblock %}
+
+{% endblock %}
Author	SHA1	Message	Date
Egor Savkin	a5b217c183	Fix hover logic on touchables * fix cards removal * fix cards progress bar overlay * fix cards warning overlay Signed-off-by: Egor Savkin <es@m-labs.hk>	2023-11-07 14:59:20 +08:00
Egor Savkin	bd33946b0e	Use thin spaces between initials Signed-off-by: Egor Savkin <es@m-labs.hk>	2023-10-26 10:28:41 +08:00
Egor Savkin	b88e6bc485	Refactor publications section and layout them as cards Signed-off-by: Egor Savkin <es@m-labs.hk>	2023-10-26 10:28:21 +08:00