appview/pages: introduce "tinyAvatarList" template #862

merged

opened by

oppi.li 1 week ago targeting master from op/rkowwwsvpoqx

given a list of DIDs, this forms a list of profile pictures capped at 5 profile pictures. this component will be used to represent a collection of users (e.g.: participants, coauthors).

Signed-off-by: oppiliappan me@oppi.li

options

unified split

Changed files

+23 -16

appview

pages

templates

fragments

tinyAvatarList.html

repo

fragments

participants.html

+22

appview/pages/templates/fragments/tinyAvatarList.html

···

       1
       +
       {{ define "fragments/tinyAvatarList" }}

     

       2
       +
         {{ $all := .all }}

     

       3
       +
         {{ $classes := .classes }}

     

       4
       +
         {{ $ps := take $all 5 }}

     

       5
       +
         <div class="inline-flex items-center -space-x-3">

     

       6
       +
           {{ $c := "z-50 z-40 z-30 z-20 z-10" }}

     

       7
       +
           {{ range $i, $p := $ps }}

     

       8
       +
             <img

     

       9
       +
                 src="{{ tinyAvatar . }}"

     

       10
       +
                 alt=""

     

       11
       +
                 class="rounded-full size-8 mr-1 border-2 border-gray-100 dark:border-gray-900 z-{{sub 5 $i}}0 {{ $classes }}"

     

       12
       +
             />

     

       13
       +
           {{ end }}

     

       14
       +
       

     

       15
       +
           {{ if gt (len $all) 5 }}

     

       16
       +
             <span class="pl-4 text-gray-500 dark:text-gray-400 text-sm">

     

       17
       +
               +{{ sub (len $all) 5 }}

     

       18
       +
             </span>

     

       19
       +
           {{ end }}

     

       20
       +
         </div>

     

       21
       +
       {{ end }}

     

       22
       +

+1 -16

appview/pages/templates/repo/fragments/participants.html

···

       6
        
             <span class="font-bold text-gray-500 dark:text-gray-400 capitalize">Participants</span>

     

       7
        
             <span class="bg-gray-200 dark:bg-gray-700 rounded py-1/2 px-1 ml-1">{{ len $all }}</span>

     

       8
        
           </div>

     

       9
       -
           <div class="flex items-center -space-x-3 mt-2">

     

       10
       -
             {{ $c := "z-50 z-40 z-30 z-20 z-10" }}

     

       11
       -
             {{ range $i, $p := $ps }}

     

       12
       -
               <img

     

       13
       -
                   src="{{ tinyAvatar . }}"

     

       14
       -
                   alt=""

     

       15
       -
                   class="rounded-full h-8 w-8 mr-1 border-2 border-gray-100 dark:border-gray-900 z-{{sub 5 $i}}0"

     

       16
       -
               />

     

       17
       -
             {{ end }}

     

       18
       -
       

     

       19
       -
             {{ if gt (len $all) 5 }}

     

       20
       -
               <span class="pl-4 text-gray-500 dark:text-gray-400 text-sm">

     

       21
       -
                 +{{ sub (len $all) 5 }}

     

       22
       -
               </span>

     

       23
       -
             {{ end }}

     

       24
       -
           </div>

     

       25
        
         </div>

     

       26
        
       {{ end }}

···

       6
        
             <span class="font-bold text-gray-500 dark:text-gray-400 capitalize">Participants</span>

     

       7
        
             <span class="bg-gray-200 dark:bg-gray-700 rounded py-1/2 px-1 ml-1">{{ len $all }}</span>

     

       8
        
           </div>

     

       9
       +
           {{ template "fragments/tinyAvatarList" (dict "all" $all "classes" "w-8 h-8") }}

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       10
        
         </div>

     

       11
        
       {{ end }}