General: Simplify footer (#8378)

ls1intum · Apr 11, 2024 · 2ce2dd7 · 2ce2dd7
1 parent 8723fc7
commit 2ce2dd7
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 51 deletions.
diff --git a/src/main/webapp/app/shared/layouts/footer/footer.component.html b/src/main/webapp/app/shared/layouts/footer/footer.component.html
@@ -1,35 +1,17 @@
-<footer class="d-none d-md-flex row" id="footer">
-    <div class="text-md-start">
-        <a [routerLink]="['/about']" id="about" jhiTranslate="aboutUs" class="footer-text guided-tour-footer-about"></a>
-        <a [href]="feedbackUrl" id="feedback" jhiTranslate="feedback" class="footer-text ms-3" target="_blank"></a>
-        <a [href]="releaseUrl" id="release-notes" jhiTranslate="releases" class="footer-text ms-3" target="_blank"></a>
-        <a [routerLink]="['/privacy']" id="privacy" jhiTranslate="artemisApp.legal.privacy" class="footer-text ms-3"></a>
-        <a [routerLink]="['/imprint']" id="imprint" jhiTranslate="artemisApp.legal.imprint.title" class="footer-text ms-3"></a>
+<footer id="footer">
+    <div class="footer-text justify-content-start gap-3 flex-nowrap d-flex">
+        <a [routerLink]="['/about']" id="about" jhiTranslate="aboutUs" class="col-auto guided-tour-footer-about"></a>
+        <a [href]="feedbackUrl" id="feedback" jhiTranslate="feedback" class="col-auto" target="_blank"></a>
+        <a [href]="releaseUrl" id="releases" jhiTranslate="releases" class="col-auto" target="_blank"></a>
+        <a [routerLink]="['/privacy']" id="privacy" jhiTranslate="artemisApp.legal.privacy" class="col-auto"></a>
+        <a [routerLink]="['/imprint']" id="imprint" jhiTranslate="artemisApp.legal.imprint.title" class="col-auto"></a>
     </div>
     @if (!isProduction || isTestServer) {
-        <small class="col-sm-12 footer-git-wrapper">
-            <div class="footer-git">{{ 'artemisApp.git.branch' | artemisTranslate }}: {{ gitBranch }} •</div>
-            <div class="footer-git">{{ 'artemisApp.git.commit' | artemisTranslate }}: {{ gitCommitId }} •</div>
-            <div class="footer-git">{{ 'artemisApp.git.timestamp' | artemisTranslate }}: {{ gitTimestamp }} •</div>
-            <div class="footer-git">{{ 'artemisApp.git.username' | artemisTranslate }}: {{ gitCommitUser }}</div>
+        <small class="col-sm-12 d-none d-md-inline-flex d-flex footer-git">
+            <div>{{ 'artemisApp.git.branch' | artemisTranslate }}: {{ gitBranch }} •</div>
+            <div>{{ 'artemisApp.git.commit' | artemisTranslate }}: {{ gitCommitId }} •</div>
+            <div>{{ 'artemisApp.git.timestamp' | artemisTranslate }}: {{ gitTimestamp }} •</div>
+            <div>{{ 'artemisApp.git.username' | artemisTranslate }}: {{ gitCommitUser }}</div>
         </small>
     }
 </footer>
-<footer class="d-flex d-md-none justify-content-between mw-100 fs-small">
-    <div class="col-auto px-0">
-        <a [routerLink]="['/about']" jhiTranslate="aboutUs" class="footer-text"></a>
-    </div>
-    <div class="col-auto px-0">
-        <a [href]="feedbackUrl" jhiTranslate="feedback" class="footer-text" target="_blank"></a>
-    </div>
-    <div class="col-auto px-0">
-        <a [href]="releaseUrl" id="release-notes" jhiTranslate="releases" class="footer-text" target="_blank"></a>
-    </div>
-
-    <div class="col-auto px-0">
-        <a [routerLink]="['/privacy']" jhiTranslate="artemisApp.legal.privacy" class="footer-text"></a>
-    </div>
-    <div class="col-auto px-0">
-        <a [routerLink]="['/imprint']" jhiTranslate="artemisApp.legal.imprint.title" class="footer-text"></a>
-    </div>
-</footer>
diff --git a/src/main/webapp/app/shared/layouts/footer/footer.scss b/src/main/webapp/app/shared/layouts/footer/footer.scss
@@ -19,14 +19,9 @@
         font-weight: normal;
         font-size: small;
     }
