From c8f393d65276b6ee9f7fec1ab19ec44d09a40230 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Sat, 5 Dec 2020 19:26:52 +0100
Subject: [PATCH] feature: admin-circle-list
---
src/index.pug | 78 +++++++++++++++++--
src/styles/hubl-framework/buttons/_index.scss | 9 ++-
src/styles/hubl-framework/commons/_index.scss | 1 +
.../hubl-framework/commons/loaders.scss | 72 +++++++++++++++++
src/styles/hubl-framework/commons/texts.scss | 20 ++++-
.../hubl-framework/commons/user-thumb.scss | 12 ++-
src/styles/hubl-framework/tables/tables.scss | 23 +++++-
src/styles/index.scss | 1 +
src/views/admin/page-admin-circles.pug | 41 +++++-----
9 files changed, 220 insertions(+), 37 deletions(-)
create mode 100644 src/styles/hubl-framework/commons/loaders.scss
diff --git a/src/index.pug b/src/index.pug
index 6719d1fa..2f6a6406 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -20,16 +20,80 @@ html(lang="en")
include header.pug
nav#main__menu.segment.bg-color-heading.lg-quarter.float-left
- p Hi!
+ include menu-left.pug
+
+ main#content.segment.bg-color-third.lg-three-quarter.float-left.notLoggedIn
+ if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
+ #dashboard(hidden, data-view="dashboard").no-sidebar.with-padding
+ include page-dashboard.pug
+
+ if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
+ #members(hidden, data-view="members").no-sidebar.with-padding
+ include page-directory.pug
+
+ if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
+ #job-offers(hidden, data-view="job-offers").no-sidebar.with-padding
+ if (endpoints.post && endpoints.post.joboffers) && (endpoints.get && endpoints.get.joboffers)
+ hubl-reactivity(data-src=`${endpoints.post.joboffers}current/` target-src=`${endpoints.get.joboffers}`)
+ hubl-reactivity(data-src=`${endpoints.post.joboffers}expired/` target-src=`${endpoints.get.joboffers}`)
+ hubl-reactivity(data-src=`${endpoints.post.joboffers}` target-src=`${endpoints.get.joboffers}`)
+ hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}`)
+ hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/`)
+ hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}`)
+ hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/`)
+ hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}`)
+ hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}current/`)
+ include page-job-offers.pug
+
+ if endpoints.projects || (endpoints.get && endpoints.get.projects)
+ #project(hidden, data-view="project").segment.lg-full.with-sidebar
+ if (endpoints.post && endpoints.post.projects) && (endpoints.get && endpoints.get.projects)
+ hubl-reactivity(data-src=`${endpoints.post.projects}joinable/` target-src=`${endpoints.get.projects}`)
+ hubl-reactivity(data-src=`${endpoints.post.projects}` target-src=`${endpoints.get.projects}`)
+ hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.post.projects}`)
+ hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.post.projects}joinable/`)
+ hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src=`${endpoints.projects || endpoints.get.projects}`)
+ hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.projects || endpoints.get.projects}`)
+ hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.projects || endpoints.get.projects}joinable/`)
+ include page-project.pug
+
+ if endpoints.circles || (endpoints.get && endpoints.get.circles)
+ #circle(hidden, data-view="circle").with-sidebar
+ if (endpoints.post && endpoints.post.circles) && (endpoints.get && endpoints.get.circles)
+ hubl-reactivity(data-src=`${endpoints.post.circles}joinable/` target-src=`${endpoints.get.circles}`)
+ hubl-reactivity(data-src=`${endpoints.post.circles}` target-src=`${endpoints.get.circles}`)
+ hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.post.circles}`)
+ hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.post.circles}joinable/`)
+ hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}joinable/` target-src=`${endpoints.circles || endpoints.get.circles}`)
+ 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, data-view="messages").with-sidebar
+ include page-messages.pug
+
+ if endpoints.polls || (endpoints.get && endpoints.get.polls)
+ #polls(hidden, data-view="polls").with-sidebar
+ include page-polls.pug
+
+ if endpoints.events || (endpoints.get && endpoints.get.events)
+ #events(hidden, data-view="events")
+ include page-events.pug
+
+ if endpoints.resources || (endpoints.get && endpoints.get.resources)
+ #resources(hidden, data-view="resources")
+ include page-resources.pug
+
+ #admin(hidden, data-view="admin").segment.lg-full.with-sidebar
+ include page-admin.pug
+
+ #about(data-view="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))
- main#content.segment.bg-color-third.lg-three-quarter.float-left
- p Hello
- //- header#header.header.is-spaced(role='banner')
- include header.pug
- //-header#header.segment.bg-color-white.shadow
- include header.pug
//-nav#main__menu.segment.float-left.bg-color-heading.text-small.text-color-white.left-menu.jsLeftMenu
include menu-left.pug
diff --git a/src/styles/hubl-framework/buttons/_index.scss b/src/styles/hubl-framework/buttons/_index.scss
index 94871091..524cfaf1 100644
--- a/src/styles/hubl-framework/buttons/_index.scss
+++ b/src/styles/hubl-framework/buttons/_index.scss
@@ -8,10 +8,13 @@ a {
display: inline-block;
padding: 0;
+ form {
+ display: inline-block;
+ }
+
&.button {
- padding: 8px 20px;
+ padding: 7.5px 20px;
border-radius: 16.5px;
- height: 33px;
&.rounded {
border-radius: 50%;
@@ -25,7 +28,7 @@ a {
}
&.icon::before {
font-size: 15px;
- margin-right: 10px;
+ margin-right: 6px;
}
&.color-primary {
background-color: white;
diff --git a/src/styles/hubl-framework/commons/_index.scss b/src/styles/hubl-framework/commons/_index.scss
index 33ac785c..5880cf9d 100644
--- a/src/styles/hubl-framework/commons/_index.scss
+++ b/src/styles/hubl-framework/commons/_index.scss
@@ -1,4 +1,5 @@
@import 'colors';
+@import 'loaders';
@import 'texts';
@import 'borders';
@import 'shadows';
diff --git a/src/styles/hubl-framework/commons/loaders.scss b/src/styles/hubl-framework/commons/loaders.scss
new file mode 100644
index 00000000..e6276d4e
--- /dev/null
+++ b/src/styles/hubl-framework/commons/loaders.scss
@@ -0,0 +1,72 @@
+.loader {
+ margin: 0 auto;
+ position: relative;
+ width: 80px;
+ height: 20px;
+
+ &.loader-top {
+ top: 30px;
+ }
+
+ div {
+ position: absolute;
+ width: 13px;
+ height: 13px;
+ border-radius: 50%;
+ background: var(--color-menu-background);
+ animation-timing-function: cubic-bezier(0, 1, 1, 0);
+ }
+
+ &.loader-menu div {
+ width: 8px;
+ height: 8px;
+ background: var(--color-menu-text);
+ }
+
+ div:nth-child(1) {
+ left: 8px;
+ animation: lds-ellipsis1 0.6s infinite;
+ }
+
+ div:nth-child(2) {
+ left: 8px;
+ animation: lds-ellipsis2 0.6s infinite;
+ }
+
+ div:nth-child(3) {
+ left: 32px;
+ animation: lds-ellipsis2 0.6s infinite;
+ }
+
+ div:nth-child(4) {
+ left: 56px;
+ animation: lds-ellipsis3 0.6s infinite;
+ }
+}
+
+@keyframes lds-ellipsis1 {
+ 0% {
+ transform: scale(0);
+ }
+ 100% {
+ transform: scale(1);
+ }
+}
+
+@keyframes lds-ellipsis3 {
+ 0% {
+ transform: scale(1);
+ }
+ 100% {
+ transform: scale(0);
+ }
+}
+
+@keyframes lds-ellipsis2 {
+ 0% {
+ transform: translate(0, 0);
+ }
+ 100% {
+ transform: translate(24px, 0);
+ }
+}
diff --git a/src/styles/hubl-framework/commons/texts.scss b/src/styles/hubl-framework/commons/texts.scss
index 1b2e8567..cebd3eeb 100644
--- a/src/styles/hubl-framework/commons/texts.scss
+++ b/src/styles/hubl-framework/commons/texts.scss
@@ -19,16 +19,28 @@
font-size: 18px;
}
&-normal {
- font-weight: 400;
+ *,
+ & {
+ font-weight: 400;
+ }
}
&-semibold {
- font-weight: 600;
+ *,
+ & {
+ font-weight: 600;
+ }
}
&-bold {
- font-weight: 700;
+ *,
+ & {
+ font-weight: 700;
+ }
}
&-uppercase {
- text-transform: uppercase;
+ *,
+ & {
+ text-transform: uppercase;
+ }
}
&-underline {
text-decoration: underline;
diff --git a/src/styles/hubl-framework/commons/user-thumb.scss b/src/styles/hubl-framework/commons/user-thumb.scss
index c4cbead6..70f515d2 100644
--- a/src/styles/hubl-framework/commons/user-thumb.scss
+++ b/src/styles/hubl-framework/commons/user-thumb.scss
@@ -15,7 +15,7 @@
flex: 0 0 auto;
height: 50px;
width: 50px;
- margin-right: 16px;
+ margin-right: 15px;
border-radius: 50%;
overflow: hidden;
@@ -34,6 +34,7 @@
position: absolute;
top: 0;
left: 0;
+ border-radius: 50%;
}
>object {
max-height: 40%;
@@ -65,8 +66,13 @@
}
}
- .user-thumb__sub-text {
- color: red;
+ .user-thumb-content__sub-text {
+ display: flex;
+ font-size: 12px;
+
+ &::before {
+ content: "@";
+ }
}
}
}
diff --git a/src/styles/hubl-framework/tables/tables.scss b/src/styles/hubl-framework/tables/tables.scss
index 71aeaa4d..37e02531 100644
--- a/src/styles/hubl-framework/tables/tables.scss
+++ b/src/styles/hubl-framework/tables/tables.scss
@@ -1,7 +1,28 @@
.table-wrapper {
- overflow: auto;
position: relative;
width: 100%;
+
+ /* Bottom scrollbar */
+ overflow: auto;
+ height: auto;
+ -webkit-overflow-scrolling: touch;
+ -ms-overflow-style: none;
+ scrollbar-width: thin;
+ scrollbar-color: var(--color-heading) var(--color-grey);
+
+ &::-webkit-scrollbar-track {
+ background-color: var(--color-grey);
+ border-radius: 10px;
+ }
+
+ &::-webkit-scrollbar {
+ height: 5px;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-color: var(--color-heading);
+ border-radius: 10px;
+ }
.table {
border-collapse: collapse;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index e9b94354..6b6673da 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -5,6 +5,7 @@
:root {
+ color: #636363;
font-size: 14px;
}
@import 'hubl-framework/_index';
diff --git a/src/views/admin/page-admin-circles.pug b/src/views/admin/page-admin-circles.pug
index 4001bb4c..01ee2e21 100644
--- a/src/views/admin/page-admin-circles.pug
+++ b/src/views/admin/page-admin-circles.pug
@@ -11,38 +11,41 @@
solid-widget(name='hubl-circle-owner')
template
- solid-display.user-thumb.block.is-spaced(
+ solid-display.segment.margin-left-xlarge.user-thumb(
data-src='${await value}'
- fields='account.picture, sup(name), sub(username)'
+ fields='account.picture, content(name-and-icon(name), sub(username))'
- class-account.picture='avatar user-thumb__picture'
- class-name='user-thumb__name'
- class-username='user-thumb__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'
+ class-username=''
widget-account.picture='hubl-user-avatar'
)
- div.segment.padding-xlarge.border-bottom
+ 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='circle.list.title')
div.segment.lg-hidden
button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='circle.list.buttonMobile')
- div.segment.padding-xlarge
- div.segment.padding-y-small.margin-bottom.clearfix
+ div.segment.padding-large
+ div.segment.margin-bottom-medium.clearfix
div.segment.lg-half.float-left
- h3.text-large.text-bold.text-letter-spacing-large(data-trans='circle.list.subTitle')
- div.segment.lg-half.float-left.text-right
+ h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='circle.list.subTitle')
+ div.segment.lg-half.float-left.text-right.padding-top-xxsmall
solid-ac-checker(data-src=`${endpoints.circles || (endpoints.post && endpoints.post.circles)}`, permission='acl:Append')
solid-link(
- class='button text-bolder text-uppercase reversed button-secondary bordered icon icon-plus'
+ class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-plus'
next='admin-circle-create' data-trans='circle.list.buttonCreate'
)
.table-wrapper
- .table.segment.margin-bottom
+ .table
- div.table-header
+ div.table-header.bg-color-third.text-color-heading
div.table-cell.w280(data-trans='circle.list.tableHeader1')
div.table-cell.w280(data-trans='circle.list.tableHeader2')
div.table-cell.w280(data-trans='circle.list.tableHeader3')
@@ -50,7 +53,7 @@
solid-widget(name='hubl-admin-circle-leave-button')
template
solid-delete(
- class='button text-bolder text-uppercase button-secondary bordered icon icon-close'
+ class='button text-xsmall text-bold text-uppercase color-secondary bordered'
data-src="${src}"
data-label=''
data-trans='data-label=circle.list.buttonQuit'
@@ -70,8 +73,8 @@
fields='circle.name, circle.owner, leaveButton'
loader-id='loader-admin-circles'
- class-circle.name='table-cell w280 text-color-heading text-bold text-letter-spacing-large text-underline'
- class-circle.owner='table-cell w280 cell-with-id-card'
+ class-circle.name='table-cell w280 text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline'
+ class-circle.owner='table-cell w280'
class-leaveButton='table-cell w280'
action-leaveButton="joinButton"
@@ -84,7 +87,7 @@
solid-widget(name='hubl-admin-circle-join-button')
template
solid-form(
- class='button text-bolder text-uppercase reversed button-secondary bordered icon icon-arrow-right-circle'
+ class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-arrow-right-circle'
data-src='${value}'
fields='user.username'
@@ -108,8 +111,8 @@
fields='name, owner, members'
loader-id='loader-admin-circles'
- class-name='table-cell w280 text-color-heading text-bold text-letter-spacing-large text-underline'
- class-owner='table-cell w280 border cell-with-id-card'
+ class-name='table-cell w280 text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline'
+ class-owner='table-cell w280'
widget-owner='hubl-circle-owner'
class-members='table-cell w280'
--
GitLab