update ready template page

Signed-off-by: Toshaan Bharvani <toshaan@vantosh.com>

themes/openpowerfoundation/assets/css/home.scss

@@ -17,7 +17,7 @@ main {
 .post__article {
   position: relative; 
   &:not(:last-child) {
-    margin-bottom: 3.75rem; 
+    margin-bottom: 0.75rem;
   }
 }
 .post__title {

themes/openpowerfoundation/assets/css/main.css

@@ -4970,4 +4970,8 @@ textarea.form-control-lg {
   .social__item._yt {
     background-image: url(../img/yt.svg); }
 
-    
+.ready-footer {
+	color: #666666;
+	font-size: 8px;
+	line-height: 6px;
+}

themes/openpowerfoundation/assets/css/ready.scss

@@ -0,0 +1,41 @@
+main {
+&.ready {
+	@media screen and (max-width: $lg) {
+		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;
+	}
+	.post__thumb {
+		width: 40px;
+		height: 40px;
+		position: absolute;
+		left: 35px;
+		top: 33px;
+	}
+	.post__title {
+		display: block;
+		margin-top: 1em;
+		padding-left: 70px;
+		padding-right: 30px;
+		white-space: normal;
+		font-size: 18px;
+		min-height: 75px;
+		text-align: left;
+		line-height: 1.2;
+	}
+}
+}
+.promo__section {
+	align-items: center;
+	&.ready {
+		h1 {
+			font-size: 2rem;
+		}
+	}
+}

themes/openpowerfoundation/assets/js/search.js

@@ -3,7 +3,7 @@ var fuseOptions = {
 	shouldSort: true,
 	includeMatches: true,
 	threshold: 0.0,
-	tokenize:true,
+	tokenize: true,
 	location: 0,
 	distance: 100,
 	maxPatternLength: 32,

themes/openpowerfoundation/layouts/ready/list.html

@@ -1,11 +1,8 @@
 {{ partial "header.html" . }}
-
 {{ partial "navbar.html" . }}
-
-<main id="main">
-
-<section id="specifications">
-<div id="specifications" class="container-fluid">
+<main id="main" class="main ready">
+<section id="ready">
+<div id="ready" class="container-fluid">
 	<div class="section-header">
 		<div class="row">
 			<div class="col-lg-12 text-center">
@@ -23,9 +20,9 @@
 		<div class="row">
 			<div class="col-lg-2">&nbsp;</div>
 			<div class="col-lg-8 text-center">
-				<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
-				<script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/3.2.0/fuse.min.js"></script>
-				<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/jquery.mark.min.js"></script>
+				<script src="{{ "/lib/search//jquery-3.3.1.min.js" | relURL }}"></script>
+				<script src="{{ "/lib/search/fuse-3.2.0.min.js" | relURL }}"></script>
+				<script src="{{ "/lib/search/jquery.mark-8.11.1.min.js" | relURL }}"></script>
 				<script>var jsonfile = "{{ .RelPermalink }}/index.json"</script>
 				{{ $searchjavascript := resources.Get "js/search.js" }}
 				{{ $searchjs := $searchjavascript | resources.Minify }}
@@ -51,18 +48,30 @@
 			<span class="section-divider"></span>
 		</div>
 	</div>
-	<div class="row pb-4">
-	{{ range .Data.Pages }}
-		<div class="col-lg-2">&nbsp;</div>
-		<div class="col-lg-8">
-			<a class="mb-4" href="{{ .Permalink }}">{{ .Title }}</a>
+	<div class="row">
+	{{ range (.Paginate .Data.Pages.ByTitle 30).Pages }}
+		{{ $imagename := .Param "image" }}
+		{{ $imagelocation := (printf "%s/%s" "images/ready/" $imagename) }}
+		{{ $imageresource := resources.Get $imagelocation }}
+		<article class="post__article col-md-4">
+			{{ if $imageresource }}
+			<div class="post__thumb">
+				{{ $image := $imageresource.Resize "50x50 webp" }}
+				<img class="img-fluid" src="{{  $image.RelPermalink }}" width="50" height="50" alt="{{ .Title }}">
 			</div>
-		<div class="col-lg-2">&nbsp;</div>
 			{{ end }}
+			<a class="post__title btn btn-outline-primary" href="{{ .Permalink }}">{{ .Title }}</a>
+		</article>
+	{{ end }}
+	</div>
+	<div class="row">
+		<div class="col-lg-4">&nbsp;</div>
+		<div class="col-lg-4 text-center">
+			{{ template "_internal/pagination.html" . }}
+		</div>
+		<div class="col-lg-4">&nbsp;</div>
 	</div>
 </div>
 </section>
-
 </main>
-
 {{ partial "footer.html" . }}

themes/openpowerfoundation/layouts/ready/single.html

@@ -1,25 +1,36 @@
 {{ partial "header.html" . }}
-
 {{ partial "navbar.html" . }}
-
-{{ $filename := .File.BaseFileName }}
-{{ $datafile := index $.Site.Data.specifications $filename }}
-
 <main id="main">
-
 <section id="page" class="section-bg">
-	<div class="container-fluid">
+<div class="container-fluid">
 	<div class="section-header">
 		<h2 class="section-title text-center">{{ .Title }}</h2>
 		<p class="section-description"></p>
 		<span class="section-divider"></span>
 	</div>
+	<div class="row">
+		<div class="col-lg-2">&nbsp;</div>
+		<div class="col-lg-6">
+			{{ if .Param "link" }}
+				<a href="{{ .Param "link" }}">{{ .Param "link" }}&nbsp;<i class="fas fa-external-link-alt"></i></a>
+			{{ end }}
+		</div>
+		<div class="col-lg-4"></div>
+	</div>
 	<div class="row">
 		<div class="col-lg-2">&nbsp;</div>
 		<div class="col-lg-6 content wow fadeInTop">
 			<p>{{ .Content }}</p>
+			{{ if .Param "image" }}
+				<p>&nbsp;</p>
+				{{ $imagename := .Param "image" }}
+				{{ $imagelocation := (printf "%s/%s" "images/ready/" $imagename) }}
+				{{ $imageresource := resources.Get $imagelocation }}
+				{{ $image := $imageresource.Fit "600x600 webp" }}
+				<p><img src="{{  $image.RelPermalink }}" alt="{{ .Title }}" title="{{ .Title }}"></p>
+			{{ end }}
 		</div>
-			<div class="col-lg-2 details">
+		<div class="col-lg-4 details">
 			<ul>
 			{{ if .Param "vendor" }}
 				<li>Vendor : {{ .Param "vendor" }}</li>
@@ -27,6 +38,7 @@
 			{{ if .Param "criteria" }}
 				<li>Criteria Version : {{ .Param "criteria" }}</li>
 			{{ end }}
+			<li>Date Added : {{ .Date.Format "2 January 2006" }}</li>
 			</ul>
 			<h4>Tags</h4>
 			<ul id="tags">
@@ -36,9 +48,20 @@
 			</ul>
 		</div>
 	</div>
+	<div class="row">
+		<div class="col-lg-1">&nbsp;</div>
+		<div class="col-lg-10 text-center">
+			<span class="ready-footer">
+				OpenPOWER Ready™ is a mark used by the OpenPOWER Foundation to enable ecosystem product developers
+				to indicate their product has been shown/demonstrated to meet a minimum set of characteristics and
+				should be interoperable with other OpenPOWER Ready products.
+				The mark attests that a specific component satisfies the criteria defined in a specific version of
+				the OpenPOWER Ready Criteria Document.
+			</span>
+		</div>
+		<div class="col-lg-1">&nbsp;</div>
 	</div>
+</div>
 </section>
-
 </main>
-
 {{ partial "footer.html" . }}