-
-    .footer-git-wrapper {
-        display: flex;
-
-        .footer-git {
-            font-size: 10px;
-            margin-right: 5px;
-            margin-bottom: 5px;
-        }
+    .footer-git {
+        font-size: 10px;
+        margin-right: 5px;
+        margin-bottom: 5px;
     }
 }
diff --git a/src/test/cypress/support/pageobjects/LoginPage.ts b/src/test/cypress/support/pageobjects/LoginPage.ts
@@ -35,7 +35,7 @@ export class LoginPage {
     }
 
     shouldShowReleaseNotesInFooter() {
-        cy.get('#release-notes').should('be.visible').and('have.attr', 'href');
+        cy.get('#releases').should('be.visible').and('have.attr', 'href');
     }
 
     shouldShowPrivacyStatementInFooter() {

diff --git a/src/test/javascript/spec/component/footer/footer.component.spec.ts b/src/test/javascript/spec/component/footer/footer.component.spec.ts
@@ -42,7 +42,7 @@ describe('FooterComponent', () => {
             component.isTestServer = true;
             fixture.detectChanges();
 
-            const gitInfoElement = fixture.debugElement.nativeElement.querySelector('.footer-git-wrapper');
+            const gitInfoElement = fixture.debugElement.nativeElement.querySelector('.footer-git');
             expect(gitInfoElement).not.toBeNull();
         });
     });
@@ -68,15 +68,18 @@ describe('FooterComponent', () => {
         });
 
         it('should display all git information', () => {
-            const gitBranchElement = fixture.debugElement.nativeElement.querySelector('.footer-git-wrapper .footer-git:nth-child(1)');
-            const gitCommitElement = fixture.debugElement.nativeElement.querySelector('.footer-git-wrapper .footer-git:nth-child(2)');
-            const gitTimestampElement = fixture.debugElement.nativeElement.querySelector('.footer-git-wrapper .footer-git:nth-child(3)');
-            const gitUserElement = fixture.debugElement.nativeElement.querySelector('.footer-git-wrapper .footer-git:nth-child(4)');
+            // Assuming there's only one .footer-git and it contains all git info divs
+            const footerGit = fixture.debugElement.nativeElement.querySelector('.footer-git');
+            const gitElements = footerGit.querySelectorAll('div');
 
-            expect(gitBranchElement.textContent).toContain('main');
-            expect(gitCommitElement.textContent).toContain('abc123');
-            expect(gitTimestampElement.textContent).toContain('2023-04-01T12:00:00Z');
-            expect(gitUserElement.textContent).toContain('user123');
+            // Ensure that we have exactly four git info divs
+            expect(gitElements).toHaveLength(4);
+
+            // Check each element for the expected text content
+            expect(gitElements[0].textContent).toContain('main'); // for git branch
+            expect(gitElements[1].textContent).toContain('abc123'); // for git commit ID
+            expect(gitElements[2].textContent).toContain('2023-04-01T12:00:00Z'); // for git timestamp
+            expect(gitElements[3].textContent).toContain('user123'); // for git commit user
         });
     });
 });
diff --git a/src/test/playwright/support/pageobjects/LoginPage.ts b/src/test/playwright/support/pageobjects/LoginPage.ts
@@ -71,8 +71,8 @@ export class LoginPage {
      * Asserts that the "Release Notes" link in the footer is visible and has a non-empty href attribute.
      */
     async shouldShowReleaseNotesInFooter() {
-        expect(await this.page.isVisible('#release-notes')).toBe(true);
-        expect(await this.page.getAttribute('#release-notes', 'href')).toBeTruthy();
+        expect(await this.page.isVisible('#releases')).toBe(true);
+        expect(await this.page.getAttribute('#releases', 'href')).toBeTruthy();
     }
 
     /**