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

feature: admin right hand sidebar

Browse Source
This commit is contained in:
gaelle morin 2020-11-26 11:25:58 +01:00
parent bccb5783c7
commit 6700d88288
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
3 changed files with 104 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/page-admin.pug
View File

@ -9,19 +9,23 @@
#admin-communities(hidden, data-view="admin-communities")
include views/admin/page-admin-communities.pug
nav.jsRightMenu(role='navigation')
solid-router(default-route='admin-circles')
solid-router.text-color-heading.reverse.text-bold(default-route='admin-circles')
ul
li.jsOffsiteToggle
a(data-trans='admin.menuRight.fold')
li.segment.padding-small.text-right.jsOffsiteToggle
span.icon.icon-arrow-right.xxsmall.icon-margin-right-xxsmall
a.text-normal.text-xsmall(data-trans='admin.menuRight.fold')
if (endpoints.users || (endpoints.get && endpoints.get.users))
solid-route(name='admin-communities')
li
li.segment.padding-large
span.icon.ci-networking.large.icon-margin-right
a(data-trans='admin.menuRight.community')
if endpoints.circles || (endpoints.get && endpoints.get.circles)
solid-route(name='admin-circles')
li
li.segment.padding-large
span.icon.ci-bubble-add.large.icon-margin-right
a(data-trans='admin.menuRight.circles')
if endpoints.projects || (endpoints.get && endpoints.get.projects)
solid-route(name='admin-projects')
li
li.segment.padding-large
span.icon.ci-add.large.icon-margin-right
a(data-trans='admin.menuRight.projects')

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

@ -11,7 +11,7 @@
background-color: var(--color-main-background);
box-sizing: border-box;
color: var(--color-grey) !important;
font-size: 1.6rem;
font-size: 14px;
/* Fix for viewport height bug in webkit for mobile */
height: -webkit-fill-available;
min-height: -webkit-fill-available;
@ -81,6 +81,9 @@
&.margin-left {
margin-left: 20px;
}
&.margin-right-xsmall {
margin-right: 15px;
}
&.margin-bottom {
margin-bottom: 20px;
}
@ -108,6 +111,9 @@
&.margin-bottom {
margin-bottom: 20px;
}
&.padding-small {
padding: 10px;
}
&.padding-y-small {
padding-top: 10px;
padding-bottom: 10px;
@ -173,6 +179,59 @@
background: white;
}
.icon {
&::before {
font-size: 20px;
}
&.icon-magnify {
background-image: url();
}
&.icon-arrow-down {
background-image: url();
}
&.rounded{
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
&-small {
height: 35px;
width: 35px;
}
&-large {
height: 70px;
width: 70px;
}
}
&.xxsmall::before {
font-size: 12px;
}
&.xsmall::before {
font-size: 15px;
}
&.small::before {
font-size: 18px;
}
&.large::before {
font-size: 30px;
}
&.xlarge::before {
font-size: 40px;
}
&.centered {
margin: 0 auto;
}
&.icon-margin-right::before {
margin-right: 15px;
}
&.icon-margin-right-xxsmall::before {
margin-right: 5px;
}
}
.icon-color-primary::before {
color: var(--color-primary);
}

59
src/styles/components/sidebar.scss
View File

@ -34,8 +34,8 @@
&.sidebar-is-closed {
@include breakpoint(lg) {
margin-left: -15.5rem;
transform: translate(15.5rem);
margin-left: -18.5rem;
transform: translate(18.5rem);
}
}
}
@ -45,14 +45,12 @@
}
nav {
background: var(--color-right-menu-background);
background: #F1F1F1;
transition: all 0.5s;
width: 25rem;
>solid-router {
color: var(--color-right-menu-text);
flex: 0 0 auto;
font-weight: 600;
>ul {
cursor: pointer;
@ -62,26 +60,33 @@
margin: 0;
padding-left: 0;
&>li>a {
vertical-align: middle;
}
li {
align-items: center;
border-bottom: 1px solid var(--color-right-menu-link-border);
display: flex;
margin: 0;
padding: 2.15rem 2.55rem;
position: relative;
border-bottom: 1px solid #D6CECE;
/*align-items: center;
display: flex;*/
/*margin: 0;*/
/*padding: 2.15rem 2.55rem;*/
/*position: relative;*/
/*width: 12em;*/
&::before {
/*&::before {
float: left;
font-size: 4rem;
margin-left: 0;
margin-right: 2.85rem;
}*/
&>a {
vertical-align: super;
}
}
>li {
@include icon('arrow-right-circle');
}
/*>li {
@include icon('arrow-right');
}*/
>solid-route {
@ -121,29 +126,33 @@
@include ci('file');
}
&[name='admin-communities']>li {
/*&[name='admin-communities']>li {
@include ci('networking');
}
}*/
&[name='admin-circles']>li {
/*&[name='admin-circles']>li {
@include ci('bubble-add');
}
}*/
&[name='admin-projects']>li {
/*&[name='admin-projects']>li {
@include ci('add');
}
}*/
&[active] {
background-color: var(--color-right-menu-active-background);
color: var(--color-right-menu-active-text);
background-color: var(--color-heading);
color: white;
display: inline-block;
}
&.active-color[active] {
>li::before {
background-color: var(--color-right-menu-active-icon);
background-color: white;
}
}
&:hover:not([active]) {
background: #E4E4E4;
}
}
}
}
@ -157,7 +166,7 @@
}
&.jsRightMenu:not([open]) {
transform: translate(15.5rem);
transform: translate(18.5rem);
& .jsOffsiteToggle::before {
transform: rotate(180deg);