redesign hub provider page

* change overview page
* add better resource representation
* update style to be in line with other pages
* have select boxes in place of checkboxes

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

content/hub/_index.md

@@ -1,9 +1,16 @@
 ---
-title: "Hub providers"
+title: "OPF HUB Resources"
 date: 2020-03-10
 draft: false
 ---
 
+The OpenPOWER HUB Resources is part of the [HUB SIG](/groups/hub/) and provides POWER based resources for usage.  
+
+The [HUB SIG](/groups/hub/) is a public Special Integration Group that provides information and resources on how to port to POWER.  
+
+
+OpenPOWER Foundation HUB providers are OpenPOWER Foundation members that are part of the [HUB SIG](/groups/hub/),
+that give you access to POWER hardware to enable you to get acquinted with the POWER platform.  
+Each provider has it's specific setup and you can request access through our OPF HUB Request Form.  
+
 Here is a list of OpenPOWER Hub providers.  
-These providers give you access to OpenPOWER hardware to enable you to get acquinted with the OpenPOWER platform.  
-Each provider has it's specific setup and you can request access to the OPF Hub through our OPF Hub Request Form.  

content/hub/oregonstateuniversity.md

@@ -1,10 +1,21 @@
 ---
-title: "OSU Open Source Lab"
+title: OSU Open Source Lab
 member: oregonstateuniversity
+projects:
+  - Open Source
 provides:
-  - virtual
+  - Bare Metal
-  - container
+  - Virtual Machine
-  - gpu
+  - Container
-date: 2021-03-11
+  - GPU
+  - FPGA
+systems:
+  - POWER9
+  - POWER8
+operatingsystems:
+  - CentOS
+  - Ubuntu
+weight: -9000
+date: 2022-08-24
 draft: false
 ---

content/hub/raptorcomputingsystems.md

@@ -1,9 +1,20 @@
 ---
-title: "Raptor IntegriCloud"
+title: Raptor IntegriCloud
 member: raptorcomputingsystems
+projects:
+  - Open Source
+  - Closed Source
 provides:
-  - virtual
+  - Bare Metal Machines
-  - container
+  - Virtual Machine
-date: 2020-03-11
+  - Container
+  - FPGA
+systems:
+  - POWER9
+operatingsystems:
+  - Debian
+  - Fedora
+weight: -5000
+date: 2022-08-24
 draft: false
 ---

content/hub/universityoforegon.md

@@ -1,10 +1,20 @@
 ---
-title: "University of Oregon Exascale Computing Center"
+title: University of Oregon Exascale Computing Center
 member: universityoforegon
+projects:
+  - Open Source
 provides:
-  - virtual
+  - Virtual Machine
-  - container
+  - Container
-  - gpu
+  - GPU
-date: 2021-03-11
+  - FPGA
+systems:
+  - POWER9
+  - POWER8
+operatingsystems:
+  - Fedora
+  - Debian
+weight: -7000
+date: 2022-08-24
 draft: false
 ---

content/hub/vantosh.md

@@ -1,9 +1,27 @@
 ---
-title: "VanTosh OpenPOWER Hub"
+title: VanTosh OpenPOWER HUB
 member: vantosh
+projects:
+  - Open Source
+  - Closed Source
 provides:
-  - virtual
+  - Virtual Machines
-  - container
+  - FPGA
-date: 2020-03-10
+  - Containers
+  - LibreBMC
+systems:
+  - POWER9
+  - POWER8
+operatingsystems:
+  - PowerEL
+  - FreeBSD
+  - AlmaLinux
+  - Rocky Linux
+  - CentOS
+  - Ubuntu
+  - Debian
+  - OpenBSD
+weight: -6000
+date: 2022-08-24
 draft: false
 ---

themes/openpowerfoundation/assets/css/pages.scss

@@ -178,21 +178,30 @@ section#steeringcomittee {
 }
 
 #hubproviders {
-	padding-top: 3.75rem;
+	padding-top: 6.25rem;
+	padding-bottom: 2.75rem;
+	font-size: 18px;
 	#hubprovider {
 		display: flex;
-		align-items: center;
 		min-height: 100px;
 		a {
-			white-space: normal;
+			text-decoration: underline;
-			line-height: 1.2;
+			font-size: 16px;
-			font-size: 18px;
-			min-width: 100%;
 		}
+		ul {
+			list-style: none;
+			font-size: 12px;
+			color: #000;
 		}
