Skip to content
This repository has been archived by the owner on Mar 18, 2021. It is now read-only.

Commit

Permalink
COM-20065: Implement card view for bundle list
Browse files Browse the repository at this point in the history 
https://jira.ez.no/browse/COM-20065
  • Loading branch information
@ciastektk
ciastektk committed Nov 9, 2018
1 parent f76c2ee commit 46b57e8
Show file tree
Hide file tree
Showing 5 changed files with 117 additions and 109 deletions.
67 changes: 21 additions & 46 deletions app/Resources/views/themes/ezplatform/line/bundle_card.html.twig
View file
@@ -1,54 +1,29 @@
<div class="bundle-card-line-container{% if extra.page is defined %} page-{{ extra.page }}{% endif %}">
<div class="bundle-card-line">
<div class="bundle-card-line-data">
<div class="bundle-card-line-information">
<h2>
{{ ez_render_field(content, 'bundle_id') }}
</h2>
<div class="bundle-card-line-description">
{{ ez_render_field(content, 'description') }}
</div>
</div>
<div class="bundle-card-line-counters">
<ul>
<li class="downloads"><i class="fa fa-cloud-download" aria-hidden="true"></i> {{ ez_field_value(content, 'downloads') }}</li>
<li class="stars"><i class="fa fa-star" aria-hidden="true"></i> {{ ez_field_value(content, 'stars') }}</li>
<li class="forks"><i class="fa fa-code-fork" aria-hidden="true"></i> {{ ez_field_value(content, 'forks') }}</li>
<li class="updated"><i class="fa fa-clock-o" aria-hidden="true"></i> {{ ez_field_value(content, 'updated')|date("d/m/Y") }}</li>
</ul>
</div>
<div class="bundle-card-line-authors">
<div class="bundle-card-line-owner">
{% if packageDetails.authorAvatarUrl is defined and packageDetails.author[0] is defined and packageDetails.author[0].name is defined %}
<span>Owner:</span>
<a href="{{ ez_field_value(content, 'packagist_url') }}" title="See on Packagist.org">
<div class="bundle-card-line">
<div class="bundle-card-line-data">
<div class="bundle-card-line-authors">
<div class="bundle-card-line-owner">
{% if packageDetails.authorAvatarUrl is defined and packageDetails.author is defined and packageDetails.author.name is defined %}
<div class="bundle-card-line-owner-photo">
<img src="{{ packageDetails.authorAvatarUrl }}?s=100" alt="{{ packageDetails.author[0].name }}" />
<img src="{{ packageDetails.authorAvatarUrl }}?s=100" alt="{{ packageDetails.author.name }}" />
</div>
<div class="bundle-card-line-owner-name">{{ packageDetails.author[0].name|truncate(20, true) }}</div>
{% endif %}
</div>
{% if packageDetails.maintainers is defined %}
<div class="bundle-card-line-maintainers">
<span>Maintainers:</span>
{% for maintainer in packageDetails.maintainers|slice(0, 3) %}
<div class="bundle-card-line-maintainer">
<div class="bundle-card-line-maintainer-photo">
<img src="{{ maintainer.avatarUrl }}&amp;s=40" />
<div class="bundle-card-line-owner-name">
<span class="bundle-card-line-owner-label">Made by:</span>
<span class="bundle-card-line-owner-author">{{ packageDetails.author.name|truncate(20, true) }}</span>
</div>
<div class="bundle-card-line-maintainer-username">{{ maintainer.name }}</div>
</div>
{% endfor %}
{% if packageDetails.maintainers|length > 3 %}
<div class="bundle-card-line-contributors-more">
<a href="{{ ez_field_value(content, 'packagist_url') }}" title="See on Packagist.org">+{{ packageDetails.maintainers|length - 3 }} more</a>
</div>
{% endif %}
{% endif %}
</div>
</div>
<div class="bundle-card-line-information">
<h2>
{{ ez_render_field(content, 'bundle_id') }}
</h2>
<div class="bundle-card-line-description">
{{ ez_render_field(content, 'description') }}
</div>
</div>
{% endif %}
</div>
</div>
<div class="bundle-card-line-href">
<a href="{{ ez_field_value(content, 'packagist_url') }}" title="See on Packagist.org"><i class="fa fa-angle-right fa-3" aria-hidden="true"></i></a>
</div>
</div>
</a>
</div>
54 changes: 54 additions & 0 deletions app/Resources/views/themes/ezplatform/line/bundle_card_old.html.twig
View file
@@ -0,0 +1,54 @@
<div class="bundle-card-line-container{% if extra.page is defined %} page-{{ extra.page }}{% endif %}">
<div class="bundle-card-line">
<div class="bundle-card-line-data">
<div class="bundle-card-line-information">
<h2>
{{ ez_render_field(content, 'bundle_id') }}
</h2>
<div class="bundle-card-line-description">
{{ ez_render_field(content, 'description') }}
</div>
</div>
<div class="bundle-card-line-counters">
<ul>
<li class="downloads"><i class="fa fa-cloud-download" aria-hidden="true"></i> {{ ez_field_value(content, 'downloads') }}</li>
<li class="stars"><i class="fa fa-star" aria-hidden="true"></i> {{ ez_field_value(content, 'stars') }}</li>
<li class="forks"><i class="fa fa-code-fork" aria-hidden="true"></i> {{ ez_field_value(content, 'forks') }}</li>
<li class="updated"><i class="fa fa-clock-o" aria-hidden="true"></i> {{ ez_field_value(content, 'updated')|date("d/m/Y") }}</li>
</ul>
</div>
<div class="bundle-card-line-authors">
<div class="bundle-card-line-owner">
{% if packageDetails.authorAvatarUrl is defined and packageDetails.author[0] is defined and packageDetails.author[0].name is defined %}
<span>Owner:</span>
<div class="bundle-card-line-owner-photo">
<img src="{{ packageDetails.authorAvatarUrl }}?s=100" alt="{{ packageDetails.author[0].name }}" />
</div>
<div class="bundle-card-line-owner-name">{{ packageDetails.author[0].name|truncate(20, true) }}</div>
{% endif %}
</div>
{% if packageDetails.maintainers is defined %}
<div class="bundle-card-line-maintainers">
<span>Maintainers:</span>
{% for maintainer in packageDetails.maintainers|slice(0, 3) %}
<div class="bundle-card-line-maintainer">
<div class="bundle-card-line-maintainer-photo">
<img src="{{ maintainer.avatarUrl }}&amp;s=40" />
</div>
<div class="bundle-card-line-maintainer-username">{{ maintainer.name }}</div>
</div>
{% endfor %}
{% if packageDetails.maintainers|length > 3 %}
<div class="bundle-card-line-contributors-more">
<a href="{{ ez_field_value(content, 'packagist_url') }}" title="See on Packagist.org">+{{ packageDetails.maintainers|length - 3 }} more</a>
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
<div class="bundle-card-line-href">
<a href="{{ ez_field_value(content, 'packagist_url') }}" title="See on Packagist.org"><i class="fa fa-angle-right fa-3" aria-hidden="true"></i></a>
</div>
</div>
</div>
24 changes: 14 additions & 10 deletions app/Resources/views/themes/ezplatform/parts/bundle_list/list.html.twig
View file
@@ -1,13 +1,17 @@
{% set extraParams = extraParams is defined ? extraParams %}
{% if items|length %}
{% for card in items %}
{{ render(controller('ez_content:viewAction', {
'locationId': card.bundle.valueObject.versionInfo.contentInfo.mainLocationId,
'viewType': viewType,
'params': {
'extra': extraParams,
'packageDetails': card.packageDetails
}
})) }}
{% endfor %}
<div class="row">
{% for card in items %}
<div class="col-md-4 col-xs-12">
{{ render(controller('ez_content:viewAction', {
'locationId': card.bundle.valueObject.versionInfo.contentInfo.mainLocationId,
'viewType': viewType,
'params': {
'extra': extraParams,
'packageDetails': card.packageDetails
}
})) }}
</div>
{% endfor %}
</div>
{% endif %}
2 changes: 1 addition & 1 deletion app/config/config_ezplatform_page.yml
View file
Expand Up @@ -20,7 +20,7 @@ parameters:
# `bundles_list` locationId
bundles.location_id: 168
# 'bundles_list` elements limit on `bundles_list` page
bundles.cards_limit: 10
bundles.cards_limit: 12
# 'bundles' cache expiration time in seconds
bundles.cache_expiration_time: 604800
# names of excluded bundle maintainers
Expand Down
79 changes: 27 additions & 52 deletions web/assets/scss/bundle.scss
View file
@@ -1,41 +1,35 @@
.bundle-card-line {
width: 100%;
height: 225px;
border-left: 15px solid #2a9dc7;
background: #fff;
box-shadow: 0 7px 15px #ddd;
overflow: hidden;
margin: 0 0 40px 0;
border: solid 1px #ccc;
padding: 25px 20px;
overflow: hidden;

&:hover {
border: solid 1px #f15a22;
}
}

