Better support for small screens in Pods Admin > Edit Pod

pods-framework · Jun 17, 2024 · d19fc7c · d19fc7c
1 parent 9a8df0a
commit d19fc7c
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 9 deletions.
diff --git a/ui/js/dfv/src/admin/edit-pod/edit-pod.scss b/ui/js/dfv/src/admin/edit-pod/edit-pod.scss
@@ -19,6 +19,11 @@
 	display: block;
 	max-width: 45em;
 	width: 65%;
+
+	@media screen and (max-width: 850px) {
+		max-width: 100%;
+		width: 100%;
+	}
 }
 
 .pods-edit-pod-manage-field .pods-dfv-container-wysiwyg,

diff --git a/ui/js/dfv/src/admin/edit-pod/main-tabs/field-list-item.scss b/ui/js/dfv/src/admin/edit-pod/main-tabs/field-list-item.scss
@@ -190,10 +190,25 @@
 	flex: 0 0 calc(25% - 1em);
 	padding-bottom: 1em;
 	padding-right: 1em;
-	overflow-wrap: break-word;
 	width: calc(25% - 1em);
 }
 
+.pods-field_name,
+.pods-field_wrapper-label_name {
+	overflow-wrap: anywhere;
+}
+
+.pods-field_type,
+.pods-field_wrapper-label_type,
+.pods-field_label,
+.pods-field_wrapper-label {
+	overflow-wrap: break-word;
+
+	@media screen and (max-width: 850px) {
+		overflow-wrap: anywhere;
+	}
+}
+
 .pods-field_wrapper-label-items {
 	width: 172px;
 	padding: 1em 1em 1em 0;
@@ -209,7 +224,11 @@
 .pods-field_wrapper-items {
 	border: 1px solid $color--light-grey;
 	margin: 1em 0;
-	// overflow: hidden;
+
+	@media screen and (max-width: 850px) {
+		border-left: none;
+		border-right: none;
+	}
 }
 
 .pods-field_wrapper:nth-child(even) {

diff --git a/ui/js/dfv/src/admin/edit-pod/main-tabs/field-list.scss b/ui/js/dfv/src/admin/edit-pod/main-tabs/field-list.scss
@@ -9,6 +9,10 @@
 	overflow: visible !important; // TODO: this is being overridden by old 2.x styles
 	display: flex;
 	flex-flow: column nowrap;
+
+	@media screen and (max-width: 850px) {
+		margin: 0;
+	}
 }
 
 .pods-field-list__empty {
@@ -26,4 +30,8 @@
 
 .pods-field-group_add_field_link {
 	align-self: flex-end;
+
+	@media screen and (max-width: 850px) {
+		margin: 0 1em 1em;
+	}
 }
diff --git a/ui/js/dfv/src/admin/edit-pod/main-tabs/settings-modal.scss b/ui/js/dfv/src/admin/edit-pod/main-tabs/settings-modal.scss
@@ -1,13 +1,14 @@
 @import '../edit-pod-variables';
 
 .components-modal__frame.pods-settings-modal {
-	height: 90vh;
-	width: 90vw;
+	height: 80vh;
+	width: 80vw;
 	max-width: 950px;
 
-	@media screen and (min-width: 851px) {
-		height: 80vh;
-		width: 80vw;
+	@media screen and (max-width: 850px) {
+		height: 100%;
+		width: 100%;
+		margin-top: 0;
 	}
 }
 
@@ -122,6 +123,10 @@
 		flex: 1 1 auto;
 	}
 
+	@media screen and (max-width: 850px) {
+		overflow-y: scroll;
+	}
+
     .pods-field-option {
         margin-bottom: 1em;
     }

diff --git a/ui/js/dfv/src/components/copy-button.js b/ui/js/dfv/src/components/copy-button.js
@@ -26,7 +26,9 @@ const CopyButton = ( { label, textToCopy, onClick } ) => {
 			onClick={ handleClick }
 		>
 			{ copied ? (
-				<span>{ __( 'Copied', 'pods' ) }</span>
+				<span>
+					({ __( 'Copied name', 'pods' ) })
+				</span>
 			) : (
 				<svg
 					xmlns="http://www.w3.org/2000/svg"

diff --git a/ui/js/dfv/src/components/copy-button.scss b/ui/js/dfv/src/components/copy-button.scss
@@ -5,4 +5,8 @@
         width: 12px;
         height: 12px;
     }
-}
+
+	@media screen and (max-width: 850px) {
+		display: none;
+	}
+}