From ccd01233360d120ea9af9a2617a7d8b3ef613bc0 Mon Sep 17 00:00:00 2001 From: Fernando Brito Date: Wed, 4 Jun 2014 23:56:14 -0300 Subject: [PATCH] [Workflow] Bigger pictures on size step --- app/assets/javascripts/v_libras/requests/workflow.js | 2 +- app/assets/stylesheets/v_libras/requests.css.scss | 44 ++++++++++++++++++++------------------------ app/views/layouts/application.html.erb | 2 ++ app/views/v_libras/requests/_position_step.haml | 6 +++--- app/views/v_libras/requests/_service_step.haml | 2 +- app/views/v_libras/requests/_size_step.haml | 13 +++++++------ 6 files changed, 34 insertions(+), 35 deletions(-) diff --git a/app/assets/javascripts/v_libras/requests/workflow.js b/app/assets/javascripts/v_libras/requests/workflow.js index ea3c8a8..86436cc 100644 --- a/app/assets/javascripts/v_libras/requests/workflow.js +++ b/app/assets/javascripts/v_libras/requests/workflow.js @@ -58,7 +58,7 @@ var VLibrasLocalization = function() { image.attr('id', _options.buttons[index].id); image.data('value', _options.buttons[index].value); image.attr('data-value', _options.buttons[index].value); - image.css('position', 'relative'); + image.css('position', 'absolute'); image.css('top', _options.buttons[index].y); image.css('left', _options.buttons[index].x); diff --git a/app/assets/stylesheets/v_libras/requests.css.scss b/app/assets/stylesheets/v_libras/requests.css.scss index 4dcf3a2..a7aea9c 100644 --- a/app/assets/stylesheets/v_libras/requests.css.scss +++ b/app/assets/stylesheets/v_libras/requests.css.scss @@ -1,41 +1,37 @@ #vlibras-wizard { - .actions { - display: none; - } - - img { - border: 0; - } + #b1_size_big, #b2_size_big, #b1_size_med, #b2_size_med, #b1_size_small, #b2_size_small { + opacity: 0.4; - .wrapper { - margin: 0 auto; + &:hover { + opacity: 1; + } } - #b_size_4 { - z-index: 3; - opacity: 0.4; + #b1_size_big, #b2_size_big { + img { width: 350px; } + z-index: 1; } - #b_size_4:hover { - opacity: 1; + #b1_size_med, #b2_size_med { + img { width: 280px; } + z-index: 2; } - #b_size_5 { - z-index: 2; - opacity: 0.4; + #b1_size_small, #b2_size_small { + img { width: 220px; } + z-index: 3; } - #b_size_5:hover { - opacity: 1; + .actions { + display: none; } - #b_size_6 { - z-index: 1; - opacity: 0.4; + img { + border: 0; } - #b_size_6:hover { - opacity: 1; + .wrapper { + margin: 0 auto; } label { diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index bd78176..b423164 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -10,6 +10,8 @@ <%= yield :css %> <%= stylesheet_link_tag "application", :media => "all" %> + <%= yield :css_code %> + <%= csrf_meta_tags %> diff --git a/app/views/v_libras/requests/_position_step.haml b/app/views/v_libras/requests/_position_step.haml index 22f9656..ef53f7d 100644 --- a/app/views/v_libras/requests/_position_step.haml +++ b/app/views/v_libras/requests/_position_step.haml @@ -13,9 +13,9 @@ { id: 'b_loc_3', path: '/system/images/loc/p_3.png', clickable: false, start: 12, end: 12.5, x: 210, y: 40, delay: 300, value: null }, { id: 'b_loc_4', path: '/system/images/loc/p_4.png', clickable: false, start: 14, end: 14.5, x: 650, y: 80, delay: 300, value: null }, { id: 'b_loc_5', path: '/system/images/loc/p_4.png', clickable: true, start: 19.1, end: 9999, x: 30, y: 30, delay: 300, value: "superior-esquerdo" }, - { id: 'b_loc_6', path: '/system/images/loc/p_3.png', clickable: true, start: 19.1, end: 9999, x: 680, y: 30, delay: 300, value: "superior-direito" }, - { id: 'b_loc_7', path: '/system/images/loc/p_1.png', clickable: true, start: 19.1, end: 9999, x: 568, y: 410, delay: 300, value: "inferior-direito" }, - { id: 'b_loc_8', path: '/system/images/loc/p_2.png', clickable: true, start: 19.1, end: 9999, x: -310, y: 410, delay: 300, value: "inferior-esquerdo" } + { id: 'b_loc_6', path: '/system/images/loc/p_3.png', clickable: true, start: 19.1, end: 9999, x: 800, y: 30, delay: 300, value: "superior-direito" }, + { id: 'b_loc_7', path: '/system/images/loc/p_1.png', clickable: true, start: 19.1, end: 9999, x: 800, y: 410, delay: 300, value: "inferior-direito" }, + { id: 'b_loc_8', path: '/system/images/loc/p_2.png', clickable: true, start: 19.1, end: 9999, x: 30, y: 410, delay: 300, value: "inferior-esquerdo" } ] }; diff --git a/app/views/v_libras/requests/_service_step.haml b/app/views/v_libras/requests/_service_step.haml index 4d55bbc..dd63488 100644 --- a/app/views/v_libras/requests/_service_step.haml +++ b/app/views/v_libras/requests/_service_step.haml @@ -19,7 +19,7 @@ buttons: [ { id: 'b_aS_1', path: '/system/images/sub_audio/p_1.png', clickable: false, start: 20, end: 21, x: 700, y: 390, delay: 300, value: null }, { id: 'b_aS_2', path: '/system/images/sub_audio/p_2.png', clickable: false, start: 24.5, end: 25.5, x: 150, y: 410, delay: 300, value: null }, { id: 'btn-video-legenda', path: '/system/images/sub_audio/p_1.png', clickable: true, start: 26, end: 9999, x: 790, y: 410, delay: 300 }, - { id: 'btn-video', path: '/system/images/sub_audio/p_2.png', clickable: true, start: 26, end: 9999, x: -80, y: 410, delay: 300 } + { id: 'btn-video', path: '/system/images/sub_audio/p_2.png', clickable: true, start: 26, end: 9999, x: 35, y: 410, delay: 300 } ] }; diff --git a/app/views/v_libras/requests/_size_step.haml b/app/views/v_libras/requests/_size_step.haml index 581194d..fd2bdcb 100644 --- a/app/views/v_libras/requests/_size_step.haml +++ b/app/views/v_libras/requests/_size_step.haml @@ -3,17 +3,18 @@ = html5_video_tag(['/system/videos/workflow/tamanho.webm', '/system/videos/workflow/tamanho.mp4'], 'id-3', 'video-wizard') + - content_for :javascript_code do :javascript $(function () { var optionsSize = { video: { width: 940, height: 530 }, - buttons: [ { id: 'b_size_1', path: '/system/images/size/p_1.png', clickable: false, start: 6.8, end: 7.8, x: 770, y: 400, delay: 300, value: null }, - { id: 'b_size_2', path: '/system/images/size/p_2.png', clickable: false, start: 8.2, end: 9.2, x: 714, y: 355, delay: 300, value: null }, - { id: 'b_size_3', path: '/system/images/size/p_3.png', clickable: false, start: 9.7, end: 10.7, x: 658, y: 310, delay: 300, value: null}, - { id: 'b_size_4', path: '/system/images/size/p_1.png', clickable: true, start: 11.3, end: 9999, x: 780, y: 320, delay: 300, value: "pequeno" }, - { id: 'b_size_5', path: '/system/images/size/p_2.png', clickable: true, start: 11.3, end: 9999, x: 610, y: 320, delay: 300, value: "medio" }, - { id: 'b_size_6', path: '/system/images/size/p_3.png', clickable: true, start: 11.3, end: 9999, x: 384, y: 320, delay: 300, value: "grande" } + buttons: [ { id: 'b1_size_small', path: '/system/images/size/p_1.png', clickable: false, start: 6.8, end: 7.8, x: 770, y: 400, delay: 300, value: null }, + { id: 'b1_size_med', path: '/system/images/size/p_2.png', clickable: false, start: 8.2, end: 9.2, x: 714, y: 355, delay: 300, value: null }, + { id: 'b1_size_big', path: '/system/images/size/p_3.png', clickable: false, start: 9.7, end: 10.7, x: 658, y: 310, delay: 300, value: null}, + { id: 'b2_size_small', path: '/system/images/size/p_1.png', clickable: true, start: 11.3, end: 9999, x: 688, y: 338, delay: 300, value: "pequeno" }, + { id: 'b2_size_med', path: '/system/images/size/p_2.png', clickable: true, start: 11.3, end: 9999, x: 628, y: 292, delay: 300, value: "medio" }, + { id: 'b2_size_big', path: '/system/images/size/p_3.png', clickable: true, start: 11.3, end: 9999, x: 560, y: 240, delay: 300, value: "grande" } ] }; -- libgit2 0.21.2