atomic/lib/atomic_web/live/organization_live/show.html.heex at d65cf800616678b0275d70cd666800ee29890e83 · cesium/atomic · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<div x-data="{ option: 'activities' }" class="py-5">
  <div class="border-b border-zinc-200">
    <div class="bg-white">
      <div class="flex justify-between py-4">
        <div class="w-full gap-x-4 lg:flex lg:flex-col">
          <div class="flex flex-col items-center space-x-2 lg:flex-row lg:space-x-8">
            <.avatar name={@organization.name} type={:organization} src={Logo.url({@organization.logo, @organization}, :original)} size={:xl} color={:light_zinc} />
            <div class="flex-1 space-x-2">
              <div class="flex flex-col items-center justify-center lg:flex-row lg:items-start lg:justify-start lg:space-x-2">
                <div x-data="{ open: false }" class="flex flex-col items-center justify-center space-y-2 lg:items-start lg:justify-start">
                  <h2 class="text-2xl font-medium text-zinc-900">
                    {@organization.name}
                  </h2>
                  <p class="text-xs text-zinc-900">
                    {@organization.long_name}
                  </p>
                  <div class="flex flex-row items-center space-x-2 text-sm">
                    <span class="inline-flex items-center font-bold text-zinc-900">{@followers_count}</span>
                    <span class="inline-flex w-full items-center text-zinc-900">Followers</span>
                  </div>
                  <div class="flex space-x-2">
                    <%= if not @following? do %>
                      <button phx-click="follow" type="button" class="bg-primary-500 w-32 rounded-md px-3.5 py-2.5 text-center text-sm font-medium text-white shadow-sm hover:bg-primary-600 focus-visible:outline-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">
                        Follow
                      </button>
                    <% else %>
                      <%= if @organization.name == "CeSIUM" do %>
                        <div class="bg-primary-400 inline w-32 rounded-md py-2 text-center text-sm font-medium text-white shadow-sm lg:my-0">Following</div>
                      <% else %>
                        <div class="relative">
                          <div class="inline-flex rounded-md shadow-sm">
                            <div class="inline-flex rounded-md shadow-sm">
                              <div class="bg-primary-400 inline-flex items-center gap-x-1.5 rounded-l-md px-3 py-2.5 text-white shadow-sm">
                                <p class="text-sm font-medium">Following</p>
                              </div>
                              <button
                                type="button"
                                @click="open = true"
                                class="bg-primary-400 inline-flex items-center rounded-r-md rounded-l-none px-2 py-2.5 hover:bg-primary-600 focus-visible:ring-primary-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-50"
                                aria-haspopup="listbox"
                                aria-expanded="true"
                                aria-labelledby="listbox-label"
                              >
                                <span class="sr-only">Change published status</span>
                                <svg class="size-5 text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                  <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
                                </svg>
                              </button>
                            </div>
                          </div>
                          <ul
                            x-show="open"
                            phx-click="unfollow"
                            @click.away="open = false"
                            @click="open = false"
                            class="absolute left-0 z-10 mt-2 -mr-1 w-72 origin-top-left divide-y divide-zinc-200 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:left-auto"
                            tabindex="-1"
                            role="listbox"
                            aria-labelledby="listbox-label"
                            aria-activedescendant="listbox-option-0"
                          >
                            <li class="cursor-default select-none p-4 text-sm text-zinc-900 hover:cursor-pointer hover:bg-zinc-50">
                              <div class="flex flex-col">
                                <div class="flex justify-between">
                                  <p class="font-normal">Unfollow</p>
                                </div>
                              </div>
                            </li>
                          </ul>
                        </div>
                      <% end %>
                    <% end %>
                    <%= if @has_permissions? do %>
                      <.link patch={~p"/organizations/#{@organization}/edit"} class="button">
                        <div type="button" class="inline-flex w-fit justify-center rounded-md border border-zinc-300 bg-white px-4 py-2 text-sm font-medium text-zinc-700 shadow-sm hover:bg-zinc-50" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
                          <.icon name="hero-pencil-solid" class="mr-3 h-5 w-5 text-zinc-400" /> Edit
                        </div>
                      </.link>
                      <%= link to: "#", phx_click: "delete", phx_value_id: @organization.id, data: [confirm: "Are you sure?"] do %>
                        <div type="button" class="inline-flex w-fit justify-center rounded-md border border-zinc-300 bg-white px-4 py-2 text-sm font-medium text-zinc-700 shadow-sm hover:bg-zinc-50" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
                          <.icon name="hero-trash-solid" class="mr-3 h-5 w-5 text-zinc-400" /> Delete
                        </div>
                      <% end %>
                      <.link patch={~p"/organizations/#{@organization}/certificate"} class="button">
                        <div type="button" class="inline-flex w-fit justify-center rounded-md border border-zinc-300 bg-white px-4 py-2 text-sm font-medium text-zinc-700 shadow-sm hover:bg-zinc-50" id="sort-menu-button" aria-expanded="false" aria-haspopup="true">
                          <.icon name="hero-pencil-square-solid" class="mr-3 h-5 w-5 text-zinc-400" /> Edit Certificate
                        </div>
                      </.link>
                    <% end %>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <span class="mt-8 break-normal">{@organization.description}</span>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="flex w-full space-x-20">
  <div class="sm:w-3/4"></div>
  <div class="sm:w-1/4">
    <p class="text-md text-zinc-900">
      People
    </p>
    <div class="mt-4 mb-2 grid grid-cols-7 gap-14">
      <%= for person <- @people do %>
        <.avatar name={person.name} size={:sm} color={:light_zinc} />
      <% end %>
    </div>
    {gettext("View all")}
  </div>
</div>