magic_stylez 0.0.0.99 → 0.0.330

checksums.yaml

@@ -1,15 +1,15 @@
 ---
 !binary "U0hBMQ==":
   metadata.gz: !binary |-
-    MmI5NjlmMWU2MzAxYTYwOWU1YTQwZDUxNTM0ZDQ2NTRlNjI5ODkxZQ==
+    ZmJjNjhkNGU0MDZmZmM1NGQ0MTM1NmExNDYxNmQ3OWE0YTk1ZDNmOA==
   data.tar.gz: !binary |-
-    YjY5NTBiNGUxNjU1OWE3ZmM0MDU2MjEzYTI2NzBmNGM1MDQyMzc2Mg==
+    NzhjYWNkNWZhZGUyZTM1NzkyZDc2MjliZDU4MzEwMDNlNTYxZDIxYg==
 SHA512:
   metadata.gz: !binary |-
-    ZjYxYjgzYzMzMjRhZGMwZDU3ZWRmMDIzZDM5NWE5YWM1OWM1ZDhjNGQwZmM0
-    MzJmMGUzODMwMmY4NWMzZDIzZmZhNWNiM2I5OWUxMWMzNTk4YzNlM2IxOWMy
-    MTc2ZGM2MzJmYzFhNTNlYjRkNDNlYmNmZjczYTYwMjE1NWYzYWM=
+    ZDAzYjg5MTAxZDc4OTI5NDY2M2RjMmE3NjFkYzMwNGVmZDk4MWMxOTQxOWIw
+    N2UxY2VhMGNhZmZhNjMzNWNjYmI3MjcyY2RhYTg5NDExMDlmNzQ5ZjJhNGM0
+    YmM3MWY2NDU1MDU2N2E2ZjI0MjEwODJhZTg2NDBhYjI3ZWM2MWI=
   data.tar.gz: !binary |-
-    MjFmNTJhNzRlODY4OGI0ZjAyOWY5ZTEyMDFkOGNkZWRjYTJmMzEyMWUxMmEx
-    MGE2NjVlMmJlNjdiZTM4YTdjZTk2ZGEwMzk4NGY0ZDk5NDJhZTZjM2VkOThh
-    NTViYmFiNGNiNmZjODFjNzQwNzYxMzhjNDU4NTBkY2I4MTQxODg=
+    NGVmMzQ0YzZjNGVjMDFhZjEwOTk5MWRlODZjM2ZkZDI2MzgxNjY4NTBiNjgz
+    ZWUxY2YyZjMzNGEwYmJkY2ViOGQ4YjVjODY5NjI1MDRjMGFmNmFjODZiNzA0
+    Y2RhMzQ2YWY1NzIxNGNhNGMxODM4ZjdiNzA4ZmZjYmE0NGJjNDc=

data/Gemfile

@@ -1,4 +1,4 @@
-source "https://rubygems.org"
+source "http://rubygems.org"
 
 # Declare your gem's dependencies in magic_stylez.gemspec.
 # Bundler will treat runtime dependencies like base dependencies, and

data/lib/magic_stylez/version.rb

@@ -1,3 +1,3 @@
 module MagicStylez
-  VERSION = "0.0.0.99"
+  VERSION = "0.0.330"
 end

data/magic_stylez.gemspec

@@ -22,8 +22,7 @@ Gem::Specification.new do |s|
   s.add_dependency "rails",               ">= 3.1"
   s.add_dependency 'autoprefixer-rails',  '>= 1.1'
   s.add_dependency 'sass',                '>= 3.2'
-  ## since 3.2.x bootstrap-sass changed the asset structure, so first stay with 3.1.1.1
-  s.add_dependency 'bootstrap-sass',      '3.1.1.1'
+  s.add_dependency 'bootstrap-sass',      '>= 3.3.5.1', '< 3.4'
   s.add_dependency 'bourbon',             '>= 3.0.0'
   
    # Testing dependencies

data/test/dummy/app/assets/javascripts/app.js.coffee

@@ -1,4 +1,4 @@
-currentPath = ""
+currentPath = null
 
 loadCircles = ->
   if $('.circle-diagram').length > 1
