ホーム エクスプローラ ヘルプ
サインイン
pwa
/
Lungo.js
同期ミラー https://github.com/tapquo/Lungo.js.git
2
0
フォーク 0
ファイル 課題 0 Wiki
ソースを参照

New class "mini" of <aside/> element.

@soyjavi 14 年 前
親
48b8f7d5f3
コミット
8e1570b079
16 ファイル変更、105 行追加、130 行削除
分割表示 差分情報を表示
  1. 0 4
      examples/kitchen-sink/app/sections/navigation-flow.html
  2. 0 1
      examples/kitchen-sink/app/sections/navigation-index.html
  3. 0 26
      examples/kitchen-sink/index.html
  4. 0 1
      examples/release-test/app/app.js
  5. 18 2
      examples/test/app/sections/aside.html
  6. 0 4
      examples/test/app/sections/navigation-flow.html
  7. 5 6
      examples/test/index.html
  8. 1 1
      src/Lungo.Constants.js
  9. 1 1
      src/stylesheets/css/Lungo.layout.aside.css
  10. 7 8
      src/stylesheets/css/Lungo.theme.default.css
  11. 1 1
      src/stylesheets/css/Lungo.widgets.css
  12. 46 40
      src/stylesheets/less/Lungo.layout.aside.less
  13. 9 27
      src/stylesheets/less/Lungo.theme.default.less
  14. 1 1
      src/stylesheets/less/Lungo.widgets.less
  15. 1 0
      src/stylesheets/less/constants.less
  16. 15 7
      src/view/Lungo.View.Aside.js

+ 0 - 4
examples/kitchen-sink/app/sections/navigation-flow.html
ファイルの表示 

@@ -1,4 +0,0 @@
 
-<section id="navigation-flow" class="flow">
 
-    <header data-back="home"></header>
 
-    <article></article>
 
-</section>

+ 0 - 1
examples/kitchen-sink/app/sections/navigation-index.html
ファイルの表示 

@@ -4,7 +4,6 @@
 
         <ul>
 
             <li><a href="#">Normal Transition</a></li>
 
             <li><a href="#" class="pop">Pop Transition</a></li>
 
-            <li><a href="#" class="flow">Flow Transition</a></li>
 
         </ul>
 
     </article>
 
 </section>

+ 0 - 26
examples/kitchen-sink/index.html
ファイルの表示 

@@ -34,32 +34,6 @@
 
     <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.theme.default.css">
 
     <!-- App Stylesheet -->
 
     <link rel="stylesheet" href="assets/stylesheets/app.css">
 
-
 
-    <style>
 
-        @-webkit-keyframes flow-show {
 
-            0% { -webkit-transform: translateX(100%) scale(.7); }
 
-            50% { -webkit-transform: translateX(0%) scale(.7);}
 
-            100% { -webkit-transform: translateX(0%) scale(1);}
 
-        }
 
-
 
-        @-webkit-keyframes flow-show-revoke {
 
-            0% { -webkit-transform: translateX(0%) scale(1); }
 
-            50% { -webkit-transform: translateX(0%) scale(.7);}
 
-            100% { -webkit-transform: translateX(100%) scale(.7);}
 
-        }
 
-
 
-        @-webkit-keyframes flow-hide {
 
-            0% { -webkit-transform: translateX(0%) scale(1); }
 
-            50% { -webkit-transform: translateX(0%) scale(.7); }
 
-            100% { -webkit-transform: translateX(-100%) scale(.7); }
 
-        }
 
-
 
-        @-webkit-keyframes flow-hide-revoke {
 
-            0% { -webkit-transform: translateX(-100%) scale(.7); }
 
-            50% { -webkit-transform: translateX(0%) scale(.7);}
 
-            100% { -webkit-transform: translateX(0%) scale(1);}
 
-        }
 
-    </style>
 
 </head>
 
 
 <body class="app">

+ 0 - 1
examples/release-test/app/app.js
ファイルの表示 

