diff --git a/src/index.pug b/src/index.pug
index c778e1552b86f55c246d273aa7a1bebaf523f384..7b05290df9a0e778d485a87997283be0e8129487 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -25,7 +25,7 @@ html(lang="en")
nav#main__menu.segment.float-left.bg-color-heading.text-small.text-color-white.left-menu.jsLeftMenu
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)
#dashboard(hidden, data-view="dashboard").no-sidebar.with-padding
@@ -88,7 +88,7 @@ html(lang="en")
#resources(hidden, data-view="resources")
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
#about(data-view="about").no-sidebar.with-padding
diff --git a/src/page-admin.pug b/src/page-admin.pug
index b58012708b46d3c21bad6867f730aea983eb759d..32af5c631b7e6d17a66c32bc9c458a235fe7bc73 100644
--- a/src/page-admin.pug
+++ b/src/page-admin.pug
@@ -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)
#admin-circles(hidden, data-view="admin-circles")
include views/admin/page-admin-circles.pug
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index d5c278bb1379aba00de9082f0bbc6654dbbdcdda..2ba862f0451780882ee5b5fcaf4c9ad72c6b663c 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -17,6 +17,10 @@
min-height: -webkit-fill-available;
}
+ main {
+ width: calc(100% - 256px);
+ }
+
.notLoggedIn {
visibility: hidden;
}
@@ -29,6 +33,9 @@
.align-middle {
transform: translateY(50%);
}
+ .box-border {
+ box-sizing: border-box;
+ }
&.lg-{
&hidden {
display: none;
@@ -61,6 +68,13 @@
&.float-right {
float: right;
}
+ &.clearfix::after {
+ content: "";
+ clear: both;
+ display: block;
+ height: 0;
+ width: 100%;
+ }
&.margin-left {
margin-left: 20px;
}
@@ -76,12 +90,22 @@
&.margin-right {
margin-right: 20px;
}
+ &.margin-bottom {
+ margin-bottom: 20px;
+ }
+ &.padding-y-small {
+ padding-top: 10px;
+ padding-bottom: 10px;
+ }
&.padding {
padding: 14px;
}
&.padding-large {
padding: 20px;
}
+ &.padding-xlarge {
+ padding: 25px;
+ }
}
.avatar {
@@ -119,6 +143,10 @@
box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
}
+.bg-color-third {
+ background: var(--color-third);
+}
+
.bg-color-heading {
background: var(--color-heading);
}
@@ -147,6 +175,10 @@
font-weight: 600;
}
+.text-bolder {
+ font-weight: 700;
+}
+
.text-normal {
font-weight: normal;
}
@@ -155,6 +187,10 @@
text-transform: uppercase;
}
+.text-underline {
+ text-decoration: underline;
+}
+
.text-xsmall {
font-size: 12px;
}
@@ -164,7 +200,7 @@
}
.text-large {
- font-size: 18px;
+ font-size: 16px;
}
.text-xlarge {
@@ -205,6 +241,14 @@
letter-spacing: 0.38px;
}
+.text-center {
+ text-align: center;
+}
+
+.text-right {
+ text-align: right;
+}
+
.logo {
height: 34px;
@@ -446,10 +490,10 @@ nav {
/* Custom scrollbar of the table */
.table-wrapper {
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 {
- background-color: var(--color-scrollbar-table-background);
+ background-color: var(--color-grey);
border-radius: 10px;
}
@@ -458,17 +502,17 @@ nav {
}
&::-webkit-scrollbar-thumb {
- background-color: var(--color-scrollbar-table-track);
+ background-color: var(--color-heading);
border-radius: 10px;
}
}
/* Quick fix. Will be removed later */
-#admin-circles,
+/*#admin-circles,
#admin-projects,
#admin-users {
display: contents;
-}
+}*/
[hidden],
.hidden {
@@ -488,54 +532,10 @@ h3,
h4,
h5,
h6 {
- font-weight: bold;
-
- /*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;
- }
-}
-
-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;
+ color: var(--color-heading);
margin: 0;
}
-h4 {
- font-size: 1.2rem;
-}
-
-h5 {
- font-size: 2rem;
-}
-
.avatar {
align-items: center;
background-color: var(--color-avatar-background);
@@ -678,17 +678,17 @@ h5 {
}
.content-box {
- @include window-style-modal();
- flex-direction: column;
+ /*@include window-style-modal();*/
+ /*flex-direction: column;
flex-grow: 1;
- margin: 2rem 1rem 5rem 2rem;
+ margin: 2rem 1rem 5rem 2rem;*/
&.full-width {
- background: var(--color-white);
+ /*background: var(--color-white);
flex: 1;
- font-size: 1.6rem;
- margin: 0 auto;
- min-height: 100%;
+ font-size: 1.6rem;*/
+ /*margin: 0 auto;*/
+ /*min-height: 100%;*/
}
}
@@ -764,7 +764,7 @@ h5 {
min-height: calc(100vh - 50px - 56px); /* Heights of main header and sub-header */
@include breakpoint(lg) {
- min-height: calc(100vh - 83px - 84px);
+ min-height: calc(100vh - 72px - 78.88px);
}
}
@@ -823,9 +823,9 @@ h5 {
margin-bottom: 20px;
/* end */
- @include breakpoint(lg) {
+ /*@include breakpoint(lg) {
margin-top: 0;
- }
+ }*/
}
solid-ac-checker,
@@ -931,13 +931,18 @@ a,
display: inline-block;
padding: 0;
+ /* fix to prevent `form` element to act as a block so your text will go under your icon */
+ form {
+ display: contents;
+ }
+
&.button {
- padding: 0.55rem 2.5rem;
+ padding: 5.5px 25px;
border-radius: 100em;
*,
& {
- font-size: 1.4rem;
+ font-size: 12px;
}
&.mobile-full-width {
@@ -977,26 +982,24 @@ a,
}
}
- &.text-bold {
+ &.text-uppercase {
*,
& {
- font-weight: bold;
+ text-transform: uppercase;
}
}
-
- &.text-uppercase {
+ &.text-bolder {
*,
& {
- text-transform: uppercase;
+ font-weight: 700;
}
}
-
&.rounded {
border-radius: 50%;
- font-size: 1.8rem;
- padding: 1rem;
+ font-size: 18px;
+ padding: 10px;
height: 42px;
width: 42px;
display: flex;
@@ -1018,23 +1021,20 @@ a,
}
}
- &.with-icon::before {
- font-size: 1.6rem;
- margin-right: 1rem;
+ &.icon::before {
+ font-size: 15px;
+ margin-right: 10px;
}
-
&.button-primary{
- background-color: var(--color-white);
+ background-color: white;
*,
& {
color: var(--color-primary);
}
-
&.bordered {
border: 1px solid var(--color-primary);
}
-
&:hover {
background-color: var(--color-primary);
@@ -1044,155 +1044,139 @@ a,
}
}
}
-
&.button-disabled{
cursor: not-allowed;
- background-color: var(--color-white);
+ background-color: white;
*,
& {
- color: var(--color-grey-3);
+ color: var(--color-grey);
}
-
&.bordered {
- border: 1px solid var(--color-grey-3);
+ border: 1px solid var(--color-grey);
}
-
&:hover {
- background-color: var(--color-white);
+ background-color: white;
*,
& {
- color: var(--color-grey-3);
+ color: var(--color-grey);
}
}
}
-
&.button-secondary {
- background-color: var(--color-white);
+ background-color: white;
*,
& {
color: var(--color-secondary);
}
-
&.bordered {
border: 1px solid var(--color-secondary);
}
-
&:hover {
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 {
- border: 1px solid var(--color-complementary);
+ border: 1px solid var(--color-third);
}
-
&:hover {
- background-color: var(--color-complementary);
- color: var(--color-white);
+ background-color: var(--color-third);
+
+ *,
+ & {
+ color: white;
+ }
}
}
-
- &.flex {
- display: flex;
- }
-
&.reversed {
&.button-primary {
background-color: var(--color-primary);
*,
& {
- color: var(--color-white);
+ color: white;
}
-
&:hover {
- background-color: var(--color-white);
- color: var(--color-primary);
+ background-color: white;
*,
& {
color: var(--color-primary);
}
-
&.bordered {
border: 1px solid var(--color-primary);
}
}
}
-
&.button-disabled{
cursor: not-allowed;
- background-color: var(--color-grey-3);
+ background-color: var(--color-grey);
*,
& {
- color: var(--color-white);
+ color: white;
}
-
&.bordered {
- border: 1px solid var(--color-white);
+ border: 1px solid white;
}
-
&:hover {
- background-color: var(--color-grey-3);
+ background-color: var(--color-grey);
*,
& {
- color: var(--color-white);
+ color: white;
}
}
}
-
&.button-secondary {
background-color: var(--color-secondary);
*,
& {
- color: var(--color-white);
+ color: white;
}
-
&:hover {
- background-color: var(--color-white);
+ background-color: white;
*,
& {
color: var(--color-secondary);
}
-
&.bordered {
border: 1px solid var(--color-secondary);
}
}
}
-
&.button-complementary {
background-color: var(--color-complementary);
*,
& {
- color: var(--color-white);
+ color: white;
}
&:hover {
- background-color: var(--color-white);
+ background-color: white;
*,
& {
color: var(--color-complementary);
}
-
&.bordered {
border: 1px solid var(--color-complementary);
}
diff --git a/src/styles/base/table.scss b/src/styles/base/table.scss
index c6b7e376025ae9f72323edfd3d23ee076d365063..0e5fc1a1c63913f308be5b93cec5fc3cbcb6955a 100644
--- a/src/styles/base/table.scss
+++ b/src/styles/base/table.scss
@@ -4,7 +4,7 @@
overflow: auto;
position: relative;
width: 100%;
- margin-bottom: 6rem;
+ margin-bottom: 60px;
@include breakpoint(lg) {
margin-bottom: 0;
@@ -13,7 +13,6 @@
.table {
border-collapse: collapse;
display: table;
- margin-bottom: 20px;
overflow: auto;
table-layout: fixed;
width: 100%;
@@ -24,15 +23,31 @@
display: table-header-group;
text-align: center;
vertical-align: middle;
-
- &>div {
+ 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;
+
+ &>.table-cell {
display: table-cell;
+ height: 50px;
+ text-align: center;
+ vertical-align: middle;
+ border-right: 1px solid white;
white-space: nowrap;
+
+ &:last-child {
+ border-right: 1px solid #C9C8C8;
+ }
}
}
.table-body {
display: table-row-group;
+ border-left: 1px solid #C9C8C8;
&>div {
display: contents;
@@ -43,11 +58,13 @@
&>div {
display: contents;
- &>* {
- border-bottom: 1px solid var(--color-table-border);
+ &>.table-cell {
+ border-bottom: 1px solid #C9C8C8;
+ border-right: 1px solid #C9C8C8;
display: table-cell;
text-align: center;
vertical-align: middle;
+ height: 64px;
}
solid-multiple[name="user.communities"] {
text-align: left;
@@ -79,42 +96,12 @@
/* 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-header {
/* Fix. Could disappear when we can add .class on set fields */
[name^='cell-1'] {
@extend .w280;
- @extend .border;
}
.w280 {
@@ -148,37 +135,6 @@
/* 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 {
.user-thumb.is-spaced,
@@ -188,47 +144,5 @@
}
.table solid-ac-checker {
- 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;
- }
+ /*text-align: center;*/
}
diff --git a/src/views/admin/page-admin-circles.pug b/src/views/admin/page-admin-circles.pug
index c9b596573627b25f161c61c2751af974f4a77f85..d006470fc084348add0781105f83bd0529d36ea9 100644
--- a/src/views/admin/page-admin-circles.pug
+++ b/src/views/admin/page-admin-circles.pug
@@ -1,12 +1,14 @@
-.content-box.flex.full-width.with-form
+.content-box.full-width.with-form
solid-router(default-route='admin-circle-list', hidden)
solid-route(name='admin-circle-list')
solid-route(name='admin-circle-create')
solid-route(name='circle-left')
- div.content-box__header.flex.space-between
- h1.without-margin(data-trans='circle.list.title')
- button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='circle.list.buttonMobile')
+ div.segment.padding-xlarge.border-bottom
+ 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')
include ../circle/page-circle-left.pug
@@ -27,30 +29,29 @@
)
- div.content-box__info.flex
-
- div.admin-header.flex
-
- h3(data-trans='circle.list.subTitle')
-
- solid-ac-checker(data-src=`${endpoints.circles || (endpoints.post && endpoints.post.circles)}`, permission='acl:Append')
- solid-link(
- class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
- next='admin-circle-create' data-trans='circle.list.buttonCreate'
- )
+ div.segment.padding-xlarge
+ div.segment.padding-y-small.margin-bottom.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
+ 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'
+ next='admin-circle-create' data-trans='circle.list.buttonCreate'
+ )
.table-wrapper
- .table
+ .table.segment.margin-bottom
- div.table-header.grey-color
- div.w280(data-trans='circle.list.tableHeader1')
- div.w280(data-trans='circle.list.tableHeader2')
- div.w280(data-trans='circle.list.tableHeader3')
+ div.table-header
+ 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')
solid-widget(name='hubl-admin-circle-leave-button')
template
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-label=''
data-trans='data-label=circle.list.buttonQuit'
@@ -70,9 +71,9 @@
fields='circle.name, circle.owner, leaveButton'
loader-id='loader-admin-circles'
- class-circle.name='w280 border cell-with-name'
- class-circle.owner='w280 border cell-with-id-card'
- class-leaveButton='w280 border cell-with-buttons is-spaced'
+ 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-leaveButton='table-cell w280'
action-leaveButton="joinButton"
widget-leaveButton="hubl-admin-circle-leave-button"
@@ -83,7 +84,8 @@
solid-widget(name='hubl-admin-circle-join-button')
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}'
fields='user.username'
@@ -107,11 +109,11 @@
fields='name, owner, members'
loader-id='loader-admin-circles'
- class-name='w280 border cell-with-name'
- class-owner='w280 border cell-with-id-card'
+ 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'
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"
order-by="name"