Browse Source

refactor group page

* process group images
* better layout
* hero promo adjustment

Signed-off-by: Toshaan Bharvani <toshaan@vantosh.com>
jamesk-patch-1
Toshaan Bharvani 9 months ago
parent
commit
e3454808c3
  1. BIN
      assets/images/groups/promo.jpg
  2. 12
      content/groups/_index.md
  3. 4
      themes/openpowerfoundation/assets/css/groups.scss
  4. 120
      themes/openpowerfoundation/layouts/groups/list.html
  5. 5
      themes/openpowerfoundation/layouts/groups/single.html
  6. 12
      themes/openpowerfoundation/layouts/partials/groups-promo.html

BIN
assets/images/groups/promo.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 423 KiB

12
content/groups/_index.md

@ -1,9 +1,11 @@ @@ -1,9 +1,11 @@
---
title: 'Workgroup Overview'
date: 2021-03-06
image: promo.jpg
promo:
header: Our Working Groups
p:
- A <strong>Technical Workgroup (TWG)</strong> is a workgroup that provides technical specifications and will help define next-generation of the specifications, definitions, and the compliance of these specifications with primary output being specification documents.
- A <strong>Special Integration Group (SIG)</strong> is a workgroup that provides an implementation of technical specifications with the goal to produce reference designs. A SIG will normally provide a reference design, a finished product, or help maintain project for direct usage.
date: 2022-01-03
draft: false

promo-h1: Our Working Groups
promo-p1: A <strong>Technical Workgroup (TWG)</strong> is a workgroup that provides technical specifications and will help define next-generation of the specifications, definitions, and the compliance of these specifications with primary output being specification documents.
promo-p2: A <strong>Special Integration Group (SIG)</strong> is a workgroup that provides an implementation of technical specifications with the goal to produce reference designs. A SIG will normally provide a reference design, a finished product, or help maintain project for direct usage.
---

4
themes/openpowerfoundation/assets/css/groups.scss

@ -5,12 +5,10 @@ main { @@ -5,12 +5,10 @@ main {
padding-top:50px;
padding-bottom: 40px;
}

@media screen and (min-width: $lg) and (max-width: $xl) {
padding-top:70px;
padding-bottom: 40px;
}

@media screen and (min-width: $xl) {
padding-bottom: 50px;
}
@ -45,4 +43,4 @@ main { @@ -45,4 +43,4 @@ main {
}

#workgroupsingle {
}
}

120
themes/openpowerfoundation/layouts/groups/list.html

@ -1,95 +1,39 @@ @@ -1,95 +1,39 @@
{{ partial "header.html" . }}

{{ partial "navbar.html" . }}

{{ partial "groups-promo.html" . }}

<main id="main" class="main groups">
<div class="container">
<div class="row">
{{ range (.Data.Pages.ByParam "wgtype").Reverse }}
{{ $imagename := .Param "image" }}
{{ $imagelocation := (printf "%s/%s" "images/" $imagename) }}
{{ $imageresource := resources.Get $imagelocation }}
<article class="post__article col-md-4">
{{ if $imageresource }}
<div class="post__thumb">
{{ $image := $imageresource.Fit "390x390" }}
<img class="img-fluid" src="{{ $image.RelPermalink }}" width="390" height="390" alt="">
</div>
{{ end }}
<a class="post__title btn btn-outline-primary" href="{{ .Permalink }}">{{ .Title }}</a>
</article>

{{ end }}
<!-- <article class="post__article col-md-4">
<div class="post__thumb"><img class="img-fluid" src="../img/thumb-1.jpg" width="390" height="390" alt="">
</div><a class="post__title" href="/">Libre BMC</a>
</article>
<article class="post__article col-md-4">
<div class="post__thumb"><img class="img-fluid" src="../img/thumb-2.jpg" width="390" height="390" alt="">
</div><a class="post__title" href="/">Libre BMC</a>
</article>
<article class="post__article col-md-4">
<div class="post__thumb"><img class="img-fluid" src="../img/thumb-3.jpg" width="390" height="390" alt="">
</div><a class="post__title" href="/">Libre BMC</a>
</article>
<article class="post__article col-md-4">
<div class="post__thumb"><img class="img-fluid" src="../img/thumb-1.jpg" width="390" height="390" alt="">
</div><a class="post__title" href="/">Libre BMC</a>
</article>
<article class="post__article col-md-4">
<div class="post__thumb"><img class="img-fluid" src="../img/thumb-2.jpg" width="390" height="390" alt="">
</div><a class="post__title" href="/">Libre BMC</a>
</article>
<article class="post__article col-md-4">
<div class="post__thumb"><img class="img-fluid" src="../img/thumb-3.jpg" width="390" height="390" alt="">
</div><a class="post__title" href="/">Libre BMC</a>
</article> -->
</div>
</div>
</main>
<!-- <main id="main">

