[Feature #110549282] UI/UX Modification

jubrilissa · Jan 28, 2016 · 94249a6 · 94249a6
1 parent eff436b
commit 94249a6
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 67 deletions.
diff --git a/djangogram/photoeditor/tests/test_djangogram.py b/djangogram/photoeditor/tests/test_djangogram.py
@@ -94,7 +94,7 @@ def test_can_delete_image(self, mock_get, mock_path, mock_remove):
         request = self.factory.post(
             '/delete/', {
                 'path': self.photo.image.path,
-                    'image_id': 1
+                    'imageId': 1
                 }
         )
         request.user = self.user

diff --git a/djangogram/photoeditor/views.py b/djangogram/photoeditor/views.py
@@ -46,6 +46,9 @@ def get(self, request, *args, **kwargs):
 
 
 class HomeView(LoginRequiredMixin, TemplateView):
+    """
+    The Home view that handles file upload and returning photos for the current logged in user
+    """
     template_name = 'photoeditor/canvas.html'
     form_class = PhotoForm
 
@@ -106,7 +109,7 @@ class DeleteView(View):
     The view that handles the deleting of image
     """
     def post(self, request, *args, **kwargs):
-        image_id = request.POST['image_id']
+        image_id = request.POST['imageId']
         photo = Photo.objects.get(id=image_id)
         photo.delete()
 

diff --git a/djangogram/static/css/style.css b/djangogram/static/css/style.css
@@ -1,4 +1,17 @@
-html, body, .container-table {
+/*html, body, .page-container, .main-container {*/
+    /*height: 650px;*/
+    /*overflow: hidden;*/
+/*}*/
+html, body, .container-fluid{
+    height: 100%;
+}
+.page-container, .main-container {
+    min-height: 100%;
+    height: 650px;
+    overflow: hidden;
+}
+
+.container-table {
     height: 100%;
 }
 
@@ -15,7 +28,7 @@ body {
     background-color: #f6f6f6;
 }
 
-.fbtn{
+.fbtn {
     margin-bottom: 30px;
 }
 
@@ -30,9 +43,10 @@ h1 {
     margin: 10px 0 0 0;
 }
 
-.navbar{
-    box-shadow: 4px 4px 5px rgba(0,0,0,0.1);
+.navbar {
+    box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.1);
 }
+
 canvas {
     margin: 10px 0;
     width: 100%;
@@ -52,11 +66,6 @@ input[type="range"] {
     clear: both;
 }
 
-body, .page-container, .main-container {
-    height: 650px;
-    overflow: hidden;
-}
-
 .page-container {
     padding-top: 50px;
 }
@@ -120,70 +129,77 @@ body, .page-container, .main-container {
     display: block;
 }
 
-.navbar{
+.navbar {
     background-color: white;
 }
 
-.img-container{
+.img-container {
     margin-top: 10px;
-    height: 460px;
+    height: 70%;
     width: 100%;
-
 }
-.img-container .img-responsive{
+
+.img-container .img-responsive {
     height: 100%;
 }
-#img{
+
+#img {
     display: block;
     margin: auto;
+    padding-top: 20px;
 }
 
-.single-image{
+.single-image {
     height: 200px;
     width: 100%;
     margin-bottom: 10px;
 }
-.single-image .img-responsive{
+
+.single-image .img-responsive {
     height: 100%;
     margin: auto;
     display: block;
 }
 
-#drop input{
+#drop input {
     display: none;
 }
-#upload{
+
+#upload {
     height: 70px;
     margin-top: 40px;
 }
 
-.logo{
+.logo {
     font-size: 40px;
 }
-.slogan{
+
+.slogan {
     font-size: 17px;
     margin-bottom: 50px;
 }
-.fb-btn{
+
+.fb-btn {
     height: 50px;
     width: 200px;
     line-height: 35px;
 }
 
-#profile-img{
-height: 30px;
+#profile-img {
+    height: 30px;
     margin-top: 10px;
 }
 
-.tagline{
-background-color: #ffffff;
+.tagline {
+    background-color: #ffffff;
 }
 
-.tag-msg{
+.tag-msg {
     margin-bottom: 20px;
     padding: 10px;
 }
-.gramlogo{
+
+.gramlogo {
     min-height: 100%;
     height: 60px;
-}
+}
diff --git a/djangogram/static/js/script.js b/djangogram/static/js/script.js
@@ -31,10 +31,6 @@ function sendEffect(effectName, imageUrl, imageId) {
       var imgSrc = data.applied_effect + '?' + new Date().getTime();
       $('#img').attr('src', imgSrc);
       $('#savebtn').attr('href', imgSrc);
-      console.log('I returned success');
-    },
-
-    error: function () {
 
     },
   });
@@ -47,8 +43,6 @@ function applyEffects(imageId) {
   effectClass.click(function () {
     $(this).siblings().removeClass('active');
     var effect = $(this).data('effect');
-
-    console.log(imageId);
     var imageUrl = '/effect/';
     sendEffect(effect, imageUrl, imageId);
     $(this).addClass('active');
@@ -61,12 +55,9 @@ var deleteImage = function () {
   deletebtn.click(function (e) {
     e.preventDefault();
     var result = confirm('Are you sure you want to delete');
-    console.log(result);
     if (result) {
       var image_to_be_deleted = $('#img').attr('src');
-      console.log(image_to_be_deleted);
-      var image_id = $('#img').data('id');
-      console.log(image_id);
+      var imageId = $('#img').data('id');
 
       $.notify('<strong>Deleting image...</strong>', {
         type: 'info',
@@ -83,7 +74,7 @@ var deleteImage = function () {
         url: '/delete/',
         type: 'POST',
         data: {
-          image_id: image_id,
+          imageId: imageId,
         },
         success: function () {
           window.location.reload();
@@ -103,7 +94,6 @@ var fbShare = $('#share');
 fbShare.click(function () {
   var img_src = $('#img').attr('src');
   $(this).attr('href', img_src);
-  console.log(img_src);
   facebook.share(img_src);
 });
 
@@ -131,13 +121,6 @@ var initUploadPlugin = function () {
       var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"' +
         ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>');
 
-      // Append the file name and file size
-      tpl.find('p').text(data.files[0].name)
-        .append('<i>' + formatFileSize(data.files[0].size) + '</i>');
-
-      // Add the HTML to the UL element
-      data.context = tpl.appendTo(ul);
-
       // Listen for clicks on the cancel icon
       tpl.find('span').click(function () {
 
@@ -157,13 +140,16 @@ var initUploadPlugin = function () {
     },
 
     progress: function (e, data) {
-
-      // Calculate the completion percentage of the upload
-      var progress = parseInt(data.loaded / data.total * 100, 10);
-
-      // Update the hidden input field and trigger a change
-      // so that the jQuery knob plugin knows to update the dial
-      data.context.find('input').val(progress).change();
+      $.notify('<strong>Uploading image...</strong>', {
+      type: 'info',
+      allow_dismiss: true,
+      delay: 1000,
+      timer: 700,
+      placement: {
+      from: 'top',
+      align: 'center',
+    },
+  });
 
       if (progress == 100) {
         data.context.removeClass('working');
@@ -173,15 +159,13 @@ var initUploadPlugin = function () {
     done: function (e, data) {
 
       if (data.textStatus == 'success') {
-        console.log('I worked and uploaded successfully');
+
       }
 
       window.location.reload();
     },
 
     fail: function (e, data) {
-      // Something has gone wrong!
-      console.log('I failed to upload');
       data.context.addClass('error');
     },
   });
@@ -200,7 +184,6 @@ var facebook = {
   },
 
   share: function (img_src) {
-    console.log('http://' + location.host + img_src);
     FB.ui({
       method: 'feed',
       link: window.location.href,
@@ -231,13 +214,13 @@ function formatFileSize(bytes) {
 
 $(document).ready(function () {
   $('.single-image').click(function () {
-    var image_to_be_edited = $(this).find('img').attr('src');
-    var image_id = $(this).find('img').data('id');
-    $('#img-effect').find('img').attr('src', image_to_be_edited + '?' + new Date().getTime());
-    $('#img-effect').find('img').attr('data-id', image_id);
-    $('#savebtn').attr('href', image_to_be_edited);
+    var imageToBeEdited = $(this).find('img').attr('src');
+    var imageId = $(this).find('img').data('id');
+    $('#img-effect').find('img').attr('src', imageToBeEdited + '?' + new Date().getTime());
+    $('#img-effect').find('img').attr('data-id', imageId);
+    $('#savebtn').attr('href', imageToBeEdited);
 
-    applyEffects(image_id);
+    applyEffects(imageId);
 
   });