feat: move activity-description modal trigger to info icon

src/app/app.component.html

@@ -17,14 +17,6 @@
     <div class="dummy"></div>
   </div>
   <span class="spacer"></span>
-  <a
-    target="_blank"
-    class="github-fork-ribbon"
-    href="https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel"
-    data-ribbon="Fork me on GitHub"
-    title="Fork me on GitHub">
-    Fork me on GitHub
-  </a>
 </mat-toolbar>
 <mat-sidenav-container class="sidenav-container">
   <mat-sidenav mode="side" opened class="sidenav" [style.width]="sidenavWidth">

src/app/app.component.spec.ts

@@ -52,11 +52,4 @@ describe('AppComponent', () => {
   it('should create the app', () => {
     expect(app).toBeTruthy();
   });
-
-  it('check for fork me on github ribbon generation', () => {
-    const compiled = fixture.nativeElement as HTMLElement;
-    const githubLink = compiled.querySelector('.github-fork-ribbon');
-    expect(githubLink).not.toBeNull();
-    expect(githubLink?.textContent?.trim()).toBe('Fork me on GitHub');
-  });
 });

src/app/app.module.ts

@@ -31,6 +31,7 @@ import { ProgressSliderComponent } from './component/progress-slider/progress-sl
 import { KpiComponent } from './component/kpi/kpi.component';
 import { MatDialogModule, MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { TeamsGroupsEditorModule } from './component/teams-groups-editor/teams-groups-editor.module';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @NgModule({
   declarations: [
@@ -67,6 +68,7 @@ import { TeamsGroupsEditorModule } from './component/teams-groups-editor/teams-g
     FormsModule,
     HttpClientModule,
     TeamsGroupsEditorModule,
+    MatTooltipModule,
   ],
   providers: [
     LoaderService,

src/app/component/activity-description/activity-description.component.css

@@ -55,6 +55,10 @@
   list-style: none;
 }
 
+::ng-deep #description img {
+    max-width: 100%;
+}
+
 /* Ensure panel titles don't wrap */
 mat-panel-title b {
   white-space: nowrap;

src/app/pages/circular-heatmap/circular-heatmap.component.css

@@ -8,12 +8,27 @@
   shape-rendering: crispEdges;
 }
 
-.title-button {
-  background-color: transparent;
-  border: none;
-  text-align: left;
-  cursor: pointer;
-  font-weight: 700;
+.title-text {
+  font-weight: 500;
+  margin-right: 5px;
+}
+
+.info-button {
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  opacity: 0.6;
+}
+.compact-tooltip {
+  transform: translateY(-20px) !important;
+}
+
+.info-icon {
+  font-size: 18px;
+}
+
+.info-button:hover {
+  opacity: 1;
 }
 
 .right-panel {

src/app/pages/circular-heatmap/circular-heatmap.component.html

@@ -73,8 +73,16 @@ <h2>Nothing to show</h2>
               (closed)="onPanelClosed(activity)">
               <mat-expansion-panel-header>
                 <mat-panel-title>
-                  <button class="title-button" (click)="openActivityDetails(activity['uuid'])">
+                  <span class="title-text">
                     {{ activity['name'] }}
+                  </span>
+                  <button
+                    mat-icon-button
+                    class="info-button"
+                    matTooltip="Open activity description"
+                    matTooltipClass="compact-tooltip"
+                    (click)="openActivityDetails(activity['uuid']); $event.stopPropagation()">
+                    <mat-icon class="info-icon">info</mat-icon>
                   </button>
                 </mat-panel-title>
               </mat-expansion-panel-header>

src/styles.css

@@ -58,4 +58,8 @@ h1, h2, h3 {
 
 .usage-dimensions img {
     max-width: 40rem;
-}
+}
+
+.compact-tooltip {
+  transform: translateY(-10px) !important;
+}