nick12
/
hmn
forked from hmn/hmn
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve appearance of the project index

This commit is contained in:
Ben Visness 2021-11-09 21:21:19 -08:00
parent ff2183087d
commit ab84332b23
1 changed files with 21 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/templates/src/project_index.html
View File

@ -1,37 +1,28 @@
{{ template "base.html" . }} {{ template "base.html" . }}
{{ define "content" }} {{ define "content" }}
<div class="content-block no-bg-image"> <div>
{{ with .CarouselProjects }} {{ with .CarouselProjects }}
<div class="carousel-container mw-100 mv2 mv3-ns margin-center"> <div class="carousel-container mw-100 mv2 mv3-ns margin-center dn db-ns">
<div class="carousel pa3 h5 overflow-hidden bg--dim br2-ns"> <div class="carousel pa3 h5 overflow-hidden bg--dim br2-ns">
<div class="dn db-l"> <!-- desktop carousel --> {{ range $index, $project := . }}
{{ 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="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">
<div class="flex-grow-1 pr3 relative flex flex-column h-100 justify-center"> <a href="{{ $project.Url }}">
<a href="{{ $project.Url }}"> <h3>{{ $project.Name }}</h3>
<h3>{{ $project.Name }}</h3> </a>
</a> <div class="carousel-description">
<div class="carousel-description"> {{ $project.ParsedDescription }}
{{ $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>
<div class="carousel-fade"></div>
</div> </div>
{{ end }} <div class="flex-shrink-0 order-0 order-1-ns">
</div> <a href="{{ $project.Url }}">
<div class="db dn-l"> <!-- mobile/tablet carousel --> <div class="image bg-center cover w5 h5 br2" style="background-image:url({{ $project.Logo }})" ></div>
{{ range $index, $project := . }} </a>
<div class="carousel-item-small {{ if eq $index 0 }}active{{ end }}">
{{ template "project_card.html" projectcarddata $project "h-100" }}
</div> </div>
{{ end }} </div>
</div> {{ end }}
</div> </div>
<div class="flex justify-center pv2"> <div class="flex justify-center pv2">
{{ range $index, $project := . }} {{ range $index, $project := . }}
@ -58,7 +49,7 @@
<div class="projectlist ph3"> <div class="projectlist ph3">
{{ range .Projects }} {{ range .Projects }}
<div class="mv3"> <div class="mv3">
{{ template "project_card.html" projectcarddata . ""}} {{ template "project_card.html" projectcarddata . "" }}
</div> </div>
{{ end }} {{ end }}
</div> </div>
@ -73,7 +64,9 @@
<h2>Personal Projects</h2> <h2>Personal Projects</h2>
<p>Many community members have projects of their own that are currently works in progress. Here's a few:</p> <p>Many community members have projects of their own that are currently works in progress. Here's a few:</p>
{{ range .PersonalProjects }} {{ range .PersonalProjects }}
<div><a href="{{ .Url }}">{{ .Name }}</a></div> <div class="mv3">
{{ template "project_card.html" projectcarddata . "" }}
</div>
{{ end }} {{ end }}
</div> </div>
</div> </div>