Home Explore Help
Sign In
pwa
/
Lungo2.0.js
mirror of https://github.com/xabstract/Lungo2.0.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Remove Lungo.View.Resize handler

soyjavi 13 years ago
parent
4a51661324
commit
97260ae570
8 changed files with 245 additions and 152 deletions
Split View Show Diff Stats
  1. 121 0
      examples/kitchen-sink/flexbox.html
  2. 0 6
      src/boot/Lungo.Boot.Events.js
  3. 52 48
      src/stylesheets/Lungo.layout.nav.less
  4. 1 3
      src/stylesheets/Lungo.theme.default.less
  5. 70 55
      src/stylesheets/css/Lungo.layout.nav.css
  6. 0 2
      src/stylesheets/css/Lungo.theme.default.css
  7. 0 37
      src/view/Lungo.View.Resize.js
  8. 1 1
      vendor/build.sh

+ 121 - 0
examples/kitchen-sink/flexbox.html
View File 

@@ -0,0 +1,121 @@
 
+<!doctype html>
 
+<html>
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>KitchenSink - Lungo 2.0</title>
 
+    <meta name="description" content="">
 
+    <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
 
+    <meta name="HandheldFriendly" content="True">
 
+    <meta name="MobileOptimized" content="320">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
+    <meta name="apple-mobile-web-app-capable" content="yes">
 
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
+    <meta name="format-detection" content="telephone=no">
 
+    <meta http-equiv="cleartype" content="on">
 
+    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://lungo.tapquo.com/resources/icon@2x.png">
 
+    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://lungo.tapquo.com/resources/icon-72.png">
 
+    <link rel="apple-touch-icon-precomposed" href="http://lungo.tapquo.com/resources/icon.png">
 
+    <link rel="apple-touch-startup-image" href="http://lungo.tapquo.com/resources/default.png">
 
+
 
+    <!-- Main Stylesheet -->
 
+
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.base.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.nav.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.aside.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.article.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.list.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.layout.grid.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.splash.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.button.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.form.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.colour.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.icon.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.icon.brand.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.loading.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.widgets.notification.css">
 
+    <link rel="stylesheet" href="../../src/stylesheets/css/Lungo.theme.default.css">
 
+
 
+        <!--
 
+    <link rel="stylesheet" href="../../release/lungo.css">
 
+    <link rel="stylesheet" href="../../release/lungo.icon.css">
 
+    <link rel="stylesheet" href="../../release/lungo.icon.brand.css">
 
+    <link rel="stylesheet" href="../../release/lungo.theme.default.css">
 
+    -->
 
+    <!-- App Stylesheet -->
 
+    <link rel="stylesheet" href="stylesheets/app.css">
 
+</head>
 
+
 
+<body class="app">
 
+    <section id="layout" data-transition="slide">
 
+        <header data-title="Layout" class="extended">
 
+            <nav class="button">
 
+                <a href="#back" data-router="section" data-label="back"></a>
 
+            </nav>
 
+            <nav class="right ">
 
+                <a href="#splash" data-router="section" data-icon="user" data-count="3" ></a>
 
+            </nav>
 
+        </header>
 
+
 
+        <nav class="groupbar">
 
+            <a href="#layout-art1" data-router="article" class="current" data-label="Profile"></a>
 
+            <a href="#layout-art2" data-router="article" data-label="Inbox" data-count="3"></a>
 
+            <a href="#layout-art3" data-router="article" data-label="Map"></a>
 
+            <a href="#layout-art4" data-router="article" data-label="Settings"></a>
 
+        </nav>
 
+
 
+        <footer>
 
+            <nav class="with-labels">
 
+                <a href="#layout-art1" data-router="article" data-label="Home" class="current" data-icon="home"></a>
 
+                <a href="#layout-art2" data-router="article" data-icon="inbox" data-count="2"></a>
 
+                <a href="#layout-art3" data-router="article" data-icon="user"></a>
 
+                <a href="#layout-art4" data-router="article" data-icon="settings"></a>
 
+            </nav>
 
+        </footer>
 
+
 
