feature: admin-circle-list + table
This commit is contained in:
parent
700692b1ab
commit
54852e226d
@ -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
|
||||||
|
@ -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
|
||||||
|
@ -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,53 +532,9 @@ 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 {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -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);
|
||||||
}
|
}
|
||||||
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
@ -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"
|
||||||
|
Loading…
Reference in New Issue
Block a user