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/1691121943158447639/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 date: 2020-03-10
draft: false 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. 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 member: oregonstateuniversity
projects:
- Open Source
provides: 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 draft: false
--- ---

@ -1,9 +1,20 @@
--- ---
title: "Raptor IntegriCloud" title: Raptor IntegriCloud
member: raptorcomputingsystems member: raptorcomputingsystems
projects:
- Open Source
- Closed Source
provides: 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 draft: false
--- ---

@ -1,10 +1,20 @@
--- ---
title: "University of Oregon Exascale Computing Center" title: University of Oregon Exascale Computing Center
member: universityoforegon member: universityoforegon
projects:
- Open Source
provides: 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 draft: false
--- ---

@ -1,9 +1,27 @@
--- ---
title: "VanTosh OpenPOWER Hub" title: VanTosh OpenPOWER HUB
member: vantosh member: vantosh
projects:
- Open Source
- Closed Source
provides: 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 draft: false
--- ---

@ -178,21 +178,30 @@ section#steeringcomittee {
} }


#hubproviders { #hubproviders {
padding-top: 3.75rem; padding-top: 6.25rem;
padding-bottom: 2.75rem;
font-size: 18px;
#hubprovider { #hubprovider {
display: flex; display: flex;
align-items: center;
min-height: 100px; min-height: 100px;
a { 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 { #hubprovider:hover {
.form-control { color: $white;
font-size: 14px; background-color: $primary;
a {
color: $white;
}
ul {
color: $white;
} }
} }
} }

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

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

@ -9,6 +9,7 @@ var goal = "{{ .Site.Params.forms.hub.goal }}";
<section id="hub"> <section id="hub">
<div class="container"> <div class="row wow fadeInUp"> <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-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="sendmessage" style="display:none">Your request has been sent. Thank you!</div>
<div id="errormessage" style="display:none">Error</div> <div id="errormessage" style="display:none">Error</div>
<form role="form" name="hubRequestForm" class="hubRequestForm" id="hubRequestForm" action="" method="post"> <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 class="validation"></div>
</div> </div>
</div> </div>
<div><h3>What OpenPOWER resources do you require?</h3></div> {{ $projects := .Param "projects" }}
<div class="form-row"> {{ if $projects }}
<div class="form-group col-lg-6"> <div><h3>What is your project?</h3></div>
{{ range $hubdata.accesstype }} <div class="form-row">
<input type="checkbox" class="mr-2" id="access" name="access" value="{{ .name }}" onChange="updateTypeOfAccess()">{{ .name }}<br> <div class="form-group col-lg-12">
{{ end }} <select id="project" name="project">
{{ range $projects }}
<option value="{{ . }}">{{ . }}</option>
{{ end }}
</select>
</div>
</div> </div>
<div class="form-group col-lg-6"> {{ end }}
{{ range $hubdata.additions }} {{ $systems := .Param "systems" }}
<input type="checkbox" class="mr-2" id="access" name="access" value="{{ .name }}" onChange="updateTypeOfAccess()">{{ .name }}<br> {{ if $systems }}
{{ end }} <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> </div>
<input type="hidden" id="typeofaccess" class="typeofaccess" value=""> {{ end }}
</div> {{ $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"> <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> <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> <div class="validation"></div>
@ -65,12 +104,3 @@ var goal = "{{ .Site.Params.forms.hub.goal }}";
</div></div> </div></div>
</div></div> </div></div>
</section> </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