+        <article id="layout-art1"></article>
 
+        <article id="layout-art2"></article>
 
+        <article id="layout-art3"></article>
 
+        <article id="layout-art4"></article>
 
+    </section>
 
+
 
+    <!-- Lungo dependencies -->
 
+    <script src="../../src/lib/quo.debug.js"></script>
 
+    <!--
 
+    <script src="../../release/lungo.js"></script>
 
+    -->
 
+    <script src="../../src/Lungo.js"></script>
 
+    <script src="../../src/Lungo.init.js"></script>
 
+    <script src="../../src/Lungo.Core.js"></script>
 
+    <script src="../../src/Lungo.Dom.js"></script>
 
+    <script src="../../src/Lungo.Service.js"></script>
 
+    <script src="../../src/Lungo.Constants.js"></script>
 
+    <script src="../../src/Lungo.Element.js"></script>
 
+    <script src="../../src/Lungo.Events.js"></script>
 
+    <script src="../../src/Lungo.Notification.js"></script>
 
+    <script src="../../src/router/Lungo.Router.js"></script>
 
+    <script src="../../src/router/Lungo.Router.History.js" ></script>
 
+    <script src="../../src/view/Lungo.View.Resize.js"></script>
 
+    <script src="../../src/view/Lungo.View.Article.js" ></script>
 
+    <script src="../../src/view/Lungo.View.Aside.js" ></script>
 
+    <script src="../../src/view/Lungo.View.Element.js"></script>
 
+    <script src="../../src/data/Lungo.Data.Cache.js"></script>
 
+    <script src="../../src/data/Lungo.Data.Sql.js"></script>
 
+    <script src="../../src/data/Lungo.Data.Storage.js"></script>
 
+    <script src="../../src/attributes/Lungo.Attributes.Data.js"></script>
 
+    <script src="../../src/Lungo.Fallback.js"></script>
 
+    <script src="../../src/boot/Lungo.Boot.Resources.js" ></script>
 
+    <script src="../../src/boot/Lungo.Boot.Stats.js" ></script>
 
+    <script src="../../src/boot/Lungo.Boot.Layout.js"></script>
 
+    <script src="../../src/boot/Lungo.Boot.Events.js"></script>
 
+    <script src="../../src/boot/Lungo.Boot.Data.js"></script>
 
+    <script src="../../src/boot/Lungo.Boot.Section.js"></script>
 
+    <script src="../../src/boot/Lungo.Boot.Article.js"></script>
 
+
 
+    <!-- LungoJS - Sandbox App -->
 
+    <script>
 
+        Lungo.init();
 
+    </script>
 
+</body>
 
+</html>

+ 0 - 6
src/boot/Lungo.Boot.Events.js
View File 

