magic_stylez 0.0.0.13 → 0.0.0.19

data/test/dummy/app/assets/javascripts/views/templates/fixed_header.jst.eco

@@ -0,0 +1,5 @@
+<iframe src="<%= "#{rootPath()}fixed-header" %>" name="SELFHTML_in_a_box" id="mainFrame">
+  <p>Sorry, your Browser doesn't like Frames.
+  But we would need an iframe to show the template stuff
+  <a href="../../../index.htm">SELFHTML</a></p>
+</iframe>

data/test/dummy/app/assets/javascripts/views/templates/responsive_slidebar.jst.eco

@@ -0,0 +1,5 @@
+<iframe src="<%= "#{rootPath()}responsive-slidebar" %>" name="SELFHTML_in_a_box" id="mainFrame">
+  <p>Sorry, your Browser doesn't like Frames.
+  But we would need an iframe to show the template stuff
+  <a href="../../../index.htm">SELFHTML</a></p>
+</iframe>

data/test/dummy/app/assets/stylesheets/application.css.scss

@@ -5,7 +5,14 @@ html, body {
 	margin: 0; padding: 0;
 	background: #f3f2f2;
 }
-body { position: relative; padding: 0 0 0 220px;}
+body {
+	position: relative;
+	padding: 0 0 0 220px;
+	&.blank {
+		margin: 0; padding: 0;
+		background: #fff;
+	}
+}
 
 #app_content {
 	display: block; position: relative;
@@ -22,6 +29,62 @@ body { position: relative; padding: 0 0 0 220px;}
 	
 }
 
