Bugfix - nearbeach-1085 Wide screen kanban - UI/UX - switch to enable…

…/disable dragging seems out of place | nearbeach-1086 Kanban Board - UI/UX - Level headers do not line up exactly with heading

NearBeach/views/customer_views.py

@@ -98,6 +98,10 @@ def customer_update_profile(request, customer_id, *args, **kwargs):
     file = form.cleaned_data["file"]
     document_description = str(file)
 
+    # Check file size
+    if file.size > 250 * 1024:
+        return HttpResponseBadRequest("File size too large")
+
     # Upload the document
     document_submit, _ = handle_document_permissions(
         request,

NearBeach/views/organisation_views.py

@@ -197,6 +197,10 @@ def organisation_update_profile(request, organisation_id, *args, **kwargs):
     file = form.cleaned_data["file"]
     document_description = str(file)
 
+    # Check the file size
+    if file.size > 250 * 1024:
+        return HttpResponseBadRequest("File size too large")
+
     # Upload the document
     document_submit, _ = handle_document_permissions(
         request,

NearBeach/views/profile_views.py

@@ -90,6 +90,10 @@ def update_profile(request):
     file = form.cleaned_data["file"]
     document_description = str(file)
 
+    # Check file size
+    if file.size > 250 * 1024:
+        return HttpResponseBadRequest("Profile Picture too large. Please use 250Kb")
+
     # Upload the document
     document_submit, _ = handle_document_permissions(
         request,

src/js/components/customers/CustomerInformation.vue

@@ -35,6 +35,7 @@
 								'X-CSRFTOKEN': getToken('csrftoken'),
 							}"
 							:data="{}"
+							@error="showErrorModal('Profile Picture was not updated','Profile Picture','')"
 							@finish="updateProfilePicture"
 						>
 							<n-button>Update Profile Picture</n-button>

src/js/components/kanban/KanbanBoard.vue

@@ -106,7 +106,8 @@ import { nextTick } from 'vue';
 			},
 			resizeProcedure() {
 				// Get the screen size and the columns width
-				const columns_width = this.columnResults.length * 400;
+				const little_adjustment = 2 * (this.columnResults.length - 1)
+				const columns_width = this.columnResults.length * 400 + little_adjustment;
 				const container_element = document.getElementsByClassName("kanban-container")[0];
 				const kanban_container_width = container_element.clientWidth;
 				
@@ -115,22 +116,30 @@ import { nextTick } from 'vue';
 				// that smaller size
 				if (columns_width < kanban_container_width) {
 					//Add in the width restrictions
+					var header_element = document.getElementsByClassName("kanban-edit-text")[0];
 					var elements = document.getElementsByClassName("kanban-level-div");
 
 					//Loop through each element
 					Array.from(elements).forEach((element) => {
 						element.style = `max-width: ${columns_width}px;`;
 					});
+
+					//Adjust the size of the header element
+					header_element.style = `max-width: ${columns_width}px`;
 				} else {
 					//The columns width is greater than the container width. 
 					//So we need to use the scroll width of the container
 					const scroll_width = container_element.scrollWidth;
+					var header_element = document.getElementsByClassName("kanban-edit-text")[0];
 					let elements = document.getElementsByClassName("kanban-level-div");
 
 					//Loop through each element
 					Array.from(elements).forEach((element) => {
 						element.style = `width: ${scroll_width}px;`;
 					});
+
+					//Adjust the size of the header element
+					header_element.style = `max-width: ${scroll_width}px`;
 				}
 			},
 			scrollProcedure() {

src/js/components/profile/UpdateProfilePicture.vue

@@ -16,13 +16,14 @@
 						class="organisation-profile-image"
 					/>
 					<br />
-					<!--<button class="btn btn-primary">Update Profile...</button>-->
 					<n-upload
 						:action="`${rootUrl}profile_information/update_profile/`"
 						:headers="{
 							'X-CSRFTOKEN': getToken('csrftoken'),
 						}"
 						:data="{}"
+						:max="1"
+						@error="showErrorModal('Profile Picture was not updated','Profile Picture','')"
 						@finish="updateProfilePicture"
 					>
 						<n-button>Update Profile Picture</n-button>
@@ -39,6 +40,7 @@
 	import { mapGetters } from "vuex";
 
 	//Mixins
+	import errorModalMixin from "../../mixins/errorModalMixin";
 	import getToken from "../../mixins/getTokenMixin";
 	import getThemeMixin from "../../mixins/getThemeMixin";
 
@@ -71,7 +73,7 @@
 				rootUrl: "getRootUrl",
 			}),
 		},
-		mixins: [getToken, getThemeMixin],
+		mixins: [errorModalMixin, getToken, getThemeMixin],
 		methods: {
 			setProfilePicture() {
 				//Set the default