autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feature: admin-circle-list + table

Browse Source
This commit is contained in:
gaelle morin 2020-11-24 18:09:27 +01:00
parent 700692b1ab
commit 54852e226d
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
5 changed files with 168 additions and 268 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/index.pug
View File

@ -25,7 +25,7 @@ html(lang="en")
nav#main__menu.segment.float-left.bg-color-heading.text-small.text-color-white.left-menu.jsLeftMenu nav#main__menu.segment.float-left.bg-color-heading.text-small.text-color-white.left-menu.jsLeftMenu
include menu-left.pug include menu-left.pug
main#viewport.segment.float-left.content.notLoggedIn main#viewport.segment.float-left.notLoggedIn
if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards) if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
#dashboard(hidden, data-view="dashboard").no-sidebar.with-padding #dashboard(hidden, data-view="dashboard").no-sidebar.with-padding
@ -88,7 +88,7 @@ html(lang="en")
#resources(hidden, data-view="resources") #resources(hidden, data-view="resources")
include page-resources.pug include page-resources.pug
#admin(hidden, data-view="admin").with-sidebar #admin(hidden, data-view="admin").segment.lg-full.with-sidebar
include page-admin.pug include page-admin.pug
#about(data-view="about").no-sidebar.with-padding #about(data-view="about").no-sidebar.with-padding

2
src/page-admin.pug
View File

@ -1,4 +1,4 @@
.views-container.sidebar-is-closed .views-container.sidebar-is-closed.bg-color-white
if endpoints.circles || (endpoints.get && endpoints.get.circles) if endpoints.circles || (endpoints.get && endpoints.get.circles)
#admin-circles(hidden, data-view="admin-circles") #admin-circles(hidden, data-view="admin-circles")
include views/admin/page-admin-circles.pug include views/admin/page-admin-circles.pug

240
src/styles/base/main.scss
View File

