From 797728b7438d3de36838d4a2f56b4c2d2000904c Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Fri, 5 Jun 2020 15:44:15 +0200
Subject: [PATCH] update: sub-menu - is responsive

---
 src/page-circle.pug       |  2 +-
 src/page-messages.pug     | 21 ++++++++-------
 src/page-project.pug      |  8 +++---
 src/styles/base/main.scss | 55 +++++++++++++++++++++++++--------------
 4 files changed, 50 insertions(+), 36 deletions(-)

diff --git a/src/page-circle.pug b/src/page-circle.pug
index 0f4e3a9..95146fd 100644
--- a/src/page-circle.pug
+++ b/src/page-circle.pug
@@ -1,7 +1,7 @@
 .views-container.sidebar-is-closed
   .content-box.flex.full-width.with-form
     div.content-box__header
-      sib-ac-checker(permission='acl:Read', bind-resources)
+      sib-ac-checker.flex.space-between(permission='acl:Read', bind-resources)
         sib-display(
           bind-resources
           fields='name, description'
diff --git a/src/page-messages.pug b/src/page-messages.pug
index d1254b2..154a42d 100644
--- a/src/page-messages.pug
+++ b/src/page-messages.pug
@@ -1,16 +1,17 @@
 .content-box.flex.full-width
 
-  sib-display.content-box__header(
-    bind-resources
-    fields='name, parenthesis, username, endParenthesis'
-    value-parenthesis=" ("
-    value-endParenthesis=")"
+  div.content-box__header
+    sib-display(
+      bind-resources
+      fields='name, parenthesis, username, endParenthesis'
+      value-parenthesis=" ("
+      value-endParenthesis=")"
 
-    class-parenthesis='name'
-    class-endParenthesis='name'
-    class-name='name'
-    class-username='name'
-  )
+      class-parenthesis='h1-like'
+      class-endParenthesis='h1-like'
+      class-name='h1-like'
+      class-username='h1-like'
+    )
 
   .chat-view
     sib-chat(
diff --git a/src/page-project.pug b/src/page-project.pug
index 49329b4..1c27ec3 100644
--- a/src/page-project.pug
+++ b/src/page-project.pug
@@ -1,7 +1,7 @@
 .views-container.sidebar-is-closed
   .content-box.flex.full-width.with-form
     div.content-box__header
-      sib-ac-checker(permission='acl:Read', bind-resources)
+      sib-ac-checker.flex.space-between(permission='acl:Read', bind-resources)
         sib-display(
           bind-resources
           fields='const-title1, number, customer.name, name'
@@ -9,13 +9,11 @@
           class-const-title1='h1-like'
           class-number='h1-like word-spacing-right'
           class-customer.name='h1-like'
-          class-name='h1-aside name'
+          class-name='h1-aside'
     
           value-const-title1='N°'
         )
-        .mobile-sidebar-button.jsMobileSidebarOpenButton
-          button.icon-arrow-left-circle
-            span MENU
+        button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle MENU
     div
       sib-ac-checker(permission='acl:Read', bind-resources)
         #project-chat(hidden)
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index 880b272..ab787f9 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -260,12 +260,12 @@ h5 {
 /* Header inside circle, project view  */
 .content-box__header {
   border-bottom: 1px solid var(--color-content-header);
-  padding: 3rem;
+  padding: 1.8rem 0 1.4rem;
+  margin: 0 1.6rem;
 
-  sib-display {
-    @include breakpoint(sm) {
-      float: left;
-    }
+  @include breakpoint(lg) {
+  padding: 3rem;
+  margin: 0;
   }
 
   .mobile-sidebar-button {
@@ -285,27 +285,42 @@ h5 {
     }
   }
 
-  div {
+  sib-display {
+    @include breakpoint(sm) {
+      float: left;
+    }
+  }
 
-    .h1-aside {
-      font-size: 1.8rem;
+  /* For sib-display on project, circle, or private message view */
+  sib-display {
+    width: calc(100% - 94px); /* 94px = width of .mobile-sidebar-button */
 
-      &:not(:empty)::before {
-        color: var(--color-grey-4);
-        content: ' - ';
-        font-size: 2rem;
-        font-weight: bold;
+    div {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: calc(100% - 20px);
+      
+      .h1-aside {
+        font-size: 1.8rem;
+
+        &:not(:empty)::before {
+          color: var(--color-grey-4);
+          content: ' - ';
+          font-size: 2rem;
+          font-weight: bold;
+        }
       }
-    }
 
-    .description {
-      color: var(--color-grey-4);
+      .description {
+        color: var(--color-grey-4);
 
-    }
+      }
 
-    .name {
-      color: var(--color-grey-4);
-      font-weight: normal;
+      .name {
+        color: var(--color-grey-4);
+        font-weight: normal;
+      }
     }
   }
 }