@@ -10,54 +10,6 @@ loadCircles = ->
   else if $('.circle-diagram').length > 0
     window.circleDiagram = new CircleDiagram( circle: $('.circle-diagram') )
 
-build_paralax = (el) ->
-  console.log "build_paralax", el
-  ## Create the background image holder ##
-  el.prepend("<div class='px_bg_holder'></div>")
-  el.find(".px_bg_holder").css(
-    "background-image" : el.css("background-image")
-    "background-position" : "center center"
-    "background-repeat" : "no-repeat"
-    "background-size" : "cover"
-    "position" : "absolute"
-    "height" : $(window).height()
-    "width" : $(window).width()
-  )
-  ## We will remove the background at all ##
-  el.css("background","none")
-  el.css("overflow","hidden")
-  
-  $("body").scroll ->
-    console.log "Scrolling"
-    # bg_pos = $("#app_content").offset().top + el.offset().top;
-    console.log if el.hasClass("responsive-hero") then el.closest(".fullpage-table").position().top else el.position().top
-    bg_pos = ($("#app_content").offset().top + if el.hasClass("responsive-hero") then el.closest(".fullpage-table").position().top else el.position().top)
-    console.log "bg_pos #{ bg_pos }"
-    if bg_pos < $(window).height()
-      bg_pos = bg_pos - (bg_pos / 10)
-    
-    el.find(".px_bg_holder").css(
-      "top" : "#{ bg_pos * -1 }px"
-    )
-  $(window).resize ->
-    $(".px_bg_holder").css(
-      "height" : $(window).height()
-      "width" : $(window).width()
-    )
-
-
-load_paralax = ->
-  if $(".section.image.fixed").length > 0
-    $(".section.image.fixed").each ->
-      build_paralax( $(@) )
-
-  if $(".responsive-hero.fixed-bg").length > 0
-    $(".responsive-hero.fixed-bg").each ->
-      build_paralax( $(@) )
-
-
-
-
 
 
 navigate = ->
@@ -79,7 +31,6 @@ navigate = ->
   lnk.addClass("active")
   $("body").removeClass("aside-on")
   loadCircles()
-  load_paralax()
   $("#current-view-name").text( lnk.text() )
   currentPath = path
     
@@ -99,6 +50,16 @@ $ ->
     console.log "main_template SCROLL"
 
 
+  $("body").on "click", ".fakeClick", (e) ->
+    e.preventDefault()
+    $(@).blur()
+    # alert "Why do you click here?\n\nStop that!"
+    if $(@).attr("data-text") == "Go click me!"
+      $(@).attr("data-text", "You really clicked?!")
+    else
+      $(@).attr("data-text", "Go click me!")
+    false
+
 
   $("body").on "click", "#mobile_header", ->
     $("body").toggleClass("aside-on")

data/test/dummy/app/assets/javascripts/application.js

@@ -11,9 +11,9 @@
 // about supported directives.
 //
 //= require jquery
-//= require_tree ./views
 //= require magic-stylez
 //= require assets
+//= require_tree ./views
 //= require magic/render_eco
 //= require magic/wrapped_fields
 //= require magic/check_switch

data/test/dummy/app/assets/javascripts/assets.js.coffee.erb

@@ -8,6 +8,12 @@ appImages = <%= imgs.to_json %>
 
 # console.log "appImages", appImages
 
+
+
+@MagicStylezVersion = "<%= MagicStylez::VERSION %>"
+
+
+
 @assetPath = (path) ->
   # "/assets/angular/app/views/#{path}.html"
   appImages["#{path}"]

data/test/dummy/app/assets/javascripts/views/app/changelog.jst.eco

@@ -7,12 +7,59 @@
 
 <div class="section sctn-sm hard-bottom">
   <div class="corset tight">
-    <p class="loud">I try to this allways up to date .. but sometimes important changes may not be in here so allways do <code>$ rails g magic_stylez:update</code> when update.</p>
+    <p class="loud">I try to keep this allways up to date .. but sometimes important changes may not be in here so allways do <code>$ rails g magic_stylez:update</code> when update.</p>
     
   </div>
 </div>
 
