diff --git a/src/index.pug b/src/index.pug
index bbcaf988e1fc5d90ac5786946a4d38fab44f9c8e..fd4c073f0e2f68a34f08e9f9b1861e1d724e4d4d 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -99,7 +99,7 @@ html(lang="en")
include views/page-messages.pug
if component.type == "circles"
- .with-sidebar.whitespace-normal
+ .with-sidebar.whitespace-normal.jsMobileContentSidebarControl
hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.circles")
hubl-reactivity(bind-user nested-field="circles" target-src="store://user")
hubl-reactivity(data-src=`${component.endpoints.get}joinable/` target-src=`${component.endpoints.get}`)
@@ -141,7 +141,7 @@ html(lang="en")
include views/page-polls.pug
if component.type == "projects"
- .with-sidebar.whitespace-normal
+ .with-sidebar.whitespace-normal.jsMobileContentSidebarControl
hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.projects")
hubl-reactivity(bind-user nested-field="projects" target-src="store://user")
hubl-reactivity(data-src=`${component.endpoints.post}joinable/` target-src=`${component.endpoints.get}`)
diff --git a/src/scripts/keyboard-shortcuts.js b/src/scripts/keyboard-shortcuts.js
new file mode 100644
index 0000000000000000000000000000000000000000..561c41dc6234c991f4e64492f73a2271a61026e6
--- /dev/null
+++ b/src/scripts/keyboard-shortcuts.js
@@ -0,0 +1,9 @@
+document.addEventListener("keydown", function (e) {
+ /*
+ CTRL + K : Focus on the user search
+ */
+ if(e.ctrlKey && e.key == "k") {
+ document.querySelector('#general-search input[type="text"]').focus();
+ e.preventDefault();
+ }
+});
diff --git a/src/scripts/navigate-event.js b/src/scripts/navigate-event.js
index d2fc2e7fbcce36f7d38112c5fd5a6aa96f917675..9fb041a650bfa7732c90e863037ce79df6f6ff66 100644
--- a/src/scripts/navigate-event.js
+++ b/src/scripts/navigate-event.js
@@ -19,13 +19,27 @@ function closeRightMenu() {
el.querySelector('.text-right').setAttribute('hidden', '');
el.querySelector('.text-left').removeAttribute('hidden');
});
- Array.from(rightMenu).forEach(el => el.removeAttribute("open"));
+ Array.from(rightMenu).forEach(el => {
+ el.removeAttribute("open");
+ el.classList.add('sm-hidden');
+ Array.from(el.parentElement.querySelectorAll('.jsMobileRightMenuButton')).forEach(ac => {
+ ac.classList.remove('icon-close');
+ ac.classList.add('icon-options-vertical');
+ });
+ });
}
}
function openRightMenu() {
let rightMenu = document.querySelectorAll(".jsRightMenu");
- Array.from(rightMenu).forEach(el => el.setAttribute("open", ""));
+ Array.from(rightMenu).forEach(el => {
+ el.setAttribute("open", "");
+ el.classList.remove('sm-hidden');
+ Array.from(el.parentElement.querySelectorAll('.jsMobileRightMenuButton')).forEach(ac => {
+ ac.classList.remove('icon-options-vertical');
+ ac.classList.add('icon-close');
+ });
+ });
Array.from(document.querySelectorAll(".jsOffsiteToggle")).forEach(el => {
el.querySelector('.text-left').setAttribute('hidden', '');
el.querySelector('.text-right').removeAttribute('hidden');
@@ -35,6 +49,32 @@ function openRightMenu() {
);
}
+function closeRightMobileMenu() {
+ let rightMenu = document.querySelectorAll(".jsRightMenu");
+ if (Array.from(rightMenu).filter(el => el.hasAttribute("mobile-open")).length > 0) {
+ Array.from(rightMenu).forEach(el => {
+ el.removeAttribute("mobile-open");
+ el.classList.add('sm-hidden');
+ Array.from(el.parentElement.querySelectorAll('.jsMobileRightMenuButton')).forEach(ac => {
+ ac.classList.remove('icon-close');
+ ac.classList.add('icon-options-vertical');
+ });
+ });
+ }
+}
+
+function openRightMobileMenu() {
+ let rightMenu = document.querySelectorAll(".jsRightMenu");
+ Array.from(rightMenu).forEach(el => {
+ el.setAttribute("mobile-open", "");
+ el.classList.remove('sm-hidden');
+ Array.from(el.parentElement.querySelectorAll('.jsMobileRightMenuButton')).forEach(ac => {
+ ac.classList.remove('icon-options-vertical');
+ ac.classList.add('icon-close');
+ });
+ });
+}
+
document.addEventListener("DOMContentLoaded", function () {
const componentSet = new Set(window.hubl.components.map(c => c.type));
@@ -112,9 +152,11 @@ document.addEventListener("DOMContentLoaded", function () {
closeLeftMenu();
}
if (
- !event.target.closest(".jsOffsiteToggle")
+ !event.target.closest(".jsOffsiteToggle") &&
+ !event.target.classList.contains('jsMobileRightMenuButton')
) {
closeRightMenu();
+ closeRightMobileMenu();
}
});
@@ -125,6 +167,7 @@ document.addEventListener("DOMContentLoaded", function () {
closeUserControls();
closeLeftMenu();
closeRightMenu();
+ closeRightMobileMenu();
}
};
@@ -152,10 +195,15 @@ document.addEventListener("DOMContentLoaded", function () {
});
});
- Array.from(document.querySelectorAll(".jsMobileSidebarOpenButton")).forEach(
+
+ Array.from(document.querySelectorAll(".jsMobileRightMenuButton")).forEach(
el => {
el.addEventListener("click", () => {
- openRightMenu();
+ if (el.closest('.jsMobileContentSidebarControl').querySelector('nav.jsRightMenu').hasAttribute("mobile-open")) {
+ closeRightMobileMenu();
+ } else {
+ openRightMobileMenu();
+ }
});
}
);
diff --git a/src/styles/content/_index.scss b/src/styles/content/_index.scss
index 40aed50a0c20725fa857b311ca04c3777bb37c42..782105b0544b613ef6d789a3985912abacce5436 100644
--- a/src/styles/content/_index.scss
+++ b/src/styles/content/_index.scss
@@ -69,11 +69,28 @@ main {
/* Styles use with JS to open/close the sidebar */
&.jsRightMenu {
- display: block;
+ @media (min-width: 768,01px) {
+ display: block;
+ }
+
+ @media (max-width: 768px) {
+ position: fixed;
+ top: 99px;
+ right: 0;
+ height: auto;
+ z-index: 2999;
+ box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.14);
+ }
+
solid-link[active] {
color: white;
background: var(--color-heading);
+
+ >li {
+ border-bottom: 1px solid var(--color-heading);
+ }
}
+
solid-link:not([active]):hover {
background: #e4e4e4;
}
@@ -83,30 +100,18 @@ main {
@media (min-width: 768.01px) {
transform: translate(152px);
}
-
- /* Quick fix. When you got time, use animation on the span instead */
- @media (max-width: 768px) {
- ul>li:first-child>span,
- ul>li:first-child>a {
- visibility: hidden;
- }
- }
}
&.jsRightMenu[open] {
display: block;
bottom: 0;
right: 0;
-
- @media(max-width: 768px) {
- box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.12);
- min-width: 60%;
- position: fixed;
- top: 50px;
- z-index: 3000;
- }
}
}
+
+ .jsMobileRightMenuButton {
+ float: right;
+ }
}
/* Add scrollbar to the left menu and to the content */
@@ -122,7 +127,7 @@ main {
height: 100vh;
}
-/* Custom scrollbar of the left-menu*/
+/* Custom scrollbar of the right-menu */
/* Works on Firefox*/
.scrollbar-nav {
scrollbar-width: thin;
@@ -146,9 +151,6 @@ main {
}
}
-
-
-
/* Custom scrollbar of the content */
/* Works on Firefox */
.scrollbar-content {
@@ -172,6 +174,7 @@ main {
border: 3px solid white; /* creates padding around scroll thumb */
}
}
+/* End scrollbar*/
solid-display-value-markdown {
diff --git a/src/views/page-admin.pug b/src/views/page-admin.pug
index a715eeef73f5e364658ded89d3eabe27f8d16c81..6e715bf0638632ca7d8849482b2b6e630540d264 100644
--- a/src/views/page-admin.pug
+++ b/src/views/page-admin.pug
@@ -1,4 +1,4 @@
-.with-sidebar.whitespace-normal.bg-color-white.only-on-admin(hidden)
+.with-sidebar.jsMobileContentSidebarControl.whitespace-normal.bg-color-white.only-on-admin(hidden)
.scrollbar-content.views-container.sidebar-is-closed
for component of components
if component.route
@@ -57,10 +57,10 @@
)
include partials/admin/page-admin-chat-create.pug
- nav.jsRightMenu.text-disable-selection.sidebar.whitespace-normal(role='navigation')
+ nav.jsRightMenu.segment.sm-hidden.text-disable-selection.sidebar.whitespace-normal(role='navigation')
.segment.whitespace-normal.text-color-heading.text-bold
ul
- li.segment.full.padding-small.text-normal.jsOffsiteToggle
+ li.segment.full.sm-hidden.padding-small.text-normal.jsOffsiteToggle
span.icon.icon-arrow-left.icon-xsmall.margin-left-xxsmall.text-left
span.segment.full.text-right(hidden)
span.icon.icon-arrow-right.icon-xsmall.margin-right-xxsmall
diff --git a/src/views/page-circle.pug b/src/views/page-circle.pug
index f52c76c4f8857e706d90e1be36761d2fc900820c..d06725c50010a7b94b2d8d54a5c340ad62bf500e 100644
--- a/src/views/page-circle.pug
+++ b/src/views/page-circle.pug
@@ -41,10 +41,10 @@
)
include partials/circle/page-circle-polls.pug
-nav.jsRightMenu.text-disable-selection.sidebar.whitespace-normal(role='navigation')
+nav.jsRightMenu.segment.sm-hidden.text-disable-selection.sidebar.whitespace-normal(role='navigation')
solid-router.segment.whitespace-normal.text-color-heading.text-bold(default-route=`${component.route}-chat`)
ul
- li.segment.full.padding-small.text-normal.jsOffsiteToggle
+ li.segment.full.sm-hidden.padding-small.text-normal.jsOffsiteToggle
span.icon.icon-arrow-left.icon-xsmall.margin-left-xxsmall.text-left
span.segment.full.text-right(hidden)
span.icon.icon-arrow-right.icon-xsmall.margin-right-xxsmall
diff --git a/src/views/page-project.pug b/src/views/page-project.pug
index eacb578080ef88424697982a8d58379c8ef3c926..2d1721885669b280d463d0097957116f90e170b3 100644
--- a/src/views/page-project.pug
+++ b/src/views/page-project.pug
@@ -32,10 +32,10 @@
)
include partials/project/page-project-invoices.pug
-nav.jsRightMenu.text-disable-selection.sidebar.whitespace-normal(role='navigation')
+nav.jsRightMenu.segment.sm-hidden.text-disable-selection.sidebar.whitespace-normal(role='navigation')
solid-router.segment.whitespace-normal.text-color-heading.text-bold(default-route=`${component.route}-chat`)
ul
- li.segment.full.padding-small.text-normal.jsOffsiteToggle
+ li.segment.full.sm-hidden.padding-small.text-normal.jsOffsiteToggle
span.icon.icon-arrow-left.icon-xsmall.margin-left-xxsmall.text-left
span.segment.full.text-right(hidden)
span.icon.icon-arrow-right.icon-xsmall.margin-right-xxsmall
diff --git a/src/views/partials/admin/page-admin-chat-create.pug b/src/views/partials/admin/page-admin-chat-create.pug
index 85ce2ffca6cc6e36a7344f59d6aebe2c57c5c562..a2a70bbe0fcaa7cca572a28cae785edb6779df8a 100644
--- a/src/views/partials/admin/page-admin-chat-create.pug
+++ b/src/views/partials/admin/page-admin-chat-create.pug
@@ -1,8 +1,10 @@
div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.padding-large.border-bottom.border-color-grey
- div.segment.half.sm-full
+ div.segment.full.sm-three-quarter
h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='communities.title')
div.segment.half.sm-hidden.text-right
solid-link(class="backlink", next=`admin-${getRoute('chat', true)}` data-trans='circle.create.backlink')
+ div.segment.lg-hidden.sm-quarter.text-right
+ div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
div#loader-users-title.loader.loader
@@ -11,12 +13,6 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac
div
div
- div#loader-users-create.loader.loader-top
- div
- div
- div
- div
-
div.segment.margin-bottom-medium
div.segment
solid-display.text-color-heading.text-semibold.text-xlarge.text-letter-spacing-large(
@@ -27,6 +23,12 @@ div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespac
loader-id='loader-users-title'
)
+ div#loader-users-create.loader.loader-top
+ div
+ div
+ div
+ div
+
solid-form.form#selected-community(
bind-resources
nested-field='members'
diff --git a/src/views/partials/admin/page-admin-chat.pug b/src/views/partials/admin/page-admin-chat.pug
index 0d7fdf04735a40127043afc45c36c774b17d16f3..8af70194460b60f10c84bc7fd8c15a80fa03a2ea 100644
--- a/src/views/partials/admin/page-admin-chat.pug
+++ b/src/views/partials/admin/page-admin-chat.pug
@@ -1,5 +1,8 @@
div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
- h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='communities.title')
+ div.segment.full.sm-three-quarter
+ h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='communities.title')
+ div.segment.lg-hidden.sm-quarter.text-right
+ div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
diff --git a/src/views/partials/admin/page-admin-circles-create.pug b/src/views/partials/admin/page-admin-circles-create.pug
index ad90c8f97d467e19c9e293ca1ef468ecfc2d5755..696e6274672cf7f45686fae3203f541428f1d679 100644
--- a/src/views/partials/admin/page-admin-circles-create.pug
+++ b/src/views/partials/admin/page-admin-circles-create.pug
@@ -1,8 +1,10 @@
div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey
- div.segment.half.sm-full
+ div.segment.full.sm-three-quarter
h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.create.title')
div.segment.half.sm-hidden.text-right
solid-link(class="backlink", next=`admin-${getRoute('circles', true)}` data-trans='circle.create.backlink')
+ div.segment.lg-hidden.sm-quarter.text-right
+ div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
div.loader.loader-top(id=`loader-admin-${getComponent('circles').uniq}`)
diff --git a/src/views/partials/admin/page-admin-circles.pug b/src/views/partials/admin/page-admin-circles.pug
index 9aae27b7922400a1116d21ee6c33f606d4632b67..e9c98432565385b7e433142a2629d65f3456a81d 100644
--- a/src/views/partials/admin/page-admin-circles.pug
+++ b/src/views/partials/admin/page-admin-circles.pug
@@ -1,5 +1,8 @@
div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
- h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.list.title')
+ div.segment.full.sm-three-quarter
+ h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.list.title')
+ div.segment.lg-hidden.sm-quarter.text-right
+ div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
div.segment.full.padding-large.padding-top-medium.padding-bottom-xsmall.sm-padding-xsmall.sm-padding-top-xxsmall.whitespace-normal
diff --git a/src/views/partials/admin/page-admin-projects-create.pug b/src/views/partials/admin/page-admin-projects-create.pug
index 662b5e04afd069a60266fbc46c314278e91f9e4c..467b7ae309ac2dbed08a424fdfe0eb45bc093ebd 100644
--- a/src/views/partials/admin/page-admin-projects-create.pug
+++ b/src/views/partials/admin/page-admin-projects-create.pug
@@ -1,8 +1,10 @@
div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey
- div.segment.half.sm-full
+ div.segment.full.sm-three-quarter
h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='project.create.title')
div.segment.half.sm-hidden.text-right
solid-link(class="backlink", next=`admin-${getRoute('projects', true)}` data-trans='project.create.backlink')
+ div.segment.lg-hidden.sm-quarter.text-right
+ div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
div.loader.loader-top(id=`loader-admin-${getComponent('projects').uniq}`)
diff --git a/src/views/partials/admin/page-admin-projects.pug b/src/views/partials/admin/page-admin-projects.pug
index e7bdc26ea39c0f7ea42d9be51c549fe6056e94ab..1258c553dbdf0c91e346647c37552e0f5e1aadb9 100644
--- a/src/views/partials/admin/page-admin-projects.pug
+++ b/src/views/partials/admin/page-admin-projects.pug
@@ -1,5 +1,8 @@
div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
- h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='project.list.title')
+ div.segment.full.sm-three-quarter
+ h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='project.list.title')
+ div.segment.lg-hidden.sm-quarter.text-right
+ div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal
diff --git a/src/views/partials/circle/page-circle-chat.pug b/src/views/partials/circle/page-circle-chat.pug
index 16a1ebf855f2d6bab24cd626681353a51cbe4998..80ad844f3d5d57c907ba0ced8606976049c20082 100644
--- a/src/views/partials/circle/page-circle-chat.pug
+++ b/src/views/partials/circle/page-circle-chat.pug
@@ -1,13 +1,16 @@
div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
- solid-display.text-xxlarge.text-letter-spacing-large(
- bind-resources
- fields='name, dash, subtitle'
+ div.segment.full.sm-three-quarter.whitespace-normal
+ solid-display.text-xlarge.text-letter-spacing-large(
+ bind-resources
+ fields='name, dash, subtitle'
- value-dash=' - '
+ value-dash=' - '
- class-name='text-color-heading text-bold'
- class-dash='text-color-heading text-bold'
- )
+ class-name='text-color-heading text-bold'
+ class-dash='text-color-heading text-bold'
+ )
+ div.segment.lg-hidden.sm-quarter.text-right
+ div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
.chat-view.segment.full.whitespace-normal
solid-xmpp-chat(
diff --git a/src/views/partials/circle/page-circle-edit.pug b/src/views/partials/circle/page-circle-edit.pug
index 7249a408fbe40fc929531b85637d73e4cd94a168..a7154f03f8c36640868e7add7957284c3cd4dea1 100644
--- a/src/views/partials/circle/page-circle-edit.pug
+++ b/src/views/partials/circle/page-circle-edit.pug
@@ -1,7 +1,7 @@
solid-ac-checker(permission='acl:Read', bind-resources)
div.segment.full.padding-large.border-bottom.border-color-grey
- div.segment.half.sm-full
- solid-display.text-xxlarge.text-letter-spacing-large(
+ div.segment.half.sm-three-quarter.whitespace-normal
+ solid-display.text-xlarge.text-letter-spacing-large(
bind-resources
fields='name, dash, subtitle'
@@ -12,6 +12,8 @@ solid-ac-checker(permission='acl:Read', bind-resources)
)
div.segment.half.sm-hidden.text-right
solid-link(class="backlink", bind-resources, next=`${component.route}-profile` data-trans='circle.edit.backlink')
+ div.segment.lg-hidden.sm-quarter.text-right
+ div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
div.segment.full.padding-large.whitespace-normal
diff --git a/src/views/partials/circle/page-circle-profile.pug b/src/views/partials/circle/page-circle-profile.pug
index 30a5b43c1b1ecccaed49b3275e130ec5bbf1e4a8..cf29c6897b350ae7a118cb22a22965a8134727e5 100644
--- a/src/views/partials/circle/page-circle-profile.pug
+++ b/src/views/partials/circle/page-circle-profile.pug
@@ -9,15 +9,18 @@ div(
)
solid-ac-checker.segment.block(permission='acl:Read', bind-resources)
div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
- solid-display.text-xxlarge.text-letter-spacing-large(
- bind-resources
- fields='name, dash, subtitle'
+ div.segment.full.sm-three-quarter.whitespace-normal
+ solid-display.text-xlarge.text-letter-spacing-large(
+ bind-resources
+ fields='name, dash, subtitle'
- value-dash=' - '
+ value-dash=' - '
- class-name='text-color-heading text-bold'
- class-dash='text-color-heading text-bold'
- )
+ class-name='text-color-heading text-bold'
+ class-dash='text-color-heading text-bold'
+ )
+ div.segment.lg-hidden.sm-quarter.text-right
+ div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-xlarge
div.loader(id=`loader-${component.route}-profile-1`)
diff --git a/src/views/partials/project/page-project-chat.pug b/src/views/partials/project/page-project-chat.pug
index 6130ed17d2e36cfda977f4f849d873cd274a735f..0af862891c553597a70d4a7a6a67be17315e4926 100644
--- a/src/views/partials/project/page-project-chat.pug
+++ b/src/views/partials/project/page-project-chat.pug
@@ -1,17 +1,20 @@
div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
- solid-display.text-xxlarge.text-letter-spacing-large(
- bind-resources
- fields='const-title1, number, customer.name, dash, name'
+ div.segment.full.sm-three-quarter.whitespace-normal
+ solid-display.text-xlarge.text-letter-spacing-large(
+ bind-resources
+ fields='const-title1, number, customer.name, dash, name'
- class-const-title1='text-color-heading text-bold text-uppercase'
- class-number='text-color-heading text-bold text-uppercase word-spacing-right'
- class-customer.name='text-color-heading text-bold text-uppercase'
- class-dash='text-color-heading text-bold text-xlarge'
- class-name=''
+ class-const-title1='text-color-heading text-bold text-uppercase'
+ class-number='text-color-heading text-bold text-uppercase word-spacing-right'
+ class-customer.name='text-color-heading text-bold text-uppercase'
+ class-dash='text-color-heading text-bold text-xlarge'
+ class-name=''
- value-const-title1='N°'
- value-dash=' - '
- )
+ value-const-title1='N°'
+ value-dash=' - '
+ )
+ div.segment.lg-hidden.sm-quarter.text-right
+ div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
.chat-view.segment.full.whitespace-normal
solid-xmpp-chat(
diff --git a/src/views/partials/project/page-project-edit.pug b/src/views/partials/project/page-project-edit.pug
index 325ff6b50a38ab09a40922f43ad2586a558de591..08ff1a704b3e457e3dbddd7b4e9ec9db2d499869 100644
--- a/src/views/partials/project/page-project-edit.pug
+++ b/src/views/partials/project/page-project-edit.pug
@@ -1,7 +1,7 @@
solid-ac-checker(permission='acl:Read', bind-resources)
- div.segment.full.padding-large.border-bottom.border-color-grey
- div.segment.half.sm-full
- solid-display.text-xxlarge.text-letter-spacing-large(
+ div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
+ div.segment.half.sm-three-quarter.whitespace-normal
+ solid-display.text-xlarge.text-letter-spacing-large(
bind-resources
fields='const-title1, number, customer.name, dash, name'
@@ -16,6 +16,8 @@ solid-ac-checker(permission='acl:Read', bind-resources)
)
div.segment.half.sm-hidden.text-right
solid-link(class='backlink', bind-resources, next=`${component.route}-profile` data-trans='project.edit.backlink')
+ div.segment.lg-hidden.sm-quarter.text-right
+ div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
div.segment.full.padding-large.whitespace-normal
diff --git a/src/views/partials/project/page-project-profile.pug b/src/views/partials/project/page-project-profile.pug
index 9620c6d0943e199b7c620bca5d4f1781903f8b72..ca86e47c35eba38fd0657385be70b2fab8841f04 100644
--- a/src/views/partials/project/page-project-profile.pug
+++ b/src/views/partials/project/page-project-profile.pug
@@ -9,19 +9,22 @@ div(
)
solid-ac-checker.segment.block(permission='acl:Read', bind-resources)
div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
- solid-display.text-xxlarge.text-letter-spacing-large(
- bind-resources
- fields='const-title1, number, customer.name, dash, name'
+ div.segment.full.sm-three-quarter.whitespace-normal
+ solid-display.text-xlarge.text-letter-spacing-large(
+ bind-resources
+ fields='const-title1, number, customer.name, dash, name'
- class-const-title1='text-color-heading text-bold text-uppercase'
- class-number='text-color-heading text-bold text-uppercase word-spacing-right'
- class-customer.name='text-color-heading text-bold text-uppercase'
- class-dash='text-color-heading text-bold text-xlarge'
- class-name=''
+ class-const-title1='text-color-heading text-bold text-uppercase'
+ class-number='text-color-heading text-bold text-uppercase word-spacing-right'
+ class-customer.name='text-color-heading text-bold text-uppercase'
+ class-dash='text-color-heading text-bold text-xlarge'
+ class-name=''
- value-const-title1='N°'
- value-dash=' - '
- )
+ value-const-title1='N°'
+ value-dash=' - '
+ )
+ div.segment.lg-hidden.sm-quarter.text-right
+ div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading
div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-xlarge
div.loader(id=`loader-${component.route}-profile`)