diff --git a/src/locales/en.json b/src/locales/en.json index 63e888d..e1e7d5c 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -102,12 +102,12 @@ "buttonMobile": "MENU", "subTitle": "Circles", "buttonCreate": " Create a circle", - "tableHeader1": "Name", - "tableHeader2": "Admins", - "tableHeader3": "Join", "buttonQuit": "Leave", "buttonJoin": "Join", - "searchBy": "Find a circle by name" + "searchBy": "Find a circle", + "searchButton": "search", + "tabJoin": "Discover circles", + "tabLeave": "My circles" }, "left": { "paragraphQuit": "You left this circle.", diff --git a/src/locales/es.json b/src/locales/es.json index e3c964a..7b3d815 100644 --- a/src/locales/es.json +++ b/src/locales/es.json @@ -102,12 +102,12 @@ "buttonMobile": "MENÚ", "subTitle": "Círculos", "buttonCreate": "Crear un círculo", - "tableHeader1": "Nombre", - "tableHeader2": "Administradorxs", - "tableHeader3": "Unirse", "buttonQuit": "Salir", "buttonJoin": "Unirse", - "searchBy": "Busca un círculo por nombre " + "searchBy": "Busca un círculo", + "searchButton": "Buscar", + "tabJoin": "Descubrir los círculos", + "tabLeave": "Mis círculos" }, "left": { "paragraphQuit": "Dejaste este círculo.", diff --git a/src/locales/fr.json b/src/locales/fr.json index b4b04db..e9b080b 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -91,7 +91,6 @@ "labelDescription": "Description du cercle", "descriptionHelp": "Vous pouvez utiliser Markdown", "labelSubtitle": "Sous-titre du cercle *", - "labelStatus": "Statut *", "subTitle": "Liste des membres :", "tableHeader1": "Nom", "tableHeader2": "Accès", @@ -103,12 +102,12 @@ "buttonMobile": "MENU", "subTitle": "Cercles", "buttonCreate": "Créer un cercle", - "tableHeader1": "Nom", - "tableHeader2": "Administrateurs", - "tableHeader3": "Rejoindre", "buttonQuit": "Quitter", "buttonJoin": "Rejoindre", - "searchBy": "Rechercher un cercle par nom" + "searchBy": "Trouver un cercle", + "searchButton": "Rechercher", + "tabJoin": "Découvrir des cercles", + "tabLeave": "Mes cercles" }, "left": { "paragraphQuit": "Tu as quitté ce cercle.", diff --git a/src/scripts/masonry.js b/src/scripts/masonry.js new file mode 100644 index 0000000..6bdab5f --- /dev/null +++ b/src/scripts/masonry.js @@ -0,0 +1,2 @@ +var grid = document.querySelector('.masonry > div:nth-child(2)'); +console.log(grid); \ No newline at end of file diff --git a/src/styles/admin-circles/_index.scss b/src/styles/admin-circles/_index.scss new file mode 100644 index 0000000..628b774 --- /dev/null +++ b/src/styles/admin-circles/_index.scss @@ -0,0 +1,58 @@ +#admin-circles { + + .masonry>div:nth-child(1) { + /* change from directory (nth-child(2))*/ + display: flex !important; + flex-wrap: wrap; + align-items: center; + + .circle-subtitle-custom { + height: 32px; + } + } + + .segment.hover:hover { + box-shadow: 0 0 16px 0 rgba(46, 63, 88, 0.34); + bottom: 2px; + } + + hubl-admin-circle-name:hover { + text-decoration: underline; + } + + hubl-community-logo { + max-height: 76px; + width: 206px; + max-width: 100%; + } + + .tab.active { + font-weight: bold; + border-bottom: 5px solid var(--color-third); + padding-bottom: 10px; + } + + @media (max-width: 768px) { + + .tabs { + + &>li { + color: #3C3F57; + font-size: 13px; + letter-spacing: 0.18px; + line-height: 17px; + + &>.tab { + border-radius: 5px; + box-shadow: 0 0 6px 0 rgba(46, 63, 88, 0.17); + + &.active { + color: var(--color-primary); + border: 1px solid var(--color-primary); + box-shadow: none; + } + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/index.scss b/src/styles/index.scss index e6edfdd..474a68e 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -42,6 +42,7 @@ solid-display>div { @import 'chat'; @import 'forms'; @import 'communities'; +@import 'admin-circles'; nav#main__menu { @media (min-width: 768.01px) { @@ -125,4 +126,15 @@ hubl-create-contact { color: var(--color-secondary); } } -} \ No newline at end of file + + @media (max-width: 768px) { + + &.sm-full { + + input, + button { + width: 100%; + } + } + } +} diff --git a/src/views/page-admin.pug b/src/views/page-admin.pug index 805c28b..8f2e94f 100644 --- a/src/views/page-admin.pug +++ b/src/views/page-admin.pug @@ -8,7 +8,16 @@ data-view=`admin-${component.route}` no-render ) - include partials/admin/page-admin-circles.pug + - var page = 'join'; + include partials/admin/page-admin-circles-join.pug + div( + id=`admin-${component.route}-leave` + hidden + data-view=`admin-${component.route}-leave` + no-render + ) + - var page = 'leave'; + include partials/admin/page-admin-circles-leave.pug div( id=`admin-${component.route}-create` hidden diff --git a/src/views/partials/admin/page-admin-circles-join.pug b/src/views/partials/admin/page-admin-circles-join.pug new file mode 100644 index 0000000..6c73d66 --- /dev/null +++ b/src/views/partials/admin/page-admin-circles-join.pug @@ -0,0 +1,46 @@ +solid-widget(name=`hubl-admin-circle-join-button`) + template + solid-form( + class='join-button sm-full text-xsmall' + data-src='${value}' + + fields='user.username' + value-user.username='hubl-workaround-493' + widget-user.username='solid-form-hidden' + + submit-button='' + submit-widget="button" + data-trans='submit-button=circle.list.buttonJoin' + ) + hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}` target-src='${value}') + hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}joinable/` target-src='${value}') + hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}` target-src='${value}') + hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}joinable/` target-src='${value}') + hubl-reactivity(bind-user nested-field="circles" target-src='${value}') + +include page-admin-circles.pug + +div.segment.full.padding-small.padding-top-xsmall.sm-padding-xsmall.whitespace-normal + solid-display( + class='segment full children children-third sm-children-full children-margin-bottom-medium sm-children-margin-bottom-xsmall children-padding-right-xsmall children-padding-left-xsmall sm-children-padding-none sm-whitespace-normal masonry pagination' + data-src=`${getComponent('circles').endpoints.get}joinable/` + fields='segment1(segment2(community.community.logo), segment3(name, subtitle, counter, members))' + filtered-by=`admin-circle-filter-${page}` + order-by='name' + paginate-by='4' + loader-id=`loader-admin-circles-${page}` + + class-segment1='segment hover bg-color-white shadow border-rounded-xxsmall full text-top whitespace-normal' + class-segment2='segment block padding-xlarge text-center' + class-segment3='segment full padding-xlarge padding-top-medium sm-padding-medium border-top border-color-grey text-center whitespace-normal' + class-name='segment block one-line-ellipsis text-xlarge text-bold text-color-heading margin-bottom-xsmall whitespace-normal' + class-subtitle='segment two-lines-ellipsis margin-bottom-xlarge sm-margin-bottom-medium whitespace-normal circle-subtitle-custom' + class-counter='segment block margin-bottom-large whitespace-normal' + + widget-community.community.logo='hubl-admin-community-logo' + action-name=`${getRoute(`circles`, true)}-information` + widget-name='hubl-admin-circle-name' + action-counter="counter" + widget-counter='hubl-admin-circle-counter-alternate' + widget-members=`hubl-admin-circle-join-button` + ) diff --git a/src/views/partials/admin/page-admin-circles-leave.pug b/src/views/partials/admin/page-admin-circles-leave.pug new file mode 100644 index 0000000..9dad818 --- /dev/null +++ b/src/views/partials/admin/page-admin-circles-leave.pug @@ -0,0 +1,57 @@ +solid-widget(name=`leave-circle-reactivity`) + template + hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}` target-src='${value}') + hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}joinable/` target-src='${value}') + hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}` target-src='${value}') + hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}joinable/` target-src='${value}') + hubl-reactivity(bind-user nested-field="circles" target-src='${value}') + +solid-widget(name=`hubl-admin-circle-leave-button`) + template + solid-delete( + class='segment sm-full text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-color-secondary bordered' + data-src="${src}" + data-label='' + data-trans='data-label=circle.list.buttonQuit' + ) + hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}` target-src='${src}') + hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}joinable/` target-src='${src}') + hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}` target-src='${src}') + hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}joinable/` target-src='${src}') + hubl-reactivity(bind-user nested-field="circles" target-src='${src}') + solid-display( + data-src="${src}" + fields="circle" + widget-circle=`leave-circle-reactivity` + hidden + ) + +include page-admin-circles.pug + +div.segment.full.padding-small.padding-top-xsmall.sm-padding-xsmall.whitespace-normal + solid-display( + bind-user + nested-field='circles' + class='segment full children children-third sm-children-full children-margin-bottom-medium sm-children-margin-bottom-xsmall children-padding-right-xsmall children-padding-left-xsmall sm-children-padding-none sm-whitespace-normal masonry pagination' + fields='segment1(segment2(circle.community.community.logo), segment3(circle.name, circle.subtitle, counter, leaveButton))' + filtered-by=`admin-circle-filter-${page}` + order-by='name' + paginate-by='4' + loader-id=`loader-admin-circles-${page}` + + class-segment1='segment hover bg-color-white shadow border-rounded-xxsmall full text-top whitespace-normal' + class-segment2='segment block padding-xlarge text-center' + class-segment3='segment full padding-xlarge padding-top-medium sm-padding-medium border-top border-color-grey text-center whitespace-normal' + class-circle.name='segment block one-line-ellipsis text-xlarge text-bold text-color-heading margin-bottom-xsmall whitespace-normal' + class-circle.subtitle='segment two-lines-ellipsis margin-bottom-xlarge sm-margin-bottom-medium whitespace-normal circle-subtitle-custom' + class-counter='segment block margin-bottom-large whitespace-normal' + + widget-circle.community.community.logo='hubl-admin-community-logo' + action-circle.name=`${getRoute(`circles`, true)}-information` + widget-circle.name='hubl-admin-circle-fix-url-name' + action-counter="counter" + widget-counter='hubl-admin-circle-counter-alternate-fix' + action-leaveButton="joinButton" + widget-leaveButton=`hubl-admin-circle-leave-button` + ) + \ No newline at end of file diff --git a/src/views/partials/admin/page-admin-circles.pug b/src/views/partials/admin/page-admin-circles.pug index 174ece0..36a7a93 100644 --- a/src/views/partials/admin/page-admin-circles.pug +++ b/src/views/partials/admin/page-admin-circles.pug @@ -1,15 +1,15 @@ div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.list.title') -div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-normal.whitespace-normal +div.segment.full.padding-small.padding-top-medium.padding-bottom-xsmall.sm-padding-xsmall.sm-padding-top-xxsmall.whitespace-normal - div#loader-admin-circles.loader.loader-top + div(id=`loader-admin-circles-${page}`).loader.loader-top div div div div - div.segment.full.margin-bottom-xlarge.whitespace-normal + div.segment.full.margin-bottom-medium.padding-right-xsmall.padding-left-xsmall.sm-padding-none.whitespace-normal div.segment.half.sm-full h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='circle.list.subTitle') div.segment.half.sm-full.text-right @@ -20,119 +20,36 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-normal.whitespac data-trans='circle.list.buttonCreate' ) - solid-form-search.form.search-form( - id="admin-circle-filter" + solid-form-search.form.search-form.search-button( + id=`admin-circle-filter-${page}` fields='name' label-name='' widget-name='solid-form-label-text' - class-name="segment margin-bottom-medium third sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading" + class-name="segment margin-bottom-medium sm-margin-bottom-none padding-left-xsmall third sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading" submit-button="" submit-widget="button" - data-trans='label-name=circle.list.searchBy;submit-button=goButton' + data-trans='label-name=circle.list.searchBy;submit-button=circle.list.searchButton' ) - .segment.table-wrapper - .table - - div.table-header.bg-color-third.text-color-heading - div.segment.table-cell.third(data-trans='circle.list.tableHeader1') - div.segment.table-cell.third(data-trans='circle.list.tableHeader2') - div.segment.table-cell.third(data-trans='circle.list.tableHeader3') - - solid-widget(name=`leave-circle-reactivity`) - template - hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}` target-src='${value}') - hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}joinable/` target-src='${value}') - hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}` target-src='${value}') - hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}joinable/` target-src='${value}') - hubl-reactivity(bind-user nested-field="circles" target-src='${value}') - - solid-widget(name=`hubl-admin-circle-leave-button`) - template - solid-delete( - class='segment text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-color-secondary bordered' - data-src="${src}" - data-label='' - data-trans='data-label=circle.list.buttonQuit' - ) - hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}` target-src='${src}') - hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}joinable/` target-src='${src}') - hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}` target-src='${src}') - hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}joinable/` target-src='${src}') - hubl-reactivity(bind-user nested-field="circles" target-src='${src}') - solid-display( - data-src="${src}" - fields="circle" - widget-circle=`leave-circle-reactivity` - hidden - ) - - solid-display( - class='table-body' - filtered-by="admin-circle-filter" - bind-user - nested-field='circles' - fields='cell1(name(circle.name), counter, circle.subtitle), cell2(circle.owner), cell3(leaveButton)' - loader-id='loader-admin-circles' - - class-cell1='segment table-cell third whitespace-normal' - class-cell2='segment table-cell third text-center text-left' - class-cell3='segment table-cell third text-center' - - action-circle.name='circle.name' - widget-circle.name='hubl-admin-circle-link-alternate' - class-circle.subtitle='segment full text-ellipsis' - - action-leaveButton="joinButton" - widget-leaveButton=`hubl-admin-circle-leave-button` - widget-circle.owner='hubl-circle-owner' - action-counter="counter" - widget-counter="hubl-admin-circle-counter-alternate" - - order-by="circle.name" - ) - - solid-widget(name=`hubl-admin-circle-join-button`) - template - solid-form( - class='join-button text-xsmall' - data-src='${value}' - - fields='user.username' - value-user.username='hubl-workaround-493' - widget-user.username='solid-form-hidden' - - submit-button='' - submit-widget="button" - data-trans='submit-button=circle.list.buttonJoin' - ) - hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}` target-src='${value}') - hubl-reactivity(data-src=`${getComponent('circles').endpoints.get}joinable/` target-src='${value}') - hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}` target-src='${value}') - hubl-reactivity(data-src=`${getComponent('circles').endpoints.post}joinable/` target-src='${value}') - hubl-reactivity(bind-user nested-field="circles" target-src='${value}') - - solid-display( - class='table-body' - filtered-by="admin-circle-filter" - - data-src=`${getComponent('circles').endpoints.get}joinable/` - fields='cell1(name, counter, subtitle), cell2(owner), cell3(members)' - loader-id='loader-admin-circles' - - class-cell1='segment table-cell third whitespace-normal' - class-cell2='segment table-cell third text-center text-left' - class-cell3='segment table-cell third text-center' - - class-name='segment block margin-bottom-xxsmall text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline text-ellipsis admin-name-ellipsis' - action-name='name' - widget-name='hubl-admin-circle-link' - class-subtitle='segment full text-ellipsis' - - widget-owner='hubl-circle-owner' - widget-members=`hubl-admin-circle-join-button` - action-counter="counter" - widget-counter="hubl-admin-circle-counter" - - order-by="name" - ) + ul(class='segment full margin-top-xsmall sm-margin-top-none padding-right-xsmall padding-left-xsmall sm-padding-none whitespace-normal tabs') + li(class='segment sm-full text-xlarge text-color-heading text-letter-spacing-large margin-right-medium sm-margin-right-none sm-margin-bottom-xsmall') + solid-link(class='segment sm-full sm-padding-xsmall tab' next=`admin-${getRoute('circles', true)}`)&attributes({'class': page == 'join' ? 'active' : false}) + span(class='segment lg-hidden icon icon-globe icon-margin-right-xsmall') + span(data-trans='circle.list.tabJoin') + solid-display( + class="margin-left-xxsmall" + data-src=`${getComponent('circles').endpoints.get}joinable/` + fields="" + counter-template="(${counter})" + ) + li(class='segment sm-full text-xlarge text-color-heading text-letter-spacing-large margin-left-medium sm-margin-left-none') + solid-link(class='segment sm-full sm-padding-xsmall tab' next=`admin-${getRoute('circles', true)}-leave`)&attributes({'class': page == 'leave' ? 'active' : false}) + span(class='segment lg-hidden icon icon-check icon-margin-right-xsmall') + span(data-trans='circle.list.tabLeave') + solid-display( + class="margin-left-xxsmall" + bind-user + nested-field="circles" + fields="" + counter-template="(${counter})" + ) diff --git a/src/views/partials/menu-left.pug b/src/views/partials/menu-left.pug index d56be78..3b285ac 100644 --- a/src/views/partials/menu-left.pug +++ b/src/views/partials/menu-left.pug @@ -19,6 +19,7 @@ solid-router#navbar-router(default-route='dashboard') div.menu-chevron.segment div.menu-icon.icon-arrow-right-circle solid-route(name=`admin-${component.route}-create`) + solid-route(name=`admin-${component.route}-leave`) else div.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading div.segment.margin-right-xxsmall diff --git a/src/views/partials/widgets.pug b/src/views/partials/widgets.pug index e9be69b..b3dbc1c 100644 --- a/src/views/partials/widgets.pug +++ b/src/views/partials/widgets.pug @@ -1,11 +1,14 @@ //- Import your widgets from the `widget`folder here include widgets/hubl-action-community.pug +include widgets/hubl-admin-circle-counter-alternate-fix.pug include widgets/hubl-admin-circle-counter-alternate.pug include widgets/hubl-admin-circle-counter.pug include widgets/hubl-admin-circle-link-alternate.pug include widgets/hubl-admin-circle-link.pug +include widgets/hubl-admin-circle-name.pug include widgets/hubl-admin-community-counter.pug +include widgets/hubl-admin-community-logo.pug include widgets/hubl-admin-project-counter-alternate.pug include widgets/hubl-admin-project-counter.pug include widgets/hubl-admin-project-link-alternate.pug diff --git a/src/views/partials/widgets/hubl-admin-circle-counter-alternate-fix.pug b/src/views/partials/widgets/hubl-admin-circle-counter-alternate-fix.pug new file mode 100644 index 0000000..abef1e3 --- /dev/null +++ b/src/views/partials/widgets/hubl-admin-circle-counter-alternate-fix.pug @@ -0,0 +1,12 @@ +if componentSet.has('admin') && componentSet.has('circles') + solid-widget(name='hubl-admin-circle-counter-alternate-fix') + template + div + span.icon.icon-people.icon-third.icon-large.margin-right-xsmall + solid-display( + fields='' + data-src="${src}" + nested-field="circle.members" + counter-template="\\\${counter}" + ) + span members diff --git a/src/views/partials/widgets/hubl-admin-circle-counter-alternate.pug b/src/views/partials/widgets/hubl-admin-circle-counter-alternate.pug index d7c9ae1..a825573 100644 --- a/src/views/partials/widgets/hubl-admin-circle-counter-alternate.pug +++ b/src/views/partials/widgets/hubl-admin-circle-counter-alternate.pug @@ -1,11 +1,12 @@ if componentSet.has('admin') && componentSet.has('circles') solid-widget(name='hubl-admin-circle-counter-alternate') template - div(style='float:right') + div + span.icon.icon-people.icon-third.icon-large.margin-right-xsmall solid-display( fields='' data-src="${src}" - nested-field="circle.members" + nested-field="members" counter-template="\\\${counter}" ) - span.icon.icon-people.icon-xsmall.margin-right-xxsmall + span members diff --git a/src/views/partials/widgets/hubl-admin-circle-name.pug b/src/views/partials/widgets/hubl-admin-circle-name.pug new file mode 100644 index 0000000..4ab5f4a --- /dev/null +++ b/src/views/partials/widgets/hubl-admin-circle-name.pug @@ -0,0 +1,19 @@ +if componentSet.has('admin') && componentSet.has('circles') + solid-widget(name='hubl-admin-circle-name') + template + solid-link( + data-src="${src || value}" + next=`${getRoute(`circles`, true)}-information` + ) + solid-display( + data-src="${src || value}" + fields="name" + ) + + solid-widget(name='hubl-admin-circle-fix-url-name') + template + solid-display( + data-src="${src}" + fields="circle" + widget-circle='hubl-admin-circle-name' + ) diff --git a/src/views/partials/widgets/hubl-admin-circle-user-counter-alternate.pug b/src/views/partials/widgets/hubl-admin-circle-user-counter-alternate.pug new file mode 100644 index 0000000..e0f196a --- /dev/null +++ b/src/views/partials/widgets/hubl-admin-circle-user-counter-alternate.pug @@ -0,0 +1,12 @@ +if componentSet.has('admin') && componentSet.has('circles') + solid-widget(name='hubl-admin-circle-user-counter-alternate') + template + div + span.icon.icon-people.icon-third.icon-large.margin-right-xsmall + solid-display( + fields='' + data-src="${src}" + nested-field="circle.members" + counter-template="\\\${counter}" + ) + span members diff --git a/src/views/partials/widgets/hubl-admin-community-logo.pug b/src/views/partials/widgets/hubl-admin-community-logo.pug new file mode 100644 index 0000000..5df05e9 --- /dev/null +++ b/src/views/partials/widgets/hubl-admin-community-logo.pug @@ -0,0 +1,3 @@ +if componentSet.has('admin') && componentSet.has('circles') + solid-widget(name='hubl-admin-community-logo') + template ${value != "" ? `community's logo` : `
`} \ No newline at end of file diff --git a/src/views/partials/widgets/hubl-community-logo.pug b/src/views/partials/widgets/hubl-community-logo.pug new file mode 100644 index 0000000..63d9d63 --- /dev/null +++ b/src/views/partials/widgets/hubl-community-logo.pug @@ -0,0 +1,2 @@ +solid-widget(name='hubl-community-logo') + template ${value != "" ? `` : ``} \ No newline at end of file