@@ -31,16 +31,10 @@ Lungo.Boot.Events = (function(lng, undefined) {
 
         var touch_move_event  = 'touchmove';
 
         var resize = 'resize';
 
 
-        lng.dom(SELECTORS.WINDOW).on(resize, _changeOrientation);
 
         lng.dom(SELECTORS.HREF_TARGET).tap(_loadTarget);
 
         lng.dom(SELECTORS.HREF_TARGET_FROM_ASIDE).tap(_hideAsideIfNecesary);
 
     };
 
 
-    var _changeOrientation = function(event) {
 
-        event.preventDefault();
 
-        lng.View.Resize.navigation();
 
-    };
 
-
 
     var _loadTarget = function(event) {
 
         event.preventDefault();
 
         var link = lng.dom(this);

+ 52 - 48
src/stylesheets/Lungo.layout.nav.less
View File 

@@ -9,10 +9,23 @@
 
 
 @import "constants.less";
 
 
-header nav, footer nav {
 
-    height: auto;
 
-    text-align: center;
 
+nav {
 
 
+    &.groupbar, footer & {
 
+        .display-box();
 
+        .box-pack(justify);
 
+
 
+        & > a {
 
+            .box-flex(1);
 
+        }
 
+    }
 
+
 
+    & abbr {
 
+        font-weight: bold;
 
+    }
 
+}
 
+
 
+header nav {
 
     & a {
 
         padding: 0 6px;
 
         min-width: 28px;
 
@@ -27,8 +40,6 @@ header nav, footer nav {
 
             height: 16px;
 
             top: -1px !important; }
 
 
-        & abbr { font-weight: bold; }
 
-
 
         & .bubble {
 
             position: relative;
 
             top:  -12px;
 
@@ -36,72 +47,67 @@ header nav, footer nav {
 
             margin-right: -20px;
 
         }
 
     }
 
+
 
+    &.button a {
 
+        margin: 5px 5px 5px 0;
 
+        height: 32px;
 
+        line-height: 32px;
 
+        & .icon {  line-height: 33px; }
 
+        &:first-child { margin: 5px; }
 
+    }
 
+
 
+    & .icon ~ abbr {
 
+        margin-left: 4px;
 
+        float: right; }
 
+
 
+    & .loading {
 
+        margin-top: .5em;
 
+        font-size: 1.6em;
 
+        & + .icon { display: none; }
 
+    }
 
 }
 
 
 nav.groupbar {
 
     position: absolute;
 
     top: @header-footer-height;
 
     height: @header_groupbar_height;
 
-    display: block;
 
     width: 100%;
 
     z-index: 2;
 
 
     line-height: @header_groupbar_height;
 
-
 
-    & a {
 
+    & > a {
 
         padding: 0px;
 
         margin: 0px;
 
-        font-weight: bold;
 
         height: @header_groupbar_height !important;
 
         display: block;
 
-        float: left;
 
         text-align: center;
 
+
 
         & .icon {
 
             font-size: 1.0em;
 
             margin-right: 2px;
 
         }
 
         & .bubble {
 
-            top: -6px;
 
-            left: 0px;
 
+            position: relative;
 
+            top: -1px;
 
+            left: 2px;
 
         }
 
     }
 
 }
 
 
-
 
-header nav {
 
-    &.button a {
 
-        margin: 5px 5px 5px 0;
 
-        height: 32px;
 
-        line-height: 32px;
 
-        & .icon {  line-height: 33px; }
 
-
 
-        &:first-child { margin: 5px; }
 
-    }
 
-
 
-    & .icon ~ abbr {
 
-        margin-left: 4px;
 
-        float: right; }
 
-
 
-    & .loading {
 
-        margin-top: .5em;
 
-        font-size: 1.6em;
 
-        & + .icon { display: none; }
 
-    }
 
-}
 
-
 
 footer nav {
 
-
 
     & a {
 
+        text-align: center;
 
         display: block;
 
         padding: 0;
 
         height:  @header-footer-height;
 
     }
 
 
     & .icon {
 
-        display: block;
 
-        top:  0px;
 
         font-size: 2.0em !important;
 
-        line-height: @header-footer-height; }
 
+        line-height: @header-footer-height;
 
+        width: 32px;
 
+        display: inline-block;
 
+    }
 
 
     & .bubble {
 
         top:  -42px;
 
@@ -114,22 +120,20 @@ footer nav {
 
 
     abbr { display: none; }
 
 
-    & .loading {
 
-        top: .1em;
 
-        font-size: 2.3em; }
 
+    & .bubble {
 
+        position: relative;
 
+        top:  -12px;
 
+        left: -12px;
 
+        margin-right: -20px;
 
+    }
 
 
     &.with-labels {
 
         & .icon { line-height: 36px; }
 
-        & .bubble { top: -34px; }
 
 
         & abbr {
 
             display: block !important;
 
-            position: absolute;
 
-            top: 30px;
 
-            width: inherit;
 
-            height: 14px;
 
-            margin-left: 0px;
 
-            display: block !important;
 
+            margin-top: -8px;
 
+            z-index: 1;
 
 
             font-size: 11px;
 
             line-height: 14px;

+ 1 - 3
src/stylesheets/Lungo.theme.default.less
View File 

@@ -88,10 +88,8 @@ footer nav a.current {
 
 
 footer nav a, nav.groupbar a{
 
     color: rgba(0,0,0,0.7);
 
-    .text-shadow(0 1px 0 rgba(255,255,255,0.1));
 
     &.current {
 
-        color:  #fff;
 
-        text-shadow: 0 0 1px #fff;}
 
+        color:  #fff;}
 
 }
 
 
 nav.groupbar a.current { .box-shadow(inset 0 -3px 0 @theme); }

+ 70 - 55
src/stylesheets/css/Lungo.layout.nav.css
View File 

@@ -8,66 +8,61 @@
 
  */
 
 /* DIMENSIONS */
 
 /* COLORS */
 
-header nav,
 
+nav.groupbar,
 
 footer nav {
 
-  height: auto;
 
-  text-align: center;
 
+  display: -webkit-box;
 
+  display: -moz-box;
 
+  display: -ms-box;
 
+  display: -o-box;
 
+  display: box;
 
+  display: -webkit-box;
 
+  display: -moz-box;
 
+  display: -ms-box;
 
+  display: -o-box;
 
+  display: box;
 
+  -webkit-box-pack: justify;
 
+  -moz-box-pack: justify;
 
+  -ms-box-pack: justify;
 
+  -o-box-pack: justify;
 
+  box-pack: justify;
 
+}
 
+nav.groupbar  > a,
 
+footer nav   > a {
 
+  display: -webkit-box;
 
+  display: -moz-box;
 
+  display: -ms-box;
 
+  display: -o-box;
 
+  display: box;
 
+  -webkit-box-flex: 1;
 
+  -moz-box-flex: 1;
 
+  -ms-box-flex: 1;
 
+  -o-box-flex: 1;
 
+  box-flex: 1;
 
+}
 
+nav abbr {
 
+  font-weight: bold;
 
 }
 
-header nav a,
 
-footer nav a {
 
+header nav a {
 
   padding: 0 6px;
 
   min-width: 28px;
 
   z-index: 1000;
 
   float: left;
 
   height: 44px;
 
 }
 
-header nav a .icon,
 
-footer nav a .icon {
 
+header nav a .icon {
 
   font-size: 1.7em;
 
 }
 
-header nav a img,
 
-footer nav a img {
 
+header nav a img {
 
   width: 16px;
 
   height: 16px;
 
   top: -1px !important;
 
 }
 
-header nav a abbr,
 
-footer nav a abbr {
 
-  font-weight: bold;
 
-}
 
-header nav a .bubble,
 
-footer nav a .bubble {
 
+header nav a .bubble {
 
   position: relative;
 
   top: -12px;
 
   left: -12px;
 
   margin-right: -20px;
 
 }
 
-nav.groupbar {
 
-  position: absolute;
 
-  top: 44px;
 
-  height: 30px;
 
-  display: block;
 
-  width: 100%;
 
-  z-index: 2;
 
-  line-height: 30px;
 
-}
 
-nav.groupbar a {
 
-  padding: 0px;
 
-  margin: 0px;
 
-  font-weight: bold;
 
-  height: 30px !important;
 
-  display: block;
 
-  float: left;
 
-  text-align: center;
 
-}
 
-nav.groupbar a .icon {
 
-  font-size: 1.0em;
 
-  margin-right: 2px;
 
-}
 
-nav.groupbar a .bubble {
 
-  top: -6px;
 
-  left: 0px;
 
-}
 
 header nav.button a {
 
   margin: 5px 5px 5px 0;
 
   height: 32px;
 
@@ -90,16 +85,41 @@ header nav .loading {
 
 header nav .loading  + .icon {
 
   display: none;
 
 }
 
+nav.groupbar {
 
+  position: absolute;
 
+  top: 44px;
 
+  height: 30px;
 
+  width: 100%;
 
+  z-index: 2;
 
+  line-height: 30px;
 
+}
 
+nav.groupbar  > a {
 
+  padding: 0px;
 
+  margin: 0px;
 
+  height: 30px !important;
 
+  display: block;
 
+  text-align: center;
 
+}
 
+nav.groupbar  > a .icon {
 
+  font-size: 1.0em;
 
+  margin-right: 2px;
 
+}
 
+nav.groupbar  > a .bubble {
 
+  position: relative;
 
+  top: -1px;
 
+  left: 2px;
 
+}
 
 footer nav a {
 
+  text-align: center;
 
   display: block;
 
   padding: 0;
 
   height: 44px;
 
 }
 
 footer nav .icon {
 
-  display: block;
 
-  top: 0px;
 
   font-size: 2.0em !important;
 
   line-height: 44px;
 
+  width: 32px;
 
+  display: inline-block;
 
 }
 
 footer nav .bubble {
 
   top: -42px;
 
@@ -112,24 +132,19 @@ footer nav .bubble .loading {
 
 footer nav abbr {
 
   display: none;
 
 }
 
-footer nav .loading {
 
-  top: .1em;
 
-  font-size: 2.3em;
 
+footer nav .bubble {
 
+  position: relative;
 
+  top: -12px;
 
+  left: -12px;
 
+  margin-right: -20px;
 
 }
 
 footer nav.with-labels .icon {
 
   line-height: 36px;
 
 }
 
-footer nav.with-labels .bubble {
 
-  top: -34px;
 
-}
 
 footer nav.with-labels abbr {
 
   display: block !important;
 
-  position: absolute;
 
-  top: 30px;
 
-  width: inherit;
 
-  height: 14px;
 
-  margin-left: 0px;
 
-  display: block !important;
 
+  margin-top: -8px;
 
+  z-index: 1;
 
   font-size: 11px;
 
   line-height: 14px;
 
   overflow: hidden;

+ 0 - 2
src/stylesheets/css/Lungo.theme.default.css
View File 

@@ -112,12 +112,10 @@ footer nav a.current {
 
 footer nav a,
 
 nav.groupbar a {
 
   color: rgba(0, 0, 0, 0.7);
 
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
 
 }
 
 footer nav a.current,
 
 nav.groupbar a.current {
 
   color: #fff;
 
-  text-shadow: 0 0 1px #fff;
 
 }
 
 nav.groupbar a.current {
 
   -webkit-box-shadow: inset 0 -3px 0 #2a95d3;

+ 0 - 37
src/view/Lungo.View.Resize.js
View File 

@@ -1,37 +0,0 @@
 
-/**
 
- *
 
- *
 
- * @namespace Lungo.View
 
- * @class Resize
 
- *
 
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 
- * @author Guillermo Pascual <pasku@tapquo.com> || @pasku1
 
- */
 
-
 
-Lungo.View.Resize = (function(lng, undefined) {
 
-
 
-    var ATTRIBUTE = lng.Constants.ATTRIBUTE;
 
-
 
-    /**
 
-     * Sets toolbars width, using total screen width
 
-     *
 
-     * @method toolbars
 
-     */
 
-    var navigation = function() {
 
-        if (!lng.Element.navigation)
 
-            lng.Element.navigation = lng.dom('footer nav, .groupbar');
 
-
 
-        for (var i = 0, len = lng.Element.navigation.length; i < len; i++) {
 
-            var element = lng.dom(lng.Element.navigation[i]);
 
-            var element_children = element.children();
 
-            var element_children_percent = 100 / element.children().length;
 
-
 
-            element_children.style(ATTRIBUTE.WIDTH, element_children_percent + ATTRIBUTE.PERCENT);
 
-        }
 
-    };
 
-
 
-    return {
 
-        navigation: navigation
 
-    };
 
-
 
-})(Lungo);

+ 1 - 1
vendor/build.sh
View File 

@@ -39,7 +39,7 @@ echo -e "\033[0m"============================ LUNGO COMPILER ===================
 
     #View
 
     DIR=$LUNGO_SOURCES"view/"$LUNGO_NAMESPACE"View."
 
     echo -e "\033[33m  [DIR]: "$LUNGO_SOURCES"view/"
 
-    FILES=(Resize.js Article.js Aside.js Element.js)
 
+    FILES=(Article.js Aside.js Element.js)
 
     for file in "${FILES[@]}"
 
     do
 
         FILES_TO_COMPILE=$FILES_TO_COMPILE" --js "$DIR$file