Skip to content
Snippets Groups Projects
Commit 098921e9 authored by Vitalii Koval's avatar Vitalii Koval Committed by Tiago Siqueira
Browse files

Issue #3420433: Add base template for medium teaser view mode

parent 372f92c4
No related branches found
No related tags found
1 merge request!201Issue #3420433: Add base template for medium teaser view mode
......@@ -318,6 +318,123 @@
margin-top: 0;
}
.teaser--medium .teaser--wrapper {
position: relative;
height: 100%;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 0;
padding: 20px;
border: 1px solid #cecece;
}
.teaser--medium .teaser--wrapper.card {
-webkit-box-shadow: none;
box-shadow: none;
}
.teaser--medium .teaser--medium__media > svg {
position: absolute;
}
.teaser--medium .teaser--medium__media .teaser--medium__type-icon {
width: 18px;
height: 18px;
top: 15px;
left: 15px;
fill: #343434;
}
.teaser--medium .teaser_logo {
margin: 0 0 20px;
}
.teaser--medium .teaser_logo,
.teaser--medium .teaser_logo img {
width: 108px;
height: 108px;
border-radius: 50%;
}
.teaser--medium .teaser_logo img {
-o-object-fit: cover;
object-fit: cover;
}
.teaser--medium .teaser--medium__user-number {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 12px;
}
.teaser--medium .teaser--medium__user-number .user-icon {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 1px 8px 1px 1px;
border: 1px solid #cecece;
border-radius: 16px;
font-size: .875rem;
font-weight: 600;
line-height: 20px;
}
.teaser--medium .teaser--medium__user-number .user-icon .icon {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 20px;
height: 20px;
margin-right: 4px;
border-radius: 50%;
background-color: #cecece;
}
.teaser--medium .teaser--medium__user-number .user-icon .icon svg {
width: 12px;
height: 12px;
}
.teaser--medium .teaser--medium__user-number .member-joined {
margin-left: 12px;
width: 16px;
height: 16px;
}
.teaser--medium .teaser--medium__title {
text-align: center;
}
.teaser--medium .teaser--medium__title a {
font-weight: 600;
line-height: 24px;
color: #343434;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.teaser--medium .teaser--medium__title a:hover, .teaser--medium .teaser--medium__title a:focus {
text-decoration: underline;
}
.share-button {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
......
This diff is collapsed.
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path clip-rule="evenodd" d="M12.5 4.25a4.241 4.241 0 0 1-1.51 3.249 7.711 7.711 0 0 1 1.355.67.384.384 0 0 1 .105.549l-.4.574a.42.42 0 0 1-.564.11A6.22 6.22 0 0 0 8.25 8.5a6.25 6.25 0 0 0-6.237 5.85.42.42 0 0 1-.413.4H.9a.385.385 0 0 1-.39-.4 7.754 7.754 0 0 1 5-6.852A4.25 4.25 0 1 1 12.5 4.25zM8.25 1.5a2.75 2.75 0 1 0 0 5.5 2.75 2.75 0 0 0 0-5.5z"/><path d="M15.195 9.144a.467.467 0 0 1 .674-.001l.495.51a.486.486 0 0 1 0 .674l-5.249 5.425a.803.803 0 0 1-1.158.002l-3.57-3.665a.486.486 0 0 1 0-.675l.534-.551a.467.467 0 0 1 .672-.002l2.983 3.06 4.62-4.777z"/></g><defs><clipPath id="a"><path fill="#fff" transform="translate(.5)" d="M0 0h16v16H0z"/></clipPath></defs></svg>
\ No newline at end of file
<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M4.25 5.25a1.875 1.875 0 1 0 0-3.75 1.875 1.875 0 0 0 0 3.75zM8.75 5.25a1.875 1.875 0 1 0 0-3.75 1.875 1.875 0 0 0 0 3.75zM8.688 10.5a4.49 4.49 0 0 0-1.501-4.16A3.75 3.75 0 0 1 12.5 9.75v.225c0 .29-.235.525-.525.525H8.688zM.5 9.75a3.75 3.75 0 1 1 7.5 0v.225c0 .29-.235.525-.525.525h-6.45A.525.525 0 0 1 .5 9.975V9.75z"/></g><defs><clipPath id="a"><path fill="#fff" transform="translate(.5)" d="M0 0h12v12H0z"/></clipPath></defs></svg>
\ No newline at end of file
......@@ -406,6 +406,114 @@
}
}
// Teaser medium.
.teaser--medium {
.teaser--wrapper {
position: relative;
height: 100%;
align-items: center;
margin-bottom: 0;
padding: 20px;
border: 1px solid #cecece;
&.card {
box-shadow: none;
}
}
.teaser--medium__media {
> svg {
position: absolute;
}
.teaser--medium__type-icon {
width: 18px;
height: 18px;
top: 15px;
left: 15px;
fill: #343434;
}
}
.teaser_logo {
margin: 0 0 20px;
&,
img {
width: 108px;
height: 108px;
border-radius: 50%;
}
img {
object-fit: cover;
}
}
.teaser--medium__user-number {
display: flex;
align-items: center;
margin-bottom: 12px;
.user-icon {
display: flex;
align-items: center;
padding: 1px 8px 1px 1px;
border: 1px solid #cecece;
border-radius: 16px;
font-size: .875rem;
font-weight: 600;
line-height: 20px;
.icon {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
margin-right: 4px;
border-radius: 50%;
background-color: #cecece;
svg {
width: 12px;
height: 12px;
}
}
}
.member-joined {
margin-left: 12px;
width: 16px;
height: 16px;
}
}
.teaser--medium__title {
text-align: center;
a {
font-weight: 600;
line-height: 24px;
color: #343434;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
&:hover,
&:focus {
text-decoration: underline;
}
}
}
}
// Share button.
.share-button {
flex: 0 0 100%;
width: 100%;
......
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="All: Icon" clip-path="url(#clip0_3448_7379)">
<g id="Union">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5001 4.25C12.5001 5.553 11.9137 6.71904 10.9905 7.49864C11.2856 7.61021 11.5721 7.73928 11.8488 7.88459C12.0181 7.97351 12.1838 8.0685 12.3454 8.16926C12.5328 8.28614 12.5767 8.53643 12.4503 8.71762L12.0499 9.29175C11.9235 9.47294 11.6748 9.51617 11.4859 9.40162C11.3765 9.3353 11.265 9.27225 11.1514 9.2126C10.2852 8.7577 9.29885 8.5 8.25011 8.5C4.93273 8.5 2.219 11.0846 2.01271 14.3499C1.99878 14.5704 1.82103 14.75 1.60011 14.75H0.900113C0.679199 14.75 0.499042 14.5705 0.510263 14.3499C0.670026 11.2084 2.70039 8.56071 5.50956 7.49849C4.58641 6.71889 4.00011 5.55291 4.00011 4.25C4.00011 1.90279 5.9029 0 8.25011 0C10.5973 0 12.5001 1.90279 12.5001 4.25ZM8.25011 1.5C6.73133 1.5 5.50011 2.73122 5.50011 4.25C5.50011 5.76878 6.73133 7 8.25011 7C9.7689 7 11.0001 5.76878 11.0001 4.25C11.0001 2.73122 9.7689 1.5 8.25011 1.5Z"/>
<path d="M15.1955 9.14362C15.3804 8.95239 15.6835 8.95209 15.8688 9.14294L16.3639 9.65285C16.5453 9.83965 16.5455 10.1398 16.3645 10.3269L11.1153 15.7521C10.7962 16.0819 10.2767 16.0828 9.95652 15.754L6.38683 12.089C6.20482 11.9021 6.2045 11.6012 6.3861 11.414L6.92089 10.8625C7.10562 10.672 7.40787 10.6716 7.59311 10.8615L10.5759 13.9206L15.1955 9.14362Z"/>
</g>
</g>
<defs>
<clipPath id="clip0_3448_7379">
<rect width="16" height="16" fill="white" transform="translate(0.5)"/>
</clipPath>
</defs>
</svg>
<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="All: Icon" clip-path="url(#clip0_3448_7377)">
<g id="Union">
<path d="M4.25 5.25C5.28553 5.25 6.125 4.41053 6.125 3.375C6.125 2.33947 5.28553 1.5 4.25 1.5C3.21447 1.5 2.375 2.33947 2.375 3.375C2.375 4.41053 3.21447 5.25 4.25 5.25Z"/>
<path d="M8.75 5.25C9.78553 5.25 10.625 4.41053 10.625 3.375C10.625 2.33947 9.78553 1.5 8.75 1.5C7.71447 1.5 6.875 2.33947 6.875 3.375C6.875 4.41053 7.71447 5.25 8.75 5.25Z"/>
<path d="M8.68779 10.5C8.72871 10.2561 8.75001 10.0055 8.75001 9.75C8.75001 8.38702 8.14405 7.16556 7.18683 6.34034C7.66267 6.12183 8.19211 6 8.75001 6C10.8211 6 12.5 7.67893 12.5 9.75V9.975C12.5 10.2649 12.265 10.5 11.975 10.5H8.68779Z"/>
<path d="M0.5 9.75C0.5 7.67893 2.17893 6 4.25 6C6.32107 6 8 7.67893 8 9.75V9.975C8 10.2649 7.76495 10.5 7.475 10.5H1.025C0.735051 10.5 0.5 10.2649 0.5 9.975V9.75Z"/>
</g>
</g>
<defs>
<clipPath id="clip0_3448_7377">
<rect width="12" height="12" fill="white" transform="translate(0.5)"/>
</clipPath>
</defs>
</svg>
{#
/**
* @file
* Default theme implementation to display a group.
*
* Available variables:
* - group: The group entity with limited access to object properties and
* methods. Only "getter" methods (method names starting with "get", "has",
* or "is") and a few common methods such as "id" and "label" are available.
* Calling other methods (such as group.delete) will result in an exception.
* - label: The title of the group.
* - content: All group items. Use {{ content }} to print them all,
* or print a subset such as {{ content.field_example }}. Use
* {{ content|without('field_example') }} to temporarily suppress the
* printing of a given child element.
* - url: Direct URL of the current group.
* - attributes: HTML attributes for the containing element.
* The attributes.class element may contain one or more of the following
* classes:
* - group: The current template type (also known as a "theming hook").
* - group--[type]: The current group type. For example, if the group is a
* "Classroom" it would result in "group--classroom". Note that the machine
* name will often be in a short form of the human readable label.
* - group--[view_mode]: The View Mode of the group; for example, a
* teaser would result in: "group--teaser", and full: "group--full".
* - title_attributes: Same as attributes, except applied to the main title
* tag that appears in the template.
* - content_attributes: Same as attributes, except applied to the main
* content tag that appears in the template.
* - title_prefix: Additional output populated by modules, intended to be
* displayed in front of the main title tag that appears in the template.
* - title_suffix: Additional output populated by modules, intended to be
* displayed after the main title tag that appears in the template.
* - view_mode: View mode; for example, "teaser" or "full".
* - page: Flag for the full page state. Will be true if view_mode is 'full'.
*
* @see template_preprocess_group()
*
* @ingroup themeable
*/
#}
{{ attach_library('socialbase/teaser')}}
{%
set classes = [
'teaser--medium',
]
%}
<div{{ attributes.addClass(classes) }}>
<div class="teaser--wrapper card">
{% block teaser_icons %}
<div class="teaser--medium__media">
{% block teaser_icon_type %}
<svg class="teaser--medium__type-icon">
<title>{% trans %}Group{% endtrans %}</title>
<use xlink:href="#icon-group"></use>
</svg>
{% endblock %}
{% block teaser_icon_member_type %}{% endblock %}
</div>
{% endblock %}
{% block teaser_logo %}
<div class="teaser_logo">
{% block teaser_logo_field %}
{% if content.logo|render|striptags('<img>') is not empty %}
{{ content.logo }}
{% endif %}
{% endblock %}
</div>
{% endblock %}
{% block teaser_user_number %}
<div class="teaser--medium__user-number">
<div class="user-icon">
<div class="icon">
<svg>
<title>{% trans %}Count joined members{% endtrans %}</title>
<use xlink:href="#icon-members"></use>
</svg>
</div>
{% block members_count %}
{{ group_members }}
{% endblock %}
</div>
{% endblock %}
{% block teaser_member_joined %}
{% if joined %}
<svg class="member-joined">
<title>{% trans %}Member joined{% endtrans %}</title>
<use xlink:href="#icon-member_check"></use>
</svg>
{% endif %}
{% endblock %}
</div>
{% block teaser_title %}
<div{{ title_attributes }} class="card__text teaser--medium__title">
<a href="{{ url }}" rel="bookmark">{{ label }}</a>
</div>
{% endblock %}
</div>
</div>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment