feat(memberships): tweaks for a list of memberships

esnvutbrno · Nov 13, 2023 · 2226130 · 2226130
1 parent a1e213c
commit 2226130
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/fiesta/apps/accounts/templates/accounts/memberships/membership_list.html b/fiesta/apps/accounts/templates/accounts/memberships/membership_list.html
@@ -4,8 +4,8 @@ <h1 class="card-title">My Memberships</h1>
 <ul role="list" class="divide-y divide-gray-200">
   {% for membership in memberships %}
     <li class="py-3 sm:py-4">
-      <div class="flex items-center space-x-4">
-        <div class="flex-shrink-0 w-1/4 flex flex-col items-center justify-center">
+      <div class="flex flex-row flex-wrap items-center md:space-x-4">
+        <div class="flex-shrink-0 order-4 md:order-2 grow md:grow-0 flex flex-col justify-center items-end md:justify-center">
           {% if membership == request.membership %}
             <svg class="w-8 h-8 text-lime-500"
                  fill="none"
@@ -17,19 +17,21 @@ <h1 class="card-title">My Memberships</h1>
             </svg>
           {% elif membership.state == membership.State.ACTIVE %}
             {% section_membership_activation_url membership as activation_url %}
-            <a href="{{ activation_url }}" type="button" class="btn btn-success">jump in</a>
+            <a href="{{ activation_url }}"
+               type="button"
+               class="btn btn-md btn-success">jump in</a>
           {% endif %}
         </div>
-        <div class="flex-shrink-0">
+        <div class="flex-shrink-0 hidden md:block md:order-3">
           <svg class="w-8 h-8 rounded-full">
             <use href="{% static "esn-star-color.svg" %}#esn-star-color"></use>
           </svg>
         </div>
-        <div class="flex-1 min-w-0">
+        <div class="md:flex-1 min-w-0 w-full md:w-auto order-1 md:order-4">
           <p class="text-sm font-medium text-base-content truncate">{{ membership.section }}</p>
           <p class="text-sm text-gray-500 truncate">{{ membership.get_role_display }}</p>
         </div>
-        <div class="inline-flex items-end flex-col">
+        <div class="inline-flex flex-col md:items-end items-start order-3 md:order-5 grow md:grow-0">
           <span class="text-sm font-semibold text-base-content">{{ membership.get_state_display }}</span>
           {% if membership.state == membership.State.INACTIVE %}
             <span class="text-xs text-base-content">waiting for confirmation</span>

diff --git a/fiesta/apps/accounts/templates/accounts/memberships/my_memberships.html b/fiesta/apps/accounts/templates/accounts/memberships/my_memberships.html
@@ -1,4 +1,4 @@
-{% extends "fiesta/base-variants/center-card-lg.html" %}
+{% extends "fiesta/base-variants/center-card-sm.html" %}
 
 {% load breadcrumbs %}
 {% load i18n %}