feature: admin right hand sidebar
This commit is contained in:
gaelle morin
parent
bccb5783c7
commit
6700d88288
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue