code to allow for modals (#1301)

Code to allow a modal be popped up using a
displayModal(height,width,src) function.

This would be called on an onclick attribute in an <a> tag (this way it
will skip it and just redirect if the user's javascript is off)

![Screenshot 2024-09-30 at 12 12
40 PM](https://github.com/user-attachments/assets/585ce2eb-65f6-46b0-9213-61e692b072f1)
![Screenshot 2024-09-30 at 12 13
15 PM](https://github.com/user-attachments/assets/0b8b64da-9b18-411d-8568-1c1b828c3459)

static/css/components.css

@@ -0,0 +1,72 @@
+:root {
+ --modalWidth: 70vw;
+ --modalHeight: 70vh;
+ --light-modal-background: rgba(240,240,240,0.7);
+ --dark-modal-background: rgba(0,0,0,0.7);
+}
+
+html {
+ --modal-background: var(--light-modal-background);
+}
+
+html.dark {
+ --modal-background: var(--dark-modal-background);
+}
+
+.modal-overlay {
+ transition-property: opacity;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-duration: 150ms;
+ width: 100vw;
+ height: 100vh;
+ position: fixed;
+ top: 0;
+ left: 0;
+ background-color: var(--modal-background);
+ align-items: center;
+ justify-content: center;
+ display: none;
+ z-index: 1010;
+}
+
+.modal-content {
+ width: var(--modalWidth);
+ height: var(--modalHeight);
+ margin: 0;
+ padding: 1rem;
+ border-radius: 0.5rem;
+ border: 2px solid var(--primary-color);
+ box-shadow: 0 10px 15px -3px rgba(0,0,0,.2),0 4px 6px -4px rgba(0,0,0,.2);
+ background-color: var(--card-color);
+ position: relative;
+}
+
+.modal-confirm {
+ width: auto;
+ height: auto;
+ padding: 2rem;
+}
+
+.modal-close {
+ color: var(--text-color);
+ position: absolute;
+ top: .75rem;
+ right: 1rem;
+ cursor: pointer;
+}
+
+.show-modal {
+ display: flex;
+}
+
+/* standard button CSS */
+/* a primary solid button should only be seen once on a page for a promary action to be made on that page. */
+.primary-button-solid {
+@apply py-3 px-8 text-sm text-base font-medium text-white uppercase rounded-lg border md:py-1 md:px-4 md:text-lg bg-orange hover:bg-orange/80 border-orange dark:text-slate dark:hover:text-charcoal hover:drop-shadow-md
+
+}
+/* standard button CSS */
+.primary-button-outline {
+@apply py-3 px-8 text-sm text-base font-medium text-white capitalize rounded-lg border md:py-1 md:px-4 md:text-lg text-orange border-orange dark:bg-slate dark:hover:bg-charcoal dark:text-white hover:drop-shadow-md
+
+}

templates/account/signup.html

@@ -54,6 +54,7 @@ <h1 class="text-4xl text-center">{% trans "Sign Up" %}</h1>
  href="terms-of-use"
  target="_blank"
  class="text-sky-600 dark:text-sky-300 hover:text-orange dark:hover:text-orange mx-1"
+ onclick="displayModal('70vh','70vw', '../../terms-of-use/?=noheader')"
  >Terms of Use</a
  >
  for this service.

templates/base.html

@@ -34,6 +34,7 @@
  <script src="{% static 'js/boost-gecko/main.062e4862.js' %}" defer></script>
  {% block extra_head %}
  <link href="{% static 'css/styles.css' %}" rel="stylesheet" />
+ <link href="{% static 'css/components.css' %}" rel="stylesheet" />
  <link rel="preload" as="style" href="{% static 'css/fonts.css' %}" rel="stylesheet" />
  {% endblock %}
 
@@ -48,6 +49,7 @@
  });
  }"
  class="h-screen bg-gray-200 dark:bg-black" {% block body_id %}{% endblock %}>
+ <div class="modal-overlay" id="modalOverlay"><div class="modal-content"><iframe src="" id="modalFrame" class="w-full h-full rounded-xl m-0 p-0"></iframe><div class="modal-close" id="modalClose" onclick="closeModal()"><i class="fa-solid fa-xmark fa-lg"></i></div></div></div>
  <div class="max-w-7xl md:px-3 mx-auto transition-all">
  {% block content_header %}
  {% include "includes/_header.html" %}
@@ -70,6 +72,32 @@
 
  {% block footer_js %}{% endblock %}
 
+ <script>
+ var r = document.querySelector(':root');
+
+ function modalSize(h,w) {
+ var rs = getComputedStyle(r);
+ r.style.setProperty('--modalWidth', w);
+ r.style.setProperty('--modalHeight', h);
+ }
+
+ /********* Function to open modal ***********/
+ function displayModal(height,width,src) {
+ event.preventDefault()
+ let modal = document.getElementById('modalOverlay');
+ modal.classList.add('show-modal');
+ modalSize(height,width);
+ let modalframe = document.getElementById('modalFrame');
+ modalframe.setAttribute("src", src);
+ }
+
+ function closeModal() {
+ let modal = document.getElementById('modalOverlay');
+ modal.classList.remove('show-modal');
+ }
+
+ </script>
+
  </body>
 
 </html>

templates/libraries/_library_list_item.html

@@ -23,7 +23,7 @@ <h3 class="pb-2 text-xl md:text-2xl capitalize border-b border-gray-700">
  <div class="mb-3 pb-3">
  <p class="mb-3 text-gray-700 dark:text-gray-300">{{ library.description }}</p>
  </div>
- <div class="text-sm flex py-3 bottom-3 absolute w-full md:w-[90%]">
+ <div class="text-sm flex py-3 bottom-3 absolute w-full md:w-11/12">
  <div >
  <span class="flex justify-center py-0 px-2 text-sm font-bold text-gray-600 rounded-full border dark:text-gray-300 bg-green/40 border-green/60 dark:bg-green/40 tabular-nums"
  title="C++ Version {% if library.cpp_standard_minimum and library.cpp_standard_minimum != 'None' %}{{ library.cpp_standard_minimum }}{% else %}03{% endif %} or Later">