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>
remotes/1691128968110617338/master
Toshaan Bharvani 2 years ago
parent 574e6c6fa1
commit c01c7b6356

@ -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.

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

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

@ -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
- container
- gpu
date: 2021-03-11
- Virtual Machine
- Container
- GPU
- FPGA
systems:
- POWER9
- POWER8
operatingsystems:
- Fedora
- Debian
weight: -7000
date: 2022-08-24
draft: false
---

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

@ -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;
line-height: 1.2;
font-size: 18px;
min-width: 100%;
text-decoration: underline;
font-size: 16px;
}
ul {
list-style: none;
font-size: 12px;
color: #000;
}
}
form {
.form-control {
font-size: 14px;
#hubprovider:hover {
color: $white;
background-color: $primary;
a {
color: $white;
}
ul {
color: $white;
}
}
}

@ -2,47 +2,58 @@
{{ partial "navbar.html" . }}
<main id="main">
<section id="hubproviders">
<div id="hubproviders">
<div class="container">
<div class="section-header mb-4">
<h1 class="section-title text-center">{{ .Title }}</h1>
<div class="row">
<div class="col-8 offset-2">
<span class="section-description">{{ .Content }}</span>
</div>
<div class="container">
<div class="section-header mb-4">
<h1 class="section-title text-center">{{ .Title }}</h1>
<div class="row">
<div class="col-8 offset-2">
<span class="section-description">{{ .Content }}</span>
</div>
</div>
</div>
<div class="container">
<div id="hubproviders" class="row">
<div class="col-2"></div>
{{ range .Data.Pages }}
<div id="hubprovider" class="col-lg-2 text-center">
<a href="{{ .RelPermalink }}">
{{ if .Param "member" }}
{{ $member := .Param "member" }}
{{ range where .Site.RegularPages "Section" "members" }}
{{ $membercompany := .File.BaseFileName }}
{{ if eq $member $membercompany }}
{{ if .Param "image" }}
{{ $imagename := .Param "image" }}
{{ $imagelocation := (printf "%s/%s" "images/members/" $imagename) }}
{{ $imageresource := resources.Get $imagelocation }}
{{ $image := $imageresource.Fit "100x100 webp" }}
<img src="{{ $image.RelPermalink }}" alt="{{ .Title }}">
<div class="row" id="list">
{{ range .Data.Pages.ByWeight }}
<div id="hubprovider" class="col-lg-6 btn">
<div class="col-lg-3">
<a href="{{ .RelPermalink }}">
{{ if .Param "member" }}
{{ $member := .Param "member" }}
{{ range where .Site.RegularPages "Section" "members" }}
{{ $membercompany := .File.BaseFileName }}
{{ if eq $member $membercompany }}
{{ if .Param "image" }}
{{ $imagename := .Param "image" }}
{{ $imagelocation := (printf "%s/%s" "images/members/" $imagename) }}
{{ $imageresource := resources.Get $imagelocation }}
{{ $image := $imageresource.Fit "100x100 webp" }}
<img src="{{ $image.RelPermalink }}" alt="{{ .Title }}">
{{ end }}
{{ end }}
{{ end }}
{{ end }}
{{ end }}
<br>
{{ .Title }}
</a>
</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>
{{ end }}
</div>
{{ end }}
</div>
</div>
{{ partial "hubform.html" . }}
</section>
</main>
{{ partial "footer.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>
<div class="col-lg-4">
{{ if .Param "provides" }}
{{ 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>
{{ end }}
</div>
</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 }}

@ -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>
<div class="form-row">
<div class="form-group col-lg-6">
{{ range $hubdata.accesstype }}
<input type="checkbox" class="mr-2" id="access" name="access" value="{{ .name }}" onChange="updateTypeOfAccess()">{{ .name }}<br>
{{ end }}
{{ $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>
<div class="form-group col-lg-6">
{{ range $hubdata.additions }}
<input type="checkbox" class="mr-2" id="access" name="access" value="{{ .name }}" onChange="updateTypeOfAccess()">{{ .name }}<br>
{{ end }}
{{ 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">
<select id="system" name="system">
{{ range $systems }}
<option value="{{ . }}">{{ . }}</option>
{{ end }}
</select>
</div>
</div>
<input type="hidden" id="typeofaccess" class="typeofaccess" value="">
</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">
<select id="provides" name="provides">
{{ range $provides }}
<option value="{{ . }}">{{ . }}</option>
{{ end }}
</select>
</div>
</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>

Loading…
Cancel
Save