Skip to content
Snippets Groups Projects
Commit 923248fb authored by Navneet Singh's avatar Navneet Singh Committed by Navneet Singh
Browse files

Merge pull request #2687 from... 

Merge pull request #2687 from goalgorilla/bugfix/3251633-ui-improvements-profile-organization-tag-label-update

Issue #3251633 by agami4: Improve profile organization tag label behaviour
parent e93d9a70
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 91 additions and 53 deletions
modules/social_features/social_featured_content/templates/node--featured.html.twig
+ 1
− 1
View file @ 923248fb
......@@ -129,7 +129,7 @@
<span class="sr-only">{% trans %}Created on{% endtrans %} </span>
<div class="teaser__published-date">{{ date }} <span aria-hidden="true">&bullet;</span></div>
<span class="sr-only"> {% trans %}by{% endtrans %} </span>
<div class="teaser__published-author">{{ author_name }}</div>
<div class="teaser__published-author">{{ author }}</div>
</div>
{%- endblock -%}
{% endembed %}
......
modules/social_features/social_profile/modules/social_profile_organization_tag/css/social_profile_tag.css
+ 43
− 39
View file @ 923248fb
......@@ -4,44 +4,48 @@
height: 14px;
vertical-align: middle;
margin-left: 2px;
margin-top: -2px; }
[dir='rtl'] .profile-organization-tag {
margin-left: 0;
margin-right: 2px; }
.profile-organization-tag:before {
width: 14px;
height: 14px;
content: '';
background: url(../images/checkmark.svg) 50% 50% no-repeat;
background-size: cover;
display: block; }
.profile-organization-tag span {
position: absolute;
left: 100%;
margin-left: 5px;
top: 50%;
transform: translateY(-50%);
padding: 5px 10px;
white-space: nowrap;
color: white;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 2px;
display: none;
font-weight: 500;
font-size: 14px;
line-height: 20px; }
@media (max-width: 600px) {
.profile-organization-tag span {
top: 100%;
left: 50%;
transform: translate(-50%, 0);
margin-top: 5px;
margin-left: 0; }
.region--hero .profile-organization-tag span {
left: auto;
right: 0;
transform: translate(0, 0); } }
.profile-organization-tag.open span {
display: block; }
margin-top: -2px;
}
[dir=rtl] .profile-organization-tag {
margin-left: 0;
margin-right: 2px;
}
.profile-organization-tag:before {
width: 14px;
height: 14px;
content: "";
background: url(../images/checkmark.svg) 50% 50% no-repeat;
background-size: cover;
display: block;
}
.profile-organization-tag span {
position: absolute;
min-width: 120px;
max-width: 150px;
left: 100%;
margin-left: 5px;
top: 50%;
transform: translateY(-50%);
padding: 5px 10px;
word-break: normal;
color: white;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 2px;
display: none;
font-weight: 500;
font-size: 14px;
line-height: 20px;
z-index: 10;
}
@media (max-width: 600px) {
.region--hero .profile-organization-tag span {
left: auto;
right: 0;
transform: translate(0, 0);
}
}
.profile-organization-tag.open span {
display: block;
}
/*# sourceMappingURL=social_profile_tag.css.map */
modules/social_features/social_profile/modules/social_profile_organization_tag/css/social_profile_tag.css.map
+ 1
− 7
View file @ 923248fb
{
"version": 3,
"mappings": "AAAA,yBAA0B;EACxB,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,YAAY;EACrB,MAAM,EAAE,IAAI;EACZ,cAAc,EAAE,MAAM;EACtB,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,IAAI;EAEhB,qCAAc;IACZ,WAAW,EAAE,CAAC;IACd,YAAY,EAAE,GAAG;EAGnB,gCAAS;IACP,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,IAAI;IACZ,OAAO,EAAE,EAAE;IACX,UAAU,EAAE,8CAA8C;IAC1D,eAAe,EAAE,KAAK;IACtB,OAAO,EAAE,KAAK;EAEhB,8BAAK;IACH,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,IAAI;IACV,WAAW,EAAE,GAAG;IAChB,GAAG,EAAE,GAAG;IACR,SAAS,EAAE,gBAAgB;IAC3B,OAAO,EAAE,QAAQ;IACjB,WAAW,EAAE,MAAM;IACnB,KAAK,EAAE,KAAK;IACZ,gBAAgB,EAAE,kBAAkB;IACpC,aAAa,EAAE,GAAG;IAClB,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,GAAG;IAChB,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,IAAI;IACjB,yBAAyB;MAf3B,8BAAK;QAgBD,GAAG,EAAE,IAAI;QACT,IAAI,EAAE,GAAG;QACT,SAAS,EAAE,kBAAkB;QAC7B,UAAU,EAAE,GAAG;QACf,WAAW,EAAE,CAAC;QACd,4CAAgB;UACd,IAAI,EAAE,IAAI;UACV,KAAK,EAAE,CAAC;UACR,SAAS,EAAE,eAAe;EAK9B,mCAAK;IACH,OAAO,EAAE,KAAK",
"sources": ["social_profile_tag.scss"],
"names": [],
"file": "social_profile_tag.css"
}
\ No newline at end of file
{"version":3,"sourceRoot":"","sources":["social_profile_tag.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;IACE;IACA;IACA;;;AAMJ;EACE","file":"social_profile_tag.css"}
\ No newline at end of file
modules/social_features/social_profile/modules/social_profile_organization_tag/css/social_profile_tag.scss
+ 7
− 6
View file @ 923248fb
......@@ -19,14 +19,17 @@
background-size: cover;
display: block;
}
span {
position: absolute;
min-width: 120px;
max-width: 150px;
left: 100%;
margin-left: 5px;
top: 50%;
transform: translateY(-50%);
padding: 5px 10px;
white-space: nowrap;
word-break: normal;
color: white;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 2px;
......@@ -34,12 +37,9 @@
font-weight: 500;
font-size: 14px;
line-height: 20px;
z-index: 10;
@media(max-width: 600px) {
top: 100%;
left: 50%;
transform: translate(-50%, 0);
margin-top: 5px;
margin-left: 0;
.region--hero & {
left: auto;
right: 0;
......@@ -47,6 +47,7 @@
}
}
}
&.open {
span {
display: block;
......
modules/social_features/social_profile/modules/social_profile_organization_tag/js/social_profile_tag.js
+ 39
− 0
View file @ 923248fb
......@@ -5,6 +5,45 @@
var tag = $('.profile-organization-tag');
tag.each(function () {
var el = $(this);
var parentW = el.closest('.teaser__body').width();
var position = el.position();
var percentage = (position.left / (parentW * 0.01)).toString();
var text = el.find('.text');
var conditionPercentage = '50';
// Reset `overflow` style for the `teaser__content-text` and `teaser__published-author` classes.
var teaserC = el.closest('.teaser__content-text');
var teaserP = el.closest('.teaser__published-author');
teaserC.css('overflow', 'visible');
teaserP.css('overflow', 'visible');
if($('body.path-user').length === 0) {
console.log(1);
if (percentage >= conditionPercentage) {
text.css({
'left': 'auto',
'right': '100%'
});
}
else if (percentage <= conditionPercentage) {
text.css({
'left': '100%',
'right': 'auto'
});
}
else {
text.css({
'left': '50%',
'right': 'auto',
'margin-left': -(150 / 2) + 'px'
});
}
}
});
tag.on('mouseenter', (event) => {
$(event.currentTarget).addClass('open');
});
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment