Merge branch 'issue/50' into 'development'

SCRUM#50: Fix layout and responsive graphics/maps components

See merge request !16

.gitignore

@@ -2,3 +2,4 @@
 *.pyc
 node_modules
 dist
+package-lock.json

package.json

@@ -33,7 +33,7 @@
     "zone.js": "^0.8.14"
   },
   "devDependencies": {
-    "@angular/cli": "1.5.5",
+    "@angular/cli": "^7.2.3",
     "@angular/compiler-cli": "^5.0.0",
     "@angular/language-service": "^5.0.0",
     "@types/highcharts": "^5.0.18",
@@ -43,13 +43,13 @@
     "codelyzer": "^4.0.1",
     "jasmine-core": "~2.6.2",
     "jasmine-spec-reporter": "~4.1.0",
-    "karma": "~1.7.0",
+    "karma": "^4.0.0",
     "karma-chrome-launcher": "~2.1.1",
     "karma-cli": "~1.0.1",
     "karma-coverage-istanbul-reporter": "^1.2.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.1.2",
+    "protractor": "^5.4.2",
     "ts-node": "~3.2.0",
     "tslint": "~5.7.0",
     "typescript": "~2.4.2"

src/app/graphs-page/graph-element/graph-element.component.html

 <!--  This file is part of the project Pinsis-Portal.
- Copyright (C),2018, by C3SL(Centro de Computação Científica e 
+ Copyright (C),2018, by C3SL(Centro de Computação Científica e
  Software Live)
 
  This program is free software: you can redistribute it and/or modify

src/app/graphs-page/graph-element/graph-element.component.scss

 /*This file is part of the project Pinsis-Portal.
- Copyright (C),2018, by C3SL(Centro de Computação Científica e 
+ Copyright (C),2018, by C3SL(Centro de Computação Científica e
  Software Live)
 
  This program is free software: you can redistribute it and/or modify
@@ -18,6 +18,10 @@
 @import '../../../sass/styles';
 
 .graph-container {
+    padding: 10px 10px 10px 10px;
+    background-color: $white;
     border: 3px solid $dark-purple;
-    max-width: 800px;
-}
\ No newline at end of file
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 100%;
+}

src/app/graphs-page/graphs-page.component.html

 <!--  This file is part of the project Pinsis-Portal.
- Copyright (C),2018, by C3SL(Centro de Computação Científica e 
+ Copyright (C),2018, by C3SL(Centro de Computação Científica e
  Software Live)
 
  This program is free software: you can redistribute it and/or modify

src/app/graphs-page/graphs-page.scss

  /*This file is part of the project Pinsis-Portal.
- Copyright (C),2018, by C3SL(Centro de Computação Científica e 
+ Copyright (C),2018, by C3SL(Centro de Computação Científica e
  Software Live)
 
  This program is free software: you can redistribute it and/or modify
@@ -21,7 +21,7 @@
   padding: 20px 20px 20px 20px;
   background-color: $white;
   border: 3px solid $dark-purple;
-  
+
   margin-bottom: 40px;
   color: $text-dark;
   font-family: $open;
@@ -30,9 +30,13 @@
 }
 
 .search-params {
-  padding: 20px 20px 20px 20px;
+  padding: 10px 10px 10px 10px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 10px;
   background-color: $white;
   border: 3px solid $dark-purple;
+  max-width: 85%;
 }
 
 p {

src/app/maps-page/maps-page.component.html

 <!--  This file is part of the project Pinsis-Portal.
- Copyright (C),2018, by C3SL(Centro de Computação Científica e 
+ Copyright (C),2018, by C3SL(Centro de Computação Científica e
  Software Live)
 
  This program is free software: you can redistribute it and/or modify

src/app/maps-page/maps-page.component.scss

 /*This file is part of the project Pinsis-Portal.
- Copyright (C),2018, by C3SL(Centro de Computação Científica e 
+ Copyright (C),2018, by C3SL(Centro de Computação Científica e
  Software Live)
 
  This program is free software: you can redistribute it and/or modify
@@ -21,14 +21,16 @@
 	width:700px;
 	height:100%;
 	max-height:600px;
-    
-    border: 3px solid $dark-purple;
+	margin-left: auto;
+	margin-right: auto;
+  border: 3px solid $dark-purple;
 }
 
 
 .hospital-selector{
-    border: 3px solid $dark-purple;
-    
+  border: 3px solid $dark-purple;
+	margin-left: auto;
+	margin-right: auto;
 	height:100%;
 	max-height:600px;
 }
@@ -37,6 +39,14 @@
 	overflow:hidden;
 }
 
+@media screen and (max-width: 800px) {
+  .map-container {
+			margin-top: 10px;
+			width:350px;
+			max-height:400px;
+  }
+}
+
 // [class*="col-"] {
 //     float: none;
 //     display: table-cell;
@@ -104,6 +114,3 @@
 a:hover{
 	cursor:pointer;
 }
-
-
-