-	form {
+	}
-		.form-control {
+	#hubprovider:hover {
-			font-size: 14px;
+		color: $white;
+		background-color: $primary;
+		a {
+			color: $white;
+		}
+		ul {
+			color: $white;
 		}
 	}
 }

themes/openpowerfoundation/layouts/hub/list.html

@@ -2,8 +2,7 @@
 {{ partial "navbar.html" . }}
 <main id="main">
 <section id="hubproviders">
-<div id="hubproviders">
+<div class="container">
-	<div class="container">
 	<div class="section-header mb-4">
 		<h1 class="section-title text-center">{{ .Title }}</h1>
 		<div class="row">
@@ -12,12 +11,10 @@
 			</div>
 		</div>
 	</div>
-	</div>
+	<div class="row" id="list">
-	<div class="container">
+	{{ range .Data.Pages.ByWeight }}
-		<div id="hubproviders" class="row">
+		<div id="hubprovider" class="col-lg-6 btn">
-			<div class="col-2"></div>
+			<div class="col-lg-3">
-			{{ range .Data.Pages }}
-			<div id="hubprovider" class="col-lg-2 text-center">
 				<a href="{{ .RelPermalink }}">
 				{{ if .Param "member" }}
 					{{ $member := .Param "member" }}
@@ -34,15 +31,29 @@
 						{{ end }}
 					{{ end }}
 				{{ end }}
-			<br>
-			{{ .Title }}
 				</a>
+				<br>
+				{{ $projects := .Param "projects" }}
+				<ul>
+				{{ range $projects }}
+					<li>{{ . }}</li>
+				{{ end }}
+				</ul>
 			</div>
+			<div class="col-lg-9">
+				<h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
+				<br>
+				{{ $provides := .Param "provides" }}
+				<ul>
+				{{ range $provides }}
+					<li>{{ . }}</li>
 				{{ end }}
+				</ul>
+			</div>
 		</div>
+	{{ end }}
 	</div>
 </div>
-{{ partial "hubform.html" . }}
 </section>
 </main>
 {{ partial "footer.html" . }}

themes/openpowerfoundation/layouts/hub/single.html

@@ -9,41 +9,74 @@
 			<span class="section-divider"></span>
 		</div>
 		<div class="row">
-			<div class="col-lg-4 offset-lg-2">
+			<div class="col-lg-4">
 				{{ if .Param "member" }}
-					Provider :
+					Provider :&nbsp;
 					{{ $member := .Param "member" }}
 					{{ range where .Site.RegularPages "Section" "members" }}
 						{{ $membercompany := .File.BaseFileName }}
 						{{ if eq $member $membercompany }}
+							{{ .Title }}
+							{{ if .Param "country" }}
+								&nbsp;({{ .Param "country" }})
+							{{ end }}
+							<br>
 							<a href="{{ .RelPermalink }}">
 							{{ if .Param "image" }}
 								{{ $imagename := .Param "image" }}
 								{{ $imagelocation := (printf "%s/%s" "images/members/" $imagename) }}
 								{{ $imageresource := resources.Get $imagelocation }}
-								{{ $image := $imageresource.Fit "100x100" }}
+								{{ $image := $imageresource.Fit "200x200" }}
 								<img src="{{  $image.RelPermalink }}" alt="{{ .Title }}">
 							{{ else }}
 								{{ .Title }}
 							{{ end }}
 							</a>
-							{{ if .Param "country" }}
-								({{ .Param "country" }})
-							{{ end }}
 						{{ end }}
 					{{ end }}
 				{{ end }}
 			</div>
+			{{ if .Param "systems" }}
 				<div class="col-lg-4">
+					POWER Based systems :
+					<ul>
+					{{ range $s := .Param "systems" }}
+						<li>{{ $s }}</li>
+					{{ end }}
+					</ul>
+				</div>
+			{{ end }}
 			{{ if .Param "provides" }}
+				<div class="col-lg-4">
 					Provides following OPF HUB resources :
 					<ul>
 					{{ range $p := .Param "provides" }}
 						<li>{{ $p }}</li>
 					{{ end }}
 					</ul>
