Refine header and modal style (#43, #38)

* Also updated news with dates and development version

NEWS.md

@@ -1,7 +1,12 @@
-### Covid19 1.0.0
+### Covid19 1.0.0.9000 (development version)
+
+- The app header was improved: it now shows the app version and change-log in a modal dialog (#38, #43).
+
+
+### Covid19 1.0.0 (2020-03-20)
 
 #### First versioned release of Covid19
 
-Covid19  is a Shiny App for understanding the coronavirus spread and compare their perverse effects between countries.
+Covid19 is a Shiny App for understanding the COVID-19 spread and compare their perverse effects between countries.
 
 The application uses data from the [Johns Hopkins CSSE Repository.](https://github.com/CSSEGISandData/COVID-19)

R/app_ui.R

@@ -20,7 +20,7 @@ app_ui <- function(request) {
             a(
               href = "https://github.com/miraisolutions/Covid19",
               target = "_blank",
-              h1("Covid19")
+              span(id = "app-name", "Covid19")
             ),
             a(
               href = "https://github.com/miraisolutions/Covid19/blob/master/NEWS.md",
@@ -37,12 +37,10 @@ app_ui <- function(request) {
           a(
             href = "https://github.com/CSSEGISandData/COVID-19",
             target = "_blank",
-            div(
+            span(
               id = "subtitle",
-              h3(
-                "Data Repository by Johns Hopkins CSSE:",
-                textOutput("last_update", inline = TRUE)
-              )
+              "Data Repository by Johns Hopkins CSSE:",
+              textOutput("last_update", inline = TRUE)
             )
           )
         ), # end header-left

inst/app/www/style.css

@@ -8,7 +8,7 @@ body {
 
 #header {
   padding-top: 25px;
-  padding-bottom: 5px;
+  padding-bottom: 10px;
   padding-left: 25px;
   padding-right: 25px;
   margin-bottom: 10px;
@@ -23,15 +23,35 @@ body {
   float: left;
 }
 
+#title {
+  margin-top: 0;
+}
+
+#app-name {
+  font-family: inherit;
+  color: white;
+  font-size: 36px;
+  line-height: normal;
+}
+
+
+#version {
+  font-family: inherit;
+  color: white;
+  font-size: 16px;
+}
+
+#subtitle {
+  margin-top: 3px;
+  margin-bottom: 10px;
+  font-size: 16px;
+  color: black;
+}
+
 #header-right {
   float: right;
 }
 
-#sticker-header {
-  float: left;
-  margin-right: 15px;
-  height: 90px;
-}
 
 #footer {
   padding-top: 15px;
@@ -60,14 +80,7 @@ body {
   padding: 0;
 }
 
-#title {
-  margin-top: 0;
-}
 
-#subtitle{
-  margin-top: 3px;
-  margin-bottom: 10px;
-}
 
 .modal-body p {
   margin: 0;
@@ -95,13 +108,6 @@ h4 {
   color: black;
 }
 
-h1 {
-  font-family: inherit;
-  color: white;
-  text-align: left;
-  display: inline;
-}
-
 h2 {
   font-family: inherit;
   color: #ea8b5b;
@@ -111,18 +117,12 @@ h2 {
   display: inline;
 }
 
-#version {
-  font-family: inherit;
-  color: white;
-  font-size: 16px;
-}
-
 h3 {
   font-family: inherit;
+  margin-top: 0;
   color: #000000;
   font-size: 16px;
   text-align: left;
-  display: inline;
 }
 
 #title a:hover, #title a:visited, #title a:link, #title a:active {