From 8eb758119571272c309fc8c05dbe4a57d392dfe3 Mon Sep 17 00:00:00 2001
From: dvidotti <danilovidotti@gmail>
Date: Tue, 18 Feb 2020 18:46:09 +0100
Subject: [PATCH] Refactor(Node-top-block): Make node title font-size  dynamic
 acording text length

---
 backend/backend/static/scss/_nodes.scss       | 25 ++++++++++++++++---
 .../templates/device_info_top_block.html      | 24 ++++++++++++++++--
 2 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/backend/backend/static/scss/_nodes.scss b/backend/backend/static/scss/_nodes.scss
index 7429c0280..c7a39008c 100644
--- a/backend/backend/static/scss/_nodes.scss
+++ b/backend/backend/static/scss/_nodes.scss
@@ -141,12 +141,10 @@
   }
 
   .node-title {
-    white-space: nowrap;
-    text-overflow: ellipsis;
     overflow: hidden;
     padding-bottom: 6px;
-    font-size: 2.8rem;
     color: white;
+    word-break: break-all
   }
 
   .wott-badge-pill-light {
@@ -193,6 +191,27 @@
     font-weight: 800;
     text-transform: uppercase;
   }
+
+  .node-title-lg {
+    font-size: 2.8rem;
+    @include mQ(1300px) {
+      font-size: 2rem;
+    }
+  }
+  
+  .node-title-md {
+    font-size: 1.8rem;
+    @include mQ(1300px) {
+      font-size: 1.3rem;
+    }
+  }
+  
+  .node-title-sm {
+    font-size: 1.2rem;
+    @include mQ(1300px) {
+      font-size: 1rem;
+    }
+  }
 }
 
 // NODE METADATA
diff --git a/backend/device_registry/templates/device_info_top_block.html b/backend/device_registry/templates/device_info_top_block.html
index 731bb0e5c..5d0e9cafe 100644
--- a/backend/device_registry/templates/device_info_top_block.html
+++ b/backend/device_registry/templates/device_info_top_block.html
@@ -9,8 +9,8 @@
 
 <div class="top-color-section d-flex">
   <div class="left-box">
-    <h2 class="node-title">{{ object.get_name }}
-    </h2>
+    <span class="node-title mb-2 pr-3">{{ object.get_name }}
+    </span>
     <div class="d-flex align-items-center">
       {%  with actions_count=object.actions_count %}
         {% if actions_count %}
@@ -78,3 +78,23 @@ <h1 class="recommended-action-number">
   </div>
   
 </div>
+<script>
+
+let node_title = $('.node-title').text();
+
+function class_by_text_length(text) {
+  if(text.length > 35) {
+    return 'node-title-sm';
+  } if(text.length > 25) {
+      return 'node-title-md'
+  } else return 'node-title-lg'
+}
+
+$(() => {
+  $('.node-title').addClass(class_by_text_length(node_title))
+})
+
+
+
+
+</script>
\ No newline at end of file