Merge pull request #726 from WoTTsecurity/712-ra-dinamic-font-size

Refactor(Node-top-block): Make node title font-size  dynamic.

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

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>