2021-07-08 07:40:30 +00:00
|
|
|
{{ template "base.html" . }}
|
|
|
|
|
|
|
|
{{ define "extrahead" }}
|
|
|
|
{{ range .Screenshots }}
|
|
|
|
<link rel="preload" href="{{ . }}" as="image">
|
|
|
|
{{ end }}
|
2022-08-05 04:03:45 +00:00
|
|
|
<script src="{{ static "js/templates.js" }}"></script>
|
2021-07-08 07:40:30 +00:00
|
|
|
{{ end }}
|
|
|
|
|
|
|
|
{{ define "content" }}
|
2021-10-28 02:54:20 +00:00
|
|
|
<div class="flex flex-column flex-row-l">
|
|
|
|
<div class="
|
|
|
|
sidebar flex-shrink-0 self-start-l
|
|
|
|
flex flex-column flex-row-ns items-start-ns flex-column-l items-stretch-l
|
|
|
|
mw5-l mh3 ml0-ns mb3 overflow-hidden
|
|
|
|
">
|
2021-11-12 00:23:24 +00:00
|
|
|
<div class="w-100 w5-ns flex-shrink-0 flex justify-center br3 overflow-hidden">
|
|
|
|
{{ if .Project.Logo }}
|
|
|
|
<img alt="{{ .Project.Name }}" src="{{ .Project.Logo }}">
|
|
|
|
{{ else }}
|
|
|
|
<div class="bg--dim w-100 aspect-ratio--1x1 relative">
|
2021-12-09 03:50:35 +00:00
|
|
|
<div class="aspect-ratio--object flex justify-center items-center f3 b c--dimmest tc">{{ .Project.Name }}</div>
|
2021-11-12 00:23:24 +00:00
|
|
|
</div>
|
|
|
|
{{ end }}
|
2021-10-28 02:54:20 +00:00
|
|
|
</div>
|
|
|
|
<div class="mt3 mt0-ns mt3-l ml3-ns ml0-l overflow-hidden">
|
2021-10-28 01:35:53 +00:00
|
|
|
<div class="mb3">
|
|
|
|
{{ range $i, $owner := .Owners }}
|
2021-10-28 02:54:20 +00:00
|
|
|
<div class="flex mb3 items-center">
|
2021-10-28 01:35:53 +00:00
|
|
|
<img class="avatar-icon mr2" src="{{ $owner.AvatarUrl }}" />
|
|
|
|
<a class="user-link" href="{{ $owner.ProfileUrl }}">{{ $owner.Name }}</a>
|
|
|
|
</div>
|
|
|
|
{{ end }}
|
|
|
|
</div>
|
2021-10-28 02:54:20 +00:00
|
|
|
<div class="w-100 w-auto-ns w-100-l">
|
|
|
|
{{ range .ProjectLinks }}
|
|
|
|
<div class="pair flex">
|
|
|
|
<div class="key flex-auto flex-shrink-0 mr2">{{ .Name }}</div>
|
|
|
|
<div class="value projectlink truncate"><a class="external" href="{{ .Url }}" ><span class="icon-{{ .Icon }}"></span> {{ .LinkText }}</a></div>
|
|
|
|
</div>
|
|
|
|
{{ end }}
|
|
|
|
</div>
|
2021-10-28 01:35:53 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="flex-grow-1 overflow-hidden">
|
2021-07-08 07:40:30 +00:00
|
|
|
{{ with .Screenshots }}
|
2021-10-28 01:35:53 +00:00
|
|
|
<div class="carousel-container mw-100 mb3">
|
2021-07-08 07:40:30 +00:00
|
|
|
<div class="carousel aspect-ratio aspect-ratio--16x9 overflow-hidden bg--dim br2-ns">
|
|
|
|
<div class="dn db-l">
|
|
|
|
{{ range $index, $screenshot := . }}
|
|
|
|
<div class="carousel-item aspect-ratio--object bg--dim {{ if eq $index 0 }}active{{ end }}">
|
|
|
|
<div class="w-100 h-100" style="background:url('{{ $screenshot }}') no-repeat center / contain"></div>
|
|
|
|
</div>
|
|
|
|
{{ end }}
|
|
|
|
</div>
|
|
|
|
<div class="db dn-l">
|
|
|
|
{{ range $index, $screenshot := . }}
|
|
|
|
<div class="carousel-item-small aspect-ratio--object {{ if eq $index 0 }}active{{ end }}">
|
|
|
|
<div class="w-100 h-100" style="background:url('{{ $screenshot }}') no-repeat center / contain"></div>
|
|
|
|
</div>
|
|
|
|
{{ end }}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="flex justify-center pv2">
|
|
|
|
{{ range $index, $screenshot := . }}
|
|
|
|
<div class="carousel-button br-pill w1 h1 mh2 {{ if eq $index 0 }}active{{ end }}" onclick="carouselButtonClick({{ $index }})"></div>
|
|
|
|
{{ end }}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{{ end }}
|
2021-09-02 02:41:39 +00:00
|
|
|
<div class="description ph3 ph0-ns">
|
2021-12-02 10:53:36 +00:00
|
|
|
{{ if .Project.ParsedDescription }}
|
|
|
|
{{ .Project.ParsedDescription }}
|
|
|
|
{{ else }}
|
|
|
|
{{ .Project.Blurb }}
|
|
|
|
{{ end }}
|
2021-07-08 07:40:30 +00:00
|
|
|
</div>
|
2022-08-05 04:03:45 +00:00
|
|
|
{{ if or .Header.Project.CanEdit (gt (len .RecentActivity) 0) }}
|
2021-07-08 07:40:30 +00:00
|
|
|
<div class="content-block timeline-container ph3 ph0-ns mv4">
|
2022-08-05 04:03:45 +00:00
|
|
|
<div class="flex flex-row items-center mb2">
|
|
|
|
<h2>Recent Activity</h2>
|
|
|
|
<div class="flex-grow-1"></div>
|
|
|
|
{{ if .Header.Project.CanEdit }}
|
|
|
|
<a href="javascript:;" class="create_snippet_link button">Add Snippet</a>
|
|
|
|
{{ end }}
|
|
|
|
</div>
|
2021-07-08 07:40:30 +00:00
|
|
|
<div class="timeline">
|
2022-08-05 04:03:45 +00:00
|
|
|
{{ range .RecentActivity }}
|
2021-07-08 07:40:30 +00:00
|
|
|
{{ template "timeline_item.html" . }}
|
|
|
|
{{ end }}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{{ end }}
|
|
|
|
</div>
|
|
|
|
</div>
|
2022-08-05 04:03:45 +00:00
|
|
|
{{ if .User }}
|
|
|
|
{{ template "snippet_edit.html" . }}
|
|
|
|
{{ if .Header.Project.CanEdit }}
|
|
|
|
<script>
|
|
|
|
const userName = "{{ .User.Name }}";
|
|
|
|
const userAvatar = "{{ .User.AvatarUrl }}";
|
|
|
|
const userUrl = "{{ .User.ProfileUrl }}";
|
|
|
|
const currentProjectId = {{ .Project.ID }};
|
|
|
|
|
|
|
|
document.querySelector(".create_snippet_link")?.addEventListener("click", function() {
|
|
|
|
let snippetEdit = makeSnippetEdit(userName, userAvatar, userUrl, new Date(), "", null, [currentProjectId], null, null);
|
|
|
|
document.querySelector(".timeline").insertBefore(snippetEdit.root, document.querySelector(".timeline").children[0]);
|
|
|
|
document.querySelector(".create_snippet_link")?.remove();
|
|
|
|
});
|
|
|
|
|
|
|
|
document.querySelector(".timeline").addEventListener("click", function(ev) {
|
|
|
|
if (ev.target.classList.contains("edit")) {
|
|
|
|
let parent = ev.target.parentElement;
|
|
|
|
while (parent && !parent.classList.contains("timeline-item")) {
|
|
|
|
parent = parent.parentElement;
|
|
|
|
}
|
|
|
|
if (parent && parent.classList.contains("timeline-item")) {
|
|
|
|
editTimelineSnippet(parent);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
{{ end }}
|
|
|
|
{{ end }}
|
2021-07-08 07:40:30 +00:00
|
|
|
<script>
|
|
|
|
const numCarouselItems = {{ len .Screenshots }};
|
|
|
|
|
|
|
|
function activateCarouselItem(i) {
|
|
|
|
const items = document.querySelectorAll('.carousel-item');
|
|
|
|
items.forEach(item => item.classList.remove('active'));
|
|
|
|
items[i].classList.add('active');
|
|
|
|
|
|
|
|
const smallItems = document.querySelectorAll('.carousel-item-small');
|
|
|
|
smallItems.forEach(item => item.classList.remove('active'));
|
|
|
|
smallItems[i].classList.add('active');
|
|
|
|
|
|
|
|
const buttons = document.querySelectorAll('.carousel-button');
|
|
|
|
buttons.forEach(button => button.classList.remove('active'));
|
|
|
|
buttons[i].classList.add('active');
|
|
|
|
}
|
|
|
|
|
|
|
|
let carouselTimerCurrent = 0;
|
|
|
|
const carouselTimer = setInterval(() => {
|
2021-10-28 01:35:53 +00:00
|
|
|
if (numCarouselItems === 0) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2021-07-08 07:40:30 +00:00
|
|
|
const next = (carouselTimerCurrent + 1) % numCarouselItems;
|
|
|
|
activateCarouselItem(next);
|
|
|
|
carouselTimerCurrent = next;
|
|
|
|
}, 10000);
|
|
|
|
|
|
|
|
function carouselButtonClick(i) {
|
|
|
|
activateCarouselItem(i);
|
|
|
|
clearInterval(carouselTimer);
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
{{ end }}
|