-<br/>
+<div class="section sctn-xs hard-bottom">
+  <div class="corset tight">
+    <p class="loud no-press">Current-Version: <strong><%= MagicStylezVersion %></strong></p>
+    
+  </div>
+</div>
+
+
+<div class="section sctn-sm">
+  <div class="corset tight">
+    <h4><small>Version</small> 0.1.1</h4>
+    <p>
+      + fullpage-table => <code>header-cell</code>, <code>footer-cell</code> default without bg
+    </p>
+    <p>
+      + add timeline for <a href="#helper/dots">dots</a>
+    </p>
+  </div>
+</div>
+
+
+<div class="section sctn-sm">
+  <div class="corset tight">
+    <h4><small>Version</small> 0.1.0</h4>
+    <p>
+      + add a real Version number .. is in use for some time now, so should work :)
+    </p>
+    <p>
+      + removed some bourbon and scss warnings
+    </p>
+    <p>
+      + fixed some typos
+    </p>
+  </div>
+</div>
+
+
+<div class="section sctn-sm">
+  <div class="corset tight">
+    <h4><small>Version</small> 0.0.0.99</h4>
+    <p>
+      + add new <a href="#content/check_switch">check-switches and radios</a>
+    </p>
+    <p>
+      + add new <a href="#content/wrapped_fields">wrapped_fields</a> inspirered by braintree
+    </p>
+  </div>
+</div>
 
 <div class="section sctn-sm">
   <div class="corset tight">

data/test/dummy/app/assets/javascripts/views/app/start.jst.eco

@@ -2,7 +2,7 @@
   <div class="corset">
     <div class="row">
       <div class="col-sm-9 col-xs-6">
-        <h1>magic-stylez</h1>
+        <h1>magic-stylez <small><%= MagicStylezVersion %></small></h1>
       </div>
       <div class="col-sm-3 col-xs-6">
         <a href="https://github.com/berlinmagic/magic_stylez/tree/master" target="_blank" class="btn btn-sm btn-default btn-divided pull-right">
@@ -21,12 +21,16 @@
   </div>
 </div>
 
-<div class="section hard-top">
-  <div class="corset center_text">
-    <h2>Warning</h2>
-    <p class="loud">This Gem is still work in process!</p>
-    <p class="loud">Its just the start to outsource my style framework (I mostly rebuild for every app).</p>
-    <p class="loud">It is mostly driven by my own habits, so I don't know if its usefull for others.</p>
+<div class="section hard-top bright sctn-sm">
+  <div class="corset full center_text">
+    <h4 class="no-press-top">Warning</h4>
+    <p class="gray-clr thin">This Gem is still work in process!</p>
+    <p class="gray-clr thin">(But it is already used in some production apps).</p>
+    <p class="gray-clr thin">It is mostly driven by my own habits, so I don't know if its usefull for others.</p>
+    <hr/>
+    <h4>Info</h4>
+    <p class="gray-clr thin">ATM I´m working on a complete rewrite of this styleset, to be compatible to BootStrap 4.x!</p>
+    <p class="gray-clr thin">But this will not be compatible to magic_styles .. a lot of stuff gets removed and all sizing is handled via <code>em</code> and <code>rem</code>.</p>
   </div>
 </div>
 
@@ -80,7 +84,7 @@ CSS:
     <br/>
     <hr class="half" />
     <br/>
-    <p class="louder">Please allways look in the new <a href="#app/changelog" data-target="app/changelog">Changelog</a> for recent chnages.</p>
+    <p class="louder">Please allways look in the <a href="#app/changelog" data-target="app/changelog">Changelog</a> for recent chnages.</p>
     
     
   </div>
@@ -138,6 +142,6 @@ CSS:
 
 <div class="section shine-top flatted">
   <div class="corset">
-    <p class="center_text">© 2014 Torsten Wetzel (berlinmagic UG)</p>
+    <p class="center_text">© 2017 Torsten Wetzel (berlinmagic UG)</p>
   </div>
 </div>

data/test/dummy/app/assets/javascripts/views/helper/dots.jst.eco

@@ -65,7 +65,7 @@
     
     <div class="row">
       <% for x, i in ["xs", "sm", "", "lg", "xl", "xxl"]: %>
