Merge pull request #12 from digitaltom/review_180701_responsive_desig…

…n_of_take_picture_button placement + design of take picture button
digitaltom · Jul 1, 2018 · 8afbc71 · 8afbc71
2 parents 04f3024 + 92696c3
commit 8afbc71
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 9 deletions.
diff --git a/app/assets/stylesheets/photobooth.css b/app/assets/stylesheets/photobooth.css
@@ -25,13 +25,16 @@ body {
 
 .shoot_button {
     width: 430px;
-    max-width: 100%;
-    margin: 10px 20px 10px 20px;
+    max-width: 90%;
+    margin: 5px 10px;
+}
+
+.shoot_text {
+    font-size: 1.3em;
 }
 
 .shoot_img {
-    height: 200px;
-    margin: 0px 70px 0px 70px;
+    max-width: 65%;
 }
 
 .shoot_img_btn {
@@ -41,7 +44,7 @@ body {
 
 .gallery-img {
     width: 470px;
-    max-width: 100%;
+    max-width: 95%;
 }
 
 .fullscreen {
@@ -59,8 +62,11 @@ body {
     right: 0;
     bottom: 0;
     margin: auto;
-    min-width: 40%;
-    min-height: 40%;
+    max-width: 95%;
+}
+
+.shoot_button:hover {
+  background-color: #fff;
 }
 
 #button-start {

diff --git a/app/assets/templates/picture_sets.html.haml b/app/assets/templates/picture_sets.html.haml
@@ -2,8 +2,8 @@
 
   %button.btn.btn-default.shoot_button{type: 'button', 'ng-click' => 'takePicture()', 'ng-hide' => 'rw'  }
     %span
-      = image_tag 'take_picture.png', {:class => 'shoot_img'}
-    %h2
+      = image_tag 'take_picture_animation.gif', {:class => 'shoot_img'}
+    .shoot_text
       Click here to take a picture
 
   %span{ 'ng-repeat' => 'picture_set in picture_sets'}

diff --git a/public/images/take_picture_animation.gif b/public/images/take_picture_animation.gif
diff --git a/public/images/take_picture_animation.xcf b/public/images/take_picture_animation.xcf
diff --git a/public/images/take_picture_animation_1.png b/public/images/take_picture_animation_1.png
diff --git a/public/images/take_picture_animation_2.png b/public/images/take_picture_animation_2.png
diff --git a/public/images/take_picture_animation_3.png b/public/images/take_picture_animation_3.png
diff --git a/public/images/take_picture_animation_4.png b/public/images/take_picture_animation_4.png