From 67ab0a68a3cf3148b884b0d5a4e31d48295184ef Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Tue, 16 Jun 2020 12:01:29 +0200 Subject: [PATCH 01/62] First integration to Hubl of the resource component --- src/dependencies.pug | 6 +++++- src/index.pug | 4 ++++ src/menu-left.pug | 5 +++++ src/page-resources.pug | 6 ++++++ 4 files changed, 20 insertions(+), 1 deletion(-) create mode 100644 src/page-resources.pug diff --git a/src/dependencies.pug b/src/dependencies.pug index 7aa93ee..3682ff9 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -15,7 +15,11 @@ script(type="module" src="https://unpkg.com/@startinblox/component-notifications if endpoints.events || (endpoints.get && endpoints.get.events) script(type="module" src="https://unpkg.com/@startinblox/component-event@0.1" defer) - //- script(type="module" src="/lib/sib-event/sib-event.js" defer) + //- script(type="module" src="/lib/sib-event-component/sib-event.js" defer) + +if endpoints.resources || (endpoints.get && endpoints.get.resources) + script(type="module" src="https://unpkg.com/@startinblox/component-resource" defer) + //- script(type="module" src="/lib/sib-resource/sib-resource.js" defer) if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers) script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.3" defer) diff --git a/src/index.pug b/src/index.pug index 1a139fe..3e69d87 100644 --- a/src/index.pug +++ b/src/index.pug @@ -53,6 +53,10 @@ html(lang="en") #events(hidden) include page-events.pug + if endpoints.resources || (endpoints.get && endpoints.get.resources) + #resources(hidden) + include page-resources.pug + #admin(hidden).with-sidebar include page-admin.pug diff --git a/src/menu-left.pug b/src/menu-left.pug index e304b87..4e57d9a 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -69,6 +69,11 @@ sib-router#navbar-router(default-route='dashboard') div.menu-label Evènements div.menu-icon.icon-calendar div.divider + if endpoints.resources || (endpoints.get && endpoints.get.resources) + sib-route.menu(name='resources') + div.menu-label Ressources + div.menu-icon.icon-text-box-multiple-outline + div.divider if endpoints.projects || (endpoints.get && endpoints.get.projects) div sib-link(next='admin-project-list') diff --git a/src/page-resources.pug b/src/page-resources.pug new file mode 100644 index 0000000..9f6220e --- /dev/null +++ b/src/page-resources.pug @@ -0,0 +1,6 @@ +.views-container + sib-resource(data-src=`${endpoints.resources || (endpoints.get && endpoints.get.resources)}` + range-resource-type=`${endpoints.resourcestypes || (endpoints.get && endpoints.get.resourcestypes)}` + range-resource-keyword=`${endpoints.resourceskeywords || (endpoints.get && endpoints.get.resourceskeywords)}` + upload-dir=`${endpoints.uploads || (endpoints.get && endpoints.get.uploads)}` + ) \ No newline at end of file From 6b390c975aaad1e0d1c7bdc31b4f4abd7c854f81 Mon Sep 17 00:00:00 2001 From: Marjolaine Le Bon Date: Thu, 2 Jul 2020 18:03:56 +0200 Subject: [PATCH 02/62] update: global layout --- ...le.happy-dev.css => client.sample.etuc.css | 6 +- client.sample.etuc.scss | 169 ++++++++++++++++ package-lock.json | 191 ++++-------------- src/dependencies.pug | 8 +- src/styles/abstracts/_fonts.scss | 2 - src/styles/index.scss | 6 +- src/styles/layout/events/events.scss | 2 +- src/styles/layout/resources/_index.scss | 1 + src/styles/layout/resources/resources.scss | 6 + 9 files changed, 224 insertions(+), 167 deletions(-) rename client.sample.happy-dev.css => client.sample.etuc.css (98%) create mode 100644 client.sample.etuc.scss create mode 100644 src/styles/layout/resources/_index.scss create mode 100644 src/styles/layout/resources/resources.scss diff --git a/client.sample.happy-dev.css b/client.sample.etuc.css similarity index 98% rename from client.sample.happy-dev.css rename to client.sample.etuc.css index 8642cc0..25c3a1a 100644 --- a/client.sample.happy-dev.css +++ b/client.sample.etuc.css @@ -1,6 +1,6 @@ :root { - --color-primary: #FFB700; - --color-secondary: #3C3F57; + --color-primary: pink; + --color-secondary: green; --color-complementary: #6259E5; --color-complementary-darken: #36383B; --color-white: #FFFFFF; @@ -36,7 +36,7 @@ --color-user-panel-list-border: #E4E8ED; /* Left menu */ - --color-menu-highlight-primary: #FFD759; + --color-menu-highlight-primary: #000c42; --color-menu-background: var(--color-secondary); --color-menu-text: var(--color-white); --color-menu-text-active: var(--color-secondary); diff --git a/client.sample.etuc.scss b/client.sample.etuc.scss new file mode 100644 index 0000000..7ad979c --- /dev/null +++ b/client.sample.etuc.scss @@ -0,0 +1,169 @@ +:root { + --color-primary: #063B5C; + --color-secondary: #3A3A3A; + --color-complementary: #C4262E; + --color-complementary-darken: #36383B; + --color-white: #FFFFFF; + + --color-black-h: 216; + --color-black-s: 4%; + --color-black-l: 22%; + + --color-main-background: var(--color-grey-13); + --color-main-text: #7A7F85; + --color-highlight-primary: var(--color-primary); + --color-user-panel: var(--color-black); + --color-bell: var(--color-secondary); + --color-avatar-background: #E4E8ED; + --color-title: #36383B; + --color-h1: var(--color-title); + --color-h2: var(--color-title); + + /* Depreciated */ + --color-tag-group-text: #9BA0A7; + --color-tag-group-border: var(--color-primary); + --color-label-dark: var(--color-grey-6); + + /* Header's elements */ + --color-header-background: var(--color-white); + --color-bell: var(--color-complementary-darken); + --color-user-panel-header-text: var(--color-complementary-darken); + --color-user-panel-header-background: var(--color-white); + --color-user-panel-header-text-open: var(--color-white); + --color-user-panel-header-background-open: var(--color-secondary); + --color-user-panel-list-background: var(--color-white); + --color-user-panel-list-text-hover: var(--color-complementary); + --color-user-panel-list-border: #E4E8ED; + + /* Left menu */ + --color-menu-highlight-primary:var(--color-white); + --color-menu-background: var(--color-secondary); + --color-menu-text: var(--color-white); + --color-menu-text-active: var(--color-complementary); + --color-menu-background-active: var(--color-menu-highlight-primary); + --color-menu-badge-background: var(--color-menu-highlight-primary); + --color-menu-badge-text-active: var(--color-menu-highlight-primary); + --color-menu-badge-background-active: var(--color-secondary); + --color-menu-icon-background-active: var(--color-secondary); + + /* Right menu */ + --color-right-menu-background: #e8e8ee; + --color-right-menu-text: #3c3F57; + --color-right-menu-link-border: #BDC2D7; + --color-right-menu-active-text: var(--color-white); + --color-right-menu-active-background: var(--color-complementary); + --color-right-menu-active-icon: var(--color-primary); + + /* Scrollbar */ + --color-scrollbar-right-background: var(--color-white); + --color-scrollbar-right-track: var(--color-grey-6); + --color-scrollbar-left-background: var(--color-secondary); + --color-scrollbar-left-track: var(--color-grey-11); + + /* Tags */ + --color-tag-admin-text: var(--color-complementary); + --color-tag-admin-border: var(--color-complementary); + + /* Form elements */ + --color-button-white: var(--color-white); + --color-button-primary: var(--color-primary); + --color-button-secondary: var(--color-complementary); + --color-button-complementary: var(--color-secondary); + + --color-input-background: #EDF1FA; + --color-input-text: var(--color-secondary); + --color-input-icon: var(--color-complementary); + --color-input-active: var(--color-complementary); + --color-fieldset: var(--color-title); + --color-fieldset-border: #DAE2F3; + --color-button-modal: var(--color-title); + --color-select-list: var(--color-secondary); + --color-select-add-button: var(--color-button-secondary); + --color-select-add-button-background: var(--color-button-white); + + --color-label-light: var(--color-grey-6); + + /* Skill */ + --color-skill-background: var(--color-primary); + --color-skill-text: var(--color-white); + + /* Icon */ + --color-icon: var(--color-primary); + + /* Table */ + --color-table-header-background: #BDC2D7; + --color-table-header-text: var(--color-white); + --color-table-border: #BDC2D7; + + /* User thumb */ + --color-user-thumb-name: #7A7F85; + + --color-backlink: var(--color-secondary); + --color-content-header: #DAE2F3; + + /* Chat */ + --color-chat-white: var(--color-white); + --color-chat-primary: var(--color-primary); + --color-chat-complementary: var(--color-complementary); + --color-chat-secondary: var(--color-secondary); + --color-chat-complementary-darken: var(--color-complementary-darken); + --color-chat-grey-1: var(--color-grey-4); + --color-chat-grey-2: var(--color-grey-6); + --color-chat-grey-3: var(--color-grey-10); + + /* Directory */ + --color-directory-grey-4: #7A7F85; + --color-directory-grey-5: #F0F3F6; + + --color-directory-avatar-background: #E4E8ED; + --color-directory-back-link: #36383B; + --color-directory-border: #DAE2F3; + --color-directory-content-header-border: #DAE2F3; + --color-directory-h1: var(--color-complementary-darken); + --color-directory-list-icon: var(--color-primary); + --color-directory-text: var(--color-directory-grey-4); + + --color-directory-form-input: #EDF1FA; + --color-directory-form-input-text: var(--color-directory-grey-4); + --color-directory-form-input-active: var(--color-complementary); + --color-directory-form-select-icon: var(--color-complementary); +} + +#main__menu { + font-family: "RefrigeratorDelxW01Bold"; +} +#main__menu .menu { + font-size: 2rem; +} +#main__menu .menu[active=""] { + color: var(--color-complementary); +} +#main__menu .sub-menu.menu-notification { + font-family: Facit; +} +#viewport .content-box { + font-family: Facit; +} +#viewport #circle .content-box__header sib-display div { + display: flex; + flex-direction: column; + text-align: center; +} +#viewport #circle .content-box__header .h1-like { + font-family: "RefrigeratorDelxW01Bold"; + font-size: 3.2rem; + color: var(--color-primary); +} +#viewport #circle .content-box__header sib-display div .h1-aside { + font-family: Facit; + margin: 10px 0; +} +#viewport #circle .content-box__header sib-display div .h1-aside:not(:empty)::before { + content: none; +} +#viewport .with-sidebar nav > sib-router > ul > sib-route[active] { + color: var(--color-right-menu-active-text); +} +#viewport .with-sidebar nav > sib-router { + color: #3C3F57; +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index f19ba14..231201a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -587,20 +587,17 @@ "arr-diff": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz", - "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=", - "optional": true + "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=" }, "arr-flatten": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz", - "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==", - "optional": true + "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==" }, "arr-union": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz", - "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=", - "optional": true + "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=" }, "array-find-index": { "version": "1.0.2", @@ -610,8 +607,7 @@ "array-unique": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz", - "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=", - "optional": true + "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=" }, "asap": { "version": "2.0.6", @@ -634,8 +630,7 @@ "assign-symbols": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz", - "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=", - "optional": true + "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=" }, "async": { "version": "3.2.0", @@ -662,8 +657,7 @@ "atob": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz", - "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==", - "optional": true + "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==" }, "aws-sign2": { "version": "0.7.0", @@ -716,7 +710,6 @@ "version": "0.11.2", "resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz", "integrity": "sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==", - "optional": true, "requires": { "cache-base": "^1.0.1", "class-utils": "^0.3.5", @@ -731,7 +724,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz", "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=", - "optional": true, "requires": { "is-descriptor": "^1.0.0" } @@ -740,7 +732,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz", "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==", - "optional": true, "requires": { "kind-of": "^6.0.0" } @@ -749,7 +740,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz", "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==", - "optional": true, "requires": { "kind-of": "^6.0.0" } @@ -758,7 +748,6 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz", "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==", - "optional": true, "requires": { "is-accessor-descriptor": "^1.0.0", "is-data-descriptor": "^1.0.0", @@ -817,7 +806,6 @@ "version": "2.3.2", "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz", "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==", - "optional": true, "requires": { "arr-flatten": "^1.1.0", "array-unique": "^0.3.2", @@ -835,7 +823,6 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "optional": true, "requires": { "is-extendable": "^0.1.0" } @@ -863,7 +850,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz", "integrity": "sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==", - "optional": true, "requires": { "collection-visit": "^1.0.0", "component-emitter": "^1.2.1", @@ -964,7 +950,6 @@ "version": "0.3.6", "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz", "integrity": "sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==", - "optional": true, "requires": { "arr-union": "^3.1.0", "define-property": "^0.2.5", @@ -976,7 +961,6 @@ "version": "0.2.5", "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz", "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=", - "optional": true, "requires": { "is-descriptor": "^0.1.0" } @@ -1080,7 +1064,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz", "integrity": "sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=", - "optional": true, "requires": { "map-visit": "^1.0.0", "object-visit": "^1.0.0" @@ -1128,8 +1111,7 @@ "component-emitter": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz", - "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==", - "optional": true + "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==" }, "compressible": { "version": "2.0.18", @@ -1218,8 +1200,7 @@ "copy-descriptor": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz", - "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=", - "optional": true + "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=" }, "copyfiles": { "version": "2.2.0", @@ -1560,8 +1541,7 @@ "decode-uri-component": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz", - "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=", - "optional": true + "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=" }, "define-properties": { "version": "1.1.3", @@ -1575,7 +1555,6 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz", "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==", - "optional": true, "requires": { "is-descriptor": "^1.0.2", "isobject": "^3.0.1" @@ -1585,7 +1564,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz", "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==", - "optional": true, "requires": { "kind-of": "^6.0.0" } @@ -1594,7 +1572,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz", "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==", - "optional": true, "requires": { "kind-of": "^6.0.0" } @@ -1603,7 +1580,6 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz", "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==", - "optional": true, "requires": { "is-accessor-descriptor": "^1.0.0", "is-data-descriptor": "^1.0.0", @@ -1797,7 +1773,6 @@ "version": "2.1.4", "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz", "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=", - "optional": true, "requires": { "debug": "^2.3.3", "define-property": "^0.2.5", @@ -1812,7 +1787,6 @@ "version": "0.2.5", "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz", "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=", - "optional": true, "requires": { "is-descriptor": "^0.1.0" } @@ -1821,7 +1795,6 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "optional": true, "requires": { "is-extendable": "^0.1.0" } @@ -1837,7 +1810,6 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz", "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=", - "optional": true, "requires": { "assign-symbols": "^1.0.0", "is-extendable": "^1.0.1" @@ -1847,7 +1819,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz", "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==", - "optional": true, "requires": { "is-plain-object": "^2.0.4" } @@ -1858,7 +1829,6 @@ "version": "2.0.4", "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz", "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==", - "optional": true, "requires": { "array-unique": "^0.3.2", "define-property": "^1.0.0", @@ -1874,7 +1844,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz", "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=", - "optional": true, "requires": { "is-descriptor": "^1.0.0" } @@ -1883,7 +1852,6 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "optional": true, "requires": { "is-extendable": "^0.1.0" } @@ -1892,7 +1860,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz", "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==", - "optional": true, "requires": { "kind-of": "^6.0.0" } @@ -1901,7 +1868,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz", "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==", - "optional": true, "requires": { "kind-of": "^6.0.0" } @@ -1910,7 +1876,6 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz", "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==", - "optional": true, "requires": { "is-accessor-descriptor": "^1.0.0", "is-data-descriptor": "^1.0.0", @@ -1992,7 +1957,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz", "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=", - "optional": true, "requires": { "extend-shallow": "^2.0.1", "is-number": "^3.0.0", @@ -2004,7 +1968,6 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "optional": true, "requires": { "is-extendable": "^0.1.0" } @@ -2037,8 +2000,7 @@ "for-in": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", - "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=", - "optional": true + "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=" }, "forever-agent": { "version": "0.6.1", @@ -2059,7 +2021,6 @@ "version": "0.2.1", "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz", "integrity": "sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=", - "optional": true, "requires": { "map-cache": "^0.2.2" } @@ -2116,8 +2077,7 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true, - "optional": true + "bundled": true }, "aproba": { "version": "1.2.0", @@ -2154,8 +2114,7 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "concat-map": { "version": "0.0.1", @@ -2164,8 +2123,7 @@ }, "console-control-strings": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "core-util-is": { "version": "1.0.2", @@ -2268,8 +2226,7 @@ }, "inherits": { "version": "2.0.4", - "bundled": true, - "optional": true + "bundled": true }, "ini": { "version": "1.3.5", @@ -2279,7 +2236,6 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -2292,20 +2248,17 @@ "minimatch": { "version": "3.0.4", "bundled": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true, - "optional": true + "bundled": true }, "minipass": { "version": "2.9.0", "bundled": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -2322,7 +2275,6 @@ "mkdirp": { "version": "0.5.1", "bundled": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -2403,8 +2355,7 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "object-assign": { "version": "4.1.1", @@ -2414,7 +2365,6 @@ "once": { "version": "1.4.0", "bundled": true, - "optional": true, "requires": { "wrappy": "1" } @@ -2490,8 +2440,7 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true, - "optional": true + "bundled": true }, "safer-buffer": { "version": "2.1.2", @@ -2521,7 +2470,6 @@ "string-width": { "version": "1.0.2", "bundled": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -2539,7 +2487,6 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -2578,13 +2525,11 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true, - "optional": true + "bundled": true }, "yallist": { "version": "3.1.1", - "bundled": true, - "optional": true + "bundled": true } } }, @@ -2654,8 +2599,7 @@ "get-value": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz", - "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=", - "optional": true + "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=" }, "getos": { "version": "3.1.4", @@ -2786,7 +2730,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz", "integrity": "sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=", - "optional": true, "requires": { "get-value": "^2.0.6", "has-values": "^1.0.0", @@ -2797,7 +2740,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/has-values/-/has-values-1.0.0.tgz", "integrity": "sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=", - "optional": true, "requires": { "is-number": "^3.0.0", "kind-of": "^4.0.0" @@ -2807,7 +2749,6 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz", "integrity": "sha1-IIE989cSkosgc3hpGkUGb65y3Vc=", - "optional": true, "requires": { "is-buffer": "^1.1.5" } @@ -2894,7 +2835,6 @@ "version": "0.1.6", "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=", - "optional": true, "requires": { "kind-of": "^3.0.2" }, @@ -2903,7 +2843,6 @@ "version": "3.2.2", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", - "optional": true, "requires": { "is-buffer": "^1.1.5" } @@ -2947,7 +2886,6 @@ "version": "0.1.4", "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=", - "optional": true, "requires": { "kind-of": "^3.0.2" }, @@ -2956,7 +2894,6 @@ "version": "3.2.2", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", - "optional": true, "requires": { "is-buffer": "^1.1.5" } @@ -2972,7 +2909,6 @@ "version": "0.1.6", "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz", "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==", - "optional": true, "requires": { "is-accessor-descriptor": "^0.1.6", "is-data-descriptor": "^0.1.4", @@ -2982,8 +2918,7 @@ "kind-of": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz", - "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==", - "optional": true + "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==" } } }, @@ -3006,14 +2941,12 @@ "is-extendable": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz", - "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=", - "optional": true + "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=" }, "is-extglob": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", - "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", - "optional": true + "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=" }, "is-finite": { "version": "1.1.0", @@ -3051,7 +2984,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz", "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=", - "optional": true, "requires": { "kind-of": "^3.0.2" }, @@ -3060,7 +2992,6 @@ "version": "3.2.2", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", - "optional": true, "requires": { "is-buffer": "^1.1.5" } @@ -3089,7 +3020,6 @@ "version": "2.0.4", "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==", - "optional": true, "requires": { "isobject": "^3.0.1" } @@ -3134,8 +3064,7 @@ "is-windows": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz", - "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==", - "optional": true + "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==" }, "isarray": { "version": "1.0.0", @@ -3150,8 +3079,7 @@ "isobject": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", - "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=", - "optional": true + "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=" }, "isstream": { "version": "0.1.2", @@ -3250,8 +3178,7 @@ "kind-of": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", - "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==", - "optional": true + "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==" }, "lazy-ass": { "version": "1.6.0", @@ -3581,8 +3508,7 @@ "map-cache": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz", - "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=", - "optional": true + "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=" }, "map-obj": { "version": "1.0.1", @@ -3593,7 +3519,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz", "integrity": "sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=", - "optional": true, "requires": { "object-visit": "^1.0.0" } @@ -3637,7 +3562,6 @@ "version": "3.1.10", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz", "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==", - "optional": true, "requires": { "arr-diff": "^4.0.0", "array-unique": "^0.3.2", @@ -3695,7 +3619,6 @@ "version": "1.3.2", "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz", "integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==", - "optional": true, "requires": { "for-in": "^1.0.2", "is-extendable": "^1.0.1" @@ -3705,7 +3628,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz", "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==", - "optional": true, "requires": { "is-plain-object": "^2.0.4" } @@ -3740,7 +3662,6 @@ "version": "1.2.13", "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz", "integrity": "sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==", - "optional": true, "requires": { "arr-diff": "^4.0.0", "array-unique": "^0.3.2", @@ -4028,7 +3949,6 @@ "version": "0.1.0", "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz", "integrity": "sha1-fn2Fi3gb18mRpBupde04EnVOmYw=", - "optional": true, "requires": { "copy-descriptor": "^0.1.0", "define-property": "^0.2.5", @@ -4039,7 +3959,6 @@ "version": "0.2.5", "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz", "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=", - "optional": true, "requires": { "is-descriptor": "^0.1.0" } @@ -4048,7 +3967,6 @@ "version": "3.2.2", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", - "optional": true, "requires": { "is-buffer": "^1.1.5" } @@ -4069,7 +3987,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz", "integrity": "sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=", - "optional": true, "requires": { "isobject": "^3.0.0" } @@ -4089,7 +4006,6 @@ "version": "1.3.0", "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz", "integrity": "sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=", - "optional": true, "requires": { "isobject": "^3.0.1" } @@ -4203,8 +4119,7 @@ "pascalcase": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz", - "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=", - "optional": true + "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=" }, "path-dirname": { "version": "1.0.2", @@ -4288,8 +4203,7 @@ "posix-character-classes": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz", - "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=", - "optional": true + "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=" }, "pretty-bytes": { "version": "5.3.0", @@ -4587,7 +4501,6 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz", "integrity": "sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==", - "optional": true, "requires": { "extend-shallow": "^3.0.2", "safe-regex": "^1.1.0" @@ -4602,8 +4515,7 @@ "repeat-element": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.3.tgz", - "integrity": "sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g==", - "optional": true + "integrity": "sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g==" }, "repeat-string": { "version": "1.6.1", @@ -4675,8 +4587,7 @@ "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", - "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=", - "optional": true + "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=" }, "restore-cursor": { "version": "1.0.1", @@ -4691,8 +4602,7 @@ "ret": { "version": "0.1.15", "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz", - "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==", - "optional": true + "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==" }, "right-align": { "version": "0.1.3", @@ -4728,7 +4638,6 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz", "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=", - "optional": true, "requires": { "ret": "~0.1.10" } @@ -4825,7 +4734,6 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz", "integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==", - "optional": true, "requires": { "extend-shallow": "^2.0.1", "is-extendable": "^0.1.1", @@ -4837,7 +4745,6 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "optional": true, "requires": { "is-extendable": "^0.1.0" } @@ -4887,7 +4794,6 @@ "version": "0.8.2", "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz", "integrity": "sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==", - "optional": true, "requires": { "base": "^0.11.1", "debug": "^2.2.0", @@ -4903,7 +4809,6 @@ "version": "0.2.5", "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz", "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=", - "optional": true, "requires": { "is-descriptor": "^0.1.0" } @@ -4912,7 +4817,6 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", - "optional": true, "requires": { "is-extendable": "^0.1.0" } @@ -4923,7 +4827,6 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/snapdragon-node/-/snapdragon-node-2.1.1.tgz", "integrity": "sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==", - "optional": true, "requires": { "define-property": "^1.0.0", "isobject": "^3.0.0", @@ -4934,7 +4837,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz", "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=", - "optional": true, "requires": { "is-descriptor": "^1.0.0" } @@ -4943,7 +4845,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz", "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==", - "optional": true, "requires": { "kind-of": "^6.0.0" } @@ -4952,7 +4853,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz", "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==", - "optional": true, "requires": { "kind-of": "^6.0.0" } @@ -4961,7 +4861,6 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz", "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==", - "optional": true, "requires": { "is-accessor-descriptor": "^1.0.0", "is-data-descriptor": "^1.0.0", @@ -4974,7 +4873,6 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/snapdragon-util/-/snapdragon-util-3.0.1.tgz", "integrity": "sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==", - "optional": true, "requires": { "kind-of": "^3.2.0" }, @@ -4983,7 +4881,6 @@ "version": "3.2.2", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", - "optional": true, "requires": { "is-buffer": "^1.1.5" } @@ -4999,7 +4896,6 @@ "version": "0.5.2", "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.2.tgz", "integrity": "sha512-MjqsvNwyz1s0k81Goz/9vRBe9SZdB09Bdw+/zYyO+3CuPk6fouTaxscHkgtE8jKvf01kVfl8riHzERQ/kefaSA==", - "optional": true, "requires": { "atob": "^2.1.1", "decode-uri-component": "^0.2.0", @@ -5011,8 +4907,7 @@ "source-map-url": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz", - "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=", - "optional": true + "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=" }, "spdx-correct": { "version": "3.1.0", @@ -5046,7 +4941,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz", "integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==", - "optional": true, "requires": { "extend-shallow": "^3.0.0" } @@ -5071,7 +4965,6 @@ "version": "0.1.2", "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz", "integrity": "sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=", - "optional": true, "requires": { "define-property": "^0.2.5", "object-copy": "^0.1.0" @@ -5081,7 +4974,6 @@ "version": "0.2.5", "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz", "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=", - "optional": true, "requires": { "is-descriptor": "^0.1.0" } @@ -5233,7 +5125,6 @@ "version": "0.3.0", "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz", "integrity": "sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=", - "optional": true, "requires": { "kind-of": "^3.0.2" }, @@ -5242,7 +5133,6 @@ "version": "3.2.2", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", - "optional": true, "requires": { "is-buffer": "^1.1.5" } @@ -5253,7 +5143,6 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz", "integrity": "sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==", - "optional": true, "requires": { "define-property": "^2.0.2", "extend-shallow": "^3.0.2", @@ -5265,7 +5154,6 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz", "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=", - "optional": true, "requires": { "is-number": "^3.0.0", "repeat-string": "^1.6.1" @@ -5371,7 +5259,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz", "integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==", - "optional": true, "requires": { "arr-union": "^3.1.0", "get-value": "^2.0.6", @@ -5394,7 +5281,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz", "integrity": "sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=", - "optional": true, "requires": { "has-value": "^0.3.1", "isobject": "^3.0.0" @@ -5404,7 +5290,6 @@ "version": "0.3.1", "resolved": "https://registry.npmjs.org/has-value/-/has-value-0.3.1.tgz", "integrity": "sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=", - "optional": true, "requires": { "get-value": "^2.0.3", "has-values": "^0.1.4", @@ -5415,7 +5300,6 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz", "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=", - "optional": true, "requires": { "isarray": "1.0.0" } @@ -5425,8 +5309,7 @@ "has-values": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/has-values/-/has-values-0.1.4.tgz", - "integrity": "sha1-bWHeldkd/Km5oCCJrThL/49it3E=", - "optional": true + "integrity": "sha1-bWHeldkd/Km5oCCJrThL/49it3E=" } } }, @@ -5453,8 +5336,7 @@ "urix": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz", - "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=", - "optional": true + "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=" }, "url": { "version": "0.11.0", @@ -5477,8 +5359,7 @@ "use": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", - "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==", - "optional": true + "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==" }, "util-deprecate": { "version": "1.0.2", diff --git a/src/dependencies.pug b/src/dependencies.pug index 3682ff9..3729d6f 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -14,12 +14,12 @@ script(type="module" src="https://unpkg.com/@startinblox/component-notifications //- script(type="module" src="/lib/sib-notifications/index.js" defer) if endpoints.events || (endpoints.get && endpoints.get.events) - script(type="module" src="https://unpkg.com/@startinblox/component-event@0.1" defer) - //- script(type="module" src="/lib/sib-event-component/sib-event.js" defer) + //- script(type="module" src="https://unpkg.com/@startinblox/component-event@0.1" defer) + script(type="module" src="/lib/sib-event-component/sib-event.js" defer) if endpoints.resources || (endpoints.get && endpoints.get.resources) - script(type="module" src="https://unpkg.com/@startinblox/component-resource" defer) - //- script(type="module" src="/lib/sib-resource/sib-resource.js" defer) + //- script(type="module" src="https://unpkg.com/@startinblox/component-resource" defer) + script(type="module" src="/lib/sib-resource/sib-resource.js" defer) if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers) script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.3" defer) diff --git a/src/styles/abstracts/_fonts.scss b/src/styles/abstracts/_fonts.scss index 33a8798..191ee64 100644 --- a/src/styles/abstracts/_fonts.scss +++ b/src/styles/abstracts/_fonts.scss @@ -11,7 +11,6 @@ font-family: 'Facit'; src: url('../fonts/FacitRegular.eot'); src: url('../fonts/FacitRegular.eot') format('embedded-opentype'), - url('../fonts/FacitRegular.woff2') format('woff2'), url('../fonts/FacitRegular.woff') format('woff'), url('../fonts/FacitRegular.ttf') format('truetype'), url('../fonts/FacitRegular.svg#FacitRegular') format('svg'); @@ -21,7 +20,6 @@ font-family: 'Facit'; src: url('../fonts/FacitBold.eot'); src: url('../fonts/FacitBold.eot') format('embedded-opentype'), - url('../fonts/FacitBold.woff2') format('woff2'), url('../fonts/FacitBold.woff') format('woff'), url('../fonts/FacitBold.ttf') format('truetype'), url('../fonts/FacitBold.svg#FacitBold') format('svg'); diff --git a/src/styles/index.scss b/src/styles/index.scss index 1458359..17ca15d 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -20,6 +20,8 @@ @import 'layout/members/index'; @import 'layout/job-offers/index'; @import 'layout/user/index'; - @import 'layout/events/index'; + @import 'layout/events/index'; + @import 'layout/resources/index'; @import 'layout/dashboard/index'; -} \ No newline at end of file +} +@import '../../client.sample.etuc.scss'; \ No newline at end of file diff --git a/src/styles/layout/events/events.scss b/src/styles/layout/events/events.scss index 3b38a7e..be3751b 100644 --- a/src/styles/layout/events/events.scss +++ b/src/styles/layout/events/events.scss @@ -2,7 +2,7 @@ width: 100%; font-family: "Facit"; font-weight: 400; - color: $color-0-0-22; + color: #7A7F85; sib-event { .red-button, .event-type { diff --git a/src/styles/layout/resources/_index.scss b/src/styles/layout/resources/_index.scss new file mode 100644 index 0000000..e0c41ce --- /dev/null +++ b/src/styles/layout/resources/_index.scss @@ -0,0 +1 @@ +@import 'resources.scss'; \ No newline at end of file diff --git a/src/styles/layout/resources/resources.scss b/src/styles/layout/resources/resources.scss new file mode 100644 index 0000000..9994a91 --- /dev/null +++ b/src/styles/layout/resources/resources.scss @@ -0,0 +1,6 @@ +#resources{ + width: 100%; + font-family: "Facit"; + font-weight: 400; + color: $color-0-0-22; +} \ No newline at end of file From 9997379323b5bfd821a797012e78a458ad73ece3 Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Thu, 9 Jul 2020 17:03:27 +0200 Subject: [PATCH 03/62] update: adding proper menu access from circles to events and resources --- src/page-circle.pug | 11 +++++++++++ src/views/circle/page-circle-events.pug | 6 ++++++ src/views/circle/page-circle-resources.pug | 6 ++++++ 3 files changed, 23 insertions(+) create mode 100644 src/views/circle/page-circle-events.pug create mode 100644 src/views/circle/page-circle-resources.pug diff --git a/src/page-circle.pug b/src/page-circle.pug index 6439aac..ce4a12a 100644 --- a/src/page-circle.pug +++ b/src/page-circle.pug @@ -16,6 +16,10 @@ include views/circle/page-circle-chat.pug #circle-information.content-box__height(hidden) include views/circle/page-circle-profile.pug + #circle-events(hidden) + include views/circle/page-circle-events.pug + #circle-resources(hidden) + include views/circle/page-circle-resources.pug nav.jsRightMenu(role='navigation') sib-router(default-route='circle-chat') @@ -28,3 +32,10 @@ nav.jsRightMenu(role='navigation') sib-route(name='circle-information') li a Information + sib-route(name='circle-events' use-id) + li + a Events + sib-route(name='circle-resources' use-id) + li + a Resources + diff --git a/src/views/circle/page-circle-events.pug b/src/views/circle/page-circle-events.pug new file mode 100644 index 0000000..9acc4f8 --- /dev/null +++ b/src/views/circle/page-circle-events.pug @@ -0,0 +1,6 @@ +sib-display( + class='w700' + bind-resources + nested-field="events" + fields='name, shortDescription, startDate' +) \ No newline at end of file diff --git a/src/views/circle/page-circle-resources.pug b/src/views/circle/page-circle-resources.pug new file mode 100644 index 0000000..1fb4cdd --- /dev/null +++ b/src/views/circle/page-circle-resources.pug @@ -0,0 +1,6 @@ +sib-display( + class='w700' + bind-resources + nested-field="resources" + fields='name, shortdesc, keywords' +) \ No newline at end of file From 8da51ec9fa61e605c8401a4ba86cc189a83f5312 Mon Sep 17 00:00:00 2001 From: Marjolaine Le Bon Date: Thu, 9 Jul 2020 17:51:54 +0200 Subject: [PATCH 04/62] update: etuc design + component design --- client.sample.etuc.scss | 13 ++---- src/styles/layout/events/events.scss | 23 ++++++---- src/styles/layout/resources/resources.scss | 53 +++++++++++++++++++++- 3 files changed, 71 insertions(+), 18 deletions(-) diff --git a/client.sample.etuc.scss b/client.sample.etuc.scss index 7ad979c..55c2e64 100644 --- a/client.sample.etuc.scss +++ b/client.sample.etuc.scss @@ -144,7 +144,7 @@ #viewport .content-box { font-family: Facit; } -#viewport #circle .content-box__header sib-display div { +#viewport #circle .content-box__header solid-display div { display: flex; flex-direction: column; text-align: center; @@ -154,16 +154,13 @@ font-size: 3.2rem; color: var(--color-primary); } -#viewport #circle .content-box__header sib-display div .h1-aside { - font-family: Facit; +#viewport #circle .content-box__header solid-display div .h1-aside { + margin: 10px 0; } -#viewport #circle .content-box__header sib-display div .h1-aside:not(:empty)::before { +#viewport #circle .content-box__header solid-display div .h1-aside:not(:empty)::before { content: none; } -#viewport .with-sidebar nav > sib-router > ul > sib-route[active] { - color: var(--color-right-menu-active-text); -} -#viewport .with-sidebar nav > sib-router { +#viewport .with-sidebar nav > solid-router { color: #3C3F57; } \ No newline at end of file diff --git a/src/styles/layout/events/events.scss b/src/styles/layout/events/events.scss index 309dcf4..e8acab8 100644 --- a/src/styles/layout/events/events.scss +++ b/src/styles/layout/events/events.scss @@ -6,10 +6,10 @@ sib-event { .red-button, .event-type { - background-color: $color-357-67-45; + background-color: #C4262E; } .black-button { - background-color: $color-0-0-22; + background-color: #3A3A3A; margin-left: 10%; } .event-type, @@ -18,12 +18,12 @@ } #listevents [name="name"], solid-display-link-event .mdi::before { - color: $color-357-67-45; + color: #C4262E; } .event-place-name, .nextevent-startdate, solid-display-link-event { - color: $color-0-0-22; + color: #3A3A3A; } .sib-event { font-family: "Facit"; @@ -32,7 +32,7 @@ font-family: "RefrigeratorDelxW01Bold"; font-size: 3.2rem; line-height: 3.8rem; - color: $color-203-87-19; + color: #063B5C; } } #listevents { @@ -41,7 +41,7 @@ width: max-content; height: max-content; padding: 5px 20px; - color: $color-203-87-19; + color: #063B5C; } solid-form solid-form-dropdown{ label div { @@ -51,7 +51,7 @@ font-family: "RefrigeratorDelxW01Bold"; font-size: 2.4rem; line-height: 29px; - color: $color-203-87-19; + color: #063B5C; top: -40px; content: "Research an event"; } @@ -61,7 +61,7 @@ font-size: 2.2rem; line-height: 2.6rem; letter-spacing: 0.32px; - color: $color-203-87-19; + color: #063B5C; padding: 5px; max-width: 250px; margin: 5px auto; @@ -81,7 +81,7 @@ font-family: "RefrigeratorDelxW01Bold"; font-size: 3.2rem; line-height: 3.8rem; - color: $color-203-87-19; + color: #063B5C; } solid-display div .event-type { width: max-content; @@ -102,4 +102,9 @@ padding: 5px 20px; } } + @media (max-width: 991px) { + #listevents { + margin-top: 65px; + } + } } \ No newline at end of file diff --git a/src/styles/layout/resources/resources.scss b/src/styles/layout/resources/resources.scss index 9994a91..cf03c16 100644 --- a/src/styles/layout/resources/resources.scss +++ b/src/styles/layout/resources/resources.scss @@ -2,5 +2,56 @@ width: 100%; font-family: "Facit"; font-weight: 400; - color: $color-0-0-22; + color: #3A3A3A; + sib-resource { + background-color: #F0F3F6; + .sib-resource { + font-family: "Facit"; + .red-button { + background-color: #C4262E; + } + .black-button { + background-color: #3A3A3A; + margin-left: 10%; + } + .lnk-newresource { + margin-top: 30px; + margin-right: 70px; + } + .resources sib-form::before { + font-family: "RefrigeratorDelxW01Bold"; + } + #listresources { + .lnk-newkeyword .button { + font-size: 1.2rem; + width: max-content; + height: max-content; + padding: 10px 30px; + color: #063B5C; + } + sib-display sib-display { + [name="name"] { + font-family: "RefrigeratorDelxW01Bold"; + } + [name="link"] a { + padding-left: 35px; + position: relative; + &::before { + position: absolute; + left: 0; + } + } + } + } + .resource-tag { + font-family: Facilt; + font-weight: 600; + } + } + } + @media (max-width: 991px) { + .sib-resource { + margin-top: 65px; + } + } } \ No newline at end of file From 415f06c36eb51b08b3cd58c25d5a7116e24b96cb Mon Sep 17 00:00:00 2001 From: Marjolaine Le Bon Date: Tue, 4 Aug 2020 12:34:17 +0200 Subject: [PATCH 05/62] update: right menu circles --- client.sample.etuc.scss | 26 +++++++++++++++++----- src/images/appointment.svg | 23 +++++++++++++++++++ src/images/file.svg | 17 ++++++++++++++ src/images/vote.svg | 22 ++++++++++++++++++ src/menu-left.pug | 2 +- src/styles/components/icons/icons.scss | 2 +- src/styles/layout/events/events.scss | 17 +++++++++++++- src/styles/layout/resources/resources.scss | 15 +++++++++++++ 8 files changed, 115 insertions(+), 9 deletions(-) create mode 100644 src/images/appointment.svg create mode 100644 src/images/file.svg create mode 100644 src/images/vote.svg diff --git a/client.sample.etuc.scss b/client.sample.etuc.scss index 55c2e64..e0f5a61 100644 --- a/client.sample.etuc.scss +++ b/client.sample.etuc.scss @@ -47,7 +47,7 @@ --color-menu-icon-background-active: var(--color-secondary); /* Right menu */ - --color-right-menu-background: #e8e8ee; + --color-right-menu-background: #e8e8e8; --color-right-menu-text: #3c3F57; --color-right-menu-link-border: #BDC2D7; --color-right-menu-active-text: var(--color-white); @@ -135,18 +135,22 @@ #main__menu .menu { font-size: 2rem; } +#main__menu .unread { + font-weight: bold; +} #main__menu .menu[active=""] { color: var(--color-complementary); } #main__menu .sub-menu.menu-notification { font-family: Facit; } +#main__menu solid-router sib-route.menu, #main__menu sib-router sib-route.menu { + padding: 1.2rem 0; +} #viewport .content-box { font-family: Facit; } #viewport #circle .content-box__header solid-display div { - display: flex; - flex-direction: column; text-align: center; } #viewport #circle .content-box__header .h1-like { @@ -158,9 +162,19 @@ margin: 10px 0; } -#viewport #circle .content-box__header solid-display div .h1-aside:not(:empty)::before { - content: none; -} #viewport .with-sidebar nav > solid-router { color: #3C3F57; +} +#viewport .with-sidebar nav > solid-router > ul > sib-route[active] { + background-color: var(--color-right-menu-active-background); + color: var(--color-right-menu-active-text); + display: inline-block; +} +@media (min-width: 992px) { + .content-box__height { + min-height: calc(100vh - 83px - 98px); + } + #viewport .chat-view { + height: calc(100vh - 84px - 98px); + } } \ No newline at end of file diff --git a/src/images/appointment.svg b/src/images/appointment.svg new file mode 100644 index 0000000..07ddc58 --- /dev/null +++ b/src/images/appointment.svg @@ -0,0 +1,23 @@ + + + 003-appointment + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/images/file.svg b/src/images/file.svg new file mode 100644 index 0000000..324269e --- /dev/null +++ b/src/images/file.svg @@ -0,0 +1,17 @@ + + + 003-file + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/images/vote.svg b/src/images/vote.svg new file mode 100644 index 0000000..8546a10 --- /dev/null +++ b/src/images/vote.svg @@ -0,0 +1,22 @@ + + + vote + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/menu-left.pug b/src/menu-left.pug index 52ae2f5..ae72576 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -72,7 +72,7 @@ solid-router#navbar-router(default-route='dashboard') if endpoints.resources || (endpoints.get && endpoints.get.resources) sib-route.menu(name='resources') div.menu-label Ressources - div.menu-icon.icon-text-box-multiple-outline + div.menu-icon.icon-docs div.divider if endpoints.projects || (endpoints.get && endpoints.get.projects) div diff --git a/src/styles/components/icons/icons.scss b/src/styles/components/icons/icons.scss index f85028c..1f5b34f 100644 --- a/src/styles/components/icons/icons.scss +++ b/src/styles/components/icons/icons.scss @@ -176,7 +176,7 @@ $icons: ( control-pause: '\e072', control-forward: '\e073', control-end: '\e074', - calender: '\e075', + calendar: '\e075', bulb: '\e076', chart: '\e077', arrow-up-circle: '\e078', diff --git a/src/styles/layout/events/events.scss b/src/styles/layout/events/events.scss index e8acab8..cda1224 100644 --- a/src/styles/layout/events/events.scss +++ b/src/styles/layout/events/events.scss @@ -81,8 +81,8 @@ font-family: "RefrigeratorDelxW01Bold"; font-size: 3.2rem; line-height: 3.8rem; - color: #063B5C; } + color: #063B5C; solid-display div .event-type { width: max-content; padding: 5px 20px; @@ -107,4 +107,19 @@ margin-top: 65px; } } +} +.with-sidebar nav > solid-router > ul [name="circle-events"]{ + li::before { + content: ''; + height: 40px; + width: 40px; + mask: url('/images/appointment.svg') center no-repeat; + mask-size: contain; + -webkit-mask: url('/images/appointment.svg') center no-repeat; + -webkit-mask-size: contain; + background-color: var(--color-right-menu-text); + } + &[active] li::before { + background-color: var(--color-right-menu-active-text); + } } \ No newline at end of file diff --git a/src/styles/layout/resources/resources.scss b/src/styles/layout/resources/resources.scss index cf03c16..0f603ee 100644 --- a/src/styles/layout/resources/resources.scss +++ b/src/styles/layout/resources/resources.scss @@ -54,4 +54,19 @@ margin-top: 65px; } } +} +.with-sidebar nav > solid-router > ul [name="circle-resources"]{ + li::before { + content: ''; + height: 40px; + width: 40px; + mask: url('/images/file.svg') center no-repeat; + mask-size: contain; + -webkit-mask: url('/images/file.svg') center no-repeat; + -webkit-mask-size: contain; + background-color: var(--color-right-menu-text); + } + &[active] li::before { + background-color: var(--color-right-menu-active-text); + } } \ No newline at end of file From 5a323381cc400aa6d1c9d4aba2c219129eacf7c0 Mon Sep 17 00:00:00 2001 From: senza Date: Sat, 8 Aug 2020 14:11:18 +0200 Subject: [PATCH 06/62] feature : implementing solid-poll + css customisations --- src/index.pug | 12 ++++++++-- src/menu-left.pug | 5 ++++ src/page-polls.pug | 2 ++ src/styles/index.scss | 1 + src/styles/layout/polls/_index.scss | 1 + src/styles/layout/polls/_polls.scss | 36 +++++++++++++++++++++++++++++ 6 files changed, 55 insertions(+), 2 deletions(-) create mode 100644 src/page-polls.pug create mode 100644 src/styles/layout/polls/_index.scss create mode 100644 src/styles/layout/polls/_polls.scss diff --git a/src/index.pug b/src/index.pug index 7f2880c..cd05f30 100644 --- a/src/index.pug +++ b/src/index.pug @@ -13,6 +13,11 @@ html(lang="en") include dependencies.pug if clientCSS link(rel='stylesheet', href=`${clientCSS}`) + + if endpoints.polls || (endpoints.get && endpoints.get.polls) + script(type="module" src="/lib/sib-polls-component/index.js" defer) + //- script(type="module" src="/lib/sib-event-component/sib-event.js" defer) + body .wrapper @@ -70,10 +75,13 @@ html(lang="en") hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.circles || endpoints.get.circles}`) hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.circles || endpoints.get.circles}joinable/`) include page-circle.pug - if endpoints.users || (endpoints.get && endpoints.get.users) #messages(hidden).with-sidebar include page-messages.pug + + if endpoints.polls || (endpoints.get && endpoints.get.polls) + #polls(hidden).with-sidebar + include page-polls.pug if endpoints.events || (endpoints.get && endpoints.get.events) #events(hidden) @@ -82,7 +90,7 @@ html(lang="en") #admin(hidden).with-sidebar include page-admin.pug - #about.no-sidebar.with-padding + #about(hidden).no-sidebar.with-padding include page-about.pug if (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.uploads || (endpoints.post && endpoints.post.uploads)) && (endpoints.users || (endpoints.post && endpoints.post.users)) diff --git a/src/menu-left.pug b/src/menu-left.pug index b7e91cb..aad37e7 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -69,6 +69,11 @@ solid-router#navbar-router(default-route='dashboard') div.menu-label Evènements div.menu-icon.icon-calendar div.divider + if endpoints.polls || (endpoints.get && endpoints.get.polls) + solid-route.menu(name='polls') + div.menu-label Gouvernance + div.menu-icon.icon-calendar + div.divider if endpoints.projects || (endpoints.get && endpoints.get.projects) div solid-link(next='admin-project-list') diff --git a/src/page-polls.pug b/src/page-polls.pug new file mode 100644 index 0000000..2caf838 --- /dev/null +++ b/src/page-polls.pug @@ -0,0 +1,2 @@ +.views-container + solid-poll(data-src=`${endpoints.polls || (endpoints.get && endpoints.get.polls)}`) \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index 1458359..655ce6f 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -22,4 +22,5 @@ @import 'layout/user/index'; @import 'layout/events/index'; @import 'layout/dashboard/index'; + @import 'layout/polls/index'; } \ No newline at end of file diff --git a/src/styles/layout/polls/_index.scss b/src/styles/layout/polls/_index.scss new file mode 100644 index 0000000..572a53f --- /dev/null +++ b/src/styles/layout/polls/_index.scss @@ -0,0 +1 @@ +@import '_polls.scss'; \ No newline at end of file diff --git a/src/styles/layout/polls/_polls.scss b/src/styles/layout/polls/_polls.scss new file mode 100644 index 0000000..0c96298 --- /dev/null +++ b/src/styles/layout/polls/_polls.scss @@ -0,0 +1,36 @@ +#polls{ + h2{ + text-transform: inherit; + } + /*style of poll listing*/ + #pollListing{ + width: 90%; + margin: auto; + .all-polls{ + /*make 3 polls per line*/ + div:first-of-type{ + solid-display{ + width: 330px; + >div:first-of-type{ + *[name="body"]{ + /*size of tags of poll card*/ + etuc-display-votetags{ + >div{ + width: 64px; + height: 24px; + p{ + font-size: 11px; + } + } + } + } + } + } + } + } + } + #pollPage{ + width: 85%; + margin: auto; + } +} \ No newline at end of file From 7309aa310c1cace8fede186d0e68522e8ac40c8b Mon Sep 17 00:00:00 2001 From: senza Date: Sat, 8 Aug 2020 14:46:31 +0200 Subject: [PATCH 07/62] tag css of poll page --- src/styles/layout/polls/_polls.scss | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/src/styles/layout/polls/_polls.scss b/src/styles/layout/polls/_polls.scss index 0c96298..5a19b0c 100644 --- a/src/styles/layout/polls/_polls.scss +++ b/src/styles/layout/polls/_polls.scss @@ -19,7 +19,7 @@ width: 64px; height: 24px; p{ - font-size: 11px; + font-size: 11px; } } } @@ -29,8 +29,24 @@ } } } + /*personnalise css on poll page*/ #pollPage{ width: 85%; margin: auto; + solid-display.topline{ + >div:first-of-type{ + *[name="right"]{ + etuc-display-votetags{ + >div{ + width: 64px; + height: 24px; + p{ + font-size: 11px; + } + } + } + } + } + } } } \ No newline at end of file From 250192ef514a9bcc8c8b3d689e1dc8def0c7646b Mon Sep 17 00:00:00 2001 From: Marjolaine Le Bon Date: Tue, 11 Aug 2020 13:01:13 +0200 Subject: [PATCH 08/62] update: integrations events and resources on circles --- src/menu-left.pug | 2 +- src/page-circle.pug | 8 ++++---- src/page-events.pug | 1 + src/page-resources.pug | 1 + src/styles/base/menu-left.scss | 9 +++++++++ src/styles/layout/events/events.scss | 15 +++++++++------ src/styles/layout/resources/resources.scss | 6 ++++++ src/views/circle/page-circle-events.pug | 15 +++++++++------ src/views/circle/page-circle-resources.pug | 16 ++++++++++------ 9 files changed, 50 insertions(+), 23 deletions(-) diff --git a/src/menu-left.pug b/src/menu-left.pug index ae72576..14bb67b 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -70,7 +70,7 @@ solid-router#navbar-router(default-route='dashboard') div.menu-icon.icon-calendar div.divider if endpoints.resources || (endpoints.get && endpoints.get.resources) - sib-route.menu(name='resources') + solid-route.menu(name='resources') div.menu-label Ressources div.menu-icon.icon-docs div.divider diff --git a/src/page-circle.pug b/src/page-circle.pug index 7286b46..3b167d7 100644 --- a/src/page-circle.pug +++ b/src/page-circle.pug @@ -32,10 +32,10 @@ nav.jsRightMenu(role='navigation') solid-route(name='circle-information') li a Information - sib-route(name='circle-events' use-id) - li - a Events - sib-route(name='circle-resources' use-id) + solid-route(name='circle-resources' use-id) li a Resources + solid-route(name='circle-events' use-id) + li + a Events diff --git a/src/page-events.pug b/src/page-events.pug index cea4a6c..865da57 100644 --- a/src/page-events.pug +++ b/src/page-events.pug @@ -1,5 +1,6 @@ .views-container sib-event(data-src=`${endpoints.events || (endpoints.get && endpoints.get.events)}` range-event-type=`${endpoints.typeevents || (endpoints.get && endpoints.get.typeevents)}` + range-event-circle=`${endpoints.circles || (endpoints.get && endpoints.get.circles)}` upload-dir=`${endpoints.uploads || (endpoints.get && endpoints.get.uploads)}` ) \ No newline at end of file diff --git a/src/page-resources.pug b/src/page-resources.pug index 9f6220e..bda242a 100644 --- a/src/page-resources.pug +++ b/src/page-resources.pug @@ -2,5 +2,6 @@ sib-resource(data-src=`${endpoints.resources || (endpoints.get && endpoints.get.resources)}` range-resource-type=`${endpoints.resourcestypes || (endpoints.get && endpoints.get.resourcestypes)}` range-resource-keyword=`${endpoints.resourceskeywords || (endpoints.get && endpoints.get.resourceskeywords)}` + range-resource-circle=`${endpoints.circles || (endpoints.get && endpoints.get.circles)}` upload-dir=`${endpoints.uploads || (endpoints.get && endpoints.get.uploads)}` ) \ No newline at end of file diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index 7b070ed..4a876f2 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -46,6 +46,10 @@ background-color: var(--color-menu-badge-background); } } + &[name="resources"][active] .menu-icon:before, + &[name="events"][active] .menu-icon:before { + background-color: transparent; + } .menu-icon { align-items: center; @@ -88,6 +92,11 @@ >solid-display { display: block; } + &[name="events"], &[name="resources"] { + .menu-label { + width: 9.9em; + } + } } .sub-menu { diff --git a/src/styles/layout/events/events.scss b/src/styles/layout/events/events.scss index cda1224..af9af2e 100644 --- a/src/styles/layout/events/events.scss +++ b/src/styles/layout/events/events.scss @@ -1,4 +1,4 @@ -#events { +#events, #circle-events { width: 100%; font-family: "Facit"; font-weight: 400; @@ -16,10 +16,12 @@ .event-place-name { font-weight: 700; } - #listevents [name="name"], + #listevents, #circle-listevents { + [name="name"], solid-display-link-event .mdi::before { color: #C4262E; } + } .event-place-name, .nextevent-startdate, solid-display-link-event { @@ -30,12 +32,13 @@ font-weight: 400; .page-title { font-family: "RefrigeratorDelxW01Bold"; - font-size: 3.2rem; - line-height: 3.8rem; - color: #063B5C; + font-size: 3.2rem; + line-height: 3.8rem; + color: #063B5C; } } - #listevents { + #listevents, + #circle-listevents { .newtype .button{ font-size: 1.2rem; width: max-content; diff --git a/src/styles/layout/resources/resources.scss b/src/styles/layout/resources/resources.scss index 0f603ee..a72abe2 100644 --- a/src/styles/layout/resources/resources.scss +++ b/src/styles/layout/resources/resources.scss @@ -7,6 +7,12 @@ background-color: #F0F3F6; .sib-resource { font-family: "Facit"; + .page-title { + font-family: "RefrigeratorDelxW01Bold"; + font-size: 3.2rem; + line-height: 3.8rem; + color: #063B5C; + } .red-button { background-color: #C4262E; } diff --git a/src/views/circle/page-circle-events.pug b/src/views/circle/page-circle-events.pug index 9acc4f8..beba9b6 100644 --- a/src/views/circle/page-circle-events.pug +++ b/src/views/circle/page-circle-events.pug @@ -1,6 +1,9 @@ -sib-display( - class='w700' - bind-resources - nested-field="events" - fields='name, shortDescription, startDate' -) \ No newline at end of file +#circle-listevents + sib-event( + class='w700' + bind-resources + nested-field="events" + range-event-type=`${endpoints.typeevents || (endpoints.get && endpoints.get.typeevents)}` + range-event-circle=`${endpoints.circles || (endpoints.get && endpoints.get.circles)}` + upload-dir=`${endpoints.uploads || (endpoints.get && endpoints.get.uploads)}` + ) \ No newline at end of file diff --git a/src/views/circle/page-circle-resources.pug b/src/views/circle/page-circle-resources.pug index 1fb4cdd..b26eaf6 100644 --- a/src/views/circle/page-circle-resources.pug +++ b/src/views/circle/page-circle-resources.pug @@ -1,6 +1,10 @@ -sib-display( - class='w700' - bind-resources - nested-field="resources" - fields='name, shortdesc, keywords' -) \ No newline at end of file +#circle-listresources + sib-resource( + class='w700' + bind-resources + nested-field="resources" + range-resource-type=`${endpoints.resourcestypes || (endpoints.get && endpoints.get.resourcestypes)}` + range-resource-keyword=`${endpoints.resourceskeywords || (endpoints.get && endpoints.get.resourceskeywords)}` + range-resource-circle=`${endpoints.circles || (endpoints.get && endpoints.get.circles)}` + upload-dir=`${endpoints.uploads || (endpoints.get && endpoints.get.uploads)}` + ) \ No newline at end of file From 38e0a54130f514b72456016735c9a9db9d226640 Mon Sep 17 00:00:00 2001 From: Marjolaine Le Bon Date: Tue, 11 Aug 2020 13:09:10 +0200 Subject: [PATCH 09/62] update: link unpkg resources & events --- src/dependencies.pug | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/dependencies.pug b/src/dependencies.pug index 6381afe..9f9bd9b 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -15,12 +15,12 @@ script(type="module" src="https://unpkg.com/@startinblox/component-notifications //- script(type="module" src="/lib/sib-notifications/index.js" defer) if endpoints.events || (endpoints.get && endpoints.get.events) - //- script(type="module" src="https://unpkg.com/@startinblox/component-event@0.1" defer) - script(type="module" src="/lib/sib-event-component/sib-event.js" defer) + script(type="module" src="https://unpkg.com/@startinblox/component-event@0.1" defer) + //- script(type="module" src="/lib/sib-event-component/sib-event.js" defer) if endpoints.resources || (endpoints.get && endpoints.get.resources) - //- script(type="module" src="https://unpkg.com/@startinblox/component-resource" defer) - script(type="module" src="/lib/sib-resource/sib-resource.js" defer) + script(type="module" src="https://unpkg.com/@startinblox/component-resource@0.1" defer) + //-script(type="module" src="/lib/sib-resource/sib-resource.js" defer) if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers) script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.5" defer) From 6041a05570a26d54ddb0de67a86d475a0aa6f343 Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Tue, 11 Aug 2020 17:06:22 +0200 Subject: [PATCH 10/62] update: Fixing event and resources version numbers --- src/dependencies.pug | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/dependencies.pug b/src/dependencies.pug index aba4bd3..ac07c8f 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -15,11 +15,11 @@ script(type="module" src="https://unpkg.com/@startinblox/component-notifications //- script(type="module" src="/lib/sib-notifications/index.js" defer) if endpoints.events || (endpoints.get && endpoints.get.events) - script(type="module" src="https://unpkg.com/@startinblox/component-event@0.1" defer) + script(type="module" src="https://unpkg.com/@startinblox/component-event@1.1" defer) //- script(type="module" src="/lib/sib-event-component/sib-event.js" defer) if endpoints.resources || (endpoints.get && endpoints.get.resources) - script(type="module" src="https://unpkg.com/@startinblox/component-resource@0.1" defer) + script(type="module" src="https://unpkg.com/@startinblox/component-resource@1.0" defer) //-script(type="module" src="/lib/sib-resource/sib-resource.js" defer) if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers) From 9cc5ab71071fb366eafcb84d7f505fbe1fe84e15 Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Tue, 11 Aug 2020 17:57:12 +0200 Subject: [PATCH 11/62] Quick fix polls component --- src/dependencies.pug | 4 ++++ src/index.pug | 4 ---- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/dependencies.pug b/src/dependencies.pug index ac07c8f..e111ca5 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -38,6 +38,10 @@ if endpoints.users || (endpoints.get && endpoints.get.users) script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.8" defer) //- script(type="module" src="/lib/solid-xmpp-chat/dist/index.js" defer) +if endpoints.polls || (endpoints.get && endpoints.get.polls) + script(type="module" src="https://unpkg.com/@startinblox/component-poll@1.0" defer) + //- script(type="module" src="/lib/sib-event-component/sib-event.js" defer) + script(src="/scripts/index.js" defer) //- Stylesheets diff --git a/src/index.pug b/src/index.pug index 850a8b6..dcdbd14 100644 --- a/src/index.pug +++ b/src/index.pug @@ -14,10 +14,6 @@ html(lang="en") if clientCSS link(rel='stylesheet', href=`${clientCSS}`) - if endpoints.polls || (endpoints.get && endpoints.get.polls) - script(type="module" src="/lib/sib-polls-component/index.js" defer) - //- script(type="module" src="/lib/sib-event-component/sib-event.js" defer) - body .wrapper From 3bec1062ff7add830a324249f5627a2961254a46 Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Tue, 11 Aug 2020 19:09:14 +0200 Subject: [PATCH 12/62] Switch from sib-event to solid-event --- src/page-events.pug | 2 +- src/styles/layout/events/events.scss | 2 +- src/views/circle/page-circle-events.pug | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/page-events.pug b/src/page-events.pug index 865da57..faaed63 100644 --- a/src/page-events.pug +++ b/src/page-events.pug @@ -1,5 +1,5 @@ .views-container - sib-event(data-src=`${endpoints.events || (endpoints.get && endpoints.get.events)}` + solid-event(data-src=`${endpoints.events || (endpoints.get && endpoints.get.events)}` range-event-type=`${endpoints.typeevents || (endpoints.get && endpoints.get.typeevents)}` range-event-circle=`${endpoints.circles || (endpoints.get && endpoints.get.circles)}` upload-dir=`${endpoints.uploads || (endpoints.get && endpoints.get.uploads)}` diff --git a/src/styles/layout/events/events.scss b/src/styles/layout/events/events.scss index af9af2e..aca9d36 100644 --- a/src/styles/layout/events/events.scss +++ b/src/styles/layout/events/events.scss @@ -3,7 +3,7 @@ font-family: "Facit"; font-weight: 400; color: #7A7F85; - sib-event { + solid-event { .red-button, .event-type { background-color: #C4262E; diff --git a/src/views/circle/page-circle-events.pug b/src/views/circle/page-circle-events.pug index beba9b6..ca8b0a7 100644 --- a/src/views/circle/page-circle-events.pug +++ b/src/views/circle/page-circle-events.pug @@ -1,5 +1,5 @@ #circle-listevents - sib-event( + solid-event( class='w700' bind-resources nested-field="events" From 907f516732e4a66ea1ac269d91d80629bfd69c65 Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Tue, 11 Aug 2020 19:11:42 +0200 Subject: [PATCH 13/62] Switch from sib-resource to solid-resource --- src/page-resources.pug | 2 +- src/styles/layout/resources/resources.scss | 2 +- src/views/circle/page-circle-resources.pug | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/page-resources.pug b/src/page-resources.pug index bda242a..ad1a80b 100644 --- a/src/page-resources.pug +++ b/src/page-resources.pug @@ -1,5 +1,5 @@ .views-container - sib-resource(data-src=`${endpoints.resources || (endpoints.get && endpoints.get.resources)}` + solid-resource(data-src=`${endpoints.resources || (endpoints.get && endpoints.get.resources)}` range-resource-type=`${endpoints.resourcestypes || (endpoints.get && endpoints.get.resourcestypes)}` range-resource-keyword=`${endpoints.resourceskeywords || (endpoints.get && endpoints.get.resourceskeywords)}` range-resource-circle=`${endpoints.circles || (endpoints.get && endpoints.get.circles)}` diff --git a/src/styles/layout/resources/resources.scss b/src/styles/layout/resources/resources.scss index a72abe2..373b212 100644 --- a/src/styles/layout/resources/resources.scss +++ b/src/styles/layout/resources/resources.scss @@ -3,7 +3,7 @@ font-family: "Facit"; font-weight: 400; color: #3A3A3A; - sib-resource { + solid-resource { background-color: #F0F3F6; .sib-resource { font-family: "Facit"; diff --git a/src/views/circle/page-circle-resources.pug b/src/views/circle/page-circle-resources.pug index b26eaf6..79a9dc6 100644 --- a/src/views/circle/page-circle-resources.pug +++ b/src/views/circle/page-circle-resources.pug @@ -1,5 +1,5 @@ #circle-listresources - sib-resource( + solid-resource( class='w700' bind-resources nested-field="resources" From 5785f4b6405fd4d9e48e02b519320b39b52f42ed Mon Sep 17 00:00:00 2001 From: Marjolaine Le Bon Date: Tue, 11 Aug 2020 19:55:14 +0200 Subject: [PATCH 14/62] update: menu left with polls --- src/menu-left.pug | 11 ++++++----- src/styles/base/menu-left.scss | 1 + 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/menu-left.pug b/src/menu-left.pug index b914a8d..c4d0cb8 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -64,18 +64,19 @@ solid-router#navbar-router(default-route='dashboard') div.menu-label Offres de mission div.menu-icon.icon-briefcase div.divider - if endpoints.events || (endpoints.get && endpoints.get.events) - solid-route.menu(name='events') - div.menu-label Evènements - div.menu-icon.icon-calendar - div.divider if endpoints.resources || (endpoints.get && endpoints.get.resources) solid-route.menu(name='resources') div.menu-label Ressources div.menu-icon.icon-docs + div.divider if endpoints.polls || (endpoints.get && endpoints.get.polls) solid-route.menu(name='polls') div.menu-label Gouvernance + div.menu-icon.icon-bubbles + div.divider + if endpoints.events || (endpoints.get && endpoints.get.events) + solid-route.menu(name='events') + div.menu-label Evènements div.menu-icon.icon-calendar div.divider if endpoints.projects || (endpoints.get && endpoints.get.projects) diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index d58941a..d97d858 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -47,6 +47,7 @@ } } &[name="resources"][active] .menu-icon:before, + &[name="polls"][active] .menu-icon:before, &[name="events"][active] .menu-icon:before { background-color: transparent; } From 4c78e847465da351d1124f324d1ba2993b241df1 Mon Sep 17 00:00:00 2001 From: Marjolaine Le Bon Date: Wed, 12 Aug 2020 22:15:05 +0200 Subject: [PATCH 15/62] update: init circle-polls --- src/page-circle.pug | 5 +++++ src/views/circle/page-circle-polls.pug | 6 ++++++ 2 files changed, 11 insertions(+) create mode 100644 src/views/circle/page-circle-polls.pug diff --git a/src/page-circle.pug b/src/page-circle.pug index 3b167d7..24dbcce 100644 --- a/src/page-circle.pug +++ b/src/page-circle.pug @@ -20,6 +20,8 @@ include views/circle/page-circle-events.pug #circle-resources(hidden) include views/circle/page-circle-resources.pug + #circle-polls(hidden) + include views/circle/page-circle-polls.pug nav.jsRightMenu(role='navigation') solid-router(default-route='circle-chat') @@ -38,4 +40,7 @@ nav.jsRightMenu(role='navigation') solid-route(name='circle-events' use-id) li a Events + solid-route(name='circle-polls' use-id) + li + a Polls diff --git a/src/views/circle/page-circle-polls.pug b/src/views/circle/page-circle-polls.pug new file mode 100644 index 0000000..292b5bb --- /dev/null +++ b/src/views/circle/page-circle-polls.pug @@ -0,0 +1,6 @@ +#circle-polls + solid-poll( + class='w700' + bind-resources + nested-field="polls" + ) \ No newline at end of file From abd7048b3a40c000031645ca806cdda05284cfba Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Wed, 12 Aug 2020 22:21:10 +0200 Subject: [PATCH 16/62] Removing useless nested fields --- src/views/circle/page-circle-polls.pug | 1 - 1 file changed, 1 deletion(-) diff --git a/src/views/circle/page-circle-polls.pug b/src/views/circle/page-circle-polls.pug index 292b5bb..21fb24c 100644 --- a/src/views/circle/page-circle-polls.pug +++ b/src/views/circle/page-circle-polls.pug @@ -2,5 +2,4 @@ solid-poll( class='w700' bind-resources - nested-field="polls" ) \ No newline at end of file From eb07bebdd1960c129ff7aa7661d119d1fd7998bc Mon Sep 17 00:00:00 2001 From: Marjolaine Le Bon Date: Wed, 19 Aug 2020 18:23:18 +0200 Subject: [PATCH 17/62] update: uniformisation events/resources --- src/styles/base/main.scss | 1024 +++++++++----------- src/styles/base/menu-left.scss | 536 +++++----- src/styles/layout/events/events.scss | 40 +- src/styles/layout/polls/_polls.scss | 100 +- src/styles/layout/resources/resources.scss | 59 +- 5 files changed, 847 insertions(+), 912 deletions(-) diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 23a12a6..61fb44b 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -1,190 +1,179 @@ * { - outline: none; + outline: none; } :root { - font-size: 10px; - font-family: Open Sans, sans-serif; - --sib-notifications-theme: var(--color-primary); - - body { - background-color: var(--color-main-background); - box-sizing: border-box; - color: var(--color-main-text); - font-size: 1.6rem; - /* Fix for viewport height bug in webkit for mobile */ - height: -webkit-fill-available; - min-height: -webkit-fill-available; - } - - .notLoggedIn { - visibility: hidden; - } + font-size: 10px; + font-family: Open Sans, sans-serif; + --sib-notifications-theme: var(--color-primary); + body { + background-color: var(--color-main-background); + box-sizing: border-box; + color: var(--color-main-text); + font-size: 1.6rem; + /* Fix for viewport height bug in webkit for mobile */ + height: -webkit-fill-available; + min-height: -webkit-fill-available; + } + .notLoggedIn { + visibility: hidden; + } } + /* Fix for solid-dashboard fixture */ + solid-dashboard section { - padding: 1rem !important; - - @include breakpoint(lg) { - padding: 4.2rem !important; - } - - .icon { - display: inline-block; - } + padding: 1rem !important; + @include breakpoint(lg) { + padding: 4.2rem !important; + } + .icon { + display: inline-block; + } } .wrapper { - display: grid; - grid-template-areas: - "header" - "content"; - - @include breakpoint(lg) { - grid-template-columns: 265px auto; - grid-template-areas: - "header header" - "leftmenu content"; - } + display: grid; + grid-template-areas: "header" "content"; + @include breakpoint(lg) { + grid-template-columns: 265px auto; + grid-template-areas: "header header" "leftmenu content"; + } } .header { - grid-area: header; + grid-area: header; } .left-menu { - grid-area: leftmenu; - - @include breakpoint(lg) { - height: calc(100vh - 83px); /* 83px = nav height */ - position: sticky; - top: 0; - overflow-x: hidden; - overflow-y: auto; - } - - &.jsLeftMenu { - display: none; - + grid-area: leftmenu; @include breakpoint(lg) { - display: block; + height: calc(100vh - 83px); + /* 83px = nav height */ + position: sticky; + top: 0; + overflow-x: hidden; + overflow-y: auto; } - } - - &.jsLeftMenu[open] { - display: block; - bottom: 0; - box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5); - width: 80vw; - position: fixed; - right: 0; - top: 0; - z-index: 1000; - - @include breakpoint(lg) { - display: none; + &.jsLeftMenu { + display: none; + @include breakpoint(lg) { + display: block; + } + } + &.jsLeftMenu[open] { + display: block; + bottom: 0; + box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5); + width: 80vw; + position: fixed; + right: 0; + top: 0; + z-index: 1000; + @include breakpoint(lg) { + display: none; + } } - } } .content { - grid-area: content; - - @include breakpoint(lg) { - position: sticky; - top: 0; - overflow-y: auto; - height: calc(100vh - 83px); - overflow-x: hidden; - } + grid-area: content; + @include breakpoint(lg) { + position: sticky; + top: 0; + overflow-y: auto; + height: calc(100vh - 83px); + overflow-x: hidden; + } } - /* Add scrollbar to the left and right menu, and to the content */ -nav, .views-container, .table-wrapper { - overflow: auto; - height: auto; - -webkit-overflow-scrolling: touch; - -ms-overflow-style: none; + +nav, +.views-container, +.table-wrapper { + overflow: auto; + height: auto; + -webkit-overflow-scrolling: touch; + -ms-overflow-style: none; } + /* Custom scrollbar of the left-menu */ + nav { - scrollbar-width: thin; - scrollbar-color: var(--color-scrollbar-left-track) var(--color-scrollbar-left-background); - - &::-webkit-scrollbar-track { - background: var(--color-scrollbar-left-background); - } - - &::-webkit-scrollbar-thumb { - background-color: var(--color-scrollbar-left-track); - border-radius: 6px; - border: 3px solid var(--color-scrollbar-left-background); - } - - &::-webkit-scrollbar { - width: 11px; - } + scrollbar-width: thin; + scrollbar-color: var(--color-scrollbar-left-track) var(--color-scrollbar-left-background); + &::-webkit-scrollbar-track { + background: var(--color-scrollbar-left-background); + } + &::-webkit-scrollbar-thumb { + background-color: var(--color-scrollbar-left-track); + border-radius: 6px; + border: 3px solid var(--color-scrollbar-left-background); + } + &::-webkit-scrollbar { + width: 11px; + } } + /* Custom scrollbar of the content */ + .views-container { - scrollbar-width: thin; - scrollbar-color: var(--color-scrollbar-right-track) var(--color-scrollbar-right-background); - - &::-webkit-scrollbar-track { - background: var(--color-scrollbar-right-background); - } - - &::-webkit-scrollbar-thumb { - background-color: var(--color-scrollbar-right-track); - border-radius: 6px; - border: 3px solid var(--color-scrollbar-right-background); - } - - &::-webkit-scrollbar { - width: 11px; - } + scrollbar-width: thin; + scrollbar-color: var(--color-scrollbar-right-track) var(--color-scrollbar-right-background); + &::-webkit-scrollbar-track { + background: var(--color-scrollbar-right-background); + } + &::-webkit-scrollbar-thumb { + background-color: var(--color-scrollbar-right-track); + border-radius: 6px; + border: 3px solid var(--color-scrollbar-right-background); + } + &::-webkit-scrollbar { + width: 11px; + } } + /* Custom scrollbar of the table */ + .table-wrapper { - scrollbar-width: thin; - scrollbar-color: var(--color-scrollbar-table-track) var(--color-scrollbar-table-background); - - &::-webkit-scrollbar-track { - background-color: var(--color-scrollbar-table-background); - border-radius: 10px; - } - - &::-webkit-scrollbar { - height: 5px; - } - - &::-webkit-scrollbar-thumb { - background-color: var(--color-scrollbar-table-track); - border-radius: 10px; - } + scrollbar-width: thin; + scrollbar-color: var(--color-scrollbar-table-track) var(--color-scrollbar-table-background); + &::-webkit-scrollbar-track { + background-color: var(--color-scrollbar-table-background); + border-radius: 10px; + } + &::-webkit-scrollbar { + height: 5px; + } + &::-webkit-scrollbar-thumb { + background-color: var(--color-scrollbar-table-track); + border-radius: 10px; + } } + /* Quick fix. Will be removed later */ + #admin-circles, #admin-projects, #admin-users { - display: contents; + display: contents; } [hidden], .hidden { - display: none !important; + display: none !important; } img { - max-height: 100%; - max-width: 100%; + max-height: 100%; + max-width: 100%; } h1, @@ -195,9 +184,8 @@ h3, h4, h5, h6 { - font-weight: bold; - - /*span { + font-weight: bold; + /*span { font-weight: 400; padding-left: 0.85rem; @@ -207,182 +195,170 @@ h6 { }*/ } -h1, .h1-like { - color: var(--color-h1); - font-size: 2rem; - text-transform: uppercase; - - &.without-margin { - margin: 0; - } +h1, +.h1-like { + color: var(--color-h1); + font-size: 2rem; + text-transform: uppercase; + &.without-margin { + margin: 0; + } } -h2, .h2-like { - color: var(--color-h2); - font-size: 1.8rem; - text-transform: uppercase; +h2, +.h2-like { + color: var(--color-h2); + font-size: 1.8rem; + text-transform: uppercase; } .h2-like { - display: block; - margin: 14.94px 0; - width: 100%; + display: block; + margin: 14.94px 0; + width: 100%; } h3 { - color: var(--color-title); - font-size: 1.7rem; - margin: 0; + color: var(--color-title); + font-size: 1.7rem; + margin: 0; } h4 { - font-size: 1.2rem; + font-size: 1.2rem; } h5 { - font-size: 2rem; + font-size: 2rem; } .avatar { - align-items: center; - background-color: var(--color-avatar-background); - border-radius: 50%; - display: flex; - justify-content: center; - overflow: hidden; - position: relative; - - img { - background-color: white; - height: 100%; - left: 0; - object-fit: cover; - object-position: center; - position: absolute; - top: 0; - width: 100%; - } - - object { - height: 45%; - width: 45%; - } + align-items: center; + background-color: var(--color-avatar-background); + border-radius: 50%; + display: flex; + justify-content: center; + overflow: hidden; + position: relative; + img { + background-color: white; + height: 100%; + left: 0; + object-fit: cover; + object-position: center; + position: absolute; + top: 0; + width: 100%; + } + object { + height: 45%; + width: 45%; + } } .customer-logo { - box-sizing: border-box; - display: flex; - height: 8.5vh; - justify-content: flex-end; - margin-top: 20px; - text-align: end; - width: 15vw; + box-sizing: border-box; + display: flex; + height: 8.5vh; + justify-content: flex-end; + margin-top: 20px; + text-align: end; + width: 15vw; } .content-box { - @include window-style-modal(); - flex-direction: column; - flex-grow: 1; - margin: 2rem 1rem 5rem 2rem; - - &.full-width { - background: var(--color-white); - flex: 1; - font-size: 1.6rem; - margin: 0 auto; - min-height: 100%; - } + @include window-style-modal(); + flex-direction: column; + flex-grow: 1; + margin: 2rem 1rem 5rem 2rem; + &.full-width { + background: var(--color-white); + flex: 1; + font-size: 1.6rem; + margin: 0 auto; + min-height: 100%; + } } + /* Header inside circle, project view */ + .content-box__header { - border-bottom: 1px solid var(--color-content-header); - padding: 1.8rem 0 1.4rem; - margin: 0 1.6rem; - - @include breakpoint(lg) { - padding: 3rem; - margin: 0; - } - - .mobile-sidebar-button { - float: right; - color: var(--color-secondary); - font-size: 1.8rem; - font-weight: bold!important; - - &::before { - font-size: 2.2rem; - font-weight: normal; - margin-right: 1.2rem; - } - + border-bottom: 1px solid var(--color-content-header); + padding: 1.8rem 0 1.4rem; + margin: 0 1.6rem; @include breakpoint(lg) { - display: none; + padding: 3rem; + margin: 0; } - } - - solid-display { - @include breakpoint(sm) { - float: left; - } - } - - /* For solid-display on project, circle, or private message view */ - solid-display { - width: calc(100% - 94px); /* 94px = width of .mobile-sidebar-button */ - - div { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: calc(100% - 20px); - - .h1-aside { + .mobile-sidebar-button { + float: right; + color: var(--color-secondary); font-size: 1.8rem; - - &:not(:empty)::before { - color: var(--color-grey-4); - content: ' - '; - font-size: 2rem; - font-weight: bold; + font-weight: bold!important; + &::before { + font-size: 2.2rem; + font-weight: normal; + margin-right: 1.2rem; + } + @include breakpoint(lg) { + display: none; + } + } + solid-display { + @include breakpoint(sm) { + float: left; + } + } + /* For solid-display on project, circle, or private message view */ + solid-display { + width: calc(100% - 94px); + /* 94px = width of .mobile-sidebar-button */ + div { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: calc(100% - 20px); + .h1-aside { + font-size: 1.8rem; + &:not(:empty)::before { + color: var(--color-grey-4); + content: ' - '; + font-size: 2rem; + font-weight: bold; + } + } + .description { + color: var(--color-grey-4); + } + .name { + color: var(--color-grey-4); + font-weight: normal; + } } - } - - .description { - color: var(--color-grey-4); - - } - - .name { - color: var(--color-grey-4); - font-weight: normal; - } } - } } .content-box__height { - min-height: calc(100vh - 50px - 56px); /* Heights of main header and sub-header */ - - @include breakpoint(lg) { - min-height: calc(100vh - 83px - 84px); - } + min-height: calc(100vh - 50px - 56px); + /* Heights of main header and sub-header */ + @include breakpoint(lg) { + min-height: calc(100vh - 83px - 84px); + } } .content-box__info { - flex-direction: column; - padding: 1rem; - - @include breakpoint(lg) { - padding: 3.2rem; - } - - * { - box-sizing: border-box; - } + flex-direction: column; + padding: 1rem; + @include breakpoint(lg) { + padding: 3.2rem; + } + * { + box-sizing: border-box; + } } + /*.modal { color: var(--color-white); margin: 75px; @@ -407,105 +383,94 @@ h5 { }*/ .admin-header { - /* Quick fix for alignment on mobile before admin content rework */ - flex-direction: column; - align-items: flex-start; - margin-bottom: 20px; - /*end */ - - @include breakpoint(lg) { - flex-direction: row; - align-items: center; - justify-content: space-between; - margin-bottom: 5rem; - } - - h3 { /* Quick fix for alignment on mobile before admin content rework */ + flex-direction: column; + align-items: flex-start; margin-bottom: 20px; - /* end */ - + /*end */ @include breakpoint(lg) { - margin-top: 0; + flex-direction: row; + align-items: center; + justify-content: space-between; + margin-bottom: 5rem; } - } - - solid-ac-checker, - solid-link { - width: 100%; - - @include breakpoint(lg) { - width: auto; + h3 { + /* Quick fix for alignment on mobile before admin content rework */ + margin-bottom: 20px; + /* end */ + @include breakpoint(lg) { + margin-top: 0; + } + } + solid-ac-checker, + solid-link { + width: 100%; + @include breakpoint(lg) { + width: auto; + } } - } } .backlink { - @include icon('arrow-left-circle'); - color: var(--color-backlink); - font-size: 1.5rem; - margin: 2rem 0 0 2rem; - text-decoration: underline; - - &::before { - font-size: 2rem; - margin-right: 1rem; - text-decoration: none; - } - - &.right { - display: block; - text-align: right; - } + @include icon('arrow-left-circle'); + color: var(--color-backlink); + font-size: 1.5rem; + margin: 2rem 0 0 2rem; + text-decoration: underline; + &::before { + font-size: 2rem; + margin-right: 1rem; + text-decoration: none; + } + &.right { + display: block; + text-align: right; + } } .centered { - text-align: center; + text-align: center; } .flex { - display: flex; + display: flex; } .desktop-button__end { - display: block; - - @include breakpoint(lg) { - display: flex; - justify-content: flex-end; - } + display: block; + @include breakpoint(lg) { + display: flex; + justify-content: flex-end; + } } .space-between { - justify-content: space-between; - - &.with-padding { - padding-bottom: 1.4rem; - } + justify-content: space-between; + &.with-padding { + padding-bottom: 1.4rem; + } } .mobile-vertical-align { - flex-direction: column; - - @include breakpoint(lg) { - flex-direction: row; - } + flex-direction: column; + @include breakpoint(lg) { + flex-direction: row; + } } .word-spacing-left { - margin-left: 0.60rem; + margin-left: 0.60rem; } .word-spacing-right { - margin-right: 0.60rem; + margin-right: 0.60rem; } .mobile-margin__bottom { - margin-bottom: 1rem; - - @include breakpoint(lg) { - margin-bottom: 0; - } + margin-bottom: 1rem; + @include breakpoint(lg) { + margin-bottom: 0; + } } // Other base components @@ -514,7 +479,6 @@ h5 { @import 'header'; @import 'menu-left'; @import 'user-thumb'; - // Button global CSS solid-delete, solid-route, @@ -523,227 +487,179 @@ button, input[type='submit'], a, .button { - background: none; - border: none; - cursor: pointer; - display: inline-block; - padding: 0; - - &.button { - padding: 0.55rem 2.5rem; - border-radius: 100em; - - *, - & { - font-size: 1.4rem; - } - - &.mobile-full-width { - margin-bottom: 1rem; - padding-left: 5rem; - width: -webkit-fill-available; - width: -moz-available; - - @include breakpoint(lg) { - margin-bottom: 0; - padding-left: 2.5rem; - width: auto; - } - - &::before { - margin-left: -2.6rem; - - @include breakpoint(lg) { - margin-left: 0; - } - } - } - - &.desktop-btn-margin__left { - margin: 0; - - @include breakpoint(lg) { - margin-left: 2.2rem; - } - } - - &.small { - - *, - & { - font-size: 1rem; - } - } - - &.text-bold { - - *, - & { - font-weight: bold; - } - } - - &.text-uppercase { - - *, - & { - text-transform: uppercase; - } - } - - &.rounded { - border-radius: 50%; - font-size: 1.8rem; - padding: 1rem; - } - - &.button-link { - border-radius: 100em; - - *, - & { - text-decoration: underline; - } - - &:hover { - text-decoration: none; - } - } - - &.with-icon::before { - font-size: 1.6rem; - margin-right: 1rem; - } - - &.button-primary{ - background-color: var(--color-white); - - *, - & { - color: var(--color-primary); - } - - &.bordered { - border: 1px solid var(--color-primary); - } - - &:hover { - background-color: var(--color-primary); - + background: none; + border: none; + cursor: pointer; + display: inline-block; + padding: 0; + &.button { + padding: 0.55rem 2.5rem; + border-radius: 100em; *, & { - color: var(--color-white); + font-size: 1.4rem; } - } - } - - &.button-secondary { - background-color: var(--color-white); - - *, - & { - color: var(--color-secondary); - } - - &.bordered { - border: 1px solid var(--color-secondary); - } - - &:hover { - background-color: var(--color-secondary); - - *, - & { - color: var(--color-white); + &.mobile-full-width { + margin-bottom: 1rem; + padding-left: 5rem; + width: -webkit-fill-available; + width: -moz-available; + @include breakpoint(lg) { + margin-bottom: 0; + padding-left: 2.5rem; + width: auto; + } + &::before { + margin-left: -2.6rem; + @include breakpoint(lg) { + margin-left: 0; + } + } } - } - } - - &.button-complementary { - color: var(--color-complementary); - background-color: var(--color-white); - - &.bordered { - border: 1px solid var(--color-complementary); - } - - &:hover { - background-color: var(--color-complementary); - color: var(--color-white); - } - } - - &.flex { - display: flex; - } - - &.reversed { - &.button-primary { - background-color: var(--color-primary); - - *, - & { - color: var(--color-white); + &.desktop-btn-margin__left { + margin: 0; + @include breakpoint(lg) { + margin-left: 2.2rem; + } } - - &:hover { - background-color: var(--color-white); - color: var(--color-primary); - - *, - & { - color: var(--color-primary); - } - - &.bordered { - border: 1px solid var(--color-primary); - } + &.small { + *, + & { + font-size: 1rem; + } } - } - - &.button-secondary { - background-color: var(--color-secondary); - - *, - & { - color: var(--color-white); + &.text-bold { + *, + & { + font-weight: bold; + } } - - &:hover { - background-color: var(--color-white); - - *, - & { - color: var(--color-secondary); - } - - &.bordered { - border: 1px solid var(--color-secondary); - } + &.text-uppercase { + *, + & { + text-transform: uppercase; + } } - } - - &.button-complementary { - background-color: var(--color-complementary); - - *, - & { - color: var(--color-white); + &.rounded { + border-radius: 50%; + font-size: 1.8rem; + padding: 1rem; } - - &:hover { - background-color: var(--color-white); - - *, - & { + &.button-link { + border-radius: 100em; + *, + & { + text-decoration: underline; + } + &:hover { + text-decoration: none; + } + } + &.with-icon::before { + font-size: 1.6rem; + margin-right: 1rem; + } + &.button-primary { + background-color: var(--color-white); + *, + & { + color: var(--color-primary); + } + &.bordered { + border: 1px solid var(--color-primary); + } + &:hover { + background-color: var(--color-primary); + *, + & { + color: var(--color-white); + } + } + } + &.button-secondary { + background-color: var(--color-white); + *, + & { + color: var(--color-secondary); + } + &.bordered { + border: 1px solid var(--color-secondary); + } + &:hover { + background-color: var(--color-secondary); + *, + & { + color: var(--color-white); + } + } + } + &.button-complementary { color: var(--color-complementary); - } - - &.bordered { - border: 1px solid var(--color-complementary); - } + background-color: var(--color-white); + &.bordered { + border: 1px solid var(--color-complementary); + } + &:hover { + background-color: var(--color-complementary); + color: var(--color-white); + } + } + &.flex { + display: flex; + } + &.reversed { + &.button-primary { + background-color: var(--color-primary); + *, + & { + color: var(--color-white); + } + &:hover { + background-color: var(--color-white); + color: var(--color-primary); + *, + & { + color: var(--color-primary); + } + &.bordered { + border: 1px solid var(--color-primary); + } + } + } + &.button-secondary { + background-color: var(--color-secondary); + *, + & { + color: var(--color-white); + } + &:hover { + background-color: var(--color-white); + *, + & { + color: var(--color-secondary); + } + &.bordered { + border: 1px solid var(--color-secondary); + } + } + } + &.button-complementary { + background-color: var(--color-complementary); + *, + & { + color: var(--color-white); + } + &:hover { + background-color: var(--color-white); + *, + & { + color: var(--color-complementary); + } + &.bordered { + border: 1px solid var(--color-complementary); + } + } + } } - } } - } -} +} \ No newline at end of file diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index d97d858..5e1fcd3 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -1,304 +1,256 @@ #main__menu { - background-color: var(--color-menu-background); - color: var(--color-menu-text); - /*transition: flex-basis 0.5s ease-in-out;*/ - - &.open { - transform: translateX(0); - } - - .unread { - font-weight: bolder; - } - - solid-router { - .menu-wrapper { - &.is-closed { - .sub-menu { - display: none; - } - - .menu-chevron { - transform: rotate(180deg); - } - } + background-color: var(--color-menu-background); + color: var(--color-menu-text); + /*transition: flex-basis 0.5s ease-in-out;*/ + &.open { + transform: translateX(0); } - - solid-link { - width: 100%; + .unread { + font-weight: bolder; } - - .menu { - cursor: pointer; - display: flex; - flex-direction: row-reverse; - font-weight: bold; - padding: 1.2rem; - - &[active] { - background-color: var(--color-menu-highlight-primary); - - .menu-icon:before { - background-color: var(--color-menu-icon-background-active); - } - - .menu-notification>solid-display>div:first-child { - background-color: var(--color-menu-badge-background); - } - } - &[name="resources"][active] .menu-icon:before, - &[name="polls"][active] .menu-icon:before, - &[name="events"][active] .menu-icon:before { - background-color: transparent; - } - - .menu-icon { - align-items: center; - display: flex; - justify-content: center; - flex-grow: 0; - flex-shrink: 0; - font-size: 1.7rem; - width: 3.2em; - - &:before { - border-radius: 100%; - height: 1.9em; - line-height: 1.9em; - width: 1.9em; - } - } - - .menu-label { - display: flex; - flex-direction: column; - flex-grow: 1; - flex-shrink: 0; - font-weight: 600; - justify-content: center; - letter-spacing: 0.017rem; - text-transform: uppercase; - width: 8em; - } - - .menu-chevron { - align-items: center; - display: flex; - flex-grow: 0; - flex-shrink: 0; - justify-content: center; - width: 2em; - } - - >solid-display { - display: block; - } - &[name="events"], &[name="resources"] { - .menu-label { - width: 9.9em; - } - } - } - - .sub-menu { - - /* Ellipsis for project tab */ - - .project-tab>div>solid-display>div:nth-child(1) { - - solid-set-default[name='project'] { - flex: 3; - - .project-customer, - .project-name { - box-sizing: border-box; - display: block; - width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */ - - @include breakpoint(lg) { - width: 150px; + solid-router { + .menu-wrapper { + &.is-closed { + .sub-menu { + display: none; + } + .menu-chevron { + transform: rotate(180deg); + } } - } - - .project-customer, - .project-name>div { - - @include breakpoint(lg) { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } } - } - - /* Ellipsis for circle tab */ - - .circle-tab>div>solid-display>div { - - solid-display-div[name='name'] { - flex: 3; - - >div[name='name'] { - box-sizing: border-box; - padding-left: 0.2em; - width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */ - - @include breakpoint(lg) { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 150px; - } - } + solid-link { + width: 100%; } - } - - /* Ellipsis for message tab */ - - .message-tab>div>solid-display>div>solid-display-div>div { - box-sizing: border-box; - width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */ - - @include breakpoint(lg) { - width: 150px; - } - } - - solid-display.nosub>solid-form[fields="name"]>hubl-search-users>input { - margin-left: 30px; - margin-bottom: 10px; - width: calc(80vw - 71px); - display: block; - background-color: var(--color-secondary); - color: var(--color-grey-6); - border: 1px solid var(--color-grey-4); - border-radius: 3px; - padding: 4px; - - @include breakpoint(lg) { - margin: auto; - margin-bottom: 10px; - width: auto; - } - } - - solid-display.nosub>nav { - text-align: center; - overflow: hidden; - display: grid; - grid-template-columns: auto 50% auto; - grid-template-areas: "left middle right"; - - >* { - color: var(--color-grey-6); - } - - >[data-id="prev"] { - grid-area: left; - } - - >[data-id="next"] { - grid-area: right; - } - - >span { - grid-area: middle; - } - } - - hubl-menu-publicprivate { - display: inline-block; - text-align: center; - - div { - font-family: simple-line-icons; - width: 20px; - font-size: 0.8em; - padding-top: 0.1em; - } - } - - >solid-display.nosub>div>solid-display>div { - padding: 1rem 1rem 1rem 3rem; - } - - solid-display>div { - - .create { - color: var(--color-white); - margin: 1rem 1rem 2.2rem 3.2rem; - } - - &>solid-display { - &:last-child>div { - margin-bottom: 2.2rem; - } - - >div { - color: var(--color-grey-6); + .menu { cursor: pointer; - - >hubl-menu-fix-url-circle>solid-display>div, - >hubl-menu-fix-url-project>solid-display>div { - padding: 1rem 1rem 1rem 3rem; + display: flex; + flex-direction: row-reverse; + font-weight: bold; + padding: 1.2rem; + &[active] { + background-color: var(--color-menu-highlight-primary); + .menu-icon:before { + background-color: var(--color-menu-icon-background-active); + } + .menu-notification>solid-display>div:first-child { + background-color: var(--color-menu-badge-background); + } + } + &[name="resources"][active] .menu-icon:before, + &[name="polls"][active] .menu-icon:before, + &[name="events"][active] .menu-icon:before { + background-color: transparent; + } + .menu-icon { + align-items: center; + display: flex; + justify-content: center; + flex-grow: 0; + flex-shrink: 0; + font-size: 1.7rem; + width: 3.2em; + &:before { + border-radius: 100%; + height: 1.9em; + line-height: 1.9em; + width: 1.9em; + } + } + .menu-label { + display: flex; + flex-direction: column; + flex-grow: 1; + flex-shrink: 0; + font-weight: 600; + justify-content: center; + letter-spacing: 0.017rem; + text-transform: uppercase; + width: 8em; + } + .menu-chevron { + align-items: center; + display: flex; + flex-grow: 0; + flex-shrink: 0; + justify-content: center; + width: 2em; + } + >solid-display { + display: block; + } + &[name="events"], + &[name="resources"], + &[name="polls"] { + .menu-label { + width: 9.9em; + } } - } - - &[fields="project(customer.name, name), badge"]>div { - padding: 0; - } } - - &>solid-display[active]>div, - &>solid-display>div>hubl-menu-fix-url-circle>solid-display[active]>div, - &>solid-display>div>hubl-menu-fix-url-project>solid-display[active]>div { - background-color: var(--color-menu-highlight-primary); - color: var(--color-menu-text-active); - font-weight: bold; + .sub-menu { + /* Ellipsis for project tab */ + .project-tab>div>solid-display>div:nth-child(1) { + solid-set-default[name='project'] { + flex: 3; + .project-customer, + .project-name { + box-sizing: border-box; + display: block; + width: calc(80vw - 96px); + /*96px = padding of the element + width and margin of counter */ + @include breakpoint(lg) { + width: 150px; + } + } + .project-customer, + .project-name>div { + @include breakpoint(lg) { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + } + } + /* Ellipsis for circle tab */ + .circle-tab>div>solid-display>div { + solid-display-div[name='name'] { + flex: 3; + >div[name='name'] { + box-sizing: border-box; + padding-left: 0.2em; + width: calc(80vw - 96px); + /*96px = padding of the element + width and margin of counter */ + @include breakpoint(lg) { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 150px; + } + } + } + } + /* Ellipsis for message tab */ + .message-tab>div>solid-display>div>solid-display-div>div { + box-sizing: border-box; + width: calc(80vw - 96px); + /*96px = padding of the element + width and margin of counter */ + @include breakpoint(lg) { + width: 150px; + } + } + solid-display.nosub>solid-form[fields="name"]>hubl-search-users>input { + margin-left: 30px; + margin-bottom: 10px; + width: calc(80vw - 71px); + display: block; + background-color: var(--color-secondary); + color: var(--color-grey-6); + border: 1px solid var(--color-grey-4); + border-radius: 3px; + padding: 4px; + @include breakpoint(lg) { + margin: auto; + margin-bottom: 10px; + width: auto; + } + } + solid-display.nosub>nav { + text-align: center; + overflow: hidden; + display: grid; + grid-template-columns: auto 50% auto; + grid-template-areas: "left middle right"; + >* { + color: var(--color-grey-6); + } + >[data-id="prev"] { + grid-area: left; + } + >[data-id="next"] { + grid-area: right; + } + >span { + grid-area: middle; + } + } + hubl-menu-publicprivate { + display: inline-block; + text-align: center; + div { + font-family: simple-line-icons; + width: 20px; + font-size: 0.8em; + padding-top: 0.1em; + } + } + >solid-display.nosub>div>solid-display>div { + padding: 1rem 1rem 1rem 3rem; + } + solid-display>div { + .create { + color: var(--color-white); + margin: 1rem 1rem 2.2rem 3.2rem; + } + &>solid-display { + &:last-child>div { + margin-bottom: 2.2rem; + } + >div { + color: var(--color-grey-6); + cursor: pointer; + >hubl-menu-fix-url-circle>solid-display>div, + >hubl-menu-fix-url-project>solid-display>div { + padding: 1rem 1rem 1rem 3rem; + } + } + &[fields="project(customer.name, name), badge"]>div { + padding: 0; + } + } + &>solid-display[active]>div, + &>solid-display>div>hubl-menu-fix-url-circle>solid-display[active]>div, + &>solid-display>div>hubl-menu-fix-url-project>solid-display[active]>div { + background-color: var(--color-menu-highlight-primary); + color: var(--color-menu-text-active); + font-weight: bold; + } + } + &.menu-notification { + >solid-display>div>solid-display>div>hubl-menu-fix-url-circle, + >solid-display>div>solid-display>div>hubl-menu-fix-url-project { + flex: 1; + } + >solid-display>div>solid-display>div, + >solid-display>div>solid-display>div>hubl-menu-fix-url-circle>solid-display>div, + >solid-display>div>solid-display>div>hubl-menu-fix-url-project>solid-display>div { + display: flex; + justify-content: space-between; + } + hubl-counter { + height: 20px; + width: 20px; + margin-right: 1em; + div.counter:not([data-nb-unread="0"]) { + text-align: center; + display: block; + background-color: var(--sib-notifications-theme, gray); + border-radius: 50%; + font-size: 12px; + line-height: 20px; + width: 20px; + height: 20px; + padding-bottom: 0; + color: var(--color-secondary); + } + } + } } - } - - &.menu-notification { - - >solid-display>div>solid-display>div>hubl-menu-fix-url-circle, - >solid-display>div>solid-display>div>hubl-menu-fix-url-project { - flex: 1; + .divider { + height: 1px; + background-color: var(--color-grey-11); + opacity: 0.2; } - - >solid-display>div>solid-display>div, - >solid-display>div>solid-display>div>hubl-menu-fix-url-circle>solid-display>div, - >solid-display>div>solid-display>div>hubl-menu-fix-url-project>solid-display>div { - display: flex; - justify-content: space-between; - } - - hubl-counter { - height: 20px; - width: 20px; - margin-right: 1em; - - div.counter:not([data-nb-unread="0"]) { - text-align: center; - display: block; - background-color: var(--sib-notifications-theme, gray); - border-radius: 50%; - font-size: 12px; - line-height: 20px; - width: 20px; - height: 20px; - padding-bottom: 0; - color: var(--color-secondary); - } - } - } } - - .divider { - height: 1px; - background-color: var(--color-grey-11); - opacity: 0.2; - } - } -} +} \ No newline at end of file diff --git a/src/styles/layout/events/events.scss b/src/styles/layout/events/events.scss index aca9d36..1c3511d 100644 --- a/src/styles/layout/events/events.scss +++ b/src/styles/layout/events/events.scss @@ -1,4 +1,5 @@ -#events, #circle-events { +#events, +#circle-events { width: 100%; font-family: "Facit"; font-weight: 400; @@ -16,12 +17,13 @@ .event-place-name { font-weight: 700; } - #listevents, #circle-listevents { + #listevents, + #circle-listevents { [name="name"], - solid-display-link-event .mdi::before { - color: #C4262E; + solid-display-link-event .mdi::before { + color: #C4262E; + } } - } .event-place-name, .nextevent-startdate, solid-display-link-event { @@ -39,14 +41,14 @@ } #listevents, #circle-listevents { - .newtype .button{ + .newtype .button { font-size: 1.2rem; width: max-content; height: max-content; padding: 5px 20px; color: #063B5C; } - solid-form solid-form-dropdown{ + sib-form sib-form-dropdown { label div { height: 2.5rem; } @@ -80,15 +82,26 @@ } } #eventdetail { + .mdi::before { + margin: 0 5px 0 20px; + } + [name="infotext"] { + text-align: left; + } [name="name"] { font-family: "RefrigeratorDelxW01Bold"; font-size: 3.2rem; line-height: 3.8rem; - } color: #063B5C; - solid-display div .event-type { + } + color: #063B5C; + .event-type { width: max-content; - padding: 5px 20px; + padding: 5px 20px; + font-size: 1.1rem; + line-height: 1.3rem; + height: 13px; + margin: 10px 20px; } [name="longDescription"] p { font-size: 1.6rem; @@ -98,11 +111,11 @@ font-size: 1.6rem; } } - #newevent input[type="submit"], + #newevent input[type="submit"], #newtype input[type="submit"], button { width: max-content; - padding: 5px 20px; + padding: 5px 20px; } } @media (max-width: 991px) { @@ -111,7 +124,8 @@ } } } -.with-sidebar nav > solid-router > ul [name="circle-events"]{ + +.with-sidebar nav>solid-router>ul [name="circle-events"] { li::before { content: ''; height: 40px; diff --git a/src/styles/layout/polls/_polls.scss b/src/styles/layout/polls/_polls.scss index 5a19b0c..c30cc40 100644 --- a/src/styles/layout/polls/_polls.scss +++ b/src/styles/layout/polls/_polls.scss @@ -1,52 +1,58 @@ -#polls{ - h2{ - text-transform: inherit; - } - /*style of poll listing*/ - #pollListing{ - width: 90%; - margin: auto; - .all-polls{ - /*make 3 polls per line*/ - div:first-of-type{ - solid-display{ - width: 330px; - >div:first-of-type{ - *[name="body"]{ - /*size of tags of poll card*/ - etuc-display-votetags{ - >div{ - width: 64px; - height: 24px; - p{ - font-size: 11px; - } +#polls { + h2 { + text-transform: inherit; + } + /*style of poll listing*/ + #pollListing { + width: 90%; + margin: auto; + .headline h2 { + font-family: "RefrigeratorDelxW01Bold"; + font-size: 2.4rem; + line-height: 3.8rem; + color: #063B5C; + } + .all-polls { + /*make 3 polls per line*/ + div:first-of-type { + solid-display { + width: 330px; + >div:first-of-type { + *[name="body"] { + /*size of tags of poll card*/ + etuc-display-votetags { + >div { + width: 64px; + height: 24px; + p { + font-size: 11px; + } + } + } + } + } + } + } + } + } + /*personnalise css on poll page*/ + #pollPage { + width: 85%; + margin: auto; + solid-display.topline { + >div:first-of-type { + *[name="right"] { + etuc-display-votetags { + >div { + width: 64px; + height: 24px; + p { + font-size: 11px; + } + } + } } - } - } - } - } - } - } - } - /*personnalise css on poll page*/ - #pollPage{ - width: 85%; - margin: auto; - solid-display.topline{ - >div:first-of-type{ - *[name="right"]{ - etuc-display-votetags{ - >div{ - width: 64px; - height: 24px; - p{ - font-size: 11px; - } } - } } - } } - } } \ No newline at end of file diff --git a/src/styles/layout/resources/resources.scss b/src/styles/layout/resources/resources.scss index 373b212..e665949 100644 --- a/src/styles/layout/resources/resources.scss +++ b/src/styles/layout/resources/resources.scss @@ -1,12 +1,12 @@ -#resources{ +#resources { width: 100%; font-family: "Facit"; font-weight: 400; - color: #3A3A3A; + color: #7A7F85; solid-resource { background-color: #F0F3F6; .sib-resource { - font-family: "Facit"; + font-family: "Facit"; .page-title { font-family: "RefrigeratorDelxW01Bold"; font-size: 3.2rem; @@ -23,9 +23,31 @@ .lnk-newresource { margin-top: 30px; margin-right: 70px; + z-index: 1; + position: relative; } - .resources sib-form::before { - font-family: "RefrigeratorDelxW01Bold"; + #listresources .lnk-newkeyword { + top: 133px; + left: 220px; + .button.thin-button.mdi { + padding: 5px 20px; + } + } + .resources { + margin-top: -35px; + sib-form { + &::before { + content: "Research a resource"; + font-family: "RefrigeratorDelxW01Bold"; + color: #063B5C; + font-size: 2.4rem; + line-height: 3.8rem; + top: -10px; + } + select { + width: 150px; + } + } } #listresources { .lnk-newkeyword .button { @@ -49,6 +71,30 @@ } } } + #resourcedetail { + [name="name"] { + font-family: "RefrigeratorDelxW01Bold"; + font-size: 3.2rem; + line-height: 3.8rem; + color: #063B5C; + } + [name="infotext"] { + justify-content: flex-start; + } + .event-type { + width: max-content; + padding: 5px 20px; + font-size: 1.1rem; + line-height: 1.3rem; + height: 13px; + margin: 0 20px 10px; + background-color: #C4262E; + color: white; + font-weight: 700; + text-transform: uppercase; + border-radius: 15px; + } + } .resource-tag { font-family: Facilt; font-weight: 600; @@ -61,7 +107,8 @@ } } } -.with-sidebar nav > solid-router > ul [name="circle-resources"]{ + +.with-sidebar nav>solid-router>ul [name="circle-resources"] { li::before { content: ''; height: 40px; From 778950a38a420716d582de7a7af1f39261db3ac8 Mon Sep 17 00:00:00 2001 From: Marjolaine Le Bon Date: Thu, 20 Aug 2020 01:59:24 +0200 Subject: [PATCH 18/62] update: integration polls - step 1 --- src/styles/layout/events/events.scss | 41 +++-- src/styles/layout/polls/_polls.scss | 169 +++++++++++++++++++-- src/styles/layout/resources/resources.scss | 19 ++- 3 files changed, 206 insertions(+), 23 deletions(-) diff --git a/src/styles/layout/events/events.scss b/src/styles/layout/events/events.scss index 1c3511d..f3e3681 100644 --- a/src/styles/layout/events/events.scss +++ b/src/styles/layout/events/events.scss @@ -5,6 +5,12 @@ font-weight: 400; color: #7A7F85; solid-event { + sib-display div { + max-width: 1110px; + sib-display { + margin: 0 0 20px 40px; + } + } .red-button, .event-type { background-color: #C4262E; @@ -21,7 +27,7 @@ #circle-listevents { [name="name"], solid-display-link-event .mdi::before { - color: #C4262E; + color: #063B5C; } } .event-place-name, @@ -48,17 +54,20 @@ padding: 5px 20px; color: #063B5C; } - sib-form sib-form-dropdown { - label div { - height: 2.5rem; - } - &::before { - font-family: "RefrigeratorDelxW01Bold"; - font-size: 2.4rem; - line-height: 29px; - color: #063B5C; - top: -40px; - content: "Research an event"; + sib-form { + sib-form-dropdown { + margin-left: 15px; + label div { + height: 2.5rem; + } + &::before { + font-family: "RefrigeratorDelxW01Bold"; + font-size: 2.4rem; + line-height: 29px; + color: #063B5C; + top: -40px; + content: "Research an event"; + } } } [name="name"] { @@ -125,6 +134,14 @@ } } +#events { + background-color: #f0f3f6; +} + +#circle-events solid-event .events sib-form sib-form-dropdown select { + background-color: #f0f3f6; +} + .with-sidebar nav>solid-router>ul [name="circle-events"] { li::before { content: ''; diff --git a/src/styles/layout/polls/_polls.scss b/src/styles/layout/polls/_polls.scss index c30cc40..923882c 100644 --- a/src/styles/layout/polls/_polls.scss +++ b/src/styles/layout/polls/_polls.scss @@ -1,23 +1,78 @@ -#polls { +#polls, +#circle-polls { h2 { text-transform: inherit; } /*style of poll listing*/ #pollListing { - width: 90%; margin: auto; - .headline h2 { - font-family: "RefrigeratorDelxW01Bold"; - font-size: 2.4rem; - line-height: 3.8rem; - color: #063B5C; + .headline { + h2 { + margin: 0 40px; + font-family: "RefrigeratorDelxW01Bold"; + font-size: 2.4rem; + line-height: 3.8rem; + color: #063B5C; + } + .add-poll { + solid-link { + float: right; + margin-top: 10px; + display: initial; + margin-right: 75px; + position: relative; + z-index: 1; + box-shadow: 0px 0px 4px 1px #CACACA; + height: 2rem; + font-size: 1.4rem; + text-transform: uppercase; + font-weight: 700; + padding: 0.55rem 2.5rem; + width: max-content; + line-height: 20px; + &::before { + font-family: "material-design-icons"; + content: "\F419"; + width: 1em; + display: inline-block; + margin: 0 5px 0 10px; + font-size: 2rem; + vertical-align: middle; + font-weight: 400; + } + } + } } .all-polls { - /*make 3 polls per line*/ + solid-form { + display: block; + border-bottom: solid 1px #cacaca; + height: 90px; + width: 650px; + margin: 16px 25px 25px; + max-width: 85%; + solid-form-placeholder-text { + margin-left: 15px; + input { + border-radius: 4px; + } + } + } div:first-of-type { + display: flex; + flex-wrap: wrap; + justify-content: left; + height: 100%; + max-width: 1100px; + margin: auto; solid-display { - width: 330px; + width: 320px; + height: 550px; + margin: 0 0 20px 40px; >div:first-of-type { + background-color: #fff; + -webkit-box-shadow: 0px 0px 4px 1px #CACACA; + box-shadow: 0px 0px 4px 1px #CACACA; *[name="body"] { /*size of tags of poll card*/ etuc-display-votetags { @@ -30,6 +85,78 @@ } } } + img { + width: 320px; + height: 230px; + object-fit: cover; + } + [name="title"] { + font-family: "RefrigeratorDelxW01Bold"; + color: #063B5C; + font-size: 1.8rem; + font-weight: 600; + text-transform: uppercase; + height: 30px; + width: 100%; + display: inline-block; + } + [name="hostingOrganisation"], + [name="endDate"] { + color: #3A3A3A; + font-family: Facit; + font-size: 14px; + letter-spacing: 0; + line-height: 22px; + } + [name="hostingOrganisation"] { + &::before { + content: '\e037'; + font-family: 'simple-line-icons'; + color: #C4262E; + height: 22px; + width: 24px; + font-size: 16px; + letter-spacing: 0; + line-height: 22px; + display: inline-block; + text-align: center; + } + } + [name="endDate"] { + position: relative; + padding-left: 140px; + &::after { + display: inline-block; + font: normal normal normal 24px/1 "Material Design Icons"; + content: "\F6AF"; + color: #C4262E; + height: 22px; + width: 24px; + font-size: 20px; + letter-spacing: 0; + line-height: 22px; + display: inline-block; + text-align: center; + position: absolute; + left: 0; + top: 0; + } + &::before { + position: absolute; + left: 24px; + width: max-content; + } + } + [name="shortDescription"] { + height: 117px; + width: 316px; + color: #7A7F85; + font-family: Facit; + font-size: 14px; + letter-spacing: 0; + line-height: 22px; + text-align: center; + } } } } @@ -55,4 +182,28 @@ } } } +} + +#polls { + background-color: #f0f3f6; +} + +#circle-polls #pollListing .all-polls solid-form solid-form-placeholder-text input { + background-color: #f0f3f6; +} + +.with-sidebar nav>solid-router>ul [name="circle-polls"] { + li::before { + content: ''; + height: 40px; + width: 40px; + mask: url('/images/vote.svg') center no-repeat; + mask-size: contain; + -webkit-mask: url('/images/vote.svg') center no-repeat; + -webkit-mask-size: contain; + background-color: var(--color-right-menu-text); + } + &[active] li::before { + background-color: var(--color-right-menu-active-text); + } } \ No newline at end of file diff --git a/src/styles/layout/resources/resources.scss b/src/styles/layout/resources/resources.scss index e665949..0b876c1 100644 --- a/src/styles/layout/resources/resources.scss +++ b/src/styles/layout/resources/resources.scss @@ -1,10 +1,16 @@ -#resources { +#resources, +#circle-resources { width: 100%; font-family: "Facit"; font-weight: 400; color: #7A7F85; solid-resource { - background-color: #F0F3F6; + sib-display div { + max-width: 1110px; + sib-display { + margin: 0 0 20px 40px; + } + } .sib-resource { font-family: "Facit"; .page-title { @@ -60,6 +66,7 @@ sib-display sib-display { [name="name"] { font-family: "RefrigeratorDelxW01Bold"; + color: #063B5C; } [name="link"] a { padding-left: 35px; @@ -108,6 +115,14 @@ } } +#resources { + background-color: #f0f3f6; +} + +#circle-resources .resources sib-form sib-form-dropdown select { + background-color: #f0f3f6; +} + .with-sidebar nav>solid-router>ul [name="circle-resources"] { li::before { content: ''; From d710379b4644ee1f6c21c16748ad40e4963dcae8 Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Thu, 27 Aug 2020 17:32:35 +0200 Subject: [PATCH 19/62] Adding id prefix to events --- src/page-events.pug | 1 + src/views/circle/page-circle-events.pug | 1 + 2 files changed, 2 insertions(+) diff --git a/src/page-events.pug b/src/page-events.pug index faaed63..22f2b8a 100644 --- a/src/page-events.pug +++ b/src/page-events.pug @@ -3,4 +3,5 @@ range-event-type=`${endpoints.typeevents || (endpoints.get && endpoints.get.typeevents)}` range-event-circle=`${endpoints.circles || (endpoints.get && endpoints.get.circles)}` upload-dir=`${endpoints.uploads || (endpoints.get && endpoints.get.uploads)}` + id-prefix='default' ) \ No newline at end of file diff --git a/src/views/circle/page-circle-events.pug b/src/views/circle/page-circle-events.pug index ca8b0a7..5ecad21 100644 --- a/src/views/circle/page-circle-events.pug +++ b/src/views/circle/page-circle-events.pug @@ -6,4 +6,5 @@ range-event-type=`${endpoints.typeevents || (endpoints.get && endpoints.get.typeevents)}` range-event-circle=`${endpoints.circles || (endpoints.get && endpoints.get.circles)}` upload-dir=`${endpoints.uploads || (endpoints.get && endpoints.get.uploads)}` + id-prefix='circles' ) \ No newline at end of file From 55623c2dd189b10a4d20a569956d8c9165d6ceba Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Thu, 27 Aug 2020 18:13:50 +0200 Subject: [PATCH 20/62] feature: adding proper dynamic prefix on resources and events module --- src/page-resources.pug | 1 + src/styles/layout/events/events.scss | 6 +++--- src/styles/layout/resources/resources.scss | 6 +++--- src/views/circle/page-circle-resources.pug | 1 + 4 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/page-resources.pug b/src/page-resources.pug index ad1a80b..235c99e 100644 --- a/src/page-resources.pug +++ b/src/page-resources.pug @@ -4,4 +4,5 @@ range-resource-keyword=`${endpoints.resourceskeywords || (endpoints.get && endpoints.get.resourceskeywords)}` range-resource-circle=`${endpoints.circles || (endpoints.get && endpoints.get.circles)}` upload-dir=`${endpoints.uploads || (endpoints.get && endpoints.get.uploads)}` + id-prefix='default' ) \ No newline at end of file diff --git a/src/styles/layout/events/events.scss b/src/styles/layout/events/events.scss index f3e3681..bb5d7f7 100644 --- a/src/styles/layout/events/events.scss +++ b/src/styles/layout/events/events.scss @@ -90,7 +90,7 @@ padding: 5px; } } - #eventdetail { + .eventdetail { .mdi::before { margin: 0 5px 0 20px; } @@ -120,8 +120,8 @@ font-size: 1.6rem; } } - #newevent input[type="submit"], - #newtype input[type="submit"], + .newevent input[type="submit"], + .newtype input[type="submit"], button { width: max-content; padding: 5px 20px; diff --git a/src/styles/layout/resources/resources.scss b/src/styles/layout/resources/resources.scss index 0b876c1..f98edf3 100644 --- a/src/styles/layout/resources/resources.scss +++ b/src/styles/layout/resources/resources.scss @@ -32,7 +32,7 @@ z-index: 1; position: relative; } - #listresources .lnk-newkeyword { + .listresources .lnk-newkeyword { top: 133px; left: 220px; .button.thin-button.mdi { @@ -55,7 +55,7 @@ } } } - #listresources { + .listresources { .lnk-newkeyword .button { font-size: 1.2rem; width: max-content; @@ -78,7 +78,7 @@ } } } - #resourcedetail { + .resourcedetail { [name="name"] { font-family: "RefrigeratorDelxW01Bold"; font-size: 3.2rem; diff --git a/src/views/circle/page-circle-resources.pug b/src/views/circle/page-circle-resources.pug index 79a9dc6..cfb9159 100644 --- a/src/views/circle/page-circle-resources.pug +++ b/src/views/circle/page-circle-resources.pug @@ -7,4 +7,5 @@ range-resource-keyword=`${endpoints.resourceskeywords || (endpoints.get && endpoints.get.resourceskeywords)}` range-resource-circle=`${endpoints.circles || (endpoints.get && endpoints.get.circles)}` upload-dir=`${endpoints.uploads || (endpoints.get && endpoints.get.uploads)}` + id-prefix='circles' ) \ No newline at end of file From 523fba94becfc04cbdf5c9c11456e6d7d037f22a Mon Sep 17 00:00:00 2001 From: Marjolaine Le Bon Date: Mon, 31 Aug 2020 10:22:54 +0200 Subject: [PATCH 21/62] bugfix: bug css due to merge --- src/styles/base/menu-left.scss | 90 ---------------------------------- 1 file changed, 90 deletions(-) diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index cea32b5..5e1fcd3 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -87,96 +87,6 @@ } } } - } - - /* Ellipsis for message tab */ - - .message-tab>div>solid-display>div>solid-display-div>div { - box-sizing: border-box; - width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */ - - @include breakpoint(lg) { - width: 150px; - } - } - - solid-display.nosub>solid-form[fields="name"]>hubl-search-users>input { - margin-left: 30px; - margin-bottom: 10px; - width: calc(80vw - 71px); - display: block; - background-color: var(--color-secondary); - color: var(--color-white); - border: 1px solid var(--color-grey-4); - border-radius: 3px; - padding: 4px; - - @include breakpoint(lg) { - margin: auto; - margin-bottom: 10px; - width: auto; - } - } - - solid-display.nosub>nav { - text-align: center; - overflow: hidden; - display: grid; - grid-template-columns: auto 50% auto; - grid-template-areas: "left middle right"; - - >* { - color: var(--color-white); - } - - >[data-id="prev"] { - grid-area: left; - } - - >[data-id="next"] { - grid-area: right; - } - - >span { - grid-area: middle; - } - } - - hubl-menu-publicprivate { - display: inline-block; - text-align: center; - - div { - font-family: simple-line-icons; - width: 20px; - font-size: 0.8em; - padding-top: 0.1em; - } - } - - >solid-display.nosub>div>solid-display>div { - padding: 1rem 1rem 1rem 3rem; - } - - solid-display>div { - - .create { - color: var(--color-white); - margin: 1rem 1rem 2.2rem 3.2rem; - } - - &>solid-display { - &:last-child>div { - margin-bottom: 2.2rem; - } - - >div { - color: var(--color-white); - cursor: pointer; - - >hubl-menu-fix-url-circle>solid-display>div, - >hubl-menu-fix-url-project>solid-display>div { - padding: 1rem 1rem 1rem 3rem; .sub-menu { /* Ellipsis for project tab */ .project-tab>div>solid-display>div:nth-child(1) { From af86fe9dbcb0ef88d51d03ab45acf29224f0b70b Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Mon, 31 Aug 2020 22:55:23 +0200 Subject: [PATCH 22/62] update: Adding proper conditions --- src/dependencies.pug | 14 +++++++------- src/page-circle.pug | 21 ++++++++++++--------- 2 files changed, 19 insertions(+), 16 deletions(-) diff --git a/src/dependencies.pug b/src/dependencies.pug index d6be127..e560d56 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -14,15 +14,15 @@ script(type="module" src="https://unpkg.com/@startinblox/router@0.8" defer) script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.6.2" defer) //- script(type="module" src="/lib/sib-notifications/index.js" defer) -if endpoints.events || (endpoints.get && endpoints.get.events) - script(type="module" src="https://unpkg.com/@startinblox/component-event@1.1" defer) - //- script(type="module" src="/lib/sib-event-component/sib-event.js" defer) +if (endpoints.events || (endpoints.get && endpoints.get.events)) && (endpoints.typeevents || (endpoints.get && endpoints.get.typeevents)) + //- script(type="module" src="https://unpkg.com/@startinblox/component-event@1.1" defer) + script(type="module" src="/lib/sib-event-component/sib-event.js" defer) -if endpoints.resources || (endpoints.get && endpoints.get.resources) - script(type="module" src="https://unpkg.com/@startinblox/component-resource@1.0" defer) - //-script(type="module" src="/lib/sib-resource/sib-resource.js" defer) +if (endpoints.resources || (endpoints.get && endpoints.get.resources)) && (endpoints.resourceskeywords || (endpoints.get && endpoints.get.resourceskeywords)) && (endpoints.resourcestypes || (endpoints.get && endpoints.get.resourcestypes)) + //- script(type="module" src="https://unpkg.com/@startinblox/component-resource@1.0" defer) + script(type="module" src="/lib/sib-resource/sib-resource.js" defer) -if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers) +if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers) script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.5" defer) //- script(type="module" src="/lib/solid-job-board/dist/index.js" defer) diff --git a/src/page-circle.pug b/src/page-circle.pug index 24dbcce..5ca2271 100644 --- a/src/page-circle.pug +++ b/src/page-circle.pug @@ -34,13 +34,16 @@ nav.jsRightMenu(role='navigation') solid-route(name='circle-information') li a Information - solid-route(name='circle-resources' use-id) - li - a Resources - solid-route(name='circle-events' use-id) - li - a Events - solid-route(name='circle-polls' use-id) - li - a Polls + if (endpoints.resources || (endpoints.get && endpoints.get.resources)) && (endpoints.resourceskeywords || (endpoints.get && endpoints.get.resourceskeywords)) && (endpoints.resourcestypes || (endpoints.get && endpoints.get.resourcestypes)) + solid-route(name='circle-resources' use-id) + li + a Resources + if (endpoints.events || (endpoints.get && endpoints.get.events)) && (endpoints.typeevents || (endpoints.get && endpoints.get.typeevents)) + solid-route(name='circle-events' use-id) + li + a Events + if endpoints.polls || (endpoints.get && endpoints.get.polls) + solid-route(name='circle-polls' use-id) + li + a Polls From f3351d4669e33beeb95cc09deda90291b4ce5dbc Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Mon, 31 Aug 2020 21:27:07 +0000 Subject: [PATCH 23/62] Update README.md --- README.md | 67 ++++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 51 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 790fd7d..1b64591 100644 --- a/README.md +++ b/README.md @@ -159,22 +159,6 @@ On `config.json`: A [sample fixture](https://git.startinblox.com/djangoldp-packages/djangoldp-dashboard/blob/master/djangoldp_dashboard/fixtures/sample.json) can be loaded with `./manage.py loaddata path/to/djangoldp_dashboard/fixtures/sample.json`. -### Events - -Events allow to create and manage instance-level evenement. To activate them, you need: - -On Server: `djangoldp_event`, `djangoldp_upload` packages - -On `config.json`: - -```json - "endpoints": { - "events": "http://server.url/events/", - "typeevents": "http://server.url/typeevents/", - "uploads": "http://server.url/upload/" - } -``` - ### Project Project are a private group chat including Customer and Business Provider management. To activate them, you need: @@ -225,6 +209,57 @@ On `config.json`: } ``` +### Events + +The events module includes a listing of upcoming events and the capability to create new ones. +This module will also work inside the circles. +To activate it, you need: + +On Server: `djangoldp_event`, `djangoldp_upload` packages + +On `config.json`: + +```json + "endpoints": { + "events":"http://server.url/events/", + "typeevents":"http://server.url/typeevents/", + "uploads": "http://server.url/upload/" + } +``` + +### Resources + +The resources module includes a listing of indexed resources and the capability to index new ones. +This module will also work inside the circles. +To activate it, you need: + +On Server: `djangoldp_resource`, `djangoldp_upload`, `djangoldp_conversation` packages + +On `config.json`: + +```json + "endpoints": { + "resources":"http://server.url/resources/", + "resourceskeywords":"http://server.url/keywords/", + "resourcestypes":"http://server.url/types/", + "uploads": "http://server.url/upload/" + } +``` + +### Polls + +The polls module allows user to create polls related (or not) to circles. To activate it, you need: + +On Server: `djangoldp_polls`, `djangoldp_upload`, `djangoldp_conversation` packages + +On `config.json`: + +```json + "endpoints": { + "polls":"http://server.url/polls/" + } +``` + ## Use with docker ### Multi services From fd47cea803e1f9be4f0c71d7a30675df7f0703d5 Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Wed, 2 Sep 2020 21:11:13 +0200 Subject: [PATCH 24/62] Swittch to the official release of the different components --- src/dependencies.pug | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/dependencies.pug b/src/dependencies.pug index e560d56..31b5fce 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -15,12 +15,12 @@ script(type="module" src="https://unpkg.com/@startinblox/component-notifications //- script(type="module" src="/lib/sib-notifications/index.js" defer) if (endpoints.events || (endpoints.get && endpoints.get.events)) && (endpoints.typeevents || (endpoints.get && endpoints.get.typeevents)) - //- script(type="module" src="https://unpkg.com/@startinblox/component-event@1.1" defer) - script(type="module" src="/lib/sib-event-component/sib-event.js" defer) + script(type="module" src="https://unpkg.com/@startinblox/component-event@1.1" defer) + //- script(type="module" src="/lib/sib-event-component/sib-event.js" defer) if (endpoints.resources || (endpoints.get && endpoints.get.resources)) && (endpoints.resourceskeywords || (endpoints.get && endpoints.get.resourceskeywords)) && (endpoints.resourcestypes || (endpoints.get && endpoints.get.resourcestypes)) - //- script(type="module" src="https://unpkg.com/@startinblox/component-resource@1.0" defer) - script(type="module" src="/lib/sib-resource/sib-resource.js" defer) + script(type="module" src="https://unpkg.com/@startinblox/component-resource@1.0" defer) + //- script(type="module" src="/lib/sib-resource/sib-resource.js" defer) if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers) script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.5" defer) From 6475a093231b111288dbf138135009c7ef336a8e Mon Sep 17 00:00:00 2001 From: Marjolaine Le Bon Date: Tue, 8 Sep 2020 11:42:42 +0200 Subject: [PATCH 25/62] bugfix: event detail img --- src/styles/base/menu-left.scss | 5 ++++- src/styles/layout/events/events.scss | 4 ++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index 5e1fcd3..5bd7dd8 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -141,7 +141,7 @@ } } solid-display.nosub>solid-form[fields="name"]>hubl-search-users>input { - margin-left: 30px; + margin-left: 30px!important; margin-bottom: 10px; width: calc(80vw - 71px); display: block; @@ -154,6 +154,9 @@ margin: auto; margin-bottom: 10px; width: auto; + &::placeholder { + color: var(--color-grey-6); + } } } solid-display.nosub>nav { diff --git a/src/styles/layout/events/events.scss b/src/styles/layout/events/events.scss index bb5d7f7..68aa978 100644 --- a/src/styles/layout/events/events.scss +++ b/src/styles/layout/events/events.scss @@ -91,6 +91,9 @@ } } .eventdetail { + sib-display div { + display: block; + } .mdi::before { margin: 0 5px 0 20px; } @@ -102,6 +105,7 @@ font-size: 3.2rem; line-height: 3.8rem; color: #063B5C; + display: block; } color: #063B5C; .event-type { From 5c2d41e04a09670aaeaf7c316e935bd09625f7c6 Mon Sep 17 00:00:00 2001 From: senza Date: Tue, 8 Sep 2020 12:09:54 +0200 Subject: [PATCH 26/62] edit endpoints for polls component --- src/page-polls.pug | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/page-polls.pug b/src/page-polls.pug index 2caf838..3dc687c 100644 --- a/src/page-polls.pug +++ b/src/page-polls.pug @@ -1,2 +1,5 @@ .views-container - solid-poll(data-src=`${endpoints.polls || (endpoints.get && endpoints.get.polls)}`) \ No newline at end of file + solid-poll(data-src=`${endpoints.polls || (endpoints.get && endpoints.get.polls)}` + range-base-polls=`${endpoints.pollRangeBase || (endpoints.get && endpoints.get.pollRangeBase)}` + upload-dir=`${endpoints.uploads || (endpoints.get && endpoints.get.uploads)}` + ) \ No newline at end of file From ae97bec8bfffdf8c4b2f6d3ed3b91c126190bf4e Mon Sep 17 00:00:00 2001 From: Marjolaine Le Bon Date: Wed, 9 Sep 2020 00:17:26 +0200 Subject: [PATCH 27/62] update : integration add polls form --- src/styles/layout/events/events.scss | 19 +++ src/styles/layout/polls/_polls.scss | 144 ++++++++++++++++++++- src/styles/layout/resources/resources.scss | 34 +++-- 3 files changed, 180 insertions(+), 17 deletions(-) diff --git a/src/styles/layout/events/events.scss b/src/styles/layout/events/events.scss index 68aa978..10a6093 100644 --- a/src/styles/layout/events/events.scss +++ b/src/styles/layout/events/events.scss @@ -124,11 +124,30 @@ font-size: 1.6rem; } } + .newevent label div, + .newevent sib-form-file div label { + line-height: 2.2rem; + text-transform: uppercase; + color: var(--form-title); + font-size: 13px; + font-weight: 600; + font-family: Open sans; + } + .newevent select, + .newevent textarea, + .newevent input, + .newtype input { + background-color: var(--form-inputs-background); + } .newevent input[type="submit"], .newtype input[type="submit"], button { width: max-content; padding: 5px 20px; + background-color: #3C3F57; + } + .newevent input[type="file"] { + background-color: transparent; } } @media (max-width: 991px) { diff --git a/src/styles/layout/polls/_polls.scss b/src/styles/layout/polls/_polls.scss index 923882c..dd14717 100644 --- a/src/styles/layout/polls/_polls.scss +++ b/src/styles/layout/polls/_polls.scss @@ -58,7 +58,7 @@ } } } - div:first-of-type { + > div { display: flex; flex-wrap: wrap; justify-content: left; @@ -71,6 +71,7 @@ margin: 0 0 20px 40px; >div:first-of-type { background-color: #fff; + height: 100%; -webkit-box-shadow: 0px 0px 4px 1px #CACACA; box-shadow: 0px 0px 4px 1px #CACACA; *[name="body"] { @@ -148,14 +149,13 @@ } } [name="shortDescription"] { - height: 117px; - width: 316px; color: #7A7F85; font-family: Facit; font-size: 14px; letter-spacing: 0; line-height: 22px; text-align: center; + max-height: 100%; } } } @@ -185,7 +185,143 @@ } #polls { - background-color: #f0f3f6; + .views-container { + background-color: #f0f3f6;; + } + #add-survey { + background-color: white; + padding: 50px 0; + margin: -20px 0; + h2 { + font-family: "RefrigeratorDelxW01Bold"; + font-size: 3.2rem; + line-height: 3.8rem; + color: var(--title-font-color); + margin-bottom: 0; + } + p { + margin-top: 10px; + color: #7A7F85; + font-family: Facit; + font-size: 16px; + } + form { + padding: 25px 0; + width: 1000px; + max-width: 90%; + display: block; + input { + height: 3rem; + } + textarea { + height: 110px; + } + solid-form-label-text, + solid-form-textarea { + display: block; + margin: 15px 0; + padding: 0; + } + label > div, solid-form-file-image > div label, solid-form-auto-completion[name="tags"] > label::before { + margin-bottom: 5px; + margin-top: 20px; + color: var(--form-title); + font-size: 13px; + font-weight: 600; + text-transform: uppercase; + } + solid-form-file-image > div { + margin-bottom: 15px; + button { + width: 20px; + } + input { + align-self: center; + } + label { + margin-bottom: 15px; + } + img { + margin-right: 10px; + max-width: 250px; + } + } + solid-form-label-text[name="title"] { + margin-bottom: 5px; + } + .form-tips { + font-family: Facit; + } + .h3-like { + font-family: "RefrigeratorDelxW01Bold"; + } + solid-multiple-form[name="pollOptions"] { + div { + margin-bottom: 10px; + div { + display: flex; + width: 100%; + justify-content: space-between; + custom-choix { + width: calc(100% - 45px); + solid-form-label-text[name="name"] { + margin-bottom: 0; + } + } + button { + border: 1px solid var(--main-color); + background-color: transparent; + border-radius: 15px; + font-size: 24px; + color: var(--main-color); + padding: 0; + height: 30px; + width: 30px; + align-self: flex-end; + margin-bottom: 5px; + } + } + } + > button { + height: 28px; + line-height: 14px; + text-transform: uppercase; + font-family: Facit; + padding: 0 30px; + font-weight: bold; + font-size: 13px; + margin: 10px 0; + color: var(--main-color); + &::before { + content: "\F419"; + font-family: Material Design Icons; + margin-right: 7px; + font-size: 2rem; + vertical-align: middle; + text-decoration: none; + } + } + } + .ss-main { + margin-top: 10px; + .ss-multi-selected .ss-values .ss-value { + border-radius: 14px; + background-color: #C4262E; + padding: 5px 10px; + font-size: 11px; + } + } + input[type="submit"] { + font-size: 1.4rem; + margin: 25px 0; + float: right; + width: max-content; + padding: 5px 20px; + display: block; + text-transform: uppercase; + } + } + } } #circle-polls #pollListing .all-polls solid-form solid-form-placeholder-text input { diff --git a/src/styles/layout/resources/resources.scss b/src/styles/layout/resources/resources.scss index f98edf3..5c32d38 100644 --- a/src/styles/layout/resources/resources.scss +++ b/src/styles/layout/resources/resources.scss @@ -88,19 +88,27 @@ [name="infotext"] { justify-content: flex-start; } - .event-type { - width: max-content; - padding: 5px 20px; - font-size: 1.1rem; - line-height: 1.3rem; - height: 13px; - margin: 0 20px 10px; - background-color: #C4262E; - color: white; - font-weight: 700; - text-transform: uppercase; - border-radius: 15px; - } + } + .newresource label div, + .newresource sib-form-file div label { + line-height: 2.2rem; + text-transform: uppercase; + color: var(--form-title); + font-size: 13px; + font-weight: 600; + font-family: Open sans; + } + .newresource select, + .newresource textarea, + .newresource input, + .newresource sib-multiple-select .ss-main .ss-multi-selected { + background-color: var(--form-inputs-background); + } + .newresource input[type="submit"] { + background-color: #3C3F57; + } + .newresource input[type="file"] { + background-color: transparent; } .resource-tag { font-family: Facilt; From f53fed4755599f4d008bbf49908c6951e69ffa8a Mon Sep 17 00:00:00 2001 From: Marjolaine Le Bon Date: Thu, 10 Sep 2020 00:20:49 +0200 Subject: [PATCH 28/62] update: integration pollspage - step 1 --- src/styles/layout/polls/_polls.scss | 93 +++++++++++++++++++++++++++++ 1 file changed, 93 insertions(+) diff --git a/src/styles/layout/polls/_polls.scss b/src/styles/layout/polls/_polls.scss index dd14717..620ed82 100644 --- a/src/styles/layout/polls/_polls.scss +++ b/src/styles/layout/polls/_polls.scss @@ -166,6 +166,22 @@ #pollPage { width: 85%; margin: auto; + h1, + h2 { + font-family: "RefrigeratorDelxW01Bold";; + } + h1 { + font-size: 3.2rem; + line-height: 3.8rem; + } + h2 { + font-size: 26px; + line-height: 31px; + } + .vote-debate-content .active-tab, + .vote-debate-content .border-content { + background-color: white; + } solid-display.topline { >div:first-of-type { *[name="right"] { @@ -181,6 +197,83 @@ } } } + [name="hostingOrganisation"], + [name="dateLine"] { + color: #3A3A3A; + font-family: Facit; + font-size: 16px; + font-weight: bold; + } + [name="hostingOrganisation"] { + margin-left: 0; + [name="hostingOrganisation"]::before { + content: '\e037'; + font-family: 'simple-line-icons'; + font-weight: 400; + color: #C4262E; + margin-right: 10px; + font-size: 16px; + } + } + solid-display-div [name="dateImage"]::before { + font-family: "Material Design Icons"; + font-weight: 400; + content: "\F6AF"; + color: #C4262E; + font-size: 20px; + } + [name="shortDescription"], + [name="longDescription"] { + margin: 20px 0; + color: #7A7F85; + font-family: Facit; + } + [name="shortDescription"] { + margin: 20px 0; + font-size: 18px; + line-height: 28px; + } + [name="longDescription"] { + font-size: 16px; + line-height: 26px; + } + .vote-section { + font-family: Facit; + } + .vote-tab-content h3::before { + font-family: "Material Design Icons"; + font-weight: 400; + font-size: 20px; + margin-right: 10px; + color: #3A3A3A; + } + .vote-section > h3::before { + content:"\F004"; + } + #totalVotesDisplay::before, + .share-vote h3::before { + content: "\F00E"; + } + .vote-section > h3 { + margin-top: 15px; + } + #poll-votes-values solid-display > div > solid-set-default, + [name="chosenOption"] label { + margin-top: 10px; + } + #poll-votes-values solid-display > div [name="progressBar"] { + margin-top: 5px; + } + div[name="progressBar"] > div, + div[name="progressBar"] div .progressBarValue { + margin: 0; + } + #poll-votes-form input[type="submit"] { + height: 38px; + width: 149px; + border-radius: 19px; + box-shadow: 0 0 7px 0 rgba(0,0,0,0.15); + } } } From 7a72c12b94f50dfcd8059dc765f04cc534526ea8 Mon Sep 17 00:00:00 2001 From: Marjolaine Le Bon Date: Thu, 10 Sep 2020 14:51:44 +0200 Subject: [PATCH 29/62] update: integration polls step2 --- src/styles/layout/events/events.scss | 4 ++-- src/styles/layout/polls/_polls.scss | 6 ++++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/styles/layout/events/events.scss b/src/styles/layout/events/events.scss index 10a6093..1c10531 100644 --- a/src/styles/layout/events/events.scss +++ b/src/styles/layout/events/events.scss @@ -45,8 +45,8 @@ color: #063B5C; } } - #listevents, - #circle-listevents { + #default-listevents, + #circles-listevents { .newtype .button { font-size: 1.2rem; width: max-content; diff --git a/src/styles/layout/polls/_polls.scss b/src/styles/layout/polls/_polls.scss index 620ed82..735cad2 100644 --- a/src/styles/layout/polls/_polls.scss +++ b/src/styles/layout/polls/_polls.scss @@ -164,7 +164,8 @@ } /*personnalise css on poll page*/ #pollPage { - width: 85%; + width: 90%; + max-width: 1110px; margin: auto; h1, h2 { @@ -237,7 +238,8 @@ font-size: 16px; line-height: 26px; } - .vote-section { + .vote-section, + .share-vote { font-family: Facit; } .vote-tab-content h3::before { From 1a8caf8fa687d903987aaa6fe1586af159e5beda Mon Sep 17 00:00:00 2001 From: Marjolaine Le Bon Date: Thu, 10 Sep 2020 18:06:25 +0200 Subject: [PATCH 30/62] update; polls page integration --- src/styles/layout/polls/_polls.scss | 67 +++++++++++++++++++++++------ 1 file changed, 53 insertions(+), 14 deletions(-) diff --git a/src/styles/layout/polls/_polls.scss b/src/styles/layout/polls/_polls.scss index 735cad2..1ef42e9 100644 --- a/src/styles/layout/polls/_polls.scss +++ b/src/styles/layout/polls/_polls.scss @@ -123,10 +123,11 @@ text-align: center; } } - [name="endDate"] { - position: relative; - padding-left: 140px; - &::after { + [name="dateLine"] { + display: flex; + flex-direction: row; + margin-top: 10px; + solid-display-div [name="dateImage"]::before { display: inline-block; font: normal normal normal 24px/1 "Material Design Icons"; content: "\F6AF"; @@ -134,18 +135,8 @@ height: 22px; width: 24px; font-size: 20px; - letter-spacing: 0; line-height: 22px; - display: inline-block; text-align: center; - position: absolute; - left: 0; - top: 0; - } - &::before { - position: absolute; - left: 24px; - width: max-content; } } [name="shortDescription"] { @@ -205,6 +196,13 @@ font-size: 16px; font-weight: bold; } + [name="dateLine"] solid-set-default { + display: flex; + margin-top: 7px; + solid-display-date { + margin-left: 7px; + } + } [name="hostingOrganisation"] { margin-left: 0; [name="hostingOrganisation"]::before { @@ -276,6 +274,47 @@ border-radius: 19px; box-shadow: 0 0 7px 0 rgba(0,0,0,0.15); } + #poll-votes-form input[type="submit"]:disabled { + opacity: 0.3; + } + #unavailablePoll { + font-style: italic; + } + .send-share, + .back-to-list { + background-color: #3A3A3A; + padding: 5px 25px; + font-size: 1.4rem; + &::before { + font-family: "Material Design Icons"; + font-weight: 400; + font-size: 20px; + vertical-align: middle; + color: white; + } + } + .send-share { + a { + font-size: 1.4rem; + line-height: 23px; + margin-left: 5px; + } + &::before { + content: "\F48A"; + } + } + .poll-footer { + padding: 20px 0 40px; + .back-to-list { + margin-left: 10%; + &::before { + content: "\F04D"; + } + } + .share-poll { + visibility: hidden; + } + } } } From 3a682d87b4144f9f3ff5efaae848cf3cbc884b8c Mon Sep 17 00:00:00 2001 From: Marjolaine Le Bon Date: Fri, 11 Sep 2020 14:06:01 +0200 Subject: [PATCH 31/62] update: cleaning integration --- src/images/send.png | Bin 0 -> 563 bytes src/styles/layout/events/events.scss | 6 ++- src/styles/layout/polls/_polls.scss | 52 ++++++++++++++++++++- src/styles/layout/resources/resources.scss | 7 +++ 4 files changed, 63 insertions(+), 2 deletions(-) create mode 100644 src/images/send.png diff --git a/src/images/send.png b/src/images/send.png new file mode 100644 index 0000000000000000000000000000000000000000..674f6fff6f91d1868493fbef0e2f2719a50ef8ba GIT binary patch literal 563 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjEa{HEjtmSN`?>!lvI6;x#X;^) z4C~IxyaaL-l0AZa85pY67#JE_7#My5g&JNkFq9fFFuY1&V6d9Oz#v{QXIG#NP=YPV z+ua371Hn({-St3fnfC`r>@MM%6f7Ci$jOFmaLWcmQKw~l0I~0w#^N@*E-UDB?`X}R$A6F zKXbm;fA9BtIhO0&r1vrNOW*n1Yajhp@kX$u4%eZYSNijR3z%$3&D-bU=v%Ze#Ia~! zjAO~ZD1(`2+;}cJZOiIVTA`>lgDLsI(#U;M+M@n*`ZLNn`wK>w?jxJHzuB$lLFB^RXvDF!10 zBLiInQ(Xh|5JNL7BSR|_OKk%KD+7a&$}J8k8glbfGSez?Yfx3;`2*CT0kWaEEZr(8 zu{c$?v?!AyEi)(8N?%{UB)336H!(dkIa{~H)z34tAk`vtR?04*9tKZWKbLh*2~7Z$ CO2E

div { + max-width: 1400px; + margin: auto; +} #polls, #circle-polls { h2 { @@ -239,6 +243,7 @@ .vote-section, .share-vote { font-family: Facit; + padding: 15px 25px; } .vote-tab-content h3::before { font-family: "Material Design Icons"; @@ -280,6 +285,11 @@ #unavailablePoll { font-style: italic; } + .progressBarValue { + height: 25px; + line-height: 25px; + padding-left: 5px; + } .send-share, .back-to-list { background-color: #3A3A3A; @@ -303,6 +313,46 @@ content: "\F48A"; } } + .vote-debate-content .border-content.padded { + padding: 0; + .debate-tab-content sib-conversation { + width: 100%; + .sib-conversation { + .conversation-item { + position: relative; + [name="conversation-subhead"] { + position: absolute; + top: 4px; + left: 200px; + font-size: 1.3rem; + color: #aaa; + } + [name="conversation-author"] { + font-size: 1.3rem; + } + } + .conversation-form { + border-top: 1px solid #ddd !important; + textarea { + background-color: transparent; + border: none; + font-size: 1.4rem; + } + } + input[type="submit"] { + text-indent: -999px; + width: 30px; + background: url(../images/send.png) no-repeat center; + background-size: auto; + background-size: contain; + border: none; + position: absolute; + right: 15px; + top: calc(50% - 11px); + } + } + } + } .poll-footer { padding: 20px 0 40px; .back-to-list { @@ -325,7 +375,7 @@ #add-survey { background-color: white; padding: 50px 0; - margin: -20px 0; + margin: -20px auto; h2 { font-family: "RefrigeratorDelxW01Bold"; font-size: 3.2rem; diff --git a/src/styles/layout/resources/resources.scss b/src/styles/layout/resources/resources.scss index 5c32d38..2378154 100644 --- a/src/styles/layout/resources/resources.scss +++ b/src/styles/layout/resources/resources.scss @@ -79,6 +79,7 @@ } } .resourcedetail { + background-color: transparent; [name="name"] { font-family: "RefrigeratorDelxW01Bold"; font-size: 3.2rem; @@ -88,6 +89,12 @@ [name="infotext"] { justify-content: flex-start; } + .sib-conversation { + background-color: white; + textarea { + background-color: transparent; + } + } } .newresource label div, .newresource sib-form-file div label { From a65a5301e6e505fbf09856fc72f4a1c1ed590c9f Mon Sep 17 00:00:00 2001 From: Marjolaine Le Bon Date: Fri, 11 Sep 2020 14:16:50 +0200 Subject: [PATCH 32/62] bugfix : menu element for dashboard and members --- src/styles/base/menu-left.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index 5bd7dd8..acfdba4 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -37,6 +37,8 @@ background-color: var(--color-menu-badge-background); } } + &[name="dashboard"][active] .menu-icon:before, + &[name="members"][active] .menu-icon:before, &[name="resources"][active] .menu-icon:before, &[name="polls"][active] .menu-icon:before, &[name="events"][active] .menu-icon:before { @@ -81,7 +83,9 @@ } &[name="events"], &[name="resources"], - &[name="polls"] { + &[name="polls"], + &[name="dashboard"], + &[name="members"] { .menu-label { width: 9.9em; } From 5d56589312a812f867715613b46928f72b1a7048 Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Fri, 11 Sep 2020 19:36:17 +0200 Subject: [PATCH 33/62] update: fixing the css for polls in circles as far as I can --- src/page-polls.pug | 7 ++++--- src/styles/layout/polls/_polls.scss | 10 +++++----- src/views/circle/page-circle-polls.pug | 4 ++++ 3 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/page-polls.pug b/src/page-polls.pug index 3dc687c..5e14bde 100644 --- a/src/page-polls.pug +++ b/src/page-polls.pug @@ -1,5 +1,6 @@ .views-container - solid-poll(data-src=`${endpoints.polls || (endpoints.get && endpoints.get.polls)}` - range-base-polls=`${endpoints.pollRangeBase || (endpoints.get && endpoints.get.pollRangeBase)}` - upload-dir=`${endpoints.uploads || (endpoints.get && endpoints.get.uploads)}` + solid-poll( + data-src=`${endpoints.polls || (endpoints.get && endpoints.get.polls)}` + range-base-polls=`${endpoints.pollRangeBase || (endpoints.get && endpoints.get.pollRangeBase)}` + upload-dir=`${endpoints.uploads || (endpoints.get && endpoints.get.uploads)}` ) \ No newline at end of file diff --git a/src/styles/layout/polls/_polls.scss b/src/styles/layout/polls/_polls.scss index f300770..c794ef2 100644 --- a/src/styles/layout/polls/_polls.scss +++ b/src/styles/layout/polls/_polls.scss @@ -8,7 +8,7 @@ solid-poll > div { text-transform: inherit; } /*style of poll listing*/ - #pollListing { + #default-pollListing, #circles-pollListing { margin: auto; .headline { h2 { @@ -158,7 +158,7 @@ solid-poll > div { } } /*personnalise css on poll page*/ - #pollPage { + #default-pollPage, #circles-pollPage { width: 90%; max-width: 1110px; margin: auto; @@ -368,11 +368,11 @@ solid-poll > div { } } -#polls { +#polls, #default-polls, #circles-polls { .views-container { background-color: #f0f3f6;; } - #add-survey { + #circles-add-survey, #default-add-survey { background-color: white; padding: 50px 0; margin: -20px auto; @@ -508,7 +508,7 @@ solid-poll > div { } } -#circle-polls #pollListing .all-polls solid-form solid-form-placeholder-text input { +#circle-polls #circles-pollListing .all-polls solid-form solid-form-placeholder-text input { background-color: #f0f3f6; } diff --git a/src/views/circle/page-circle-polls.pug b/src/views/circle/page-circle-polls.pug index 21fb24c..59fbe37 100644 --- a/src/views/circle/page-circle-polls.pug +++ b/src/views/circle/page-circle-polls.pug @@ -1,5 +1,9 @@ #circle-polls solid-poll( class='w700' + id-prefix='circles' bind-resources + nested-field="polls" + range-base-polls=`${endpoints.pollRangeBase || (endpoints.get && endpoints.get.pollRangeBase)}` + upload-dir=`${endpoints.uploads || (endpoints.get && endpoints.get.uploads)}` ) \ No newline at end of file From a7abbd89d24166977448953e0e346e1034357ca3 Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Wed, 23 Sep 2020 06:49:56 +0200 Subject: [PATCH 34/62] bugfix: some styling modifs --- src/styles/layout/polls/_polls.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/styles/layout/polls/_polls.scss b/src/styles/layout/polls/_polls.scss index c794ef2..241f2cd 100644 --- a/src/styles/layout/polls/_polls.scss +++ b/src/styles/layout/polls/_polls.scss @@ -273,16 +273,16 @@ solid-poll > div { div[name="progressBar"] div .progressBarValue { margin: 0; } - #poll-votes-form input[type="submit"] { + .poll-votes-form input[type="submit"] { height: 38px; width: 149px; border-radius: 19px; box-shadow: 0 0 7px 0 rgba(0,0,0,0.15); } - #poll-votes-form input[type="submit"]:disabled { + .poll-votes-form input[type="submit"]:disabled { opacity: 0.3; } - #unavailablePoll { + .unavailablePoll { font-style: italic; } .progressBarValue { From 246f85abb81f35914ba82259962caf61c8f0a3f1 Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Mon, 28 Sep 2020 00:50:58 +0200 Subject: [PATCH 35/62] update: Fixing some scss --- src/styles/components/comment.scss | 4 ++-- src/styles/layout/events/events.scss | 24 ++++++++++---------- src/styles/layout/job-offers/job-offers.scss | 2 +- src/styles/layout/polls/_polls.scss | 15 ++++++------ src/styles/layout/resources/resources.scss | 18 +++++++-------- 5 files changed, 31 insertions(+), 32 deletions(-) diff --git a/src/styles/components/comment.scss b/src/styles/components/comment.scss index 8efbc01..60add66 100644 --- a/src/styles/components/comment.scss +++ b/src/styles/components/comment.scss @@ -37,9 +37,9 @@ } } - solid-conversation.conversation { + sib-conversation.conversation { - .solid-conversation { + .sib-conversation { font-family: Open Sans; [name='conversation-wrapper'] { diff --git a/src/styles/layout/events/events.scss b/src/styles/layout/events/events.scss index 23ab28e..6ec7964 100644 --- a/src/styles/layout/events/events.scss +++ b/src/styles/layout/events/events.scss @@ -9,9 +9,9 @@ solid-event section { font-weight: 400; color: #7A7F85; solid-event { - sib-display div { + solid-display div { max-width: 1110px; - sib-display { + solid-display { margin: 0 0 20px 40px; } } @@ -30,16 +30,16 @@ solid-event section { #listevents, #circle-listevents { [name="name"], - solid-display-link-event .mdi::before { + event-display-link-event .mdi::before { color: #063B5C; } } .event-place-name, .nextevent-startdate, - solid-display-link-event { + event-display-link-event { color: #3A3A3A; } - .sib-event { + .solid-event { font-family: "Facit"; font-weight: 400; .page-title { @@ -58,8 +58,8 @@ solid-event section { padding: 5px 20px; color: #063B5C; } - sib-form { - sib-form-dropdown { + solid-form { + solid-form-dropdown { margin-left: 15px; label div { height: 2.5rem; @@ -90,12 +90,12 @@ solid-event section { width: max-content; height: max-content; } - solid-display-location-events { + event-display-location-events { padding: 5px; } } .eventdetail { - sib-display div { + solid-display div { display: block; } .mdi::before { @@ -124,12 +124,12 @@ solid-event section { font-size: 1.6rem; line-height: 2.6rem; } - solid-display-link-event a { + event-display-link-event a { font-size: 1.6rem; } } .newevent label div, - .newevent sib-form-file div label { + .newevent solid-form-file-label div label { line-height: 2.2rem; text-transform: uppercase; color: var(--form-title); @@ -165,7 +165,7 @@ solid-event section { background-color: #f0f3f6; } -#circle-events solid-event .events sib-form sib-form-dropdown select { +#circle-events solid-event .events solid-form solid-form-dropdown select { background-color: #f0f3f6; } diff --git a/src/styles/layout/job-offers/job-offers.scss b/src/styles/layout/job-offers/job-offers.scss index 80e6b89..b120517 100644 --- a/src/styles/layout/job-offers/job-offers.scss +++ b/src/styles/layout/job-offers/job-offers.scss @@ -180,7 +180,7 @@ solid-job-board { } } - .solid-conversation, + .sib-conversation, .conversation > div { display: flex; flex-direction: column-reverse; diff --git a/src/styles/layout/polls/_polls.scss b/src/styles/layout/polls/_polls.scss index 241f2cd..cb5d72a 100644 --- a/src/styles/layout/polls/_polls.scss +++ b/src/styles/layout/polls/_polls.scss @@ -80,7 +80,7 @@ solid-poll > div { box-shadow: 0px 0px 4px 1px #CACACA; *[name="body"] { /*size of tags of poll card*/ - etuc-display-votetags { + poll-display-votetags { >div { width: 64px; height: 24px; @@ -131,7 +131,7 @@ solid-poll > div { display: flex; flex-direction: row; margin-top: 10px; - solid-display-div [name="dateImage"]::before { + div [name="dateImage"]::before { display: inline-block; font: normal normal normal 24px/1 "Material Design Icons"; content: "\F6AF"; @@ -181,7 +181,7 @@ solid-poll > div { solid-display.topline { >div:first-of-type { *[name="right"] { - etuc-display-votetags { + poll-display-votetags { >div { width: 64px; height: 24px; @@ -203,7 +203,7 @@ solid-poll > div { [name="dateLine"] solid-set-default { display: flex; margin-top: 7px; - solid-display-date { + solid-display-date-div { margin-left: 7px; } } @@ -218,7 +218,7 @@ solid-poll > div { font-size: 16px; } } - solid-display-div [name="dateImage"]::before { + div [name="dateImage"]::before { font-family: "Material Design Icons"; font-weight: 400; content: "\F6AF"; @@ -275,7 +275,6 @@ solid-poll > div { } .poll-votes-form input[type="submit"] { height: 38px; - width: 149px; border-radius: 19px; box-shadow: 0 0 7px 0 rgba(0,0,0,0.15); } @@ -406,7 +405,7 @@ solid-poll > div { margin: 15px 0; padding: 0; } - label > div, solid-form-file-image > div label, solid-form-auto-completion[name="tags"] > label::before { + label > div, solid-form-file-image > div label, solid-form-dropdown-autocompletion[name="tags"] > label::before { margin-bottom: 5px; margin-top: 20px; color: var(--form-title); @@ -446,7 +445,7 @@ solid-poll > div { display: flex; width: 100%; justify-content: space-between; - custom-choix { + poll-custom-choice { width: calc(100% - 45px); solid-form-label-text[name="name"] { margin-bottom: 0; diff --git a/src/styles/layout/resources/resources.scss b/src/styles/layout/resources/resources.scss index 2378154..9510476 100644 --- a/src/styles/layout/resources/resources.scss +++ b/src/styles/layout/resources/resources.scss @@ -5,13 +5,13 @@ font-weight: 400; color: #7A7F85; solid-resource { - sib-display div { + solid-display div { max-width: 1110px; - sib-display { + solid-display { margin: 0 0 20px 40px; } } - .sib-resource { + .solid-resource { font-family: "Facit"; .page-title { font-family: "RefrigeratorDelxW01Bold"; @@ -41,7 +41,7 @@ } .resources { margin-top: -35px; - sib-form { + solid-form { &::before { content: "Research a resource"; font-family: "RefrigeratorDelxW01Bold"; @@ -63,7 +63,7 @@ padding: 10px 30px; color: #063B5C; } - sib-display sib-display { + solid-display solid-display { [name="name"] { font-family: "RefrigeratorDelxW01Bold"; color: #063B5C; @@ -97,7 +97,7 @@ } } .newresource label div, - .newresource sib-form-file div label { + .newresource solid-form-file div label { line-height: 2.2rem; text-transform: uppercase; color: var(--form-title); @@ -108,7 +108,7 @@ .newresource select, .newresource textarea, .newresource input, - .newresource sib-multiple-select .ss-main .ss-multi-selected { + .newresource solid-multiple-select .ss-main .ss-multi-selected { background-color: var(--form-inputs-background); } .newresource input[type="submit"] { @@ -124,7 +124,7 @@ } } @media (max-width: 991px) { - .sib-resource { + .solid-resource { margin-top: 65px; } } @@ -134,7 +134,7 @@ background-color: #f0f3f6; } -#circle-resources .resources sib-form sib-form-dropdown select { +#circle-resources .resources solid-form solid-form-dropdown select { background-color: #f0f3f6; } From 21122db74ffb2aa306119c9cc6940b9d50027a40 Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Mon, 28 Sep 2020 01:26:47 +0200 Subject: [PATCH 36/62] update: quick fix --- src/styles/layout/resources/resources.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/layout/resources/resources.scss b/src/styles/layout/resources/resources.scss index 9510476..1c2c0f9 100644 --- a/src/styles/layout/resources/resources.scss +++ b/src/styles/layout/resources/resources.scss @@ -33,7 +33,7 @@ position: relative; } .listresources .lnk-newkeyword { - top: 133px; + top: 115px; left: 220px; .button.thin-button.mdi { padding: 5px 20px; From 15daccde9cecfd025a8356458e94dbb32add7932 Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Mon, 28 Sep 2020 17:13:20 +0200 Subject: [PATCH 37/62] Fixing rendering of document links --- src/styles/layout/resources/resources.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/styles/layout/resources/resources.scss b/src/styles/layout/resources/resources.scss index 1c2c0f9..37fd804 100644 --- a/src/styles/layout/resources/resources.scss +++ b/src/styles/layout/resources/resources.scss @@ -68,7 +68,9 @@ font-family: "RefrigeratorDelxW01Bold"; color: #063B5C; } - [name="link"] a { + [name="link"] a, [name="document"] a { + width: 75%; + margin-bottom: 10px; padding-left: 35px; position: relative; &::before { From 5d0d53f948e87c70bfb4e6be599e4c5b18b05f72 Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Mon, 28 Sep 2020 20:19:40 +0200 Subject: [PATCH 38/62] update: fix some styling --- src/styles/layout/events/events.scss | 6 +++--- src/styles/layout/polls/_polls.scss | 7 ++++--- src/styles/layout/resources/resources.scss | 2 +- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/styles/layout/events/events.scss b/src/styles/layout/events/events.scss index 6ec7964..46a69b9 100644 --- a/src/styles/layout/events/events.scss +++ b/src/styles/layout/events/events.scss @@ -59,9 +59,9 @@ solid-event section { color: #063B5C; } solid-form { - solid-form-dropdown { + solid-form-dropdown-label { margin-left: 15px; - label div { + label { height: 2.5rem; } &::before { @@ -165,7 +165,7 @@ solid-event section { background-color: #f0f3f6; } -#circle-events solid-event .events solid-form solid-form-dropdown select { +#circle-events solid-event .events solid-form solid-form-dropdown-label select { background-color: #f0f3f6; } diff --git a/src/styles/layout/polls/_polls.scss b/src/styles/layout/polls/_polls.scss index cb5d72a..8468ad4 100644 --- a/src/styles/layout/polls/_polls.scss +++ b/src/styles/layout/polls/_polls.scss @@ -169,6 +169,7 @@ solid-poll > div { h1 { font-size: 3.2rem; line-height: 3.8rem; + margin: 20px auto; } h2 { font-size: 26px; @@ -200,10 +201,10 @@ solid-poll > div { font-size: 16px; font-weight: bold; } - [name="dateLine"] solid-set-default { + [name="dateLine"] solid-set-default { display: flex; margin-top: 7px; - solid-display-date-div { + solid-display-value, solid-display-date-value { margin-left: 7px; } } @@ -211,7 +212,7 @@ solid-poll > div { margin-left: 0; [name="hostingOrganisation"]::before { content: '\e037'; - font-family: 'simple-line-icons'; + font-family: "simple-line-icons"; font-weight: 400; color: #C4262E; margin-right: 10px; diff --git a/src/styles/layout/resources/resources.scss b/src/styles/layout/resources/resources.scss index 37fd804..a05d6ef 100644 --- a/src/styles/layout/resources/resources.scss +++ b/src/styles/layout/resources/resources.scss @@ -33,7 +33,7 @@ position: relative; } .listresources .lnk-newkeyword { - top: 115px; + top: 130px; left: 220px; .button.thin-button.mdi { padding: 5px 20px; From 062581ad2494b453010b0c73a12156733236d386 Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Tue, 29 Sep 2020 21:23:26 +0200 Subject: [PATCH 39/62] bugfix: fixing polls scss name --- src/styles/layout/polls/_index.scss | 2 +- .../layout/polls/{_polls.scss => polls.scss} | 26 ++++++++++++++++--- 2 files changed, 23 insertions(+), 5 deletions(-) rename src/styles/layout/polls/{_polls.scss => polls.scss} (93%) diff --git a/src/styles/layout/polls/_index.scss b/src/styles/layout/polls/_index.scss index 572a53f..381e936 100644 --- a/src/styles/layout/polls/_index.scss +++ b/src/styles/layout/polls/_index.scss @@ -1 +1 @@ -@import '_polls.scss'; \ No newline at end of file +@import 'polls.scss'; \ No newline at end of file diff --git a/src/styles/layout/polls/_polls.scss b/src/styles/layout/polls/polls.scss similarity index 93% rename from src/styles/layout/polls/_polls.scss rename to src/styles/layout/polls/polls.scss index 8468ad4..8fccbf9 100644 --- a/src/styles/layout/polls/_polls.scss +++ b/src/styles/layout/polls/polls.scss @@ -12,7 +12,7 @@ solid-poll > div { margin: auto; .headline { h2 { - margin: 0 40px; + margin: 0 20px; font-family: "RefrigeratorDelxW01Bold"; font-size: 2.4rem; line-height: 3.8rem; @@ -373,9 +373,9 @@ solid-poll > div { background-color: #f0f3f6;; } #circles-add-survey, #default-add-survey { - background-color: white; - padding: 50px 0; - margin: -20px auto; + background-color: white; + padding: 50px 0; + margin: -20px auto; h2 { font-family: "RefrigeratorDelxW01Bold"; font-size: 3.2rem; @@ -505,6 +505,24 @@ solid-poll > div { text-transform: uppercase; } } + .poll-footer { + .back-to-list { + background-color: #3A3A3A; + padding: 5px 25px; + font-size: 1.4rem; + margin-left: 10%; + border-radius: 15px; + color: white; + &::before { + font-family: "Material Design Icons"; + font-weight: 400; + font-size: 20px; + vertical-align: middle; + color: white; + content: "\F04D"; + } + } + } } } From d71bf700db093fe461be7a420b78de3f7b1c2ca5 Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Thu, 1 Oct 2020 00:13:58 +0200 Subject: [PATCH 40/62] Adding proper reference to local polls --- src/dependencies.pug | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/dependencies.pug b/src/dependencies.pug index c0ed340..0e10883 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -40,7 +40,7 @@ if endpoints.users || (endpoints.get && endpoints.get.users) if endpoints.polls || (endpoints.get && endpoints.get.polls) script(type="module" src="https://unpkg.com/@startinblox/component-poll@1.0" defer) - //- script(type="module" src="/lib/sib-event-component/sib-event.js" defer) + //- script(type="module" src="/lib/sib-polls-component/index.js" defer) script(src="/scripts/index.js" defer) From bb59dd0a668a9fad913be512ee3a0b75184b1151 Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Fri, 2 Oct 2020 11:45:54 +0200 Subject: [PATCH 41/62] Fixing dependency --- src/dependencies.pug | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/dependencies.pug b/src/dependencies.pug index 0e10883..dc0fe12 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -15,7 +15,7 @@ script(type="module" src="https://unpkg.com/@startinblox/component-notifications //- script(type="module" src="/lib/sib-notifications/index.js" defer) if (endpoints.events || (endpoints.get && endpoints.get.events)) && (endpoints.typeevents || (endpoints.get && endpoints.get.typeevents)) - script(type="module" src="https://unpkg.com/@startinblox/component-event@1.1" defer) + script(type="module" src="https://unpkg.com/@startinblox/component-event@1.2" defer) //- script(type="module" src="/lib/sib-event-component/sib-event.js" defer) if (endpoints.resources || (endpoints.get && endpoints.get.resources)) && (endpoints.resourceskeywords || (endpoints.get && endpoints.get.resourceskeywords)) && (endpoints.resourcestypes || (endpoints.get && endpoints.get.resourcestypes)) From 3861289d21b039e167084e84f3facc2bae2d8f45 Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Mon, 12 Oct 2020 19:24:26 +0200 Subject: [PATCH 42/62] bugfix: revert styles --- src/index.pug | 2 +- src/styles/base/main.scss | 1040 ++++++++++++++++++++----------------- 2 files changed, 570 insertions(+), 472 deletions(-) diff --git a/src/index.pug b/src/index.pug index dcdbd14..62d6857 100644 --- a/src/index.pug +++ b/src/index.pug @@ -90,7 +90,7 @@ html(lang="en") #admin(hidden).with-sidebar include page-admin.pug - #about(hidden).no-sidebar.with-padding + #about.no-sidebar.with-padding include page-about.pug if (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.uploads || (endpoints.post && endpoints.post.uploads)) && (endpoints.users || (endpoints.post && endpoints.post.users)) diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index c2e7b3e..07b0ab8 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -1,91 +1,102 @@ * { - outline: none; + outline: none; } :root { - font-size: 10px; - font-family: Open Sans, sans-serif; - --sib-notifications-theme: var(--color-primary); - body { - background-color: var(--color-main-background); - box-sizing: border-box; - color: var(--color-main-text); - font-size: 1.6rem; - /* Fix for viewport height bug in webkit for mobile */ - height: -webkit-fill-available; - min-height: -webkit-fill-available; - } - .notLoggedIn { - visibility: hidden; - } + font-size : 10px; + font-family : Open Sans, sans-serif; + --sib-notifications-theme: var(--color-primary); + + body { + background-color: var(--color-main-background); + box-sizing : border-box; + color : var(--color-main-text); + font-size : 1.6rem; + /* Fix for viewport height bug in webkit for mobile */ + height : -webkit-fill-available; + min-height : -webkit-fill-available; + } + + .notLoggedIn { + visibility: hidden; + } } /* Fix for solid-dashboard fixture */ solid-dashboard section { - padding: 1rem !important; - @include breakpoint(lg) { - padding: 4.2rem !important; - } - .icon { - display: inline-block; - } + padding: 1rem !important; + + @include breakpoint(lg) { + padding: 4.2rem !important; + } + + .icon { + display: inline-block; + } } .wrapper { - display: grid; - grid-template-areas: "header" "content"; - @include breakpoint(lg) { - grid-template-columns: 265px auto; - grid-template-areas: "header header" "leftmenu content"; - } + display : grid; + grid-template-areas: "header""content"; + + @include breakpoint(lg) { + grid-template-columns: 265px auto; + grid-template-areas : "header header""leftmenu content"; + } } .header { - grid-area: header; + grid-area: header; } .left-menu { - grid-area: leftmenu; + grid-area: leftmenu; + + @include breakpoint(lg) { + height : calc(100vh - 83px); + /* 83px = nav height */ + position : sticky; + top : 0; + overflow-x: hidden; + overflow-y: auto; + } + + &.jsLeftMenu { + display: none; + @include breakpoint(lg) { - height: calc(100vh - 83px); - /* 83px = nav height */ - position: sticky; - top: 0; - overflow-x: hidden; - overflow-y: auto; + display: block; } - &.jsLeftMenu { - display: none; - @include breakpoint(lg) { - display: block; - } - } - &.jsLeftMenu[open] { - display: block; - bottom: 0; - box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5); - width: 80vw; - position: fixed; - right: 0; - top: 0; - z-index: 1000; - @include breakpoint(lg) { - display: none; - } + } + + &.jsLeftMenu[open] { + display : block; + bottom : 0; + box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5); + width : 80vw; + position : fixed; + right : 0; + top : 0; + z-index : 1000; + + @include breakpoint(lg) { + display: none; } + } } .content { - grid-area: content; - @include breakpoint(lg) { - position: sticky; - top: 0; - overflow-y: auto; - height: calc(100vh - 83px); - overflow-x: hidden; - } + grid-area: content; + + @include breakpoint(lg) { + position : sticky; + top : 0; + overflow-y: auto; + height : calc(100vh - 83px); + overflow-x: hidden; + } } @@ -94,67 +105,76 @@ solid-dashboard section { nav, .views-container, .table-wrapper { - overflow: auto; - height: auto; - -webkit-overflow-scrolling: touch; - -ms-overflow-style: none; + overflow : auto; + height : auto; + -webkit-overflow-scrolling: touch; + -ms-overflow-style : none; } /* Custom scrollbar of the left-menu */ nav { - scrollbar-width: thin; - scrollbar-color: var(--color-scrollbar-left-track) var(--color-scrollbar-left-background); - &::-webkit-scrollbar-track { - background: var(--color-scrollbar-left-background); - } - &::-webkit-scrollbar-thumb { - background-color: var(--color-scrollbar-left-track); - border-radius: 6px; - border: 3px solid var(--color-scrollbar-left-background); - } - &::-webkit-scrollbar { - width: 11px; - } + scrollbar-width: thin; + scrollbar-color: var(--color-scrollbar-left-track) var(--color-scrollbar-left-background); + + &::-webkit-scrollbar-track { + background: var(--color-scrollbar-left-background); + } + + &::-webkit-scrollbar-thumb { + background-color: var(--color-scrollbar-left-track); + border-radius : 6px; + border : 3px solid var(--color-scrollbar-left-background); + } + + &::-webkit-scrollbar { + width: 11px; + } } /* Custom scrollbar of the content */ .views-container { - scrollbar-width: thin; - scrollbar-color: var(--color-scrollbar-right-track) var(--color-scrollbar-right-background); - &::-webkit-scrollbar-track { - background: var(--color-scrollbar-right-background); - } - &::-webkit-scrollbar-thumb { - background-color: var(--color-scrollbar-right-track); - border-radius: 6px; - border: 3px solid var(--color-scrollbar-right-background); - } - &::-webkit-scrollbar { - width: 11px; - } + scrollbar-width: thin; + scrollbar-color: var(--color-scrollbar-right-track) var(--color-scrollbar-right-background); + + &::-webkit-scrollbar-track { + background: var(--color-scrollbar-right-background); + } + + &::-webkit-scrollbar-thumb { + background-color: var(--color-scrollbar-right-track); + border-radius : 6px; + border : 3px solid var(--color-scrollbar-right-background); + } + + &::-webkit-scrollbar { + width: 11px; + } } /* Custom scrollbar of the table */ .table-wrapper { - scrollbar-width: thin; - scrollbar-color: var(--color-scrollbar-table-track) var(--color-scrollbar-table-background); - &::-webkit-scrollbar-track { - background-color: var(--color-scrollbar-table-background); - border-radius: 10px; - } - &::-webkit-scrollbar { - height: 5px; - } - &::-webkit-scrollbar-thumb { - background-color: var(--color-scrollbar-table-track); - border-radius: 10px; - } + scrollbar-width: thin; + scrollbar-color: var(--color-scrollbar-table-track) var(--color-scrollbar-table-background); + + &::-webkit-scrollbar-track { + background-color: var(--color-scrollbar-table-background); + border-radius : 10px; + } + + &::-webkit-scrollbar { + height: 5px; + } + + &::-webkit-scrollbar-thumb { + background-color: var(--color-scrollbar-table-track); + border-radius : 10px; + } } @@ -163,17 +183,17 @@ nav { #admin-circles, #admin-projects, #admin-users { - display: contents; + display: contents; } [hidden], .hidden { - display: none !important; + display: none !important; } img { - max-height: 100%; - max-width: 100%; + max-height: 100%; + max-width : 100%; } h1, @@ -184,92 +204,95 @@ h3, h4, h5, h6 { - font-weight: bold; - /*span { - font-weight: 400; + font-weight : bold; + /*span { + font-weight : 400; padding-left: 0.85rem; - &:before { - content: '// '; + & :before { + content : '// '; } }*/ } h1, .h1-like { - color: var(--color-h1); - font-size: 2rem; - text-transform: uppercase; - &.without-margin { - margin: 0; - } + color : var(--color-h1); + font-size : 2rem; + text-transform: uppercase; + + &.without-margin { + margin: 0; + } } h2, .h2-like { - color: var(--color-h2); - font-size: 1.8rem; - text-transform: uppercase; + color : var(--color-h2); + font-size : 1.8rem; + text-transform: uppercase; } .h2-like { - display: block; - margin: 14.94px 0; - width: 100%; + display: block; + margin : 14.94px 0; + width : 100%; } h3 { - color: var(--color-title); - font-size: 1.7rem; - margin: 0; + color : var(--color-title); + font-size: 1.7rem; + margin : 0; } h4 { - font-size: 1.2rem; + font-size: 1.2rem; } h5 { - font-size: 2rem; + font-size: 2rem; } .avatar { - align-items: center; - background-color: var(--color-avatar-background); - border-radius: 50%; - display: flex; - justify-content: center; - overflow: hidden; - position: relative; - img { - background-color: white; - height: 100%; - left: 0; - object-fit: cover; - object-position: center; - position: absolute; - top: 0; - width: 100%; - } - object { - height: 45%; - width: 45%; - } + align-items : center; + background-color: var(--color-avatar-background); + border-radius : 50%; + display : flex; + justify-content : center; + overflow : hidden; + position : relative; + + img { + background-color: white; + height : 100%; + left : 0; + object-fit : cover; + object-position : center; + position : absolute; + top : 0; + width : 100%; + } + + object { + height: 45%; + width : 45%; + } } .customer-logo { - box-sizing: border-box; - display: flex; - height: 8.5vh; - justify-content: flex-end; - margin-top: 20px; - text-align: end; - width: 15vw; + box-sizing : border-box; + display : flex; + height : 8.5vh; + justify-content: flex-end; + margin-top : 20px; + text-align : end; + width : 15vw; } .project-edit-logo { - display: flex; - height: 8.5vh; - margin-top: 20px; + display : flex; + height : 8.5vh; + margin-top : 20px; margin-bottom: 30px; form { @@ -293,31 +316,31 @@ h5 { .form-picture { form { - display: block; - text-align: center; + display : block; + text-align : center; margin-bottom: 2.6rem; - padding-top: 1.8rem; + padding-top : 1.8rem; @include breakpoint(lg) { display: flex; - width: 100%; + width : 100%; } hubl-user-avatar { - display: inline-block; - max-width: 100%; + display : inline-block; + max-width : 100%; max-height: 16.5vh; @include breakpoint(lg) { margin-left: 20px; - max-height: 8.5vh; - max-width: none; - width: calc(35vw - 20px); + max-height : 8.5vh; + max-width : none; + width : calc(35vw - 20px); } >object, >img { - display: block; + display : block; max-height: 16.5vh !important; @include breakpoint(lg) { @@ -333,11 +356,11 @@ h5 { .button-primary, .bordered; margin: 10px 0; - width: 100%; + width : 100%; @include breakpoint(lg) { margin: auto 0 auto 2.2rem; - width: auto; + width : auto; } } } @@ -372,95 +395,110 @@ h5 { } .content-box { - @include window-style-modal(); - flex-direction: column; - flex-grow: 1; - margin: 2rem 1rem 5rem 2rem; - &.full-width { - background: var(--color-white); - flex: 1; - font-size: 1.6rem; - margin: 0 auto; - min-height: 100%; - } + @include window-style-modal(); + flex-direction: column; + flex-grow : 1; + margin : 2rem 1rem 5rem 2rem; + + &.full-width { + background: var(--color-white); + flex : 1; + font-size : 1.6rem; + margin : 0 auto; + min-height: 100%; + } } /* Header inside circle, project view */ .content-box__header { - border-bottom: 1px solid var(--color-content-header); - padding: 1.8rem 0 1.4rem; - margin: 0 1.6rem; + border-bottom: 1px solid var(--color-content-header); + padding : 1.8rem 0 1.4rem; + margin : 0 1.6rem; + + @include breakpoint(lg) { + padding: 3rem; + margin : 0; + } + + .mobile-sidebar-button { + float : right; + color : var(--color-secondary); + font-size : 1.8rem; + font-weight: bold !important; + + &::before { + font-size : 2.2rem; + font-weight : normal; + margin-right: 1.2rem; + } + @include breakpoint(lg) { - padding: 3rem; - margin: 0; + display: none; } - .mobile-sidebar-button { - float: right; - color: var(--color-secondary); + } + + solid-display { + @include breakpoint(sm) { + float: left; + } + } + + /* For solid-display on project, circle, or private message view */ + solid-display { + width: calc(100% - 94px); + + /* 94px = width of .mobile-sidebar-button */ + div { + overflow : hidden; + text-overflow: ellipsis; + white-space : nowrap; + width : calc(100% - 20px); + + .h1-aside { font-size: 1.8rem; - font-weight: bold!important; - &::before { - font-size: 2.2rem; - font-weight: normal; - margin-right: 1.2rem; - } - @include breakpoint(lg) { - display: none; - } - } - solid-display { - @include breakpoint(sm) { - float: left; - } - } - /* For solid-display on project, circle, or private message view */ - solid-display { - width: calc(100% - 94px); - /* 94px = width of .mobile-sidebar-button */ - div { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: calc(100% - 20px); - .h1-aside { - font-size: 1.8rem; - &:not(:empty)::before { - color: var(--color-grey-4); - content: ' - '; - font-size: 2rem; - font-weight: bold; - } - } - .description { - color: var(--color-grey-4); - } - .name { - color: var(--color-grey-4); - font-weight: normal; - } + + &:not(:empty)::before { + color : var(--color-grey-4); + content : ' - '; + font-size : 2rem; + font-weight: bold; } + } + + .description { + color: var(--color-grey-4); + } + + .name { + color : var(--color-grey-4); + font-weight: normal; + } } + } } .content-box__height { - min-height: calc(100vh - 50px - 56px); - /* Heights of main header and sub-header */ - @include breakpoint(lg) { - min-height: calc(100vh - 83px - 84px); - } + min-height: calc(100vh - 50px - 56px); + + /* Heights of main header and sub-header */ + @include breakpoint(lg) { + min-height: calc(100vh - 83px - 84px); + } } .content-box__info { - flex-direction: column; - padding: 1rem; - @include breakpoint(lg) { - padding: 3.2rem; - } - * { - box-sizing: border-box; - } + flex-direction: column; + padding : 1rem; + + @include breakpoint(lg) { + padding: 3.2rem; + } + + * { + box-sizing: border-box; + } } @@ -488,53 +526,60 @@ h5 { }*/ .admin-header { + /* Quick fix for alignment on mobile before admin content rework */ + flex-direction: column; + align-items : flex-start; + margin-bottom : 20px; + + /*end */ + @include breakpoint(lg) { + flex-direction : row; + align-items : center; + justify-content: space-between; + margin-bottom : 5rem; + } + + h3 { /* Quick fix for alignment on mobile before admin content rework */ - flex-direction: column; - align-items: flex-start; margin-bottom: 20px; - /*end */ + + /* end */ @include breakpoint(lg) { - flex-direction: row; - align-items: center; - justify-content: space-between; - margin-bottom: 5rem; + margin-top: 0; } - h3 { - /* Quick fix for alignment on mobile before admin content rework */ - margin-bottom: 20px; - /* end */ - @include breakpoint(lg) { - margin-top: 0; - } - } - solid-ac-checker, - solid-link { - width: 100%; - @include breakpoint(lg) { - width: auto; - } + } + + solid-ac-checker, + solid-link { + width: 100%; + + @include breakpoint(lg) { + width: auto; } + } } .backlink { - @include icon('arrow-left-circle'); - color: var(--color-backlink); - font-size: 1.5rem; - margin: 2rem 0 0 2rem; - text-decoration: underline; - &::before { - font-size: 2rem; - margin-right: 1rem; - text-decoration: none; - } - &.right { - display: block; - text-align: right; - } + @include icon('arrow-left-circle'); + color : var(--color-backlink); + font-size : 1.5rem; + margin : 2rem 0 0 2rem; + text-decoration: underline; + + &::before { + font-size : 2rem; + margin-right : 1rem; + text-decoration: none; + } + + &.right { + display : block; + text-align: right; + } } .centered { - text-align: center; + text-align: center; } .block { @@ -542,44 +587,48 @@ h5 { } .flex { - display: flex; + display: flex; } .desktop-button__end { - display: block; - @include breakpoint(lg) { - display: flex; - justify-content: flex-end; - } + display: block; + + @include breakpoint(lg) { + display : flex; + justify-content: flex-end; + } } .space-between { - justify-content: space-between; - &.with-padding { - padding-bottom: 1.4rem; - } + justify-content: space-between; + + &.with-padding { + padding-bottom: 1.4rem; + } } .mobile-vertical-align { - flex-direction: column; - @include breakpoint(lg) { - flex-direction: row; - } + flex-direction: column; + + @include breakpoint(lg) { + flex-direction: row; + } } .word-spacing-left { - margin-left: 0.60rem; + margin-left: 0.60rem; } .word-spacing-right { - margin-right: 0.60rem; + margin-right: 0.60rem; } .mobile-margin__bottom { - margin-bottom: 1rem; - @include breakpoint(lg) { - margin-bottom: 0; - } + margin-bottom: 1rem; + + @include breakpoint(lg) { + margin-bottom: 0; + } } // Other base components @@ -588,6 +637,7 @@ h5 { @import 'header'; @import 'menu-left'; @import 'user-thumb'; + // Button global CSS solid-delete, solid-route, @@ -597,178 +647,226 @@ input[type='submit'], a, .button { background: none; - border: none; - cursor: pointer; - display: inline-block; - padding: 0; + border : none; + cursor : pointer; + display : inline-block; + padding : 0; + &.button { - padding: 0.55rem 2.5rem; + padding : 0.55rem 2.5rem; + border-radius: 100em; + + *, + & { + font-size: 1.4rem; + } + + &.mobile-full-width { + margin-bottom: 1rem; + padding-left : 5rem; + width : -webkit-fill-available; + width : -moz-available; + + @include breakpoint(lg) { + margin-bottom: 0; + padding-left : 2.5rem; + width : auto; + } + + &::before { + margin-left: -2.6rem; + + @include breakpoint(lg) { + margin-left: 0; + } + } + } + + &.desktop-btn-margin__left { + margin: 0; + + @include breakpoint(lg) { + margin-left: 2.2rem; + } + } + + &.small { + + *, + & { + font-size: 1rem; + } + } + + &.text-bold { + + *, + & { + font-weight: bold; + } + } + + &.text-uppercase { + + *, + & { + text-transform: uppercase; + } + } + + &.rounded { + border-radius: 50%; + font-size : 1.8rem; + padding : 1rem; + } + + &.button-link { border-radius: 100em; + + *, + & { + text-decoration: underline; + } + + &:hover { + text-decoration: none; + } + } + + &.with-icon::before { + font-size : 1.6rem; + margin-right: 1rem; + } + + &.button-primary { + background-color: var(--color-white); + + *, + & { + color: var(--color-primary); + } + + &.bordered { + border: 1px solid var(--color-primary); + } + + &:hover { + background-color: var(--color-primary); + *, & { - font-size: 1.4rem; - } - &.mobile-full-width { - margin-bottom: 1rem; - padding-left: 5rem; - width: -webkit-fill-available; - width: -moz-available; - @include breakpoint(lg) { - margin-bottom: 0; - padding-left: 2.5rem; - width: auto; - } - &::before { - margin-left: -2.6rem; - @include breakpoint(lg) { - margin-left: 0; - } - } - } - &.desktop-btn-margin__left { - margin: 0; - @include breakpoint(lg) { - margin-left: 2.2rem; - } - } - &.small { - *, - & { - font-size: 1rem; - } - } - &.text-bold { - *, - & { - font-weight: bold; - } - } - &.text-uppercase { - *, - & { - text-transform: uppercase; - } - } - &.rounded { - border-radius: 50%; - font-size: 1.8rem; - padding: 1rem; - } - &.button-link { - border-radius: 100em; - *, - & { - text-decoration: underline; - } - &:hover { - text-decoration: none; - } - } - &.with-icon::before { - font-size: 1.6rem; - margin-right: 1rem; - } - &.button-primary { - background-color: var(--color-white); - *, - & { - color: var(--color-primary); - } - &.bordered { - border: 1px solid var(--color-primary); - } - &:hover { - background-color: var(--color-primary); - *, - & { - color: var(--color-white); - } - } - } - &.button-secondary { - background-color: var(--color-white); - *, - & { - color: var(--color-secondary); - } - &.bordered { - border: 1px solid var(--color-secondary); - } - &:hover { - background-color: var(--color-secondary); - *, - & { - color: var(--color-white); - } - } - } - &.button-complementary { - color: var(--color-complementary); - background-color: var(--color-white); - &.bordered { - border: 1px solid var(--color-complementary); - } - &:hover { - background-color: var(--color-complementary); - color: var(--color-white); - } - } - &.flex { - display: flex; - } - &.reversed { - &.button-primary { - background-color: var(--color-primary); - *, - & { - color: var(--color-white); - } - &:hover { - background-color: var(--color-white); - color: var(--color-primary); - *, - & { - color: var(--color-primary); - } - &.bordered { - border: 1px solid var(--color-primary); - } - } - } - &.button-secondary { - background-color: var(--color-secondary); - *, - & { - color: var(--color-white); - } - &:hover { - background-color: var(--color-white); - *, - & { - color: var(--color-secondary); - } - &.bordered { - border: 1px solid var(--color-secondary); - } - } - } - &.button-complementary { - background-color: var(--color-complementary); - *, - & { - color: var(--color-white); - } - &:hover { - background-color: var(--color-white); - *, - & { - color: var(--color-complementary); - } - &.bordered { - border: 1px solid var(--color-complementary); - } - } - } + color: var(--color-white); } + } } + + &.button-secondary { + background-color: var(--color-white); + + *, + & { + color: var(--color-secondary); + } + + &.bordered { + border: 1px solid var(--color-secondary); + } + + &:hover { + background-color: var(--color-secondary); + + *, + & { + color: var(--color-white); + } + } + } + + &.button-complementary { + color : var(--color-complementary); + background-color: var(--color-white); + + &.bordered { + border: 1px solid var(--color-complementary); + } + + &:hover { + background-color: var(--color-complementary); + color : var(--color-white); + } + } + + &.flex { + display: flex; + } + + &.reversed { + &.button-primary { + background-color: var(--color-primary); + + *, + & { + color: var(--color-white); + } + + &:hover { + background-color: var(--color-white); + color : var(--color-primary); + + *, + & { + color: var(--color-primary); + } + + &.bordered { + border: 1px solid var(--color-primary); + } + } + } + + &.button-secondary { + background-color: var(--color-secondary); + + *, + & { + color: var(--color-white); + } + + &:hover { + background-color: var(--color-white); + + *, + & { + color: var(--color-secondary); + } + + &.bordered { + border: 1px solid var(--color-secondary); + } + } + } + + &.button-complementary { + background-color: var(--color-complementary); + + *, + & { + color: var(--color-white); + } + + &:hover { + background-color: var(--color-white); + + *, + & { + color: var(--color-complementary); + } + + &.bordered { + border: 1px solid var(--color-complementary); + } + } + } + } + } } \ No newline at end of file From 7ecc3118933b907b566c1ceff7118fed3554bd59 Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Mon, 12 Oct 2020 19:38:01 +0200 Subject: [PATCH 43/62] fix previous --- src/styles/base/main.scss | 318 +++++++++++++++++++------------------- 1 file changed, 155 insertions(+), 163 deletions(-) diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 07b0ab8..8daeb97 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -3,18 +3,18 @@ } :root { - font-size : 10px; - font-family : Open Sans, sans-serif; + font-size: 10px; + font-family: Open Sans, sans-serif; --sib-notifications-theme: var(--color-primary); body { background-color: var(--color-main-background); - box-sizing : border-box; - color : var(--color-main-text); - font-size : 1.6rem; + box-sizing: border-box; + color: var(--color-main-text); + font-size: 1.6rem; /* Fix for viewport height bug in webkit for mobile */ - height : -webkit-fill-available; - min-height : -webkit-fill-available; + height: -webkit-fill-available; + min-height: -webkit-fill-available; } .notLoggedIn { @@ -22,9 +22,7 @@ } } - /* Fix for solid-dashboard fixture */ - solid-dashboard section { padding: 1rem !important; @@ -38,12 +36,16 @@ solid-dashboard section { } .wrapper { - display : grid; - grid-template-areas: "header""content"; + display: grid; + grid-template-areas: + "header" + "content"; @include breakpoint(lg) { grid-template-columns: 265px auto; - grid-template-areas : "header header""leftmenu content"; + grid-template-areas: + "header header" + "leftmenu content"; } } @@ -55,12 +57,11 @@ solid-dashboard section { grid-area: leftmenu; @include breakpoint(lg) { - height : calc(100vh - 83px); - /* 83px = nav height */ - position : sticky; - top : 0; + height: calc(100vh - 83px); /* 83px = nav height */ + position: sticky; + top: 0; overflow-x: hidden; - overflow-y: auto; + overflow-y: scroll; } &.jsLeftMenu { @@ -72,14 +73,14 @@ solid-dashboard section { } &.jsLeftMenu[open] { - display : block; - bottom : 0; + display: block; + bottom: 0; box-shadow: 0 2px 8px 0 rgba(65, 69, 73, 0.5); - width : 80vw; - position : fixed; - right : 0; - top : 0; - z-index : 1000; + width: 80vw; + position: fixed; + right: 0; + top: 0; + z-index: 1000; @include breakpoint(lg) { display: none; @@ -91,29 +92,25 @@ solid-dashboard section { grid-area: content; @include breakpoint(lg) { - position : sticky; - top : 0; + position: sticky; + top: 0; overflow-y: auto; - height : calc(100vh - 83px); + height: calc(100vh - 83px); overflow-x: hidden; } } -/* Add scrollbar to the left and right menu, and to the content */ -nav, -.views-container, -.table-wrapper { - overflow : auto; - height : auto; +/* Add scrollbar to the left and right menu, and to the content */ +nav, .views-container, .table-wrapper { + overflow: auto; + height: auto; -webkit-overflow-scrolling: touch; - -ms-overflow-style : none; + -ms-overflow-style: none; } - /* Custom scrollbar of the left-menu */ - nav { scrollbar-width: thin; scrollbar-color: var(--color-scrollbar-left-track) var(--color-scrollbar-left-background); @@ -124,8 +121,8 @@ nav { &::-webkit-scrollbar-thumb { background-color: var(--color-scrollbar-left-track); - border-radius : 6px; - border : 3px solid var(--color-scrollbar-left-background); + border-radius: 6px; + border: 3px solid var(--color-scrollbar-left-background); } &::-webkit-scrollbar { @@ -133,9 +130,7 @@ nav { } } - /* Custom scrollbar of the content */ - .views-container { scrollbar-width: thin; scrollbar-color: var(--color-scrollbar-right-track) var(--color-scrollbar-right-background); @@ -146,8 +141,8 @@ nav { &::-webkit-scrollbar-thumb { background-color: var(--color-scrollbar-right-track); - border-radius : 6px; - border : 3px solid var(--color-scrollbar-right-background); + border-radius: 6px; + border: 3px solid var(--color-scrollbar-right-background); } &::-webkit-scrollbar { @@ -155,16 +150,14 @@ nav { } } - /* Custom scrollbar of the table */ - .table-wrapper { scrollbar-width: thin; scrollbar-color: var(--color-scrollbar-table-track) var(--color-scrollbar-table-background); &::-webkit-scrollbar-track { background-color: var(--color-scrollbar-table-background); - border-radius : 10px; + border-radius: 10px; } &::-webkit-scrollbar { @@ -173,13 +166,11 @@ nav { &::-webkit-scrollbar-thumb { background-color: var(--color-scrollbar-table-track); - border-radius : 10px; + border-radius: 10px; } } - /* Quick fix. Will be removed later */ - #admin-circles, #admin-projects, #admin-users { @@ -193,7 +184,7 @@ nav { img { max-height: 100%; - max-width : 100%; + max-width: 100%; } h1, @@ -204,21 +195,21 @@ h3, h4, h5, h6 { - font-weight : bold; + font-weight: bold; + /*span { - font-weight : 400; + font-weight: 400; padding-left: 0.85rem; - & :before { - content : '// '; + &:before { + content: '// '; } }*/ } -h1, -.h1-like { - color : var(--color-h1); - font-size : 2rem; +h1, .h1-like { + color: var(--color-h1); + font-size: 2rem; text-transform: uppercase; &.without-margin { @@ -226,23 +217,22 @@ h1, } } -h2, -.h2-like { - color : var(--color-h2); - font-size : 1.8rem; +h2, .h2-like { + color: var(--color-h2); + font-size: 1.8rem; text-transform: uppercase; } .h2-like { display: block; - margin : 14.94px 0; - width : 100%; + margin: 14.94px 0; + width: 100%; } h3 { - color : var(--color-title); + color: var(--color-title); font-size: 1.7rem; - margin : 0; + margin: 0; } h4 { @@ -254,45 +244,45 @@ h5 { } .avatar { - align-items : center; + align-items: center; background-color: var(--color-avatar-background); - border-radius : 50%; - display : flex; - justify-content : center; - overflow : hidden; - position : relative; + border-radius: 50%; + display: flex; + justify-content: center; + overflow: hidden; + position: relative; img { background-color: white; - height : 100%; - left : 0; - object-fit : cover; - object-position : center; - position : absolute; - top : 0; - width : 100%; + height: 100%; + left: 0; + object-fit: cover; + object-position: center; + position: absolute; + top: 0; + width: 100%; } object { height: 45%; - width : 45%; + width: 45%; } } .customer-logo { - box-sizing : border-box; - display : flex; - height : 8.5vh; + box-sizing: border-box; + display: flex; + height: 8.5vh; justify-content: flex-end; - margin-top : 20px; - text-align : end; - width : 15vw; + margin-top: 20px; + text-align: end; + width: 15vw; } .project-edit-logo { - display : flex; - height : 8.5vh; - margin-top : 20px; + display: flex; + height: 8.5vh; + margin-top: 20px; margin-bottom: 30px; form { @@ -316,31 +306,31 @@ h5 { .form-picture { form { - display : block; - text-align : center; + display: block; + text-align: center; margin-bottom: 2.6rem; - padding-top : 1.8rem; + padding-top: 1.8rem; @include breakpoint(lg) { display: flex; - width : 100%; + width: 100%; } hubl-user-avatar { - display : inline-block; - max-width : 100%; + display: inline-block; + max-width: 100%; max-height: 16.5vh; @include breakpoint(lg) { margin-left: 20px; - max-height : 8.5vh; - max-width : none; - width : calc(35vw - 20px); + max-height: 8.5vh; + max-width: none; + width: calc(35vw - 20px); } >object, >img { - display : block; + display: block; max-height: 16.5vh !important; @include breakpoint(lg) { @@ -356,11 +346,11 @@ h5 { .button-primary, .bordered; margin: 10px 0; - width : 100%; + width: 100%; @include breakpoint(lg) { margin: auto 0 auto 2.2rem; - width : auto; + width: auto; } } } @@ -397,40 +387,38 @@ h5 { .content-box { @include window-style-modal(); flex-direction: column; - flex-grow : 1; - margin : 2rem 1rem 5rem 2rem; + flex-grow: 1; + margin: 2rem 1rem 5rem 2rem; &.full-width { background: var(--color-white); - flex : 1; - font-size : 1.6rem; - margin : 0 auto; + flex: 1; + font-size: 1.6rem; + margin: 0 auto; min-height: 100%; } } - /* Header inside circle, project view */ - .content-box__header { border-bottom: 1px solid var(--color-content-header); - padding : 1.8rem 0 1.4rem; - margin : 0 1.6rem; + padding: 1.8rem 0 1.4rem; + margin: 0 1.6rem; @include breakpoint(lg) { - padding: 3rem; - margin : 0; + padding: 3rem; + margin: 0; } .mobile-sidebar-button { - float : right; - color : var(--color-secondary); - font-size : 1.8rem; - font-weight: bold !important; + float: right; + color: var(--color-secondary); + font-size: 1.8rem; + font-weight: bold!important; &::before { - font-size : 2.2rem; - font-weight : normal; + font-size: 2.2rem; + font-weight: normal; margin-right: 1.2rem; } @@ -447,32 +435,32 @@ h5 { /* For solid-display on project, circle, or private message view */ solid-display { - width: calc(100% - 94px); + width: calc(100% - 94px); /* 94px = width of .mobile-sidebar-button */ - /* 94px = width of .mobile-sidebar-button */ div { - overflow : hidden; + overflow: hidden; text-overflow: ellipsis; - white-space : nowrap; - width : calc(100% - 20px); - + white-space: nowrap; + width: calc(100% - 20px); + .h1-aside { font-size: 1.8rem; &:not(:empty)::before { - color : var(--color-grey-4); - content : ' - '; - font-size : 2rem; + color: var(--color-grey-4); + content: ' - '; + font-size: 2rem; font-weight: bold; } } .description { color: var(--color-grey-4); + } .name { - color : var(--color-grey-4); + color: var(--color-grey-4); font-weight: normal; } } @@ -480,9 +468,8 @@ h5 { } .content-box__height { - min-height: calc(100vh - 50px - 56px); + min-height: calc(100vh - 50px - 56px); /* Heights of main header and sub-header */ - /* Heights of main header and sub-header */ @include breakpoint(lg) { min-height: calc(100vh - 83px - 84px); } @@ -490,7 +477,7 @@ h5 { .content-box__info { flex-direction: column; - padding : 1rem; + padding: 1rem; @include breakpoint(lg) { padding: 3.2rem; @@ -501,7 +488,6 @@ h5 { } } - /*.modal { color: var(--color-white); margin: 75px; @@ -528,22 +514,22 @@ h5 { .admin-header { /* Quick fix for alignment on mobile before admin content rework */ flex-direction: column; - align-items : flex-start; - margin-bottom : 20px; - + align-items: flex-start; + margin-bottom: 20px; /*end */ + @include breakpoint(lg) { - flex-direction : row; - align-items : center; + flex-direction: row; + align-items: center; justify-content: space-between; - margin-bottom : 5rem; + margin-bottom: 5rem; } h3 { /* Quick fix for alignment on mobile before admin content rework */ margin-bottom: 20px; - /* end */ + @include breakpoint(lg) { margin-top: 0; } @@ -561,19 +547,19 @@ h5 { .backlink { @include icon('arrow-left-circle'); - color : var(--color-backlink); - font-size : 1.5rem; - margin : 2rem 0 0 2rem; + color: var(--color-backlink); + font-size: 1.5rem; + margin: 2rem 0 0 2rem; text-decoration: underline; &::before { - font-size : 2rem; - margin-right : 1rem; + font-size: 2rem; + margin-right: 1rem; text-decoration: none; } &.right { - display : block; + display: block; text-align: right; } } @@ -594,7 +580,7 @@ h5 { display: block; @include breakpoint(lg) { - display : flex; + display: flex; justify-content: flex-end; } } @@ -647,13 +633,13 @@ input[type='submit'], a, .button { background: none; - border : none; - cursor : pointer; - display : inline-block; - padding : 0; + border: none; + cursor: pointer; + display: inline-block; + padding: 0; &.button { - padding : 0.55rem 2.5rem; + padding: 0.55rem 2.5rem; border-radius: 100em; *, @@ -663,14 +649,14 @@ a, &.mobile-full-width { margin-bottom: 1rem; - padding-left : 5rem; - width : -webkit-fill-available; - width : -moz-available; + padding-left: 5rem; + width: -webkit-fill-available; + width: -moz-available; @include breakpoint(lg) { margin-bottom: 0; - padding-left : 2.5rem; - width : auto; + padding-left: 2.5rem; + width: auto; } &::before { @@ -716,8 +702,14 @@ a, &.rounded { border-radius: 50%; - font-size : 1.8rem; - padding : 1rem; + font-size: 1.8rem; + padding: 1rem; + height: 42px; + width: 42px; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; } &.button-link { @@ -734,11 +726,11 @@ a, } &.with-icon::before { - font-size : 1.6rem; + font-size: 1.6rem; margin-right: 1rem; } - &.button-primary { + &.button-primary{ background-color: var(--color-white); *, @@ -783,7 +775,7 @@ a, } &.button-complementary { - color : var(--color-complementary); + color: var(--color-complementary); background-color: var(--color-white); &.bordered { @@ -792,7 +784,7 @@ a, &:hover { background-color: var(--color-complementary); - color : var(--color-white); + color: var(--color-white); } } @@ -811,7 +803,7 @@ a, &:hover { background-color: var(--color-white); - color : var(--color-primary); + color: var(--color-primary); *, & { @@ -869,4 +861,4 @@ a, } } } -} \ No newline at end of file +} From a3a1c32257f843308bc6a57755f32767197e9328 Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Mon, 12 Oct 2020 19:44:07 +0200 Subject: [PATCH 44/62] fix previous --- src/styles/base/menu-left.scss | 552 +++++++++++++++++---------------- 1 file changed, 283 insertions(+), 269 deletions(-) diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index 274b647..e48e59e 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -1,288 +1,302 @@ #main__menu { - background-color: var(--color-menu-background); - color: var(--color-menu-text); - /*transition: flex-basis 0.5s ease-in-out;*/ - - &.open { - transform: translateX(0); - } - - .unread { - font-weight: bolder; - } - + background-color: var(--color-menu-background); + color: var(--color-menu-text); + /*transition: flex-basis 0.5s ease-in-out;*/ + + &.open { + transform: translateX(0); + } + + .unread { + font-weight: bolder; + } + solid-router { - .menu-wrapper { - &.is-closed { - .sub-menu { - display: none; - } - .menu-chevron { - transform: rotate(180deg); - } - } + .menu-wrapper { + .menu-icon.icon-arrow-up { + visibility: hidden; } - solid-link { - width: 100%; - } - .menu-wrapper { - .menu-icon.icon-arrow-up { - visibility: hidden; - } - @include breakpoint(lg) { - .menu-icon.icon-arrow-up { - visibility: visible; - } - &.is-closed { - .sub-menu { - display: none; - } - - .menu-chevron { - transform: rotate(180deg); - } - } - } - } - .unread { - font-weight: bolder; - } - .menu { - cursor: pointer; - display: flex; - flex-direction: row-reverse; - font-weight: bold; - padding: 1.2rem; - &[active] { - background-color: var(--color-menu-highlight-primary); - .menu-icon:before { - background-color: var(--color-menu-icon-background-active); - } - .menu-notification>solid-display>div:first-child { - background-color: var(--color-menu-badge-background); - } - } - &[name="dashboard"][active] .menu-icon:before, - &[name="members"][active] .menu-icon:before, - &[name="resources"][active] .menu-icon:before, - &[name="polls"][active] .menu-icon:before, - &[name="events"][active] .menu-icon:before { - background-color: transparent; - } - .menu-icon { - align-items: center; - display: flex; - justify-content: center; - flex-grow: 0; - flex-shrink: 0; - font-size: 1.7rem; - width: 3.2em; - &:before { - border-radius: 100%; - height: 1.9em; - line-height: 1.9em; - width: 1.9em; - } - } - .menu-label { - display: flex; - flex-direction: column; - flex-grow: 1; - flex-shrink: 0; - font-weight: 600; - justify-content: center; - letter-spacing: 0.017rem; - text-transform: uppercase; - width: 8em; + @include breakpoint(lg) { + .menu-icon.icon-arrow-up { + visibility: visible; + } + &.is-closed { + .sub-menu { + display: none; } + .menu-chevron { - align-items: center; - display: flex; - flex-grow: 0; - flex-shrink: 0; - justify-content: center; - width: 2em; - } - >solid-display { - display: block; - } - &[name="events"], - &[name="resources"], - &[name="polls"], - &[name="dashboard"], - &[name="members"] { - .menu-label { - width: 9.9em; - } + transform: rotate(180deg); } + } } - .sub-menu { - /* Ellipsis for project tab */ - .project-tab>div>solid-display>div:nth-child(1) { - solid-set-default[name='project'] { - flex: 3; - .project-customer, - .project-name { - box-sizing: border-box; - display: block; - width: calc(80vw - 96px); - /*96px = padding of the element + width and margin of counter */ - @include breakpoint(lg) { - width: 150px; - } - } - .project-customer, - .project-name>div { - @include breakpoint(lg) { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - } + } + + solid-link { + width: 100%; + } + + .menu { + cursor: pointer; + display: flex; + flex-direction: row-reverse; + font-weight: bold; + padding: 1.2rem; + + &[active] { + background-color: var(--color-menu-highlight-primary); + + .menu-icon:before { + background-color: var(--color-menu-icon-background-active); + } + + .menu-notification>solid-display>div:first-child { + background-color: var(--color-menu-badge-background); + } + } + + .menu-icon { + align-items: center; + display: flex; + justify-content: center; + flex-grow: 0; + flex-shrink: 0; + font-size: 1.7rem; + width: 3.2em; + + &:before { + border-radius: 100%; + height: 1.9em; + line-height: 1.9em; + width: 1.9em; + } + } + + .menu-label { + display: flex; + flex-direction: column; + flex-grow: 1; + flex-shrink: 0; + font-weight: 600; + justify-content: center; + letter-spacing: 0.017rem; + text-transform: uppercase; + width: 8em; + } + + .menu-chevron { + align-items: center; + display: flex; + flex-grow: 0; + flex-shrink: 0; + justify-content: center; + width: 2em; + } + + >solid-display { + display: block; + } + } + + .sub-menu { + + /* Ellipsis for project tab */ + + .project-tab>div>solid-display>div:nth-child(1) { + + solid-set-default[name='project'] { + flex: 3; + + .project-customer, + .project-name { + box-sizing: border-box; + display: block; + width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */ + + @include breakpoint(lg) { + width: 150px; + } } - /* Ellipsis for circle tab */ - .circle-tab>div>solid-display>div { - solid-display-div[name='name'] { - flex: 3; - >div[name='name'] { - box-sizing: border-box; - padding-left: 0.2em; - width: calc(80vw - 96px); - /*96px = padding of the element + width and margin of counter */ - @include breakpoint(lg) { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 150px; - } - } - } - } - /* Ellipsis for message tab */ - .message-tab>div>solid-display>div>solid-display-div>div { - box-sizing: border-box; - width: calc(80vw - 96px); - /*96px = padding of the element + width and margin of counter */ - @include breakpoint(lg) { - width: 150px; - } - } - solid-display.nosub>solid-form[fields="name"]>hubl-search-users>input { - margin-left: 30px!important; - margin-bottom: 10px; - width: calc(80vw - 71px); + + .project-customer, + .project-name>div { + + @include breakpoint(lg) { display: block; - background-color: var(--color-secondary); - color: var(--color-grey-6); - border: 1px solid var(--color-grey-4); - border-radius: 3px; - padding: 4px; - @include breakpoint(lg) { - margin: auto; - margin-bottom: 10px; - width: auto; - &::placeholder { - color: var(--color-grey-6); - } - } - } - solid-display.nosub>nav { - text-align: center; overflow: hidden; - display: grid; - grid-template-columns: auto 50% auto; - grid-template-areas: "left middle right"; - >* { - color: var(--color-grey-6); - } - >[data-id="prev"] { - grid-area: left; - } - >[data-id="next"] { - grid-area: right; - } - >span { - grid-area: middle; - } + text-overflow: ellipsis; + white-space: nowrap; + } } - hubl-menu-publicprivate { - display: inline-block; - text-align: center; - div { - font-family: simple-line-icons; - width: 20px; - font-size: 0.8em; - padding-top: 0.1em; - } + } + } + + /* Ellipsis for circle tab */ + + .circle-tab>div>solid-display>div { + + solid-display-div[name='name'] { + flex: 3; + + >div[name='name'] { + box-sizing: border-box; + padding-left: 0.2em; + width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */ + + @include breakpoint(lg) { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 150px; + } } - >solid-display.nosub>div>solid-display>div { + } + } + + /* Ellipsis for message tab */ + + .message-tab>div>solid-display>div>solid-display-div>div { + box-sizing: border-box; + width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */ + + @include breakpoint(lg) { + width: 150px; + } + } + + solid-display.nosub>solid-form[fields="name"]>hubl-search-users>input { + margin-left: 30px; + margin-bottom: 10px; + width: calc(80vw - 71px); + display: block; + background-color: var(--color-secondary); + color: var(--color-white); + border: 1px solid var(--color-grey-4); + border-radius: 3px; + padding: 4px; + + @include breakpoint(lg) { + margin: auto; + margin-bottom: 10px; + width: auto; + } + } + + solid-display.nosub>nav { + text-align: center; + overflow: hidden; + display: grid; + grid-template-columns: auto 50% auto; + grid-template-areas: "left middle right"; + + >* { + color: var(--color-white); + } + + >[data-id="prev"] { + grid-area: left; + } + + >[data-id="next"] { + grid-area: right; + } + + >span { + grid-area: middle; + } + } + + hubl-menu-publicprivate { + display: inline-block; + text-align: center; + + div { + font-family: simple-line-icons; + width: 20px; + font-size: 0.8em; + padding-top: 0.1em; + } + } + + >solid-display.nosub>div>solid-display>div { + padding: 1rem 1rem 1rem 3rem; + } + + solid-display>div { + + .create { + color: var(--color-white); + margin: 1rem 1rem 2.2rem 3.2rem; + } + + &>solid-display { + &:last-child>div { + margin-bottom: 2.2rem; + } + + >div { + color: var(--color-white); + cursor: pointer; + + >hubl-menu-fix-url-circle>solid-display>div, + >hubl-menu-fix-url-project>solid-display>div { padding: 1rem 1rem 1rem 3rem; + } } - solid-display>div { - .create { - color: var(--color-white); - margin: 1rem 1rem 2.2rem 3.2rem; - } - &>solid-display { - &:last-child>div { - margin-bottom: 2.2rem; - } - >div { - color: var(--color-grey-6); - cursor: pointer; - >hubl-menu-fix-url-circle>solid-display>div, - >hubl-menu-fix-url-project>solid-display>div { - padding: 1rem 1rem 1rem 3rem; - } - } - &[fields="project(customer.name, name), badge"]>div { - padding: 0; - } - } - &>solid-display[active]>div, - &>solid-display>div>hubl-menu-fix-url-circle>solid-display[active]>div, - &>solid-display>div>hubl-menu-fix-url-project>solid-display[active]>div { - background-color: var(--color-menu-highlight-primary); - color: var(--color-menu-text-active); - font-weight: bold; - } - } - &.menu-notification { - >solid-display>div>solid-display>div>hubl-menu-fix-url-circle, - >solid-display>div>solid-display>div>hubl-menu-fix-url-project { - flex: 1; - } - >solid-display>div>solid-display>div, - >solid-display>div>solid-display>div>hubl-menu-fix-url-circle>solid-display>div, - >solid-display>div>solid-display>div>hubl-menu-fix-url-project>solid-display>div { - display: flex; - justify-content: space-between; - } - hubl-counter { - height: 20px; - width: 20px; - margin-right: 1em; - div.counter:not([data-nb-unread="0"]) { - text-align: center; - display: block; - background-color: var(--sib-notifications-theme, gray); - border-radius: 50%; - font-size: 12px; - line-height: 20px; - width: 20px; - height: 20px; - padding-bottom: 0; - color: var(--color-secondary); - } - } + + &[fields="project(customer.name, name), badge"]>div { + padding: 0; } + } + + &>solid-display[active]>div, + &>solid-display>div>hubl-menu-fix-url-circle>solid-display[active]>div, + &>solid-display>div>hubl-menu-fix-url-project>solid-display[active]>div { + background-color: var(--color-menu-highlight-primary); + color: var(--color-menu-text-active); + font-weight: bold; + } } - .divider { - height: 1px; - background-color: var(--color-grey-11); - opacity: 0.2; + + &.menu-notification { + + >solid-display>div>solid-display>div>hubl-menu-fix-url-circle, + >solid-display>div>solid-display>div>hubl-menu-fix-url-project { + flex: 1; + } + + >solid-display>div>solid-display>div, + >solid-display>div>solid-display>div>hubl-menu-fix-url-circle>solid-display>div, + >solid-display>div>solid-display>div>hubl-menu-fix-url-project>solid-display>div { + display: flex; + justify-content: space-between; + } + + hubl-counter { + height: 20px; + width: 20px; + margin-right: 1em; + + div.counter:not([data-nb-unread="0"]) { + text-align: center; + display: block; + background-color: var(--sib-notifications-theme, gray); + border-radius: 50%; + font-size: 12px; + line-height: 20px; + width: 20px; + height: 20px; + padding-bottom: 0; + color: var(--color-secondary); + } + } } + } + + .divider { + height: 1px; + background-color: var(--color-grey-11); + opacity: 0.2; + } } } \ No newline at end of file From 8e2f2ee988af19ac86c6548765f671ab5c50880e Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Mon, 12 Oct 2020 19:59:33 +0200 Subject: [PATCH 45/62] fix previous --- client.sample.etuc.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client.sample.etuc.css b/client.sample.etuc.css index 17ff7f7..27651d3 100644 --- a/client.sample.etuc.css +++ b/client.sample.etuc.css @@ -42,7 +42,7 @@ --color-user-panel-list-border: #E4E8ED; /* Left menu */ - --color-menu-highlight-primary: #000c42; + --color-menu-highlight-primary: transparent; --color-menu-background: var(--color-secondary); --color-menu-text: var(--color-white); --color-menu-text-active: var(--color-secondary); From b6905aa1b342307661e2367d4a6fb7e3e0d3b3a9 Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Mon, 12 Oct 2020 20:21:04 +0200 Subject: [PATCH 46/62] Fixing stuff --- src/styles/base/menu-left.scss | 587 +++++++++++++++++---------------- 1 file changed, 301 insertions(+), 286 deletions(-) diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index 274b647..8fd64f7 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -1,288 +1,303 @@ #main__menu { - background-color: var(--color-menu-background); - color: var(--color-menu-text); - /*transition: flex-basis 0.5s ease-in-out;*/ - - &.open { - transform: translateX(0); - } - - .unread { - font-weight: bolder; - } - - solid-router { - .menu-wrapper { - &.is-closed { - .sub-menu { - display: none; - } - .menu-chevron { - transform: rotate(180deg); - } - } - } - solid-link { - width: 100%; - } - .menu-wrapper { - .menu-icon.icon-arrow-up { - visibility: hidden; - } - @include breakpoint(lg) { - .menu-icon.icon-arrow-up { - visibility: visible; - } - &.is-closed { - .sub-menu { - display: none; - } - - .menu-chevron { - transform: rotate(180deg); - } - } - } - } - .unread { - font-weight: bolder; - } - .menu { - cursor: pointer; - display: flex; - flex-direction: row-reverse; - font-weight: bold; - padding: 1.2rem; - &[active] { - background-color: var(--color-menu-highlight-primary); - .menu-icon:before { - background-color: var(--color-menu-icon-background-active); - } - .menu-notification>solid-display>div:first-child { - background-color: var(--color-menu-badge-background); - } - } - &[name="dashboard"][active] .menu-icon:before, - &[name="members"][active] .menu-icon:before, - &[name="resources"][active] .menu-icon:before, - &[name="polls"][active] .menu-icon:before, - &[name="events"][active] .menu-icon:before { - background-color: transparent; - } - .menu-icon { - align-items: center; - display: flex; - justify-content: center; - flex-grow: 0; - flex-shrink: 0; - font-size: 1.7rem; - width: 3.2em; - &:before { - border-radius: 100%; - height: 1.9em; - line-height: 1.9em; - width: 1.9em; - } - } - .menu-label { - display: flex; - flex-direction: column; - flex-grow: 1; - flex-shrink: 0; - font-weight: 600; - justify-content: center; - letter-spacing: 0.017rem; - text-transform: uppercase; - width: 8em; - } - .menu-chevron { - align-items: center; - display: flex; - flex-grow: 0; - flex-shrink: 0; - justify-content: center; - width: 2em; - } - >solid-display { - display: block; - } - &[name="events"], - &[name="resources"], - &[name="polls"], - &[name="dashboard"], - &[name="members"] { - .menu-label { - width: 9.9em; - } - } - } - .sub-menu { - /* Ellipsis for project tab */ - .project-tab>div>solid-display>div:nth-child(1) { - solid-set-default[name='project'] { - flex: 3; - .project-customer, - .project-name { - box-sizing: border-box; - display: block; - width: calc(80vw - 96px); - /*96px = padding of the element + width and margin of counter */ - @include breakpoint(lg) { - width: 150px; - } - } - .project-customer, - .project-name>div { - @include breakpoint(lg) { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - } - } - /* Ellipsis for circle tab */ - .circle-tab>div>solid-display>div { - solid-display-div[name='name'] { - flex: 3; - >div[name='name'] { - box-sizing: border-box; - padding-left: 0.2em; - width: calc(80vw - 96px); - /*96px = padding of the element + width and margin of counter */ - @include breakpoint(lg) { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 150px; - } - } - } - } - /* Ellipsis for message tab */ - .message-tab>div>solid-display>div>solid-display-div>div { - box-sizing: border-box; - width: calc(80vw - 96px); - /*96px = padding of the element + width and margin of counter */ - @include breakpoint(lg) { - width: 150px; - } - } - solid-display.nosub>solid-form[fields="name"]>hubl-search-users>input { - margin-left: 30px!important; - margin-bottom: 10px; - width: calc(80vw - 71px); - display: block; - background-color: var(--color-secondary); - color: var(--color-grey-6); - border: 1px solid var(--color-grey-4); - border-radius: 3px; - padding: 4px; - @include breakpoint(lg) { - margin: auto; - margin-bottom: 10px; - width: auto; - &::placeholder { - color: var(--color-grey-6); - } - } - } - solid-display.nosub>nav { - text-align: center; - overflow: hidden; - display: grid; - grid-template-columns: auto 50% auto; - grid-template-areas: "left middle right"; - >* { - color: var(--color-grey-6); - } - >[data-id="prev"] { - grid-area: left; - } - >[data-id="next"] { - grid-area: right; - } - >span { - grid-area: middle; - } - } - hubl-menu-publicprivate { - display: inline-block; - text-align: center; - div { - font-family: simple-line-icons; - width: 20px; - font-size: 0.8em; - padding-top: 0.1em; - } - } - >solid-display.nosub>div>solid-display>div { - padding: 1rem 1rem 1rem 3rem; - } - solid-display>div { - .create { - color: var(--color-white); - margin: 1rem 1rem 2.2rem 3.2rem; - } - &>solid-display { - &:last-child>div { - margin-bottom: 2.2rem; - } - >div { - color: var(--color-grey-6); - cursor: pointer; - >hubl-menu-fix-url-circle>solid-display>div, - >hubl-menu-fix-url-project>solid-display>div { - padding: 1rem 1rem 1rem 3rem; - } - } - &[fields="project(customer.name, name), badge"]>div { - padding: 0; - } - } - &>solid-display[active]>div, - &>solid-display>div>hubl-menu-fix-url-circle>solid-display[active]>div, - &>solid-display>div>hubl-menu-fix-url-project>solid-display[active]>div { - background-color: var(--color-menu-highlight-primary); - color: var(--color-menu-text-active); - font-weight: bold; - } - } - &.menu-notification { - >solid-display>div>solid-display>div>hubl-menu-fix-url-circle, - >solid-display>div>solid-display>div>hubl-menu-fix-url-project { - flex: 1; - } - >solid-display>div>solid-display>div, - >solid-display>div>solid-display>div>hubl-menu-fix-url-circle>solid-display>div, - >solid-display>div>solid-display>div>hubl-menu-fix-url-project>solid-display>div { - display: flex; - justify-content: space-between; - } - hubl-counter { - height: 20px; - width: 20px; - margin-right: 1em; - div.counter:not([data-nb-unread="0"]) { - text-align: center; - display: block; - background-color: var(--sib-notifications-theme, gray); - border-radius: 50%; - font-size: 12px; - line-height: 20px; - width: 20px; - height: 20px; - padding-bottom: 0; - color: var(--color-secondary); - } - } - } - } - .divider { - height: 1px; - background-color: var(--color-grey-11); - opacity: 0.2; - } + background-color: var(--color-menu-background); + color: var(--color-menu-text); + /*transition: flex-basis 0.5s ease-in-out;*/ + + &.open { + transform: translateX(0); } -} \ No newline at end of file + + .unread { + font-weight: bolder; + } + + solid-router { + .menu-wrapper { + .menu-icon.icon-arrow-up { + visibility: hidden; + } + @include breakpoint(lg) { + .menu-icon.icon-arrow-up { + visibility: visible; + } + &.is-closed { + .sub-menu { + display: none; + } + + .menu-chevron { + transform: rotate(180deg); + } + } + } + } + + solid-link { + width: 100%; + } + + .menu { + cursor: pointer; + display: flex; + flex-direction: row-reverse; + font-weight: bold; + padding: 1.2rem; + + &[active] { + background-color: var(--color-menu-highlight-primary); + + .menu-icon:before { + background-color: var(--color-menu-icon-background-active); + } + + .menu-notification>solid-display>div:first-child { + background-color: var(--color-menu-badge-background); + } + } + + .menu-icon { + align-items: center; + display: flex; + justify-content: center; + flex-grow: 0; + flex-shrink: 0; + font-size: 1.7rem; + width: 3.2em; + + &:before { + border-radius: 100%; + height: 1.9em; + line-height: 1.9em; + width: 1.9em; + } + } + + .menu-label { + display: flex; + flex-direction: column; + flex-grow: 1; + flex-shrink: 0; + font-weight: 600; + justify-content: center; + letter-spacing: 0.017rem; + text-transform: uppercase; + width: 8em; + } + + .menu-chevron { + align-items: center; + display: flex; + flex-grow: 0; + flex-shrink: 0; + justify-content: center; + width: 2em; + } + + >solid-display { + display: block; + } + } + + .sub-menu { + + /* Ellipsis for project tab */ + + .project-tab>div>solid-display>div:nth-child(1) { + + solid-set-default[name='project'] { + flex: 3; + + .project-customer, + .project-name { + box-sizing: border-box; + display: block; + width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */ + + @include breakpoint(lg) { + width: 150px; + } + } + + .project-customer, + .project-name>div { + + @include breakpoint(lg) { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + } + } + + /* Ellipsis for circle tab */ + + .circle-tab>div>solid-display>div { + + solid-display-div[name='name'] { + flex: 3; + + >div[name='name'] { + box-sizing: border-box; + padding-left: 0.2em; + width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */ + + @include breakpoint(lg) { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 150px; + } + } + } + } + + /* Ellipsis for message tab */ + + .message-tab>div>solid-display>div>solid-display-div>div { + box-sizing: border-box; + width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */ + + @include breakpoint(lg) { + width: 150px; + } + } + + solid-display.nosub>solid-form[fields="name"]>hubl-search-users>input { + margin-left: 30px; + margin-bottom: 10px; + width: calc(80vw - 71px); + display: block; + background-color: var(--color-secondary); + color: var(--color-white); + border: 1px solid var(--color-grey-4); + border-radius: 3px; + padding: 4px; + + @include breakpoint(lg) { + margin: auto; + margin-bottom: 10px; + width: auto; + } + } + + solid-display.nosub>nav { + text-align: center; + overflow: hidden; + display: grid; + grid-template-columns: auto 50% auto; + grid-template-areas: "left middle right"; + + >* { + color: var(--color-white); + } + + >[data-id="prev"] { + grid-area: left; + } + + >[data-id="next"] { + grid-area: right; + } + + >span { + grid-area: middle; + } + } + + hubl-menu-publicprivate { + display: inline-block; + text-align: center; + + div { + font-family: simple-line-icons; + width: 20px; + font-size: 0.8em; + padding-top: 0.1em; + } + } + + >solid-display.nosub>div>solid-display>div { + padding: 1rem 1rem 1rem 3rem; + } + + solid-display>div { + + .create { + color: var(--color-white); + margin: 1rem 1rem 2.2rem 3.2rem; + } + + &>solid-display { + &:last-child>div { + margin-bottom: 2.2rem; + } + + >div { + color: var(--color-white); + cursor: pointer; + + >hubl-menu-fix-url-circle>solid-display>div, + >hubl-menu-fix-url-project>solid-display>div { + padding: 1rem 1rem 1rem 3rem; + } + } + + &[fields="project(customer.name, name), badge"]>div { + padding: 0; + } + } + + &>solid-display[active]>div, + &>solid-display>div>hubl-menu-fix-url-circle>solid-display[active]>div, + &>solid-display>div>hubl-menu-fix-url-project>solid-display[active]>div { + background-color: var(--color-menu-highlight-primary); + color: var(--color-menu-text-active); + font-weight: bold; + } + } + + &.menu-notification { + + >solid-display>div>solid-display>div>hubl-menu-fix-url-circle, + >solid-display>div>solid-display>div>hubl-menu-fix-url-project { + flex: 1; + } + + >solid-display>div>solid-display>div, + >solid-display>div>solid-display>div>hubl-menu-fix-url-circle>solid-display>div, + >solid-display>div>solid-display>div>hubl-menu-fix-url-project>solid-display>div { + display: flex; + justify-content: space-between; + } + + hubl-counter { + height: 20px; + width: 20px; + margin-right: 1em; + + div.counter:not([data-nb-unread="0"]) { + text-align: center; + display: block; + background-color: var(--sib-notifications-theme, gray); + border-radius: 50%; + font-size: 12px; + line-height: 20px; + width: 20px; + height: 20px; + padding-bottom: 0; + color: var(--color-secondary); + } + } + } + } + + .divider { + height: 1px; + background-color: var(--color-grey-11); + opacity: 0.2; + } + } +} + \ No newline at end of file From bff2069cd7ca3c2b4e5fbd34fd8105b5c38c9e35 Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Mon, 12 Oct 2020 20:55:03 +0200 Subject: [PATCH 47/62] bugfix: fixing the menu spacing --- client.sample.etuc.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client.sample.etuc.scss b/client.sample.etuc.scss index e0f5a61..f4a3ed7 100644 --- a/client.sample.etuc.scss +++ b/client.sample.etuc.scss @@ -133,7 +133,7 @@ font-family: "RefrigeratorDelxW01Bold"; } #main__menu .menu { - font-size: 2rem; + font-size: 1.8rem; } #main__menu .unread { font-weight: bold; From 4ec65272a81da3c17e7c03f6409d8ef9170576c2 Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Mon, 12 Oct 2020 21:33:29 +0200 Subject: [PATCH 48/62] removing useless styles --- client.sample.etuc.css | 282 ---------------------------------------- client.sample.etuc.scss | 180 ------------------------- 2 files changed, 462 deletions(-) delete mode 100644 client.sample.etuc.css delete mode 100644 client.sample.etuc.scss diff --git a/client.sample.etuc.css b/client.sample.etuc.css deleted file mode 100644 index 27651d3..0000000 --- a/client.sample.etuc.css +++ /dev/null @@ -1,282 +0,0 @@ -:root { - --color-primary: pink; - --color-secondary: green; - --color-complementary: #6259E5; - --color-complementary-darken: #36383B; - --color-white: #FFFFFF; - - --color-black-h: 216; - --color-black-s: 4%; - --color-black-l: 22%; - - --color-main-background: var(--color-grey-13); - --color-main-text: #7A7F85; - --color-highlight-primary: var(--color-primary); - --color-user-panel: var(--color-black); - --color-bell: var(--color-secondary); - --color-avatar-background: #E4E8ED; - --color-title: #36383B; - --color-h1: var(--color-title); - --color-h2: var(--color-title); - - /* Depreciated */ - --color-tag-group-text: #9BA0A7; - --color-tag-group-border: var(--color-primary); - --color-label-dark: var(--color-grey-6); - - /* Header's elements */ - --color-header-background: var(--color-white); - --color-bell: var(--color-complementary-darken); - --color-notification-counter-number: black; - --color-notification-summary: #7A7F85; - --solid-notifications-theme: var(--color-primary); - --color-notification-item-border: #E4E8ED; - --color-notification-scrollbar-background: #EDF1FA; - --color-notification-scrollbar-track: #BDC2D7; - --color-user-panel-header-text: var(--color-complementary-darken); - --color-user-panel-header-background: var(--color-white); - --color-user-panel-header-text-open: var(--color-white); - --color-user-panel-header-background-open: var(--color-secondary); - --color-user-panel-list-background: var(--color-white); - --color-user-panel-list-text-hover: var(--color-complementary); - --color-user-panel-list-border: #E4E8ED; - - /* Left menu */ - --color-menu-highlight-primary: transparent; - --color-menu-background: var(--color-secondary); - --color-menu-text: var(--color-white); - --color-menu-text-active: var(--color-secondary); - --color-menu-background-active: var(--color-menu-highlight-primary); - --color-menu-badge-background: var(--color-menu-highlight-primary); - --color-menu-badge-text-active: var(--color-menu-highlight-primary); - --color-menu-badge-background-active: var(--color-secondary); - --color-menu-icon-background-active: var(--color-secondary); - - /* Right menu */ - --color-right-menu-background: #DAE2F3; - --color-right-menu-text: var(--color-secondary); - --color-right-menu-link-border: #BDC2D7; - --color-right-menu-active-text: var(--color-primary); - --color-right-menu-active-background: var(--color-secondary); - --color-right-menu-active-icon: var(--color-primary); - - /* Scrollbar */ - --color-scrollbar-right-background: var(--color-white); - --color-scrollbar-right-track: var(--color-grey-6); - --color-scrollbar-left-background: var(--color-secondary); - --color-scrollbar-left-track: var(--color-grey-11); - - /* Tags */ - --color-tag-admin-text: var(--color-complementary); - --color-tag-admin-border: var(--color-complementary); - - /* Form elements */ - --color-button-white: var(--color-white); - --color-button-primary: var(--color-primary); - --color-button-secondary: var(--color-complementary); - --color-button-complementary: var(--color-secondary); - - --color-input-background: #EDF1FA; - --color-input-text: var(--color-secondary); - --color-input-icon: var(--color-complementary); - --color-input-active: var(--color-complementary); - --color-fieldset: var(--color-title); - --color-fieldset-border: #DAE2F3; - --color-button-modal: var(--color-title); - --color-select-list: var(--color-secondary); - --color-select-add-button: var(--color-button-secondary); - --color-select-add-button-background: var(--color-button-white); - - --color-label-light: var(--color-grey-6); - - /* Skill */ - --color-skill-background: var(--color-primary); - --color-skill-text: var(--color-white); - - /* Icon */ - --color-icon: var(--color-primary); - - /* Table */ - --color-table-header-background: #BDC2D7; - --color-table-header-text: var(--color-white); - --color-table-border: #BDC2D7; - - /* User thumb */ - --color-user-thumb-name: #7A7F85; - - --color-backlink: var(--color-secondary); - --color-content-header: #DAE2F3; - - /* Chat */ - --color-chat-white: var(--color-white); - --color-chat-primary: var(--color-primary); - --color-chat-complementary: var(--color-complementary); - --color-chat-secondary: var(--color-secondary); - --color-chat-complementary-darken: var(--color-complementary-darken); - --color-chat-grey-1: var(--color-grey-4); - --color-chat-grey-2: var(--color-grey-6); - --color-chat-grey-3: var(--color-grey-10); - - /* Directory */ - --color-directory-grey-4: #7A7F85 !important; - --color-directory-grey-5: #F0F3F6 !important; - - --color-directory-avatar-background: #E4E8ED !important; - --color-directory-back-link: #36383B !important; - --color-directory-border: #DAE2F3 !important; - --color-directory-content-header-border: #DAE2F3 !important; - --color-directory-h1: var(--color-complementary-darken); - --color-directory-list-icon: var(--color-primary); - --color-directory-text: var(--color-directory-grey-4); - - --color-directory-send-border: var(--color-complementary) !important; - --color-directory-list-icon: var(--color-primary) !important; - --color-directory-counter-background: var(--color-directory-grey-5) !important; - --color-directory-counter-border: #9BA0A7 !important; - --color-directory-counter-text: #4A4A4A !important; - - --color-directory-paginate: #36383B !important; - --color-directory-paginate-disabled: #9BA0A7 !important; - - --color-directory-form-input: #EDF1FA !important; - --color-directory-form-input-text: var(--color-directory-grey-4) !important; - --color-directory-form-input-active: var(--color-complementary) !important; - --color-directory-form-select-icon: var(--color-complementary) !important; -} - -/* Text color for the beta label */ - -#header>div.header-left>span.beta-tag { - color: var(--color-complementary); -} - -/* Button to edit a channel or a project (in project-profile) */ -#project solid-link[next="project-edit"], -#circle solid-link[next="circle-edit"] { - background: var(--color-complementary); - border: 1px solid var(--color-complementary); -} - -#project solid-link[next="project-edit"]:hover, -#circle solid-link[next="circle-edit"]:hover { - background: var(--color-white); - border: 1px solid var(--color-complementary); - color: var(--color-complementary); -} - -/* Button to delete a channel */ -/* box-button is depreciated */ -#circle-profile>div>div.desktop-button__end>solid-ac-checker>solid-delete, -#circle-profile>div>div.box-button>solid-ac-checker>solid-delete { - background: var(--color-white); - border: 1px solid var(--color-complementary); - color: var(--color-complementary); -} - -#circle-profile>div>div.desktop-button__end>solid-ac-checker>solid-delete>button, -#circle-profile>div>div.box-button>solid-ac-checker>solid-delete>button { - color: var(--color-complementary); -} - -#circle-profile>div>div.desktop-button__end>solid-ac-checker>solid-delete:hover, -#circle-profile>div>div.box-button>solid-ac-checker>solid-delete:hover { - background: var(--color-complementary); - border: 1px solid var(--color-complementary); - color: var(--color-white); -} - -#circle-profile>div>div.desktop-button__end>solid-ac-checker>solid-delete:hover>button, -#circle-profile>div>div.box-button>solid-ac-checker>solid-delete:hover>button { - color: var(--color-white); -} - -/* Button with a pen to edit a user */ -#admin-users-list>div>div.table>solid-display>div>solid-display>div>solid-action-hd-custom>solid-ac-checker>solid-link { - background: var(--color-complementary); - border: 1px solid var(--color-complementary); - color: var(--color-white); -} - -#admin-users-list>div>div.table>solid-display>div>solid-display>div>solid-action-hd-custom>solid-ac-checker>solid-link:hover { - background: var(--color-white); - border: 1px solid var(--color-complementary); - color: var(--color-complementary); -} - -/* Button to join a channel */ -#admin-circle-list>div>div.table>solid-display:nth-child(5)>div>solid-display>div>admin-circle-join-button>solid-form { - background: var(--color-complementary); - border: 1px solid var(--color-complementary); - color: var(--color-white); -} - -#admin-circle-list>div>div.table>solid-display:nth-child(5)>div>solid-display>div>admin-circle-join-button>solid-form:hover { - background: var(--color-white); - border: 1px solid var(--color-complementary); - color: var(--color-complementary); -} - -#admin-circle-list>div>div.table>solid-display:nth-child(5)>div>solid-display>div>admin-circle-join-button>solid-form:hover input { - color: var(--color-complementary); -} - - -/* Directory - my profile*/ - -/* Colors for buttons to send a message to a member and to update or remove your profile picture */ -#member-profile>div.profile-card>div.user-profile>div>solid-display>div>solid-action.button.button-primary.bordered, -button#solid-picture-browse.button.button-primary, -button#solid-picture-remove.button.button-primary { - border: 1px solid var(--color-directory-complementary) !important; -} - -#member-profile solid-action.button.button-primary>solid-link, -button#solid-picture-browse.button.button-primary, -button#solid-picture-remove.button.button-primary { - color: var(--color-directory-complementary) !important; -} - -#member-profile>div.profile-card>div.user-profile>div>solid-display>div>solid-action.button.button-primary.bordered>solid-link::before { - background-color: var(--color-directory-complementary) !important; -} - -/* Hover */ -#member-profile solid-action.button.button-primary:hover, -#member-profile solid-action.button.button-primary:hover>solid-link, -button#solid-picture-browse.button.button-primary:hover, -button#solid-picture-remove.button.button-primary:hover { - color: var(--color-directory-white) !important; - background-color: var(--color-directory-complementary) !important; -} - -#member-profile>div.profile-card>div.user-profile>div>solid-display>div>solid-action.button.button-primary.bordered:hover>solid-link::before { - background-color: var(--color-directory-white) !important; -} - -#members-list .send-display solid-link::before { - background-color: var(--color-directory-complementary)!important; -} - -/* Dashboard */ -.dashboard-card>div>div>p { - color: var(--color-complementary) !important; -} - -.dashboard-card .svg-color-secondary { - fill: var(--color-complementary) !important; -} - -.dashboard-card i { - border-color: var(--color-primary) !important; - color: var(--color-complementary) !important; -} - -.dashboard-card sib-link, .dashboard-card solid-link { - border-color: var(--color-complementary) !important; - color: var(--color-complementary) !important; -} - -.dashboard-card sib-link:hover, .dashboard-card solid-link:hover { - background-color: var(--color-complementary) !important; - color: #fff !important; -} diff --git a/client.sample.etuc.scss b/client.sample.etuc.scss deleted file mode 100644 index f4a3ed7..0000000 --- a/client.sample.etuc.scss +++ /dev/null @@ -1,180 +0,0 @@ -:root { - --color-primary: #063B5C; - --color-secondary: #3A3A3A; - --color-complementary: #C4262E; - --color-complementary-darken: #36383B; - --color-white: #FFFFFF; - - --color-black-h: 216; - --color-black-s: 4%; - --color-black-l: 22%; - - --color-main-background: var(--color-grey-13); - --color-main-text: #7A7F85; - --color-highlight-primary: var(--color-primary); - --color-user-panel: var(--color-black); - --color-bell: var(--color-secondary); - --color-avatar-background: #E4E8ED; - --color-title: #36383B; - --color-h1: var(--color-title); - --color-h2: var(--color-title); - - /* Depreciated */ - --color-tag-group-text: #9BA0A7; - --color-tag-group-border: var(--color-primary); - --color-label-dark: var(--color-grey-6); - - /* Header's elements */ - --color-header-background: var(--color-white); - --color-bell: var(--color-complementary-darken); - --color-user-panel-header-text: var(--color-complementary-darken); - --color-user-panel-header-background: var(--color-white); - --color-user-panel-header-text-open: var(--color-white); - --color-user-panel-header-background-open: var(--color-secondary); - --color-user-panel-list-background: var(--color-white); - --color-user-panel-list-text-hover: var(--color-complementary); - --color-user-panel-list-border: #E4E8ED; - - /* Left menu */ - --color-menu-highlight-primary:var(--color-white); - --color-menu-background: var(--color-secondary); - --color-menu-text: var(--color-white); - --color-menu-text-active: var(--color-complementary); - --color-menu-background-active: var(--color-menu-highlight-primary); - --color-menu-badge-background: var(--color-menu-highlight-primary); - --color-menu-badge-text-active: var(--color-menu-highlight-primary); - --color-menu-badge-background-active: var(--color-secondary); - --color-menu-icon-background-active: var(--color-secondary); - - /* Right menu */ - --color-right-menu-background: #e8e8e8; - --color-right-menu-text: #3c3F57; - --color-right-menu-link-border: #BDC2D7; - --color-right-menu-active-text: var(--color-white); - --color-right-menu-active-background: var(--color-complementary); - --color-right-menu-active-icon: var(--color-primary); - - /* Scrollbar */ - --color-scrollbar-right-background: var(--color-white); - --color-scrollbar-right-track: var(--color-grey-6); - --color-scrollbar-left-background: var(--color-secondary); - --color-scrollbar-left-track: var(--color-grey-11); - - /* Tags */ - --color-tag-admin-text: var(--color-complementary); - --color-tag-admin-border: var(--color-complementary); - - /* Form elements */ - --color-button-white: var(--color-white); - --color-button-primary: var(--color-primary); - --color-button-secondary: var(--color-complementary); - --color-button-complementary: var(--color-secondary); - - --color-input-background: #EDF1FA; - --color-input-text: var(--color-secondary); - --color-input-icon: var(--color-complementary); - --color-input-active: var(--color-complementary); - --color-fieldset: var(--color-title); - --color-fieldset-border: #DAE2F3; - --color-button-modal: var(--color-title); - --color-select-list: var(--color-secondary); - --color-select-add-button: var(--color-button-secondary); - --color-select-add-button-background: var(--color-button-white); - - --color-label-light: var(--color-grey-6); - - /* Skill */ - --color-skill-background: var(--color-primary); - --color-skill-text: var(--color-white); - - /* Icon */ - --color-icon: var(--color-primary); - - /* Table */ - --color-table-header-background: #BDC2D7; - --color-table-header-text: var(--color-white); - --color-table-border: #BDC2D7; - - /* User thumb */ - --color-user-thumb-name: #7A7F85; - - --color-backlink: var(--color-secondary); - --color-content-header: #DAE2F3; - - /* Chat */ - --color-chat-white: var(--color-white); - --color-chat-primary: var(--color-primary); - --color-chat-complementary: var(--color-complementary); - --color-chat-secondary: var(--color-secondary); - --color-chat-complementary-darken: var(--color-complementary-darken); - --color-chat-grey-1: var(--color-grey-4); - --color-chat-grey-2: var(--color-grey-6); - --color-chat-grey-3: var(--color-grey-10); - - /* Directory */ - --color-directory-grey-4: #7A7F85; - --color-directory-grey-5: #F0F3F6; - - --color-directory-avatar-background: #E4E8ED; - --color-directory-back-link: #36383B; - --color-directory-border: #DAE2F3; - --color-directory-content-header-border: #DAE2F3; - --color-directory-h1: var(--color-complementary-darken); - --color-directory-list-icon: var(--color-primary); - --color-directory-text: var(--color-directory-grey-4); - - --color-directory-form-input: #EDF1FA; - --color-directory-form-input-text: var(--color-directory-grey-4); - --color-directory-form-input-active: var(--color-complementary); - --color-directory-form-select-icon: var(--color-complementary); -} - -#main__menu { - font-family: "RefrigeratorDelxW01Bold"; -} -#main__menu .menu { - font-size: 1.8rem; -} -#main__menu .unread { - font-weight: bold; -} -#main__menu .menu[active=""] { - color: var(--color-complementary); -} -#main__menu .sub-menu.menu-notification { - font-family: Facit; -} -#main__menu solid-router sib-route.menu, #main__menu sib-router sib-route.menu { - padding: 1.2rem 0; -} -#viewport .content-box { - font-family: Facit; -} -#viewport #circle .content-box__header solid-display div { - text-align: center; -} -#viewport #circle .content-box__header .h1-like { - font-family: "RefrigeratorDelxW01Bold"; - font-size: 3.2rem; - color: var(--color-primary); -} -#viewport #circle .content-box__header solid-display div .h1-aside { - - margin: 10px 0; -} -#viewport .with-sidebar nav > solid-router { - color: #3C3F57; -} -#viewport .with-sidebar nav > solid-router > ul > sib-route[active] { - background-color: var(--color-right-menu-active-background); - color: var(--color-right-menu-active-text); - display: inline-block; -} -@media (min-width: 992px) { - .content-box__height { - min-height: calc(100vh - 83px - 98px); - } - #viewport .chat-view { - height: calc(100vh - 84px - 98px); - } -} \ No newline at end of file From fbb6b1ddfe50d1d8405057262bdd3c5647927047 Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Mon, 12 Oct 2020 21:37:56 +0200 Subject: [PATCH 49/62] Removing useless import --- src/styles/index.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/styles/index.scss b/src/styles/index.scss index 9d456c1..72fdbba 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -26,4 +26,3 @@ @import 'layout/dashboard/index'; @import 'layout/polls/index'; } -@import '../../client.sample.etuc.scss'; From 33e95d0bb181c7de6757c7d0a4cc1d0929df87ff Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Mon, 12 Oct 2020 21:44:06 +0200 Subject: [PATCH 50/62] bugfix: fix indent --- src/styles/base/menu-left.scss | 579 ++++++++++++++++----------------- 1 file changed, 289 insertions(+), 290 deletions(-) diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index 8fd64f7..2621de1 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -1,303 +1,302 @@ #main__menu { - background-color: var(--color-menu-background); - color: var(--color-menu-text); - /*transition: flex-basis 0.5s ease-in-out;*/ + background-color: var(--color-menu-background); + color: var(--color-menu-text); + /*transition: flex-basis 0.5s ease-in-out;*/ - &.open { - transform: translateX(0); - } + &.open { + transform: translateX(0); + } - .unread { - font-weight: bolder; - } + .unread { + font-weight: bolder; + } - solid-router { - .menu-wrapper { + solid-router { + .menu-wrapper { + .menu-icon.icon-arrow-up { + visibility: hidden; + } + @include breakpoint(lg) { .menu-icon.icon-arrow-up { - visibility: hidden; + visibility: visible; } - @include breakpoint(lg) { - .menu-icon.icon-arrow-up { - visibility: visible; + &.is-closed { + .sub-menu { + display: none; } - &.is-closed { - .sub-menu { - display: none; - } - - .menu-chevron { - transform: rotate(180deg); - } - } - } - } - - solid-link { - width: 100%; - } - - .menu { - cursor: pointer; - display: flex; - flex-direction: row-reverse; - font-weight: bold; - padding: 1.2rem; - - &[active] { - background-color: var(--color-menu-highlight-primary); - - .menu-icon:before { - background-color: var(--color-menu-icon-background-active); - } - - .menu-notification>solid-display>div:first-child { - background-color: var(--color-menu-badge-background); - } - } - - .menu-icon { - align-items: center; - display: flex; - justify-content: center; - flex-grow: 0; - flex-shrink: 0; - font-size: 1.7rem; - width: 3.2em; - - &:before { - border-radius: 100%; - height: 1.9em; - line-height: 1.9em; - width: 1.9em; - } - } - - .menu-label { - display: flex; - flex-direction: column; - flex-grow: 1; - flex-shrink: 0; - font-weight: 600; - justify-content: center; - letter-spacing: 0.017rem; - text-transform: uppercase; - width: 8em; - } - - .menu-chevron { - align-items: center; - display: flex; - flex-grow: 0; - flex-shrink: 0; - justify-content: center; - width: 2em; - } - - >solid-display { - display: block; - } - } - - .sub-menu { - - /* Ellipsis for project tab */ - - .project-tab>div>solid-display>div:nth-child(1) { - - solid-set-default[name='project'] { - flex: 3; - - .project-customer, - .project-name { - box-sizing: border-box; - display: block; - width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */ - - @include breakpoint(lg) { - width: 150px; - } - } - - .project-customer, - .project-name>div { - - @include breakpoint(lg) { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - } - } - - /* Ellipsis for circle tab */ - - .circle-tab>div>solid-display>div { - - solid-display-div[name='name'] { - flex: 3; - - >div[name='name'] { - box-sizing: border-box; - padding-left: 0.2em; - width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */ - - @include breakpoint(lg) { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 150px; - } - } - } - } - - /* Ellipsis for message tab */ - - .message-tab>div>solid-display>div>solid-display-div>div { - box-sizing: border-box; - width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */ - @include breakpoint(lg) { - width: 150px; + .menu-chevron { + transform: rotate(180deg); } } - - solid-display.nosub>solid-form[fields="name"]>hubl-search-users>input { - margin-left: 30px; - margin-bottom: 10px; - width: calc(80vw - 71px); - display: block; - background-color: var(--color-secondary); - color: var(--color-white); - border: 1px solid var(--color-grey-4); - border-radius: 3px; - padding: 4px; - - @include breakpoint(lg) { - margin: auto; - margin-bottom: 10px; - width: auto; - } - } - - solid-display.nosub>nav { - text-align: center; - overflow: hidden; - display: grid; - grid-template-columns: auto 50% auto; - grid-template-areas: "left middle right"; - - >* { - color: var(--color-white); - } - - >[data-id="prev"] { - grid-area: left; - } - - >[data-id="next"] { - grid-area: right; - } - - >span { - grid-area: middle; - } - } - - hubl-menu-publicprivate { - display: inline-block; - text-align: center; - - div { - font-family: simple-line-icons; - width: 20px; - font-size: 0.8em; - padding-top: 0.1em; - } - } - - >solid-display.nosub>div>solid-display>div { - padding: 1rem 1rem 1rem 3rem; - } - - solid-display>div { - - .create { - color: var(--color-white); - margin: 1rem 1rem 2.2rem 3.2rem; - } - - &>solid-display { - &:last-child>div { - margin-bottom: 2.2rem; - } - - >div { - color: var(--color-white); - cursor: pointer; - - >hubl-menu-fix-url-circle>solid-display>div, - >hubl-menu-fix-url-project>solid-display>div { - padding: 1rem 1rem 1rem 3rem; - } - } - - &[fields="project(customer.name, name), badge"]>div { - padding: 0; - } - } - - &>solid-display[active]>div, - &>solid-display>div>hubl-menu-fix-url-circle>solid-display[active]>div, - &>solid-display>div>hubl-menu-fix-url-project>solid-display[active]>div { - background-color: var(--color-menu-highlight-primary); - color: var(--color-menu-text-active); - font-weight: bold; - } - } - - &.menu-notification { - - >solid-display>div>solid-display>div>hubl-menu-fix-url-circle, - >solid-display>div>solid-display>div>hubl-menu-fix-url-project { - flex: 1; - } - - >solid-display>div>solid-display>div, - >solid-display>div>solid-display>div>hubl-menu-fix-url-circle>solid-display>div, - >solid-display>div>solid-display>div>hubl-menu-fix-url-project>solid-display>div { - display: flex; - justify-content: space-between; - } - - hubl-counter { - height: 20px; - width: 20px; - margin-right: 1em; - - div.counter:not([data-nb-unread="0"]) { - text-align: center; - display: block; - background-color: var(--sib-notifications-theme, gray); - border-radius: 50%; - font-size: 12px; - line-height: 20px; - width: 20px; - height: 20px; - padding-bottom: 0; - color: var(--color-secondary); - } - } - } - } - - .divider { - height: 1px; - background-color: var(--color-grey-11); - opacity: 0.2; } } + + solid-link { + width: 100%; + } + + .menu { + cursor: pointer; + display: flex; + flex-direction: row-reverse; + font-weight: bold; + padding: 1.2rem; + + &[active] { + background-color: var(--color-menu-highlight-primary); + + .menu-icon:before { + background-color: var(--color-menu-icon-background-active); + } + + .menu-notification>solid-display>div:first-child { + background-color: var(--color-menu-badge-background); + } + } + + .menu-icon { + align-items: center; + display: flex; + justify-content: center; + flex-grow: 0; + flex-shrink: 0; + font-size: 1.7rem; + width: 3.2em; + + &:before { + border-radius: 100%; + height: 1.9em; + line-height: 1.9em; + width: 1.9em; + } + } + + .menu-label { + display: flex; + flex-direction: column; + flex-grow: 1; + flex-shrink: 0; + font-weight: 600; + justify-content: center; + letter-spacing: 0.017rem; + text-transform: uppercase; + width: 8em; + } + + .menu-chevron { + align-items: center; + display: flex; + flex-grow: 0; + flex-shrink: 0; + justify-content: center; + width: 2em; + } + + >solid-display { + display: block; + } + } + + .sub-menu { + + /* Ellipsis for project tab */ + + .project-tab>div>solid-display>div:nth-child(1) { + + solid-set-default[name='project'] { + flex: 3; + + .project-customer, + .project-name { + box-sizing: border-box; + display: block; + width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */ + + @include breakpoint(lg) { + width: 150px; + } + } + + .project-customer, + .project-name>div { + + @include breakpoint(lg) { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + } + } + + /* Ellipsis for circle tab */ + + .circle-tab>div>solid-display>div { + + solid-display-div[name='name'] { + flex: 3; + + >div[name='name'] { + box-sizing: border-box; + padding-left: 0.2em; + width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */ + + @include breakpoint(lg) { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 150px; + } + } + } + } + + /* Ellipsis for message tab */ + + .message-tab>div>solid-display>div>solid-display-div>div { + box-sizing: border-box; + width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */ + + @include breakpoint(lg) { + width: 150px; + } + } + + solid-display.nosub>solid-form[fields="name"]>hubl-search-users>input { + margin-left: 30px; + margin-bottom: 10px; + width: calc(80vw - 71px); + display: block; + background-color: var(--color-secondary); + color: var(--color-white); + border: 1px solid var(--color-grey-4); + border-radius: 3px; + padding: 4px; + + @include breakpoint(lg) { + margin: auto; + margin-bottom: 10px; + width: auto; + } + } + + solid-display.nosub>nav { + text-align: center; + overflow: hidden; + display: grid; + grid-template-columns: auto 50% auto; + grid-template-areas: "left middle right"; + + >* { + color: var(--color-white); + } + + >[data-id="prev"] { + grid-area: left; + } + + >[data-id="next"] { + grid-area: right; + } + + >span { + grid-area: middle; + } + } + + hubl-menu-publicprivate { + display: inline-block; + text-align: center; + + div { + font-family: simple-line-icons; + width: 20px; + font-size: 0.8em; + padding-top: 0.1em; + } + } + + >solid-display.nosub>div>solid-display>div { + padding: 1rem 1rem 1rem 3rem; + } + + solid-display>div { + + .create { + color: var(--color-white); + margin: 1rem 1rem 2.2rem 3.2rem; + } + + &>solid-display { + &:last-child>div { + margin-bottom: 2.2rem; + } + + >div { + color: var(--color-white); + cursor: pointer; + + >hubl-menu-fix-url-circle>solid-display>div, + >hubl-menu-fix-url-project>solid-display>div { + padding: 1rem 1rem 1rem 3rem; + } + } + + &[fields="project(customer.name, name), badge"]>div { + padding: 0; + } + } + + &>solid-display[active]>div, + &>solid-display>div>hubl-menu-fix-url-circle>solid-display[active]>div, + &>solid-display>div>hubl-menu-fix-url-project>solid-display[active]>div { + background-color: var(--color-menu-highlight-primary); + color: var(--color-menu-text-active); + font-weight: bold; + } + } + + &.menu-notification { + + >solid-display>div>solid-display>div>hubl-menu-fix-url-circle, + >solid-display>div>solid-display>div>hubl-menu-fix-url-project { + flex: 1; + } + + >solid-display>div>solid-display>div, + >solid-display>div>solid-display>div>hubl-menu-fix-url-circle>solid-display>div, + >solid-display>div>solid-display>div>hubl-menu-fix-url-project>solid-display>div { + display: flex; + justify-content: space-between; + } + + hubl-counter { + height: 20px; + width: 20px; + margin-right: 1em; + + div.counter:not([data-nb-unread="0"]) { + text-align: center; + display: block; + background-color: var(--sib-notifications-theme, gray); + border-radius: 50%; + font-size: 12px; + line-height: 20px; + width: 20px; + height: 20px; + padding-bottom: 0; + color: var(--color-secondary); + } + } + } + } + + .divider { + height: 1px; + background-color: var(--color-grey-11); + opacity: 0.2; + } + } } - \ No newline at end of file From fe26572716a3c250d01f09c5e0e56e0820e01720 Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Mon, 12 Oct 2020 22:22:39 +0200 Subject: [PATCH 51/62] Putting back the deleted file --- client.sample.happy-dev.css | 282 ++++++++++++++++++++++++++++++++++++ 1 file changed, 282 insertions(+) create mode 100644 client.sample.happy-dev.css diff --git a/client.sample.happy-dev.css b/client.sample.happy-dev.css new file mode 100644 index 0000000..bcb1d5c --- /dev/null +++ b/client.sample.happy-dev.css @@ -0,0 +1,282 @@ +:root { + --color-primary: #FFB700; + --color-secondary: #3C3F57; + --color-complementary: #6259E5; + --color-complementary-darken: #36383B; + --color-white: #FFFFFF; + + --color-black-h: 216; + --color-black-s: 4%; + --color-black-l: 22%; + + --color-main-background: var(--color-grey-13); + --color-main-text: #7A7F85; + --color-highlight-primary: var(--color-primary); + --color-user-panel: var(--color-black); + --color-bell: var(--color-secondary); + --color-avatar-background: #E4E8ED; + --color-title: #36383B; + --color-h1: var(--color-title); + --color-h2: var(--color-title); + + /* Depreciated */ + --color-tag-group-text: #9BA0A7; + --color-tag-group-border: var(--color-primary); + --color-label-dark: var(--color-grey-6); + + /* Header's elements */ + --color-header-background: var(--color-white); + --color-bell: var(--color-complementary-darken); + --color-notification-counter-number: black; + --color-notification-summary: #7A7F85; + --solid-notifications-theme: var(--color-primary); + --color-notification-item-border: #E4E8ED; + --color-notification-scrollbar-background: #EDF1FA; + --color-notification-scrollbar-track: #BDC2D7; + --color-user-panel-header-text: var(--color-complementary-darken); + --color-user-panel-header-background: var(--color-white); + --color-user-panel-header-text-open: var(--color-white); + --color-user-panel-header-background-open: var(--color-secondary); + --color-user-panel-list-background: var(--color-white); + --color-user-panel-list-text-hover: var(--color-complementary); + --color-user-panel-list-border: #E4E8ED; + + /* Left menu */ + --color-menu-highlight-primary: #FFD759; + --color-menu-background: var(--color-secondary); + --color-menu-text: var(--color-white); + --color-menu-text-active: var(--color-secondary); + --color-menu-background-active: var(--color-menu-highlight-primary); + --color-menu-badge-background: var(--color-menu-highlight-primary); + --color-menu-badge-text-active: var(--color-menu-highlight-primary); + --color-menu-badge-background-active: var(--color-secondary); + --color-menu-icon-background-active: var(--color-secondary); + + /* Right menu */ + --color-right-menu-background: #DAE2F3; + --color-right-menu-text: var(--color-secondary); + --color-right-menu-link-border: #BDC2D7; + --color-right-menu-active-text: var(--color-primary); + --color-right-menu-active-background: var(--color-secondary); + --color-right-menu-active-icon: var(--color-primary); + + /* Scrollbar */ + --color-scrollbar-right-background: var(--color-white); + --color-scrollbar-right-track: var(--color-grey-6); + --color-scrollbar-left-background: var(--color-secondary); + --color-scrollbar-left-track: var(--color-grey-11); + + /* Tags */ + --color-tag-admin-text: var(--color-complementary); + --color-tag-admin-border: var(--color-complementary); + + /* Form elements */ + --color-button-white: var(--color-white); + --color-button-primary: var(--color-primary); + --color-button-secondary: var(--color-complementary); + --color-button-complementary: var(--color-secondary); + + --color-input-background: #EDF1FA; + --color-input-text: var(--color-secondary); + --color-input-icon: var(--color-complementary); + --color-input-active: var(--color-complementary); + --color-fieldset: var(--color-title); + --color-fieldset-border: #DAE2F3; + --color-button-modal: var(--color-title); + --color-select-list: var(--color-secondary); + --color-select-add-button: var(--color-button-secondary); + --color-select-add-button-background: var(--color-button-white); + + --color-label-light: var(--color-grey-6); + + /* Skill */ + --color-skill-background: var(--color-primary); + --color-skill-text: var(--color-white); + + /* Icon */ + --color-icon: var(--color-primary); + + /* Table */ + --color-table-header-background: #BDC2D7; + --color-table-header-text: var(--color-white); + --color-table-border: #BDC2D7; + + /* User thumb */ + --color-user-thumb-name: #7A7F85; + + --color-backlink: var(--color-secondary); + --color-content-header: #DAE2F3; + + /* Chat */ + --color-chat-white: var(--color-white); + --color-chat-primary: var(--color-primary); + --color-chat-complementary: var(--color-complementary); + --color-chat-secondary: var(--color-secondary); + --color-chat-complementary-darken: var(--color-complementary-darken); + --color-chat-grey-1: var(--color-grey-4); + --color-chat-grey-2: var(--color-grey-6); + --color-chat-grey-3: var(--color-grey-10); + + /* Directory */ + --color-directory-grey-4: #7A7F85 !important; + --color-directory-grey-5: #F0F3F6 !important; + + --color-directory-avatar-background: #E4E8ED !important; + --color-directory-back-link: #36383B !important; + --color-directory-border: #DAE2F3 !important; + --color-directory-content-header-border: #DAE2F3 !important; + --color-directory-h1: var(--color-complementary-darken); + --color-directory-list-icon: var(--color-primary); + --color-directory-text: var(--color-directory-grey-4); + + --color-directory-send-border: var(--color-complementary) !important; + --color-directory-list-icon: var(--color-primary) !important; + --color-directory-counter-background: var(--color-directory-grey-5) !important; + --color-directory-counter-border: #9BA0A7 !important; + --color-directory-counter-text: #4A4A4A !important; + + --color-directory-paginate: #36383B !important; + --color-directory-paginate-disabled: #9BA0A7 !important; + + --color-directory-form-input: #EDF1FA !important; + --color-directory-form-input-text: var(--color-directory-grey-4) !important; + --color-directory-form-input-active: var(--color-complementary) !important; + --color-directory-form-select-icon: var(--color-complementary) !important; +} + +/* Text color for the beta label */ + +#header>div.header-left>span.beta-tag { + color: var(--color-complementary); +} + +/* Button to edit a channel or a project (in project-profile) */ +#project solid-link[next="project-edit"], +#circle solid-link[next="circle-edit"] { + background: var(--color-complementary); + border: 1px solid var(--color-complementary); +} + +#project solid-link[next="project-edit"]:hover, +#circle solid-link[next="circle-edit"]:hover { + background: var(--color-white); + border: 1px solid var(--color-complementary); + color: var(--color-complementary); +} + +/* Button to delete a channel */ +/* box-button is depreciated */ +#circle-profile>div>div.desktop-button__end>solid-ac-checker>solid-delete, +#circle-profile>div>div.box-button>solid-ac-checker>solid-delete { + background: var(--color-white); + border: 1px solid var(--color-complementary); + color: var(--color-complementary); +} + +#circle-profile>div>div.desktop-button__end>solid-ac-checker>solid-delete>button, +#circle-profile>div>div.box-button>solid-ac-checker>solid-delete>button { + color: var(--color-complementary); +} + +#circle-profile>div>div.desktop-button__end>solid-ac-checker>solid-delete:hover, +#circle-profile>div>div.box-button>solid-ac-checker>solid-delete:hover { + background: var(--color-complementary); + border: 1px solid var(--color-complementary); + color: var(--color-white); +} + +#circle-profile>div>div.desktop-button__end>solid-ac-checker>solid-delete:hover>button, +#circle-profile>div>div.box-button>solid-ac-checker>solid-delete:hover>button { + color: var(--color-white); +} + +/* Button with a pen to edit a user */ +#admin-users-list>div>div.table>solid-display>div>solid-display>div>solid-action-hd-custom>solid-ac-checker>solid-link { + background: var(--color-complementary); + border: 1px solid var(--color-complementary); + color: var(--color-white); +} + +#admin-users-list>div>div.table>solid-display>div>solid-display>div>solid-action-hd-custom>solid-ac-checker>solid-link:hover { + background: var(--color-white); + border: 1px solid var(--color-complementary); + color: var(--color-complementary); +} + +/* Button to join a channel */ +#admin-circle-list>div>div.table>solid-display:nth-child(5)>div>solid-display>div>admin-circle-join-button>solid-form { + background: var(--color-complementary); + border: 1px solid var(--color-complementary); + color: var(--color-white); +} + +#admin-circle-list>div>div.table>solid-display:nth-child(5)>div>solid-display>div>admin-circle-join-button>solid-form:hover { + background: var(--color-white); + border: 1px solid var(--color-complementary); + color: var(--color-complementary); +} + +#admin-circle-list>div>div.table>solid-display:nth-child(5)>div>solid-display>div>admin-circle-join-button>solid-form:hover input { + color: var(--color-complementary); +} + + +/* Directory - my profile*/ + +/* Colors for buttons to send a message to a member and to update or remove your profile picture */ +#member-profile>div.profile-card>div.user-profile>div>solid-display>div>solid-action.button.button-primary.bordered, +button#solid-picture-browse.button.button-primary, +button#solid-picture-remove.button.button-primary { + border: 1px solid var(--color-directory-complementary) !important; +} + +#member-profile solid-action.button.button-primary>solid-link, +button#solid-picture-browse.button.button-primary, +button#solid-picture-remove.button.button-primary { + color: var(--color-directory-complementary) !important; +} + +#member-profile>div.profile-card>div.user-profile>div>solid-display>div>solid-action.button.button-primary.bordered>solid-link::before { + background-color: var(--color-directory-complementary) !important; +} + +/* Hover */ +#member-profile solid-action.button.button-primary:hover, +#member-profile solid-action.button.button-primary:hover>solid-link, +button#solid-picture-browse.button.button-primary:hover, +button#solid-picture-remove.button.button-primary:hover { + color: var(--color-directory-white) !important; + background-color: var(--color-directory-complementary) !important; +} + +#member-profile>div.profile-card>div.user-profile>div>solid-display>div>solid-action.button.button-primary.bordered:hover>solid-link::before { + background-color: var(--color-directory-white) !important; +} + +#members-list .send-display solid-link::before { + background-color: var(--color-directory-complementary)!important; +} + +/* Dashboard */ +.dashboard-card>div>div>p { + color: var(--color-complementary) !important; +} + +.dashboard-card .svg-color-secondary { + fill: var(--color-complementary) !important; +} + +.dashboard-card i { + border-color: var(--color-primary) !important; + color: var(--color-complementary) !important; +} + +.dashboard-card sib-link, .dashboard-card solid-link { + border-color: var(--color-complementary) !important; + color: var(--color-complementary) !important; +} + +.dashboard-card sib-link:hover, .dashboard-card solid-link:hover { + background-color: var(--color-complementary) !important; + color: #fff !important; +} From c7e2d956ad865551f423024476e909c9929ef165 Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Mon, 12 Oct 2020 23:43:28 +0200 Subject: [PATCH 52/62] bugfix: getting colors from variables --- src/styles/layout/events/events.scss | 20 +++++++++--------- src/styles/layout/polls/polls.scss | 24 +++++++++++----------- src/styles/layout/resources/resources.scss | 14 ++++++------- 3 files changed, 29 insertions(+), 29 deletions(-) diff --git a/src/styles/layout/events/events.scss b/src/styles/layout/events/events.scss index 46a69b9..933e927 100644 --- a/src/styles/layout/events/events.scss +++ b/src/styles/layout/events/events.scss @@ -17,10 +17,10 @@ solid-event section { } .red-button, .event-type { - background-color: #C4262E; + background-color: var(--second-color); } .black-button { - background-color: #3A3A3A; + background-color: var(--highlight-font-color); margin-left: 10%; } .event-type, @@ -31,13 +31,13 @@ solid-event section { #circle-listevents { [name="name"], event-display-link-event .mdi::before { - color: #063B5C; + color: var(--main-color); } } .event-place-name, .nextevent-startdate, event-display-link-event { - color: #3A3A3A; + color: var(--highlight-font-color); } .solid-event { font-family: "Facit"; @@ -46,7 +46,7 @@ solid-event section { font-family: "RefrigeratorDelxW01Bold"; font-size: 3.2rem; line-height: 3.8rem; - color: #063B5C; + color: var(--main-color); } } #default-listevents, @@ -56,7 +56,7 @@ solid-event section { width: max-content; height: max-content; padding: 5px 20px; - color: #063B5C; + color: var(--main-color); } solid-form { solid-form-dropdown-label { @@ -68,7 +68,7 @@ solid-event section { font-family: "RefrigeratorDelxW01Bold"; font-size: 2.4rem; line-height: 29px; - color: #063B5C; + color: var(--main-color); top: -40px; content: "Research an event"; } @@ -79,7 +79,7 @@ solid-event section { font-size: 1.8rem; line-height: 2.6rem; letter-spacing: 0.32px; - color: #063B5C; + color: var(--main-color); padding: 5px; max-width: 250px; margin: 5px auto; @@ -108,10 +108,10 @@ solid-event section { font-family: "RefrigeratorDelxW01Bold"; font-size: 3.2rem; line-height: 3.8rem; - color: #063B5C; + color: var(--main-color); display: block; } - color: #063B5C; + color: var(--main-color); .event-type { width: max-content; padding: 5px 20px; diff --git a/src/styles/layout/polls/polls.scss b/src/styles/layout/polls/polls.scss index 8fccbf9..c69d8ff 100644 --- a/src/styles/layout/polls/polls.scss +++ b/src/styles/layout/polls/polls.scss @@ -16,7 +16,7 @@ solid-poll > div { font-family: "RefrigeratorDelxW01Bold"; font-size: 2.4rem; line-height: 3.8rem; - color: #063B5C; + color: var(--main-color); } .add-poll { solid-link { @@ -97,7 +97,7 @@ solid-poll > div { } [name="title"] { font-family: "RefrigeratorDelxW01Bold"; - color: #063B5C; + color: var(--main-color); font-size: 1.8rem; font-weight: 600; text-transform: uppercase; @@ -107,7 +107,7 @@ solid-poll > div { } [name="hostingOrganisation"], [name="endDate"] { - color: #3A3A3A; + color: var(--highlight-font-color); font-family: Facit; font-size: 14px; letter-spacing: 0; @@ -117,7 +117,7 @@ solid-poll > div { &::before { content: '\e037'; font-family: 'simple-line-icons'; - color: #C4262E; + color: var(--second-color); height: 22px; width: 24px; font-size: 16px; @@ -135,7 +135,7 @@ solid-poll > div { display: inline-block; font: normal normal normal 24px/1 "Material Design Icons"; content: "\F6AF"; - color: #C4262E; + color: var(--second-color); height: 22px; width: 24px; font-size: 20px; @@ -196,7 +196,7 @@ solid-poll > div { } [name="hostingOrganisation"], [name="dateLine"] { - color: #3A3A3A; + color: var(--highlight-font-color); font-family: Facit; font-size: 16px; font-weight: bold; @@ -214,7 +214,7 @@ solid-poll > div { content: '\e037'; font-family: "simple-line-icons"; font-weight: 400; - color: #C4262E; + color: var(--second-color); margin-right: 10px; font-size: 16px; } @@ -223,7 +223,7 @@ solid-poll > div { font-family: "Material Design Icons"; font-weight: 400; content: "\F6AF"; - color: #C4262E; + color: var(--second-color); font-size: 20px; } [name="shortDescription"], @@ -251,7 +251,7 @@ solid-poll > div { font-weight: 400; font-size: 20px; margin-right: 10px; - color: #3A3A3A; + color: var(--highlight-font-color); } .vote-section > h3::before { content:"\F004"; @@ -292,7 +292,7 @@ solid-poll > div { } .send-share, .back-to-list { - background-color: #3A3A3A; + background-color: var(--highlight-font-color); padding: 5px 25px; font-size: 1.4rem; &::before { @@ -490,7 +490,7 @@ solid-poll > div { margin-top: 10px; .ss-multi-selected .ss-values .ss-value { border-radius: 14px; - background-color: #C4262E; + background-color: var(--second-color); padding: 5px 10px; font-size: 11px; } @@ -507,7 +507,7 @@ solid-poll > div { } .poll-footer { .back-to-list { - background-color: #3A3A3A; + background-color: var(--highlight-font-color); padding: 5px 25px; font-size: 1.4rem; margin-left: 10%; diff --git a/src/styles/layout/resources/resources.scss b/src/styles/layout/resources/resources.scss index a05d6ef..c4ac56e 100644 --- a/src/styles/layout/resources/resources.scss +++ b/src/styles/layout/resources/resources.scss @@ -17,13 +17,13 @@ font-family: "RefrigeratorDelxW01Bold"; font-size: 3.2rem; line-height: 3.8rem; - color: #063B5C; + color: var(--main-color); } .red-button { - background-color: #C4262E; + background-color: var(--second-color); } .black-button { - background-color: #3A3A3A; + background-color: var(--highlight-font-color); margin-left: 10%; } .lnk-newresource { @@ -45,7 +45,7 @@ &::before { content: "Research a resource"; font-family: "RefrigeratorDelxW01Bold"; - color: #063B5C; + color: var(--main-color); font-size: 2.4rem; line-height: 3.8rem; top: -10px; @@ -61,12 +61,12 @@ width: max-content; height: max-content; padding: 10px 30px; - color: #063B5C; + color: var(--main-color); } solid-display solid-display { [name="name"] { font-family: "RefrigeratorDelxW01Bold"; - color: #063B5C; + color: var(--main-color); } [name="link"] a, [name="document"] a { width: 75%; @@ -86,7 +86,7 @@ font-family: "RefrigeratorDelxW01Bold"; font-size: 3.2rem; line-height: 3.8rem; - color: #063B5C; + color: var(--main-color); } [name="infotext"] { justify-content: flex-start; From a88649d345c31660b87b7eb8edcc1dd1a61b385f Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Tue, 13 Oct 2020 00:31:00 +0200 Subject: [PATCH 53/62] bugfix: fix some colors names --- src/styles/layout/events/events.scss | 16 ++++++++-------- src/styles/layout/polls/polls.scss | 20 ++++++++++---------- src/styles/layout/resources/resources.scss | 12 ++++++------ 3 files changed, 24 insertions(+), 24 deletions(-) diff --git a/src/styles/layout/events/events.scss b/src/styles/layout/events/events.scss index 933e927..79aedfa 100644 --- a/src/styles/layout/events/events.scss +++ b/src/styles/layout/events/events.scss @@ -17,7 +17,7 @@ solid-event section { } .red-button, .event-type { - background-color: var(--second-color); + background-color: var(--secondary-color); } .black-button { background-color: var(--highlight-font-color); @@ -31,7 +31,7 @@ solid-event section { #circle-listevents { [name="name"], event-display-link-event .mdi::before { - color: var(--main-color); + color: var(--primary-color); } } .event-place-name, @@ -46,7 +46,7 @@ solid-event section { font-family: "RefrigeratorDelxW01Bold"; font-size: 3.2rem; line-height: 3.8rem; - color: var(--main-color); + color: var(--primary-color); } } #default-listevents, @@ -56,7 +56,7 @@ solid-event section { width: max-content; height: max-content; padding: 5px 20px; - color: var(--main-color); + color: var(--primary-color); } solid-form { solid-form-dropdown-label { @@ -68,7 +68,7 @@ solid-event section { font-family: "RefrigeratorDelxW01Bold"; font-size: 2.4rem; line-height: 29px; - color: var(--main-color); + color: var(--primary-color); top: -40px; content: "Research an event"; } @@ -79,7 +79,7 @@ solid-event section { font-size: 1.8rem; line-height: 2.6rem; letter-spacing: 0.32px; - color: var(--main-color); + color: var(--primary-color); padding: 5px; max-width: 250px; margin: 5px auto; @@ -108,10 +108,10 @@ solid-event section { font-family: "RefrigeratorDelxW01Bold"; font-size: 3.2rem; line-height: 3.8rem; - color: var(--main-color); + color: var(--primary-color); display: block; } - color: var(--main-color); + color: var(--primary-color); .event-type { width: max-content; padding: 5px 20px; diff --git a/src/styles/layout/polls/polls.scss b/src/styles/layout/polls/polls.scss index c69d8ff..2c8c3ce 100644 --- a/src/styles/layout/polls/polls.scss +++ b/src/styles/layout/polls/polls.scss @@ -16,7 +16,7 @@ solid-poll > div { font-family: "RefrigeratorDelxW01Bold"; font-size: 2.4rem; line-height: 3.8rem; - color: var(--main-color); + color: var(--primary-color); } .add-poll { solid-link { @@ -97,7 +97,7 @@ solid-poll > div { } [name="title"] { font-family: "RefrigeratorDelxW01Bold"; - color: var(--main-color); + color: var(--primary-color); font-size: 1.8rem; font-weight: 600; text-transform: uppercase; @@ -117,7 +117,7 @@ solid-poll > div { &::before { content: '\e037'; font-family: 'simple-line-icons'; - color: var(--second-color); + color: var(--secondary-color); height: 22px; width: 24px; font-size: 16px; @@ -135,7 +135,7 @@ solid-poll > div { display: inline-block; font: normal normal normal 24px/1 "Material Design Icons"; content: "\F6AF"; - color: var(--second-color); + color: var(--secondary-color); height: 22px; width: 24px; font-size: 20px; @@ -214,7 +214,7 @@ solid-poll > div { content: '\e037'; font-family: "simple-line-icons"; font-weight: 400; - color: var(--second-color); + color: var(--secondary-color); margin-right: 10px; font-size: 16px; } @@ -223,7 +223,7 @@ solid-poll > div { font-family: "Material Design Icons"; font-weight: 400; content: "\F6AF"; - color: var(--second-color); + color: var(--secondary-color); font-size: 20px; } [name="shortDescription"], @@ -453,11 +453,11 @@ solid-poll > div { } } button { - border: 1px solid var(--main-color); + border: 1px solid var(--primary-color); background-color: transparent; border-radius: 15px; font-size: 24px; - color: var(--main-color); + color: var(--primary-color); padding: 0; height: 30px; width: 30px; @@ -475,7 +475,7 @@ solid-poll > div { font-weight: bold; font-size: 13px; margin: 10px 0; - color: var(--main-color); + color: var(--primary-color); &::before { content: "\F419"; font-family: Material Design Icons; @@ -490,7 +490,7 @@ solid-poll > div { margin-top: 10px; .ss-multi-selected .ss-values .ss-value { border-radius: 14px; - background-color: var(--second-color); + background-color: var(--secondary-color); padding: 5px 10px; font-size: 11px; } diff --git a/src/styles/layout/resources/resources.scss b/src/styles/layout/resources/resources.scss index c4ac56e..4f5c4c7 100644 --- a/src/styles/layout/resources/resources.scss +++ b/src/styles/layout/resources/resources.scss @@ -17,10 +17,10 @@ font-family: "RefrigeratorDelxW01Bold"; font-size: 3.2rem; line-height: 3.8rem; - color: var(--main-color); + color: var(--primary-color); } .red-button { - background-color: var(--second-color); + background-color: var(--secondary-color); } .black-button { background-color: var(--highlight-font-color); @@ -45,7 +45,7 @@ &::before { content: "Research a resource"; font-family: "RefrigeratorDelxW01Bold"; - color: var(--main-color); + color: var(--primary-color); font-size: 2.4rem; line-height: 3.8rem; top: -10px; @@ -61,12 +61,12 @@ width: max-content; height: max-content; padding: 10px 30px; - color: var(--main-color); + color: var(--primary-color); } solid-display solid-display { [name="name"] { font-family: "RefrigeratorDelxW01Bold"; - color: var(--main-color); + color: var(--primary-color); } [name="link"] a, [name="document"] a { width: 75%; @@ -86,7 +86,7 @@ font-family: "RefrigeratorDelxW01Bold"; font-size: 3.2rem; line-height: 3.8rem; - color: var(--main-color); + color: var(--primary-color); } [name="infotext"] { justify-content: flex-start; From 4395fe187f54dc1a9cb2e6396511332d1cdd0244 Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Tue, 13 Oct 2020 00:34:43 +0200 Subject: [PATCH 54/62] fix previous --- src/styles/layout/events/events.scss | 16 ++++++++-------- src/styles/layout/polls/polls.scss | 20 ++++++++++---------- src/styles/layout/resources/resources.scss | 12 ++++++------ 3 files changed, 24 insertions(+), 24 deletions(-) diff --git a/src/styles/layout/events/events.scss b/src/styles/layout/events/events.scss index 79aedfa..0d0c283 100644 --- a/src/styles/layout/events/events.scss +++ b/src/styles/layout/events/events.scss @@ -17,7 +17,7 @@ solid-event section { } .red-button, .event-type { - background-color: var(--secondary-color); + background-color: var(--color-secondary); } .black-button { background-color: var(--highlight-font-color); @@ -31,7 +31,7 @@ solid-event section { #circle-listevents { [name="name"], event-display-link-event .mdi::before { - color: var(--primary-color); + color: var(--color-primary); } } .event-place-name, @@ -46,7 +46,7 @@ solid-event section { font-family: "RefrigeratorDelxW01Bold"; font-size: 3.2rem; line-height: 3.8rem; - color: var(--primary-color); + color: var(--color-primary); } } #default-listevents, @@ -56,7 +56,7 @@ solid-event section { width: max-content; height: max-content; padding: 5px 20px; - color: var(--primary-color); + color: var(--color-primary); } solid-form { solid-form-dropdown-label { @@ -68,7 +68,7 @@ solid-event section { font-family: "RefrigeratorDelxW01Bold"; font-size: 2.4rem; line-height: 29px; - color: var(--primary-color); + color: var(--color-primary); top: -40px; content: "Research an event"; } @@ -79,7 +79,7 @@ solid-event section { font-size: 1.8rem; line-height: 2.6rem; letter-spacing: 0.32px; - color: var(--primary-color); + color: var(--color-primary); padding: 5px; max-width: 250px; margin: 5px auto; @@ -108,10 +108,10 @@ solid-event section { font-family: "RefrigeratorDelxW01Bold"; font-size: 3.2rem; line-height: 3.8rem; - color: var(--primary-color); + color: var(--color-primary); display: block; } - color: var(--primary-color); + color: var(--color-primary); .event-type { width: max-content; padding: 5px 20px; diff --git a/src/styles/layout/polls/polls.scss b/src/styles/layout/polls/polls.scss index 2c8c3ce..62749b6 100644 --- a/src/styles/layout/polls/polls.scss +++ b/src/styles/layout/polls/polls.scss @@ -16,7 +16,7 @@ solid-poll > div { font-family: "RefrigeratorDelxW01Bold"; font-size: 2.4rem; line-height: 3.8rem; - color: var(--primary-color); + color: var(--color-primary); } .add-poll { solid-link { @@ -97,7 +97,7 @@ solid-poll > div { } [name="title"] { font-family: "RefrigeratorDelxW01Bold"; - color: var(--primary-color); + color: var(--color-primary); font-size: 1.8rem; font-weight: 600; text-transform: uppercase; @@ -117,7 +117,7 @@ solid-poll > div { &::before { content: '\e037'; font-family: 'simple-line-icons'; - color: var(--secondary-color); + color: var(--color-secondary); height: 22px; width: 24px; font-size: 16px; @@ -135,7 +135,7 @@ solid-poll > div { display: inline-block; font: normal normal normal 24px/1 "Material Design Icons"; content: "\F6AF"; - color: var(--secondary-color); + color: var(--color-secondary); height: 22px; width: 24px; font-size: 20px; @@ -214,7 +214,7 @@ solid-poll > div { content: '\e037'; font-family: "simple-line-icons"; font-weight: 400; - color: var(--secondary-color); + color: var(--color-secondary); margin-right: 10px; font-size: 16px; } @@ -223,7 +223,7 @@ solid-poll > div { font-family: "Material Design Icons"; font-weight: 400; content: "\F6AF"; - color: var(--secondary-color); + color: var(--color-secondary); font-size: 20px; } [name="shortDescription"], @@ -453,11 +453,11 @@ solid-poll > div { } } button { - border: 1px solid var(--primary-color); + border: 1px solid var(--color-primary); background-color: transparent; border-radius: 15px; font-size: 24px; - color: var(--primary-color); + color: var(--color-primary); padding: 0; height: 30px; width: 30px; @@ -475,7 +475,7 @@ solid-poll > div { font-weight: bold; font-size: 13px; margin: 10px 0; - color: var(--primary-color); + color: var(--color-primary); &::before { content: "\F419"; font-family: Material Design Icons; @@ -490,7 +490,7 @@ solid-poll > div { margin-top: 10px; .ss-multi-selected .ss-values .ss-value { border-radius: 14px; - background-color: var(--secondary-color); + background-color: var(--color-secondary); padding: 5px 10px; font-size: 11px; } diff --git a/src/styles/layout/resources/resources.scss b/src/styles/layout/resources/resources.scss index 4f5c4c7..42b3991 100644 --- a/src/styles/layout/resources/resources.scss +++ b/src/styles/layout/resources/resources.scss @@ -17,10 +17,10 @@ font-family: "RefrigeratorDelxW01Bold"; font-size: 3.2rem; line-height: 3.8rem; - color: var(--primary-color); + color: var(--color-primary); } .red-button { - background-color: var(--secondary-color); + background-color: var(--color-secondary); } .black-button { background-color: var(--highlight-font-color); @@ -45,7 +45,7 @@ &::before { content: "Research a resource"; font-family: "RefrigeratorDelxW01Bold"; - color: var(--primary-color); + color: var(--color-primary); font-size: 2.4rem; line-height: 3.8rem; top: -10px; @@ -61,12 +61,12 @@ width: max-content; height: max-content; padding: 10px 30px; - color: var(--primary-color); + color: var(--color-primary); } solid-display solid-display { [name="name"] { font-family: "RefrigeratorDelxW01Bold"; - color: var(--primary-color); + color: var(--color-primary); } [name="link"] a, [name="document"] a { width: 75%; @@ -86,7 +86,7 @@ font-family: "RefrigeratorDelxW01Bold"; font-size: 3.2rem; line-height: 3.8rem; - color: var(--primary-color); + color: var(--color-primary); } [name="infotext"] { justify-content: flex-start; From f87984b454349309f203437d1f65db06f4975ce8 Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Tue, 13 Oct 2020 00:48:02 +0200 Subject: [PATCH 55/62] fixing stuff --- src/styles/layout/events/events.scss | 2 +- src/styles/layout/polls/polls.scss | 6 +++--- src/styles/layout/resources/resources.scss | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/styles/layout/events/events.scss b/src/styles/layout/events/events.scss index 0d0c283..b07d049 100644 --- a/src/styles/layout/events/events.scss +++ b/src/styles/layout/events/events.scss @@ -7,7 +7,7 @@ solid-event section { width: 100%; font-family: "Facit"; font-weight: 400; - color: #7A7F85; + color: var(--color-main-text); solid-event { solid-display div { max-width: 1110px; diff --git a/src/styles/layout/polls/polls.scss b/src/styles/layout/polls/polls.scss index 62749b6..52d0152 100644 --- a/src/styles/layout/polls/polls.scss +++ b/src/styles/layout/polls/polls.scss @@ -144,7 +144,7 @@ solid-poll > div { } } [name="shortDescription"] { - color: #7A7F85; + color: var(--color-main-text); font-family: Facit; font-size: 14px; letter-spacing: 0; @@ -229,7 +229,7 @@ solid-poll > div { [name="shortDescription"], [name="longDescription"] { margin: 20px 0; - color: #7A7F85; + color: var(--color-main-text); font-family: Facit; } [name="shortDescription"] { @@ -385,7 +385,7 @@ solid-poll > div { } p { margin-top: 10px; - color: #7A7F85; + color: var(--color-main-text); font-family: Facit; font-size: 16px; } diff --git a/src/styles/layout/resources/resources.scss b/src/styles/layout/resources/resources.scss index 42b3991..771ed18 100644 --- a/src/styles/layout/resources/resources.scss +++ b/src/styles/layout/resources/resources.scss @@ -3,7 +3,7 @@ width: 100%; font-family: "Facit"; font-weight: 400; - color: #7A7F85; + color: var(--content-font-color); solid-resource { solid-display div { max-width: 1110px; @@ -114,7 +114,7 @@ background-color: var(--form-inputs-background); } .newresource input[type="submit"] { - background-color: #3C3F57; + background-color: var(--form-inputs-background); } .newresource input[type="file"] { background-color: transparent; From 01ffc1e0ec6ccf984db61e348fae468ba656302a Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Tue, 13 Oct 2020 01:01:18 +0200 Subject: [PATCH 56/62] fixing stuff --- src/styles/layout/resources/resources.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/layout/resources/resources.scss b/src/styles/layout/resources/resources.scss index 771ed18..979d402 100644 --- a/src/styles/layout/resources/resources.scss +++ b/src/styles/layout/resources/resources.scss @@ -114,7 +114,7 @@ background-color: var(--form-inputs-background); } .newresource input[type="submit"] { - background-color: var(--form-inputs-background); + background-color: var(--form-submit-button); } .newresource input[type="file"] { background-color: transparent; From 7d9dbb867af8007294bcf1eacd233b9d5a792a4d Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Tue, 13 Oct 2020 21:13:47 +0200 Subject: [PATCH 57/62] bugfix: remove spaces from empty lines --- src/styles/base/menu-left.scss | 106 ++++++++++++++--------------- src/styles/layout/polls/polls.scss | 4 +- 2 files changed, 56 insertions(+), 54 deletions(-) diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index 2621de1..cb66bc5 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -2,15 +2,15 @@ background-color: var(--color-menu-background); color: var(--color-menu-text); /*transition: flex-basis 0.5s ease-in-out;*/ - + &.open { transform: translateX(0); } - + .unread { font-weight: bolder; } - + solid-router { .menu-wrapper { .menu-icon.icon-arrow-up { @@ -24,37 +24,37 @@ .sub-menu { display: none; } - + .menu-chevron { transform: rotate(180deg); } } } } - + solid-link { width: 100%; } - + .menu { cursor: pointer; display: flex; flex-direction: row-reverse; font-weight: bold; padding: 1.2rem; - + &[active] { background-color: var(--color-menu-highlight-primary); - + .menu-icon:before { background-color: var(--color-menu-icon-background-active); } - + .menu-notification>solid-display>div:first-child { background-color: var(--color-menu-badge-background); } } - + .menu-icon { align-items: center; display: flex; @@ -63,7 +63,7 @@ flex-shrink: 0; font-size: 1.7rem; width: 3.2em; - + &:before { border-radius: 100%; height: 1.9em; @@ -71,7 +71,7 @@ width: 1.9em; } } - + .menu-label { display: flex; flex-direction: column; @@ -83,7 +83,7 @@ text-transform: uppercase; width: 8em; } - + .menu-chevron { align-items: center; display: flex; @@ -92,35 +92,35 @@ justify-content: center; width: 2em; } - + >solid-display { display: block; } } - + .sub-menu { - + /* Ellipsis for project tab */ - + .project-tab>div>solid-display>div:nth-child(1) { - + solid-set-default[name='project'] { flex: 3; - + .project-customer, .project-name { box-sizing: border-box; display: block; width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */ - + @include breakpoint(lg) { width: 150px; } } - + .project-customer, .project-name>div { - + @include breakpoint(lg) { display: block; overflow: hidden; @@ -130,19 +130,19 @@ } } } - + /* Ellipsis for circle tab */ - + .circle-tab>div>solid-display>div { - + solid-display-div[name='name'] { flex: 3; - + >div[name='name'] { box-sizing: border-box; padding-left: 0.2em; width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */ - + @include breakpoint(lg) { overflow: hidden; text-overflow: ellipsis; @@ -152,18 +152,18 @@ } } } - + /* Ellipsis for message tab */ - + .message-tab>div>solid-display>div>solid-display-div>div { box-sizing: border-box; width: calc(80vw - 96px); /*96px = padding of the element + width and margin of counter */ - + @include breakpoint(lg) { width: 150px; } } - + solid-display.nosub>solid-form[fields="name"]>hubl-search-users>input { margin-left: 30px; margin-bottom: 10px; @@ -174,42 +174,42 @@ border: 1px solid var(--color-grey-4); border-radius: 3px; padding: 4px; - + @include breakpoint(lg) { margin: auto; margin-bottom: 10px; width: auto; } } - + solid-display.nosub>nav { text-align: center; overflow: hidden; display: grid; grid-template-columns: auto 50% auto; grid-template-areas: "left middle right"; - + >* { color: var(--color-white); } - + >[data-id="prev"] { grid-area: left; } - + >[data-id="next"] { grid-area: right; } - + >span { grid-area: middle; } } - + hubl-menu-publicprivate { display: inline-block; text-align: center; - + div { font-family: simple-line-icons; width: 20px; @@ -217,38 +217,38 @@ padding-top: 0.1em; } } - + >solid-display.nosub>div>solid-display>div { padding: 1rem 1rem 1rem 3rem; } - + solid-display>div { - + .create { color: var(--color-white); margin: 1rem 1rem 2.2rem 3.2rem; } - + &>solid-display { &:last-child>div { margin-bottom: 2.2rem; } - + >div { color: var(--color-white); cursor: pointer; - + >hubl-menu-fix-url-circle>solid-display>div, >hubl-menu-fix-url-project>solid-display>div { padding: 1rem 1rem 1rem 3rem; } } - + &[fields="project(customer.name, name), badge"]>div { padding: 0; } } - + &>solid-display[active]>div, &>solid-display>div>hubl-menu-fix-url-circle>solid-display[active]>div, &>solid-display>div>hubl-menu-fix-url-project>solid-display[active]>div { @@ -257,26 +257,26 @@ font-weight: bold; } } - + &.menu-notification { - + >solid-display>div>solid-display>div>hubl-menu-fix-url-circle, >solid-display>div>solid-display>div>hubl-menu-fix-url-project { flex: 1; } - + >solid-display>div>solid-display>div, >solid-display>div>solid-display>div>hubl-menu-fix-url-circle>solid-display>div, >solid-display>div>solid-display>div>hubl-menu-fix-url-project>solid-display>div { display: flex; justify-content: space-between; } - + hubl-counter { height: 20px; width: 20px; margin-right: 1em; - + div.counter:not([data-nb-unread="0"]) { text-align: center; display: block; @@ -292,7 +292,7 @@ } } } - + .divider { height: 1px; background-color: var(--color-grey-11); diff --git a/src/styles/layout/polls/polls.scss b/src/styles/layout/polls/polls.scss index 52d0152..4c8fe2e 100644 --- a/src/styles/layout/polls/polls.scss +++ b/src/styles/layout/polls/polls.scss @@ -401,7 +401,9 @@ solid-poll > div { height: 110px; } solid-form-label-text, - solid-form-textarea { + solid-form-textarea, + solid-form-label-textarea, + solid-form-textarea-label { display: block; margin: 15px 0; padding: 0; From 697e9360e82a6670347017b6725081bb766f3a54 Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Tue, 13 Oct 2020 22:19:34 +0200 Subject: [PATCH 58/62] update: some css fixing and missing variables --- src/styles/abstracts/_variables.scss | 2 ++ src/styles/layout/resources/resources.scss | 18 +++++++----------- 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss index 03b17c9..32468c1 100644 --- a/src/styles/abstracts/_variables.scss +++ b/src/styles/abstracts/_variables.scss @@ -102,6 +102,8 @@ --color-select-list: var(--color-secondary); --color-select-add-button: var(--color-button-secondary); --color-select-add-button-background: var(--color-button-white); + --color-add-button-background: var(--color-button-secondary); + --color-add-button: var(--color-white); --color-label-light: var(--color-grey-6); diff --git a/src/styles/layout/resources/resources.scss b/src/styles/layout/resources/resources.scss index 979d402..4d7aa43 100644 --- a/src/styles/layout/resources/resources.scss +++ b/src/styles/layout/resources/resources.scss @@ -33,23 +33,19 @@ position: relative; } .listresources .lnk-newkeyword { - top: 130px; + top: 142px; left: 220px; .button.thin-button.mdi { padding: 5px 20px; } } - .resources { - margin-top: -35px; + .listresources { + .headline h2 { + float: left; + margin-top: 5px; + color: var(--color-secondary); + } solid-form { - &::before { - content: "Research a resource"; - font-family: "RefrigeratorDelxW01Bold"; - color: var(--color-primary); - font-size: 2.4rem; - line-height: 3.8rem; - top: -10px; - } select { width: 150px; } From 9f6213a295b9465928f92a92ee7c850a82ec76b8 Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Tue, 13 Oct 2020 23:11:36 +0200 Subject: [PATCH 59/62] update: fixing headline rendering --- src/styles/layout/events/events.scss | 18 +++++++++--------- src/styles/layout/resources/resources.scss | 7 +++++-- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/src/styles/layout/events/events.scss b/src/styles/layout/events/events.scss index b07d049..7d32587 100644 --- a/src/styles/layout/events/events.scss +++ b/src/styles/layout/events/events.scss @@ -17,7 +17,7 @@ solid-event section { } .red-button, .event-type { - background-color: var(--color-secondary); + background-color: var(--color-add-button-background); } .black-button { background-color: var(--highlight-font-color); @@ -58,20 +58,20 @@ solid-event section { padding: 5px 20px; color: var(--color-primary); } + .headline h2 { + float: left; + margin-top: 35px; + color: var(--color-primary); + text-transform: none; + font-family: "RefrigeratorDelxW01Bold"; + font-size: 2.4rem; + } solid-form { solid-form-dropdown-label { margin-left: 15px; label { height: 2.5rem; } - &::before { - font-family: "RefrigeratorDelxW01Bold"; - font-size: 2.4rem; - line-height: 29px; - color: var(--color-primary); - top: -40px; - content: "Research an event"; - } } } [name="name"] { diff --git a/src/styles/layout/resources/resources.scss b/src/styles/layout/resources/resources.scss index 4d7aa43..045566d 100644 --- a/src/styles/layout/resources/resources.scss +++ b/src/styles/layout/resources/resources.scss @@ -33,7 +33,7 @@ position: relative; } .listresources .lnk-newkeyword { - top: 142px; + top: 155px; left: 220px; .button.thin-button.mdi { padding: 5px 20px; @@ -43,7 +43,10 @@ .headline h2 { float: left; margin-top: 5px; - color: var(--color-secondary); + color: var(--color-primary); + text-transform: none; + font-family: "RefrigeratorDelxW01Bold"; + font-size: 2.4rem; } solid-form { select { From f255843818aa8ca725c3c497951b52b74ad84e1a Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Wed, 14 Oct 2020 00:28:16 +0200 Subject: [PATCH 60/62] update: fixing some polls css --- src/styles/layout/polls/polls.scss | 29 ++++++++++------------ src/styles/layout/resources/resources.scss | 2 +- 2 files changed, 14 insertions(+), 17 deletions(-) diff --git a/src/styles/layout/polls/polls.scss b/src/styles/layout/polls/polls.scss index 4c8fe2e..fc83818 100644 --- a/src/styles/layout/polls/polls.scss +++ b/src/styles/layout/polls/polls.scss @@ -12,27 +12,25 @@ solid-poll > div { margin: auto; .headline { h2 { - margin: 0 20px; font-family: "RefrigeratorDelxW01Bold"; font-size: 2.4rem; - line-height: 3.8rem; color: var(--color-primary); + float: left; + margin-top: 5px; } - .add-poll { - solid-link { - float: right; - margin-top: 10px; - display: initial; - margin-right: 75px; - position: relative; - z-index: 1; + solid-link { + display:flex; + justify-content: end; + margin-top: 30px; + margin-right: 70px; + z-index: 1; + position: relative; + .add-poll { + background-color: var(--color-add-button-background); + color: var(--color-add-button); box-shadow: 0px 0px 4px 1px #CACACA; - height: 2rem; - font-size: 1.4rem; text-transform: uppercase; font-weight: 700; - padding: 0.55rem 2.5rem; - width: max-content; line-height: 20px; &::before { font-family: "material-design-icons"; @@ -52,8 +50,7 @@ solid-poll > div { display: block; border-bottom: solid 1px #cacaca; height: 90px; - width: 650px; - margin: 16px 25px 25px; + margin: 40px 25px 25px; max-width: 85%; solid-form-placeholder-text { margin-left: 15px; diff --git a/src/styles/layout/resources/resources.scss b/src/styles/layout/resources/resources.scss index 045566d..652daab 100644 --- a/src/styles/layout/resources/resources.scss +++ b/src/styles/layout/resources/resources.scss @@ -20,7 +20,7 @@ color: var(--color-primary); } .red-button { - background-color: var(--color-secondary); + background-color: var(--color-add-button-background); } .black-button { background-color: var(--highlight-font-color); From 8d2d5900300eff0ca0d217bfc7afc768cdbb1812 Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Wed, 14 Oct 2020 00:57:24 +0200 Subject: [PATCH 61/62] design: few fixes --- src/styles/layout/events/events.scss | 1 - src/styles/layout/polls/polls.scss | 6 +++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/styles/layout/events/events.scss b/src/styles/layout/events/events.scss index 7d32587..be0ef78 100644 --- a/src/styles/layout/events/events.scss +++ b/src/styles/layout/events/events.scss @@ -68,7 +68,6 @@ solid-event section { } solid-form { solid-form-dropdown-label { - margin-left: 15px; label { height: 2.5rem; } diff --git a/src/styles/layout/polls/polls.scss b/src/styles/layout/polls/polls.scss index fc83818..ce858ad 100644 --- a/src/styles/layout/polls/polls.scss +++ b/src/styles/layout/polls/polls.scss @@ -50,8 +50,12 @@ solid-poll > div { display: block; border-bottom: solid 1px #cacaca; height: 90px; - margin: 40px 25px 25px; + margin: 30px 25px 25px; max-width: 85%; + solid-form-dropdown-label label { + font-size: 1.4rem; + font-family: "Facit"; + } solid-form-placeholder-text { margin-left: 15px; input { From 4fac6a4d1c4666b64953d48fc7d3e34103d23912 Mon Sep 17 00:00:00 2001 From: Benoit Alessandroni Date: Wed, 14 Oct 2020 20:16:01 +0200 Subject: [PATCH 62/62] bugfix: avoid component css issue --- src/styles/layout/polls/polls.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/layout/polls/polls.scss b/src/styles/layout/polls/polls.scss index ce858ad..348b545 100644 --- a/src/styles/layout/polls/polls.scss +++ b/src/styles/layout/polls/polls.scss @@ -70,7 +70,7 @@ solid-poll > div { height: 100%; max-width: 1100px; margin: auto; - solid-display { + > solid-display { width: 320px; height: 550px; margin: 0 0 20px 40px;