diff --git a/package-lock.json b/package-lock.json
index c0ff41478644cd7e4a3d63b4c47d43a581e910e7..dedcf5af0316e49b53b652e316007cfe00046b66 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 b7bcd027279e5aa3e49b225e81fd66462d7be7ef..22f95bb9d5f6ec579a2464d3a941965ad3bb5955 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/assets/empty-search.svg b/src/assets/empty-search.svg
new file mode 100644
index 0000000000000000000000000000000000000000..41f64b1c3ba7059c352ab49032f1a18918eed453
--- /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/index.js b/src/index.js
index 0fc47aa6b8c6c441fe7920502a84115c6aa0e5ac..2610b78684493234f94e1d2812beabb1fd9fa92a 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 3227fca823d93238eb5a554224877dd8be7856ca..212c78b2a46022bcf23aac262c11bc3cac7bf724 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",
@@ -29,5 +29,9 @@
"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",
+ "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 f307572bf6f1be74e7de070006f89fb5503b2ea9..92d024063a01ff4a709533f55afd0e56023f3ef2 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",
@@ -29,5 +29,9 @@
"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",
+ "search.noResult": "No hay resultados para su búsqueda",
+ "search.tryAnother": " "
}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 9f5b958849501e4314ba682e64b2ce399113c59a..ce81c680ecb18107d104f6816a568d728e69848a 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",
@@ -29,5 +29,9 @@
"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",
+ "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 4d10a0a651afbb558b98dd0742985016238e71e0..e5708edd984057813809b8b66dade9329e373cd8 100644
--- a/src/solid-directory.js
+++ b/src/solid-directory.js
@@ -1,36 +1,45 @@
-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 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() {
return {
dataSrc: "data-src",
rangeSkills: "range-skills",
- paginateBy: "paginate-by"
+ paginateBy: "paginate-by",
+ uniq: "uniq"
};
}
- template({ dataSrc, rangeSkills, paginateBy = "9" }) {
+ template({
+ dataSrc,
+ rangeSkills,
+ paginateBy = "9",
+ uniq = Math.random().toString(16).slice(2)
+ }) {
+ let getRoute = (target) => target == uniq ? "members" : "chat";
+ if (window.hubl) {
+ getRoute = window.hubl.getRoute;
+ }
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(uniq)}-list">
+ <solid-route name="${getRoute(uniq)}-list"></solid-route>
+ <solid-route name="${getRoute(uniq)}-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(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>
@@ -41,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"
@@ -54,31 +63,50 @@ 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="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-placeholder-dropdown"
+ widget-skills="solid-form-multipleselect-autocompletion"
- submit-button="GO"
+ submit-button="${this.localize('goButton')}"
+ submit-widget="button"
></solid-form-search>
- <solid-widget name="directory-hidden">
+ <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());">${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'>
<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(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"
- 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>
@@ -89,13 +117,13 @@ 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"
+ loader-id="loader-members-list-${uniq}"
required-account.picture=""
required-first_name=""
@@ -103,7 +131,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"
@@ -117,58 +145,59 @@ 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="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"
-
+
multiple-skills
multiple-skills-fields="name"
-
+
paginate-by="${paginateBy}"
- next="member-profile">
+ empty-widget="directory-empty-search-${uniq}"
+ next="${getRoute(uniq)}-member-profile">
</solid-display>
</div>
</div>
- <div id="member-profile" data-view="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="members-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">
- <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>
@@ -176,50 +205,56 @@ 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"
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"
- 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')}"
-
+
bind-resources
></solid-display>
<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 8f7324754c23e7cb1b6d3caa170b74f8446f1bd1..ac2db6f0e9deda2de4ab5819715533809fbc7809 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.16";
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"
`) : '';
@@ -147,11 +161,11 @@ 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}
upload-url-${fields}="${uploadSrc}"
- extra-context="{'${fields}':'foaf:depiction'}"
next="${next}"
></solid-form>
</solid-ac-checker>
@@ -160,4 +174,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 e4294a4be20069e6826289399d342514040212d0..a8a56ebc4fb476cb72d183add05c58484612c617 100644
--- a/src/solid-profile.js
+++ b/src/solid-profile.js
@@ -1,33 +1,50 @@
-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() {
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;
+ }
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 +56,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 +111,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 +124,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 />
@@ -153,14 +181,15 @@ 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
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 +212,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 +222,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 +248,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>
@@ -252,10 +281,11 @@ 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"
- loader-id="loader-edit-skills"
+ loader-id="loader-edit-skills-${uniq}"
widget-username="solid-form-hidden"
widget-email="solid-form-hidden"
@@ -264,7 +294,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/checkbox.scss b/src/styles/checkbox.scss
index 2689881c399b7da8b5845c713324014b7597c554..5a8301d8214f0418e97dfb51d4c6fabbc759c29a 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 {
diff --git a/src/styles/commons.scss b/src/styles/commons.scss
index 6d861d27d118c9bb1de769e3cec32a90fd7415d7..924b2e15c15ec8afb6485200bf15f9bf96700bed 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 be3c5c5c83d61c1d7c99e6c5c6ea824d7dd544e1..e0d34f4551b945dd6aacde81c709c26ee3eb5b2b 100644
--- a/src/styles/directory.scss
+++ b/src/styles/directory.scss
@@ -1,62 +1,88 @@
-#members-list {
+.counter>div:nth-child(1) {
+ display: block !important;
+ position: relative;
+ text-align: center;
+ margin-top: 30px;
+ margin-bottom: 20px;
- .counter>div:nth-child(1) {
- display: block !important;
+ &::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;
- 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;
- }
+.masonry>div:nth-child(2) {
+ display: flex !important;
+ justify-content: center;
+ 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;
- }
+.segment.hover:hover {
+ box-shadow: 0 0 6px 0 rgba(46, 63, 88, 0.14);
+ bottom: 2px;
+ cursor: pointer;
+}
- .send-display {
- position: absolute;
- right: 20px;
- top: 20px;
- z-index: 1;
+.send-display {
+ position: absolute;
+ right: 20px;
+ top: 20px;
+ z-index: 1;
- *::before {
- margin-top: 3px;
- }
+ *::before {
+ margin-top: 3px;
}
+}
- .skills>solid-display>div>:nth-child(n+7) {
- display: none;
- }
+.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;
}
+.no-result {
+ background-image: url("assets/empty-search.svg");
+ background-repeat: no-repeat;
+ background-position: top center;
+ padding-top: 250px;
+ 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;
+ }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 92e8613a7e771c037a6336d54c1bf512c3d83415..57eb1613d61314787c4c116e92252dcde527f40d 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 a5b690365e9943c8a83a910c545b9d4e6fb0aecb..ac5789722526d3e67243e996affe87826d8b03b0 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