Commit 90a8e1d0 authored by femiadeyemi's avatar femiadeyemi
Browse files

feature-section: redesign and include summary for services

Motivation:

Designing an element for different screen sizes require that users are
presented with adequate information. Hence, this element will need a
summary of each feature services description so that it can be render
when the card size is the small.

Modification:

- add summary for each feature services
- ensure that the slider scroll at least one feature service per click
- internal restructure of the card for the feature services

Result:

Better user experience

Target: master
parent a0a81335
Pipeline #60638 failed with stages
in 2 minutes and 40 seconds
......@@ -11,52 +11,74 @@ class FeatureSection extends LitElement
super();
this.services = [
{
gitlab:
'GitLab is a web-based DevOps lifecycle tool that provides ' +
'a Git-repository manager providing wiki, issue-tracking and ' +
'continuous integration and deployment pipeline features, ' +
'using an open-source license, developed by GitLab Inc.',
gitlab: {
description: 'GitLab is a web-based DevOps lifecycle tool that provides ' +
'a Git-repository manager providing wiki, issue-tracking and ' +
'continuous integration and deployment pipeline features, ' +
'using an open-source license, developed by GitLab Inc.',
summary: 'a complete DevOps platform, delivered as a single application'
}
},
{
dcache:
'dCache is a system for storing and retrieving huge amounts ' +
'of data, distributed among a large number of heterogeneous server ' +
'nodes, under a single virtual filesystem tree with a variety of ' +
'standard access methods.',
dcache: {
description: 'dCache is a system for storing and retrieving huge amounts ' +
'of data, distributed among a large number of heterogeneous server ' +
'nodes, under a single virtual filesystem tree with a variety of ' +
'standard access methods.',
summary: 'distributed storage solution for storing huge amounts of data'
}
},
{
openstack:
'OpenStack is a free open standard cloud computing platform, ' +
'mostly deployed as infrastructure-as-a-service (IaaS) in both public ' +
'and private clouds where virtual servers and other resources are made ' +
'available to users.',
openstack: {
description: 'OpenStack is a free open standard cloud computing platform, ' +
'mostly deployed as infrastructure-as-a-service (IaaS) in both public ' +
'and private clouds where virtual servers and other resources are made ' +
'available to users.',
summary: 'free open standard cloud computing platform'
}
},
{
mattermost:
'Mattermost is an open-source, self-hostable online chat service ' +
'with file sharing, search, and integrations.',
mattermost: {
description: 'Mattermost is an open-source, self-host-able online chat service ' +
'with file sharing, search, and integrations.',
summary: 'chat service with file sharing, search, and integrations'
}
},
{
zammad:
'Zammad is a free help desk or issue tracking system. It offers the ' +
'connection of various channels such as e-mail , chat , telephone , ' +
'Twitter or Facebook.',
zammad: {
description: 'Zammad is a free help desk or issue tracking system. It offers the ' +
'connection of various channels such as e-mail , chat , telephone , ' +
'Twitter or Facebook.',
summary: 'web based ticketing system for helpdesk or customer support'
}
},
{
jupyterhub:
jupyterhub: [
'JupyterHub is a multi-user server for Jupyter Notebooks. ' +
'It is designed to support many users by spawning, managing, and ' +
'proxying many singular Jupyter Notebook servers.',
'multi-user server for Jupyter Notebooks'
]
},
{
nextcloud:
nextcloud: [
'Nextcloud is a suite of client-server software for creating ' +
'and using file hosting services.',
'on-site file share and collaboration platform'
]
},
];
}
static get properties() {
static get properties()
{
return {
services: {
type: Array,
......@@ -64,7 +86,8 @@ class FeatureSection extends LitElement
};
}
static get styles() {
static get styles()
{
return css`
:host {
display: block;
......@@ -105,8 +128,7 @@ class FeatureSection extends LitElement
.content {
padding: 20px;
}
.feature-card mwc-button {
.card mwc-button {
--mdc-theme-on-primary: white;
--mdc-theme-primary: #8c8c8c;
--mdc-typography-button-text-transform: lowercase;
......@@ -116,29 +138,43 @@ class FeatureSection extends LitElement
mwc-fab {
display: none;
}
.upper-content {
display: flex;
flex-direction: column;
.inner-top {
width: 100%;
height: 100%;
padding: 140px 10px 10px 10px;
background-repeat: no-repeat;
background-position: top center;
background-size: 140px;
}
.card:nth-of-type(7) .inner-top {
padding: 80px 10px 10px 10px;
background-size: 180px;
}
.description {
order: 2;
display: block;
margin-block: 1em;
margin-inline: 0px;
font-size: 1.1em;
line-height: 2;
}
.description h4 {
font-size: 1.5em;
margin: 0;
.inner-top h3 {
font-size: 1.7em;
}
.description div:last-of-type {
display: none;
}
.feature-card {
.card {
margin: 14px;
padding: 14px;
padding: 24px;
border: 1px solid #ddd;
text-align: center;
display: flex;
flex-direction: column;
}
.h {
display: none;
}
.img-container img {
width: 150px;
}
}
@media screen and (min-width: 700px) {
......@@ -167,22 +203,18 @@ class FeatureSection extends LitElement
scrollbar-width: none;
white-space: nowrap;
overflow-y: scroll;
vertical-align: middle;
display: flex;
align-items: center;
transition: 450ms transform;
font-size: 0;
}
.services-container::-webkit-scrollbar {
display: none;
}
.feature-card {
position: relative;
.card {
display: inline-block;
width: 250px;
height: 140.525px;
min-width: 280px;
height: 140px;
margin-right: 10px;
font-size: 20px;
cursor: pointer;
border: 1px solid #ececec;
background-color: #fff;
......@@ -192,54 +224,51 @@ class FeatureSection extends LitElement
box-shadow: 0 1px 15px rgba(27, 31, 35, 0.15),
0 0 1px rgba(106, 115, 125, 0.35);
}
.feature-card:first-of-type {
.card:first-of-type {
margin-left: 40px;
}
.feature-card-inner {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.upper-content {
display: flex;
.top {
display: block;
width: 100%;
height: 75%;
padding-right: 15px;
}
.upper-content .description {
width: 80%;
padding: 24px;
padding-right: 10px;
}
.description p {
max-width: 70%;
font-size: 12px;
max-height: 36px;
overflow: hidden;
}
.upper-content .img-container {
width: 20%;
margin: auto;
}
.img-container img {
.inner-top {
width: 100%;
object-fit: fill;
height: 100%;
padding: 14px 50px 0 24px;
background-repeat: no-repeat;
background-position: right;
background-size: 46px;
}
h4 {
.inner-top h3 {
margin: 0;
font-weight: 300;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-s1ze: 14px;
font-size: 24px;
color: #24292e;
margin-bottom: 5px;
}
.description {
width: 100%;
height: 48px;
font-size: 0.8em;
font-family: monospace;
}
.description div {
width: 100%;
height: 100%;
white-space: normal;
padding-right: 10px;
}
.description div:first-of-type {
display: none;
}
.bottom-content {
.bottom {
display: block;
height: 25%;
border-top: 1px solid #ececec;
}
.feature-card mwc-button {
.card mwc-button {
--mdc-typography-button-font-size: 0.65em;
--mdc-typography-button-font-weight: 100;
}
......@@ -281,21 +310,19 @@ class FeatureSection extends LitElement
<div class="services-container">
${this.services.map(
service => html`
<div class="feature-card">
<div class="feature-card-inner">
<div class="upper-content">
<div class="card">
<div class="top">
<div class="inner-top"
style="background-image: url(media/feature-services-logos/${Object.keys(service)}.svg)">
<h3>${Object.keys(service)}</h3>
<div class="description">
<h4>${Object.keys(service)}</h4>
<p>${Object.values(service)}</p>
${Object.values(Object.values(service)[0]).map(i => html`<div>${i}</div>`)}
</div>
<div class="img-container">
<img src="media/feature-services-logos/${Object.keys(service)}.svg" alt/>
</div>
</div>
<div class="bottom-content">
<mwc-button icon="info">see offers</mwc-button>
</div>
</div>
<div class="bottom">
<mwc-button icon="info">see offers</mwc-button>
</div>
</div>
`
)}
......@@ -310,13 +337,13 @@ class FeatureSection extends LitElement
_scrollRight()
{
const el = this.shadowRoot.querySelector('.services-container');
this._scroll(el, el.scrollLeft + 200, 600).then();
this._scroll(el, el.scrollLeft + 300, 600).then();
}
_scrollLeft()
{
const el = this.shadowRoot.querySelector('.services-container');
this._scroll(el, el.scrollLeft - 200, 600).then();
this._scroll(el, el.scrollLeft - 300, 600).then();
}
_scroll(element, target, duration)
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment