Update styling

iwanalabs · Feb 2, 2024 · 25efd1a · 25efd1a
1 parent 00bdf4f
commit 25efd1a
Show file tree

Hide file tree

Showing 15 changed files with 89 additions and 7 deletions.
diff --git a/src/components/component_tabs/component_tabs.html b/src/components/component_tabs/component_tabs.html
@@ -3,7 +3,7 @@
     <div class="w-full md:w-1/2 mx-auto my-10 flex flex-col items-center px-4">
         <h1 class="text-center text-4xl font-bold mt-20">{{ title }}</h1>
         <p class="text-center font-light">{{ description }}</p>
-        <div class="w-full flex flex-col items-center">{% slot "component_code" %} {% endslot %}</div>
+        <div class=" w-full flex flex-col items-center mt-6">{% slot "component_code" %} {% endslot %}</div>
     </div>
     <div class="px-8 py-12 lg:py-8 flex flex-col items-center min-h-screen w-full lg:mt-0 lg:w-1/2 bg-slate-100">
         <div class="w-full flex flex-col gap-2 items-center sm:flex sm:flex-row sm:items-start justify-between lg:mt-20">

diff --git a/src/static/output/style.css b/src/static/output/style.css
diff --git a/src/staticfiles/component_tabs/component_tabs.28d0d597d814.html b/src/staticfiles/component_tabs/component_tabs.28d0d597d814.html
@@ -0,0 +1,50 @@
+{% load static %}
+<div class="flex flex-col items-center lg:items-start lg:flex-row lg:justify-between">
+    <div class="w-full md:w-1/2 mx-auto my-10 flex flex-col items-center px-4">
+        <h1 class="text-center text-4xl font-bold mt-20">{{ title }}</h1>
+        <p class="text-center font-light">{{ description }}</p>
+        <div class=" w-full flex flex-col items-center mt-6">{% slot "component_code" %} {% endslot %}</div>
+    </div>
+    <div class="px-8 py-12 lg:py-8 flex flex-col items-center min-h-screen w-full lg:mt-0 lg:w-1/2 bg-slate-100">
+        <div class="w-full flex flex-col gap-2 items-center sm:flex sm:flex-row sm:items-start justify-between lg:mt-20">
+            <div>
+                <label for="tabs" class="sr-only">Select a file</label>
+                <select id="tabs"
+                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                    {% for file in files %}
+                        <option value="button-{{ forloop.counter }}"
+                                id="button-{{ forloop.counter }}"
+                                data-target="content-{{ forloop.counter }}">{{ file.name }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+            <a href="{{ full_code_url }}"
+               class="btn-primary flex flex-row items-center gap-2 whitespace-nowrap"
+               target="_blank"
+               rel="noopener noreferrer">
+                <svg class="w-[16px] h-[16px] text-white-600 dark:text-slate-800"
+                     aria-hidden="true"
+                     xmlns="http://www.w3.org/2000/svg"
+                     fill="none"
+                     viewBox="0 0 24 24">
+                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 14v4.8a1.2 1.2 0 0 1-1.2 1.2H5.2A1.2 1.2 0 0 1 4 18.8V7.2A1.2 1.2 0 0 1 5.2 6h4.6m4.4-2H20v5.8m-7.9 2L20 4.2" />
+                </svg>
+            Source code</a>
+        </div>
+        <div class="w-full">
+            {% for file in files %}
+                <div id="content-{{ forloop.counter }}"
+                     role="tabpanel"
+                     class="tab-content"
+                     aria-labelledby="button-{{ forloop.counter }}">
+                    {# djlint: off #}
+                    <pre class="language-python line-numbers" 
+                         {% if file.lines %}data-range="{{ file.lines.0 }}, {{ file.lines.1 }}"{% endif %} 
+                         data-src="{% static ''|add:file.path %}">
+                    </pre>
+                    {# djlint:  on #}
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+</div>
diff --git a/src/staticfiles/component_tabs/component_tabs.28d0d597d814.html.gz b/src/staticfiles/component_tabs/component_tabs.28d0d597d814.html.gz
diff --git a/src/staticfiles/component_tabs/component_tabs.html b/src/staticfiles/component_tabs/component_tabs.html
@@ -3,7 +3,7 @@
     <div class="w-full md:w-1/2 mx-auto my-10 flex flex-col items-center px-4">
         <h1 class="text-center text-4xl font-bold mt-20">{{ title }}</h1>
         <p class="text-center font-light">{{ description }}</p>
-        <div class="w-full flex flex-col items-center">{% slot "component_code" %} {% endslot %}</div>
+        <div class=" w-full flex flex-col items-center mt-6">{% slot "component_code" %} {% endslot %}</div>
     </div>
     <div class="px-8 py-12 lg:py-8 flex flex-col items-center min-h-screen w-full lg:mt-0 lg:w-1/2 bg-slate-100">
         <div class="w-full flex flex-col gap-2 items-center sm:flex sm:flex-row sm:items-start justify-between lg:mt-20">

diff --git a/src/staticfiles/component_tabs/component_tabs.html.gz b/src/staticfiles/component_tabs/component_tabs.html.gz
diff --git a/src/staticfiles/infinite_scroll/tbody.02a65ee11b28.py b/src/staticfiles/infinite_scroll/tbody.02a65ee11b28.py
@@ -0,0 +1,33 @@
+from django.core.paginator import Paginator
+from django_components import component
+
+from app.models import Contact
+
+
+@component.register("tbody_infinite_scroll")
+class TBodyInfiniteScrollComponent(component.Component):
+    template = """
+        {% for contact in page_obj %}
+            <tr class="tr"
+            {% if forloop.last and page_obj.has_next %} 
+                hx-get="{% url 'tbody_infinite_scroll' page=page_obj.next_page_number %}"
+                hx-trigger="revealed"
+                hx-swap="afterend"
+            {% endif %}
+            > 
+                <td class="td">{{ contact.id }}</td>
+                <td class="td">{{ contact.first_name }} {{ contact.last_name }}</td>
+                <td class="td">{{ contact.email }}</td>
+                <td class="td">{{ contact.status }}</td>
+            </tr>
+        {% endfor %}
+    """
+
+    def get_context_data(self, page_obj, **kwargs):
+        return {"page_obj": page_obj}
+
+    def get(self, request, page, **kwargs):
+        paginator = Paginator(Contact.objects.order_by("id"), 10)
+        page_obj = paginator.get_page(page)
+        context = {"page_obj": page_obj}
+        return self.render_to_response(context)
diff --git a/src/staticfiles/infinite_scroll/tbody.02a65ee11b28.py.gz b/src/staticfiles/infinite_scroll/tbody.02a65ee11b28.py.gz
diff --git a/src/staticfiles/infinite_scroll/tbody.py b/src/staticfiles/infinite_scroll/tbody.py
@@ -1,4 +1,3 @@
-import time
 from django.core.paginator import Paginator
 from django_components import component
 
@@ -29,7 +28,6 @@ def get_context_data(self, page_obj, **kwargs):
 
     def get(self, request, page, **kwargs):
         paginator = Paginator(Contact.objects.order_by("id"), 10)
-        time.sleep(1)  # Simulate a slow response
         page_obj = paginator.get_page(page)
         context = {"page_obj": page_obj}
         return self.render_to_response(context)
diff --git a/src/staticfiles/infinite_scroll/tbody.py.gz b/src/staticfiles/infinite_scroll/tbody.py.gz
diff --git a/src/staticfiles/staticfiles.json b/src/staticfiles/staticfiles.json
diff --git a/src/staticfiles/style.8907c8ae0e4d.css b/src/staticfiles/style.8907c8ae0e4d.css
diff --git a/src/staticfiles/style.8907c8ae0e4d.css.gz b/src/staticfiles/style.8907c8ae0e4d.css.gz
diff --git a/src/staticfiles/style.css b/src/staticfiles/style.css
diff --git a/src/staticfiles/style.css.gz b/src/staticfiles/style.css.gz