@@ -10,7 +10,6 @@ var App = (function(lng, undefined) {
 
                 'navigation-index.html',
 
                 'navigation-normal.html',
 
                 'navigation-pop.html',
 
-                'navigation-flow.html',
 
                 'lists.html',
 
                 'settings.html',
 
                 'forms.html',

+ 18 - 2
examples/test/app/sections/aside.html
ファイルの表示 

@@ -1,3 +1,18 @@
 
+<aside id="kitchen-sink-scroll" class="scrollable  mini">
 
+    <div>
 
+        <a href="#nav-1" data-target="article" class="current" data-icon="clock"></a>
 
+        <a href="#nav-2" data-target="article" data-icon="calendar"></a>
 
+        <a href="#test-2" data-target="section" data-icon="plus" data-count="14"></a>
 
+        <a href="#icons" data-target="article" data-icon="picture" data-count="94"></a>
 
+        <a href="#data-attributes" data-target="article" data-icon="tag" data-count="6"></a>
 
+        <a href="#forms" data-target="section" data-icon="edit" data-count="7"></a>
 
+        <a href="#lists" data-target="section" data-icon="items" data-count="5"></a>
 
+        <a href="#events" data-target="article" data-icon="user"></a>
 
+        <a href="#scrolls" data-target="article" data-icon="down"></a>
 
+    </div>
 
+</aside>
 
+
 
+<!--
 
 <aside id="kitchen-sink-scroll" class="scrollable current">
 
     <div>
 
         <div class="title">Select a option</div>
 
@@ -11,7 +26,7 @@
 
         <a href="#events" data-target="article" data-icon="user">Events</a>
 
         <a href="#scrolls" data-target="article" data-icon="down">Scrolls</a>
 
         <a href="#urls" data-target="article" data-icon="down">URL Scheme Reference</a>
 
-                <a href="#welcome" data-target="article" class="current" data-icon="wifi">Welcome</a>
 
+        <a href="#welcome" data-target="article" class="current" data-icon="wifi">Welcome</a>
 
         <a href="#navigation" data-target="section" data-icon="map">Navigation</a>
 
         <a href="#buttons" data-target="article" data-icon="plus" data-count="14">Buttons & Colours</a>
 
         <a href="#icons" data-target="article" data-icon="picture" data-count="94">Icons</a>
 
@@ -22,4 +37,5 @@
 
         <a href="#scrolls" data-target="article" data-icon="down">Scrolls</a>
 
         <a href="#urls" data-target="article" data-icon="down">URL Scheme Reference</a>
 
     </div>
 
-</aside>
 
+</aside>
 
+-->

+ 0 - 4
examples/test/app/sections/navigation-flow.html
ファイルの表示 

@@ -1,4 +0,0 @@
 
-<section id="navigation-flow" class="flow">
 
-    <header data-back="home"></header>
 
-    <article></article>
 
-</section>

+ 5 - 6
examples/test/index.html
ファイルの表示 

@@ -39,17 +39,17 @@
 
 <body class="app">
 
 
 
-    <section id="test-1" class="pop aside">
 
+    <section id="test-1" class="pop">
 
         <header class="extended">
 
             <nav class="onleft">
 
-                <a href="#kitchen-sink-scroll" data-target="aside" class="autohide" data-icon="user"></a>
 
+                <a href="#kitchen-sink-scroll" data-target="aside" data-icon="user"></a>
 
             </nav>
 
             <div class="onleft">
 
                 <span class="title with-subtitle">Javi Jiménez Villar</span>
 
                 <span class="subtitle">@soyjavi</span>
 
             </div>
 
             <nav class="onright">
 
-                <a href="#profiles" data-target="aside" data-icon="group"></a>
 
+                <a href="#profiles" data-target="aside"  class="autohide" data-icon="group"></a>
 
             </nav>
 
         </header>
 
 
@@ -69,7 +69,7 @@
 
             </nav>
 
         </footer>
 
         -->
 
-
 
+        <!--
 
         <footer class="toolbar">
 
             <nav>
 
                 <a href="#nav-1" data-target="article" class="current"  data-icon="clock"></a>
 
@@ -78,8 +78,7 @@
 
                 <a href="#a" data-target="article" data-icon="phone" data-count="12"></a>
 
             </nav>
 
         </footer>
 
-
 
-
 
+        -->
 
 
         <article id="nav-1" class="list indented scrollable">

+ 1 - 1
src/Lungo.Constants.js
ファイルの表示 

@@ -29,7 +29,7 @@ LUNGO.Constants = {
 
         RIGHT: 'onright',
 
         LEFT: 'onleft',
 
         HORIZONTAL: 'horizontal',
 
-        FLOW: 'flow'
 
+        MINI: 'mini'
 
     },
 
 
     TRIGGER: {

ファイルの差分が大きいため隠しています
+ 1 - 1
src/stylesheets/css/Lungo.layout.aside.css


+ 7 - 8
src/stylesheets/css/Lungo.theme.default.css
ファイルの表示 

@@ -100,23 +100,22 @@ header nav.plain a:active {
 
 /* @group <aside> */
 
 aside {
 
   color: #9faab1;
 
+  background-color: #2f353a;
 
 }
 
 aside .title {
 
   background: #252525;
 
 }
 
 aside a {
 
   color: #9faab1;
 
-  background-color: #2f353a;
 
-  border-bottom: 1px inset #222;
 
-  border-top: 1px inset rgba(255, 255, 255, 0.1);
 
+  text-shadow: 0px 1px 0px #000;
 
 }
 
 aside a.current,
 
-aside a .icon {
 
-  color: #ffffff;
 
+aside a.current .icon {
 
+  color: #ffffff !important;
 
 }
 
-aside a .icon {
 
-  text-shadow: none;
 
-  color: #7a7a7a;
 
+aside:not(.mini) a {
 
+  border-bottom: 1px inset #222;
 
+  border-top: 1px inset rgba(255, 255, 255, 0.1);
 
 }
 
 aside .anchor {
 
   background: #101010;

ファイルの差分が大きいため隠しています
+ 1 - 1
src/stylesheets/css/Lungo.widgets.css


+ 46 - 40
src/stylesheets/less/Lungo.layout.aside.less
ファイルの表示 

@@ -10,14 +10,10 @@
 
 @import "constants.less";
 
 @import "mixins.less";
 
 
-@defaultTrasition : @easeOutSine;
 
-@header_footer_height: 40px;
 
-	@header_extended_height: 74px;
 
-@footer_toolbar_height: 48px;
 
-
 
-/* @group <aside> */
 
 section.aside {
 
-	left: @aside-width;
 
+	&:not(.mini) { left: @aside-width; }
 
+	&.mini { left: @aside-width-mini; }
 
+	
 	&.onright {  
 		left: 0px;	
 		.transform(translate(-@aside-width, 0)); 
@@ -34,7 +30,6 @@ aside {
 
 
 	width: @aside-width;
 
 	max-width: @aside-width;
 
-	
 
 	&.onright { right: 0px; }
 
 	&.current { visibility: visible;}
 
@@ -45,10 +40,13 @@ aside {
 
 		font-size: 15px;
 
 		font-weight: bold;
 
 	}
 
-
 
+	
+	& .title, & .anchor, & a {
 
+		padding: 0 6px;
 
+	}
 
+	
 	& a {
 
     	display: block;
 
-		//width: 244px;
 
 		height: 40px;
 
 
 		font-size: 14px;
 
@@ -57,28 +55,16 @@ aside {
 
 		overflow: hidden;
 
 		white-space: nowrap;
 
 		text-overflow: ellipsis;
 
-
 
 	}
 
 
 	& .bubble {
 
     	float: right;
 
     	font-size: 11px;
 
 	}
 
-}
 
-
 
-aside .title, aside a, aside .anchor {
 
-	padding: 0 6px;
 
-}
 
-
 
-aside a .bubble, aside .title .bubble {
 
-	margin-top: 13px;
 
-}
 
-
 
-aside .anchor .bubble {
 
-    margin-top: 2px;
 
-}
 
-
 
-	aside .icon {
 
+	& *.not(.anchor) .bubble { margin-top: 13px; }	
+	& *.anchor .bubble { margin-top: 2px; }
 
+	
+	& .icon {
 
 		width: 24px;
 
 		float: left;
 
 		margin: 8px 4px 0 0;
 
@@ -87,23 +73,43 @@ aside .anchor .bubble {
 
 		line-height: 24px;
 
 	    text-align: center;
 
 	}
 
-	aside .anchor {
 
+	
+	& .anchor {
 
 		font-weight: bold;
 
 		line-height: 19px;
 
 	}
 
-
 
-	@media handheld, only screen and (min-width: 768px) {
 
-		.autohide[data-target="aside"] { 
-			display: none !important; 
+		
+	&.mini {
 
+		width: @aside-width-mini;
 
+		
+		& a {
 
+			padding: 0 8px;
 
+			height: @aside-width-mini;
 
 		}
 
-
 
-		section.aside {
 
-			width: auto !important;
 
-    		left: 256px !important;
 
-    		right: 0px !important;
 
-    		.transform(translate3d(0px, 0, 0));
 
-    		-webkit-transition: none;
 
-
 
+		& .icon {
 
+			height: 48px;
 
+			width: 48px;
 
+			font-size: 48px;
 
+			line-height: 48px;
 
+			//background: red;
 
+		}
 
+		
+		& .bubble {
 
+			margin-top: -48px;
 
 		}
 
 	}
 
-/* @end */
 
+}
 
+
 
+@media handheld, only screen and (min-width: 768px) {
 
+	.autohide[data-target="aside"] {  display: none !important; }
 
+
 
+	section.aside {
 
+		width: auto !important;
 
+    	left: @aside-width;
 
+   		right: 0px !important;
 
+   		.transform(translate3d(0px, 0, 0));
 
+   		-webkit-transition: none;
 
+   		
+   		&.mini{ left: @aside-width-mini; }
 
+   	}
 
+}

+ 9 - 27
src/stylesheets/less/Lungo.theme.default.less
ファイルの表示 

@@ -127,28 +127,19 @@ header nav {
 
 /* @group <aside> */
 
 aside {
 
 	color: #9faab1;
 
+	background-color: #2f353a;
 
 	
     & .title { background: #252525; }
 
-
 
+		
     & a {
 
     	color: #9faab1;
 
-		background-color: #2f353a;
 
-		
-	    //text-shadow: 0px 1px 0px #000;
 
-	    border-bottom: 1px inset #222;
 
+	    text-shadow: 0px 1px 0px #000;
 
+		&.current, &.current .icon { color: @white !important; }
 
+	}
 
+	
+	&:not(.mini) a {
 
+		border-bottom: 1px inset #222;
 
 		border-top: 1px inset rgba(255,255,255,0.1);
 
-
 
-		&.current, & .icon {
 
-    		//background: #1c1c1c;
 
-			//box-shadow: inset 0px 0px 8px #101010;
 
-			//border-top: 1px inset #1c1c1c;
 
-			color: @white;
 
-		}
 
-
 
-		& .icon {
 
-    		text-shadow: none;
 
-			color: #7a7a7a;
 
-		}
 
 	}
 
 
 	& .anchor {
 
@@ -168,7 +159,6 @@ section.aside {
 
 		&.onright { box-shadow: 4px 0 8px rgba(0,0,0,0.5); }
 
 	}
 
 }
 
-
 
 /* @end */
 
 
 /* @group .list */
 
@@ -289,18 +279,10 @@ section.aside {
 
 
 form, .form {
 
 	font-weight: bold;
 
-	
 	& li { min-height: 27px; }
 
-	
-	
-
 
-	& label {
 
-		color: #999;
 
-	}
 
-	
+	& label { color: #999; }
 
 }
 
 
-
 
 input, textarea, select {
 
 	border: 1px solid #e1e1e1;
 
 	.border-radius(@border-radius);

+ 1 - 1
src/stylesheets/less/Lungo.widgets.less
ファイルの表示 

@@ -46,7 +46,7 @@
 
     line-height: 32px;
 
 }
 
 
-.mini {
 
+.icon.mini {
 
 	font-size: 20px !important;
 
     height: 16px !important;
 
     width: 16px !important;

+ 1 - 0
src/stylesheets/less/constants.less
ファイルの表示 

@@ -10,6 +10,7 @@
 
 @border-radius: 3px;
 
 
 @aside-width: 256px;
 
+	@aside-width-mini: 64px;
 
 
 /* @end */

+ 15 - 7
src/view/Lungo.View.Aside.js
ファイルの表示 

@@ -24,11 +24,11 @@ LUNGO.View.Aside = (function(lng, undefined) {
 
      */
 
     var show = function(section_id, aside_id) {
 
         var aside = lng.dom(ELEMENT.ASIDE + aside_id);
 
-        var aside_class = _classFromAside(aside);
 
+        var aside_class = _asideClass(aside);
 
         var section = lng.dom(ELEMENT.SECTION + section_id);
 
 
-        section.addClass(aside_class).addClass(CLASS.ASIDE);
 
         aside.addClass(CLASS.CURRENT);
 
+        section.addClass(aside_class).addClass(CLASS.ASIDE);
 
     };
 
 
     /**
 
@@ -41,19 +41,27 @@ LUNGO.View.Aside = (function(lng, undefined) {
 
      */
 
     var hide = function(section_id, aside_id) {
 
         var aside = lng.dom(ELEMENT.ASIDE + aside_id);
 
+        var aside_class = _asideClass(aside);
 
         var section = lng.dom(ELEMENT.SECTION + section_id);
 
 
-        section.removeClass(CLASS.ASIDE).removeClass(CLASS.RIGHT);
 
+        section.removeClass(CLASS.ASIDE).removeClass(aside_class);
 
 
         setTimeout(function() {
 
-            var current_aside = ELEMENT.ASIDE + aside_id + '.' + CLASS.CURRENT;
 
-            lng.dom(current_aside).removeClass(CLASS.CURRENT);
 
+            aside.removeClass(CLASS.CURRENT);
 
         }, 300);
 
     };
 
 
-    var _classFromAside = function(aside) {
 
+    var _asideClass = function(aside) {
 
         var aside_class = aside.attr(ATTRIBUTE.CLASS);
 
-        return aside_class || '';
 
+        var classes = ''
 
+
 
+        //@todo: Refactor
 
+        if (aside_class) {
 
+            classes += (aside_class.indexOf(CLASS.RIGHT) > -1) ? CLASS.RIGHT : '';
 
+            classes += (aside_class.indexOf(CLASS.MINI) > -1) ? CLASS.MINI : '';
 
+        }
 
+
 
+        return classes;
 
     };
 
 
     return {