From d70439c12d2d9671b297bb31b7fb81be25275e19 Mon Sep 17 00:00:00 2001
From: Erik Ziegler <erik.sweed@gmail.com>
Date: Sun, 14 Aug 2016 15:36:21 +0200
Subject: [PATCH] Fix user account menu background color. Add helper to
 responsively style modality text

---
 .../studyTimepointStudy.html                  | 18 +++++-----
 .../studyTimepointStudy.js                    | 33 +++++++++++++++++++
 .../studyTimepointStudy.styl                  | 14 ++++----
 .../userAccountMenu/userAccountMenu.styl      |  1 -
 4 files changed, 51 insertions(+), 15 deletions(-)

diff --git a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.html b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.html
index 7956b4902..c510387f4 100644
--- a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.html
+++ b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.html
@@ -5,15 +5,17 @@
                 {{>loadingText}}
                 <div class="studyModality">
                     <div class="studyModalityBox">
-                        {{#if this.study.modalities}}
-                            {{this.study.modalities}}
-                        {{else}}
-                            UN
-                        {{/if}}
+                        <div class="studyModalityText" style="{{modalityStyle}}">
+                            {{#if this.study.modalities}}
+                                {{ modalities }}
+                            {{else}}
+                                UN
+                            {{/if}}
+                        </div>
                     </div>
-                    <div class="studyModalityText">
-                        <div class="studyModalityDate">{{formatDA this.study.studyDate 'D-MMM-YYYY'}}</div>
-                        <div class="studyModalityDescription">{{this.study.studyDescription}}</div>
+                    <div class="studyText">
+                        <div class="studyDate">{{formatDA this.study.studyDate 'D-MMM-YYYY'}}</div>
+                        <div class="studyDescription">{{this.study.studyDescription}}</div>
                     </div>
                 </div>
             </div>
diff --git a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.js b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.js
index ccb05fc5f..8f6029c90 100644
--- a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.js
+++ b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.js
@@ -34,6 +34,39 @@ Template.studyTimepointStudy.onRendered(() => {
     }
 });
 
+Template.studyTimepointStudy.helpers({
+    modalities() {
+        const instance = Template.instance();
+        let modalities = instance.data.study.modalities;
+
+        // Replace backslashes with spaces
+        return modalities.replace(/\\/g, ' ');
+    },
+
+    modalityStyle() {
+        // Responsively styles the Modality Acronyms for studies
+        // with more than one modality
+        const instance = Template.instance();
+        const modalities = instance.data.study.modalities;
+        const numModalities = modalities.split(/\\/g).length;
+
+        if (numModalities === 1) {
+            // If we have only one modality, it should take up the whole
+            // div.
+            return 'font-size: 1vw';
+        } else if (numModalities === 2) {
+            // If we have two, let them sit side-by-side
+            return 'font-size: 0.75vw';
+        } else {
+            // If we have more than two modalities, change the line
+            // height to display multiple rows, depending on the number
+            // of modalities we need to display.
+            const lineHeight = Math.ceil(numModalities / 2) * 1.2;
+            return 'line-height: ' + lineHeight + 'vh';
+        }
+    }
+});
+
 Template.studyTimepointStudy.events({
     // Recalculates the timepoint height to make CSS transition smoother
     'transitionend .studyTimepointThumbnails'(event, instance) {
diff --git a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl
index 03ef1f6d8..2d058dae9 100644
--- a/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl
+++ b/Packages/lesiontracker/client/components/studyTimepointBrowser/studyTimepointStudy.styl
@@ -80,29 +80,31 @@ $spacerY = 12px
     padding: 0
     text-align: center
 
-  .studyModalityText
+  .studyText
     font-size: 13px
     left: ($spacerX * 3) + $boxWidth + ($nestingMargin * 3)
     line-height: 14px
     position: absolute
     right: $spacerX
     top: $spacerY
-    .studyModalityDate
+    .studyDate
       margin-top: 8px
       color: $textSecondaryColor
-    .studyModalityDescription
+    .studyDescription
       margin-top: 8px
       color: $textPrimaryColor
 
   .studyModalityBox
     color: $textSecondaryColor
-    font-size: 22px
     line-height: $boxWidth
     margin-left: $nestingMargin * 2
     margin-top: $nestingMargin * 2
     position: relative
-    text-align: center
-    text-transform: uppercase
+
+    .studyModalityText
+      text-align: center
+      text-transform: uppercase
+      height: 100%
 
     &
     &:before
diff --git a/Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.styl b/Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.styl
index d1c8fb15c..c55aa873e 100644
--- a/Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.styl
+++ b/Packages/lesiontracker/client/components/userAccountMenu/userAccountMenu.styl
@@ -5,7 +5,6 @@
   height: 100%
 
   .dropdown-toggle
-    background-color: $primaryBackgroundColor
     color: $defaultColor
     cursor: pointer
     font-size: 13px