c80_wslider 0.1.0 → 0.1.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 5a881c9ec524f5eb3125b5e3a647007f0aa43a71
-  data.tar.gz: 02f8989b104fbee6191bc22a8fb9609711134158
+  metadata.gz: 0827da7f99387682ddf69ea2bd98360ec71feaba
+  data.tar.gz: 4286ba6bd3dc4437d8527172608e42eed444d198
 SHA512:
-  metadata.gz: f2dedb120cffe763fddfb410bf75db465da7bc71502015e875f14ae8323825a2209a66920ae8a4c6b72d312bb0ba91103d98d507afecb365d8a97c2d8ff127f8
-  data.tar.gz: 0c488676d45c24a46a9b71c8f7614b5fcc4f9ebac30b5e707ffe6abb480c026c068ec53f6bc40f182524dabc650b533f72fdeeaac8f948d0736e1fddf91e9ff4
+  metadata.gz: 3a181caa4b5f3745b105ddb2e182783c0e1eff7d7999e52787beee43803f8be848d1d2ddc788e0eb17f10c2d55abe48c0d08e70ec18e0fcb477d3c355972874e
+  data.tar.gz: 83bb0c1cb4ae973ffee060b2f207638b7b6259e0fa41e9576f1422cf1aba73f0693381d9ff92dab09d02c0f6357b9cf0033846c9732f782a731ae80d7f2dd95c

data/app/assets/javascripts/components/pbuttons.js

@@ -23,7 +23,7 @@ var PButtons = function ($div_pbuttons, slider_height, fOnClick) {
         _slider_height = slider_height;
 
         // разместим _div_buttons по центру по вертикали
-        var top = (_slider_height - _div_buttons.height()) / 2;
+        var top = (_slider_height - _div_buttons.outerHeight()) / 2;
         $div_pbuttons.css('top', top + 'px');
 
         // зафиксируем кнопки

data/app/assets/javascripts/components/wloader/preloader.js

@@ -26,7 +26,7 @@ var Preloader = function ($slider_wrapper, slider_height) {
         _$preloader.css('height', _slider_height+'px');
 
         // корректируем положение по вертикали блока spinner
-        var t = (_slider_height - _$spinner.height())/2;
+        var t = (_slider_height - _$spinner.outerHeight())/2;
         _$spinner.css('top', t);
 
     };

data/app/assets/javascripts/components/wloader/shower.js

@@ -1,3 +1,4 @@
+// механику показа картинки фрейма содержит этот вспомогательный класс
 
 // slider_height передаётся для того, чтобы можно было позиционировать текстовый блок по вертикали
 var Shower = function ($wimages, slider_height) {
@@ -29,14 +30,40 @@ var Shower = function ($wimages, slider_height) {
         var $h4 = $div_text.find('h4');
         var $p = $div_text.find('p');
 
+        // рассчитаем кое-какие размеры
+        var div_text_height = $div_text.outerHeight();
+        var div_text_width = $div_text.outerWidth();
+
         // подставляем туда текст из props
         $h4.text(props['h4']);
         $p.text(props['p']);
 
-        // позиционируем блок с текстом по вертикали по центру
-        var top = (_slider_height - $div_text.height()) / 2;
+        // позиционируем $div_text блок с текстом по вертикали по центру относительно высоты родителя _slider_height
+        var top = (_slider_height - div_text_height) / 2;
         $div_text.css('top', top + 'px');
 
+        // ---- позиционируем прямоугольники
+
+        // выбираем логическую середину (допустим сдвиг вверх\вниз на десяток-другой процентов от div_text_height)
+        var div_text_middle = div_text_height/2 - div_text_height * .1;
+
+        // заголовок фрейма находится в верхней половине фрейма
+        var $h4_wrapper = $h4.parent();
+        $h4_wrapper.css('bottom', div_text_middle);
+
+        // заголовок фрейма чуть меньше ширины $div_text блока
+        var h4_wrapper_width = div_text_width * 0.6;
+        $h4_wrapper.css('width', h4_wrapper_width + 'px');
+
+        // заголовок фрейма центрируем относительно $div_text
+        var h4_wrapper_left = (div_text_width - h4_wrapper_width)/2;
+        $h4_wrapper.css('left', h4_wrapper_left + 'px');
+
+        // мелкую надпись размещаем в нижней половине прямоугольника
+        $p.css('margin-top', (div_text_height - div_text_middle) + 15 + 'px');
+
+        // ---- end позиционируем прямоугольники
+
         // плавно проявляем фрейм
         $div.addClass('eased').css('opacity','1');
 

data/app/assets/stylesheets/c80_wslider/wslider.scss

@@ -37,6 +37,8 @@ div.wslider_wrapper {
         position: relative;
 
         div.h4_wrapper {
+          position: absolute;
+          /*background-color: rgba(0,0,0,0.5);*/
 
           &::after {
             background-color: #ffffff;
@@ -57,6 +59,15 @@ div.wslider_wrapper {
           margin-top: 30px;
         }
 
+        .text_border {
+          position: absolute;
+          top: 20px;
+          right: 20px;
+          bottom: 20px;
+          left: 20px;
+          border: 4px solid rgba(255,255,255,0.4);
+        }
+
       }
 
     }
@@ -85,6 +96,8 @@ div.wslider_wrapper {
           font-size: 40px;
           line-height: 100px;
 
+          text-shadow: 1px 1px 1px rgba(0,0,0,1);
+
           -webkit-transition: color .4s ease-out;
           -moz-transition: color .4s ease-out;
           -ms-transition: color .4s ease-out;

data/app/views/c80_wslider/_wslider_wrapper.html.erb

@@ -12,6 +12,7 @@
       <div class="frame_text">
         <div class="h4_wrapper"><h4></h4></div>
         <p></p>
+        <div class="text_border"></div>
       </div>
     </div>
   </div>
@@ -21,6 +22,7 @@
       <div class="frame_text">
         <div class="h4_wrapper"><h4></h4></div>
         <p></p>
+        <div class="text_border"></div>
       </div>
     </div>
   </div>

data/lib/c80_wslider/version.rb

@@ -1,3 +1,3 @@
 module C80Wslider
-  VERSION = "0.1.0"
+  VERSION = "0.1.0.1"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: c80_wslider
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.0.1
 platform: ruby
 authors:
 - C80609A
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2016-08-30 00:00:00.000000000 Z
+date: 2016-09-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler