Merge pull request #2144 from solliancenet/ah-ui-mobile-view-improvem…

…ents Management Portal Mobile View Improvements
solliancenet · Jan 21, 2025 · 167e29e · 167e29e
2 parents d851a52 + b434d1e
commit 167e29e
Show file tree

Hide file tree

Showing 12 changed files with 1,885 additions and 1,654 deletions.
diff --git a/src/ui/ManagementPortal/app.vue b/src/ui/ManagementPortal/app.vue
@@ -68,14 +68,16 @@ body,
 .wrapper {
 	display: flex;
 	flex-direction: row;
-	height: 100%;
+	height: 100vh;
+	flex-wrap: wrap;
 }
 
 .page {
 	padding: 32px;
 	padding-top: 24px;
 	padding-bottom: 24px;
-	overflow: scroll;
+	overflow-y: auto;
+	max-height: 100%;
 	flex-grow: 1;
 }
 

diff --git a/src/ui/ManagementPortal/components/AgentsList.vue b/src/ui/ManagementPortal/components/AgentsList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="{ 'grid--loading': loading }">
+    <div :class="{ 'grid--loading': loading }" style="overflow: auto;">
         <!-- Loading overlay -->
         <template v-if="loading">
             <div class="grid__loading-overlay" role="status" aria-live="polite">
@@ -29,7 +29,7 @@
                 field="resource.name"
                 header="Name"
                 sortable
-                style="min-width: 200px"
+                :style="columnStyle"
                 :pt="{
                     headerCell: {
                         style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
@@ -54,7 +54,7 @@
                 field="resource.description"
                 header="Description"
                 sortable
-                style="min-width: 200px"
+                :style="columnStyle"
                 :pt="{
                     headerCell: {
                         style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
@@ -68,7 +68,7 @@
                 field="resource.expiration_date"
                 header="Expiration Date"
                 sortable
-                style="min-width: 200px"
+                :style="columnStyle"
                 :pt="{
                     headerCell: {
                         style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
@@ -211,6 +211,12 @@ export default {
         },
     },
 
+    computed: {
+        columnStyle() {
+            return window.innerWidth <= 768 ? {} : { minWidth: '200px' };
+        },
+    },
+
     data() {
         return {
             agentToDelete: null as Agent | null,
@@ -287,4 +293,19 @@ export default {
     background-color: rgba(255, 255, 255, 0.9);
     pointer-events: none;
 }
+
+@media (max-width: 768px) {
+    .p-column {
+        min-width: auto !important;
+        white-space: normal;
+    }
+
+    .p-datatable {
+        font-size: 0.9rem;
+    }
+
+    .p-column-header-content {
+        text-align: left;
+    }
+}
 </style>
diff --git a/src/ui/ManagementPortal/components/ApiStatusCard.vue b/src/ui/ManagementPortal/components/ApiStatusCard.vue
@@ -26,7 +26,7 @@
 			</div>
 		</div>
 		<div v-else>This service does not contain a status endpoint.</div>
-		<p><strong>URL:</strong> {{ apiUrl }}</p>
+		<p class="api-status-card__url"><strong>URL:</strong> {{ apiUrl }}</p>
 	</div>
 </template>
 
@@ -89,6 +89,7 @@ export default {
 
 <style scoped>
 .api-status-card {
+	max-width: 100%;
 	border: 1px solid #ddd;
 	border-radius: 8px;
 	padding: 1.5em;
@@ -151,4 +152,18 @@ export default {
 	margin-bottom: 1em;
 	list-style-type: disc;
 }
+
+.api-status-card .api-status-card__url {
+    word-break: break-all;
+}
+
+@media (max-width: 600px) {
+	.api-status-card h2 {
+		font-size: 1.2em;
+	}
+
+	.error {
+		word-break: break-all;
+	}
+}
 </style>
diff --git a/src/ui/ManagementPortal/components/ColorInput.vue b/src/ui/ManagementPortal/components/ColorInput.vue
@@ -79,16 +79,28 @@ export default {
 }
 
 .branding-color-input {
-	width: 30ch;
+	max-width: 30ch;
+	height: 44px;
+	padding-right: 12px;
 }
 
 .color-picker {
 	width: 50px;
+	height: 44px;
 }
 
 .color-undo-button {
 	border: 2px solid #e1e1e1 !important;
 	border-width: 2px 2px 2px 0 !important;
 	width: 50px;
+	height: 44px;
+}
+</style>
+
+<style lang="scss">
+.color-picker > input {
+	border-radius: 0px !important;
+	padding: 20.4px 30px 20.4px 12px !important;
+	border-left: 0 !important;
 }
 </style>
diff --git a/src/ui/ManagementPortal/components/RoleAssignmentsTable.vue b/src/ui/ManagementPortal/components/RoleAssignmentsTable.vue
@@ -42,7 +42,7 @@
 				field="principal.display_name"
 				header="Name"
 				sortable
-				style="min-width: 120px"
+				:style="columnStyle"
 				:pt="{
 					headerCell: {
 						style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
@@ -69,7 +69,7 @@
 				field="principal_type"
 				header="Type"
 				sortable
-				style="min-width: 120px"
+				:style="columnStyle"
 				:pt="{
 					headerCell: {
 						style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
@@ -110,7 +110,7 @@
 				field="scope_name"
 				header="Scope"
 				sortable
-				style="min-width: 140px"
+				:style="columnStyle"
 				:pt="{
 					headerCell: {
 						style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
@@ -196,6 +196,12 @@ export default {
 		await this.getRoleAssignments();
 	},
 
+	computed: {
+        columnStyle() {
+            return window.innerWidth <= 768 ? {} : { minWidth: '200px' };
+        },
+    },
+
 	methods: {
 		async getRoleAssignments() {
 			this.loading = true;