-        <div class="col-xs-4 col-sm-3 col-md-2">
+        <div class="col-xs-6 col-sm-3 col-md-2">
           <div class="number_dot dot-brand<%= if x != "" then " dot-#{x}" else "" %>"><%= i + 1 %></div>
           <div class="clearfix"></div>
           <p><%= if x != "" then ".dot-#{x}" else "" %></p>
@@ -79,7 +79,7 @@
     
     <div class="row">
       <% for x, i in ["default", "success", "info", "warning", "danger", "brand", "one", "two", "three", "facebook", "google", "twitter", "paypal"]: %>
-        <div class="col-sm-2">
+        <div class="col-md-2 col-sm-4 col-xs-6">
           <div class="number_dot dot-lg dot-<%= x %>"><%= i + 1 %></div>
           <div class="clearfix"></div>
           <p>.dot-<%= x %></p>
@@ -89,7 +89,7 @@
       <hr/>
       <p class="loud">plus <code>.dot-blank</code></p>
       <% for x, i in ["default", "success", "info", "warning", "danger", "brand", "one", "two", "three", "facebook", "google", "twitter", "paypal"]: %>
-        <div class="col-sm-2">
+        <div class="col-md-2 col-sm-4 col-xs-6">
           <div class="number_dot dot-lg dot-<%= x %> dot-blank"><%= i + 1 %></div>
           <div class="clearfix"></div>
           <p>.dot-<%= x %></p>
@@ -99,7 +99,7 @@
       <hr/>
       <p class="loud">plus <code>.dot-blank-soft</code></p>
       <% for x, i in ["default", "success", "info", "warning", "danger", "brand", "one", "two", "three", "facebook", "google", "twitter", "paypal"]: %>
-        <div class="col-sm-2">
+        <div class="col-md-2 col-sm-4 col-xs-6">
           <div class="number_dot dot-lg dot-<%= x %> dot-blank-soft"><%= i + 1 %></div>
           <div class="clearfix"></div>
           <p>.dot-<%= x %></p>
@@ -112,4 +112,21 @@
   </div>
 </div>
 
+<div class="section hard-top">
+  <div class="corset">
+    
+    <h3>Time-Lines</h3>
+    
+    <div class="numbered_time_line">
+      <% for x in [1..7]: %>
+        <div class="numbered_line">
+          <div class="number_dot"><%= x %></div>
+          <p>Fact Number #<%= x %></p>
+        </div>
+      <% end %>
+    </div>
+    
+  </div>
+</div>
+
 

data/test/dummy/app/assets/javascripts/views/layout/fullpage_table.jst.eco

@@ -1,32 +1,34 @@
-<div class="fullpage-table" id="banner-one">
+<div class="fullpage-table" id="banner-berlin">
   <div class="table-row">
-    <div class="banner-box responsive-hero with-footer with-header fill berlin">
-      <div class="banner-header">
-        <div class="corset">
-          <h1 class="loud">Fullpage Table</h1>
-        </div>
+    <div class="cell table-cell header-cell">
+      
+      <div class="corset center_text">
+        <p class="highlight no-press">Header</p>
       </div>
       
-      <div class="banner-content">
-        <div class="corset">
-          <p class="loud">This is a fullpage-table, it allways uses fullpage-height<br/>(if content fits in).</p>
-          <div class="well">
-            surounding element (i.e. body) needs the following <em>css</em>:
-            <br/>
-            <code>width: 100%; height: 100%;</code>
-          </div>
-        </div>
+    </div>
+  </div>
+  <div class="table-row">
+    <div class="cell table-cell content-cell fill">
+      
+      <div class="corset responsive-hero center_text">
+        <h1 class="loud white-clr upcase">FullPage Table</h1>
+        <p class="loud white-clr">
+          FullPage-Tables always use full page size!
+        </p>
       </div>
       
-      <div class="banner-footer" id="sign_up_banner">
-        <div class="corset">
-          <div class="row">
-            <div class="col-sm-4 col-sm-offset-4">
-              <!--<a href="#" class="btn btn-success btn-block btn-lg">Sign up now</a>-->
-              <button class="btn btn-success btn-block help_arrow" data-text="Go click me!">
-                Click Me
-              </button>
-            </div>
+    </div>
+  </div>
+  <div class="table-row">
+    <div class="cell table-cell footer-cell">
+      
+      <div class="corset center_text">
+        <div class="row">
+          <div class="col-sm-4 col-sm-offset-4">
+            <button class="btn btn-success btn-block help_arrow fakeClick" data-text="Go click me!">
+              Click Me
+            </button>
           </div>
         </div>
       </div>