@ -17,6 +17,10 @@
min-height: -webkit-fill-available; min-height: -webkit-fill-available;
} }
main {
width: calc(100% - 256px);
}
.notLoggedIn { .notLoggedIn {
visibility: hidden; visibility: hidden;
} }
@ -29,6 +33,9 @@
.align-middle { .align-middle {
transform: translateY(50%); transform: translateY(50%);
} }
.box-border {
box-sizing: border-box;
}
&.lg-{ &.lg-{
&hidden { &hidden {
display: none; display: none;
@ -61,6 +68,13 @@
&.float-right { &.float-right {
float: right; float: right;
} }
&.clearfix::after {
content: "";
clear: both;
display: block;
height: 0;
width: 100%;
}
&.margin-left { &.margin-left {
margin-left: 20px; margin-left: 20px;
} }
@ -76,12 +90,22 @@
&.margin-right { &.margin-right {
margin-right: 20px; margin-right: 20px;
} }
&.margin-bottom {
margin-bottom: 20px;
}
&.padding-y-small {
padding-top: 10px;
padding-bottom: 10px;
}
&.padding { &.padding {
padding: 14px; padding: 14px;
} }
&.padding-large { &.padding-large {
padding: 20px; padding: 20px;
} }
&.padding-xlarge {
padding: 25px;
}
} }
.avatar { .avatar {
@ -119,6 +143,10 @@
box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09); box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
} }
.bg-color-third {
background: var(--color-third);
}
.bg-color-heading { .bg-color-heading {
background: var(--color-heading); background: var(--color-heading);
} }
@ -147,6 +175,10 @@
font-weight: 600; font-weight: 600;
} }
.text-bolder {
font-weight: 700;
}
.text-normal { .text-normal {
font-weight: normal; font-weight: normal;
} }
@ -155,6 +187,10 @@
text-transform: uppercase; text-transform: uppercase;
} }
.text-underline {
text-decoration: underline;
}
.text-xsmall { .text-xsmall {
font-size: 12px; font-size: 12px;
} }
@ -164,7 +200,7 @@
} }
.text-large { .text-large {
font-size: 18px; font-size: 16px;
} }
.text-xlarge { .text-xlarge {
@ -205,6 +241,14 @@
letter-spacing: 0.38px; letter-spacing: 0.38px;
} }
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.logo { .logo {
height: 34px; height: 34px;
@ -446,10 +490,10 @@ nav {
/* Custom scrollbar of the table */ /* Custom scrollbar of the table */
.table-wrapper { .table-wrapper {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: var(--color-scrollbar-table-track) var(--color-scrollbar-table-background); scrollbar-color: var(--color-heading) var(--color-grey);
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background-color: var(--color-scrollbar-table-background); background-color: var(--color-grey);
border-radius: 10px; border-radius: 10px;
} }
@ -458,17 +502,17 @@ nav {
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: var(--color-scrollbar-table-track); background-color: var(--color-heading);
border-radius: 10px; border-radius: 10px;
} }
} }
/* Quick fix. Will be removed later */ /* Quick fix. Will be removed later */
#admin-circles, /*#admin-circles,
#admin-projects, #admin-projects,
#admin-users { #admin-users {
display: contents; display: contents;
} }*/
[hidden], [hidden],
.hidden { .hidden {
@ -488,52 +532,8 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
font-weight: bold; color: var(--color-heading);
/*span {
font-weight: 400;
padding-left: 0.85rem;
&:before {
content: '// ';
}
}*/
}
h1, .h1-like {
color: var(--color-h1);
font-size: 2rem;
text-transform: uppercase;
&.without-margin {
margin: 0; margin: 0;
}
}
h2, .h2-like {
color: var(--color-h2);
font-size: 1.8rem;
text-transform: uppercase;
}
.h2-like {
display: block;
margin: 14.94px 0;
width: 100%;
}
h3 {
color: var(--color-title);
font-size: 1.7rem;
margin: 0;
}
h4 {
font-size: 1.2rem;
}
h5 {
font-size: 2rem;
} }
.avatar { .avatar {
@ -678,17 +678,17 @@ h5 {
} }
.content-box { .content-box {
@include window-style-modal(); /*@include window-style-modal();*/
flex-direction: column; /*flex-direction: column;
flex-grow: 1; flex-grow: 1;
margin: 2rem 1rem 5rem 2rem; margin: 2rem 1rem 5rem 2rem;*/
&.full-width { &.full-width {
background: var(--color-white); /*background: var(--color-white);
flex: 1; flex: 1;
font-size: 1.6rem; font-size: 1.6rem;*/
margin: 0 auto; /*margin: 0 auto;*/
min-height: 100%; /*min-height: 100%;*/
} }
} }
@ -764,7 +764,7 @@ h5 {
min-height: calc(100vh - 50px - 56px); /* Heights of main header and sub-header */ min-height: calc(100vh - 50px - 56px); /* Heights of main header and sub-header */
@include breakpoint(lg) { @include breakpoint(lg) {
min-height: calc(100vh - 83px - 84px); min-height: calc(100vh - 72px - 78.88px);
} }
} }
@ -823,9 +823,9 @@ h5 {
margin-bottom: 20px; margin-bottom: 20px;
/* end */ /* end */
@include breakpoint(lg) { /*@include breakpoint(lg) {
margin-top: 0; margin-top: 0;
} }*/
} }
solid-ac-checker, solid-ac-checker,
@ -931,13 +931,18 @@ a,
display: inline-block; display: inline-block;
padding: 0; padding: 0;
/* fix to prevent `form` element to act as a block so your text will go under your icon */
form {
display: contents;
}
&.button { &.button {
padding: 0.55rem 2.5rem; padding: 5.5px 25px;
border-radius: 100em; border-radius: 100em;
*, *,
& { & {
font-size: 1.4rem; font-size: 12px;
} }
&.mobile-full-width { &.mobile-full-width {
@ -977,14 +982,6 @@ a,
} }
} }
&.text-bold {
*,
& {
font-weight: bold;
}
}
&.text-uppercase { &.text-uppercase {
*, *,
@ -992,11 +989,17 @@ a,
text-transform: uppercase; text-transform: uppercase;
} }
} }
&.text-bolder {
*,
& {
font-weight: 700;
}
}
&.rounded { &.rounded {
border-radius: 50%; border-radius: 50%;
font-size: 1.8rem; font-size: 18px;
padding: 1rem; padding: 10px;
height: 42px; height: 42px;
width: 42px; width: 42px;
display: flex; display: flex;
@ -1018,23 +1021,20 @@ a,
} }
} }
&.with-icon::before { &.icon::before {
font-size: 1.6rem; font-size: 15px;
margin-right: 1rem; margin-right: 10px;
} }
&.button-primary{ &.button-primary{
background-color: var(--color-white); background-color: white;
*, *,
& { & {
color: var(--color-primary); color: var(--color-primary);
} }
&.bordered { &.bordered {
border: 1px solid var(--color-primary); border: 1px solid var(--color-primary);
} }
&:hover { &:hover {
background-color: var(--color-primary); background-color: var(--color-primary);
@ -1044,155 +1044,139 @@ a,
} }
} }
} }
&.button-disabled{ &.button-disabled{
cursor: not-allowed; cursor: not-allowed;
background-color: var(--color-white); background-color: white;
*, *,
& { & {
color: var(--color-grey-3); color: var(--color-grey);
} }
&.bordered { &.bordered {
border: 1px solid var(--color-grey-3); border: 1px solid var(--color-grey);
} }
&:hover { &:hover {
background-color: var(--color-white); background-color: white;
*, *,
& { & {
color: var(--color-grey-3); color: var(--color-grey);
} }
} }
} }
&.button-secondary { &.button-secondary {
background-color: var(--color-white); background-color: white;
*, *,
& { & {
color: var(--color-secondary); color: var(--color-secondary);
} }
&.bordered { &.bordered {
border: 1px solid var(--color-secondary); border: 1px solid var(--color-secondary);
} }
&:hover { &:hover {
background-color: var(--color-secondary); background-color: var(--color-secondary);
*, *,
& { & {
color: var(--color-white); color: white;
} }
} }
} }
&.button-third {
color: var(--color-third);
background-color:white;
&.button-complementary { *,
color: var(--color-complementary); & {
background-color: var(--color-white); color: var(--color-third);
}
&.bordered { &.bordered {
border: 1px solid var(--color-complementary); border: 1px solid var(--color-third);
} }
&:hover { &:hover {
background-color: var(--color-complementary); background-color: var(--color-third);
color: var(--color-white);
}
}
&.flex { *,
display: flex; & {
color: white;
}
}
} }
&.reversed { &.reversed {
&.button-primary { &.button-primary {
background-color: var(--color-primary); background-color: var(--color-primary);
*, *,
& { & {
color: var(--color-white); color: white;
} }
&:hover { &:hover {
background-color: var(--color-white); background-color: white;
color: var(--color-primary);
*, *,
& { & {
color: var(--color-primary); color: var(--color-primary);
} }
&.bordered { &.bordered {
border: 1px solid var(--color-primary); border: 1px solid var(--color-primary);
} }
} }
} }
&.button-disabled{ &.button-disabled{
cursor: not-allowed; cursor: not-allowed;
background-color: var(--color-grey-3); background-color: var(--color-grey);
*, *,
& { & {
color: var(--color-white); color: white;
} }
&.bordered { &.bordered {
border: 1px solid var(--color-white); border: 1px solid white;
} }
&:hover { &:hover {
background-color: var(--color-grey-3); background-color: var(--color-grey);
*, *,
& { & {
color: var(--color-white); color: white;
} }
} }
} }
&.button-secondary { &.button-secondary {
background-color: var(--color-secondary); background-color: var(--color-secondary);
*, *,
& { & {
color: var(--color-white); color: white;
} }
&:hover { &:hover {
background-color: var(--color-white); background-color: white;
*, *,
& { & {
color: var(--color-secondary); color: var(--color-secondary);
} }
&.bordered { &.bordered {
border: 1px solid var(--color-secondary); border: 1px solid var(--color-secondary);
} }
} }
} }
&.button-complementary { &.button-complementary {
background-color: var(--color-complementary); background-color: var(--color-complementary);
*, *,
& { & {
color: var(--color-white); color: white;
} }
&:hover { &:hover {
background-color: var(--color-white); background-color: white;
*, *,
& { & {
color: var(--color-complementary); color: var(--color-complementary);
} }
&.bordered { &.bordered {
border: 1px solid var(--color-complementary); border: 1px solid var(--color-complementary);
} }

132
src/styles/base/table.scss
View File

@ -4,7 +4,7 @@
overflow: auto; overflow: auto;
position: relative; position: relative;
width: 100%; width: 100%;
margin-bottom: 6rem; margin-bottom: 60px;
@include breakpoint(lg) { @include breakpoint(lg) {
margin-bottom: 0; margin-bottom: 0;
@ -13,7 +13,6 @@
.table { .table {
border-collapse: collapse; border-collapse: collapse;
display: table; display: table;
margin-bottom: 20px;
overflow: auto; overflow: auto;
table-layout: fixed; table-layout: fixed;
width: 100%; width: 100%;
@ -24,15 +23,31 @@
display: table-header-group; display: table-header-group;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
border-top: 1px solid #C9C8C8;
border-left: 1px solid #C9C8C8;
background: var(--color-third);
color: var(--color-heading);
font-size: 16px;
font-weight: 600;
letter-spacing: 0.25px;
&>div { &>.table-cell {
display: table-cell; display: table-cell;
height: 50px;
text-align: center;
vertical-align: middle;
border-right: 1px solid white;
white-space: nowrap; white-space: nowrap;
&:last-child {
border-right: 1px solid #C9C8C8;
}
} }
} }
.table-body { .table-body {
display: table-row-group; display: table-row-group;
border-left: 1px solid #C9C8C8;
&>div { &>div {
display: contents; display: contents;
@ -43,11 +58,13 @@
&>div { &>div {
display: contents; display: contents;
&>* { &>.table-cell {
border-bottom: 1px solid var(--color-table-border); border-bottom: 1px solid #C9C8C8;
border-right: 1px solid #C9C8C8;
display: table-cell; display: table-cell;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
height: 64px;
} }
solid-multiple[name="user.communities"] { solid-multiple[name="user.communities"] {
text-align: left; text-align: left;
@ -79,42 +96,12 @@
/* Styles of the table and its elements */ /* Styles of the table and its elements */
.table {
border-left: 1px solid var(--color-table-border);
border-right: 1px solid var(--color-table-border);
}
.table-header {
font-size: 1.6rem;
font-weight: 600;
&.grey-color {
background: var(--color-table-header-background);
color: var(--color-table-header-text);
}
>*:not(:last-child) {
border-right: 1px solid var(--color-white);
padding: 2.1rem 0;
text-align: center;
}
}
.table-body,
.table-header {
.border {
border-right: 1px solid var(--color-table-border);
}
}
.table-body, .table-body,
.table-header { .table-header {
/* Fix. Could disappear when we can add .class on set fields */ /* Fix. Could disappear when we can add .class on set fields */
[name^='cell-1'] { [name^='cell-1'] {
@extend .w280; @extend .w280;
@extend .border;
} }
.w280 { .w280 {
@ -148,37 +135,6 @@
/* Styles of specific cells */ /* Styles of specific cells */
.cell-with-buttons {
text-align: center;
[name='button'] {
input[type='submit'] {
@extend
.button,
.text-bold,
.text-uppercase,
.reversed,
.button-secondary,
.bordered,
.desktop-btn-margin__left;
}
}
&.is-spaced {
padding: 0.8rem 2.2rem;
}
}
.cell-with-name {
color: var(--color-secondary);
font-weight: 600;
padding-left: 2rem;
text-align: left;
}
/* Styles of elements inside cells */
.table { .table {
.user-thumb.is-spaced, .user-thumb.is-spaced,
@ -188,47 +144,5 @@
} }
.table solid-ac-checker { .table solid-ac-checker {
text-align: center; /*text-align: center;*/
}
.circle-join {
position: relative;
width: 181px;
margin: 0 auto;
min-width: 181px;
input {
height: 29px;
left: -1px;
position: absolute;
top: -1px;
width: 102%;
padding-left: 14px !important;
}
&.button.with-icon::before {
margin-left: 6px;
}
}
.circle-leave {
position: relative;
width: 164px;
margin: 0 auto;
min-width: 164px;
&>button {
height: 29px;
padding-left: 13px;
position: absolute;
left: 1px;
top: -1px;
width: 106%;
}
&.button.with-icon::before {
font-size: 1.6rem;
margin-right: 2rem !important;
margin-left: -50px;
}
} }

48
src/views/admin/page-admin-circles.pug
View File

@ -1,11 +1,13 @@
.content-box.flex.full-width.with-form .content-box.full-width.with-form
solid-router(default-route='admin-circle-list', hidden) solid-router(default-route='admin-circle-list', hidden)
solid-route(name='admin-circle-list') solid-route(name='admin-circle-list')
solid-route(name='admin-circle-create') solid-route(name='admin-circle-create')
solid-route(name='circle-left') solid-route(name='circle-left')
div.content-box__header.flex.space-between div.segment.padding-xlarge.border-bottom
h1.without-margin(data-trans='circle.list.title') 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') button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='circle.list.buttonMobile')
include ../circle/page-circle-left.pug include ../circle/page-circle-left.pug
@ -27,30 +29,29 @@
) )
div.content-box__info.flex div.segment.padding-xlarge
div.segment.padding-y-small.margin-bottom.clearfix
div.admin-header.flex div.segment.lg-half.float-left
h3.text-large.text-bold.text-letter-spacing-large(data-trans='circle.list.subTitle')
h3(data-trans='circle.list.subTitle') div.segment.lg-half.float-left.text-right
solid-ac-checker(data-src=`${endpoints.circles || (endpoints.post && endpoints.post.circles)}`, permission='acl:Append') solid-ac-checker(data-src=`${endpoints.circles || (endpoints.post && endpoints.post.circles)}`, permission='acl:Append')
solid-link( solid-link(
class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus' class='button text-bolder text-uppercase reversed button-secondary bordered icon icon-plus'
next='admin-circle-create' data-trans='circle.list.buttonCreate' next='admin-circle-create' data-trans='circle.list.buttonCreate'
) )
.table-wrapper .table-wrapper
.table .table.segment.margin-bottom
div.table-header.grey-color div.table-header
div.w280(data-trans='circle.list.tableHeader1') div.table-cell.w280(data-trans='circle.list.tableHeader1')
div.w280(data-trans='circle.list.tableHeader2') div.table-cell.w280(data-trans='circle.list.tableHeader2')
div.w280(data-trans='circle.list.tableHeader3') div.table-cell.w280(data-trans='circle.list.tableHeader3')
solid-widget(name='hubl-admin-circle-leave-button') solid-widget(name='hubl-admin-circle-leave-button')
template template
solid-delete( solid-delete(
class='circle-leave button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close' class='button text-bolder text-uppercase button-secondary bordered icon icon-close'
data-src="${src}" data-src="${src}"
data-label='' data-label=''
data-trans='data-label=circle.list.buttonQuit' data-trans='data-label=circle.list.buttonQuit'
@ -70,9 +71,9 @@
fields='circle.name, circle.owner, leaveButton' fields='circle.name, circle.owner, leaveButton'
loader-id='loader-admin-circles' loader-id='loader-admin-circles'
class-circle.name='w280 border cell-with-name' class-circle.name='table-cell w280 text-color-heading text-bold text-letter-spacing-large text-underline'
class-circle.owner='w280 border cell-with-id-card' class-circle.owner='table-cell w280 cell-with-id-card'
class-leaveButton='w280 border cell-with-buttons is-spaced' class-leaveButton='table-cell w280'
action-leaveButton="joinButton" action-leaveButton="joinButton"
widget-leaveButton="hubl-admin-circle-leave-button" widget-leaveButton="hubl-admin-circle-leave-button"
@ -83,7 +84,8 @@
solid-widget(name='hubl-admin-circle-join-button') solid-widget(name='hubl-admin-circle-join-button')
template template
solid-form.circle-join.button.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex( solid-form(
class='button text-bolder text-uppercase reversed button-secondary bordered icon icon-arrow-right-circle'
data-src='${value}' data-src='${value}'
fields='user.username' fields='user.username'
@ -107,11 +109,11 @@
fields='name, owner, members' fields='name, owner, members'
loader-id='loader-admin-circles' loader-id='loader-admin-circles'
class-name='w280 border cell-with-name' class-name='table-cell w280 text-color-heading text-bold text-letter-spacing-large text-underline'
class-owner='w280 border cell-with-id-card' class-owner='table-cell w280 border cell-with-id-card'
widget-owner='hubl-circle-owner' widget-owner='hubl-circle-owner'
class-members='w280 border cell-with-buttons is-spaced' class-members='table-cell w280'
widget-members="hubl-admin-circle-join-button" widget-members="hubl-admin-circle-join-button"
order-by="name" order-by="name"