+.check_switch {
+	display: block; position: relative; margin: 0; padding: 0;
+	margin: 7px 0 0 7px;
+	@include border-radius(100px);
+	width: 30px;
+	height: 15px;
+	border: solid 1px #ccc;
+	background: #c5c5c5;
+	@include box-shadow( inset 0 1px 1px 0 rgba(0,0,0,.50) );
+	.switch_toggle {
+		display: block; position: relative; margin: 0; padding: 0;
+		width: 17px; height: 17px;
+		position: absolute;
+		left: -2px; top: -2px;
+		background: #fff;
+		@include border-radius(100px);
+		border: solid 1px #ccc;
+		@include box-shadow( 0 1px 1px 0 rgba(0,0,0,.30) );
+		@include linear-gradient(#ffffff, #e5e5e5);
+	}
+}
+
+
+.check {
+	display: block; position: relative;
+	width: 30px;
+	height: 28px;
+	margin: -2px 2px;
+	border: none;
+	float: left;
+	text-align: center;
+	// clickable and disabled checkbox
+	.checka {
+	  display: block;
+		position: absolute;
+		top: 9px; right: 10px; bottom: 9px; left: 9px;
+		border: solid 1px #ccc;
+		color: #ccc;
+		i {
+		  display: none;
+		  margin: -3px -4px -3px 0;
+		  font-size: 15px;
+			text-decoration: none;
+			line-height: 22px;
+		}
+		&.checked i { display: block; }
+	}
+	// clickable checkbox
+	a.checka {
+	  color: #aaa;
+	  border: solid 1px #999;
+	}
+}
+
+
+
 
 .banner-box.responsive-hero {
 	// .banner-head, .banner-footer {
@@ -40,9 +103,11 @@ body { position: relative; padding: 0 0 0 220px;}
 	z-index: 99;
 	// box-shadow: inset -2px 0 3px 0 #000;
 	border-right: solid 1px #ccc;
+	overflow-y: scroll;
+	.btn { width: 90%; margin: 0 auto; }
 }
 
-ul {
+ul.list {
 	display: block; position: relative;
 	list-style: none;
 	margin: 0; padding: 10px;
@@ -58,35 +123,7 @@ ul {
 
 
 
-.help_arrow {
-	// display: block;
-	position: relative;
-	z-index: 7;
-	&:before, &:after {
-		font-family: 'Gloria Hallelujah', cursive;
-		font-weight: 400;
-	}
-	&:before {
-		display: block; position: absolute; content: "";
-		padding: 0;
-		width: 50px; height: 50px;
-		bottom: 100%; left: 50%;
-		margin: 0 0 10px -25px;
-		background: transparent image-url("magic/arrows/arrow2-2.png") center center no-repeat;
-		background-size: contain;
-		@include rotation(-53);
-	}
-	&:after {
-		display: block; position: absolute; content: attr(data-intro);
-		padding: 0;
-		height: 30px; line-height: 30px;
-		bottom: 100%; left: 50%;
-		margin: 0 0 37px 30px;
-		color: #a0c775;
-		font-size: 28px; font-weight: 300;
-		text-shadow: 0 1px 1px #000;
-	}
-}
+
 
 
 
@@ -213,3 +250,15 @@ ul {
 	}
 }
 
+
+
+#mainFrame {
+	display: block; position: relative;
+	margin: 0; padding: 0;
+	width: 100%; height: 100%;
+	border: none;
+}
+
+.main_content.fixed-nav {
+	padding: 50px 0 0;
+}

data/test/dummy/app/controllers/front_controller.rb

@@ -1,7 +1,18 @@
 class FrontController < ApplicationController
   
+  TEMPLATES = %w(responsive-slidebar fixed-header)
+  
   def start
     Rails.logger.info "Front - Start"
   end
   
+  def templates
+    Rails.logger.info "Front - templates"
+    if params[:template] && TEMPLATES.include?(params[:template].to_s)
+      render "templates/#{params[:template]}", layout: "blank"
+    else
+      render "templates/responsive-slidebar", layout: "blank"
+    end
+  end
+  
 end

data/test/dummy/app/views/front/_aside.html.erb

@@ -1,37 +1,36 @@
 <div id="aside">
   <div class="aside-content">
-    
-    
     <ul class="nav_list dark">
       <li class="current active"><%= link_to "Magic-Stylez", "#", class: "app_lnk lst_lnk", data: {target: ""} %></li>
-      
-      <li><%= link_to "Layout", "#", class: "lst_lnk" %>
-        <ul class="sub_nav">
-          <li><%= link_to "Section", "#", class: "app_lnk lst_lnk", data: {target: "layout/section"} %></li>
-          <li><%= link_to "Corset", "#", class: "app_lnk lst_lnk", data: {target: "layout/corset"} %></li>
-          <li><%= link_to "Fullpage Table", "#", class: "app_lnk lst_lnk", data: {target: "layout/fullpage_table"} %></li>
-        </ul>
-      </li>
-      
-      <li><%= link_to "Elements", "#", class: "lst_lnk" %>
-        <ul class="sub_nav">
-          <li><%= link_to "Arrow Infos", "#", class: "app_lnk lst_lnk", data: {target: "elements/arrow_infos"} %></li>
-          <li><%= link_to "Icons", "#", class: "app_lnk lst_lnk", data: {target: "elements/icons"} %></li>
-        </ul>
-      </li>
-      
-      
-      <li><%= link_to "Effects", "#", class: "lst_lnk" %>
-        <ul class="sub_nav">
-          <li><%= link_to "Reflections", "#", class: "app_lnk lst_lnk", data: {target: "effects/reflections"} %></li>
-          <li><%= link_to "Shadows", "#", class: "app_lnk lst_lnk", data: {target: "effects/shadows"} %></li>
-        </ul>
-      </li>
-      <% if 3 == 4 %>
-      <li><%= link_to "Layout", "#", class: "lst_lnk" %></li>
+      <% pathes = {} %>
+      <% Dir.glob("#{Rails.root}/app/assets/javascripts/views/**/*").each do |ff| %>
+        <% path = ff.gsub("#{Rails.root}/app/assets/javascripts/views/", "") %>
+        <% if path.match(/\.jst.eco$/) %>
+          <% path = path.gsub(".jst.eco", "") %>
+          <% ar = path.split("/") %>
+          <% pathes[ar[0]] ||= {} %>
+          <% pathes[ ar[0] ][ ar[1] ] = path %>
+        <% end %>
+      <% end %>
+      <% pathes.each do |main, sub| %>
+        <% unless main == "app" %>
+          <li><%= link_to main.titleize, "#", class: "lst_lnk" %>
+            <ul class="sub_nav">
+              <% sub.each do |lnk, path| %>
+                <li><%= link_to lnk.titleize, "#", class: "app_lnk lst_lnk", data: {target: path} %></li>
+              <% end %>
+            </ul>
+          </li>
+        <% end %>
       <% end %>
     </ul>
+    <br/>
     
-    
+    <a href="https://github.com/berlinmagic/magic_stylez/tree/master" target="_blank" class="btn btn-default btn-divided">
+      <span class="icn"><i class="icomoon-github3"></i></span>
+      <span>SourceCode</span>
+    </a>
+    <div class="clearfix"></div>
+    <br/>
   </div>
 </div>

data/test/dummy/app/views/front/start.html.erb

@@ -1,6 +1,16 @@
 <div class="section head">
   <div class="corset">
-    <h1>magic-stylez</h1>
+    <div class="row">
+      <div class="col-sm-9">
+        <h1>magic-stylez</h1>
+      </div>
+      <div class="col-sm-3">
+        <a href="https://github.com/berlinmagic/magic_stylez/tree/master" target="_blank" class="btn btn-sm btn-default btn-divided pull-right">
+          <span class="icn"><i class="icomoon-github3"></i></span>
+          <span>SourceCode</span>
+        </a>
+      </div>
+    </div>
   </div>
 </div>
 
@@ -23,7 +33,7 @@
 <div class="section compact hard-top">
   <div class="corset">
     <h3>Dependencies</h3>
-    <ul>
+    <ul class="list">
       <li><%= link_to "bootstrap-sass", "https://github.com/twbs/bootstrap-sass", target: "_blank" %></li>
       <li><%= link_to "bourbon", "http://bourbon.io/", target: "_blank" %></li>
     </ul>
@@ -45,7 +55,7 @@
 <div class="section compact">
   <div class="corset">
     <h3>Authors</h3>
-    <ul>
+    <ul class="list">
       <li><%= link_to "Torsten Wetzel", "http://twetzel.github.io/", target: "_blank" %></li>
       <li>many others ...</li>
     </ul>

data/test/dummy/app/views/front/templates.html.erb

@@ -0,0 +1,85 @@
+<div id="fixed_nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
+  <div class="corset">
+    
+  
+  
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#front-main-nav-colapse">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+      <%= link_to "Magic-Stylez", "#", class: "navbar-brand" %>
+    </div>
+    <div class="collapse navbar-collapse" id="front-main-nav-colapse">
+      <ul class="nav navbar-nav navbar-left">
+        <li><%= link_to "Jobs", "#" %></li>
+        <li><%= link_to "Jobs", "#" %></li>
+        <li><%= link_to "Jobs", "#", class: "btn btn-success" %></li>
+      </ul>
+      <ul class="nav navbar-nav navbar-right">
+        <li class="dropdown">
+            <%= link_to "#", class: "dropdown-toggle", data: {toggle: "dropdown"} do %>
+              Hallo <b class="caret"></b>
+            <% end %>
+            <ul class="dropdown-menu">
+                <li><%= link_to "Link 1", "#" %></li>
+                <li><%= link_to "Link 2", "#" %></li>
+                <li><%= link_to "Link 3", "#" %></li>
+            </ul>
+        </li>
+      </ul>
+    </div>
+    
+  </div>
+</div>
+
+<div class="main_content fixed-nav">
+  
+  
+  <div class="section brand">
+    <div class="corset">
+      <h1>hey!</h1>
+      <br/>
+      <div class="clearfix"></div>
+      <div class="check_switch">
+				<div class="switch_toggle"></div>
+			</div>
+			<div class="clearfix"></div>
+			<br/>
+			<div class="check">
+			  <a href="#" class="checka"><i class="icon-ok"></i></a>
+			</div>
+    </div>
+  </div>
+  
+  <div class="section">
+    <div class="corset">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </div>
+  </div>
+  
+  <div class="section shine-top">
+    <div class="corset">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </div>
+  </div>
+  
+  <div class="section shine-top">
+    <div class="corset">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </div>
+  </div>
+  <div class="section shine-top">
+    <div class="corset">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </div>
+  </div>
+  <div class="section shine-top">
+    <div class="corset">
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </div>
+  </div>
+  
+</div>

data/test/dummy/app/views/layouts/application.html.erb

@@ -12,13 +12,11 @@
   </script>
 </head>
 <body>
-  
   <%= render "front/aside" %>
   <div class="clearfix"></div>
   <div id="app_content">
     <%= yield %>
   </div>
   <div class="clearfix"></div>
-  
 </body>
 </html>

data/test/dummy/app/views/layouts/blank.html.erb

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Magic-Stylez</title>
+  <%= stylesheet_link_tag    'application', media: 'all' %>
+  <%= javascript_include_tag 'blank' %>
+  <%= csrf_meta_tags %>
+  <link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'>
+  <script type="text/javascript" charset="utf-8">
+    App = {};
+    App.Environment = "<%= Rails.env.to_s %>";
+  </script>
+</head>
+<body class="blank">
+    <%= yield %>
+</body>
+</html>

data/test/dummy/app/views/templates/_lorem.html.erb

@@ -0,0 +1,89 @@
+
+
+<div class="section">
+  <div class="corset">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  </div>
+</div>
+
+<div class="section shine-top">
+  <div class="corset">
+    <div class="row">
+      <div class="col-sm-6">
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+      </div>
+      <div class="col-sm-6">
+        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="section shine-top">
+  <div class="corset tight">
+    <div class="box">
+      <div class="header">
+        <h3>Some Form</h3>
+      </div>
+      <div class="body">
+        <form action="#" method="get" accept-charset="utf-8" class="form">
+          <div class="row">
+            <div class="col-sm-5 press">
+              <label>Text-Field</label>
+            </div>
+            <div class="col-sm-7 press">
+              <input type="text" class="form-control">
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-sm-5 press">
+              <label>check_switch</label>
+            </div>
+            <div class="col-sm-7 press">
+              <div class="check_switch">
+                <div class="switch_toggle"></div>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-sm-5">
+              <label>check</label>
+            </div>
+            <div class="col-sm-7">
+              <div class="check">
+                <a href="#" class="checka"><i class="icon-ok"></i></a>
+              </div>
+            </div>
+          </div>
+          <hr/>
+          <div class="row">
+            <div class="col-sm-4">
+              <button class="btn btn-success btn-splited" type="submit">
+                <span>Continue</span>
+                <span class="icn">→</span>
+              </button>
+            </div>
+            <div class="col-sm-4">
+              <button class="btn btn-default btn-block" type="reset">
+                Reset
+              </button>
+            </div>
+            <div class="col-sm-4 press">
+              &nbsp;
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="section shine-top">
+  <div class="corset">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  </div>
+</div>
+<div class="section shine-top">
+  <div class="corset">
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  </div>
+</div>