hmn/src/templates/src/project_index.html

79 lines
2.5 KiB
HTML

{{ template "base.html" . }}
{{ define "extrahead" }}
<script src="{{ static "js/carousel.js" }}"></script>
{{ end }}
{{ define "content" }}
<div>
{{ with .CarouselProjects }}
<div class="carousel-container project-carousel mw-100 mv2 mv3-ns margin-center dn db-ns">
<div class="carousel pa3 h5 overflow-hidden bg--dim br2-ns">
{{ range $index, $project := . }}
<div class="carousel-item flex pa3 w-100 h-100 bg--dim items-center {{ if eq $index 0 }}active{{ end }}">
<div class="flex-grow-1 pr3 relative flex flex-column h-100 justify-center">
<a href="{{ $project.Url }}">
<h3>{{ $project.Name }}</h3>
</a>
<div class="carousel-description">
{{ $project.ParsedDescription }}
</div>
<div class="carousel-fade"></div>
</div>
<div class="flex-shrink-0 order-0 order-1-ns">
<a href="{{ $project.Url }}">
<div class="image bg-center cover w5 h5 br2" style="background-image:url({{ $project.Logo }})" ></div>
</a>
</div>
</div>
{{ end }}
</div>
<div class="carousel-buttons pv2"></div>
</div>
{{ end }}
<div class="flex flex-column flex-row-l mv3 items-start">
<div class="bg--dim-ns br2">
<div class="clear"></div>
<div class="optionbar pv2 ph3">
<div class="options">
<a href="{{ .ProjectAtomFeedUrl }}"><span class="icon big">4</span> RSS Feed &ndash; New Projects</span></a>
</div>
<div class="options">
{{ template "pagination.html" .Pagination }}
</div>
</div>
<div class="projectlist ph3">
{{ range .Projects }}
<div class="mv3">
{{ template "project_card.html" projectcarddata . "" }}
</div>
{{ end }}
</div>
<div class="optionbar bottom pv2 ph3">
<div class="options order-1"></div>
<div class="options order-0 order-last-ns">{{ template "pagination.html" .Pagination }}</div>
</div>
</div>
<div class="w-100 w-40-l ph3 ph0-ns flex-shrink-0">
<div class="ml3-l mt3 mt0-l pa3 bg--dim br2">
<h2>Personal Projects</h2>
<p>Many community members have projects of their own that are currently works in progress. Here's a few:</p>
{{ range .PersonalProjects }}
<div class="mv3">
{{ template "project_card.html" projectcarddata . "" }}
</div>
{{ end }}
</div>
</div>
</div>
</div>
<script>
initCarousel(document.querySelector('.project-carousel'), {
durationMS: 10000,
});
</script>
{{ end }}