Skip to content
Snippets Groups Projects
Commit d1c058a3 authored by Serhii Myronets's avatar Serhii Myronets Committed by Taras Kruts
Browse files

Issue #3423452 by agami4: Add base libraries, styles, js, twig template

parent 110a93dc
No related branches found
No related tags found
No related merge requests found
.preview-popup-link {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.preview-popup-link:before {
content: "";
position: absolute;
height: calc(100% + 6px);
width: calc(100% + 6px);
border: 1px solid transparent;
top: -3px;
left: -3px;
border-radius: 50%;
}
.preview-popup-link:hover:before {
border-color: var(--primary-color);
}
/*# sourceMappingURL=preview-el.css.map */
.preview-popup-link {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
&:before {
content: '';
position: absolute;
height: calc(100% + 6px);
width: calc(100% + 6px);
border: 1px solid transparent;
top: -3px;
left: -3px;
border-radius: 50%;
}
&:hover {
&:before {
border-color: var(--primary-color);
}
}
}
@keyframes dialog_opacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.ui-dialog:not(.ui-dialog-off-canvas).social-dialog--user-preview {
display: block !important;
margin: 0;
padding: 0;
border: none;
border-radius: 0.5rem;
box-shadow: 0 1px 2px rgba(20, 45, 82, 0.02), 0 3px 4px rgba(20, 45, 82, 0.03), 0 5px 8px rgba(20, 45, 82, 0.04);
background-color: #fff;
transform: none;
overflow: hidden;
animation: dialog_opacity 0.5s ease-out;
}
@media (max-width: 1024px) {
.ui-dialog:not(.ui-dialog-off-canvas).social-dialog--user-preview {
display: none !important;
}
}
.ui-dialog:not(.ui-dialog-off-canvas).social-dialog--user-preview > .ui-dialog-titlebar {
display: none;
}
.ui-dialog:not(.ui-dialog-off-canvas).social-dialog--user-preview > .ui-dialog-content {
font-family: "montserrat", sans-serif;
padding: 0;
}
.teaser-preview-popup .card__block {
padding: 0;
}
.teaser-preview-popup .media {
display: block;
padding-bottom: 36px;
}
.teaser-preview-popup .media-header {
display: block;
height: 84px;
margin: 0;
border-radius: 0;
}
.teaser-preview-popup .media-info {
display: flex;
align-items: flex-start;
margin: -58px 0 16px;
}
.teaser-preview-popup .media-info, .teaser-preview-popup .media-body {
padding-left: 28px;
padding-right: 28px;
}
.teaser-preview-popup .media-logo {
display: flex;
align-items: center;
justify-content: center;
width: 116px;
height: 116px;
border: 8px solid #fff;
background: #f5f5f5;
}
.teaser-preview-popup .media-logo,
.teaser-preview-popup .media-logo img {
border-radius: 50%;
}
.teaser-preview-popup .media-logo .field {
height: 100%;
}
.teaser-preview-popup .media-logo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.teaser-preview-popup .media-logo svg {
width: 42px;
height: 42px;
fill: #cecece;
}
.teaser-preview-popup .preview-popup-user-number {
display: flex;
align-items: center;
margin: 78px 0 0 12px;
}
.teaser-preview-popup .preview-popup-user-number .user-icon {
display: flex;
align-items: center;
padding: 1px 8px 1px 1px;
border: 1px solid #cecece;
border-radius: 16px;
font-size: 0.875rem;
font-weight: 600;
line-height: 20px;
}
.teaser-preview-popup .preview-popup-user-number .user-icon .icon {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
margin-right: 4px;
border-radius: 50%;
background-color: #cecece;
}
.teaser-preview-popup .preview-popup-user-number .user-icon .icon svg {
width: 12px;
height: 12px;
}
.teaser-preview-popup .preview-popup-user-number .member-joined {
margin-left: 12px;
width: 16px;
height: 16px;
}
.teaser-preview-popup .preview-popup-title {
display: flex;
align-items: center;
margin-bottom: 12px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.teaser-preview-popup .preview-popup-title,
.teaser-preview-popup .preview-popup-title a {
font-size: 1.25rem;
font-weight: 600;
line-height: 24px;
color: #343434;
}
.teaser-preview-popup .preview-popup-title svg {
margin-left: 8px;
}
.teaser-preview-popup .preview-popup-title a:hover {
text-decoration: underline;
}
.teaser-preview-popup .preview-popup-types > * {
display: flex;
align-items: center;
flex-wrap: wrap;
margin: 12px -4px -8px;
}
.teaser-preview-popup .preview-popup-types > * > * {
padding: 0 4px;
margin-bottom: 8px;
}
.teaser-preview-popup .preview-popup-types > * > * > * {
display: flex;
align-items: center;
padding: 2px 1em;
background-color: #e6e6e6;
color: #343434;
font-size: 0.75rem;
font-weight: 500;
line-height: 20px;
border-radius: 8px;
}
.teaser-preview-popup .preview-popup-types > * > * > * svg {
margin-right: 8px;
}
.teaser-preview-popup .preview-popup-description {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.teaser-preview-popup .preview-popup-description .field {
margin-top: 20px;
}
.teaser-preview-popup .preview-popup-description .field p {
font-size: 1rem;
font-weight: 500;
line-height: 24px;
}
.teaser-preview-popup .preview-popup-description .field p:last-child {
margin-bottom: 0;
}
.teaser-preview-popup .btn-group--wrapper {
display: flex;
align-items: center;
margin: 28px -10px 0;
}
.teaser-preview-popup .btn-group--wrapper:empty {
margin: 0;
}
.teaser-preview-popup .btn-group--wrapper > .btn {
margin: 0 10px;
padding: 4px 20px !important;
font-size: 0.875rem;
font-weight: 600;
line-height: 20px;
}
.teaser-preview-popup .btn-group--wrapper > .btn.btn-primary {
color: #fff;
}
/*# sourceMappingURL=preview-popup.css.map */
// Dialog animate.
@keyframes dialog_opacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.ui-dialog:not(.ui-dialog-off-canvas).social-dialog--user-preview {
display: block !important;
margin: 0;
padding: 0;
border: none;
border-radius: .5rem;
box-shadow: 0 1px 2px rgb(20 45 82 / 2%), 0 3px 4px rgb(20 45 82 / 3%), 0 5px 8px rgb(20 45 82 / 4%);
background-color: #fff;
transform: none;
overflow: hidden;
animation: dialog_opacity 0.5s ease-out;
@media(max-width: 1024px) {
display: none !important;
}
> .ui-dialog-titlebar {
display: none;
}
> .ui-dialog-content {
font-family: 'montserrat', sans-serif;
padding: 0;
}
}
.teaser-preview-popup {
.card__block {
padding: 0;
}
.media {
display: block;
padding-bottom: 36px;
&-header {
display: block;
height: 84px;
margin: 0;
border-radius: 0;
}
&-info {
display: flex;
align-items: flex-start;
margin: -58px 0 16px;
}
&-info,
&-body {
padding-left: 28px;
padding-right: 28px;
}
&-logo {
display: flex;
align-items: center;
justify-content: center;
width: 116px;
height: 116px;
border: 8px solid #fff;
background: #f5f5f5;
&,
img {
border-radius: 50%;
}
.field {
height: 100%;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
svg {
width: 42px;
height: 42px;
fill: #cecece;
}
}
}
.preview-popup-user-number {
display: flex;
align-items: center;
margin: 78px 0 0 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;
}
}
.preview-popup-title {
display: flex;
align-items: center;
margin-bottom: 12px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
&,
a {
font-size: 1.25rem;
font-weight: 600;
line-height: 24px;
color: #343434;
}
svg {
margin-left: 8px;
}
a:hover {
text-decoration: underline;
}
}
.preview-popup-types {
> * {
display: flex;
align-items: center;
flex-wrap: wrap;
margin: 12px -4px -8px;
> * {
padding: 0 4px;
margin-bottom: 8px;
> * {
display: flex;
align-items: center;
padding: 2px 1em;
background-color: #e6e6e6;
color: #343434;
font-size: .75rem;
font-weight: 500;
line-height: 20px;
border-radius: 8px;
svg {
margin-right: 8px;
}
}
}
}
}
.preview-popup-description {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
.field {
margin-top: 20px;
p {
font-size: 1rem;
font-weight: 500;
line-height: 24px;
&:last-child {
margin-bottom: 0;
}
}
}
}
.btn-group--wrapper {
display: flex;
align-items: center;
margin: 28px -10px 0;
&:empty {
margin: 0;
}
> .btn {
margin: 0 10px;
padding: 4px 20px !important;
font-size: .875rem;
font-weight: 600;
line-height: 20px;
&.btn-primary {
color: #fff;
}
}
}
}
/**
* @file
* Scripts for the preview popup.
*/
(function (Drupal, $, once) {
Drupal.behaviors.previewPopupBehavior = {
attach: function (context) {
var timeouts = [], dialogs = [], previewPopup = [];
var refresh = -1;
var delayOpen = 1000;
var delayClose = 200;
var delta = 0;
$(once('previewPopupBehavior', $(context).find('[data-preview-url]')))
.on('mouseover', function () {
var $element = $(this);
var selector = $element.attr('id');
var url = $element.data('preview-url');
if (timeouts[selector] !== undefined) {
window.clearTimeout(timeouts[selector]);
}
timeouts[selector] = window.setTimeout(function () {
var identifier = $element.data('preview-id');
function dialog() {
dialogs[selector] = Drupal.dialog(
'<div>'.concat(previewPopup[identifier].data, '</div>'),
{
dialogClass: 'social-dialog social-dialog--user-preview',
width: '360px',
position: {
my: 'left top',
at: 'right top',
of: $element,
},
create: function () {
var currentDialog = $(this).closest('.ui-dialog');
$(this).closest('.ui-dialog')
.on('mouseover', function () {
window.clearTimeout(timeouts[selector]);
})
.on('mouseleave', function () {
timeouts[selector] = window.setTimeout(function () {
currentDialog.remove();
if (refresh === 1) {
cleanupUserData(dialogs);
cleanupUserData(previewPopup);
}
}, delayClose);
})
.find('.ui-dialog-titlebar-close').remove();
// Clean up stored user data and display actual info.
var cleanupUserData = function (items) {
Object.entries(items).forEach(([key, val]) => {
if (items[key].deleted){
delete(items[key]);
}
});
};
},
open: function () {
$(this).find('a').blur();
$('.ui-widget-overlay').addClass('hide');
}
}
);
dialogs[selector].showModal();
dialogs[selector].popup_preview_id = $element.attr('data-preview-id');
}
if (dialogs[selector] !== undefined) {
dialogs[selector].showModal();
Drupal.ajax.bindAjaxLinks(document.body);
}
else if (
previewPopup[identifier] !== undefined &&
(previewPopup[identifier].deleted === false || previewPopup[identifier].deleted === undefined)
) {
dialog();
Drupal.ajax.bindAjaxLinks(document.body);
}
else {
var ajax = Drupal.ajax({
url: Drupal.url(url.substring(1))
});
ajax.commands.insert = function (ajax, response, status) {
if (response.method === null) {
previewPopup[identifier] = {
data: response.data,
popup_preview_id: identifier
};
}
dialog();
};
ajax.execute();
}
// When page structure has been changed bind Ajax functionality.
$(document).ajaxComplete(function(event, request, settings) {
Drupal.ajax.bindAjaxLinks(document.body);
refresh = settings.url.indexOf('flag');
selector = $element.attr('id');
var isActualUserData = function (items, id, refresh) {
if (items[id] !== undefined) {
popup_preview_id = items[id].popup_preview_id;
if (refresh === 1) {
Object.entries(items).forEach(([key, val]) => {
items[key].deleted = val.popup_preview_id == popup_preview_id;
});
}
}
};
// Flag/Unflag the user data which needs to be refreshed.
isActualUserData(dialogs, selector, refresh);
isActualUserData(previewPopup, identifier, refresh);
});
}, delayOpen);
})
.each(function () {
if ($(this).attr('id') === undefined) {
$(this).attr('id', 'preview-popup-' + delta++);
}
})
.on('mouseout', function () {
var selector = $(this).attr('id');
window.clearTimeout(timeouts[selector]);
timeouts[selector] = window.setTimeout(function () {
if (dialogs[selector] !== undefined && dialogs[selector].open) {
$(context).find('.ui-dialog').remove();
}
}, delayClose);
});
}
};
})(Drupal, jQuery, once);
......@@ -14,3 +14,20 @@ invite-form:
- core/drupal
- core/jquery
- core/once
preview-el:
css:
component:
assets/css/preview-el.css: {}
js:
assets/js/preview-popup.js: {}
dependencies:
- core/drupal
- core/jquery
- core/once
- core/drupal.dialog
preview-popup:
css:
component:
assets/css/preview-popup.css: {}
{#
/**
* @file
*
* Default theme implementation for organizations.
*
* Available variables:
* - content: Items for the content of the organization.
* Use 'content' to print them all, or print a subset such as
* 'content.title'. Use the following code to exclude the
* printing of a given child element:
* @code
* {{ content|without('title') }}
* @endcode
* - attributes: HTML attributes for the wrapper.
* - view_mode: The organization view mode used.
* - organization: The organization object.
* - url: The organization URL, if available.
* - title_suffix: Additional output populated by modules, intended to be
* displayed after the main title tag that appears in the template.
*
* @ingroup themeable
*/
#}
{%
set classes = [
'preview-popup',
view_mode ? 'preview-popup--view-mode--' ~ view_mode|clean_class,
'teaser-preview-popup',
'clearfix',
]
%}
{{ attach_library('social_core/preview-popup') }}
<div{{ attributes.addClass(classes) }}>
{{ title_suffix.contextual_links }}
<div class="card__block">
<div class="media-wrapper">
<div class="media">
<div class="media-header badge badge-primary"></div>
<div class="media-info">
<div class="media-logo">
{% block preview_popup_logo %}
{% endblock %}
</div>
{% block preview_popup_user_number %}
<div class="preview-popup-user-number">
<div class="user-icon">
<div class="icon">
<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>{% trans %}Members{% endtrans %}</title>
<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" fill="#343434"/>
<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" fill="#343434"/>
<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" fill="#343434"/>
<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" fill="#343434"/>
</g>
</g>
<defs>
<clipPath id="clip0_3448_7377">
<rect width="12" height="12" fill="white" transform="translate(0.5)"/>
</clipPath>
</defs>
</svg>
</div>
{% block preview_popup_member_count %}
{% endblock %}
</div>
{% if joined %}
<svg class="member-joined" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>{% trans %}Joined{% endtrans %}</title>
<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" fill="#343434"/>
<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" fill="#343434"/>
</g>
</g>
<defs>
<clipPath id="clip0_3448_7379">
<rect width="16" height="16" fill="white" transform="translate(0.5)"/>
</clipPath>
</defs>
</svg>
{% endif %}
{% endblock %}
</div>
</div>
<div class="media-body">
<div{{ title_attributes }} class="card--text preview-popup-title">
<a href="{{ url }}" rel="bookmark">
{{ label }}
{% block preview_popup_user_icon %}
{% endblock %}
</a>
</div>
<div class="preview-popup-types">
{% block preview_popup_type %}
{% endblock %}
</div>
<div class="preview-popup-description">
{% block preview_popup_description %}
{% endblock %}
</div>
</div>
<div class="media-footer">
<div class="btn-group--wrapper">{% block preview_popup_buttons %}{% endblock %}</div>
<div class="followers-wrapper">{% block preview_popup_followers %}{% endblock %}</div>
</div>
</div>
</div>
</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