+				</div>
+			{{ end }}
+			<div class="col-lg-4">&nbsp;</div>
+			{{ if .Param "operatingsystems" }}
+				<div class="col-lg-4">
+					Operating Systems :
+					<ul>
+					{{ range $s := .Param "operatingsystems" }}
+						<li>{{ $s }}</li>
+					{{ end }}
+					</ul>
+				</div>
+			{{ end }}
+			{{ if .Param "projects" }}
+				<div class="col-lg-4">
+					Project Types :
+					<ul>
+					{{ range $o := .Param "projects" }}
+						<li>{{ $o }}</li>
 					{{ end }}
+					</ul>
 				</div>
+			{{ end }}
 		</div>
 	</div>
 	{{ if .Content }}

themes/openpowerfoundation/layouts/partials/hubform.html

@@ -9,6 +9,7 @@ var goal = "{{ .Site.Params.forms.hub.goal }}";
 <section id="hub">
 <div class="container">	<div class="row wow fadeInUp">
 	<div class="col-lg-8 offset-lg-2 col-md-12 mt-5 mb-5"><div class="form">
+		<div class="col-lg-12 text-center"><h2>HUB Access Request Form</h2></div>
 		<div id="sendmessage" style="display:none">Your request has been sent. Thank you!</div>
 		<div id="errormessage" style="display:none">Error</div>
 		<form role="form" name="hubRequestForm" class="hubRequestForm" id="hubRequestForm" action="" method="post">
@@ -42,20 +43,58 @@ var goal = "{{ .Site.Params.forms.hub.goal }}";
 					<div class="validation"></div>
 				</div>
 			</div>
-			<div><h3>What OpenPOWER resources do you require?</h3></div>
+			{{ $projects := .Param "projects" }}
+			{{ if $projects }}
+				<div><h3>What is your project?</h3></div>
+				<div class="form-row">
+					<div class="form-group col-lg-12">
+						<select id="project" name="project">
+						{{ range $projects }}
+							<option value="{{ . }}">{{ . }}</option>
+						{{ end }}
+						</select>
+					</div>
+				</div>
+			{{ end }}
+			{{ $systems := .Param "systems" }}
+			{{ if $systems }}
+				<div><h3>What POWER system would you like?</h3></div>
 				<div class="form-row">
 					<div class="form-group col-lg-6">
-				{{ range $hubdata.accesstype }}
+						<select id="system" name="system">
-					<input type="checkbox" class="mr-2" id="access" name="access" value="{{ .name }}" onChange="updateTypeOfAccess()">{{ .name }}<br>
+						{{ range $systems }}
+							<option value="{{ . }}">{{ . }}</option>
 						{{ end }}
+						</select>
 					</div>
+				</div>
+			{{ end }}
+			{{ $provides := .Param "provides" }}
+			{{ if $provides }}
+				<div><h3>What POWER resources do you require?</h3></div>
+				<div class="form-row">
 					<div class="form-group col-lg-6">
-					{{ range $hubdata.additions }}
+						<select id="provides" name="provides">
-						<input type="checkbox" class="mr-2" id="access" name="access" value="{{ .name }}" onChange="updateTypeOfAccess()">{{ .name }}<br>
+						{{ range $provides }}
+							<option value="{{ . }}">{{ . }}</option>
 						{{ end }}
+						</select>
 					</div>
-				<input type="hidden" id="typeofaccess" class="typeofaccess" value="">
 				</div>
+			{{ end }}
+			{{ $operatingsystems := .Param "operatingsystems" }}
+			{{ if $operatingsystems }}
+				<div><h3>What Operating System would you like on your POWER resource?</h3></div>
+				<div class="form-row">
+					<div class="form-group col-lg-6">
+						<select id="operatingsystem" name="operatingsystem">
+						{{ range $operatingsystems }}
+							<option value="{{ . }}">{{ . }}</option>
+						{{ end }}
+						</select>
+					</div>
+				</div>
+			{{ end }}
 			<div class="form-group">
 				<textarea class="form-control" name="message" rows="5" data-rule="required" data-msg="Please write a short explanation about getting access. (Why, How, Whatfor, how long)" placeholder="Please write a short explanation about getting access. (Why, How, Whatfor, how long)"></textarea>
 				<div class="validation"></div>
@@ -65,12 +104,3 @@ var goal = "{{ .Site.Params.forms.hub.goal }}";
 	</div></div>
 </div></div>
 </section>
-<script>
-function updateTypeOfAccess() {
-	var typeofaccess = [];
-	$('input[id="access"]:checked').each(function() {
-		typeofaccess.push(this.value);
-	});
-	document.getElementById("typeofaccess").value = typeofaccess;
-};
-</script>