@@ -34,6 +36,9 @@
     </div>
   </div>
 </div>
+<div class="clearfix"></div>
+
+
 
 
 <div class="section shine-top">
@@ -41,45 +46,102 @@
     <h2>Usage</h2>
     <pre>
     <code>
-&lt;div class=&quot;fullpage-table&quot; id=&quot;front-banner&quot;&gt;
-  &lt;div class=&quot;table-row&quot;&gt;<br/>    &lt;div class=&quot;banner-box responsive-hero with-footer with-header fill wood&quot;&gt;<br/>      &lt;div class=&quot;banner-header&quot;&gt;<br/>        &lt;div class=&quot;corset&quot;&gt;<br/>          &lt;h1 class=&quot;loud&quot;&gt;Fullpage Table&lt;/h1&gt;<br/>        &lt;/div&gt;<br/>      &lt;/div&gt;<br/>      <br/>      &lt;div class=&quot;banner-content&quot;&gt;<br/>        &lt;div class=&quot;corset&quot;&gt;<br/>          &lt;p class=&quot;loud&quot;&gt;This is a fullpage-table, it allways uses fullpage-height (if content fits in).&lt;/p&gt;<br/>        &lt;/div&gt;<br/>      &lt;/div&gt;<br/>      <br/>      &lt;div class=&quot;banner-footer&quot; id=&quot;sign_up_banner&quot;&gt;<br/>        &lt;div class=&quot;corset&quot;&gt;<br/>          &lt;div class=&quot;row&quot;&gt;<br/>            &lt;div class=&quot;col-sm-4 col-sm-offset-4&quot;&gt;<br/>              &lt;a href=&quot;#&quot; class=&quot;btn btn-success btn-block btn-lg&quot;&gt;Sign up now&lt;/a&gt;<br/>            &lt;/div&gt;<br/>          &lt;/div&gt;<br/>        &lt;/div&gt;<br/>      &lt;/div&gt;<br/>      <br/>    &lt;/div&gt;<br/>  &lt;/div&gt;<br/>&lt;/div&gt;
+&lt;div class=&quot;fullpage-table&quot; id=&quot;banner-one&quot;&gt;<br/>  &lt;div class=&quot;table-row&quot;&gt;<br/>    &lt;div class=&quot;header-cell bright&quot;&gt;<br/>      &lt;div class=&quot;corset center_text&quot;&gt;<br/>        &lt;h1 class=&quot;loud&quot;&gt;Fullpage Table&lt;/h1&gt;<br/>      &lt;/div&gt;<br/>    &lt;/div&gt;<br/>  &lt;/div&gt;<br/>  &lt;div class=&quot;table-row&quot;&gt;<br/>    &lt;div class=&quot;content-cell fill&quot;&gt;<br/>      &lt;div class=&quot;corset responsive-hero center_text&quot;&gt;<br/>        <br/>        &lt;p class=&quot;loud &quot;&gt;This is a fullpage-table, it allways uses fullpage-height&lt;br/&gt;(if content fits in).&lt;/p&gt;<br/>        &lt;div class=&quot;well&quot;&gt;<br/>          surounding element (i.e. body) needs the following &lt;em&gt;css&lt;/em&gt;:<br/>          &lt;br/&gt;<br/>          &lt;code&gt;width: 100%; height: 100%;&lt;/code&gt;<br/>        &lt;/div&gt;<br/>        <br/>      &lt;/div&gt;<br/>    &lt;/div&gt;<br/>  &lt;/div&gt;<br/>  &lt;div class=&quot;table-row&quot;&gt;<br/>    &lt;div class=&quot;footer-cell bright&quot;&gt;<br/>      &lt;div class=&quot;corset center_text&quot;&gt;<br/>        <br/>        &lt;div class=&quot;row&quot;&gt;<br/>          &lt;div class=&quot;col-sm-4 col-sm-offset-4&quot;&gt;<br/>            &lt;!--&lt;a href=&quot;#&quot; class=&quot;btn btn-success btn-block btn-lg&quot;&gt;Sign up now&lt;/a&gt;--&gt;<br/>            &lt;button class=&quot;btn btn-success btn-block help_arrow fakeClick&quot; data-text=&quot;Go click me!&quot;&gt;<br/>              Click Me<br/>            &lt;/button&gt;<br/>          &lt;/div&gt;<br/>        &lt;/div&gt;<br/>        <br/>      &lt;/div&gt;<br/>    &lt;/div&gt;<br/>  &lt;/div&gt;<br/>&lt;/div&gt;<br/>
     </code>
     </pre>
   </div>
 </div>
 
