Mobile card fix

totem-technologies · Oct 24, 2023 · 798edbc · 798edbc
1 parent 3bfb293
commit 798edbc
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 18 deletions.
diff --git a/assets/js/components/card.js b/assets/js/components/card.js
@@ -32,7 +32,7 @@ function Card(props) {
     </a>
   )
   return (
-    <div class="relative max-w-[300px] overflow-clip rounded-3xl border border-gray-200 bg-white shadow transition-shadow hover:shadow-xl">
+    <div class="relative overflow-clip rounded-3xl border border-gray-200 bg-white shadow transition-shadow hover:shadow-xl sm:max-w-[300px]">
       {image}
       <div class="p-5">
         <div class="flex flex-col">

diff --git a/totem/circles/templates/circles/_event_card.html b/totem/circles/templates/circles/_event_card.html
@@ -1,12 +1,14 @@
 {% load avatar %}
-<t-card class="sm:m-0 m-auto"
-{% if event.circle.image %}image="{{ event.circle.image.url }}"{% endif %}
-href="{% url "circles:event_detail" event_slug=event.slug %}">
-<span slot="title">{{ event.circle.title|truncatechars:23 }}</span>
-<span slot="description">By {{ event.circle.author.name.split.0 }}</span>
-<span slot="buttonText">Join</span>
-<span slot="avatar">{% avatar event.circle.author %}</span>
-<span slot="start">{{ event.start|date:'M jS' }} @
-    <span>{{ event.start|date:'P T' }}</span>
-</span>
-</t-card>
+<div class="w-full">
+    <t-card class="sm:m-0 m-auto"
+    {% if event.circle.image %}image="{{ event.circle.image.url }}"{% endif %}
+    href="{% url "circles:event_detail" event_slug=event.slug %}">
+    <span slot="title">{{ event.circle.title|truncatechars:23 }}</span>
+    <span slot="description">By {{ event.circle.author.name.split.0 }}</span>
+    <span slot="buttonText">Join</span>
+    <span slot="avatar">{% avatar event.circle.author %}</span>
+    <span slot="start">{{ event.start|date:'M jS' }} @
+        <span>{{ event.start|date:'P T' }}</span>
+    </span>
+    </t-card>
+</div>
diff --git a/totem/static/css/styles.css b/totem/static/css/styles.css
diff --git a/totem/static/js/app.min.js b/totem/static/js/app.min.js
diff --git a/totem/static/js/app.min.js.map b/totem/static/js/app.min.js.map
diff --git a/totem/users/templates/users/dashboard/_recommended.html b/totem/users/templates/users/dashboard/_recommended.html
@@ -3,8 +3,7 @@
     <strong>
         <h3 class="pb-3" id="recommended">Recommended Circles</h3>
     </strong>
-    <ul role="list"
-        class="grid sm:grid-cols-2 grid-cols-1 gap-6 pb-5 md:grid-cols-3">
+    <ul role="list" class="grid sm:grid-cols-2 grid-cols-1 gap-6 pb-5">
         {% for event in recommended_events %}
             {% include "circles/_event_card.html" with event=event only %}
         {% empty %}