From 8de9d78be3a98e754c1af20234131703e36c738c Mon Sep 17 00:00:00 2001 From: Ishaan Gupta Date: Mon, 3 Feb 2025 02:05:52 +0530 Subject: [PATCH 1/9] Add Responsiveness in Login Page, Register Page and profile Page Signed-off-by: Ishaan Gupta --- client_secret_example.json | 4 +- static/css/profile.css | 78 ++++++++++++++++++++++++++++++++++++++ static/css/style.css | 24 ++++++++++++ templates/profile.html | 8 ++-- 4 files changed, 108 insertions(+), 6 deletions(-) diff --git a/client_secret_example.json b/client_secret_example.json index b2aa280..304040d 100644 --- a/client_secret_example.json +++ b/client_secret_example.json @@ -1,3 +1,3 @@ { - "Note": "Place your downloaded client_secret.jsonfrom google api here" -} \ No newline at end of file + "Note": "Place your downloaded client_secret.jsonfrom google api here" + } \ No newline at end of file diff --git a/static/css/profile.css b/static/css/profile.css index 8f00cec..c8763e8 100644 --- a/static/css/profile.css +++ b/static/css/profile.css @@ -208,4 +208,82 @@ h2{ .edit-button:hover { background-color: #007906; +} + +@media only screen and (max-width: 768px ) and (orientation: portrait) { + /* Adjust navigation */ + .nav { + font-size: 18px; + padding: 6px; + } + + .button-container { + gap: 100px; + margin-right: 18px; + padding: 0px; + } + + .toggle { + width: 150px; + text-align: center; + font-size: 16px; + } + + .logout-button{ + width: 100px; + } + + /* Make the form full width */ + .toggle-container form { + width: 80%; + margin-left: 15px; + } + + input, textarea { + width: 100%; + font-size: 14px; + padding: 8px; + } + + /* Adjust image container */ + .image-container { + display: flex; + flex-direction: column; + align-items: center; + margin-left: 0; + } + + .image-card { + width: 70%; + padding: 12px; + } + + .image-card img { + max-width: 100%; + height: auto; + } + + /* Adjust modal for mobile */ + .edit-modal .modal-content { + width: 70%; + padding: 10px; + } + + .edit-form .text-input { + width: 90%; + margin-left: 5px; + } + + .edit-button .update-button { + width: 50%; + } + + + /* Improve button spacing */ + .more-info-button, .delete-button, .edit-button { + width: 50%; + font-size: 14px; + padding: 10px; + } + } \ No newline at end of file diff --git a/static/css/style.css b/static/css/style.css index a046fb0..5cb2355 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -82,4 +82,28 @@ button:disabled { color: #ff0400; } +@media (max-width: 480px) { + .container { + margin-top: 90px; + max-width: 80%; + padding: 15px; + } + h2 { + font-size: 30px; + } + + input { + font-size: 14px; + padding: 8px; + } + + button { + font-size: 14px; + padding: 10px; + } + + p { + font-size: 15px; + } +} \ No newline at end of file diff --git a/templates/profile.html b/templates/profile.html index 6e77790..902570a 100644 --- a/templates/profile.html +++ b/templates/profile.html @@ -68,10 +68,10 @@

{{ image.title }}

+ {% include 'footer.html' %} diff --git a/templates/footer.html b/templates/footer.html new file mode 100644 index 0000000..d24705c --- /dev/null +++ b/templates/footer.html @@ -0,0 +1,30 @@ + + + + + + Beehive + + + +
+
+
+

Beehive is a data-driven initiative enhancing behavioral health insights and healthcare practices in Alaska through a federated data approach.

+
+
+ About + Documentation + Contribute + Contact +
+
+
+

© Beehive Project | All Rights Reserved

+
+
+ + + \ No newline at end of file diff --git a/templates/profile.html b/templates/profile.html index 902570a..b2fcf51 100644 --- a/templates/profile.html +++ b/templates/profile.html @@ -79,5 +79,6 @@

{{ image.title }}

{% endfor %} + {% include 'footer.html' %} diff --git a/templates/user_images.html b/templates/user_images.html index e1dc12c..10c0941 100644 --- a/templates/user_images.html +++ b/templates/user_images.html @@ -51,6 +51,6 @@

{{ image.title }}

{% endfor %} - + {% include 'footer.html' %} diff --git a/templates/user_profile.html b/templates/user_profile.html index 1f2d609..7df0a70 100644 --- a/templates/user_profile.html +++ b/templates/user_profile.html @@ -47,5 +47,6 @@

{{ image.title }}

Back to User List
+ {% include 'footer.html' %} From e7dd3ca201f68505bb59aff07cb9b1d5d3329893 Mon Sep 17 00:00:00 2001 From: Bagwan Date: Sat, 15 Feb 2025 11:29:14 +0530 Subject: [PATCH 4/9] Add client-side validation for image upload in profile.html Signed-off-by: Bagwan --- templates/profile.html | 27 +++++++++++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/templates/profile.html b/templates/profile.html index 902570a..55eca13 100644 --- a/templates/profile.html +++ b/templates/profile.html @@ -34,6 +34,28 @@ editForm.style.display = 'none'; } } + + function validateFile(input) { + const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp', 'image/heif', 'application/pdf']; + const uploadButton = document.getElementById('uploadButton'); + const fileError = document.getElementById('fileError'); + + if (input.files && input.files[0]) { + const file = input.files[0]; + const fileExtension = file.name.split('.').pop().toLowerCase(); + + if (!allowedTypes.includes(file.type) || + !['jpg', 'jpeg', 'png', 'gif', 'webp', 'heif', 'pdf'].includes(fileExtension)) { + uploadButton.disabled = true; + fileError.style.display = 'block'; + input.value = ''; // Clear the file input + } else { + uploadButton.disabled = false; + fileError.style.display = 'none'; + } + } + } + @@ -49,10 +71,11 @@

{{ username }}

From 5966dba595d2238e0e7d9ad85cda73aa40f09bed Mon Sep 17 00:00:00 2001 From: Bagwan Date: Sat, 15 Feb 2025 11:29:52 +0530 Subject: [PATCH 5/9] Implement server-side image type validation in app.py Signed-off-by: Bagwan --- app.py | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/app.py b/app.py index a1260f1..dcfad0d 100644 --- a/app.py +++ b/app.py @@ -37,6 +37,10 @@ from OAuth.config import ALLOWED_EMAILS, GOOGLE_CLIENT_ID +ALLOWED_EXTENSIONS = {'jpg', 'jpeg', 'png', 'gif', 'webp', 'heif', 'pdf'} + +def allowed_file(filename): + return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS app = Flask(__name__) app.secret_key = 'beehive' @@ -174,7 +178,7 @@ def upload_image(): title = request.form['title'] description = request.form['description'] - if file: + if file and allowed_file(file.filename): filename = file.filename filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename) os.makedirs(os.path.dirname(filepath), exist_ok=True) @@ -182,7 +186,7 @@ def upload_image(): save_image(user['username'], filename, title, description) flash('Image uploaded successfully!', 'success') else: - flash('No file selected.', 'danger') + flash('Invalid file type. Allowed types are: jpg, jpeg, png, gif, webp, heif, pdf', 'danger') return redirect(url_for('profile')) From bbb9d858be4e07039d5a335a4952e993c822458e Mon Sep 17 00:00:00 2001 From: Bagwan Date: Sat, 15 Feb 2025 14:36:02 +0530 Subject: [PATCH 6/9] Implement full-page drag and drop for file uploads - Allow users to drop files anywhere on the page - Maintain existing file input and enhance user experience - Provide visual feedback when dragging files Signed-off-by: Bagwan --- static/js/dragdrop.js | 67 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 static/js/dragdrop.js diff --git a/static/js/dragdrop.js b/static/js/dragdrop.js new file mode 100644 index 0000000..7ee33cc --- /dev/null +++ b/static/js/dragdrop.js @@ -0,0 +1,67 @@ +document.addEventListener('DOMContentLoaded', function() { + const fileInput = document.querySelector('input[type="file"]'); + const uploadButton = document.getElementById('uploadButton'); + const fileError = document.getElementById('fileError'); + const allowedTypes = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'heif', 'pdf']; + + //Validating dropped file + function validateFile(file) { + const fileExtension = file.name.split('.').pop().toLowerCase(); + if (!allowedTypes.includes(fileExtension)) { + uploadButton.disabled = true; + fileError.style.display = 'block'; + fileInput.value = ''; // Clear the file input + return false; + } + uploadButton.disabled = false; + fileError.style.display = 'none'; + return true; + } + + // Prevent default drag behaviors + ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { + document.addEventListener(eventName, preventDefaults, false); + }); + + function preventDefaults(e) { + e.preventDefault(); + e.stopPropagation(); + } + + // Changing the Opacity for better visual + ['dragenter', 'dragover'].forEach(eventName => { + document.addEventListener(eventName, highlight, false); + }); + + ['dragleave', 'drop'].forEach(eventName => { + document.addEventListener(eventName, unhighlight, false); + }); + + function highlight(e) { + document.body.style.opacity = '0.7'; + document.body.style.transition = 'opacity 0.2s ease'; + } + + function unhighlight(e) { + document.body.style.opacity = '1'; + } + + document.addEventListener('drop', function(e) { + const dt = e.dataTransfer; + const files = dt.files; + + if (files.length > 0) { + const file = files[0]; + if (validateFile(file)) { + // Update the file input with the dropped file + fileInput.files = files; + + // Show upload form if hidden + const uploadForm = document.getElementById('uploadForm'); + if (uploadForm.style.display === 'none' || uploadForm.style.display === '') { + uploadForm.style.display = 'block'; + } + } + } + }); +}); \ No newline at end of file From 93359a0a6f07b190a436d7ba23dc8b72a7ff8760 Mon Sep 17 00:00:00 2001 From: Bagwan Date: Sat, 15 Feb 2025 14:43:29 +0530 Subject: [PATCH 7/9] Implement page-wide drag and drop file upload - Add page-wide drag and drop functionality for file uploads - Integrate file type validation matching existing allowed extensions - Show error message for invalid file types - Maintain existing file input functionality - Add visual feedback during file drag operations Signed-off-by: Bagwan --- templates/profile.html | 1 + 1 file changed, 1 insertion(+) diff --git a/templates/profile.html b/templates/profile.html index 204207e..494c689 100644 --- a/templates/profile.html +++ b/templates/profile.html @@ -57,6 +57,7 @@ } +
From b1e76e4a2fb68c397df79dbdc651827b949f2891 Mon Sep 17 00:00:00 2001 From: Bagwan Date: Mon, 17 Feb 2025 15:02:59 +0530 Subject: [PATCH 8/9] Updated upload button text to indicate drag-and-drop support Signed-off-by: Bagwan --- templates/profile.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/profile.html b/templates/profile.html index 494c689..34c14ea 100644 --- a/templates/profile.html +++ b/templates/profile.html @@ -65,7 +65,7 @@

{{ username }}

- +
From 98e8bde519fee1ee8374b6ac78b10c6a10883c72 Mon Sep 17 00:00:00 2001 From: Bagwan Date: Sat, 22 Feb 2025 01:53:12 +0530 Subject: [PATCH 9/9] Fix SVG Border Radius Issue - Moved rx=10 and ry=10 from profile.css to profile.html to resolve errors. - Ensured rounded corners are applied correctly without conflicts. Signed-off-by: Bagwan --- static/css/profile.css | 4 ---- templates/profile.html | 4 ++-- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/static/css/profile.css b/static/css/profile.css index 9ce5696..3f8ae67 100644 --- a/static/css/profile.css +++ b/static/css/profile.css @@ -497,8 +497,6 @@ h2{ stroke: black; stroke-width: 2px; fill: transparent; - rx: 1em; - ry: 1em; stroke-dasharray: 25; transition: fill 0.25s, stroke 0.3s ease; animation: 4s linear infinite stroke-animation; @@ -584,8 +582,6 @@ h2{ stroke: #0055d4; stroke-width: 2px; fill: none; - rx: 1em; - ry: 1em; stroke-dasharray: 0 100; } diff --git a/templates/profile.html b/templates/profile.html index 68b95a3..526233f 100644 --- a/templates/profile.html +++ b/templates/profile.html @@ -231,8 +231,8 @@

{{ username }}