Appview/pages: decrease spacing between languages in repo summary #856

merged

opened by

jensroemer.com 1 week ago targeting master from jensroemer.com/core: appview-pages-decrease-spacing-between-languages-in-repo-summary

As the title suggests. Currently the language icons have flex-grow, which means they position themselves to take up the full width of the container, which unfortunately makes for awkward readability in most cases. Afaik the description field doesn't allow uploading of images, but you can see the suggestion on discord here. After this change they would just render with the 14 px gap in-between (wrap to second line on overflow, which looks fine too).

options

unified split

Changed files

+1 -1

appview

pages

templates

repo

index.html

+1 -1

appview/pages/templates/repo/index.html

···

       47
        
             <div class="px-4 py-2 border-b border-gray-200 dark:border-gray-600 flex items-center gap-4 flex-wrap">

     

       48
        
               {{ range $value := .Languages }}

     

       49
        
               <div

     

       50
       -
                 class="flex flex-grow items-center gap-2 text-xs align-items-center justify-center"

     

       51
        
               >

     

       52
        
                 {{ template "repo/fragments/colorBall" (dict "color" (langColor $value.Name)) }}

     

       53
        
                 <div>{{ or $value.Name "Other" }}

···

       47
        
             <div class="px-4 py-2 border-b border-gray-200 dark:border-gray-600 flex items-center gap-4 flex-wrap">

     

       48
        
               {{ range $value := .Languages }}

     

       49
        
               <div

     

       50
       +
                 class="flex items-center gap-2 text-xs align-items-center justify-center"

     

       51
        
               >

     

       52
        
                 {{ template "repo/fragments/colorBall" (dict "color" (langColor $value.Name)) }}

     

       53
        
                 <div>{{ or $value.Name "Other" }}