175 lines
3.9 KiB
Cheetah
175 lines
3.9 KiB
Cheetah
{{- .Auth.ByMatchingAccountID 2 }}
|
|
|
|
{{- define "title" }} Inventory++ Account {{ end }}
|
|
|
|
{{- $acctID := .Identity.Account.AccountID }}
|
|
|
|
<section class="m-[1rem]">
|
|
<h2>
|
|
<div class="
|
|
flex
|
|
justify-start
|
|
items-center
|
|
gap-[1em]
|
|
|
|
pb-[0.5em]
|
|
border-b-[2px]
|
|
border-sidebar-border
|
|
">
|
|
<div
|
|
class="
|
|
flex
|
|
justify-center
|
|
items-center
|
|
"
|
|
style="
|
|
flex-basis: 4em;
|
|
flex-shrink: 0;
|
|
"
|
|
>
|
|
<img
|
|
src="{{ .Identity.Claims.Picture }}"
|
|
class="rounded-[50%] height-[3em]"
|
|
/>
|
|
</div>
|
|
|
|
<div class="flex flex-col">
|
|
<span class="font-display" style="word-break: break-word;">
|
|
{{ .Identity.Claims.Name }}
|
|
</span>
|
|
|
|
<span style="word-break: break-word;">
|
|
{{ or .Identity.Claims.Nickname .Identity.Claims.Subject }}
|
|
</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</h2>
|
|
</section>
|
|
|
|
|
|
<section
|
|
id="shops-section"
|
|
class="
|
|
m-[1rem]
|
|
pb-[1rem]
|
|
border-b-[2px]
|
|
border-sidebar-border
|
|
"
|
|
>
|
|
<details class="flex flex-col items-stretch" open>
|
|
<summary class="list-none cursor-pointer self-center">
|
|
{{-
|
|
component "tutorial-tooltip"
|
|
"AnchorTag" "h2"
|
|
"AnchorID" "shops-button"
|
|
"AnchorClickedEventName" "anchorClicked"
|
|
"AnchorContent" "Shops"
|
|
|
|
"AnchorClass" "bg-card my-[0.5em] px-[2em] py-[0.5em] rounded-lg"
|
|
|
|
"PopoverID" "shops-popover"
|
|
"PopoverContentIDPrefix" "shops-popover-content"
|
|
"PopoverContents" (
|
|
newHTMLSlice
|
|
"Click <span class=\"font-bold italic\">Shops</span> to display all shops and platforms available"
|
|
"Click <span class=\"font-bold italic\">Shops</span> to hide them again"
|
|
"There you go!"
|
|
)
|
|
}}
|
|
|
|
|
|
<!--h2
|
|
class="bg-card my-[0.5em] px-[2em] py-[0.5em] rounded-lg"
|
|
style="anchor-name: --shops-button;"
|
|
_="
|
|
on click
|
|
set popover to the #shops-popover
|
|
send shopsButtonClicked to #shops-popover
|
|
"
|
|
>
|
|
Shops
|
|
</h2-->
|
|
<!--div
|
|
popover="manual"
|
|
id="shops-popover"
|
|
class="
|
|
border-[1px] border-sidebar-border rounded-lg
|
|
bg-card
|
|
p-[1em]
|
|
animate-pulse
|
|
max-w-[80vw]
|
|
mt-[1.5em]
|
|
open:grid
|
|
cursor-default
|
|
"
|
|
style="
|
|
position: fixed;
|
|
position-anchor: --shops-button;
|
|
position-area: bottom;
|
|
|
|
grid-template-columns: 1fr max-content;
|
|
grid-template-rows: max-content;
|
|
gap: 1em;
|
|
|
|
box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%);
|
|
|
|
transition-behavior: allow-discrete;
|
|
"
|
|
_="
|
|
init
|
|
call me.showPopover()
|
|
set :shopButtonClicks to 0
|
|
|
|
on click
|
|
event.preventDefault()
|
|
|
|
on shopsButtonClicked
|
|
set :shopButtonClicks to :shopButtonClicks + 1
|
|
if :shopButtonClicks is 1 then
|
|
hide #shop-popover-msg-1
|
|
show #shop-popover-msg-2
|
|
else if :shopButtonClicks is 2 then
|
|
hide #shop-popover-msg-2
|
|
show #shop-popover-msg-3
|
|
else if :shopButtonClicks is 3 then
|
|
call me.hidePopover()
|
|
end
|
|
"
|
|
>
|
|
<span id="shop-popover-msg-1" style="grid-column: 1;">
|
|
Click <span class="font-bold italic">Shops</span> to display all shops and platforms available
|
|
</span>
|
|
<span id="shop-popover-msg-2" style="grid-column: 1; display: none;">
|
|
Click <span class="font-bold italic">Shops</span> to hide them again
|
|
</span>
|
|
<span id="shop-popover-msg-3" style="grid-column: 1; display: none;">
|
|
There you go!
|
|
</span>
|
|
<button
|
|
class="cursor-pointer"
|
|
style="
|
|
grid-column: 2;
|
|
font-size: 2em;
|
|
line-height: 0.5em;
|
|
"
|
|
_="
|
|
on click
|
|
set parent to the closest #shops-popover
|
|
call parent.hidePopover()
|
|
"
|
|
>
|
|
×
|
|
</button>
|
|
</div-->
|
|
</summary>
|
|
|
|
<ul class="list-none" hx-swap="morph">
|
|
{{- range $i, $platform := .Accounts.GetOrderOfPlatformsOnAccountPage $acctID }}
|
|
{{ component (printf "/accounts/%d/platforms/%s/list-item" $acctID $platform) "OrderIndex" $i }}
|
|
{{- end }}
|
|
</ul>
|
|
</details>
|
|
</section>
|