From 70a7140d6820be058fafc28f1bfce08b70369424 Mon Sep 17 00:00:00 2001
From: Kate Harwood <kateharwood@google.com>
Date: Tue, 4 May 2021 12:18:24 -0400
Subject: [PATCH] style update and back button addtion

---
 dashboard/app.R          | 15 ++++---
 dashboard/arrow-left.svg |  1 +
 dashboard/www/style.css  | 94 ++++++++++++++++++++++++++++++++++++----
 3 files changed, 95 insertions(+), 15 deletions(-)
 create mode 100644 dashboard/arrow-left.svg

diff --git a/dashboard/app.R b/dashboard/app.R
index f0b21c0..be0e40a 100644
--- a/dashboard/app.R
+++ b/dashboard/app.R
@@ -40,20 +40,21 @@ ui <- fluidPage(padding=0,
     tags$head(includeHTML(("google-analytics.html"))),
     useShinyjs(),
     div(id="header",class="row",
-      div(id="logo",class="col-sm-3",
+      div(id="logo",class="col-sm-2",
         a(href="https://delphi.cmu.edu",
           img(src="cmu_brand.png",width="220px",heigh="50px",alt="Carnegie Mellon University Delphi Group")
         )
       ),
-      div(class="col-sm-7",
-          span(id="title","FORECAST EVALUATION DASHBOARD"),
-        ),
-      div(id="github-logo-container", class="col-sm-2",
+      div(id="title", class="col-sm-6",
+        HTML("FORECAST <span id='bold-title'>EVALUATION DASHBOARD</span> <a id='back-button' href='https://delphi.cmu.edu'>", 
+             includeHTML("arrow-left.svg"), "   Back</a>"),
+      ),
+      div(id="github-logo-container", class="col-sm-1",
         a(id="github-logo",href="https://github.com/cmu-delphi/forecast-eval/",
             includeHTML("github.svg"),
-            HTML("&nbsp;GITHUB")
+            HTML("&nbsp;GitHub")
           )
-      )
+      ),
     ),
     tags$br(),
     sidebarLayout(
diff --git a/dashboard/arrow-left.svg b/dashboard/arrow-left.svg
new file mode 100644
index 0000000..21db7f7
--- /dev/null
+++ b/dashboard/arrow-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!-- Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --><path d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"/></svg>
diff --git a/dashboard/www/style.css b/dashboard/www/style.css
index b9b55e4..362f43c 100644
--- a/dashboard/www/style.css
+++ b/dashboard/www/style.css
@@ -2,7 +2,10 @@
 .shiny-output-error:before { visibility: hidden; }
 
 #logo{
-    min-width: 220px;
+    margin-left:35px;
+    margin-right:60px;
+    padding-right: 0;
+    padding-left:0;
 }
 #aboutContentArea{
     max-width: 70rem;
@@ -14,29 +17,62 @@
     padding-bottom: 5px;
     margin-top: 20px;
     box-shadow: 0 3px 5px -1px rgb(0 0 0 / 15%);
-
     font-family: "open sans", Roboto, Arial, sans-serif;
     font-size: 16px;
+    font-weight: 400;
+    color: black;
+}
+
+#title {
+    white-space: pre-wrap;
+    font-weight: 300;
+    font-size: 18px;
+    padding-left:0;
+}
+#bold-title {
     font-weight: 500;
+}
+#back-button {
     color: #505565;
+    font-size: 14px;
+    font-weight:350;
+    margin-top:10px;
+    width: 65px;
+    text-decoration:none;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    flex-direction: row;
+}
+#back-button svg {
+    width:14px;
+    height:14px;
+    fill: #505565;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    flex-direction: row;
+}
+#github-logo-container {
+    display: flex;
+    justify-content: flex-end;
+    padding-right: 0;
+    padding-left:0;
+    margin-bottom:20px;
 }
 #github-logo {
+    text-decoration:none;
     color: #505565;
     display: flex;
     align-items: center;
     flex-wrap: nowrap;
     flex-direction: row;
 }
-
 #github-logo svg {
     width:16px;
     height:16px;
     fill: #505565;
 }
-#github-logo-container {
-    display: flex;
-    justify-content: flex-end;
-}
 #notes {
     font-weight: 600;
     font-size: 18px;
@@ -55,4 +91,46 @@
 #refreshColors {
     height: 26px;
     font-size: 12px;
-}
\ No newline at end of file
+}
+
+@media (max-width: 1450px) {
+    #github-logo-container {
+       margin-left:100px;
+    }
+}
+
+@media (max-width: 1000px) {
+    #title {
+        margin-left: 35px;
+    }
+    #github-logo-container {
+       margin-left:35px;
+    }
+}
+
+@media (max-width: 767px) {
+    #title {
+        width:100%;
+        margin-top: 10px;
+    }
+    #github-logo-container {
+       justify-content: center;
+       margin-top: 10px;
+    }
+}
+
+@media (min-width: 1100px) {
+    #logo {
+        margin-left: 5%;
+    }
+}
+
+@media (min-width: 1450px) {
+    #logo {
+        margin-left: 12%;
+    }
+}
+
+
+
+