mylife: smoother achievements navigation (fixes #7632) (#7637)

Co-authored-by: dogi <[email protected]>
open-learning-exchange · Oct 24, 2024 · 01f4da3 · 01f4da3
1 parent 7c32ac8
commit 01f4da3
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.15.2",
+  "version": "0.15.3",
   "myplanet": {
     "latest": "v0.20.58",
     "min": "v0.19.58"

diff --git a/src/app/users/users-achievements/users-achievements.component.html b/src/app/users/users-achievements/users-achievements.component.html
@@ -5,17 +5,21 @@
 </mat-toolbar>
 
 <div class="space-container">
-  <mat-toolbar class="primary-color font-size-1">
-    <span *ngIf="user?.firstName; else elseBlock">{{ user.firstName}} {{user.middleName}} {{user.lastName }}</span>
-    <ng-template #elseBlock>{{ user.name }}</ng-template>
+  <mat-toolbar class="primary-color font-size-1 responsive-toolbar center-text">
+    <div>
+      <span *ngIf="user?.firstName; else elseBlock" class="center-text">{{ user.firstName}} {{user.middleName}} {{user.lastName }}</span>
+      <ng-template #elseBlock>{{ user.name }}</ng-template>
+    </div>
     <span class="toolbar-fill"></span>
-    <a mat-raised-button color="primary" style="margin-right: 1rem;" *ngIf="ownAchievements && !achievementNotFound" (click)="generatePDF()">
-      <span i18n>Print Achievements</span>
-    </a> <br>
-    <a mat-raised-button color="accent" routerLink="update" *ngIf="ownAchievements">
-      <span *ngIf="achievementNotFound" i18n>Add Achievements</span>
-      <span *ngIf="!achievementNotFound" i18n>Edit Achievements</span>
-    </a>
+    <div class="auto-adjust-buttons">
+      <a mat-raised-button color="primary" class="margin-r-1" *ngIf="ownAchievements && !achievementNotFound" (click)="generatePDF()">
+        <span i18n>Print Achievements</span>
+      </a>
+      <a mat-raised-button color="accent" routerLink="update" *ngIf="ownAchievements">
+        <span *ngIf="achievementNotFound" i18n>Add Achievements</span>
+        <span *ngIf="!achievementNotFound" i18n>Edit Achievements</span>
+      </a>
+    </div>
   </mat-toolbar>
   <div class="view-container">
     <div *ngIf="achievements !== undefined" class="achievements-container">

diff --git a/src/app/users/users-achievements/users-achievements.scss b/src/app/users/users-achievements/users-achievements.scss
@@ -1,3 +1,5 @@
+@import '../../variables';
+
 .achievements-container {
   max-width: 800px;
   margin: 0 auto;
@@ -56,3 +58,41 @@
     text-decoration: underline;
   }
 }
+
+.margin-r-1 {
+  margin-right: 1rem
+}
+
+@media (max-width: $screen-sm) {
+  .responsive-toolbar {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+    height: auto;
+    padding-bottom: 0.5rem;
+  }
+
+  .auto-adjust-buttons {
+    display: flex;
+    gap: 0.2rem;
+    width: 100%;
+  }
+
+  .auto-adjust-buttons a {
+    flex-grow: 1;
+    text-align: center;
+  }
+
+  .auto-adjust-buttons span {
+    font-size: 0.875em;
+  }
+
+  .margin-r-1 {
+    margin-right: 0.2rem;
+  }
+
+  .center-text div {
+    margin: 0 auto;
+  }
+}