From 01f4da32bae3a9ae9cdf68a2291772c86b20c361 Mon Sep 17 00:00:00 2001
From: Axel Lo <54468493+RheuX@users.noreply.github.com>
Date: Thu, 24 Oct 2024 13:48:24 -0700
Subject: [PATCH] mylife: smoother achievements navigation (fixes #7632)
 (#7637)

Co-authored-by: dogi <dogi@users.noreply.github.com>
---
 package.json                                  |  2 +-
 .../users-achievements.component.html         | 24 ++++++-----
 .../users-achievements.scss                   | 40 +++++++++++++++++++
 3 files changed, 55 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 4eb4025c32..eea7f479b3 100755
--- 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
index 302c2e603d..8988c3abc6 100644
--- 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
index 53ff2db9fe..814f3ae571 100644
--- 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;
+  }
+}
\ No newline at end of file