diff --git a/src/page-admin.pug b/src/page-admin.pug index 2d29776..fb62e26 100644 --- a/src/page-admin.pug +++ b/src/page-admin.pug @@ -1,4 +1,4 @@ -.views-container.sidebar-is-closed.bg-color-white +.views-container.sidebar-is-closed if endpoints.circles || (endpoints.get && endpoints.get.circles) #admin-circles(hidden, data-view="admin-circles") include views/admin/page-admin-circles.pug diff --git a/src/page-project.pug b/src/page-project.pug index ff4ff8b..13b40a3 100644 --- a/src/page-project.pug +++ b/src/page-project.pug @@ -1,26 +1,24 @@ -.views-container.sidebar-is-closed.bg-color-white - .content-box - .content-box__height - solid-ac-checker(permission='acl:Read', bind-resources) - #project-chat(hidden, data-view="project-chat") - include views/project/page-project-chat.pug - #project-information.content-box__height(hidden, data-view="project-information") - include views/project/page-project-profile.pug - #project-picture(hidden, data-view="project-picture") - include views/project/page-project-picture.pug +.views-container.sidebar-is-closed + solid-ac-checker(permission='acl:Read', bind-resources) + #project-chat(hidden, data-view="project-chat") + include views/project/page-project-chat.pug + #project-information(hidden, data-view="project-information") + include views/project/page-project-profile.pug + #project-picture(hidden, data-view="project-picture") + include views/project/page-project-picture.pug nav.jsRightMenu(role='navigation') - solid-router.text-color-heading.reverse.text-bold(default-route='project-chat') + solid-router.text-color-heading.text-bold(default-route='project-chat') ul - li.segment.padding-small.text-right.jsOffsiteToggle - span.icon.icon-arrow-right.xxsmall.icon-margin-right-xxsmall + li.segment.padding-small.text-right.text-normal.jsOffsiteToggle + span.icon.icon-arrow-right.xxsmall.margin-right-xxsmall a(data-trans='project.menuRight.fold') solid-route(name='project-chat') - li.segment.padding-large - span.icon.ci-chat.large.icon-margin-right + li.segment.padding-medium + span.icon.ci-chat.icon-xlarge.margin-right-small a(data-trans='project.menuRight.chat') solid-route(name='project-information') - li.segment.padding-large - span.icon.ci-information.large.icon-margin-right + li.segment.padding-medium + span.icon.ci-information.icon-xlarge.margin-right-small a(data-trans='project.menuRight.information') solid-route(name='project-picture' use-id) diff --git a/src/styles/hubl-app/content/_index.scss b/src/styles/hubl-app/content/_index.scss index c1bef4e..cfd8a43 100644 --- a/src/styles/hubl-app/content/_index.scss +++ b/src/styles/hubl-app/content/_index.scss @@ -1,3 +1,97 @@ main { height: calc(100vh - 72px); +} + +/* Styles of the right-hand menu + pages with that menu */ +.with-sidebar { + flex-grow: 1; + display: flex; + flex-direction: row; + align-items: stretch; + /*margin-top: 50px;*/ + overflow: hidden; + + /*@media($large) { + margin-top: 0; + }*/ + + .views-container { + flex: 1 0 0; + /*-webkit-backface-visibility: hidden;*/ + + &.sidebar-is-closed { + + @media($large) { + margin-left: -152px; + transform: translate(152px); + } + } + } + + >div { + transition: all 0.5s; + } + + nav { + background: #F1F1F1; + transition: all 0.5s; + width: 217px; + + ul { + + li { + border-bottom: 1px solid #D6CECE; + + &>a { + vertical-align: super; + } + } + &>li:first-child>a { + vertical-align: middle; + } + + >solid-route { + + &[active]>li { + background-color: var(--color-heading); + color: white; + } + &:hover:not([active])>li { + background: #E4E4E4; + } + } + } + + &.jsRightMenu { + display: none; + + @media($large) { + display: block; + } + } + + &.jsRightMenu:not([open]) { + transform: translate(152px); + } + + &.jsRightMenu[open] { + + @media($large) { + display: block; + bottom: 0; + box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.12); + min-width: 60%; + position: fixed; + right: 0; + top: 50px; + z-index: 1; + } + @media($large) { + box-shadow: none; + min-width: unset; + position: unset; + z-index: unset; + } + } + } } \ No newline at end of file diff --git a/src/styles/hubl-framework/commons/_index.scss b/src/styles/hubl-framework/commons/_index.scss index 5880cf9..23979fd 100644 --- a/src/styles/hubl-framework/commons/_index.scss +++ b/src/styles/hubl-framework/commons/_index.scss @@ -4,4 +4,4 @@ @import 'borders'; @import 'shadows'; @import 'user-thumb'; -@import 'lists' +@import 'lists'; diff --git a/src/styles/hubl-framework/commons/colors.scss b/src/styles/hubl-framework/commons/colors.scss index a246438..79ff7ff 100644 --- a/src/styles/hubl-framework/commons/colors.scss +++ b/src/styles/hubl-framework/commons/colors.scss @@ -65,17 +65,6 @@ } } -.bg-color-grey { - background-color: #F1F1F1; - - &.active:active { - background-color: var(--color-heading); - } - &.hover:hover:not(:active) { - background-color: #E4E4E4; - } -} - .bg-color-white { background: white; } diff --git a/src/styles/hubl-framework/icons/custom-icons.scss b/src/styles/hubl-framework/icons/custom-icons.scss index b8c030c..7c51b64 100644 --- a/src/styles/hubl-framework/icons/custom-icons.scss +++ b/src/styles/hubl-framework/icons/custom-icons.scss @@ -63,7 +63,6 @@ $ci-icons: ( display: inline-block; /* use !important to prevent issues with browser extensions that change fonts */ font-family: '#{$ci-font-name}' !important; - font-size: 25px; font-style: normal; font-weight: normal; line-height: 1; diff --git a/src/views/admin/page-admin-projects.pug b/src/views/admin/page-admin-projects.pug index 5989c44..a1b4f79 100644 --- a/src/views/admin/page-admin-projects.pug +++ b/src/views/admin/page-admin-projects.pug @@ -1,162 +1,161 @@ -.content-box.full-width - solid-router(default-route='admin-project-list', hidden) - solid-route(name='admin-project-list') - solid-route(name='admin-project-create') - solid-route(name='project-left') +solid-router(default-route='admin-project-list', hidden) + solid-route(name='admin-project-list') + solid-route(name='admin-project-create') + solid-route(name='project-left') - #project-left(hidden, data-view="project-left") - include ../project/page-project-left.pug +#project-left(hidden, data-view="project-left") + include ../project/page-project-left.pug - #admin-project-list.content-box__height(hidden, data-view="admin-project-list") - include ../../templates/hubl-user-avatar.pug +#admin-project-list(hidden, data-view="admin-project-list") + include ../../templates/hubl-user-avatar.pug - div.segment.padding-top-xsmall.padding-right-large.padding-bottom-xsmall.padding-left-large.border-bottom.border-color-grey.text-color-heading - div - h2.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='project.list.title') - div.segment.lg-hidden - button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='project.list.buttonMobile') + div.segment.padding-top-xsmall.padding-right-large.padding-bottom-xsmall.padding-left-large.border-bottom.border-color-grey.text-color-heading + div + h2.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='project.list.title') + div.segment.lg-hidden + button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='project.list.buttonMobile') - div.segment.padding-large - div.segment.margin-bottom-medium.clearfix - div.segment.lg-half.float-left - h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='project.list.subTitle') - div.segment.lg-half.float-left.text-right.padding-top-xxsmall - solid-ac-checker(data-src=`${endpoints.projects || (endpoints.post && endpoints.post.projects)}`, permission='acl:Append') - solid-link( - class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-plus' - next='admin-project-create' - data-trans='project.list.buttonCreate' + div.segment.padding-large + div.segment.margin-bottom-medium.clearfix + div.segment.lg-half.float-left + h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='project.list.subTitle') + div.segment.lg-half.float-left.text-right.padding-top-xxsmall + solid-ac-checker(data-src=`${endpoints.projects || (endpoints.post && endpoints.post.projects)}`, permission='acl:Append') + solid-link( + class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-plus' + next='admin-project-create' + data-trans='project.list.buttonCreate' + ) + + .table-wrapper + .table + + div.table-header.bg-color-third.text-color-heading + div.table-cell.w280(data-trans='project.list.tableHeader1') + div.table-cell.w280(data-trans='project.list.tableHeader2') + div.table-cell.w280(data-trans='project.list.tableHeader3') + div.table-cell.w230(data-trans='project.list.tableHeader4') + + solid-widget(name="hubl-admin-project-leave-button") + template + solid-delete( + class='button text-xsmall text-bold text-uppercase color-secondary bordered' + data-src="${src}" + data-label='' + data-trans='data-label=project.list.buttonQuit' + ) + hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}` target-src='${src}') + hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src='${src}') + hubl-reactivity(bind-user nested-field="projects" target-src='${src}') + if (endpoints.post && endpoints.post.projects) && (endpoints.get && endpoints.get.projects) + hubl-reactivity(data-src=`${endpoints.post.projects}joinable/` target-src=`${src}`) + hubl-reactivity(data-src=`${endpoints.post.projects}` target-src=`${src}`) + + solid-widget(name='hubl-project-captain') + template + solid-display.segment.margin-left-xlarge.user-thumb( + data-src='${await value}' + fields='account.picture, content(name-and-icon(name), sub(username))' + + class-account.picture='user-thumb-avatar' + class-content='user-thumb-content' + class-name-and-icon='user-thumb-content__name-and-icon' + class-name='name' + class-sub='user-thumb-content__sub-text username' + class-username='' + + widget-account.picture='hubl-user-avatar' ) - .table-wrapper - .table + solid-widget(name='hubl-project-admins') + template + solid-display( + data-src='${value}' + fields='user' + search-fields='is_admin' + search-value-is_admin='true' + search-widget-is_admin='solid-form-hidden' + widget-user='hubl-project-captain' + ) - div.table-header.bg-color-third.text-color-heading - div.table-cell.w280(data-trans='project.list.tableHeader1') - div.table-cell.w280(data-trans='project.list.tableHeader2') - div.table-cell.w280(data-trans='project.list.tableHeader3') - div.table-cell.w230(data-trans='project.list.tableHeader4') + solid-widget(name='hubl-admin-project-leave-button') + template + solid-delete( + class='button text-xsmall text-bold text-uppercase color-secondary bordered' + data-src="${src}" + data-label='' + data-trans='data-label=project.list.buttonQuit' + ) - solid-widget(name="hubl-admin-project-leave-button") - template - solid-delete( - class='button text-xsmall text-bold text-uppercase color-secondary bordered' - data-src="${src}" - data-label='' - data-trans='data-label=project.list.buttonQuit' - ) - hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}` target-src='${src}') - hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src='${src}') - hubl-reactivity(bind-user nested-field="projects" target-src='${src}') - if (endpoints.post && endpoints.post.projects) && (endpoints.get && endpoints.get.projects) - hubl-reactivity(data-src=`${endpoints.post.projects}joinable/` target-src=`${src}`) - hubl-reactivity(data-src=`${endpoints.post.projects}` target-src=`${src}`) + solid-display( + class='table-body' - solid-widget(name='hubl-project-captain') - template - solid-display.segment.margin-left-xlarge.user-thumb( - data-src='${await value}' - fields='account.picture, content(name-and-icon(name), sub(username))' + bind-user + nested-field="projects" + fields='project.name, project.members, project.captain, leaveButton' + loader-id='loader-admin-projects' - class-account.picture='user-thumb-avatar' - class-content='user-thumb-content' - class-name-and-icon='user-thumb-content__name-and-icon' - class-name='name' - class-sub='user-thumb-content__sub-text username' - class-username='' + class-project.name='table-cell w280 text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline' + class-project.members='table-cell w280' + class-project.captain='table-cell w280' + class-leaveButton='table-cell w230' - widget-account.picture='hubl-user-avatar' - ) + action-leaveButton="joinButton" + widget-leaveButton="hubl-admin-project-leave-button" - solid-widget(name='hubl-project-admins') - template - solid-display( - data-src='${value}' - fields='user' - search-fields='is_admin' - search-value-is_admin='true' - search-widget-is_admin='solid-form-hidden' - widget-user='hubl-project-captain' - ) + widget-project.captain='hubl-project-captain' + widget-project.members='hubl-project-admins' - solid-widget(name='hubl-admin-project-leave-button') - template - solid-delete( - class='button text-xsmall text-bold text-uppercase color-secondary bordered' - data-src="${src}" - data-label='' - data-trans='data-label=project.list.buttonQuit' - ) + order-by="project.name" + ) - solid-display( - class='table-body' + solid-widget(name='hubl-admin-project-join-button') + template + solid-form( + class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-arrow-right-circle' + data-src='${src}' + nested-field="members" - bind-user - nested-field="projects" - fields='project.name, project.members, project.captain, leaveButton' - loader-id='loader-admin-projects' + fields='user.username' + value-user.username='hubl-workaround-493' + widget-user.username='solid-form-hidden' - class-project.name='table-cell w280 text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline' - class-project.members='table-cell w280' - class-project.captain='table-cell w280' - class-leaveButton='table-cell w230' + submit-button='' + data-trans='submit-button=project.list.buttonJoin' + ) + hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}` target-src='${src}') + hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src='${src}') + hubl-reactivity(bind-user nested-field="projects" target-src='${src}') + if (endpoints.post && endpoints.post.projects) && (endpoints.get && endpoints.get.projects) + hubl-reactivity(data-src=`${endpoints.post.projects}joinable/` target-src=`${value}`) + hubl-reactivity(data-src=`${endpoints.post.projects}` target-src=`${value}`) - action-leaveButton="joinButton" - widget-leaveButton="hubl-admin-project-leave-button" + solid-display( + class='table-body' - widget-project.captain='hubl-project-captain' - widget-project.members='hubl-project-admins' + data-src=`${endpoints.projects || endpoints.get.projects}joinable/` + fields='name, members, captain, joinButton' + loader-id='loader-admin-projects' - order-by="project.name" - ) + class-name='table-cell w280 text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline' + class-members='table-cell w280' + class-captain='table-cell w280' + class-joinButton='table-cell w230' - solid-widget(name='hubl-admin-project-join-button') - template - solid-form( - class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-arrow-right-circle' - data-src='${src}' - nested-field="members" + action-joinButton="joinButton" # Workaround: I need members two times + widget-joinButton="hubl-admin-project-join-button" - fields='user.username' - value-user.username='hubl-workaround-493' - widget-user.username='solid-form-hidden' + widget-captain='hubl-project-captain' + widget-members='hubl-project-admins' - submit-button='' - data-trans='submit-button=project.list.buttonJoin' - ) - hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}` target-src='${src}') - hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src='${src}') - hubl-reactivity(bind-user nested-field="projects" target-src='${src}') - if (endpoints.post && endpoints.post.projects) && (endpoints.get && endpoints.get.projects) - hubl-reactivity(data-src=`${endpoints.post.projects}joinable/` target-src=`${value}`) - hubl-reactivity(data-src=`${endpoints.post.projects}` target-src=`${value}`) + order-by="name" + ) - solid-display( - class='table-body' + div#loader-admin-projects.loader.loader-top + div + div + div + div - data-src=`${endpoints.projects || endpoints.get.projects}joinable/` - fields='name, members, captain, joinButton' - loader-id='loader-admin-projects' - - class-name='table-cell w280 text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline' - class-members='table-cell w280' - class-captain='table-cell w280' - class-joinButton='table-cell w230' - - action-joinButton="joinButton" # Workaround: I need members two times - widget-joinButton="hubl-admin-project-join-button" - - widget-captain='hubl-project-captain' - widget-members='hubl-project-admins' - - order-by="name" - ) - - div#loader-admin-projects.loader.loader-top - div - div - div - div - - #admin-project-create.content-box__height(hidden, data-view="admin-project-create") - include page-admin-projects-create.pug +#admin-project-create(hidden, data-view="admin-project-create") + include page-admin-projects-create.pug diff --git a/src/views/project/page-project-profile.pug b/src/views/project/page-project-profile.pug index 935dc55..931d527 100644 --- a/src/views/project/page-project-profile.pug +++ b/src/views/project/page-project-profile.pug @@ -122,5 +122,5 @@ solid-router(default-route='project-profile', hidden) widget-user.account.picture='hubl-user-avatar' ) -#project-edit.content-box__height(hidden, data-view="project-edit") +#project-edit(hidden, data-view="project-edit") include page-project-edit.pug