diff --git a/src/page-circle.pug b/src/page-circle.pug
index ff3cf98cf476c6846eaec9a0bfad79977a79c797..26091f324081832df9c6dc0d629676cc554c3129 100644
--- a/src/page-circle.pug
+++ b/src/page-circle.pug
@@ -1,18 +1,5 @@
.views-container.sidebar-is-closed
.content-box
- solid-ac-checker(permission='acl:Read', bind-resources)
- div.segment.padding-large.border-bottom.border-color-grey.clearfix
- solid-display.text-xxlarge.text-letter-spacing-large(
- bind-resources
- fields='name, dash, description'
-
- value-dash=' - '
-
- class-name='text-color-heading text-bold'
- class-dash='text-color-heading text-bold'
- )
- div.segment.lg-hidden
- button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='circle.menuRight.buttonMobile')
div.content-box__height
solid-ac-checker(permission='acl:Read', bind-resources)
#circle-chat(hidden, data-view="circle-chat")
diff --git a/src/views/circle/page-circle-edit.pug b/src/views/circle/page-circle-edit.pug
index c56d36aea903fd2e201e48523da4b93b09b649e7..cdfa01eac4bc6b59943732b2bb56703d5d4a1fe8 100644
--- a/src/views/circle/page-circle-edit.pug
+++ b/src/views/circle/page-circle-edit.pug
@@ -1,32 +1,42 @@
-div.content-box__info
+solid-ac-checker(permission='acl:Read', bind-resources)
+ div.segment.padding-large.border-bottom.border-color-grey.clearfix
+ div.segment.lg-half.float-left
+ solid-display.text-xxlarge.text-letter-spacing-large(
+ bind-resources
+ fields='name, dash, description'
+
+ value-dash=' - '
+
+ class-name='text-color-heading text-bold'
+ class-dash='text-color-heading text-bold'
+ )
+ div.segment.lg-half.float-left.text-right
+ solid-link(class="backlink right", bind-resources, next='circle-profile' data-trans='circle.edit.backlink')
+div.segment.padding-large
include ../../templates/hubl-user-avatar.pug
solid-widget(name="circle-edit-members-delete")
template
solid-ac-checker(permission="acl:Delete" data-src="${src}")
solid-delete(
- class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
+ class='button text-xsmall text-bold text-uppercase color-secondary bordered'
data-src="${src}"
data-label=''
data-trans='data-label=circle.edit.buttonDelete'
)
- solid-link(class="backlink right", bind-resources, next='circle-profile' data-trans='circle.edit.backlink')
-
- solid-ac-checker(permission='acl:Write', bind-resources)
- h1(data-trans='circle.edit.title')
-
+ solid-ac-checker.segment.clearfix(permission='acl:Write', bind-resources)
div#loader-circle-edit.loader.loader-top
div
div
div
div
- solid-form.form.button-register(
+ solid-form.button-register(
bind-resources
- fields='status, line-1(name, owner), description'
+ fields='status, name, owner, description'
required-status
required-name
required-owner
@@ -36,16 +46,17 @@ div.content-box__info
label-status=''
widget-status='hubl-status'
- label-name=''
- label-owner=''
- label-description=''
+ label-name='Name'
+ label-owner='Owner'
+ label-description='Description'
- class-name='form-label is-light is-half-width input-text-like'
- class-owner='form-label is-light is-half-width member-select color'
- class-description='form-label is-light is-full-width input-text-like'
- class-status='form-label is-light is-full-width member-select color'
+ class-name='segment margin-bottom-medium lg-half padding-right-small text-small text-semibold text-uppercase text-color-heading float-left'
+ class-owner='segment margin-bottom-medium lg-half padding-left-small text-small text-semibold text-uppercase text-color-heading float-left'
+ class-description='segment margin-bottom-medium lg-full text-small text-semibold text-uppercase text-color-heading'
+ class-status='segment margin-bottom-medium lg-half padding-right-small text-small text-semibold text-uppercase text-color-heading icon icon-magnify'
widget-owner='solid-form-dropdown-autocompletion-label'
+ widget-description='solid-form-textarea'
partial=''
@@ -55,7 +66,7 @@ div.content-box__info
data-trans='label-name=circle.edit.labelStatus;label-name=circle.edit.labelName;label-owner=circle.edit.labelOwner;label-description=circle.edit.labelDescription;submit-button=circle.edit.buttonSubmit'
)
- h2(data-trans='circle.edit.subTitle')
+ h3.text-color-heading.text-bold.text-letter-spacing-large(data-trans='circle.edit.subTitle')
solid-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
solid-form.block.select-add(
@@ -73,21 +84,27 @@ div.content-box__info
.table-wrapper
.table
- div.table-header.grey-color
- div.w280(data-trans='circle.edit.tableHeader1')
- div.w162(data-trans='circle.edit.tableHeader2')
+ div.table-header.bg-color-third.text-color-heading
+ div.table-cell.w280(data-trans='circle.edit.tableHeader1')
+ div.table-cell.w162(data-trans='circle.edit.tableHeader2')
solid-display(
class='table-body'
bind-resources
nested-field='members'
- fields='classGroup(classGrid(user.account.picture, sup(user.name, user.groups), sub(user.communities))), self'
+ fields='classGroup(classGrid(user.account.picture, content(name-and-icon(user.name, user.groups), sub(atom, user.communities)))), self'
loader-id='loader-circle-edit'
- class-classGroup='w280 cell border cell-with-id-card user-thumb is-spaced'
- class-user.account.picture='user-thumb__picture avatar'
- class-user.name='user-thumb__name'
- class-user.groups='user-thumb__groups'
+ class-classGroup='table-cell w-280'
+ class-self='table-cell w-162'
+ class-classGrid='segment margin-left-xlarge user-thumb'
+ class-user.account.picture='user-thumb-avatar'
+ class-content='user-thumb-content'
+ class-name-and-icon='user-thumb-content__name-and-icon'
+ class-user.name='name'
+ class-user.groups='tag color-primary'
+ class-sub='user-thumb-content__sub-text community'
+ class-atom='icon icon-primary mdi-atom'
multiple-user.communities
multiple-user.communities-fields="community.name"
@@ -101,5 +118,4 @@ div.content-box__info
)
//- Only to show the table grid
- div.w162.cell.border
-
+ div.table-cell.w162
diff --git a/src/views/circle/page-circle-profile.pug b/src/views/circle/page-circle-profile.pug
index 2c60d740a9363e3a179fa903c6337da5b59bb1e5..ccb1d6c1961c585824bc7dac73d51cfde84b5138 100644
--- a/src/views/circle/page-circle-profile.pug
+++ b/src/views/circle/page-circle-profile.pug
@@ -3,6 +3,19 @@ solid-router(default-route='circle-profile', hidden)
solid-route(name='circle-edit')
#circle-profile(hidden, data-view="circle-profile")
+ solid-ac-checker(permission='acl:Read', bind-resources)
+ div.segment.padding-large.border-bottom.border-color-grey.clearfix
+ solid-display.text-xxlarge.text-letter-spacing-large(
+ bind-resources
+ fields='name, dash, description'
+
+ value-dash=' - '
+
+ class-name='text-color-heading text-bold'
+ class-dash='text-color-heading text-bold'
+ )
+ div.segment.lg-hidden
+ button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='circle.menuRight.buttonMobile')
solid-widget(name='hubl-circle-team-contact')
template