patch: routes ok + styles on mobile + desktop
This commit is contained in:
gaelle morin
commit
64a3219aba
1
src/images/magnify-white.svg
Normal file
1
src/images/magnify-white.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="1.02em" height="1em" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1040 1024"><path d="M1031 969L720 656q93-111 93-256q0-109-53.5-201t-146-145.5T412.5 0T212 53.5T66.5 199T13 400t53.5 201T212 746.5T413 800q149 0 262-98l310 312q10 10 23 10t22.5-9.5t9.5-23t-9-22.5zM413 737q-92 0-169.5-45.5T121 568.5T76 400t45-168.5t122.5-123t169-45.5t169 45.5t122.5 123T749 400q0 39-9 77t-25.5 71t-39.5 62.5t-52 52.5t-62 39.5t-71 25.5t-77 9z" fill="#ffffff" opacity="0.1"/></svg>
|
||||
|
After Width: | Height: | Size: 692 B |
@ -69,14 +69,15 @@ html(lang="en")
|
||||
include views/page-registering.pug
|
||||
|
||||
.notLoggedIn(style='visibility:hidden;')
|
||||
header#header.segment.full.padding-left-large.padding-right-large.sm-padding-right-xsmall.sm-padding-left-small.shadow-small.text-disable-selection.bg-color-white
|
||||
include views/partials/header.pug
|
||||
|
||||
nav#main__menu.scrollbar-nav.segment.bg-color-heading.text-top.quarter.text-disable-selection.jsLeftMenu
|
||||
include views/partials/menu-left.pug
|
||||
|
||||
main#content.segment.three-quarter.sm-full.text-top
|
||||
|
||||
header#header.segment.full.padding-left-xlarge.padding-right-medium.sm-padding-right-xsmall.sm-padding-left-small.shadow-small.text-disable-selection.bg-color-white
|
||||
include views/partials/header.pug
|
||||
|
||||
include views/partials/widgets.pug
|
||||
|
||||
for component of components
|
||||
|
||||
@ -8,10 +8,8 @@
|
||||
"logIn": "Log-in"
|
||||
},
|
||||
"menuLeft": {
|
||||
"emptyCircleProject": {
|
||||
"notPartOf": "You're not part of any",
|
||||
"createNew": "To create a new one, you can go in the",
|
||||
"adminPanel": "administration panel",
|
||||
"emptyCircleProjectContact": {
|
||||
"empty": "No result in this section.",
|
||||
"project": "project",
|
||||
"circle": "circle"
|
||||
},
|
||||
@ -28,7 +26,12 @@
|
||||
"profileDirectory": "Profiles directory",
|
||||
"communities": "Communities",
|
||||
"projects": "Projects",
|
||||
"closeMenu": "Close menu",
|
||||
"projectsBrowse": "Browse projects",
|
||||
"projectCreate": "Create project",
|
||||
"circles": "Circles",
|
||||
"circlesBrowse": "Browse circles",
|
||||
"circleCreate": "Create circle",
|
||||
"messages": "Messages",
|
||||
"search": "Search...",
|
||||
"republiqueESS": {
|
||||
|
||||
@ -8,10 +8,8 @@
|
||||
"logIn": "Iniciar sesión"
|
||||
},
|
||||
"menuLeft": {
|
||||
"emptyCircleProject": {
|
||||
"notPartOf": "No eres parte de ninguno",
|
||||
"createNew": "Para crear uno nuevo, puede ir al ",
|
||||
"adminPanel": "panel de administración",
|
||||
"emptyCircleProjectContact": {
|
||||
"empty": "No hay resultados en esta sección.",
|
||||
"project": "proyecto",
|
||||
"circle": "círculo"
|
||||
},
|
||||
@ -28,7 +26,12 @@
|
||||
"profileDirectory": "Directorio de miembrxs",
|
||||
"communities": "Las comunidades",
|
||||
"projects": "Proyectos",
|
||||
"closeMenu": "Cerrar menú",
|
||||
"projectsBrowse": "Examinar los proyectos",
|
||||
"projectCreate": "Crea un proyecto",
|
||||
"circles": "Círculos",
|
||||
"circlesBrowse": "Examinar los círculos",
|
||||
"circleCreate": "Crea un círculo.",
|
||||
"messages": "Mensajes",
|
||||
"search": "Buscar...",
|
||||
"republiqueESS": {
|
||||
|
||||
@ -8,10 +8,8 @@
|
||||
"logIn": "Se connecter"
|
||||
},
|
||||
"menuLeft": {
|
||||
"emptyCircleProject": {
|
||||
"notPartOf": "Tu ne fais partie d'aucun",
|
||||
"createNew": "Pour en créer un nouveau, tu peux te rendre dans le",
|
||||
"adminPanel": "panneau d'administration",
|
||||
"emptyCircleProjectContact": {
|
||||
"empty": "Il n'y a aucun résultat dans cette section.",
|
||||
"project": "projet",
|
||||
"circle": "cercle"
|
||||
},
|
||||
@ -28,7 +26,12 @@
|
||||
"profileDirectory": "Annuaire des membres",
|
||||
"communities": "Les communautés",
|
||||
"projects": "Projets",
|
||||
"closeMenu": "Fermer le menu",
|
||||
"projectsBrowse": "Parcourir les projets",
|
||||
"projectCreate": "Créer un projet",
|
||||
"circles": "Cercles",
|
||||
"circlesBrowse": "Parcourir les cercles",
|
||||
"circleCreate": "Créer un cercle",
|
||||
"messages": "Messages",
|
||||
"search": "Rechercher...",
|
||||
"republiqueESS": {
|
||||
|
||||
56
src/scripts/menu-search-control.js
Normal file
56
src/scripts/menu-search-control.js
Normal file
@ -0,0 +1,56 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const MenuTabs = Array.from(document.querySelectorAll(".jsMenuTab"));
|
||||
MenuTabs.forEach(menuTab => {
|
||||
const menuHeader = menuTab.querySelector('.jsMenuHeader');
|
||||
const menuArrow = menuTab.querySelector('.jsMenuArrow')
|
||||
const menuSub = menuTab.querySelector('.jsMenuSub');
|
||||
const menuOption = menuTab.querySelector('.jsMenuOption');
|
||||
const menuAdmin = menuTab.querySelector('.jsMenuAdmin');
|
||||
|
||||
const isParent = (refNode, otherNode) => {
|
||||
var parent = otherNode.parentNode;
|
||||
do {
|
||||
if (refNode == parent) {
|
||||
return true;
|
||||
} else {
|
||||
parent = parent.parentNode;
|
||||
}
|
||||
} while (parent);
|
||||
return false;
|
||||
}
|
||||
if (menuAdmin) {
|
||||
menuAdmin.addEventListener("mouseover", function (ev) {
|
||||
if (!isParent(this, ev.relatedTarget) && ev.target == this) {
|
||||
menuAdmin.classList.toggle('hidden', false);
|
||||
}
|
||||
}, false);
|
||||
menuAdmin.addEventListener("mouseout", function (ev) {
|
||||
if (!isParent(this, ev.relatedTarget) && ev.target == this) {
|
||||
menuAdmin.classList.toggle('hidden', true);
|
||||
}
|
||||
}, false);
|
||||
menuAdmin.querySelector('solid-link').addEventListener('click', e => {
|
||||
menuAdmin.classList.toggle('hidden', true);
|
||||
});
|
||||
}
|
||||
menuHeader.addEventListener('click', e => {
|
||||
menuArrow.classList.toggle('transform-up');
|
||||
menuSub.classList.toggle('hidden');
|
||||
});
|
||||
menuOption.addEventListener('click', e => {
|
||||
menuAdmin.classList.toggle('hidden');
|
||||
e.stopPropagation();
|
||||
});
|
||||
});
|
||||
|
||||
const searchForm = document.querySelector('.menu-search');
|
||||
searchForm.addEventListener('formChange', () => {
|
||||
if (document.querySelector('.menu-search input').value != "") {
|
||||
searchForm.style.backgroundColor = "#202B3C";
|
||||
document.querySelector('#main__menu').classList.toggle('searching', true);
|
||||
} else {
|
||||
searchForm.style.backgroundColor = "var(--color-heading)";
|
||||
document.querySelector('#main__menu').classList.toggle('searching', false);
|
||||
}
|
||||
})
|
||||
});
|
||||
@ -2,7 +2,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
window.addEventListener('newMessage', event => {
|
||||
let jid = event.detail.jid;
|
||||
Array.from(document.querySelectorAll('[data-jabberID="' + jid + '"]')).forEach(el => {
|
||||
el.parentElement.parentElement.classList.add('unread');
|
||||
el.parentElement.parentElement.parentElement.classList.add('unread');
|
||||
});
|
||||
});
|
||||
|
||||
@ -10,8 +10,8 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
if (event.detail && event.detail.resource && event.detail.resource['@id']) {
|
||||
const badge = document.querySelector(`solid-badge[data-src="${event.detail.resource['@id']}"]`);
|
||||
if (badge) {
|
||||
badge.parentElement.parentElement.classList.remove('unread');
|
||||
const project = badge.parentElement.parentElement.querySelector('.unread');
|
||||
badge.parentElement.parentElement.parentElement.classList.remove('unread');
|
||||
const project = badge.parentElement.parentElement.parentElement.querySelector('.unread');
|
||||
if (project) project.classList.remove('unread');
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,61 @@
|
||||
#admin-circles,
|
||||
#admin-circles-leave {
|
||||
|
||||
/* Fix on Join button in admin (circles + projects) */
|
||||
/* Styles on buttons and .children-link don't work because this input is inside too many elements. */
|
||||
/* And no I can't add that stupid icon because it'a an input. */
|
||||
/* But now, with 0.16, it's a button and you can :D */
|
||||
.join-button {
|
||||
|
||||
input,
|
||||
button {
|
||||
padding: 9px 20px;
|
||||
border-radius: 16.5px;
|
||||
height: 33px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
background-color: var(--color-secondary);
|
||||
color: white;
|
||||
border: 1px solid var(--color-secondary);
|
||||
|
||||
&:before {
|
||||
font-size: 15px;
|
||||
margin-right: 6px;
|
||||
content: "\e079";
|
||||
font-family: simple-line-icons;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
speak: none;
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
width: 1em;
|
||||
text-align: center;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1em;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: white;
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
&.sm-full {
|
||||
|
||||
input,
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form.search-button :not(.add-member)+button[type=submit] {
|
||||
background-color: #E9F2FF;
|
||||
border: none;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.chat-view {
|
||||
height: calc(100vh - 72px - 78px);
|
||||
height: calc(100vh - 50px - 78px);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
height: calc(100vh - 50px - 68px);
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
main {
|
||||
height: calc(100vh - 72px);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
height: calc(100vh - 50px);
|
||||
}
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* Styles of the right-hand menu + pages with that menu */
|
||||
@ -34,12 +30,11 @@ main {
|
||||
|
||||
.sidebar {
|
||||
background: #F1F1F1;
|
||||
height: calc(100vh - 72px);
|
||||
height: calc(100vh - 50px);
|
||||
transition: all 0.5s;
|
||||
width: 217px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
height: calc(100vh - 50px);
|
||||
width: 65px;
|
||||
}
|
||||
|
||||
@ -110,17 +105,17 @@ main {
|
||||
}
|
||||
}
|
||||
|
||||
/* Add scrollbar to the left and to the content */
|
||||
/* Add scrollbar to the left menu and to the content */
|
||||
.scrollbar-nav,
|
||||
.scrollbar-content {
|
||||
overflow-y: auto;
|
||||
height: calc(100vh - 72px); /* 72px == header's height */
|
||||
height: calc(100vh - 50px); /* 50px == header's height */
|
||||
-webkit-overflow-scrolling: touch;
|
||||
-ms-overflow-style: none;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
height: calc(100vh - 50px);
|
||||
}
|
||||
|
||||
.scrollbar-nav {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* Custom scrollbar of the left-menu*/
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
header {
|
||||
height: 72px;
|
||||
height: 50px;
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
|
||||
@ -14,28 +14,23 @@ header {
|
||||
|
||||
solid-link {
|
||||
align-self: center;
|
||||
|
||||
img.logo {
|
||||
max-width: 200px;
|
||||
max-height: 34px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.tag {
|
||||
align-self: flex-start;
|
||||
padding: 4px 15px;
|
||||
margin-top: 16px;
|
||||
margin-left: 60px;
|
||||
height: auto !important;
|
||||
letter-spacing: 0.16px !important;
|
||||
line-height: normal !important;
|
||||
padding: 1px 8px !important;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
solid-notifications {
|
||||
color: var(--color-heading);
|
||||
align-self: center;
|
||||
|
||||
@media(min-width: 768.01px) {
|
||||
margin-right: 23px;
|
||||
}
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
|
||||
.solid-notifications__container {
|
||||
position: relative;
|
||||
@ -46,12 +41,11 @@ header {
|
||||
}
|
||||
|
||||
.solid-notifications__button {
|
||||
margin-top: -9px;
|
||||
font-size: 24px;
|
||||
|
||||
&::before {
|
||||
margin-left: -9px;
|
||||
}
|
||||
font-size: 25px;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
height: auto;
|
||||
width: auto;
|
||||
|
||||
&:hover, &:focus {
|
||||
background: white;
|
||||
@ -64,12 +58,15 @@ header {
|
||||
.solid-notifications__counter {
|
||||
left: 12px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
top: -4px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
|
||||
span {
|
||||
background-color: var(--color-primary);
|
||||
color: white;
|
||||
font-size: 11px;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -97,7 +94,7 @@ header {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: -5em;
|
||||
margin-left: -4.2em;
|
||||
top: 0px;
|
||||
left: 50%;
|
||||
border: 1em solid black;
|
||||
@ -260,9 +257,7 @@ header {
|
||||
summary {
|
||||
display: block; /* To remove the disclosure triangle on Firefox v.>=69 */
|
||||
cursor: pointer;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
height: 72px;
|
||||
height: 50px;
|
||||
|
||||
/* To remove the disclosure triangle on Chrome (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#Customizing_the_disclosure_widget) */
|
||||
&::marker,
|
||||
@ -270,6 +265,10 @@ header {
|
||||
display: none;
|
||||
}
|
||||
/* End */
|
||||
|
||||
solid-display {
|
||||
padding-top: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -279,8 +278,8 @@ header {
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
/* Quick fix for mobile version */
|
||||
width: 100%;
|
||||
top: 72px;
|
||||
width: 227px;
|
||||
top: 50px;
|
||||
|
||||
>nav {
|
||||
box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16);
|
||||
@ -301,10 +300,6 @@ header {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
height: 50px;
|
||||
|
||||
@ -331,6 +326,10 @@ header {
|
||||
height: 50px;
|
||||
padding: 0;
|
||||
|
||||
solid-display {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
>.labelled-avatar .avatar {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
@ -372,8 +371,7 @@ header {
|
||||
.user-firstname {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
padding: 13px;
|
||||
width: 100%;
|
||||
|
||||
[name="segment3"] {
|
||||
@ -389,6 +387,7 @@ header {
|
||||
top: 72px;
|
||||
height: calc(100vh - 72px);
|
||||
background: white;
|
||||
width: calc(100vw);
|
||||
|
||||
>nav {
|
||||
box-shadow: none;
|
||||
|
||||
@ -67,27 +67,11 @@ main#content {
|
||||
}
|
||||
}
|
||||
|
||||
hubl-menu-create+hubl-menu-create {
|
||||
hubl-menu-empty+hubl-menu-empty {
|
||||
display: none;
|
||||
/* Duplicate widget generation? */
|
||||
}
|
||||
|
||||
hubl-create-contact+hubl-create-contact {
|
||||
display: none;
|
||||
/* Duplicate widget generation? */
|
||||
}
|
||||
|
||||
hubl-menu-create,
|
||||
hubl-create-contact {
|
||||
solid-link {
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swal2-container {
|
||||
z-index: 50000 !important;
|
||||
}
|
||||
@ -113,61 +97,6 @@ hubl-create-contact {
|
||||
}
|
||||
}
|
||||
|
||||
/* Fix on Join button in admin (circles + projects) */
|
||||
/* Styles on buttons and .children-link don't work because this input is inside too many elements. */
|
||||
/* And no I can't add that stupid icon because it'a an input. */
|
||||
/* But now, with 0.16, it's a button and you can :D */
|
||||
.join-button {
|
||||
|
||||
input,
|
||||
button {
|
||||
padding: 9px 20px;
|
||||
border-radius: 16.5px;
|
||||
height: 33px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
background-color: var(--color-secondary);
|
||||
color: white;
|
||||
border: 1px solid var(--color-secondary);
|
||||
|
||||
&:before {
|
||||
font-size: 15px;
|
||||
margin-right: 6px;
|
||||
content: "\e079";
|
||||
font-family: simple-line-icons;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
speak: none;
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
width: 1em;
|
||||
text-align: center;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1em;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: white;
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
&.sm-full {
|
||||
|
||||
input,
|
||||
button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Style that already exists in the framework but strangely I can't find it in the inspector. So I duplicate it here */
|
||||
.two-lines-ellipsis {
|
||||
display: -webkit-box !important;
|
||||
|
||||
@ -1,7 +1,3 @@
|
||||
#job-offers #job-offers-board {
|
||||
min-height: calc(100vh - 72px);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
min-height: calc(100vh - 50px);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,42 +1,162 @@
|
||||
nav#main__menu {
|
||||
height: calc(100vh - 72px);
|
||||
height: 100vh;
|
||||
|
||||
&.searching {
|
||||
background-image: url('../images/magnify-white.svg');
|
||||
background-color: var(--color-heading);
|
||||
background-repeat: no-repeat;
|
||||
background-position-x: right -20px;
|
||||
background-position-y: 150px;
|
||||
background-size: 80%;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
background-size: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
min-height: calc(100vh - 50px);
|
||||
}
|
||||
|
||||
.transparent-background {
|
||||
background-color: transparent;
|
||||
|
||||
&.active[active] {
|
||||
background-color: var(--color-third);
|
||||
}
|
||||
|
||||
&.hover:hover:not([active]) {
|
||||
background-color: #202B3C;
|
||||
}
|
||||
|
||||
&.reverse {
|
||||
background-color: var(--color-third);
|
||||
}
|
||||
}
|
||||
|
||||
.unread {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
solid-route.menu,
|
||||
solid-link.menu,
|
||||
div.menu {
|
||||
.badge {
|
||||
float: right;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
padding: 3px;
|
||||
}
|
||||
&:hover .icon,
|
||||
&[active] .icon {
|
||||
|
||||
.menu-search {
|
||||
padding: 0;
|
||||
|
||||
form::before,
|
||||
solid-form-placeholder-text::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
|
||||
solid-form-placeholder-text {
|
||||
display: contents;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
background: transparent;
|
||||
color: #D0D4DA;
|
||||
margin-top: 0;
|
||||
padding: 12px 13px;
|
||||
height: 50px;
|
||||
|
||||
/* https://css-tricks.com/almanac/selectors/p/placeholder/ */
|
||||
&::-webkit-input-placeholder {
|
||||
/* Chrome/Opera/Safari */
|
||||
color: #D0D4DA;
|
||||
}
|
||||
|
||||
&::-moz-placeholder {
|
||||
/* Firefox 19+ */
|
||||
color: #D0D4DA;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
/*background: #202B3C;*/
|
||||
color: white;
|
||||
background: var(--color-heading);
|
||||
}
|
||||
&[active]+.divider {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #D0D4DA;
|
||||
margin-top: 0 !important;
|
||||
height: auto;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-header {
|
||||
|
||||
/* Chevron animation */
|
||||
.transform-up {
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding-top: 2px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@media (min-width: 768.01px) {
|
||||
|
||||
&:not(:hover) .menu-options,
|
||||
&:not(:hover) .menu-admin {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-options {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.menu-admin {
|
||||
position: absolute;
|
||||
z-index: 3016;
|
||||
left: 78px;
|
||||
top: 36px;
|
||||
text-align: end;
|
||||
width: 64%;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
height: 9vh;
|
||||
top: 0;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
top: 50px;
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-menu {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Styles for the small icon */
|
||||
.sub-menu-icon {
|
||||
margin-left: 3px;
|
||||
margin-right: 3px;
|
||||
opacity: 0.8;
|
||||
width: 12px;
|
||||
|
||||
>div {
|
||||
line-height: 19px;
|
||||
}
|
||||
@ -44,15 +164,11 @@ nav#main__menu {
|
||||
|
||||
.sub-menu-name {
|
||||
margin-right: 15px;
|
||||
margin-left: 3px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.menu-chevron {
|
||||
float: right;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
|
||||
/* Ellipsis */
|
||||
.ellipsis {
|
||||
|
||||
@ -76,8 +192,11 @@ nav#main__menu {
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
float: right;
|
||||
.empty {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 13px;
|
||||
width: 87%;
|
||||
}
|
||||
|
||||
.divider {
|
||||
@ -86,13 +205,96 @@ nav#main__menu {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.create {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 20px;
|
||||
width: 87%;
|
||||
|
||||
/* Header's general counter appear or disappear on click (JS animation) */
|
||||
.menu-header>div:not(.transform-up)~.badge {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-header>div.transform-up~.badge {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* End */
|
||||
|
||||
/* The little cross icon on contacts' name appears or disapear + hover + styles */
|
||||
.sub-menu__contacts>div>solid-display {
|
||||
|
||||
hubl-menu-contact-removed {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-menu__contacts>div>solid-display {
|
||||
height: 28px;
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
|
||||
hubl-menu-fix-url-contact {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
hubl-counter {
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
solid-set-default[name="message"] {
|
||||
margin-right: 9px;
|
||||
}
|
||||
|
||||
hubl-menu-contact-removed {
|
||||
width: 38px;
|
||||
height: 27.75px;
|
||||
text-align: right;
|
||||
position: relative;
|
||||
top: -28px;
|
||||
display: block;
|
||||
left: calc(100% - 47px);
|
||||
padding-top: 5px;
|
||||
|
||||
button::before {
|
||||
font-size: 18px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* End */
|
||||
|
||||
/* Modal to keep/remove a contact */
|
||||
hubl-menu-contact-removed dialog {
|
||||
background: white !important;
|
||||
border: none;
|
||||
padding: 60px 30px;
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 30px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
div,
|
||||
p {
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
&::before,
|
||||
p::before,
|
||||
div::before,
|
||||
button::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* End */
|
||||
|
||||
&.jsLeftMenu {
|
||||
display: inline-block;
|
||||
|
||||
@ -116,4 +318,3 @@ nav#main__menu {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,3 @@
|
||||
#members>div:first-of-type {
|
||||
min-height: calc(100vh - 72px);
|
||||
|
||||
@media (max-width: 768px) {
|
||||
min-height: calc(100vh - 50px);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
const CACHE_NAME = 'hubl-store-cug7431';
|
||||
const CACHE_NAME = 'hubl-store-epm9475';
|
||||
|
||||
self.addEventListener('install', function (e) {
|
||||
self.skipWaiting();
|
||||
|
||||
@ -22,13 +22,21 @@ div.segment.full.padding-large.padding-top-medium.padding-bottom-xsmall.sm-paddi
|
||||
|
||||
solid-form-search.form.search-form.search-button(
|
||||
id=`admin-circle-filter-${page}`
|
||||
<<<<<<< HEAD
|
||||
fields='name'
|
||||
label-name=''
|
||||
widget-name='solid-form-label-text'
|
||||
class-name="segment margin-bottom-medium sm-margin-bottom-none third sm-full padding-right-small sm-padding-none text-small"
|
||||
=======
|
||||
fields='searchname'
|
||||
search-searchname='name, circle.name'
|
||||
label-searchname=''
|
||||
widget-searchname='solid-form-label-text'
|
||||
class-searchname="segment margin-bottom-medium sm-margin-bottom-none third sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
|
||||
>>>>>>> b9a8c8ba4de7985088e46bda8c024cf121439ff8
|
||||
submit-button=""
|
||||
submit-widget="button"
|
||||
data-trans='label-name=circle.list.searchBy;submit-button=circle.list.searchButton'
|
||||
data-trans='label-searchname=circle.list.searchBy;submit-button=circle.list.searchButton'
|
||||
)
|
||||
|
||||
ul(class='segment full margin-top-xsmall sm-margin-top-none sm-padding-none whitespace-normal tabs text-disable-selection')
|
||||
@ -41,6 +49,7 @@ div.segment.full.padding-large.padding-top-medium.padding-bottom-xsmall.sm-paddi
|
||||
data-src=`${getComponent('circles').endpoints.get}joinable/`
|
||||
fields=""
|
||||
counter-template="(${counter})"
|
||||
filtered-by=`admin-circle-filter-${page}`
|
||||
)
|
||||
li(class='segment sm-full text-xlarge text-color-heading text-letter-spacing-large margin-left-medium sm-margin-left-none')
|
||||
solid-link(class='segment sm-full sm-padding-xsmall tab' next=`admin-${getRoute('circles', true)}-leave`)&attributes({'class': page == 'leave' ? 'active' : false})
|
||||
@ -52,4 +61,5 @@ div.segment.full.padding-large.padding-top-medium.padding-bottom-xsmall.sm-paddi
|
||||
nested-field="circles"
|
||||
fields=""
|
||||
counter-template="(${counter})"
|
||||
filtered-by=`admin-circle-filter-${page}`
|
||||
)
|
||||
|
||||
46
src/views/partials/communities/page-community-directory.pug
Normal file
46
src/views/partials/communities/page-community-directory.pug
Normal file
@ -0,0 +1,46 @@
|
||||
.padding-small.sm-padding-none.sm-padding-top-large.sm-padding-bottom-large
|
||||
h2.margin-top-xxsmall.margin-left-xsmall.margin-bottom-medium.sm-margin-none.sm-margin-right-xsmall.sm-margin-bottom-large.sm-margin-left-xsmall.text-xlarge.text-bold.text-color-heading.text-uppercase(data-trans='communities.list.title')
|
||||
|
||||
div.padding-top-xxsmall.margin-left-xsmall.sm-padding-none.sm-margin-none.sm-margin-right-xsmall.sm-margin-left-xsmall
|
||||
div.segment.half.sm-full
|
||||
solid-form-search.form.search-form.search-button(
|
||||
id=`communities-filter`
|
||||
fields='name'
|
||||
placeholder-name=''
|
||||
widget-name='solid-form-placeholder-text'
|
||||
class-name="segment margin-bottom-medium sm-margin-bottom-none three-quarter sm-full padding-right-small sm-padding-none text-small input-bg-white children-shadow"
|
||||
submit-button=""
|
||||
submit-widget="button"
|
||||
data-trans='placeholder-name=communities.list.searchBy;submit-button=communities.list.searchButton'
|
||||
)
|
||||
div.segment.half.sm-full.text-right
|
||||
solid-link.segment.children-link-rounded.children-icon-map.children-link-reversed.color-secondary.bordered(next=`${component.route}-map`)
|
||||
span
|
||||
|
||||
div.segment.full.padding-top-xsmall.sm-padding-xsmall.whitespace-normal
|
||||
div.loader(id=`loader-${component.route}-directory`)
|
||||
div
|
||||
div
|
||||
div
|
||||
div
|
||||
solid-display(
|
||||
class='segment full children children-quarter sm-children-full children-margin-bottom-medium sm-children-margin-bottom-xsmall children-padding-right-xsmall children-padding-left-xsmall sm-children-padding-none sm-whitespace-normal masonry pagination'
|
||||
data-src=`${component.endpoints.get}`
|
||||
loader-id=`loader-${component.route}-directory`
|
||||
fields='segment1(segment2(logo), segment3(name, profile.shortDescription, counter))'
|
||||
filtered-by=`communities-filter`
|
||||
order-by='name'
|
||||
paginate-by='20'
|
||||
|
||||
class-segment1='segment hover bg-color-white shadow border-rounded-xxsmall full text-top whitespace-normal'
|
||||
class-segment2='segment block padding-xlarge text-center'
|
||||
class-segment3='segment full padding-xlarge padding-top-medium sm-padding-medium border-top border-color-grey text-center whitespace-normal'
|
||||
class-name='segment block one-line-ellipsis text-xlarge text-bold text-color-heading margin-bottom-xsmall'
|
||||
class-profile.shortDescription='segment two-lines-ellipsis margin-bottom-xlarge sm-margin-bottom-medium whitespace-normal circle-subtitle-custom'
|
||||
class-counter='segment block margin-bottom-large whitespace-normal'
|
||||
|
||||
widget-logo='hubl-admin-community-logo'
|
||||
action-counter="counter"
|
||||
widget-counter='hubl-communities-counter-alternate'
|
||||
next=`${component.route}-profile`
|
||||
)
|
||||
1
src/views/partials/communities/page-community-edit.pug
Normal file
1
src/views/partials/communities/page-community-edit.pug
Normal file
@ -0,0 +1 @@
|
||||
h1 COMMUEDIT
|
||||
18
src/views/partials/communities/page-community-map.pug
Normal file
18
src/views/partials/communities/page-community-map.pug
Normal file
@ -0,0 +1,18 @@
|
||||
.padding-small.sm-padding-none.sm-padding-top-large.sm-padding-bottom-large
|
||||
h2.margin-top-xxsmall.margin-left-xsmall.margin-bottom-medium.sm-margin-none.sm-margin-right-xsmall.sm-margin-bottom-large.sm-margin-left-xsmall.text-xlarge.text-bold.text-color-heading.text-uppercase(data-trans='communities.list.title')
|
||||
|
||||
div.padding-top-xxsmall.margin-left-xsmall.sm-padding-none.sm-margin-none.sm-margin-right-xsmall.sm-margin-left-xsmall
|
||||
div.segment.half.sm-full
|
||||
solid-form-search.form.search-form.search-button(
|
||||
id=`communities-filter-map`
|
||||
fields='name'
|
||||
placeholder-name=''
|
||||
widget-name='solid-form-placeholder-text'
|
||||
class-name="segment margin-bottom-medium sm-margin-bottom-none three-quarter sm-full padding-right-small sm-padding-none text-small input-bg-white children-shadow"
|
||||
submit-button=""
|
||||
submit-widget="button"
|
||||
data-trans='placeholder-name=communities.list.searchBy;submit-button=communities.list.searchButton'
|
||||
)
|
||||
div.segment.half.sm-full.text-right
|
||||
solid-link.segment.children-link-rounded.children-icon-map.children-link-reversed.color-secondary.bordered(next=`${component.route}-directory`)
|
||||
span
|
||||
@ -1,10 +1,10 @@
|
||||
div
|
||||
|
||||
solid-link.segment.sm-hidden(next=getRoute('dashboard', true))
|
||||
img.logo(src=`${client.logo || '/images/logo.webp'}`)
|
||||
h1.text-color-heading.text-medium.text-semibold.text-letter-spacing-large=client.name || 'Hubl'
|
||||
button.segment.lg-hidden.icon-menu#toggleMainMenu
|
||||
|
||||
span.tag.reversed.text-semibold(data-trans='header.beta')
|
||||
span.tag.reversed.text-bold.margin-left-xsmall(data-trans='header.beta')
|
||||
|
||||
div
|
||||
if componentSet.has("themeChecker")
|
||||
@ -17,7 +17,7 @@ div
|
||||
)
|
||||
|
||||
if componentSet.has("notification")
|
||||
solid-notifications.segment.sm-margin-right-xlarge(
|
||||
solid-notifications.segment.margin-right-large(
|
||||
nested-field="inbox"
|
||||
bind-user
|
||||
)
|
||||
@ -25,15 +25,13 @@ div
|
||||
if componentSet.has("autoLogin") || componentSet.has("registering")
|
||||
//- User menu visible on large screens
|
||||
details.segment.sm-hidden.user-controls
|
||||
summary.text-right
|
||||
solid-display.labelled-avatar.padding-top-xsmall(
|
||||
fields='segment1(account.picture), segment2(first_name), segment3(button)'
|
||||
summary.text-right.padding-right-xsmall.padding-left-xsmall
|
||||
solid-display.labelled-avatar(
|
||||
fields='segment1(account.picture), segment2(button)'
|
||||
class-segment1='segment'
|
||||
class-segment2='segment margin-left-small'
|
||||
class-segment3='segment margin-left-xxsmall'
|
||||
class-account.picture="avatar"
|
||||
class-first_name="text-semibold text-color-heading"
|
||||
class-button='icon icon-arrow-down'
|
||||
class-segment2='segment margin-left-xxsmall'
|
||||
class-account.picture="avatar xxsmall"
|
||||
class-button='icon icon-small icon-arrow-down'
|
||||
widget-account.picture='hubl-user-avatar'
|
||||
bind-user
|
||||
)
|
||||
|
||||
@ -1,10 +1,24 @@
|
||||
solid-form-search.icon.children-icon-magnifier(
|
||||
id='general-search'
|
||||
class='segment block form menu-search'
|
||||
fields='name'
|
||||
search-name='circle.name, project.customer.name, project.name, contact.username'
|
||||
order-asc-names='name'
|
||||
|
||||
label-name='Rechercher'
|
||||
widget-name="solid-form-placeholder-text"
|
||||
|
||||
submit-button=""
|
||||
submit-widget="button"
|
||||
)
|
||||
div.divider
|
||||
solid-router#navbar-router(default-route='dashboard')
|
||||
for component of components
|
||||
if component.route
|
||||
if component.type == "about"
|
||||
solid-route(name=component.route, hidden)
|
||||
if component.type == "dashboard"
|
||||
solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route)
|
||||
solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.transparent-background.hover.active(name=component.route)
|
||||
div.segment.margin-right-xxsmall
|
||||
div.icon.icon-small.icon-home
|
||||
div.segment.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.dashboard"}`)
|
||||
@ -17,24 +31,25 @@ solid-router#navbar-router(default-route='dashboard')
|
||||
div.divider
|
||||
|
||||
if component.type == "circles"
|
||||
div.menu-wrapper
|
||||
div.jsMenuTab
|
||||
div.menu-header.segment.full.padding-xsmall.text-semibold.text-color-white.bg-color-heading.transparent-background.hover.cursor-pointer.jsMenuHeader
|
||||
div.segment.margin-right-xxsmall.jsMenuArrow
|
||||
div.segment.icon.icon-small.icon-arrow-down
|
||||
div.segment.half.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.circles"}`)
|
||||
if componentSet.has("admin")
|
||||
solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=`admin-${component.route}`)
|
||||
div.segment.margin-right-xxsmall
|
||||
div.segment.icon.icon-small.icon-folder-alt
|
||||
div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.circles"}`)
|
||||
div.menu-chevron.segment
|
||||
div.menu-icon.icon-arrow-right-circle
|
||||
solid-route(name=`admin-${component.route}-create`)
|
||||
solid-route(name=`admin-${component.route}-leave`)
|
||||
else
|
||||
div.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading
|
||||
div.segment.margin-right-xxsmall
|
||||
div.segment.icon.icon-small.icon-folder-alt
|
||||
div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.circles"}`)
|
||||
solid-route(name=component.route, rdf-type='hd:circle', use-id='', hidden)
|
||||
solid-route(name=`${component.route}-left`)
|
||||
div.sub-menu.menu-notification
|
||||
div.menu-options.segment.jsMenuOption
|
||||
div.menu-icon.icon.icon-small.icon-options-vertical
|
||||
div.menu-admin.segment.bg-color-white.shadow.text-color-secondary.padding-xxsmall.whitespace-normal.hidden.jsMenuAdmin
|
||||
span.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall.lg-hidden(data-trans="menuLeft.closeMenu" onclick="this.parentElement.classList.toggle('hidden', true)")
|
||||
solid-link.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall(next=`admin-${component.route}` data-trans="menuLeft.circlesBrowse")
|
||||
solid-link.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall(next=`admin-${component.route}-create` data-trans="menuLeft.circleCreate")
|
||||
solid-badge.badge(data-type="Mention" data-rdf-type="hd:circle")
|
||||
solid-route(name=`admin-${component.route}` hidden)
|
||||
solid-route(name=`admin-${component.route}-create` hidden)
|
||||
solid-route(name=`admin-${component.route}-leave` hidden)
|
||||
solid-route(name=component.route rdf-type='hd:circle' use-id='' hidden)
|
||||
solid-route(name=`${component.route}-left` hidden)
|
||||
div.sub-menu.menu-notification.padding-bottom-xxsmall.jsMenuSub
|
||||
div.loader.loader-menu(id=`loader-${component.route}`)
|
||||
div
|
||||
div
|
||||
@ -45,67 +60,62 @@ solid-router#navbar-router(default-route='dashboard')
|
||||
nested-field='circles'
|
||||
fields='circle'
|
||||
loader-id=`loader-${component.route}`
|
||||
empty-widget='hubl-menu-create'
|
||||
empty-widget='hubl-menu-empty'
|
||||
empty-value=''
|
||||
data-trans="empty-value=menuLeft.emptyCircleProject.circle"
|
||||
widget-circle='hubl-menu-fix-url-circle'
|
||||
order-asc="circle.name"
|
||||
filtered-by="general-search"
|
||||
)
|
||||
div.divider
|
||||
if component.type == "chat"
|
||||
div.menu-wrapper
|
||||
if componentSet.has("admin")
|
||||
solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=`admin-${component.route}`)
|
||||
div.segment.margin-right-xxsmall
|
||||
div.segment.icon.icon-small.icon-folder-alt
|
||||
div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.messages"}`)
|
||||
div.menu-chevron.segment
|
||||
div.menu-icon.icon-arrow-right-circle
|
||||
solid-route(name=`admin-${component.route}-create`, use-id='', hidden)
|
||||
else
|
||||
div.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading
|
||||
div.segment.margin-right-xxsmall
|
||||
div.segment.icon.icon-small.icon-folder-alt
|
||||
div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.messages"}`)
|
||||
div.jsMenuTab
|
||||
div.menu-header.segment.full.padding-xsmall.text-semibold.text-color-white.bg-color-heading.transparent-background.hover.cursor-pointer.jsMenuHeader
|
||||
div.segment.margin-right-xxsmall.jsMenuArrow
|
||||
div.segment.icon.icon-small.icon-arrow-down
|
||||
div.segment.half.text-uppercase.text-letter-spacing-large(data-trans=`${component.name?component.name:"menuLeft.messages"}`)
|
||||
if componentSet.has("profileDirectory")
|
||||
div.menu-options.segment.jsMenuOption
|
||||
solid-link.segment.block.menu-icon.icon.icon-small.icon-user-follow(next=getRoute('profileDirectory', true))
|
||||
solid-badge.badge(data-type="Message")
|
||||
solid-route(name=`admin-${component.route}`, hidden)
|
||||
solid-route(name=component.route, rdf-type='foaf:user', use-id='', hidden)
|
||||
div.sub-menu.menu-notification
|
||||
div.sub-menu.menu-notification.padding-bottom-xxsmall.jsMenuSub
|
||||
div.loader.loader-menu(id=`loader-${component.route}`)
|
||||
div
|
||||
div
|
||||
div
|
||||
div
|
||||
//- search-fields="contact.name"
|
||||
//- search-label-contact.name=""
|
||||
//- data-trans="search-label-contact.name=menuLeft.search"
|
||||
//- search-widget-contact.name="hubl-search-users"
|
||||
solid-display.segment.full.whitespace-normal(
|
||||
solid-display.sub-menu__contacts.segment.full.children-full.whitespace-normal(
|
||||
bind-user
|
||||
nested-field='contacts'
|
||||
fields='contact'
|
||||
fields='contact, @id'
|
||||
loader-id=`loader-${component.route}`
|
||||
empty-widget='hubl-create-contact'
|
||||
empty-value=''
|
||||
empty-widget='hubl-menu-empty'
|
||||
widget-contact='hubl-menu-fix-url-contact'
|
||||
widget-id='hubl-menu-contact-removed'
|
||||
filtered-by="general-search"
|
||||
order-asc="contact.username"
|
||||
)
|
||||
if component.type == "projects"
|
||||
div.menu-wrapper
|
||||
div.jsMenuTab
|
||||
div.menu-header.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.transparent-background.hover.active.cursor-pointer.jsMenuHeader
|
||||
div.segment.margin-right-xxsmall.jsMenuArrow
|
||||
div.segment.icon.icon-small.icon-arrow-down
|
||||
div.segment.half.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.projects")
|
||||
if componentSet.has("admin")
|
||||
solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=`admin-${component.route}`)
|
||||
div.segment.margin-right-xxsmall
|
||||
div.segment.icon.icon-small.icon-folder-alt
|
||||
div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.projects")
|
||||
div.menu-chevron.segment
|
||||
div.icon-arrow-right-circle
|
||||
div.menu-options.segment.jsMenuOption
|
||||
div.menu-icon.icon.icon-small.icon-options-vertical
|
||||
div.menu-admin.segment.bg-color-white.shadow.text-color-secondary.padding-xxsmall.whitespace-normal.hidden.jsMenuAdmin
|
||||
span.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall.lg-hidden(data-trans="menuLeft.closeMenu" onclick="this.parentElement.classList.toggle('hidden', true)")
|
||||
solid-link.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall(next=`admin-${component.route}` data-trans="menuLeft.projectsBrowse")
|
||||
solid-link.segment.full.one-line-ellipsis.padding-xxsmall.sm-padding-xsmall(next=`admin-${component.route}-create` data-trans="menuLeft.projectCreate")
|
||||
solid-badge.badge(data-type="Mention" data-rdf-type="hd:project")
|
||||
solid-route(name=`admin-${component.route}`, hidden)
|
||||
solid-route(name=`admin-${component.route}-create`, hidden)
|
||||
else
|
||||
div.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading
|
||||
div.segment.margin-right-xxsmall
|
||||
div.segment.icon.icon-small.icon-folder-alt
|
||||
div.segment.three-quarter.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.projects")
|
||||
solid-route(name=component.route, rdf-type='hd:project', use-id='', hidden)
|
||||
solid-route(name=`${component.route}-left`, hidden)
|
||||
div.sub-menu.menu-notification
|
||||
div.sub-menu.menu-notification.padding-bottom-xxsmall.jsMenuSub
|
||||
div.loader.loader-menu(id=`loader-${component.route}`)
|
||||
div
|
||||
div
|
||||
@ -116,40 +126,41 @@ solid-router#navbar-router(default-route='dashboard')
|
||||
nested-field='projects'
|
||||
fields='project'
|
||||
loader-id=`loader-${component.route}`
|
||||
empty-widget='hubl-menu-create'
|
||||
empty-value=''
|
||||
empty-widget='hubl-menu-empty'
|
||||
data-trans="empty-value=menuLeft.emptyCircleProject.project"
|
||||
widget-project='hubl-menu-fix-url-project'
|
||||
filtered-by="general-search"
|
||||
order-asc="project.customer.name"
|
||||
|
||||
)
|
||||
div.divider
|
||||
if component.type == "profileDirectory"
|
||||
solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route)
|
||||
solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.transparent-background.hover.active(name=component.route)
|
||||
div.segment.margin-right-xxsmall
|
||||
div.icon.icon-small.icon-people
|
||||
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.profileDirectory")
|
||||
solid-route.menu(name=`${component.route}-profile`, hidden)
|
||||
div.divider
|
||||
if component.type == "jobBoard"
|
||||
solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route, rdf-type='hd:joboffer')
|
||||
solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.transparent-background.hover.active(name=component.route, rdf-type='hd:joboffer')
|
||||
div.segment.margin-right-xxsmall
|
||||
div.segment.icon.icon-small.icon-briefcase
|
||||
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.jobBoard")
|
||||
div.divider
|
||||
if component.type == "resources"
|
||||
solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route)
|
||||
solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.transparent-background.hover.active(name=component.route)
|
||||
div.segment.margin-right-xxsmall
|
||||
div.segment.icon.icon-small.icon-docs
|
||||
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.resources")
|
||||
div.divider
|
||||
if component.type == "polls"
|
||||
solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route)
|
||||
solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.transparent-background.hover.active(name=component.route)
|
||||
div.segment.margin-right-xxsmall
|
||||
div.segment.icon.icon-small.icon-bubbles
|
||||
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.gov")
|
||||
div.divider
|
||||
if component.type == "events"
|
||||
solid-route.menu.segment.full.padding-small.text-semibold.text-color-white.heading-active.bg-color-heading.hover.active(name=component.route)
|
||||
solid-route.menu-tab.segment.full.padding-xsmall.text-semibold.text-color-white.heading-active.bg-color-heading.transparent-background.hover.active(name=component.route)
|
||||
div.segment.margin-right-xxsmall
|
||||
div.segment.icon.icon-small.icon-calendar
|
||||
div.segment.text-uppercase.text-letter-spacing-large(data-trans="menuLeft.events")
|
||||
|
||||
@ -23,11 +23,11 @@ include widgets/hubl-circle-user-admin.pug
|
||||
include widgets/hubl-communities-counter-alternate.pug
|
||||
include widgets/hubl-communities-logo.pug
|
||||
include widgets/hubl-counter.pug
|
||||
include widgets/hubl-create-contact.pug
|
||||
include widgets/hubl-email-field.pug
|
||||
include widgets/hubl-menu-create.pug
|
||||
include widgets/hubl-menu-empty.pug
|
||||
include widgets/hubl-menu-fix-url-circle.pug
|
||||
include widgets/hubl-menu-fix-url-contact.pug
|
||||
include widgets/hubl-menu-contact-removed.pug
|
||||
include widgets/hubl-menu-fix-url-project.pug
|
||||
include widgets/hubl-menu-jabberid.pug
|
||||
include widgets/hubl-menu-publicprivate.pug
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
if componentSet.has('admin') && componentSet.has('communities')
|
||||
solid-widget(name='hubl-communities-profile-logo')
|
||||
template ${value != "" ? `<div \style="background-image:url(${value});" />` : `<div></div>`}
|
||||
@ -0,0 +1,11 @@
|
||||
if componentSet.has('admin') && componentSet.has('communities')
|
||||
solid-widget(name='hubl-communities-profile-members-counter')
|
||||
template
|
||||
p
|
||||
span.icon.icon-people.icon-third.icon-large.margin-right-xsmall
|
||||
solid-display(
|
||||
data-src="${src || value}"
|
||||
fields=''
|
||||
counter-template="\\\${counter}"
|
||||
)
|
||||
span members
|
||||
@ -0,0 +1,6 @@
|
||||
if componentSet.has('admin') && componentSet.has('communities')
|
||||
solid-widget(name='hubl-communities-profile-profile')
|
||||
template
|
||||
| ${value.website != "" ? `<a class="link margin-bottom-xsmall icon mdi-link-variant icon-third icon-large icon-margin-right-xsmall" href="tel:\${value.website}" target="_blank">\$value.website</a>` : `<div></div>`}
|
||||
| ${value.email != "" ? `<a class="link margin-bottom-xsmall icon mdi-email-outline icon-third icon-large icon-margin-right-xsmall" href="mailto:\${value.email}">\$value.email</a>` : `<div></div>`}
|
||||
| ${value.phone != "" ? `<a class="link margin-bottom-xsmall icon mdi-cellphone-iphone icon-third icon-large icon-margin-right-xsmall" href="tel:\${value.phone}">\$value.phone</a>` : `<div></div>`}
|
||||
@ -1,9 +0,0 @@
|
||||
if componentSet.has('chat')
|
||||
solid-widget(name='hubl-create-contact')
|
||||
template
|
||||
p.segment.full.create.text-color-white.whitespace-normal(style='display:block!important')
|
||||
span(data-trans="menuLeft.contact.create")
|
||||
span
|
||||
solid-link(next=getRoute('profileDirectory', true) data-trans="menuLeft.contact.profileDir")
|
||||
span
|
||||
span(data-trans="menuLeft.contact.create2")
|
||||
5
src/views/partials/widgets/hubl-menu-contact-removed.pug
Normal file
5
src/views/partials/widgets/hubl-menu-contact-removed.pug
Normal file
@ -0,0 +1,5 @@
|
||||
if componentSet.has('chat')
|
||||
solid-widget(name='hubl-menu-contact-removed')
|
||||
template ${value != "" ? `
|
||||
<solid-delete class="menu-delete-button button-remove icon children-icon-close" data-src='${value}' data-label="" confirmation-type="confirm" confirmation-message="Vous êtes sur le point de retirer ce contact. Etes-vous sûr ?" confirmation-submit-text="Oui, valider" confirmation-cancel-text="Non, c'est une erreur" confirmation-submit-class="segment sm-full text-center button text-xsmall text-bold text-uppercase reversed color-secondary bordered padding-right-medium padding-left-medium margin-right-xsmall sm-margin-right-none sm-margin-bottom-medium" confirmation-cancel-class="segment sm-full text-center button text-xsmall text-bold text-uppercase color-secondary bordered padding-right-medium padding-left-medium margin-left-xsmall sm-margin-left-none"></solid-delete>` : ""}
|
||||
//- Fix: using type confirm, dialog is not available on Firefox, polyfill only works if dialog is a direct child of body
|
||||
@ -1,10 +0,0 @@
|
||||
if componentSet.has('circles') || componentSet.has('projects')
|
||||
solid-widget(name='hubl-menu-create')
|
||||
template
|
||||
p.segment.full.create.text-color-white.whitespace-normal(style='display:block!important')
|
||||
span(data-trans="menuLeft.emptyCircleProject.notPartOf")
|
||||
span ${value}.
|
||||
if componentSet.has('admin')
|
||||
span(data-trans="menuLeft.emptyCircleProject.createNew")
|
||||
span
|
||||
solid-link(next=`\${value.startsWith('proj') ? 'admin-${getRoute('projects', true)}' : 'admin-${getRoute('circles', true)}'}`, data-trans="menuLeft.emptyCircleProject.adminPanel")
|
||||
5
src/views/partials/widgets/hubl-menu-empty.pug
Normal file
5
src/views/partials/widgets/hubl-menu-empty.pug
Normal file
@ -0,0 +1,5 @@
|
||||
if componentSet.has('circles') || componentSet.has('projects') || componentSet.has('profileDirectory') || componentSet.has('chat')
|
||||
solid-widget(name='hubl-menu-empty')
|
||||
template
|
||||
p.segment.full.empty.whitespace-normal(style='display:block!important; color:#D0D4DA')
|
||||
span(data-trans="menuLeft.emptyCircleProjectContact.empty")
|
||||
@ -2,5 +2,5 @@ if componentSet.has('circles')
|
||||
solid-widget(name='hubl-menu-fix-url-circle')
|
||||
template ${value != "" ? `
|
||||
<solid-link class="segment full" data-src="${value}" next="${hubl.getRoute('circles', true)}">
|
||||
<solid-display class="segment full text-color-white heading-active bg-color-heading hover active" data-src='${value}' fields='segment(status, circle(name, jabberID), badge)' class-segment="segment full padding-top-xxsmall padding-bottom-xxsmall padding-right-small padding-left-medium" class-status='segment text-top sub-menu-icon' class-circle='segment three-quarter sub-menu-name' class-name='ellipsis-content' class-badge='segment badge' value-badge='${value}' widget-status='hubl-menu-publicprivate' widget-badge='hubl-counter' widget-jabberID='hubl-menu-jabberid' widget-name='solid-display-div' order-asc="name"></solid-display>
|
||||
<solid-display class="segment full text-color-white heading-active bg-color-heading transparent-background hover active" data-src='${value}' fields='segment(status, circle(name, jabberID), badge)' class-segment="segment full padding-top-xxsmall padding-bottom-xxsmall padding-right-xsmall padding-left-xsmall" class-status='segment text-top sub-menu-icon' class-circle='segment three-quarter sub-menu-name' class-name='ellipsis-content' class-badge='segment badge' value-badge='${value}' widget-status='hubl-menu-publicprivate' widget-badge='hubl-counter' widget-jabberID='hubl-menu-jabberid' widget-name='solid-display-div' order-asc="name"></solid-display>
|
||||
</solid-link>` : ""}
|
||||
@ -2,5 +2,5 @@ if componentSet.has('chat')
|
||||
solid-widget(name='hubl-menu-fix-url-contact')
|
||||
template ${value != "" ? `
|
||||
<solid-link class="segment full" data-src="${value}" next="${hubl.getRoute('chat', true)}">
|
||||
<solid-display class="segment full text-color-white heading-active bg-color-heading hover active" data-src='${value}' fields='segment(message(name, chatProfile.jabberID), badge)' class-segment="segment full padding-top-xxsmall padding-bottom-xxsmall padding-right-small padding-left-medium" class-message='segment three-quarter sub-menu-name' class-badge='segment badge' value-badge='${value}' widget-badge='hubl-counter' widget-chatProfile.jabberID='hubl-menu-jabberid' widget-name='solid-display-div' order-asc='username'></solid-display>
|
||||
<solid-display class="segment full text-color-white heading-active bg-color-heading transparent-background hover active" data-src='${value}' fields='segment(message(name, chatProfile.jabberID), badge)' class-segment="segment full padding-top-xxsmall padding-bottom-xxsmall padding-right-xsmall padding-left-xsmall" class-message='segment three-quarter sub-menu-name' class-badge='segment badge' value-badge='${value}' widget-badge='hubl-counter' widget-chatProfile.jabberID='hubl-menu-jabberid' widget-name='solid-display-div' order-asc='username'></solid-display>
|
||||
</solid-link>` : ""}
|
||||
@ -2,5 +2,5 @@ if componentSet.has('projects')
|
||||
solid-widget(name='hubl-menu-fix-url-project')
|
||||
template ${value != "" ? `
|
||||
<solid-link class="segment full" data-src="${value}" next="${hubl.getRoute('projects', true)}">
|
||||
<solid-display class="segment full text-color-white heading-active bg-color-heading hover active" data-src='${value}' fields='segment(status, project(customer.name, name, jabberID), badge)' class-segment="segment full padding-top-xxsmall padding-bottom-xxsmall padding-right-small padding-left-medium" class-status='segment text-top sub-menu-icon' class-project='segment three-quarter sub-menu-name' class-customer.name='ellipsis-content' class-name='ellipsis-content' class-badge='segment badge text-top' value-badge='${value}' widget-status='hubl-menu-publicprivate' widget-jabberID='hubl-menu-jabberid' widget-badge='hubl-counter' widget-name='solid-display-div' order-asc="customer.name"></solid-display>
|
||||
<solid-display class="segment full text-color-white heading-active bg-color-heading transparent-background hover active" data-src='${value}' fields='segment(project(customer.name, name, jabberID), badge)' class-segment="segment full padding-top-xxsmall padding-bottom-xxsmall padding-right-xsmall padding-left-xsmall" class-project='segment three-quarter sub-menu-name' class-customer.name='ellipsis-content' class-name='ellipsis-content' class-badge='segment badge text-top' value-badge='${value}' widget-jabberID='hubl-menu-jabberid' widget-badge='hubl-counter' widget-name='solid-display-div' order-asc="customer.name"></solid-display>
|
||||
</solid-link>` : ""}
|
||||
@ -2,5 +2,5 @@ if componentSet.has('circles') || componentSet.has('projects')
|
||||
solid-widget(name='hubl-menu-publicprivate')
|
||||
template
|
||||
div(
|
||||
class="${value == 'Public' ? 'text-simple-line-icons text-large': 'text-simple-line-icons text-xsmall'}"
|
||||
class="${value == 'Public' ? 'text-large': 'text-simple-line-icons text-xsmall'}"
|
||||
) ${value == 'Public' ? '#' : ''}
|
||||
Loading…
Reference in New Issue
Block a user