T-249: Adjusting measurements panel styles

2016-07-22 11:08:27 +02:00
1 parent bca32d88e0
commit 1ffbf15ea3
@@ -1,15 +1,13 @@
 <template name="lesionTable">
    <div id="lesionTableContainer">
        <div class="lesionTableLayoutChanger viewerRoundedButtonGroup">
-            {{ >roundedButtonGroup buttonGroupData }}
+            {{>roundedButtonGroup buttonGroupData}}
        </div>
        <div class="lesionTableTimepointHeaderRow">
-            <div class="spacer">
-            </div>
-            {{ #each timepoints }}
-            {{ >lesionTableTimepointHeader }}
-            {{ /each }}
+            {{#each timepoints}}
+                {{>lesionTableTimepointHeader}}
+            {{/each}}
        </div>
-        {{ >lesionTableView }}
+        {{>lesionTableView}}
    </div>
-</template>
+</template>
@@ -1,17 +1,15 @@
@import "{design}/app"

 #lesionTableContainer
-  width: 100%
+  background-color: $primaryBackgroundColor
  height: calc(100% - 105px)
-  background-color: #000000
+  width: 100%

 .lesionTableTimepointHeaderRow
  display: flex
-
-  .spacer
-    width: 20px
+  padding: 2px 2px 0 44px

 .lesionTableLayoutChanger
+  margin: 0 auto
  padding: 20px
  text-align: center
-  margin: 0 auto
@@ -3,59 +3,62 @@
 $headerRowHeight = 63px

 .lesionTableHeaderRow
-  border-top: 2px solid black
-  background: #151a1f
+  background-color: $uiGrayDarkest
  color: $textSecondaryColor
-  fill: $textSecondaryColor
-  width: 316px
-  height: $headerRowHeight
  display: flex
+  fill: $textSecondaryColor
+  height: $headerRowHeight
  line-height: $headerRowHeight
+  margin-top: 2px
+  width: 316px

  div
+    align-items: stretch
    flex: 1
    justify-content: space-around
-    align-items: stretch
    text-align: center

  .add
-    padding: 0 10px
-    max-width: 40px
    cursor: pointer
+    max-width: 30px
+    padding-left: 2px

    svg
      height: $headerRowHeight
      max-width: 11px

  .type
+    color: $textSecondaryColor
+    font-size: 22px
+    font-weight: 300
+    line-height: $headerRowHeight
    padding: 0 10px
    text-align: left
-    font-weight: 300
-    color: #91b9cd
-    height: $headerRowHeight
-    font-size: 13pt

  .numberOfLesions
    float: right
-    color:  #6fbde2
-    font-weight: 100
+    color: $uiSkyBlue
+    font-weight: 300
    font-size: 40px
-    max-width: 50px
-    margin-right: 5px
+    max-width: 54px
    height: $headerRowHeight
-    line-height: $headerRowHeight
+    line-height: 66px

  .max
    height: $headerRowHeight
+    max-width: 64px
+    text-align: right

    .maxNumLesions
-      margin: 21px auto
-      height: 20px
-      line-height: 20px
-      width: 47px
-      font-size: 12px
-      text-transform: uppercase
-      font-weight: 500
+      background-color: $textSecondaryColor;
      border-radius: 3px
      color: black
-      background-color: $textSecondaryColor;
+      display: table
+      font-size: 12px
+      font-weight: 500
+      height: 19px
+      line-height: 17px
+      margin-left: auto
+      margin-top: 22px
+      padding: 2px 6px 0
+      text-transform: uppercase
@@ -2,45 +2,51 @@

 .lesionTableRow
  display: flex
-  border-top: 2px solid black
  height: 63px
+  margin-top: 2px
  width: 100%

  .lesionRowSidebar
-    flex: 1
+    background: $uiGrayDark
    color: $textSecondaryColor
-    background: $darkUiColor
+    flex: 1
    max-width: 30px
+    padding-right: 5px

    .lesionNumber
+      font-size: 14px
+      font-weight: 400
+      padding-top: 10px
      text-align: center
-      font-weight: 200
-      padding: 3px

    &.active
      border-left: 4px $activeColor solid

  .lesionDetails
    flex: 1
-    padding-left: 20px
-    padding-top: 5px
+    padding: 5px 2px 0 14px
    display: flex
    flex-direction: column
    align-items: stretch

    .location
      flex: 1
-      font-weight: 200
+      font-weight: 400
      font-size: 14px
      color: $textSecondaryColor
-      height: 20px
+      height: 30px
+      line-height: 30px
+      margin-left: -2px
      width: 100%

    .timepointData
      display: flex
+      margin-top: 1px

      div
-        font-weight: 200
-        padding-bottom: 10px
        flex: 1
+        font-size: 14px
+        font-weight: 400
        justify-content: space-around
+        line-height: 18px
+        padding-bottom: 10px
@@ -1,10 +1,10 @@
 <template name="lesionTableTimepointHeader">
    <div class="lesionTableTimepointHeader">
        <div class="timepointName">
-            {{ timepointName }}
+            {{timepointName}}
        </div>
        <div  class="timepointDate">
-            {{ formatDA latestDate "DD-MMM-YY"}}
+            {{formatDA latestDate "DD-MMM-YY"}}
        </div>
    </div>
-</template>
+</template>
@@ -2,16 +2,21 @@

 .lesionTableTimepointHeader
  flex: 1
-  padding-left: 20px
  justify-content: space-around

  div
-    text-align: center
+    border-left: $uiBorderColor $uiBorderThickness solid
+    font-weight: 400
+    padding-left: 12px
+    text-align: left

  .timepointName
    color: $textSecondaryColor
+    font-size: 12px
+    line-height: 12px

  .timepointDate
-    font-weight: 200
    color: $textPrimaryColor
-    border-left: $uiBorderColor $uiBorderThickness solid
+    font-size: 14px
+    line-height: 20px
+    padding-bottom: 6px
@@ -5,9 +5,8 @@
  overflow-y: auto
  margin-right: -16px
  padding-bottom: 100px
-  padding-right: 16px

  -webkit-overflow-scrolling: touch

  &::-webkit-scrollbar
-    display: none
+    display: none
@@ -1,7 +1,6 @@
@import "{design}/app"

 $circleSize = 46px
-$progressTextColor = #6fbde2

 .radialProgress
  height: $circleSize
@@ -34,7 +33,7 @@ $progressTextColor = #6fbde2
    font-weight: 700
    font-size: 17px
    text-align: center
-    color: $progressTextColor
+    color: $uiSkyBlue
    top: 0

    svg