-<div class="fullpage-table" id="banner-two">
+<div class="fullpage-table" id="banner-one">
+  
   <div class="table-row">
-    <div class="banner-box responsive-hero with-footer with-header fill berlin fixed-bg">
-      <div class="banner-header">
-        <div class="corset">
-          <h1 class="loud">Fullpage Table <small>with fixed Background</small></h1>
-        </div>
+    <div class="header-cell bright">
+      <div class="corset center_text">
+        <h1 class="loud">Fullpage Table</h1>
       </div>
-      
-      <div class="banner-content">
-        <div class="corset">
-          <p class="loud">This is a fullpage-table, it allways uses fullpage-height<br/>(if content fits in).</p>
+    </div>
+  </div>
+  <div class="table-row">
+    <div class="content-cell fill">
+      <div class="corset responsive-hero center_text">
+        
+        <p class="loud ">This is a fullpage-table, it allways uses fullpage-height<br/>(if content fits in).</p>
+        <div class="well">
+          surounding element (i.e. body) needs the following <em>css</em>:
           <br/>
-          <div class="well">
-            <strong>!!!</strong> fixed background doesn't work on chrome browser (Version 35.x - 39.x) <strong>!!!</strong>
-          </div>
+          <code>width: 100%; height: 100%;</code>
         </div>
+        
       </div>
-      
-      <div class="banner-footer" id="sign_up_banner">
-        <div class="corset">
-          <div class="row">
-            <div class="col-sm-4 col-sm-offset-4">
-              <!--<a href="#" class="btn btn-success btn-block btn-lg">Sign up now</a>-->
-              <button class="btn btn-success btn-block help_arrow" data-text="Go click me!">
-                Click Me
-              </button>
-            </div>
+    </div>
+  </div>
+  <div class="table-row">
+    <div class="footer-cell bright">
+      <div class="corset center_text">
+        
+        <div class="row">
+          <div class="col-sm-4 col-sm-offset-4">
+            <!--<a href="#" class="btn btn-success btn-block btn-lg">Sign up now</a>-->
+            <button class="btn btn-success btn-block help_arrow fakeClick" data-text="Go click me!">
+              Click Me
+            </button>
           </div>
         </div>
+        
       </div>
-      
     </div>
   </div>
-</div>
+</div>
+
+
+<div class="section">
+  <div class="corset">
+    <h2>Sizes:</h2>
+    
+    <p>For <code>.header-cell</code>, <code>.content-cell</code> and <code>.footer-cell</code> within the <code>fullpage-table</code>.
+    <table class="table">
+      <thead>
+        <tr>
+          <th>Class</th>
+          <th>Padding-Top</th>
+          <th>Padding-Bottom</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th> </th>
+          <td>20px</td>
+          <td>20px</td>
+        </tr>
+        <tr>
+          <th>.xs<br/>.flat</th>
+          <td>0</td>
+          <td>0</td>
+        </tr>
+        <tr>
+          <th>.sm</th>
+          <td>10px</td>
+          <td>10px</td>
+        </tr>
+        <tr>
+          <th>.lg</th>
+          <td>30px</td>
+          <td>30px</td>
+        </tr>
+        <tr>
+          <th>.xl</th>
+          <td>40px</td>
+          <td>40px</td>
+        </tr>
+        <tr>
+          <th>.dark</th>
+          <td colspan="2">Dark Background (<code>$fullpageDarkBG</code>)</td>
+        </tr>
+        <tr>
+          <th>.bright</th>
+          <td colspan="2">Bright Background (<code>$fullpageBrightBG</code>)</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>