.bundle-card-line-data {
width: calc(100% - 70px);
height: 185px;
float: left;
overflow: hidden;
}

.bundle-card-line-information {
width: 75%;
float: left;
min-height: 180px;
overflow: hidden;
border-right: 1px solid #d3d3d3;
padding: 0 45px 0 20px;
}

.bundle-card-line-information h2 {
font-size: 26px;
color: #63605d;
font-weight: 400;
font-size: 19px;
color: #333;
font-weight: bold;
margin-top: 20px;
}

.bundle-card-line-information h2 a {
color: #63605d;
text-decoration: none;
cursor: pointer;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
}

.bundle-card-line-description {
Expand Down Expand Up @@ -83,56 +77,37 @@
.bundle-card-line-authors {
width: 100%;
overflow: hidden;
border-top: 1px solid #d3d3d3;
padding: 10px 0;
}

.bundle-card-line-owner,
.bundle-card-line-maintainers {
padding: 0 10px;
font-size: 13px;
line-height: 24px;
}

.bundle-card-line-owner {
width: 35%;
float: left;
border-right: 1px solid #d3d3d3;
}

.bundle-card-line-owner span,
.bundle-card-line-maintainers span {
.bundle-card-line-owner-label {
display: block;
float: left;
font-weight: 700;
font-size: 15px;
}

.bundle-card-line-owner-name {
font-weight: 400;
padding-left: 5px;
.bundle-card-line-owner-author {
font-size: 16px;
font-weight: 600;
}

.bundle-card-line-owner-photo,
.bundle-card-line-maintainer-photo {
width: 24px;
height: 24px;
.bundle-card-line-owner-name {
position: relative;
top: -5px;
width: 75%;
float: left;
margin-left: 10px;
color: #63605d;
}

.bundle-card-line-owner-photo {
margin: 0 10px;
width: 34px;
height: 34px;
float: left;
}

.bundle-card-line-owner-photo img,
.bundle-card-line-maintainer-photo img {
.bundle-card-line-owner-photo img {
width: 100%;
}

.bundle-card-line-maintainers {
width: 65%;
float: left;
}

.bundle-card-line-maintainer {
margin: 0 20px 0 10px;
float: left;
Expand Down

0 comments on commit 46b57e8

Please sign in to comment.