patch of appview/pages: prevent action button overflow in timeline cards · round #0 · pull #596 · tangled.org/core

+1

appview/pages/pages.go

···

       484
       484
        
       

     

       485
       485
        
       type FollowCard struct {

     

       486
       486
        
       	UserDid        string

     

       487
       487
       +
       	LoggedInUser   *oauth.User

     

       487
       488
        
       	FollowStatus   models.FollowStatus

     

       488
       489
        
       	FollowersCount int64

     

       489
       490
        
       	FollowingCount int64

+10 -33

appview/pages/templates/timeline/fragments/timeline.html

···

       82
       82
        
         {{ $event := index . 1 }}

     

       83
       83
        
         {{ $follow := $event.Follow }}

     

       84
       84
        
         {{ $profile := $event.Profile }}

     

       85
       85
       -
         {{ $stat := $event.FollowStats }}

     

       85
       85
       +
         {{ $followStats := $event.FollowStats }}

     

       86
       86
       +
         {{ $followStatus := $event.FollowStatus }}

     

       86
       87
        
       

     

       87
       88
        
         {{ $userHandle :=  resolve $follow.UserDid }}

     

       88
       89
        
         {{ $subjectHandle :=  resolve $follow.SubjectDid }}

     
···

       92
       93
        
             {{ template "user/fragments/picHandleLink" $subjectHandle }}

     

       93
       94
        
             <span class="text-gray-700 dark:text-gray-400 text-xs">{{ template "repo/fragments/time" $follow.FollowedAt }}</span>

     

       94
       95
        
         </div>

     

       95
       95
       -
         <div class="py-4 px-6 drop-shadow-sm rounded bg-white dark:bg-gray-800 flex flex-col md:flex-row md:items-center gap-4">

     

       96
       96
       -
           <div class="flex items-center gap-4 flex-1">

     

       97
       97
       -
             <div class="flex-shrink-0 max-h-full w-24 h-24">

     

       98
       98
       -
               <img alt="" class="object-cover rounded-full p-2" src="{{ fullAvatar $subjectHandle }}" />

     

       99
       99
       -
             </div>

     

       100
       100
       -
       

     

       101
       101
       -
             <div class="flex-1 min-h-0 justify-around flex flex-col">

     

       102
       102
       -
               <a href="/{{ $subjectHandle }}">

     

       103
       103
       -
                 <span class="font-bold dark:text-white overflow-hidden text-ellipsis whitespace-nowrap max-w-full">{{ $subjectHandle | truncateAt30 }}</span>

     

       104
       104
       -
               </a>

     

       105
       105
       -
               {{ with $profile }}

     

       106
       106
       -
                 {{ with .Description }}

     

       107
       107
       -
                   <p class="text-sm pb-2 md:pb-2">{{.}}</p>

     

       108
       108
       -
                 {{ end }}

     

       109
       109
       -
               {{ end }}

     

       110
       110
       -
               {{ with $stat }}

     

       111
       111
       -
                 <div class="text-sm flex items-center gap-2 my-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full">

     

       112
       112
       -
                   <span class="flex-shrink-0">{{ i "users" "size-4" }}</span>

     

       113
       113
       -
                   <span id="followers"><a href="/{{ $subjectHandle }}?tab=followers">{{ .Followers }} followers</a></span>

     

       114
       114
       -
                   <span class="select-none after:content-['·']"></span>

     

       115
       115
       -
                   <span id="following"><a href="/{{ $subjectHandle }}?tab=following">{{ .Following }} following</a></span>

     

       116
       116
       -
                 </div>

     

       117
       117
       -
               {{ end }}

     

       118
       118
       -
             </div>

     

       119
       119
       -
           </div>

     

       120
       120
       -
           

     

       121
       121
       -
           {{ if and $root.LoggedInUser (ne $event.FollowStatus.String "IsSelf") }}

     

       122
       122
       -
             <div class="flex-shrink-0 w-fit ml-auto">

     

       123
       123
       -
               {{ template "user/fragments/follow" (dict "UserDid" $follow.SubjectDid "FollowStatus" $event.FollowStatus) }}

     

       124
       124
       -
             </div>

     

       125
       125
       -
           {{ end }}

     

       126
       126
       -
         </div>

     

       96
       96
       +
         {{ template "user/fragments/followCard" 

     

       97
       97
       +
             (dict

     

       98
       98
       +
                 "LoggedInUser" $root.LoggedInUser

     

       99
       99
       +
                 "UserDid" $follow.SubjectDid

     

       100
       100
       +
                 "Profile" $profile

     

       101
       101
       +
                 "FollowStatus" $followStatus

     

       102
       102
       +
                 "FollowersCount" $followStats.Followers

     

       103
       103
       +
                 "FollowingCount" $followStats.Following) }}

     

       127
       104
        
       {{ end }}

+8 -1

appview/pages/templates/user/followers.html

···

       10
       10
        
         <p class="text-sm font-bold p-2 dark:text-white">ALL FOLLOWERS</p>

     

       11
       11
        
         <div id="followers" class="grid grid-cols-1 gap-4 mb-6">

     

       12
       12
        
           {{ range .Followers }}

     

       13
       13
       -
              {{ template "user/fragments/followCard" . }}

     

       13
       13
       +
              {{ template "user/fragments/followCard"

     

       14
       14
       +
                 (dict

     

       15
       15
       +
                     "LoggedInUser" $.LoggedInUser

     

       16
       16
       +
                     "UserDid" .UserDid

     

       17
       17
       +
                     "Profile" .Profile

     

       18
       18
       +
                     "FollowStatus" .FollowStatus

     

       19
       19
       +
                     "FollowersCount" .FollowersCount

     

       20
       20
       +
                     "FollowingCount" .FollowingCount) }}

     

       14
       21
        
           {{ else }}

     

       15
       22
        
               <p class="px-6 dark:text-white">This user does not have any followers yet.</p>

     

       16
       23
        
           {{ end }}

+8 -1

appview/pages/templates/user/following.html

···

       10
       10
        
         <p class="text-sm font-bold p-2 dark:text-white">ALL FOLLOWING</p>

     

       11
       11
        
         <div id="following" class="grid grid-cols-1 gap-4 mb-6">

     

       12
       12
        
           {{ range .Following }}

     

       13
       13
       -
              {{ template "user/fragments/followCard" . }}

     

       13
       13
       +
              {{ template "user/fragments/followCard"

     

       14
       14
       +
                 (dict

     

       15
       15
       +
                     "LoggedInUser" $.LoggedInUser

     

       16
       16
       +
                     "UserDid" .UserDid

     

       17
       17
       +
                     "Profile" .Profile

     

       18
       18
       +
                     "FollowStatus" .FollowStatus

     

       19
       19
       +
                     "FollowersCount" .FollowersCount

     

       20
       20
       +
                     "FollowingCount" .FollowingCount) }}

     

       14
       21
        
           {{ else }}

     

       15
       22
        
               <p class="px-6 dark:text-white">This user does not follow anyone yet.</p>

     

       16
       23
        
           {{ end }}

+6 -2

appview/pages/templates/user/fragments/follow.html

···

       1
       1
        
       {{ define "user/fragments/follow" }}

     

       2
       2
        
         <button id="{{ normalizeForHtmlId .UserDid }}"

     

       3
       3
       -
           class="btn mt-2 flex gap-2 items-center group"

     

       3
       3
       +
           class="btn w-full flex gap-2 items-center group"

     

       4
       4
        
       

     

       5
       5
        
           {{ if eq .FollowStatus.String "IsNotFollowing" }}

     

       6
       6
        
           hx-post="/follow?subject={{.UserDid}}"

     
···

       12
       12
        
           hx-target="#{{ normalizeForHtmlId .UserDid }}"

     

       13
       13
        
           hx-swap="outerHTML"

     

       14
       14
        
           >

     

       15
       15
       -
           {{ if eq .FollowStatus.String "IsNotFollowing" }}{{ i "user-round-plus" "w-4 h-4" }} follow{{ else }}{{ i "user-round-minus" "w-4 h-4" }} unfollow{{ end }}

     

       15
       15
       +
           {{ if eq .FollowStatus.String "IsNotFollowing" }}

     

       16
       16
       +
             {{ i "user-round-plus" "w-4 h-4" }} follow

     

       17
       17
       +
           {{ else }}

     

       18
       18
       +
             {{ i "user-round-minus" "w-4 h-4" }} unfollow

     

       19
       19
       +
           {{ end }}

     

       16
       20
        
           {{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}

     

       17
       21
        
         </button>

     

       18
       22
        
       {{ end }}

+19 -16

appview/pages/templates/user/fragments/followCard.html

···

       6
       6
        
             <img class="object-cover rounded-full p-2" src="{{ fullAvatar $userIdent }}" />

     

       7
       7
        
           </div>

     

       8
       8
        
       

     

       9
       9
       -
           <div class="flex-1 min-h-0 justify-around flex flex-col">

     

       10
       10
       -
             <a href="/{{ $userIdent }}">

     

       11
       11
       -
               <span class="font-bold dark:text-white overflow-hidden text-ellipsis whitespace-nowrap max-w-full">{{ $userIdent | truncateAt30 }}</span>

     

       12
       12
       -
             </a>

     

       13
       13
       -
             <p class="text-sm pb-2 md:pb-2">{{.Profile.Description}}</p>

     

       14
       14
       -
             <div class="text-sm flex items-center gap-2 my-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full">

     

       15
       15
       -
               <span class="flex-shrink-0">{{ i "users" "size-4" }}</span>

     

       16
       16
       -
               <span id="followers"><a href="/{{ $userIdent }}?tab=followers">{{ .FollowersCount }} followers</a></span>

     

       17
       17
       -
               <span class="select-none after:content-['·']"></span>

     

       18
       18
       -
               <span id="following"><a href="/{{ $userIdent }}?tab=following">{{ .FollowingCount }} following</a></span>

     

       9
       9
       +
           <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-2 w-full">

     

       10
       10
       +
             <div class="flex-1 min-h-0 justify-around flex flex-col">

     

       11
       11
       +
               <a href="/{{ $userIdent }}">

     

       12
       12
       +
                 <span class="font-bold dark:text-white overflow-hidden text-ellipsis whitespace-nowrap max-w-full">{{ $userIdent | truncateAt30 }}</span>

     

       13
       13
       +
               </a>

     

       14
       14
       +
               {{ with .Profile }}

     

       15
       15
       +
               <p class="text-sm pb-2 md:pb-2">{{.Description}}</p>

     

       16
       16
       +
               {{ end }}

     

       17
       17
       +
               <div class="text-sm flex items-center gap-2 my-2 overflow-hidden text-ellipsis whitespace-nowrap max-w-full">

     

       18
       18
       +
                 <span class="flex-shrink-0">{{ i "users" "size-4" }}</span>

     

       19
       19
       +
                 <span id="followers"><a href="/{{ $userIdent }}?tab=followers">{{ .FollowersCount }} followers</a></span>

     

       20
       20
       +
                 <span class="select-none after:content-['·']"></span>

     

       21
       21
       +
                 <span id="following"><a href="/{{ $userIdent }}?tab=following">{{ .FollowingCount }} following</a></span>

     

       22
       22
       +
               </div>

     

       19
       23
        
             </div>

     

       20
       20
       -
           </div>

     

       21
       21
       -
           

     

       22
       22
       -
           {{ if ne .FollowStatus.String "IsSelf" }}

     

       23
       23
       -
             <div class="max-w-24">

     

       24
       24
       +
             {{ if and .LoggedInUser (ne .FollowStatus.String "IsSelf") }}

     

       25
       25
       +
             <div class="w-full md:w-auto md:max-w-24 order-last md:order-none">

     

       24
       26
        
               {{ template "user/fragments/follow" . }}

     

       25
       27
        
             </div>

     

       26
       26
       -
           {{ end }}

     

       28
       28
       +
             {{ end }}

     

       29
       29
       +
           </div>

     

       27
       30
        
         </div>

     

       28
       31
        
       </div>

     

       29
       29
       -
       {{ end }}
     

       32
       32
       +
       {{ end }}

+10 -10

appview/pages/templates/user/fragments/repoCard.html

···

       14
       14
        
         {{ with $repo }}

     

       15
       15
        
           <div class="py-4 px-6 gap-1 flex flex-col drop-shadow-sm rounded bg-white dark:bg-gray-800 min-h-32">

     

       16
       16
        
             <div class="font-medium dark:text-white flex items-center justify-between">

     

       17
       17
       -
               <div class="flex items-center">

     

       18
       18
       -
               {{ if .Source }}

     

       19
       19
       -
                 {{ i "git-fork" "w-4 h-4 mr-1.5 shrink-0" }}

     

       20
       20
       -
               {{ else }}

     

       21
       21
       -
                 {{ i "book-marked" "w-4 h-4 mr-1.5 shrink-0" }}

     

       22
       22
       -
               {{ end }}

     

       23
       23
       -
       

     

       17
       17
       +
               <div class="flex items-center min-w-0 flex-1 mr-2">

     

       18
       18
       +
                 {{ if .Source }}

     

       19
       19
       +
                   {{ i "git-fork" "w-4 h-4 mr-1.5 shrink-0" }}

     

       20
       20
       +
                 {{ else }}

     

       21
       21
       +
                   {{ i "book-marked" "w-4 h-4 mr-1.5 shrink-0" }}

     

       22
       22
       +
                 {{ end }}

     

       24
       23
        
                 {{ $repoOwner := resolve .Did }}

     

       25
       24
        
                 {{- if $fullName -}}

     

       26
       26
       -
                   <a href="/{{ $repoOwner }}/{{ .Name }}" class="truncate">{{ $repoOwner }}/{{ .Name }}</a>

     

       25
       25
       +
                   <a href="/{{ $repoOwner }}/{{ .Name }}" class="truncate min-w-0">{{ $repoOwner }}/{{ .Name }}</a>

     

       27
       26
        
                 {{- else -}}

     

       28
       28
       -
                   <a href="/{{ $repoOwner }}/{{ .Name }}" class="truncate">{{ .Name }}</a>

     

       27
       27
       +
                   <a href="/{{ $repoOwner }}/{{ .Name }}" class="truncate min-w-0">{{ .Name }}</a>

     

       29
       28
        
                 {{- end -}}

     

       30
       29
        
               </div>

     

       31
       31
       -
               

     

       32
       30
        
               {{ if and $starButton $root.LoggedInUser }}

     

       31
       31
       +
               <div class="shrink-0">

     

       33
       32
        
                 {{ template "repo/fragments/repoStar" $starData }}

     

       33
       33
       +
               </div>

     

       34
       34
        
               {{ end }}

     

       35
       35
        
             </div>

     

       36
       36
        
             {{ with .Description }}

+1

appview/state/profile.go

···

       336
       336
        
       			profile.Did = did

     

       337
       337
        
       		}

     

       338
       338
        
       		followCards[i] = pages.FollowCard{

     

       339
       339
       +
       			LoggedInUser:   loggedInUser,

     

       339
       340
        
       			UserDid:        did,

     

       340
       341
        
       			FollowStatus:   followStatus,

     

       341
       342
        
       			FollowersCount: followStats.Followers,