Merge branch '103-responsividade-na-pagina-de-metricas' into 'development'

Resolve "Responsividade na página de métricas"

Closes #103

See merge request !127

pinsisApp/src/app/metricas/metricas.component.html

@@ -3,11 +3,20 @@
 <script src="https://code.highcharts.com/modules/export-data.js"></script>
 <script src="https://code.highcharts.com/modules/accessibility.js"></script>
 
-<figure class="highcharts-figure">
-    <div id="container"></div>
-    <p class="highcharts-description">
-        Chart showing a combination of a column and a line chart, using multiple
-        y-axes. Using multiple axes allows for data within different ranges to
-        be visualized together.
-    </p>
-</figure>
+<div class="graph-container">
+  <figure class="highcharts-figure ">
+      <div id="container"></div>
+      <p class="highcharts-description d-none">
+            Chart showing a combination of a column and a line chart, using multiple
+          y-axes. Using multiple axes allows for data within different ranges to
+          be visualized together.
+      </p>
+  </figure>
+</div>
+<div class= "container description">
+  <p>
+      Chart showing a combination of a column and a line chart, using multiple
+    y-axes. Using multiple axes allows for data within different ranges to
+    be visualized together.
+  </p>
+</div>

pinsisApp/src/app/metricas/metricas.component.scss

+@import '../../sass/styles';
+
+.graph-container{
+  @media screen and (max-width: $break-small) {
+    max-width: 400px;
+    margin-left: 10px;
+    margin-right: 10px;
+ }
+ p {
+   text-align:  justify;
+   margin: 15px;
+ }
+}
+
+.description{
+  max-width:800px;
+  border: 3px solid #4f425b;
+  background: #f8f8f8;
+
+  p {
+    margin: 5px;
+    text-align:  justify;
+  }
+
+  @media screen and (max-width: $break-small) {
+    max-width: 95%;
+    margin-top: 10px;
+ }
+}
+
 .highcharts-figure, .highcharts-data-table table {
     min-width: 310px;
     max-width: 800px;
     margin: 1em auto;
+    border: 3px solid #4f425b;
+    background-color: white;
+    @media screen and (max-width: $break-small) {
+      max-width: 400px;
+      margin: auto;
+ 	 }
+
 }
 
 #container {
@@ -16,6 +53,10 @@
 	text-align: center;
 	width: 100%;
 	max-width: 500px;
+  @media screen and (max-width: $break-small) {
+    max-width: 400px;
+    margin: auto;
+ }
 }
 .highcharts-data-table caption {
     padding: 1em 0;