Improve home stats for small devices

Signed-off-by: Cintia Sánchez García <[email protected]>

Author: cynthia-sg

ocg-server/static/js/community/explore/map.js

@@ -59,8 +59,7 @@ export class Map {
       this.map.remove();
     });
 
-    // Setting the position of the map: lat/long and zoom level
-    // TODO - Get the user's location and set the map to that location
+    // Center map view
     this.map.setView([0, 0], 0);
 
     // Adding the base layer to the map

ocg-server/templates/community/home/stats.html

@@ -1,25 +1,25 @@
 {# Stats -#}
-<div class="flex flex-col justify-around items-center border rounded-lg p-10 mt-8 sm:mt-16 sm:mb-6 md:flex-row">
+<div class="w-3/4 flex flex-col justify-around items-center border rounded-lg p-6 mt-8 mx-auto sm:mt-16 sm:mb-6 lg:p-10 md:flex-row md:w-full">
   {# Group stats -#}
   {% call stat_block(kind = "groups", title = "Groups", value = groups) %}
   {# End group stats -#}
 
-  <div class="block w-[50px] min-w-[1em] h-0.5 align-center bg-neutral-200 lg:hidden"></div>
-  <div class="hidden h-[50px] min-h-[1em] w-0.5 self-stretch bg-neutral-200 lg:inline-block"></div>
+  <div class="block w-[50px] min-w-[1em] h-0.5 align-center bg-neutral-200 my-5 md:hidden"></div>
+  <div class="hidden h-[50px] min-h-[1em] w-0.5 self-stretch bg-neutral-200 md:inline-block"></div>
 
   {# Members stats -#}
   {% call stat_block(kind = "members", title = "Members", value = groups_members) %}
   {# End members stats -#}
 
-  <div class="block w-[50px] min-w-[1em] h-0.5 align-center bg-neutral-200 lg:hidden"></div>
-  <div class="hidden h-[50px] min-h-[1em] w-0.5 self-stretch bg-neutral-200 lg:inline-block"></div>
+  <div class="block w-[50px] min-w-[1em] h-0.5 align-center bg-neutral-200 my-5 md:hidden"></div>
+  <div class="hidden h-[50px] min-h-[1em] w-0.5 self-stretch bg-neutral-200 md:inline-block"></div>
 
   {# Events stats -#}
   {% call stat_block(kind = "events", title = "Events", value = events) %}
   {# End events stats -#}
 
-  <div class="block w-[50px] min-w-[1em] h-0.5 align-center bg-neutral-200 lg:hidden"></div>
-  <div class="hidden h-[50px] min-h-[1em] w-0.5 self-stretch bg-neutral-200 lg:inline-block"></div>
+  <div class="block w-[50px] min-w-[1em] h-0.5 align-center bg-neutral-200 my-5 md:hidden"></div>
+  <div class="hidden h-[50px] min-h-[1em] w-0.5 self-stretch bg-neutral-200 md:inline-block"></div>
 
   {# Attendees stats -#}
   {% call stat_block(kind = "attendees", title = "Attendees", value = events_attendees) %}
@@ -43,7 +43,7 @@
         {# End title -#}
 
         {# Value -#}
-        <div class="text-4xl font-semibold text-gray-900">{{ *value|num_fmt }}</div>
+        <div class="text-2xl font-semibold text-gray-900 lg:text-4xl">{{ *value|num_fmt }}</div>
         {# End value -#}
       </div>
     </div>