Merge pull request #49 from bitovi/breakout-styles

updating styles
bitovi · Feb 20, 2024 · 11f81ad · 11f81ad
2 parents 75ccc8a + 0471000
commit 11f81ad
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 41 deletions.
diff --git a/public/css/steerco-reporting.css b/public/css/steerco-reporting.css
@@ -163,9 +163,9 @@ simple-tooltip span {
 .gantt .today {
     width: 2px;
     background-color: orange;
-    height: 150%;
+    height: 100%;
     position: absolute;
-    top: -50%;
+    top: 2px;
     z-index: -100;
 }
 
@@ -328,16 +328,11 @@ simple-tooltip span {
 .release-timeline-item {
     position: absolute;
     transform: translate(-50%, 0);
-    border: solid 1px gray;
     padding: 4px;
     z-index: 100;
     top: 5px;
 }
 
-.gantt.simple-timings .release-timeline-item {
-    color: white;
-}
-
 .gantt.extra-timings {
     position: relative;
     top: -50px;

diff --git a/public/dist/main.js b/public/dist/main.js
diff --git a/public/dist/main.js.map b/public/dist/main.js.map
diff --git a/public/dist/production.css b/public/dist/production.css
diff --git a/public/gantt-timeline.js b/public/gantt-timeline.js
@@ -32,15 +32,15 @@ export class GanttTimeline extends StacheElement {
         return stache.safeString(this.calendarData.html);
     }
     get releaseTimeline() {
-        const { firstDay, lastDay } = this.calendarData;
+        const { firstDay, lastDay } = this.quartersAndMonths;
         const totalTime = (lastDay - firstDay);
 
         return this.issues.map((release, index) => {
             const div = document.createElement("div");
             if (release.dateData.rollup.due) {
-                    div.className = "release-timeline-item color-text-and-bg-" + release.dateData.rollup.status;
+                    div.className = "rounded-sm release-timeline-item color-text-and-bg-" + release.dateData.rollup.status;
                     div.style.left = ((release.dateData.rollup.due - firstDay) / totalTime * 100) + "%";
-                    div.appendChild(document.createTextNode(release.Summary))
+                    div.appendChild(document.createTextNode(release.shortVersion))
             }
             return div;
         });

diff --git a/public/status-report.js b/public/status-report.js
@@ -13,32 +13,33 @@ export class StatusReport extends StacheElement {
     static view = `
     <div class='release_wrapper {{# if(this.breakdown) }}extra-timings{{else}}simple-timings{{/ if}} px-2'>
         {{# for(primaryIssue of this.primaryIssues) }}
-            <div class='release_box'>
+            <div class='release_box grow'>
                 <div 
                     on:click='this.showTooltip(scope.event, primaryIssue)'
-                    class="pointer release_box_header_bubble color-text-and-bg-{{primaryIssue.dateData.rollup.status}}">{{primaryIssue.Summary}}</div>
-                <div class="flex gap-4 p-1">
+                    class="pointer release_box_header_bubble color-text-and-bg-{{primaryIssue.dateData.rollup.status}} rounded-t">{{primaryIssue.Summary}}</div>
+                
                     {{# if(this.breakdown) }}
-                        <div class="${release_box_subtitle_wrapper}">
-                                <span class="release_box_subtitle_key color-text-and-bg-{{primaryIssue.dateData.dev.status}}">Dev</span>
-                                <span class="release_box_subtitle_value">
-                                    {{ this.prettyDate(primaryIssue.dateData.dev.due) }}{{this.wasReleaseDate(primaryIssue.dateData.dev) }}
-                                </span>
-                        </div>
-                        <div class="${release_box_subtitle_wrapper}">
-                                <span class="release_box_subtitle_key color-text-and-bg-{{primaryIssue.dateData.qa.status}}">QA&nbsp;</span>
-                                <span class="release_box_subtitle_value">
-                                    {{ this.prettyDate(primaryIssue.dateData.qa.due) }}{{ this.wasReleaseDate(primaryIssue.dateData.qa) }}
-                                </span>
-                        </div>
-                        <div class="${release_box_subtitle_wrapper}">
-                                <span class="release_box_subtitle_key color-text-and-bg-{{primaryIssue.dateData.uat.status}}">UAT</span>
-                                <span class="release_box_subtitle_value">
-                                    {{ this.prettyDate(primaryIssue.dateData.uat.due) }}{{ this.wasReleaseDate(primaryIssue.dateData.uat) }}
-                                </span>
-                        </div>
+
+                            <div class="${release_box_subtitle_wrapper} pt-1">
+                                    <span class="release_box_subtitle_key color-text-and-bg-{{primaryIssue.dateData.dev.status}} font-mono px-px">Dev</span>
+                                    <span class="release_box_subtitle_value">
+                                        {{ this.prettyDate(primaryIssue.dateData.dev.due) }}{{this.wasReleaseDate(primaryIssue.dateData.dev) }}
+                                    </span>
+                            </div>
+                            <div class="${release_box_subtitle_wrapper}">
+                                    <span class="release_box_subtitle_key color-text-and-bg-{{primaryIssue.dateData.qa.status}} font-mono px-px">QA&nbsp;</span>
+                                    <span class="release_box_subtitle_value">
+                                        {{ this.prettyDate(primaryIssue.dateData.qa.due) }}{{ this.wasReleaseDate(primaryIssue.dateData.qa) }}
+                                    </span>
+                            </div>
+                            <div class="${release_box_subtitle_wrapper}">
+                                    <span class="release_box_subtitle_key color-text-and-bg-{{primaryIssue.dateData.uat.status}} font-mono px-px">UAT</span>
+                                    <span class="release_box_subtitle_value">
+                                        {{ this.prettyDate(primaryIssue.dateData.uat.due) }}{{ this.wasReleaseDate(primaryIssue.dateData.uat) }}
+                                    </span>
+                            </div>
                     {{ else }}
-                        <div class="${release_box_subtitle_wrapper}">
+                        <div class="${release_box_subtitle_wrapper} p-1">
                                 <b>Target Delivery</b>
                                 <span class="release_box_subtitle_value">
                                     <span class="nowrap">{{ this.prettyDate(primaryIssue.dateData.rollup.due) }}</span>
@@ -47,8 +48,7 @@ export class StatusReport extends StacheElement {
                         </div>
                     {{/ if }}
 
-                </div>
-                <ul class="p-1 list-disc list-inside">
+                <ul class=" {{# if(this.breakdown) }}list-none{{else}}list-disc list-inside p-1{{/if}}">
                     {{# for(secondaryIssue of primaryIssue.dateData.children.issues) }}
                     <li class='font-sans {{this.fontSize(primaryIssue.dateData.children.issues.length)}} pointer' on:click='this.showTooltip(scope.event, secondaryIssue)'>
                         {{# if(this.breakdown) }}
@@ -101,9 +101,14 @@ export class StatusReport extends StacheElement {
         showTooltip(event.currentTarget, isssue);
     }
     fontSize(count){
-        if(count >= 6) {
+        const lotsOfColumns = this.primaryIssues > 4;
+
+        if(count >= 7 && lotsOfColumns) {
             return "text-xs";
-        } else {
+        } else if(count <= 4 && !lotsOfColumns) {
+            return "text-base";
+        } 
+        else {
             return "text-sm";
         }
 

diff --git a/public/timeline-report.js b/public/timeline-report.js
@@ -283,12 +283,12 @@ export class TimelineReport extends StacheElement {
               {{/ }}
 
               <div class='p-2'>
+                <span class='color-text-and-bg-unknown p-2 inline-block'>Unknown</span>
                 <span class='color-text-and-bg-notstarted p-2 inline-block'>Not Started</span>
                 <span class='color-text-and-bg-ontrack p-2 inline-block'>On Track</span>
+                <span class='color-text-and-bg-behind p-2 inline-block'>Behind</span>
                 <span class='color-text-and-bg-blocked p-2 inline-block'>Blocked</span>
                 <span class='color-text-and-bg-complete p-2 inline-block'>Complete</span>
-                <span class='color-text-and-bg-behind p-2 inline-block'>Behind</span>
-                <span class='color-text-and-bg-unknown p-2 inline-block'>Unknown</span>
               </div>
             </div>
           {{/ and }}