community: smoother services (fixes #5615) (#7708)

Co-authored-by: mutugiii <[email protected]> Co-authored-by: dogi <[email protected]>
open-learning-exchange · Nov 5, 2024 · 88299f0 · 88299f0
1 parent 27c7d00
commit 88299f0
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -1,10 +1,10 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.15.33",
+  "version": "0.15.34",
   "myplanet": {
-    "latest": "v0.20.78",
-    "min": "v0.19.78"
+    "latest": "v0.20.79",
+    "min": "v0.19.79"
   },
   "scripts": {
     "ng": "ng",

diff --git a/src/app/community/community.component.html b/src/app/community/community.component.html
@@ -33,29 +33,34 @@ <h3 style="text-align: right; margin-right: 0.5rem;">
           </div>
         </mat-tab>
         <mat-tab i18n-label label="Services">
-          <planet-markdown *ngIf="team.description" [content]="team.description || ''"></planet-markdown>
-          <span *ngIf="!team.description" i18n><p>No description available.</p></span>
           <ng-container *ngIf="!planetCode">
             <button *planetAuthorizedRoles="''" (click)="openDescriptionDialog()" mat-stroked-button i18n>
               { servicesDescriptionLabel, select, Edit {Edit} Add {Add}} { configuration.planetType, select, community {Community} nation {Nation} center {Earth}} Description
             </button>
           </ng-container>
-            <span *ngIf="links?.length === 0" i18n><p>No links available.</p></span>
-            <mat-nav-list>
-              <mat-list-item *ngFor="let link of links" [routerLink]="(link.teamType === 'sync' || !planetCode) ? link.route : []" i18n-matTooltip [matTooltip]="(link.teamType === 'sync' || !planetCode) ? '' : link.title + ' is only available on ' + configuration.name" [disableRipple]="link.teamType === 'local' && planetCode">
-                <span matLine>{{link.title}}</span>
-                <button *ngIf="deleteMode" mat-icon-button color="warn" (click)="openDeleteLinkDialog(link); $event.stopPropagation()"><mat-icon>delete</mat-icon></button>
-              </mat-list-item>
-            </mat-nav-list>
+          <planet-markdown *ngIf="team.description; else noTeamDesc" [content]="team.description || ''"></planet-markdown>
+          <ng-template #noTeamDesc><p i18n>No description available.</p></ng-template>
           <ng-container *ngIf="!planetCode">
-            <div *planetAuthorizedRoles="''" class="action-buttons">
+            <div *planetAuthorizedRoles="''" class="action-buttons sticky-button">
               <button (click)="openAddLinkDialog()" mat-stroked-button i18n>Add Link</button>
               <button (click)="toggleDeleteMode()" [disabled]="links.length===0" mat-stroked-button>
                 <span *ngIf="!deleteMode" i18n>Remove Links</span>
                 <span *ngIf="deleteMode" i18n>Done Removing Links</span>
               </button>
             </div>
           </ng-container>
+          <ng-container>
+            <span *ngIf="links?.length === 0" i18n><p>No links available.</p></span>
+            <mat-nav-list>
+              <mat-list-item *ngFor="let link of links" [routerLink]="(link.teamType === 'sync' || !planetCode) ? link.route : []" i18n-matTooltip [matTooltip]="(link.teamType === 'sync' || !planetCode) ? '' : link.title + ' is only available on ' + configuration.name" [disableRipple]="link.teamType === 'local' && planetCode">
+                <span matLine>{{link.title}}</span>
+                <button *ngIf="deleteMode" mat-icon-button color="warn" (click)="openDeleteLinkDialog(link); $event.stopPropagation()"><mat-icon>delete</mat-icon></button>
+              </mat-list-item>
+            </mat-nav-list>
+          </ng-container>
+          <ng-template #noLinks>
+            <p i18n>No links available.</p>
+          </ng-template>
         </mat-tab>
         <mat-tab *ngIf="configuration.planetType==='nation'" i18n-label label="Communities">
           <planet-community-list></planet-community-list>

diff --git a/src/app/community/community.scss b/src/app/community/community.scss
@@ -50,3 +50,11 @@ planet-calendar {
 mat-tab-group, mat-tab {
   height: 100%;
 }
+
+.sticky-button {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: white;
+  padding-bottom: 0.5rem;
+}