From ae7ece07352ae81422ce521a01134c412015ea85 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Tue, 9 Feb 2021 10:29:11 +0100
Subject: [PATCH 01/11] minor: multiple filtering
---
src/solid-directory.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/solid-directory.js b/src/solid-directory.js
index 4d10a0a..6f4b3f9 100644
--- a/src/solid-directory.js
+++ b/src/solid-directory.js
@@ -54,9 +54,9 @@ export default class SolidDirectory extends SolidTemplateElement {
label-profile.city="${this.localize('search.by.city')}"
widget-profile.city="solid-form-placeholder-text"
- class-skills="segment margin-bottom-small third sm-full padding-right-xsmall padding-left-xsmall sm-padding-none text-small select-shadow select-bg-white"
+ class-skills="segment margin-bottom-small two-third sm-full padding-right-xsmall padding-left-xsmall sm-padding-none text-small select-shadow select-bg-white"
label-skills="${this.localize('search.by.skill')}"
- widget-skills="solid-form-placeholder-dropdown"
+ widget-skills="solid-form-multipleselect-autocompletion"
submit-button="GO"
></solid-form-search>
--
GitLab
From 4dde34e3ba89537554e00c598578c90f6f43331c Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Fri, 12 Feb 2021 14:46:54 +0100
Subject: [PATCH 02/11] minor: remove extra-context
---
src/solid-picture.js | 1 -
1 file changed, 1 deletion(-)
diff --git a/src/solid-picture.js b/src/solid-picture.js
index 8f73247..6246431 100644
--- a/src/solid-picture.js
+++ b/src/solid-picture.js
@@ -151,7 +151,6 @@ export default class SolidPicture extends SolidTemplateElement {
fields="${fields}${additionalFields}"
${additionalFieldsAttrs}
upload-url-${fields}="${uploadSrc}"
- extra-context="{'${fields}':'foaf:depiction'}"
next="${next}"
></solid-form>
</solid-ac-checker>
--
GitLab
From 39e1b1ee0298e0f298dfad3d051b03237c4ef667 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Fri, 19 Feb 2021 12:34:00 +0100
Subject: [PATCH 03/11] minor: active profiel checkbox
---
src/solid-directory.js | 10 ++++++++++
src/styles/checkbox.scss | 39 ++++++++++++++++++++++++++-------------
2 files changed, 36 insertions(+), 13 deletions(-)
diff --git a/src/solid-directory.js b/src/solid-directory.js
index 6f4b3f9..9e39397 100644
--- a/src/solid-directory.js
+++ b/src/solid-directory.js
@@ -61,6 +61,16 @@ export default class SolidDirectory extends SolidTemplateElement {
submit-button="GO"
></solid-form-search>
+ <div class="directory-checkbox simple text-disable-selection">
+ <div class="checkbox-case">
+ <label>
+ <input type='checkbox' checked onclick="javascript:document.querySelector('[filtered-by=solid-directory-listing-search]').toggleAttribute('required-account.picture');document.querySelector('[filtered-by=solid-directory-listing-search]').component.populate();" />
+ <div class="revert"></div>
+ </label>
+ </div>
+ <span class="checkbox-text" onclick="javascript:document.querySelectorAll('solid-directory .checkbox-case > label').forEach(e => e.click());">Show only active profiles</span>
+ </div>
+
<solid-widget name="directory-hidden">
<template>
\${value == "" ? \`<div class='directory-info bg-color-primary text-color-white text-bold padding-xsmall whitespace-normal'>
diff --git a/src/styles/checkbox.scss b/src/styles/checkbox.scss
index 2689881..5a8301d 100644
--- a/src/styles/checkbox.scss
+++ b/src/styles/checkbox.scss
@@ -3,6 +3,13 @@
position: relative !important;
line-height: 17px !important;
padding-top: 2rem !important;
+ &.simple {
+ position: relative !important;
+ padding-top: 0 !important;
+ left: 11px;
+ top: -15px;
+ cursor: pointer;
+ }
.checkbox-text {
display: inline-block;
@@ -10,7 +17,8 @@
padding-left: 6px;
}
- solid-form-checkbox[name="settings.receiveMail"] {
+ solid-form-checkbox[name="settings.receiveMail"],
+ .checkbox-case {
display: contents;
label {
@@ -33,20 +41,25 @@
right: 0;
bottom: 0;
background-color: #f6f6f6;
+ &.revert {
+ background-color: white;
+ }
transition: .4s;
border-radius: 10px;
- }
-
- div:before {
- position: absolute;
- content: "";
- height: 11px;
- width: 11px;
- left: 1px;
- bottom: 2px;
- background-color: white;
- transition: .4s;
- border-radius: 10px;
+ &:before {
+ position: absolute;
+ content: "";
+ height: 11px;
+ width: 11px;
+ left: 1px;
+ bottom: 2px;
+ background-color: white;
+ transition: .4s;
+ border-radius: 10px;
+ }
+ &.revert:before {
+ background-color: #D6CECE;
+ }
}
input:checked+div:before {
--
GitLab
From 59b8de87a5f6edd34ba5176c882d535561c8550f Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Mon, 22 Feb 2021 20:35:09 +0100
Subject: [PATCH 04/11] major: startinblox-feature-requests#181
---
src/solid-directory.js | 83 +++++++------
src/solid-picture.js | 46 ++++---
src/solid-profile.js | 106 +++++++++-------
src/styles/commons.scss | 253 +++++++++++++++++++-------------------
src/styles/directory.scss | 96 +++++++--------
src/styles/index.scss | 8 ++
src/styles/profiles.scss | 115 ++++++++---------
7 files changed, 363 insertions(+), 344 deletions(-)
diff --git a/src/solid-directory.js b/src/solid-directory.js
index 9e39397..bf68217 100644
--- a/src/solid-directory.js
+++ b/src/solid-directory.js
@@ -1,4 +1,6 @@
-import { SolidTemplateElement } from "https://cdn.skypack.dev/@startinblox/core@0.15";
+import {
+ SolidTemplateElement
+} from "https://cdn.skypack.dev/@startinblox/core@0.15";
import ComponentPath from './path.js';
export default class SolidDirectory extends SolidTemplateElement {
@@ -15,22 +17,23 @@ export default class SolidDirectory extends SolidTemplateElement {
};
}
- template({ dataSrc, rangeSkills, paginateBy = "9" }) {
+ template({
+ dataSrc,
+ rangeSkills,
+ paginateBy = "9"
+ }) {
+ let getRoute = (target) => target == "profileDirectory" ? "members" : "chat";
+ if (window.hubl) {
+ getRoute = window.hubl.getRoute;
+ }
+ const uniq = Math.random().toString(16).slice(2);
return `
- <solid-router default-route="members-list">
- <solid-route name="members-list"></solid-route>
- <solid-route name="member-profile" use-id></solid-route>
+ <solid-router default-route="${getRoute('profileDirectory')}-list">
+ <solid-route name="${getRoute('profileDirectory')}-list"></solid-route>
+ <solid-route name="${getRoute('profileDirectory')}-member-profile" use-id></solid-route>
</solid-router>
- <solid-widget name="member-info">
- <template>
- <div name="\${name}" class="\${value=='' ? 'hidden' : ''}">
- \${value}
- </div>
- </template>
- </solid-widget>
-
- <div id="members-list" data-view="members-list">
+ <div id="${getRoute('profileDirectory')}-list" data-view="${getRoute('profileDirectory')}-list">
<div>
<h2 class="margin-left-xsmall sm-margin-none text-xlarge text-bold text-color-heading text-uppercase">${this.localize('module.name')}</h2>
@@ -71,12 +74,12 @@ export default class SolidDirectory extends SolidTemplateElement {
<span class="checkbox-text" onclick="javascript:document.querySelectorAll('solid-directory .checkbox-case > label').forEach(e => e.click());">Show only active profiles</span>
</div>
- <solid-widget name="directory-hidden">
+ <solid-widget name="directory-hidden-${uniq}">
<template>
\${value == "" ? \`<div class='directory-info bg-color-primary text-color-white text-bold padding-xsmall whitespace-normal'>
<div class='icon icon-exclamation'></div>
<p class='first-line'>${this.localize('profileHidden.lineOne')}</p>
- <p class='second-line'>${this.localize('profileHidden.lineTwoOne')}<solid-link class="link color-white" next='solid-profile-my-profile'>${this.localize('profileHidden.lineTwoTwo')}</solid-link>${this.localize('profileHidden.lineTwoThree')}</p>
+ <p class='second-line'>${this.localize('profileHidden.lineTwoOne')}<solid-link class="link color-white" next='${getRoute('profileDirectory')}-my-profile'>${this.localize('profileHidden.lineTwoTwo')}</solid-link>${this.localize('profileHidden.lineTwoThree')}</p>
</div>\` : ""}
</template>
</solid-widget>
@@ -85,10 +88,10 @@ export default class SolidDirectory extends SolidTemplateElement {
<solid-display
bind-user
fields="account.picture"
- widget-account.picture="directory-hidden"
+ widget-account.picture="directory-hidden-${uniq}"
></solid-display>
- <div id="loader-members-list" class="loader loader-top">
+ <div id="loader-members-list-${uniq}" class="loader loader-top">
<div></div>
<div></div>
<div></div>
@@ -105,7 +108,7 @@ export default class SolidDirectory extends SolidTemplateElement {
counter-template="<span>\${counter} ${this.localize('members')}</span>"
fields="segment1(send, segment2(member-picture(account.picture), segment3(name, member-pseudo(at, username), profile.job)), segment4(profile.city, communities, skills))"
- loader-id="loader-members-list"
+ loader-id="loader-members-list-${uniq}"
required-account.picture=""
required-first_name=""
@@ -128,13 +131,13 @@ export default class SolidDirectory extends SolidTemplateElement {
class-communities="segment block margin-bottom-xsmall"
class-skills="skills segment block children-tag whitespace-normal"
- action-send="messages"
+ action-send="${getRoute('chat')}"
label-send=""
value-send=""
value-at="@"
widget-account.picture="hubl-user-avatar"
- widget-profile.city='directory-city'
+ widget-profile.city='directory-city-${uniq}'
multiple-communities
multiple-communities-fields="community.name"
@@ -143,42 +146,42 @@ export default class SolidDirectory extends SolidTemplateElement {
multiple-skills-fields="name"
paginate-by="${paginateBy}"
- next="member-profile">
+ next="${getRoute('profileDirectory')}-member-profile">
</solid-display>
</div>
</div>
- <div id="member-profile" data-view="member-profile" hidden>
+ <div id="${getRoute('profileDirectory')}-members-profile" data-view="${getRoute('profileDirectory')}-member-profile" hidden>
<div class="segment full sm-hidden text-right">
- <solid-link class="backlink text-xlarge line-xlarge margin-right-xxsmall" next="members-list">${this.localize('back')}</solid-link>
+ <solid-link class="backlink text-xlarge line-xlarge margin-right-xxsmall" next="${getRoute('profileDirectory')}-list">${this.localize('back')}</solid-link>
</div>
<div class="segment block shadow bg-color-white margin-right-xxsmall margin-top-large margin-left-xxsmall sm-margin-none">
- <div id="loader-member-profile" class="loader">
+ <div id="loader-member-profile-${uniq}" class="loader">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
- <solid-widget name="directory-city">
+ <solid-widget name="directory-city-${uniq}">
<template>
<span class="segment block city-display margin-bottom-xsmall">\${value}</span>
</template>
</solid-widget>
- <solid-widget name="directory-link-tel">
+ <solid-widget name="directory-link-tel-${uniq}">
<template>
\${value ? '': ''}
<a class="phone-display segment block link margin-bottom-xsmall" href="tel:\${value}">\${value}</a>
</template>
</solid-widget>
- <solid-widget name="directory-link-mailto">
+ <solid-widget name="directory-link-mailto-${uniq}">
<template>
<a class="email-display segment block link margin-bottom-xsmall" href="mailto:\${value}">\${value}</a>
</template>
</solid-widget>
- <solid-widget name="directory-website">
+ <solid-widget name="directory-website-${uniq}">
<template>
<a class="website-display segment block link margin-bottom-xsmall" href="\${value}" target="_blank">\${value}</a>
</template>
@@ -186,7 +189,7 @@ export default class SolidDirectory extends SolidTemplateElement {
<solid-display class="segment block padding-medium sm-padding-none sm-whitespace-normal"
fields="segment1(member-picture(account.picture)), segment2(name, member-pseudo(at, username), profile.job,segment3(send), profile.city, communities, email, profile.phone, profile.website), segment4(send1)"
- loader-id="loader-member-profile"
+ loader-id="loader-member-profile-${uniq}"
class-segment1="segment sm-full text-center"
class-member-picture="segment padding-medium avatar-wrapper"
@@ -206,18 +209,18 @@ export default class SolidDirectory extends SolidTemplateElement {
value-at="@"
widget-account.picture="hubl-user-avatar"
- widget-profile.city="directory-city"
- widget-email="directory-link-mailto"
- widget-profile.phone="directory-link-tel"
- widget-profile.website="directory-website"
+ widget-profile.city="directory-city-${uniq}"
+ widget-email="directory-link-mailto-${uniq}"
+ widget-profile.phone="directory-link-tel-${uniq}"
+ widget-profile.website="directory-website-${uniq}"
multiple-communities
multiple-communities-fields="community.name"
- action-send="messages"
+ action-send="${getRoute('chat')}"
value-send=""
label-send="${this.localize('sendMessage')}"
- action-send1="messages"
+ action-send1="${getRoute('chat')}"
value-send1=""
label-send1="${this.localize('sendMessage')}"
@@ -227,9 +230,15 @@ export default class SolidDirectory extends SolidTemplateElement {
<div class="border-top padding-medium padding-top-small border-color-grey">
<div class="padding-right-medium padding-bottom-xsmall padding-left-medium sm-padding-none whitespace-normal">
<p class="text-color-heading text-semibold">${this.localize('skills')}:</p>
+ <div id="loader-member-skills-${uniq}" class="loader">
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ </div>
<solid-display
fields="skills"
- loader-id="loader-member-profile"
+ loader-id="loader-member-skills-${uniq}"
class-skills="children-tag"
multiple-skills
diff --git a/src/solid-picture.js b/src/solid-picture.js
index 6246431..10c24e8 100644
--- a/src/solid-picture.js
+++ b/src/solid-picture.js
@@ -1,6 +1,8 @@
/* globals MutationObserver */
-import { SolidTemplateElement } from "https://cdn.skypack.dev/@startinblox/core@0.15";
+import {
+ SolidTemplateElement
+} from "https://cdn.skypack.dev/@startinblox/core@0.15";
import ComponentPath from './path.js';
export default class SolidPicture extends SolidTemplateElement {
@@ -28,27 +30,31 @@ export default class SolidPicture extends SolidTemplateElement {
this.remove = await this.waitForElement(this, '#solid-picture-remove');
this.browse.addEventListener('click', this.onBrowseClick.bind(this));
this.remove.addEventListener('click', this.onRemoveClick.bind(this));
-
+
this.reloadPreview();
-
+
this.form = await this.waitForElement(this, 'solid-form');
this.form.addEventListener('formChange', this.formChange.bind(this));
-
+
this.uploader = await this.waitForElement(this.form, 'solid-form-file');
this.uploader.hidden = true;
-
+
this.dataHolderValue = await this.waitForElementValue(this.uploader, 'input[data-holder]');
this.button = await this.waitForElement(this.uploader, 'button');
this.button.hidden = !this.dataHolderValue.length;
this.reloadPreview(this.dataHolderValue);
-
+
}
- dataHolderChange({ target }) {
+ dataHolderChange({
+ target
+ }) {
this.reloadPreview(target.value);
}
- async formChange({ target }) {
+ async formChange({
+ target
+ }) {
this.dataHolder = await this.waitForElement(target, 'solid-form-file input[data-holder]');
this.dataHolder.addEventListener('change', this.dataHolderChange.bind(this));
}
@@ -63,12 +69,12 @@ export default class SolidPicture extends SolidTemplateElement {
waitForElement(element, selector) {
return new Promise(resolve => {
- if ( element.querySelector(selector) ) {
+ if (element.querySelector(selector)) {
return resolve(element.querySelector(selector));
}
const observer = new MutationObserver(mutations => {
- if ( element.querySelector(selector) ) {
+ if (element.querySelector(selector)) {
resolve(element.querySelector(selector));
observer.disconnect();
}
@@ -83,12 +89,12 @@ export default class SolidPicture extends SolidTemplateElement {
waitForElementValue(element, selector) {
return new Promise(resolve => {
const el = element.querySelector(selector);
- if ( el && el.value && el.value.length ) {
+ if (el && el.value && el.value.length) {
return resolve(el.value);
}
const observer = new MutationObserver(mutations => {
const el = element.querySelector(selector);
- if ( el && el.value && el.value.length ) {
+ if (el && el.value && el.value.length) {
resolve(el.value);
observer.disconnect();
}
@@ -116,9 +122,17 @@ export default class SolidPicture extends SolidTemplateElement {
const button = this.querySelector('solid-form-file button');
button && button.click();
}
-
- template({ dataSrc, uploadSrc, uploadId, nestedFields, fields, next, additional }) {
- const additionalFields = additional ? `, ${additional}` : '';
+
+ template({
+ dataSrc,
+ uploadSrc,
+ uploadId,
+ nestedFields,
+ fields,
+ next,
+ additional
+ }) {
+ const additionalFields = additional ? `, ${additional}` : '';
const additionalFieldsAttrs = additional ? additional.split(',').map(f => `
widget-${f.trim()}="solid-form-hidden"
`) : '';
@@ -159,4 +173,4 @@ export default class SolidPicture extends SolidTemplateElement {
}
}
-customElements.define("solid-picture", SolidPicture);
+customElements.define("solid-picture", SolidPicture);
\ No newline at end of file
diff --git a/src/solid-profile.js b/src/solid-profile.js
index e4294a4..71cab7a 100644
--- a/src/solid-profile.js
+++ b/src/solid-profile.js
@@ -16,18 +16,23 @@ export default class SolidProfile extends SolidTemplateElement {
}
template({ dataSrc, uploadSrc, rangeSkills }) {
+ let getRoute = () => "members";
+ if (window.hubl) {
+ getRoute = window.hubl.getRoute;
+ }
+ const uniq = Math.random().toString(16).slice(2);
return `
- <solid-router class="hidden" default-route="solid-profile-my-profile">
- <solid-route name="solid-profile-my-profile"></solid-route>
- <solid-route name="solid-profile-edit-profile"></solid-route>
- <solid-route name="solid-profile-edit-picture"></solid-route>
- <solid-route name="solid-profile-edit-skills"></solid-route>
+ <solid-router class="hidden" default-route="${getRoute('profileDirectory')}-my-profile">
+ <solid-route name="${getRoute('profileDirectory')}-my-profile"></solid-route>
+ <solid-route name="${getRoute('profileDirectory')}-edit-profile"></solid-route>
+ <solid-route name="${getRoute('profileDirectory')}-edit-picture"></solid-route>
+ <solid-route name="${getRoute('profileDirectory')}-edit-skills"></solid-route>
</solid-router>
- <div id="solid-profile-my-profile" class="padding-medium sm-padding-right-xsmall sm-padding-left-xsmall" data-view="solid-profile-my-profile">
+ <div id="${getRoute('profileDirectory')}-my-profile" class="padding-medium sm-padding-right-xsmall sm-padding-left-xsmall" data-view="${getRoute('profileDirectory')}-my-profile">
- <solid-widget name="directory-hidden-profile">
+ <solid-widget name="directory-hidden-profile-${uniq}">
<template>
\${value == "" ? \`<div class='directory-info bg-color-primary text-color-white text-bold padding-xsmall whitespace-normal'>
<div class='icon icon-exclamation'></div>
@@ -39,49 +44,54 @@ export default class SolidProfile extends SolidTemplateElement {
<div class="segment block shadow bg-color-white margin-right-xxsmall margin-left-xxsmall sm-margin-none">
- <div id="loader-my-profile" class="loader loader-top">
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- </div>
-
<solid-display
data-src="${dataSrc}"
fields="account.picture"
- widget-account.picture="directory-hidden-profile"
+ widget-account.picture="directory-hidden-profile-${uniq}"
></solid-display>
<div class="segment block padding-medium sm-padding-none sm-whitespace-normal">
<div class="segment sm-full padding-medium text-center">
<solid-ac-checker class="button-modify-picture" permission="acl:Write" data-src="${dataSrc}">
- <solid-link class="button rounded rounded-icon icon-pencil reversed color-secondary bordered" next="solid-profile-edit-picture"></solid-link>
+ <solid-link class="button rounded rounded-icon icon-pencil reversed color-secondary bordered" next="${getRoute('profileDirectory')}-edit-picture"></solid-link>
</solid-ac-checker>
+ <div id="loader-my-profile-${uniq}-1" class="loader loader-top">
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ </div>
<solid-display
class="segment avatar-wrapper"
data-src="${dataSrc}"
label-account.picture=""
nested-field="account"
fields="picture"
- loader-id="loader-my-profile"
+ loader-id="loader-my-profile-${uniq}-1"
class-picture="avatar xlarge"
widget-picture="hubl-user-avatar"
></solid-display>
</div>
<solid-ac-checker class="button-modify-profile" permission="acl:Write" data-src="${dataSrc}">
- <solid-link class="button rounded rounded-icon icon-pencil reversed color-secondary bordered" next="solid-profile-edit-profile"></solid-link>
+ <solid-link class="button rounded rounded-icon icon-pencil reversed color-secondary bordered" next="${getRoute('profileDirectory')}-edit-profile"></solid-link>
</solid-ac-checker>
<div class="member-bio segment sm-full padding-medium text-top whitespace-normal">
- <solid-widget name="directory-receivemail">
+ <solid-widget name="directory-receivemail-${uniq}">
<template>
\${await value == "true" ? \`<div class="margin-top-xlarge"><span class="receiveMail-display">${this.localize('settings.receiveMail')}</span></div>\` : ""}
</template>
</solid-widget>
+ <div id="loader-my-profile-${uniq}-2" class="loader loader-top">
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ </div>
<solid-display
data-src="${dataSrc}"
fields="name, member-pseudo(at,username), profile.job, profile.city, communities, email, profile.phone, profile.website, settings.receiveMail"
- loader-id="loader-my-profile"
+ loader-id="loader-my-profile-${uniq}-2"
class-name="segment block text-color-heading text-xxlarge text-bold sm-text-center margin-bottom-xxsmall whitespace-normal"
class-member-pseudo="segment block sm-text-center whitespace-normal"
@@ -89,11 +99,11 @@ export default class SolidProfile extends SolidTemplateElement {
class-communities="segment block margin-bottom-xsmall"
value-at="@"
- widget-profile.city="directory-city"
- widget-email="directory-link-mailto"
- widget-profile.phone="directory-link-tel"
- widget-profile.website="directory-website"
- widget-settings.receiveMail="directory-receivemail"
+ widget-profile.city="directory-city-${uniq}"
+ widget-email="directory-link-mailto-${uniq}"
+ widget-profile.phone="directory-link-tel-${uniq}"
+ widget-profile.website="directory-website-${uniq}"
+ widget-settings.receiveMail="directory-receivemail-${uniq}"
multiple-communities
multiple-communities-fields="community.name"
></solid-display>
@@ -102,48 +112,54 @@ export default class SolidProfile extends SolidTemplateElement {
<div class="border-top padding-medium padding-top-small border-color-grey">
<solid-ac-checker class="button-modify-skill" permission="acl:Write" data-src="${dataSrc}">
- <solid-link class="button rounded rounded-icon icon-pencil reversed color-secondary bordered" next="solid-profile-edit-skills"></solid-link>
+ <solid-link class="button rounded rounded-icon icon-pencil reversed color-secondary bordered" next="${getRoute('profileDirectory')}-edit-skills"></solid-link>
</solid-ac-checker>
<div class="padding-right-medium padding-bottom-xsmall padding-left-medium sm-padding-none whitespace-normal">
<p class="text-color-heading text-semibold">${this.localize('skills.main')}</p>
+ <div id="loader-my-profile-${uniq}-3" class="loader loader-top">
+ <div></div>
+ <div></div>
+ <div></div>
+ <div></div>
+ </div>
<solid-display
data-src="${dataSrc}"
nested-field="skills"
fields="name"
class-name="tag margin-bottom-xsmall margin-right-xsmall"
- loader-id="loader-my-profile"
+ loader-id="loader-my-profile-${uniq}-3"
></solid-display>
</div>
</div>
</div>
</div>
- <div id="solid-profile-edit-profile" class="bg-color-white whitespace-normal" data-view="solid-profile-edit-profile" hidden>
+ <div id="${getRoute('profileDirectory')}-edit-profile" class="bg-color-white whitespace-normal" data-view="${getRoute('profileDirectory')}-edit-profile" hidden>
<div class="segment full padding-top-xsmall padding-right-large padding-bottom-xxsmall padding-left-large sm-padding-none sm-padding-right-xsmall sm-padding-left-xsmall border-bottom border-color-grey">
<div class="segment half sm-full">
<h2 class="text-xxlarge text-bold text-color-heading">${this.localize('profile.edit')}</h2>
</div>
<div class="segment half sm-hidden text-right">
- <solid-link class="backlink" next="solid-profile-my-profile">${this.localize('back')}</solid-link>
+ <solid-link class="backlink" next="${getRoute('profileDirectory')}-my-profile">${this.localize('back')}</solid-link>
</div>
</div
<div>
<solid-ac-checker permission="acl:Write" data-src="${dataSrc}">
- <div id="loader-edit-profile" class="loader loader-top">
+ <div id="loader-edit-profile-${uniq}" class="loader loader-top">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
- <solid-widget name='directory-email-field'>
+ <solid-widget name='directory-email-field-${uniq}'>
<template>
<label class="text-small text-semibold text-uppercase text-color-heading">${this.localize('profile.email')} *</label>
<input type="email" label="${this.localize('profile.email')} *" name="email" required value="\${value}" data-holder />
</template>
</solid-widget>
- <solid-widget name='directory-website-field'>
+ <solid-widget name='directory-website-field-${uniq}'>
<template>
<label class="text-small text-semibold text-uppercase text-color-heading">${this.localize('profile.website')}</label>
<input type="url" label="${this.localize('profile.website')}" name="profile.website" value="\${value}" data-holder />
@@ -157,10 +173,10 @@ export default class SolidProfile extends SolidTemplateElement {
required-last_name
required-first_name
required-email
- loader-id="loader-edit-profile"
+ loader-id="loader-edit-profile-${uniq}"
widget-username="solid-form-hidden"
- widget-email="directory-email-field"
+ widget-email="directory-email-field-${uniq}"
class-last_name="segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
label-last_name="${this.localize('profile.name')} *"
@@ -183,7 +199,7 @@ export default class SolidProfile extends SolidTemplateElement {
class-profile.website="segment margin-bottom-medium third sm-full padding-right-small sm-padding-none"
label-profile.website="${this.localize('profile.website')}"
- widget-profile.website="directory-website-field"
+ widget-profile.website="directory-website-field-${uniq}"
class-directory-checkbox="segment margin-bottom-medium padding-top-xsmall sm-padding-top-none full directory-checkbox"
class-settings.receiveMail="segment margin-right-xsmall"
@@ -193,19 +209,19 @@ export default class SolidProfile extends SolidTemplateElement {
widget-text-checkbox="span"
value-text-checkbox="${this.localize('settings.receiveMail')}"
- next="solid-profile-my-profile"
+ next="${getRoute('profileDirectory')}-my-profile"
></solid-form>
</solid-ac-checker>
</div>
</div>
- <div id="solid-profile-edit-picture" class="bg-color-white background-height" data-view="solid-profile-edit-picture" hidden>
+ <div id="${getRoute('profileDirectory')}-edit-picture" class="bg-color-white background-height" data-view="${getRoute('profileDirectory')}-edit-picture" hidden>
<div class="segment full padding-top-xsmall padding-right-large padding-bottom-xxsmall padding-left-large sm-padding-none sm-padding-right-xsmall sm-padding-left-xsmall border-bottom border-color-grey">
<div class="segment half sm-full">
<h2 class="text-xxlarge text-bold text-color-heading">${this.localize('profile.edit')}</h2>
</div>
<div class="segment half sm-hidden text-right">
- <solid-link class="backlink" next="solid-profile-my-profile">${this.localize('back')}</solid-link>
+ <solid-link class="backlink" next="${getRoute('profileDirectory')}-my-profile">${this.localize('back')}</solid-link>
</div>
</div>
@@ -219,29 +235,29 @@ export default class SolidProfile extends SolidTemplateElement {
<solid-picture
data-src="${dataSrc}"
upload-src="${uploadSrc}"
- upload-id="solid-profile-edit-picture"
+ upload-id="${getRoute('profileDirectory')}-edit-picture"
nested-fields="account"
fields="picture"
- next="solid-profile-my-profile"
+ next="${getRoute('profileDirectory')}-my-profile"
></solid-picture>
</solid-ac-checker>
</div>
</div>
</div>
- <div id="solid-profile-edit-skills" class="bg-color-white" data-view="solid-profile-edit-skills" hidden>
+ <div id="${getRoute('profileDirectory')}-edit-skills" class="bg-color-white" data-view="${getRoute('profileDirectory')}-edit-skills" hidden>
<div class="segment full padding-top-xsmall padding-right-large padding-bottom-xxsmall padding-left-large sm-padding-none sm-padding-right-xsmall sm-padding-left-xsmall border-bottom border-color-grey">
<div class="segment half sm-full">
<h2 class="text-xxlarge text-bold text-color-heading">${this.localize('profile.edit')}</h2>
</div>
<div class="segment half sm-hidden text-right">
- <solid-link class="backlink" next="solid-profile-my-profile">${this.localize('back')}</solid-link>
+ <solid-link class="backlink" next="${getRoute('profileDirectory')}-my-profile">${this.localize('back')}</solid-link>
</div>
</div>
<div>
<solid-ac-checker permission="acl:Write" data-src="${dataSrc}">
- <div id="loader-edit-skills" class="loader loader-top">
+ <div id="loader-edit-skills-${uniq}" class="loader loader-top">
<div></div>
<div></div>
<div></div>
@@ -255,7 +271,7 @@ export default class SolidProfile extends SolidTemplateElement {
range-skills="${rangeSkills}"
order-asc-skills="name"
fields="skills, username, email"
- loader-id="loader-edit-skills"
+ loader-id="loader-edit-skills-${uniq}"
widget-username="solid-form-hidden"
widget-email="solid-form-hidden"
@@ -264,7 +280,7 @@ export default class SolidProfile extends SolidTemplateElement {
multiple-skills="solid-form-multipleselect-autocompletion-label"
class-skills="segment margin-bottom-medium full text-small text-semibold text-uppercase text-color-heading"
- next="solid-profile-my-profile"
+ next="${getRoute('profileDirectory')}-my-profile"
></solid-form>
</solid-ac-checker>
</div>
diff --git a/src/styles/commons.scss b/src/styles/commons.scss
index 6d861d2..924b2e1 100644
--- a/src/styles/commons.scss
+++ b/src/styles/commons.scss
@@ -1,156 +1,151 @@
-#solid-profile-my-profile,
-#members-list,
-#member-profile {
+.directory-info {
- .directory-info {
+ div {
+ float: left;
+ margin-top: 14px;
+ margin-right: 14px;
+ margin-left: 4px;
- div {
- float: left;
- margin-top: 14px;
- margin-right: 14px;
- margin-left: 4px;
-
- &::before {
- font-size: 30px;
- }
+ &::before {
+ font-size: 30px;
}
+ }
- p.first-line {
- line-height: 22px;
- letter-spacing: 0.28px;
- line-height: 22px;
- margin-bottom: 0;
- margin-top: 7px;
- }
+ p.first-line {
+ line-height: 22px;
+ letter-spacing: 0.28px;
+ line-height: 22px;
+ margin-bottom: 0;
+ margin-top: 7px;
+ }
- p.second-line {
- letter-spacing: 0.28px;
- line-height: 22px;
- margin-top: 0;
- margin-bottom: 7px;
- }
+ p.second-line {
+ letter-spacing: 0.28px;
+ line-height: 22px;
+ margin-top: 0;
+ margin-bottom: 7px;
}
+}
- .city-display:not(:empty)::before {
- background-color: var(--color-third);
- content: '';
- display: inline-block;
- height: 22px;
- margin-bottom: -4px;
- mask: url('/lib/solid-directory/dist/assets/map-marker.svg') 1% 1% / 1px 1px no-repeat;
- mask-size: cover;
- -webkit-mask: url('/lib/solid-directory/dist/assets/map-marker.svg') 1% 1% / 1px 1px no-repeat;
- -webkit-mask-size: cover;
- margin-right: 10px;
- width: 22px;
+.city-display:not(:empty)::before {
+ background-color: var(--color-third);
+ content: '';
+ display: inline-block;
+ height: 22px;
+ margin-bottom: -4px;
+ mask: url('/lib/solid-directory/dist/assets/map-marker.svg') 1% 1% / 1px 1px no-repeat;
+ mask-size: cover;
+ -webkit-mask: url('/lib/solid-directory/dist/assets/map-marker.svg') 1% 1% / 1px 1px no-repeat;
+ -webkit-mask-size: cover;
+ margin-right: 10px;
+ width: 22px;
+}
+
+.email-display::before {
+ background-color: var(--color-third);
+ content: '';
+ display: inline-block;
+ height: 22px;
+ mask: url('/lib/solid-directory/dist/assets/email-outline.svg') 1% 1% / 1px 1px no-repeat;
+ mask-size: cover;
+ -webkit-mask: url('/lib/solid-directory/dist/assets/email-outline.svg') 1% 1% / 1px 1px no-repeat;
+ -webkit-mask-size: cover;
+ margin-right: 10px;
+ margin-bottom: -6px;
+ width: 22px;
+}
+
+.phone-display::before {
+ background-color: var(--color-third);
+ content: '';
+ display: inline-block;
+ height: 22px;
+ mask: url('/lib/solid-directory/dist/assets/cellphone-iphone.svg') 1% 1% / 1px 1px no-repeat;
+ mask-size: cover;
+ -webkit-mask: url('/lib/solid-directory/dist/assets/cellphone-iphone.svg') 1% 1% / 1px 1px no-repeat;
+ -webkit-mask-size: cover;
+ margin-right: 10px;
+ margin-bottom: -4px;
+ width: 22px;
+}
+
+.website-display::before {
+ background-color: var(--color-third);
+ content: '';
+ display: inline-block;
+ height: 22px;
+ mask: url('/lib/solid-directory/dist/assets/link-variant.svg') 1% 1% / 1px 1px no-repeat;
+ mask-size: cover;
+ -webkit-mask: url('/lib/solid-directory/dist/assets/link-variant.svg') 1% 1% / 1px 1px no-repeat;
+ -webkit-mask-size: cover;
+ margin-right: 10px;
+ margin-bottom: -5px;
+ width: 22px;
+}
+
+.receiveMail-display::before {
+ background-color: var(--color-third);
+ content: '';
+ display: inline-block;
+ height: 22px;
+ margin-bottom: -4px;
+ mask: url('/lib/solid-directory/dist/assets/bell.svg') 1% 1% / 1px 1px no-repeat;
+ mask-size: cover;
+ -webkit-mask: url('/lib/solid-directory/dist/assets/bell.svg') 1% 1% / 1px 1px no-repeat;
+ -webkit-mask-size: cover;
+ margin-right: 10px;
+ width: 22px;
+}
+
+.city-display:empty,
+.email-display:empty,
+.phone-display:empty,
+.website-display:empty {
+ display: none;
+}
+
+solid-multiple[name="communities"] {
+ height: 22px;
+ white-space: nowrap;
+
+ * {
+ display: contents;
}
- .email-display::before {
- background-color: var(--color-third);
- content: '';
- display: inline-block;
- height: 22px;
- mask: url('/lib/solid-directory/dist/assets/email-outline.svg') 1% 1% / 1px 1px no-repeat;
- mask-size: cover;
- -webkit-mask: url('/lib/solid-directory/dist/assets/email-outline.svg') 1% 1% / 1px 1px no-repeat;
- -webkit-mask-size: cover;
- margin-right: 10px;
- margin-bottom: -6px;
- width: 22px;
+ solid-display-value {
+ &:after {
+ content: ",";
+ margin-right: 5px;
+ }
+
+ display: inline-block !important;
}
- .phone-display::before {
- background-color: var(--color-third);
- content: '';
- display: inline-block;
- height: 22px;
- mask: url('/lib/solid-directory/dist/assets/cellphone-iphone.svg') 1% 1% / 1px 1px no-repeat;
- mask-size: cover;
- -webkit-mask: url('/lib/solid-directory/dist/assets/cellphone-iphone.svg') 1% 1% / 1px 1px no-repeat;
- -webkit-mask-size: cover;
- margin-right: 10px;
- margin-bottom: -4px;
- width: 22px;
+ >solid-display>div>solid-display:last-child>div>solid-display-value:after {
+ display: none;
}
- .website-display::before {
- background-color: var(--color-third);
- content: '';
+ >solid-display {
display: inline-block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ width: calc(100% - 22px - 0.5rem);
height: 22px;
- mask: url('/lib/solid-directory/dist/assets/link-variant.svg') 1% 1% / 1px 1px no-repeat;
- mask-size: cover;
- -webkit-mask: url('/lib/solid-directory/dist/assets/link-variant.svg') 1% 1% / 1px 1px no-repeat;
- -webkit-mask-size: cover;
- margin-right: 10px;
- margin-bottom: -5px;
- width: 22px;
+ line-height: 22px;
}
- .receiveMail-display::before {
+ &:before {
background-color: var(--color-third);
content: '';
display: inline-block;
height: 22px;
- margin-bottom: -4px;
- mask: url('/lib/solid-directory/dist/assets/bell.svg') 1% 1% / 1px 1px no-repeat;
+ mask: url("/lib/solid-directory/dist/assets/atom.svg") 1% 1%/1px 1px no-repeat;
mask-size: cover;
- -webkit-mask: url('/lib/solid-directory/dist/assets/bell.svg') 1% 1% / 1px 1px no-repeat;
+ -webkit-mask: url("/lib/solid-directory/dist/assets/atom.svg") 1% 1%/1px 1px no-repeat;
+ mask-size: 1px 1px;
-webkit-mask-size: cover;
margin-right: 10px;
width: 22px;
}
-
- .city-display:empty,
- .email-display:empty,
- .phone-display:empty,
- .website-display:empty {
- display: none;
- }
-
- solid-multiple[name="communities"] {
- height: 22px;
- white-space: nowrap;
-
- * {
- display: contents;
- }
-
- solid-display-value {
- &:after {
- content: ",";
- margin-right: 5px;
- }
-
- display: inline-block !important;
- }
-
- >solid-display>div>solid-display:last-child>div>solid-display-value:after {
- display: none;
- }
-
- >solid-display {
- display: inline-block;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- width: calc(100% - 22px - 0.5rem);
- height: 22px;
- line-height: 22px;
- }
-
- &:before {
- background-color: var(--color-third);
- content: '';
- display: inline-block;
- height: 22px;
- mask: url("/lib/solid-directory/dist/assets/atom.svg") 1% 1%/1px 1px no-repeat;
- mask-size: cover;
- -webkit-mask: url("/lib/solid-directory/dist/assets/atom.svg") 1% 1%/1px 1px no-repeat;
- mask-size: 1px 1px;
- -webkit-mask-size: cover;
- margin-right: 10px;
- width: 22px;
- }
- }
}
diff --git a/src/styles/directory.scss b/src/styles/directory.scss
index be3c5c5..dbc9c7b 100644
--- a/src/styles/directory.scss
+++ b/src/styles/directory.scss
@@ -1,62 +1,58 @@
-#members-list {
+.counter>div:nth-child(1) {
+ display: block !important;
+ position: relative;
+ text-align: center;
+ margin-top: 30px;
+ margin-bottom: 20px;
+
+ &::before {
+ border-top: 1px solid #807A7A;
+ bottom: 0;
+ content: '';
+ left: 0;
+ margin: 0 auto;
+ opacity: 0.2;
+ position: absolute;
+ right: 0;
+ top: 50%;
+ width: 100%;
+ }
- .counter>div:nth-child(1) {
- display: block !important;
+ &>span {
+ padding: 0 21.5px 0 21.5px;
+ background: #F6F6F6;
+ font-size: 16px;
position: relative;
+ color: var(--color-heading);
text-align: center;
- margin-top: 30px;
- margin-bottom: 20px;
-
- &::before {
- border-top: 1px solid #807A7A;
- bottom: 0;
- content: '';
- left: 0;
- margin: 0 auto;
- opacity: 0.2;
- position: absolute;
- right: 0;
- top: 50%;
- width: 100%;
- }
-
- &>span {
- padding: 0 21.5px 0 21.5px;
- background: #F6F6F6;
- font-size: 16px;
- position: relative;
- color: var(--color-heading);
- text-align: center;
- }
- }
-
- .masonry>div:nth-child(2) {
- display: flex !important;
- flex-wrap: wrap;
- > solid-display {
- display: flex;
- }
}
+}
- .segment.hover:hover {
- box-shadow: 0 0 6px 0 rgba(46, 63, 88, 0.14);
- bottom: 2px;
- cursor: pointer;
+.masonry>div:nth-child(2) {
+ display: flex !important;
+ flex-wrap: wrap;
+ > solid-display {
+ display: flex;
}
+}
- .send-display {
- position: absolute;
- right: 20px;
- top: 20px;
- z-index: 1;
+.segment.hover:hover {
+ box-shadow: 0 0 6px 0 rgba(46, 63, 88, 0.14);
+ bottom: 2px;
+ cursor: pointer;
+}
- *::before {
- margin-top: 3px;
- }
- }
+.send-display {
+ position: absolute;
+ right: 20px;
+ top: 20px;
+ z-index: 1;
- .skills>solid-display>div>:nth-child(n+7) {
- display: none;
+ *::before {
+ margin-top: 3px;
}
}
+.skills>solid-display>div>:nth-child(n+7) {
+ display: none;
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 92e8613..57eb161 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -6,6 +6,14 @@ solid-profile {
@import 'directory';
@import 'profiles';
+ >div {
+ height: 100%;
+ }
+
+ solid-form-file[name="picture"] {
+ display: none;
+ }
+
.padding-very-xxlarge {
@media (min-width: 768.01px) {
padding-left: 135px;
diff --git a/src/styles/profiles.scss b/src/styles/profiles.scss
index a5b6903..ac57897 100644
--- a/src/styles/profiles.scss
+++ b/src/styles/profiles.scss
@@ -1,90 +1,71 @@
-#solid-profile-my-profile {
-
- .button-modify-picture {
- position: absolute;
- bottom: 51px;
- right: 30px;
- z-index: 1;
+.send-message {
+ right: 20px;
+ position: absolute;
+ bottom: 0;
+}
+.button-modify-picture {
+ position: absolute;
+ bottom: 51px;
+ right: 30px;
+ z-index: 1;
- @media (max-width: 768px) {
- left: 50%;
- margin-left: 77px;
- }
+ @media (max-width: 768px) {
+ left: 50%;
+ margin-left: 77px;
}
+}
- .button-modify-profile {
- position: absolute;
- top: 40px;
- right: 40px;
- z-index: 1;
+.button-modify-profile {
+ position: absolute;
+ top: 40px;
+ right: 40px;
+ z-index: 1;
- @media (max-width: 768px) {
- top: 20px;
- right: 20px;
- }
+ @media (max-width: 768px) {
+ top: 20px;
+ right: 20px;
}
+}
- .button-modify-skill {
- position: absolute;
- z-index: 1;
- right: 40px;
+.button-modify-skill {
+ position: absolute;
+ z-index: 1;
+ right: 40px;
- @media (max-width: 768px) {
- right: 20px;
- }
+ @media (max-width: 768px) {
+ right: 20px;
}
}
-#member-profile .send-message {
- right: 20px;
- position: absolute;
- bottom: 0;
+.avatar {
+ margin-left: auto;
+ margin-right: auto;
}
-#solid-profile-my-profile,
-#solid-profile-edit-picture,
-#member-profile {
-
- .avatar {
- margin-left: auto;
- margin-right: auto;
- }
-
- .member-bio {
- @media (max-width: 768px) {
- .member-bio {
- max-width: none;
- width: 100%;
- }
+.member-bio {
+ @media (max-width: 768px) {
+ .member-bio {
+ max-width: none;
+ width: 100%;
}
+ }
- @media (min-width: 768.01px) {
- max-width: 50%;
- }
+ @media (min-width: 768.01px) {
+ max-width: 50%;
}
}
-#solid-profile-my-profile,
-#solid-profile-edit-picture {
+.avatar-wrapper {
+ max-width: 100%;
- .avatar-wrapper {
+ .avatar {
max-width: 100%;
+ height: 0;
+ padding-bottom: 100%;
- .avatar {
+ img {
max-width: 100%;
- height: 0;
- padding-bottom: 100%;
-
- img {
- max-width: 100%;
- max-height: 100%;
- }
+ max-height: 100%;
}
}
-}
-
-#solid-profile-edit-profile,
-#solid-profile-edit-picture,
-#solid-profile-edit-skills {
- height: 100%;
-}
+}
\ No newline at end of file
--
GitLab
From cde8456045c60bebe3e5e7ab2f16022c594f2ec1 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Wed, 24 Feb 2021 12:34:50 +0100
Subject: [PATCH 05/11] fix: uniq generation
---
src/solid-directory.js | 10 +++++++++-
src/solid-profile.js | 10 +++++++++-
2 files changed, 18 insertions(+), 2 deletions(-)
diff --git a/src/solid-directory.js b/src/solid-directory.js
index bf68217..2f609bb 100644
--- a/src/solid-directory.js
+++ b/src/solid-directory.js
@@ -26,7 +26,15 @@ export default class SolidDirectory extends SolidTemplateElement {
if (window.hubl) {
getRoute = window.hubl.getRoute;
}
- const uniq = Math.random().toString(16).slice(2);
+ let uniq = Math.random().toString(16).slice(2);
+ if(window.hubl) {
+ let availables = window.hubl.components.filter(c=>c.type=="profileDirectory");
+ if(availables.length >= 1) {
+ uniq = availables[0].uniq;
+ } else {
+ console.error(`No component found for route ${type}`);
+ }
+ }
return `
<solid-router default-route="${getRoute('profileDirectory')}-list">
<solid-route name="${getRoute('profileDirectory')}-list"></solid-route>
diff --git a/src/solid-profile.js b/src/solid-profile.js
index 71cab7a..f83f416 100644
--- a/src/solid-profile.js
+++ b/src/solid-profile.js
@@ -20,7 +20,15 @@ export default class SolidProfile extends SolidTemplateElement {
if (window.hubl) {
getRoute = window.hubl.getRoute;
}
- const uniq = Math.random().toString(16).slice(2);
+ let uniq = Math.random().toString(16).slice(2);
+ if(window.hubl) {
+ let availables = window.hubl.components.filter(c=>c.type=="profileDirectory");
+ if(availables.length >= 1) {
+ uniq = availables[0].uniq;
+ } else {
+ console.error(`No component found for route ${type}`);
+ }
+ }
return `
<solid-router class="hidden" default-route="${getRoute('profileDirectory')}-my-profile">
<solid-route name="${getRoute('profileDirectory')}-my-profile"></solid-route>
--
GitLab
From ac0d8b645efa17ef56068659ca4669d151ad84f8 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Fri, 26 Feb 2021 15:46:28 +0100
Subject: [PATCH 06/11] minor: uniq behavior
---
src/solid-directory.js | 15 ++++-----------
src/solid-profile.js | 14 +++-----------
2 files changed, 7 insertions(+), 22 deletions(-)
diff --git a/src/solid-directory.js b/src/solid-directory.js
index 2f609bb..1aea6e1 100644
--- a/src/solid-directory.js
+++ b/src/solid-directory.js
@@ -13,28 +13,21 @@ export default class SolidDirectory extends SolidTemplateElement {
return {
dataSrc: "data-src",
rangeSkills: "range-skills",
- paginateBy: "paginate-by"
+ paginateBy: "paginate-by",
+ uniq: "uniq"
};
}
template({
dataSrc,
rangeSkills,
- paginateBy = "9"
+ paginateBy = "9",
+ uniq = Math.random().toString(16).slice(2)
}) {
let getRoute = (target) => target == "profileDirectory" ? "members" : "chat";
if (window.hubl) {
getRoute = window.hubl.getRoute;
}
- let uniq = Math.random().toString(16).slice(2);
- if(window.hubl) {
- let availables = window.hubl.components.filter(c=>c.type=="profileDirectory");
- if(availables.length >= 1) {
- uniq = availables[0].uniq;
- } else {
- console.error(`No component found for route ${type}`);
- }
- }
return `
<solid-router default-route="${getRoute('profileDirectory')}-list">
<solid-route name="${getRoute('profileDirectory')}-list"></solid-route>
diff --git a/src/solid-profile.js b/src/solid-profile.js
index f83f416..de65c32 100644
--- a/src/solid-profile.js
+++ b/src/solid-profile.js
@@ -11,24 +11,16 @@ export default class SolidProfile extends SolidTemplateElement {
return {
dataSrc: "data-src",
uploadSrc: "upload-src",
- rangeSkills: "range-skills"
+ rangeSkills: "range-skills",
+ uniq: "uniq"
};
}
- template({ dataSrc, uploadSrc, rangeSkills }) {
+ template({ dataSrc, uploadSrc, rangeSkills, uniq = Math.random().toString(16).slice(2) }) {
let getRoute = () => "members";
if (window.hubl) {
getRoute = window.hubl.getRoute;
}
- let uniq = Math.random().toString(16).slice(2);
- if(window.hubl) {
- let availables = window.hubl.components.filter(c=>c.type=="profileDirectory");
- if(availables.length >= 1) {
- uniq = availables[0].uniq;
- } else {
- console.error(`No component found for route ${type}`);
- }
- }
return `
<solid-router class="hidden" default-route="${getRoute('profileDirectory')}-my-profile">
<solid-route name="${getRoute('profileDirectory')}-my-profile"></solid-route>
--
GitLab
From 2e16732ad0d7136ef51e9aec5977fcbbc77e4f11 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Tue, 16 Mar 2021 14:39:24 +0100
Subject: [PATCH 07/11] major: core 0.16
---
package-lock.json | 5 ----
package.json | 1 -
src/index.js | 2 +-
src/locales/en.json | 4 ++-
src/locales/es.json | 4 ++-
src/locales/fr.json | 4 ++-
src/solid-directory.js | 59 +++++++++++++++++++++++-------------------
src/solid-picture.js | 3 ++-
src/solid-profile.js | 18 +++++++++++--
9 files changed, 60 insertions(+), 40 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index c0ff414..dedcf5a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -266,11 +266,6 @@
"to-fast-properties": "^2.0.0"
}
},
- "@startinblox/hubl-styling-framework": {
- "version": "1.0.50",
- "resolved": "https://registry.npmjs.org/@startinblox/hubl-styling-framework/-/hubl-styling-framework-1.0.50.tgz",
- "integrity": "sha512-486UiZ6BNOHaCaUeu/2UT9da/9BZvFdv9YTogZaZ+xJR/COtOiWTRFFVDR4vcfI4s+iMvWkZKdabSBbbdp01+g=="
- },
"@types/color-name": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
diff --git a/package.json b/package.json
index b7bcd02..22f95bb 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,6 @@
"dependencies": {
"@babel/cli": "^7.10.1",
"@babel/core": "^7.10.2",
- "@startinblox/hubl-styling-framework": "^1.0.50",
"babel-plugin-transform-commonjs": "^1.1.6",
"copyfiles": "^2.3.0",
"npm-run-all": "^4.1.5",
diff --git a/src/index.js b/src/index.js
index 0fc47aa..2610b78 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,7 @@ import SolidDirectory from './solid-directory.js';
import SolidProfile from './solid-profile.js';
import SolidPicture from './solid-picture.js';
import ComponentPath from './path.js';
-import { Helpers } from "https://cdn.skypack.dev/@startinblox/core@0.15";
+import { Helpers } from "https://cdn.skypack.dev/@startinblox/core@0.16";
Helpers.importCSS(ComponentPath+'/dist/index.css?min');
diff --git a/src/locales/en.json b/src/locales/en.json
index 3227fca..5d3c2e2 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -29,5 +29,7 @@
"profileHidden.lineTwoTwo": "go to your profile",
"profileHidden.lineTwoThree": ". You need to add a photo.",
"myProfileHidden.lineOne": "Your profile is not visible to other members",
- "myProfileHidden.lineTwo": "To activate it, you need to add a photo."
+ "myProfileHidden.lineTwo": "To activate it, you need to add a photo.",
+ "activeProfiles": "Show only active profiles",
+ "goButton": "GO"
}
\ No newline at end of file
diff --git a/src/locales/es.json b/src/locales/es.json
index f307572..978c062 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -29,5 +29,7 @@
"profileHidden.lineTwoTwo": "Ve a tu perfil",
"profileHidden.lineTwoThree": ". Debes añadir una foto.",
"myProfileHidden.lineOne": "Su perfil no es visible para otros miembros",
- "myProfileHidden.lineTwo": "Para activarlo, debes añadir una foto"
+ "myProfileHidden.lineTwo": "Para activarlo, debes añadir una foto",
+ "activeProfiles": "Mostrar solo perfiles activos",
+ "goButton": "GO"
}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 9f5b958..3935b85 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -29,5 +29,7 @@
"profileHidden.lineTwoTwo": "rendez-vous sur votre profil",
"profileHidden.lineTwoThree": ". Vous devez ajouter une photo.",
"myProfileHidden.lineOne": "Votre profil n'est pas visible des autres membres.",
- "myProfileHidden.lineTwo": "Pour l'activer, vous devez ajouter une photo."
+ "myProfileHidden.lineTwo": "Pour l'activer, vous devez ajouter une photo.",
+ "activeProfiles": "Afficher uniquement les profils actifs",
+ "goButton": "GO"
}
\ No newline at end of file
diff --git a/src/solid-directory.js b/src/solid-directory.js
index 1aea6e1..612cd45 100644
--- a/src/solid-directory.js
+++ b/src/solid-directory.js
@@ -1,12 +1,17 @@
import {
SolidTemplateElement
-} from "https://cdn.skypack.dev/@startinblox/core@0.15";
+} from "https://cdn.skypack.dev/@startinblox/core@0.16";
import ComponentPath from './path.js';
export default class SolidDirectory extends SolidTemplateElement {
constructor() {
super();
this.setTranslationsPath(`${ComponentPath}/dist/locales`);
+ if (window.hubl) {
+ this.localize = (key) => {
+ return window.hubl.intl.t("directory." + key) || this.strings[key] || key;
+ }
+ }
}
static get propsDefinition() {
@@ -24,17 +29,17 @@ export default class SolidDirectory extends SolidTemplateElement {
paginateBy = "9",
uniq = Math.random().toString(16).slice(2)
}) {
- let getRoute = (target) => target == "profileDirectory" ? "members" : "chat";
+ let getRoute = (target) => target == uniq ? "members" : "chat";
if (window.hubl) {
getRoute = window.hubl.getRoute;
}
return `
- <solid-router default-route="${getRoute('profileDirectory')}-list">
- <solid-route name="${getRoute('profileDirectory')}-list"></solid-route>
- <solid-route name="${getRoute('profileDirectory')}-member-profile" use-id></solid-route>
+ <solid-router default-route="${getRoute(uniq)}-list">
+ <solid-route name="${getRoute(uniq)}-list"></solid-route>
+ <solid-route name="${getRoute(uniq)}-member-profile" use-id></solid-route>
</solid-router>
- <div id="${getRoute('profileDirectory')}-list" data-view="${getRoute('profileDirectory')}-list">
+ <div id="${getRoute(uniq)}-list" data-view="${getRoute(uniq)}-list">
<div>
<h2 class="margin-left-xsmall sm-margin-none text-xlarge text-bold text-color-heading text-uppercase">${this.localize('module.name')}</h2>
@@ -45,7 +50,7 @@ export default class SolidDirectory extends SolidTemplateElement {
range-skills="${rangeSkills}"
order-asc-skills="name"
fields="name, profile.job, profile.city, skills"
-
+
class-name="segment margin-bottom-small third sm-full padding-right-xsmall padding-left-xsmall sm-padding-none text-small input-shadow input-bg-white icon icon-magnify"
label-name="${this.localize('search.by.name')}"
widget-name="solid-form-placeholder-text"
@@ -62,7 +67,8 @@ export default class SolidDirectory extends SolidTemplateElement {
label-skills="${this.localize('search.by.skill')}"
widget-skills="solid-form-multipleselect-autocompletion"
- submit-button="GO"
+ submit-button="${this.localize('goButton')}"
+ submit-widget="button"
></solid-form-search>
<div class="directory-checkbox simple text-disable-selection">
@@ -72,7 +78,7 @@ export default class SolidDirectory extends SolidTemplateElement {
<div class="revert"></div>
</label>
</div>
- <span class="checkbox-text" onclick="javascript:document.querySelectorAll('solid-directory .checkbox-case > label').forEach(e => e.click());">Show only active profiles</span>
+ <span class="checkbox-text" onclick="javascript:document.querySelectorAll('solid-directory .checkbox-case > label').forEach(e => e.click());">${this.localize('activeProfiles')}</span>
</div>
<solid-widget name="directory-hidden-${uniq}">
@@ -80,12 +86,11 @@ export default class SolidDirectory extends SolidTemplateElement {
\${value == "" ? \`<div class='directory-info bg-color-primary text-color-white text-bold padding-xsmall whitespace-normal'>
<div class='icon icon-exclamation'></div>
<p class='first-line'>${this.localize('profileHidden.lineOne')}</p>
- <p class='second-line'>${this.localize('profileHidden.lineTwoOne')}<solid-link class="link color-white" next='${getRoute('profileDirectory')}-my-profile'>${this.localize('profileHidden.lineTwoTwo')}</solid-link>${this.localize('profileHidden.lineTwoThree')}</p>
+ <p class='second-line'>${this.localize('profileHidden.lineTwoOne')}<solid-link class="link color-white" next='${getRoute(uniq)}-my-profile'>${this.localize('profileHidden.lineTwoTwo')}</solid-link>${this.localize('profileHidden.lineTwoThree')}</p>
</div>\` : ""}
</template>
</solid-widget>
-
<solid-display
bind-user
fields="account.picture"
@@ -103,11 +108,11 @@ export default class SolidDirectory extends SolidTemplateElement {
class="segment full children children-third sm-children-full children-margin-bottom-medium sm-children-margin-bottom-xsmall children-padding-right-xsmall children-padding-left-xsmall sm-children-padding-none sm-whitespace-normal masonry counter pagination"
filtered-by="solid-directory-listing-search"
-
+
data-src="${dataSrc}"
counter-template="<span>\${counter} ${this.localize('members')}</span>"
-
+
fields="segment1(send, segment2(member-picture(account.picture), segment3(name, member-pseudo(at, username), profile.job)), segment4(profile.city, communities, skills))"
loader-id="loader-members-list-${uniq}"
@@ -117,7 +122,7 @@ export default class SolidDirectory extends SolidTemplateElement {
required-username=""
order-asc="username"
-
+
class-segment1="segment hover bg-color-white shadow full text-top whitespace-normal"
class-send="send-display children-link-rounded children-icon-speech children-link-reversed color-secondary bordered"
class-segment2="segment full padding-medium text-center whitespace-normal"
@@ -131,7 +136,7 @@ export default class SolidDirectory extends SolidTemplateElement {
class-segment4="segment full padding-medium padding-bottom-xsmall border-top border-color-grey whitespace-normal"
class-communities="segment block margin-bottom-xsmall"
class-skills="skills segment block children-tag whitespace-normal"
-
+
action-send="${getRoute('chat')}"
label-send=""
value-send=""
@@ -142,19 +147,19 @@ export default class SolidDirectory extends SolidTemplateElement {
multiple-communities
multiple-communities-fields="community.name"
-
+
multiple-skills
multiple-skills-fields="name"
-
+
paginate-by="${paginateBy}"
- next="${getRoute('profileDirectory')}-member-profile">
+ next="${getRoute(uniq)}-member-profile">
</solid-display>
</div>
</div>
- <div id="${getRoute('profileDirectory')}-members-profile" data-view="${getRoute('profileDirectory')}-member-profile" hidden>
+ <div id="${getRoute(uniq)}-members-profile" data-view="${getRoute(uniq)}-member-profile" hidden>
<div class="segment full sm-hidden text-right">
- <solid-link class="backlink text-xlarge line-xlarge margin-right-xxsmall" next="${getRoute('profileDirectory')}-list">${this.localize('back')}</solid-link>
+ <solid-link class="backlink text-xlarge line-xlarge margin-right-xxsmall" next="${getRoute(uniq)}-list">${this.localize('back')}</solid-link>
</div>
<div class="segment block shadow bg-color-white margin-right-xxsmall margin-top-large margin-left-xxsmall sm-margin-none">
@@ -195,36 +200,36 @@ export default class SolidDirectory extends SolidTemplateElement {
class-segment1="segment sm-full text-center"
class-member-picture="segment padding-medium avatar-wrapper"
class-account.picture="avatar xlarge"
-
+
class-segment2="member-bio segment sm-full padding-medium text-top whitespace-normal"
class-name="segment block text-color-heading text-xxlarge text-bold sm-text-center margin-bottom-xxsmall whitespace-normal"
class-member-pseudo="segment block sm-text-center whitespace-normal"
class-profile.job="segment block sm-text-center margin-top-medium margin-bottom-medium whitespace-normal"
class-communities="segment block margin-bottom-xsmall"
-
+
class-segment3="segment sm-full lg-hidden sm-padding-bottom-medium"
class-send="segment sm-full text-bold text-xsmall text-uppercase text-center children-link-button children-link-icon children-icon-speech children-link-reversed color-secondary bordered"
-
+
class-segment4="send-message segment padding-medium sm-hidden"
class-send1="text-bold text-xsmall text-uppercase children-link-button children-link-icon children-icon-speech children-link-reversed color-secondary bordered"
-
+
value-at="@"
widget-account.picture="hubl-user-avatar"
widget-profile.city="directory-city-${uniq}"
widget-email="directory-link-mailto-${uniq}"
widget-profile.phone="directory-link-tel-${uniq}"
widget-profile.website="directory-website-${uniq}"
-
+
multiple-communities
multiple-communities-fields="community.name"
-
+
action-send="${getRoute('chat')}"
value-send=""
label-send="${this.localize('sendMessage')}"
action-send1="${getRoute('chat')}"
value-send1=""
label-send1="${this.localize('sendMessage')}"
-
+
bind-resources
></solid-display>
diff --git a/src/solid-picture.js b/src/solid-picture.js
index 10c24e8..ac2db6f 100644
--- a/src/solid-picture.js
+++ b/src/solid-picture.js
@@ -2,7 +2,7 @@
import {
SolidTemplateElement
-} from "https://cdn.skypack.dev/@startinblox/core@0.15";
+} from "https://cdn.skypack.dev/@startinblox/core@0.16";
import ComponentPath from './path.js';
export default class SolidPicture extends SolidTemplateElement {
@@ -161,6 +161,7 @@ export default class SolidPicture extends SolidTemplateElement {
partial="true"
data-src="${dataSrc}"
submit-button="${this.localize('save').toUpperCase()}"
+ submit-widget="button"
nested-field="${nestedFields}"
fields="${fields}${additionalFields}"
${additionalFieldsAttrs}
diff --git a/src/solid-profile.js b/src/solid-profile.js
index de65c32..a8a56eb 100644
--- a/src/solid-profile.js
+++ b/src/solid-profile.js
@@ -1,10 +1,17 @@
-import { SolidTemplateElement } from "https://cdn.skypack.dev/@startinblox/core@0.15";
+import {
+ SolidTemplateElement
+} from "https://cdn.skypack.dev/@startinblox/core@0.16";
import ComponentPath from './path.js';
export default class SolidProfile extends SolidTemplateElement {
constructor() {
super();
this.setTranslationsPath(`${ComponentPath}/dist/locales`);
+ if (window.hubl) {
+ this.localize = (key) => {
+ return window.hubl.intl.t("directory." + key) || this.strings[key] || key;
+ }
+ }
}
static get propsDefinition() {
@@ -16,7 +23,12 @@ export default class SolidProfile extends SolidTemplateElement {
};
}
- template({ dataSrc, uploadSrc, rangeSkills, uniq = Math.random().toString(16).slice(2) }) {
+ template({
+ dataSrc,
+ uploadSrc,
+ rangeSkills,
+ uniq = Math.random().toString(16).slice(2)
+ }) {
let getRoute = () => "members";
if (window.hubl) {
getRoute = window.hubl.getRoute;
@@ -169,6 +181,7 @@ export default class SolidProfile extends SolidTemplateElement {
<solid-form class="segment full padding-top-xlarge padding-very-xxlarge sm-padding-xsmall sm-padding-top-medium whitespace-normal form"
data-src="${dataSrc}"
submit-button="${this.localize('save').toUpperCase()}"
+ submit-widget="button"
fields = "last_name, first_name, profile.job, profile.city, email, profile.phone, profile.website, directory-checkbox(settings.receiveMail, text-checkbox), username"
required-last_name
required-first_name
@@ -268,6 +281,7 @@ export default class SolidProfile extends SolidTemplateElement {
class="segment full padding-top-small padding-very-xxlarge sm-padding-xsmall sm-padding-top-medium whitespace-normal form"
data-src="${dataSrc}"
submit-button="${this.localize('save').toUpperCase()}"
+ submit-widget="button"
range-skills="${rangeSkills}"
order-asc-skills="name"
fields="skills, username, email"
--
GitLab
From 107509ea0ae92f2b8657a0dd56ef97b3f325abe3 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Wed, 17 Mar 2021 12:46:25 +0000
Subject: [PATCH 08/11] fix:
https://git.startinblox.com/applications/hubl/issues/1004#note_57250
---
src/locales/en.json | 2 +-
src/locales/es.json | 2 +-
src/locales/fr.json | 2 +-
3 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/locales/en.json b/src/locales/en.json
index 5d3c2e2..771b30f 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,5 +1,5 @@
{
- "back": "Back",
+ "back": "Back to the profile directory",
"members": "members",
"module.name": "Members directory",
"picture.delete": "Remove the picture",
diff --git a/src/locales/es.json b/src/locales/es.json
index 978c062..b7b9c94 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -1,5 +1,5 @@
{
- "back": "Atrás",
+ "back": "Volver al directorio de miembros",
"members": "Miembrxs",
"module.name": "Directorio de miembrxs",
"picture.delete": "Eliminar una foto",
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 3935b85..63c43fb 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -1,5 +1,5 @@
{
- "back": "Retour",
+ "back": "Retour à l'annuaire des membres",
"members": "membres",
"module.name": "Annuaire des membres",
"picture.delete": "Supprimer une photo",
--
GitLab
From 878b3b3020bdd3a2f2f06f6d02007b72d68e32ee Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Thu, 25 Mar 2021 11:48:02 +0100
Subject: [PATCH 09/11] minor: empty results
---
src/assets/empty-search.svg | 154 ++++++++++++++++++++++++++++++++++++
src/locales/en.json | 4 +-
src/locales/es.json | 4 +-
src/locales/fr.json | 4 +-
src/solid-directory.js | 10 +++
src/styles/directory.scss | 24 ++++++
6 files changed, 197 insertions(+), 3 deletions(-)
create mode 100644 src/assets/empty-search.svg
diff --git a/src/assets/empty-search.svg b/src/assets/empty-search.svg
new file mode 100644
index 0000000..41f64b1
--- /dev/null
+++ b/src/assets/empty-search.svg
@@ -0,0 +1,154 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="406px" height="235px" viewBox="0 0 406 235" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>Illustration 2</title>
+ <defs>
+ <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+ <stop stop-color="#A6B3C3" offset="0%"></stop>
+ <stop stop-color="#6D7C90" offset="100%"></stop>
+ </linearGradient>
+ <linearGradient x1="72.4370217%" y1="62.8447216%" x2="-14.1854517%" y2="154.708059%" id="linearGradient-2">
+ <stop stop-color="#2E3F57" offset="0%"></stop>
+ <stop stop-color="#2E3F57" stop-opacity="0.40892701" offset="100%"></stop>
+ </linearGradient>
+ <linearGradient x1="72.4370217%" y1="62.8447216%" x2="-9.35507015%" y2="62.8447216%" id="linearGradient-3">
+ <stop stop-color="#2E3F57" offset="0%"></stop>
+ <stop stop-color="#2E3F57" stop-opacity="0.40892701" offset="100%"></stop>
+ </linearGradient>
+ <linearGradient x1="50%" y1="100%" x2="123.104771%" y2="-33.1456801%" id="linearGradient-4">
+ <stop stop-color="#2E3F57" offset="0%"></stop>
+ <stop stop-color="#2E3F57" stop-opacity="0.40892701" offset="100%"></stop>
+ </linearGradient>
+ <linearGradient x1="72.4370217%" y1="62.8447216%" x2="-9.35507015%" y2="62.8447216%" id="linearGradient-5">
+ <stop stop-color="#2E3F57" offset="0%"></stop>
+ <stop stop-color="#2E3F57" stop-opacity="0.40892701" offset="100%"></stop>
+ </linearGradient>
+ <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-6">
+ <stop stop-color="#A6B3C3" offset="0%"></stop>
+ <stop stop-color="#6D7C90" offset="100%"></stop>
+ </linearGradient>
+ <linearGradient x1="20.9111238%" y1="17.0654297%" x2="144.470694%" y2="128.234863%" id="linearGradient-7">
+ <stop stop-color="#2E3F57" offset="0%"></stop>
+ <stop stop-color="#2E3F57" stop-opacity="0.40892701" offset="100%"></stop>
+ </linearGradient>
+ <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-8">
+ <stop stop-color="#A6B3C3" offset="0%"></stop>
+ <stop stop-color="#6D7C90" offset="100%"></stop>
+ </linearGradient>
+ <linearGradient x1="72.4370217%" y1="93.1202342%" x2="100%" y2="-41.3797862%" id="linearGradient-9">
+ <stop stop-color="#2E3F57" offset="0%"></stop>
+ <stop stop-color="#2E3F57" stop-opacity="0.40892701" offset="100%"></stop>
+ </linearGradient>
+ <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-10">
+ <stop stop-color="#A6B3C3" offset="0%"></stop>
+ <stop stop-color="#6D7C90" offset="100%"></stop>
+ </linearGradient>
+ <linearGradient x1="22.2061592%" y1="57.5617284%" x2="115.028425%" y2="42.4382716%" id="linearGradient-11">
+ <stop stop-color="#2E3F57" offset="0%"></stop>
+ <stop stop-color="#2E3F57" stop-opacity="0.40892701" offset="100%"></stop>
+ </linearGradient>
+ <linearGradient x1="72.4370217%" y1="62.8447216%" x2="-9.35507015%" y2="62.8447216%" id="linearGradient-12">
+ <stop stop-color="#2E3F57" offset="0%"></stop>
+ <stop stop-color="#2E3F57" stop-opacity="0.40892701" offset="100%"></stop>
+ </linearGradient>
+ <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-13">
+ <stop stop-color="#A6B3C3" offset="0%"></stop>
+ <stop stop-color="#6D7C90" offset="100%"></stop>
+ </linearGradient>
+ <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-14">
+ <stop stop-color="#A6B3C3" offset="0%"></stop>
+ <stop stop-color="#6D7C90" offset="100%"></stop>
+ </linearGradient>
+ <linearGradient x1="41.710489%" y1="95.9973958%" x2="67.8773832%" y2="14.312048%" id="linearGradient-15">
+ <stop stop-color="#E6E9ED" offset="0%"></stop>
+ <stop stop-color="#FFFFFF" offset="100%"></stop>
+ </linearGradient>
+ <linearGradient x1="72.4370217%" y1="62.8447216%" x2="-9.35507015%" y2="62.8447216%" id="linearGradient-16">
+ <stop stop-color="#2E3F57" offset="0%"></stop>
+ <stop stop-color="#2E3F57" stop-opacity="0.40892701" offset="100%"></stop>
+ </linearGradient>
+ <linearGradient x1="38.1877121%" y1="67.2471676%" x2="87.5669929%" y2="44.4025321%" id="linearGradient-17">
+ <stop stop-color="#BFC4CA" offset="0%"></stop>
+ <stop stop-color="#FFFFFF" offset="100%"></stop>
+ </linearGradient>
+ <linearGradient x1="31.8759652%" y1="65.2563655%" x2="87.1520782%" y2="50%" id="linearGradient-18">
+ <stop stop-color="#BFC4CA" offset="0%"></stop>
+ <stop stop-color="#FFFFFF" offset="100%"></stop>
+ </linearGradient>
+ <linearGradient x1="72.4370217%" y1="62.8447216%" x2="-9.35507015%" y2="62.8447216%" id="linearGradient-19">
+ <stop stop-color="#2E3F57" offset="0%"></stop>
+ <stop stop-color="#929BA9" offset="100%"></stop>
+ </linearGradient>
+ <linearGradient x1="42.7789149%" y1="95.9973958%" x2="65.5731871%" y2="14.312048%" id="linearGradient-20">
+ <stop stop-color="#BFC4CA" offset="0%"></stop>
+ <stop stop-color="#FFFFFF" offset="100%"></stop>
+ </linearGradient>
+ <linearGradient x1="37.4726914%" y1="70.5297849%" x2="73.1473409%" y2="33.890378%" id="linearGradient-21">
+ <stop stop-color="#2E3F57" offset="0%"></stop>
+ <stop stop-color="#929BA9" offset="100%"></stop>
+ </linearGradient>
+ <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-22">
+ <stop stop-color="#A6B3C3" offset="0%"></stop>
+ <stop stop-color="#6D7C90" offset="100%"></stop>
+ </linearGradient>
+ <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-23">
+ <stop stop-color="#A6B3C3" offset="0%"></stop>
+ <stop stop-color="#6D7C90" offset="100%"></stop>
+ </linearGradient>
+ <linearGradient x1="41.710489%" y1="95.9973958%" x2="67.8773832%" y2="14.312048%" id="linearGradient-24">
+ <stop stop-color="#E6E9ED" stop-opacity="0.524393575" offset="0%"></stop>
+ <stop stop-color="#FFFFFF" offset="100%"></stop>
+ </linearGradient>
+ <linearGradient x1="15.4875579%" y1="27.1773727%" x2="50%" y2="100%" id="linearGradient-25">
+ <stop stop-color="#A6B3C3" offset="0%"></stop>
+ <stop stop-color="#6D7C90" offset="100%"></stop>
+ </linearGradient>
+ <linearGradient x1="73.1843171%" y1="11.0532407%" x2="50%" y2="100%" id="linearGradient-26">
+ <stop stop-color="#A6B3C3" offset="0%"></stop>
+ <stop stop-color="#6D7C90" offset="100%"></stop>
+ </linearGradient>
+ </defs>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="Empty-search" transform="translate(-562.000000, -303.000000)">
+ <g id="Illustration-2" transform="translate(562.000000, 303.000000)">
+ <rect id="Rectangle" fill="url(#linearGradient-1)" x="200.898361" y="100" width="23" height="23"></rect>
+ <rect id="Rectangle-Copy" fill="url(#linearGradient-2)" x="106.898361" y="191" width="19" height="19"></rect>
+ <rect id="Rectangle-Copy-5" fill="url(#linearGradient-3)" transform="translate(103.398361, 21.500000) rotate(-315.000000) translate(-103.398361, -21.500000) " x="93.8983608" y="12" width="19" height="19"></rect>
+ <rect id="Rectangle-Copy-6" fill="url(#linearGradient-3)" transform="translate(71.398361, 113.500000) rotate(-315.000000) translate(-71.398361, -113.500000) " x="61.8983608" y="104" width="19" height="19"></rect>
+ <circle id="Oval" fill="url(#linearGradient-1)" cx="85.3983608" cy="66.5" r="8.5"></circle>
+ <circle id="Oval-Copy" fill="url(#linearGradient-4)" cx="19.3983608" cy="130.5" r="8.5"></circle>
+ <circle id="Oval-Copy-2" fill="url(#linearGradient-1)" cx="191.398361" cy="173.5" r="13.5"></circle>
+ <circle id="Oval-Copy-3" fill="url(#linearGradient-3)" cx="161.398361" cy="224.5" r="8.5"></circle>
+ <circle id="Oval-Copy-4" fill="url(#linearGradient-1)" cx="173.398361" cy="8.5" r="8.5"></circle>
+ <polygon id="Rectangle" fill="url(#linearGradient-5)" points="49.963332 40.6875 63.8983608 85.1640625 14.8983608 76.4191675"></polygon>
+ <polygon id="Rectangle-Copy-8" fill="url(#linearGradient-6)" transform="translate(227.587431, 79.139778) rotate(-57.000000) translate(-227.587431, -79.139778) " points="232.885543 69.639778 237.587431 88.639778 217.587431 85.0277561"></polygon>
+ <circle id="Oval" fill="url(#linearGradient-7)" cx="272.898361" cy="46" r="8"></circle>
+ <polygon id="Rectangle-Copy-9" fill="url(#linearGradient-8)" transform="translate(205.736251, 214.851562) rotate(68.000000) translate(-205.736251, -214.851562) " points="213.355392 201.269531 220.117111 228.433594 191.355392 223.269531"></polygon>
+ <path d="M198.898361,29 C206.872319,37.7760417 208.297449,45.1310321 203.173751,51.0649712 C198.050054,56.9989103 189.624923,56.6439199 177.898361,50 L198.898361,29 Z" id="Rectangle" fill="url(#linearGradient-9)"></path>
+ <polygon id="Path-3" fill="url(#linearGradient-10)" fill-rule="nonzero" points="36.5271776 150.316896 43.9839149 138.778439 51.4703608 147.825 59.3114594 138.93318 65.2243608 147.606 72.864195 138.938593 80.6245177 150.260404 76.500329 153.087252 72.3693608 147.061 64.7201113 155.741344 58.8053608 147.067 51.3497246 155.522242 44.4803608 147.221 40.7265753 153.03076"></polygon>
+ <polygon id="Path-3-Copy-2" fill="url(#linearGradient-11)" fill-rule="nonzero" points="236.898361 222.523039 242.98586 213 249.097614 220.466401 255.498896 213.127712 260.326046 220.285654 266.563021 213.13218 272.898361 222.476414 269.531473 224.809497 266.159051 219.835849 259.914389 227 255.08573 219.840801 248.999129 226.819168 243.391147 219.967902 240.326647 224.762873"></polygon>
+ <polygon id="Path-3-Copy-3" fill="url(#linearGradient-12)" fill-rule="nonzero" transform="translate(241.398361, 35.000000) rotate(-270.000000) translate(-241.398361, -35.000000) " points="225.898361 37.1626045 231.140374 29 236.403273 35.3997724 241.915489 29.1094673 246.072201 35.2448461 251.44293 29.113297 256.898361 37.1226408 253.999096 39.1224264 251.095066 34.8592989 245.717718 41 241.559706 34.8635435 236.318467 40.8450015 231.489371 34.9724871 228.850496 39.0824627"></polygon>
+ <polygon id="Path-3-Copy-4" fill="url(#linearGradient-13)" fill-rule="nonzero" transform="translate(153.398361, 200.500000) rotate(-209.000000) translate(-153.398361, -200.500000) " points="141.898361 202.121953 145.787597 196 149.692328 200.799829 153.782036 196.0821 156.866049 200.683635 160.850783 196.084973 164.898361 202.091981 162.747294 203.59182 160.592691 200.394474 156.603045 205 153.518069 200.397658 149.629407 204.883751 146.04653 200.479365 144.088655 203.561847"></polygon>
+ <polygon id="Path-3-Copy" fill="url(#linearGradient-14)" fill-rule="nonzero" transform="translate(146.000000, 69.500000) rotate(-135.000000) translate(-146.000000, -69.500000) " points="124 72.5636896 131.440277 61 138.910198 70.0663442 146.733988 61.1550787 152.633837 69.8468653 160.256807 61.1605041 168 72.5070744 163.884915 75.340104 159.763066 69.3006734 152.130701 78 146.229007 69.3066866 138.789828 77.7804188 131.935627 69.4610233 128.190128 75.2834888"></polygon>
+ <circle id="Oval" fill-opacity="0.8" fill="url(#linearGradient-15)" cx="160.5" cy="126.5" r="50.5"></circle>
+ <g id="Loupe" transform="translate(0.000000, 65.000000)">
+ <path d="M5.6133463,149.880468 L103.811732,87.562313 C106.765827,85.6876002 110.680349,86.5626126 112.555062,89.5167079 C112.609653,89.6027296 112.66216,89.6900556 112.712539,89.7786097 C114.553249,93.0141605 113.52967,97.1249273 110.386654,99.1195325 L12.1882683,161.437687 C9.23417297,163.3124 5.31965054,162.437387 3.44493774,159.483292 C3.39034715,159.39727 3.33783963,159.309944 3.287461,159.22139 C1.4467506,155.985839 2.47032958,151.875073 5.6133463,149.880468 Z" id="Rectangle" fill="url(#linearGradient-16)"></path>
+ <path d="M159.898361,0 C193.587731,0 220.898361,27.3106303 220.898361,61 C220.898361,94.6893697 193.587731,122 159.898361,122 C126.208991,122 98.8983608,94.6893697 98.8983608,61 C98.8983608,27.3106303 126.208991,0 159.898361,0 Z M159.898361,12 C132.836408,12 110.898361,33.9380473 110.898361,61 C110.898361,88.0619527 132.836408,110 159.898361,110 C186.960314,110 208.898361,88.0619527 208.898361,61 C208.898361,33.9380473 186.960314,12 159.898361,12 Z" id="Combined-Shape" fill="#2E3F57"></path>
+ </g>
+ <g id="Personnage" transform="translate(190.904340, 49.601968)">
+ <path d="M17.4847441,89.8121724 C24.3667903,88.646048 29.1637549,89.8314301 31.4962113,94.792215 C40.6289969,104.400343 48.0359148,142.771952 50.0762596,132.541914 C51.6772847,124.514572 61.9108736,110.664391 67.9257066,110.664391 L67.9257066,110.664391 L73.9940212,115.448819 C67.9257066,136.009598 55.1630506,153.688062 47.6234233,155.318577 C40.0837959,156.949093 32.2683864,133.342567 25.2211233,97.5712814 L25.4004239,98.4779607 C6.69024714,102.232556 -3.62485534,88.9129736 3.0125863,91.0482481 C7.4755771,92.4839986 13.1494646,92.8418323 20.0342487,92.1217491 L20.0342487,92.1217491 L21.8382944,92.1214953 C17.0257296,91.6111018 15.5745462,90.8413274 17.4847441,89.8121724 Z" id="Combined-Shape" fill="url(#linearGradient-17)"></path>
+ <path d="M158.484744,89.8121724 C165.36679,88.646048 170.163755,89.8314301 172.496211,94.792215 C181.628997,104.400343 189.035915,142.771952 191.07626,132.541914 C192.677285,124.514572 202.910874,110.664391 208.925707,110.664391 L208.925707,110.664391 L214.994021,115.448819 C208.925707,136.009598 196.163051,153.688062 188.623423,155.318577 C181.083796,156.949093 173.268386,133.342567 166.221123,97.5712814 L166.400424,98.4779607 C147.690247,102.232556 137.375145,88.9129736 144.012586,91.0482481 C148.475577,92.4839986 154.149465,92.8418323 161.034249,92.1217491 L161.034249,92.1217491 L162.838294,92.1214953 C158.02573,91.6111018 156.574546,90.8413274 158.484744,89.8121724 Z" id="Combined-Shape-Copy" fill="url(#linearGradient-18)" transform="translate(178.494021, 122.398032) scale(-1, 1) translate(-178.494021, -122.398032) "></path>
+ <path d="M107.319603,83.398032 C115.328572,83.398032 122.567366,86.7419833 128.669328,92.5541196 C129.366977,92.0400816 130.138243,91.5763942 130.982732,91.1631446 C141.280408,86.1240159 150.617504,94.3825952 158.994021,115.938883 L145.119063,122.728038 C147.444863,131.327465 148.708942,140.878572 148.708942,150.898032 C148.708942,163.336452 148.937899,174.352333 145.059344,184.32776 L145.059344,184.32776 L69.6072221,184.398032 C66.8612853,173.16854 66.3320638,163.348925 66.8612853,150.898032 C67.2932367,140.735594 68.7221615,131.045012 71.0731412,122.338832 L57.9940212,115.938883 C66.3705383,94.3825952 75.7076345,86.1240159 86.0053099,91.1631446 C86.4510517,91.3812676 86.8763935,91.6134425 87.2813353,91.8596692 C92.9254113,86.4779463 99.6432519,83.398032 107.319603,83.398032 Z" id="Combined-Shape" fill="url(#linearGradient-19)"></path>
+ <path d="M127.275348,130.398032 L128.075817,129.681919 C129.504612,128.437248 130.640763,127.328978 131.484268,126.357111 C132.327774,125.385244 132.758133,124.396327 132.775348,123.390359 C132.758133,122.537844 132.465489,121.830257 131.897414,121.267597 C131.329338,120.704937 130.614941,120.415082 129.754221,120.398032 C129.272218,120.398032 128.816036,120.500334 128.385676,120.704937 C127.955317,120.909541 127.585207,121.182346 127.275348,121.523352 C126.965489,121.182346 126.595379,120.909541 126.165019,120.704937 C125.734659,120.500334 125.278478,120.398032 124.796475,120.398032 C123.935755,120.415082 123.221357,120.704937 122.653282,121.267597 C122.085207,121.830257 121.792562,122.537844 121.775348,123.390359 C121.792562,124.396327 122.222922,125.385244 123.066428,126.357111 C123.909933,127.328978 125.046083,128.437248 126.474878,129.681919 L126.474878,129.681919 L127.275348,130.398032 Z" id="ï‹‘" fill="#FFFFFF" fill-rule="nonzero"></path>
+ <path d="M109.431326,101.398032 C128.761292,101.398032 143.994021,81.2474208 143.994021,61.73265 C143.994021,42.2178793 128.323987,26.398032 108.994021,26.398032 C89.6640549,26.398032 73.9940212,42.2178793 73.9940212,61.73265 C73.9940212,81.2474208 90.1013597,101.398032 109.431326,101.398032 Z" id="Oval" fill="url(#linearGradient-20)"></path>
+ <path d="M120.049168,0.398031965 C133.301972,0.398031965 144.045492,11.1272081 144.045492,24.3623177 C144.045492,24.8098065 144.03321,25.2544307 144.008965,25.6958724 C152.469279,26.8287765 158.994021,34.0667396 158.994021,42.8266034 C158.994021,48.1149871 156.616006,52.8486973 152.86961,56.0194478 C153.761077,57.6728936 154.273433,59.6113958 154.273433,61.6837463 C154.273433,67.7588785 149.870351,72.6837463 144.438874,72.6837463 C139.007397,72.6837463 134.604315,67.7588785 134.604315,61.6837463 C134.604315,60.6703761 134.726828,59.6890113 134.956191,58.7571708 C130.238154,56.7676926 126.587451,52.7479309 125.101708,47.793992 C123.473282,48.1430297 121.782692,48.3266034 120.049168,48.3266034 C111.824201,48.3266034 104.565736,44.1940432 100.242123,37.8946458 C98.2841158,41.174074 95.1013696,43.6395879 91.3244741,44.6635473 C91.3299916,44.836318 91.3322565,45.009768 91.3322565,45.1837463 C91.3322565,52.8874942 86.8915151,59.5554362 80.4269764,62.7738552 C80.8656618,63.9080381 81.1043153,65.1278955 81.1043153,66.398032 C81.1043153,72.4731642 75.6444936,77.398032 68.9094623,77.398032 C62.174431,77.398032 56.7146094,72.4731642 56.7146094,66.398032 C56.7146094,64.065337 57.5195853,61.9022327 58.892639,60.1224061 C54.67033,56.5206316 51.9940212,51.1643144 51.9940212,45.1837463 C51.9940212,34.3352958 60.8001851,25.5408891 71.6631388,25.5408891 C72.1775301,25.5408891 72.6873095,25.5606087 73.1917604,25.5993322 C75.1501999,19.6342646 80.7705898,15.3266034 87.3984329,15.3266034 C90.9375105,15.3266034 94.1893377,16.5548265 96.7498388,18.6077364 C99.3293542,8.15232676 108.782494,0.398031965 120.049168,0.398031965 Z" id="Combined-Shape" fill="url(#linearGradient-21)"></path>
+ <path d="M104.070379,88.6664705 C104.86105,81.4521268 111.428082,76.2180091 118.731709,76.9531056 C119.830726,77.0637196 120.631985,78.0443193 120.521371,79.1433363 C120.410757,80.2423533 119.430157,81.0436122 118.33114,80.9329981 C113.198183,80.4163755 108.596555,84.0840084 108.04657,89.1022497 C107.926233,90.2002446 106.93858,90.9927928 105.840585,90.8724557 C104.74259,90.7521186 103.950042,89.7644654 104.070379,88.6664705 Z" id="Path" fill="url(#linearGradient-22)" fill-rule="nonzero" transform="translate(112.294939, 83.884391) rotate(191.000000) translate(-112.294939, -83.884391) "></path>
+ <path d="M101.104458,66.8137337 C101.680425,61.6607351 106.464197,57.9221551 111.784543,58.4472134 C112.585125,58.5262218 113.168804,59.226636 113.088227,60.0116323 C113.00765,60.7966286 112.293329,61.3689448 111.492747,61.2899364 C107.753631,60.9209277 104.401563,63.5406126 104.000925,67.1249983 C103.913265,67.9092645 103.193806,68.475359 102.393969,68.3894056 C101.594132,68.3034523 101.016798,67.598 101.104458,66.8137337 Z" id="Path" fill="url(#linearGradient-23)" fill-rule="nonzero" transform="translate(107.095660, 63.398032) rotate(33.000000) translate(-107.095660, -63.398032) "></path>
+ <circle id="Oval" fill="#2E3F57" cx="91" cy="67" r="3"></circle>
+ <circle id="Oval" fill="#2E3F57" cx="122" cy="62" r="3"></circle>
+ <circle id="Oval" stroke="url(#linearGradient-25)" stroke-width="3" fill="url(#linearGradient-24)" cx="87.5956603" cy="63.898032" r="13.5"></circle>
+ <circle id="Oval-Copy-7" stroke="url(#linearGradient-26)" stroke-width="3" fill="url(#linearGradient-24)" cx="125.59566" cy="58.898032" r="13.5"></circle>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/src/locales/en.json b/src/locales/en.json
index 771b30f..212c78b 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -31,5 +31,7 @@
"myProfileHidden.lineOne": "Your profile is not visible to other members",
"myProfileHidden.lineTwo": "To activate it, you need to add a photo.",
"activeProfiles": "Show only active profiles",
- "goButton": "GO"
+ "goButton": "GO",
+ "search.noResult": "There are no results for your search",
+ "search.tryAnother": " "
}
\ No newline at end of file
diff --git a/src/locales/es.json b/src/locales/es.json
index b7b9c94..92d0240 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -31,5 +31,7 @@
"myProfileHidden.lineOne": "Su perfil no es visible para otros miembros",
"myProfileHidden.lineTwo": "Para activarlo, debes añadir una foto",
"activeProfiles": "Mostrar solo perfiles activos",
- "goButton": "GO"
+ "goButton": "GO",
+ "search.noResult": "No hay resultados para su búsqueda",
+ "search.tryAnother": " "
}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 63c43fb..ce81c68 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -31,5 +31,7 @@
"myProfileHidden.lineOne": "Votre profil n'est pas visible des autres membres.",
"myProfileHidden.lineTwo": "Pour l'activer, vous devez ajouter une photo.",
"activeProfiles": "Afficher uniquement les profils actifs",
- "goButton": "GO"
+ "goButton": "GO",
+ "search.noResult": "Il n'y a aucun résultat pour ta recherche",
+ "search.tryAnother": " "
}
\ No newline at end of file
diff --git a/src/solid-directory.js b/src/solid-directory.js
index 612cd45..db7a864 100644
--- a/src/solid-directory.js
+++ b/src/solid-directory.js
@@ -81,6 +81,15 @@ export default class SolidDirectory extends SolidTemplateElement {
<span class="checkbox-text" onclick="javascript:document.querySelectorAll('solid-directory .checkbox-case > label').forEach(e => e.click());">${this.localize('activeProfiles')}</span>
</div>
+ <solid-widget name="directory-empty-search-${uniq}">
+ <template>
+ <div class="text-center no-result">
+ <h3>${this.localize('search.noResult')}</h3>
+ <p>${this.localize('search.tryAnother')}</p>
+ </div>
+ </template>
+ </solid-widget>
+
<solid-widget name="directory-hidden-${uniq}">
<template>
\${value == "" ? \`<div class='directory-info bg-color-primary text-color-white text-bold padding-xsmall whitespace-normal'>
@@ -152,6 +161,7 @@ export default class SolidDirectory extends SolidTemplateElement {
multiple-skills-fields="name"
paginate-by="${paginateBy}"
+ empty-widget="directory-empty-search-${uniq}"
next="${getRoute(uniq)}-member-profile">
</solid-display>
</div>
diff --git a/src/styles/directory.scss b/src/styles/directory.scss
index dbc9c7b..c50e1c7 100644
--- a/src/styles/directory.scss
+++ b/src/styles/directory.scss
@@ -30,6 +30,7 @@
.masonry>div:nth-child(2) {
display: flex !important;
+ justify-content: center;
flex-wrap: wrap;
> solid-display {
display: flex;
@@ -56,3 +57,26 @@
.skills>solid-display>div>:nth-child(n+7) {
display: none;
}
+
+.no-result {
+ background-image: url("assets/empty-search.svg");
+ background-repeat: no-repeat;
+ background-position: top center;
+ padding-top: 210px;
+ background-size: contain;
+ h3 {
+ color: #2E3F57;
+ font-size: 20px;
+ font-weight: 600;
+ letter-spacing: 0.27px;
+ line-height: 27px;
+ margin-bottom: 9px;
+ }
+ p {
+ color: #636363;
+ font-size: 18px;
+ letter-spacing: 0.46px;
+ line-height: 22px;
+ margin-top: 0px;
+ }
+}
--
GitLab
From 6d5e79cb2fd9188bcca90a210b1187423cb6d649 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Wed, 31 Mar 2021 18:01:40 +0200
Subject: [PATCH 10/11] fix: wrong style on no result
---
src/styles/directory.scss | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/src/styles/directory.scss b/src/styles/directory.scss
index c50e1c7..21c9cc4 100644
--- a/src/styles/directory.scss
+++ b/src/styles/directory.scss
@@ -62,8 +62,7 @@
background-image: url("assets/empty-search.svg");
background-repeat: no-repeat;
background-position: top center;
- padding-top: 210px;
- background-size: contain;
+ padding-top: 250px;
h3 {
color: #2E3F57;
font-size: 20px;
--
GitLab
From 9980c9db4926e8c3e02ce579205977ef1a91e8de Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Mon, 12 Apr 2021 11:28:53 +0200
Subject: [PATCH 11/11] patch: larger cross to delete skills
---
src/solid-directory.js | 2 +-
src/styles/directory.scss | 7 +++++++
2 files changed, 8 insertions(+), 1 deletion(-)
diff --git a/src/solid-directory.js b/src/solid-directory.js
index db7a864..e5708ed 100644
--- a/src/solid-directory.js
+++ b/src/solid-directory.js
@@ -63,7 +63,7 @@ export default class SolidDirectory extends SolidTemplateElement {
label-profile.city="${this.localize('search.by.city')}"
widget-profile.city="solid-form-placeholder-text"
- class-skills="segment margin-bottom-small two-third sm-full padding-right-xsmall padding-left-xsmall sm-padding-none text-small select-shadow select-bg-white"
+ class-skills="search-skills segment margin-bottom-small two-third sm-full padding-right-xsmall padding-left-xsmall sm-padding-none text-small select-shadow select-bg-white"
label-skills="${this.localize('search.by.skill')}"
widget-skills="solid-form-multipleselect-autocompletion"
diff --git a/src/styles/directory.scss b/src/styles/directory.scss
index 21c9cc4..e0d34f4 100644
--- a/src/styles/directory.scss
+++ b/src/styles/directory.scss
@@ -54,6 +54,13 @@
}
}
+.search-skills .ss-value-delete {
+ padding-top: 5px;
+ padding-left: 7px;
+ padding-right: 7px;
+ padding-bottom: 5px;
+}
+
.skills>solid-display>div>:nth-child(n+7) {
display: none;
}
--
GitLab