<section id="more-features" class="section-bg">
<div class="container-fluid">
<div class="section-header">
<h3 class="section-title">{{ .Title }}</h3>
<span class="section-divider"></span>

</div>
{{ if .Content }}
<div class="row">
<div class="col-lg-2">&nbsp;</div>
<div class="col-lg-8">
<p class="section-description">{{ .Content }}</p>
</div>
<div class="col-lg-2">&nbsp;</div>
</div>
{{ end }}
<div class="row">&nbsp;</div>
<div class="row">
{{ range (.Data.Pages.ByParam "wgtype").Reverse }}
{{ $color := "transparent" }}
{{ $data := index $.Site.Data }}
{{ $wgtype := .Param "wgtype" }}
{{ range $data.workgroups }}
{{ if eq $wgtype .id }}
{{ $color = .color }}
{{ end }}
{{ $promobackgroundimagename := .Param "image" }}
{{ $promobackgroundimagelocation := (printf "%s/%s" "images/groups/" $promobackgroundimagename) }}
{{ $promobackgroundimageresource := resources.Get $promobackgroundimagelocation }}
{{ $promobackgroundimage := $promobackgroundimageresource.Resize "1440x820 webp" }}
<section class="promo__section groups d-flex" style="background-image:url({{ $promobackgroundimage.RelPermalink }})">
<div class="promo__container container">
<div class="d-flex justify-content-start">
<div class="promo-wrapper p-3 p-lg-0">
<h1>{{ .Param "promo.header" }}</h1>
{{ range (.Param "promo.p") }}
<p>{{ . | safeHTML }}</p>
{{ end }}
<div class="col-lg-4">
<div class="box wow fadeInBottom" style="border: 2px solid {{ $color }};">
<h4 class="title"><a href="{{ .Permalink }}">{{ .Title }}</a></h4>
<p class="description">{{ .Summary }}</p>
</div>
</div>
{{ end }}
</div>
</div>
</div>
</section>

</main> -->

<main id="main" class="main groups">
<div class="container">
<div class="row">
{{ range (.Data.Pages.ByParam "wgtype").Reverse }}
{{ $imagename := .Param "image" }}
{{ $imagelocation := (printf "%s/%s" "images/" $imagename) }}
{{ $imageresource := resources.Get $imagelocation }}
<article class="post__article col-md-4">
{{ if $imageresource }}
<div class="post__thumb">
{{ $image := $imageresource.Fit "390x390 webp" }}
<img class="img-fluid" src="{{ $image.RelPermalink }}" width="390" height="390" alt="">
</div>
{{ end }}
<a class="post__title btn btn-outline-primary" href="{{ .Permalink }}">{{ .Title }}</a>
</article>
{{ end }}
</div>
</div>
</main>
{{ partial "footer.html" . }}

5
themes/openpowerfoundation/layouts/groups/single.html

@ -1,9 +1,6 @@ @@ -1,9 +1,6 @@
{{ partial "header.html" . }}

{{ partial "navbar.html" . }}

<main id="main">

<section id="workgroupsingle">
<div id="workgroupsingle" class="container-fluid">
<div class="section-header">
@ -133,7 +130,5 @@ @@ -133,7 +130,5 @@
</div>
</div>
</section>

</main>

{{ partial "footer.html" . }}

12
themes/openpowerfoundation/layouts/partials/groups-promo.html

@ -1,12 +0,0 @@ @@ -1,12 +0,0 @@
<section class="promo__section groups d-flex"
style="background-image:url(../img/promo-1.jpg)">
<div class="promo__container container">
<div class="d-flex justify-content-start">
<div class="promo-wrapper p-3 p-lg-0">
<h1>{{ .Param "promo-h1" }}</h1>
<p>{{ .Param "promo-p1" | safeHTML }}</p>
<p>{{ .Param "promo-p2" | safeHTML }}</p>
</div>
</div>
</div>
</section>
Loading…
Cancel
Save