Trang chủ Khám phá Trợ giúp
Đăng nhập
pwa
/
Lungo2.0.js
mirror of https://github.com/xabstract/Lungo2.0.js.git
2
0
Fork 0
Các tập tin Các vấn đề 0 Wiki
Browse Source

nav : [data-control=menu] & [data-control=groupbar]

Javi Jimenez Villar 13 năm trước cách đây
mục cha
6b67f9a45e
commit
3b48604578
10 tập tin đã thay đổi với 138 bổ sung và 85 xóa
Split View Hiển thị tình trạng sai khác
  1. 38 10
      example/flexbox.html
  2. 2 2
      src/boot/Lungo.Boot.Events.coffee
  3. 2 2
      src/modules/Lungo.Constants.coffee
  4. 3 0
      src/stylesheets/constants.styl
  5. 11 14
      src/stylesheets/lungo.layout.list.styl
  6. 46 43
      src/stylesheets/lungo.layout.nav.styl
  7. 1 1
      src/stylesheets/lungo.layout.styl
  8. 1 1
      src/stylesheets/lungo.widgets.notification.styl
  9. 9 0
      src/stylesheets/lungo.widgets.styl
  10. 25 12
      src/stylesheets/theme.lungo.styl

+ 38 - 10
example/flexbox.html
Xem Tập Tin 

@@ -25,32 +25,36 @@
 
 </head>
 
 
 <body class="app">
 
+
 
     <section id="main" data-transition="" data-aside="features" data-children="folk ">
 
         <header>
 
             <nav class="left">
 
                 <a href="#" data-view-aside="features" data-icon="menu"></a>
 
+
 
+                <a href="#" data-view-menu="options" data-icon="users"></a>
 
+
 
                 <a href="#" data-icon="user" class="button" data-article="products" data-label="Folks" data-view-article="folks"></a>
 
                 <a href="#" class="button" data-article="products" data-label="Folks" data-view-article="folks"></a>
 
                 <a href="#" data-icon="user" class="button" data-article="products" data-view-article="folks"></a>
 
-
 
-
 
             </nav>
 
 
-            <img src="http://cdn.tapquo.com/lungo/logo.png" class="title centered">
 
-
 
-            <!-- <div class="title centered">laskdkals</div> -->
 
             <!-- <img src="http://cdn.tapquo.com/lungo/logo.png" class="title centered"> -->
 
+            <div class="title centered">Folks</div>
 
 
             <nav class="right">
 
                 <button data-icon="user" class="button" data-article="folks" data-label="Products" data-view-article="products" data-async="app/articles/products.html"></button>
 
-                <!--
 
-                <button data-icon="user"></button>
 
-                <a href="#" data-view-article="products" data-label="Products" data-count="5"></a>
 
-                    -->
 
             </nav>
 
         </header>
 
 
-        <nav class="groupbar" data-article="folks">
 
+        <nav id="options" data-control="menu" class="iconss ">
 
+            <a href="#" data-view-article="folks" data-icon="users" data-title="Folks">Folks</a>
 
+            <a href="#" data-view-article="products" data-icon="eye" data-title="Explore">Explore</a>
 
+            <a href="#" data-view-article="article" data-icon="chat">Activity</a>
 
+            <a href="#" data-view-article="article" data-icon="user">Profile</a>
 
+            <a href="#" data-view-section="folk" data-icon="user">Folk</a>
 
+        </nav>
 
+
 
+        <nav data-control="groupbar" data-article="folks">
 
             <a href="#" data-view-article="folks" data-label="Folks" data-count="11"></a>
 
             <a href="#" data-view-article="products" data-async="app/articles/products.html" data-label="Products" data-count="5"></a>
 
         </nav>
 
@@ -271,6 +275,30 @@
 
             //,
 
             // resources: ['app/sections/list.html']
 
         });
 
+
 
+        // Lungo.Notification.show("hola", "user");
 
+
 
+        // Lungo.Notification.show();
 
+
 
+        // Lungo.Notification.success('Title', 'Description', 'message', 2);
 
+
 
+        // Lungo.Notification.confirm({
 
+        //     icon: 'user',
 
+        //     title: 'Lorem ipsum dolor sit amet, consectetur adipisicing.',
 
+        //     description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo amet nulla dolorum hic eum debitis dolorem expedita? Commodi molestiae tempora totam explicabo sed deserunt cum iusto eos perspiciatis ea in.',
 
+        //     accept: {
 
+        //         icon: 'checkmark',
 
+        //         label: 'Accept',
 
+        //         callback: function(){ alert("Yes!"); }
 
+        //     },
 
+        //     cancel: {
 
+        //         icon: 'close',
 
+        //         label: 'Cancel',
 
+        //         callback: function(){ alert("No!"); }
 
+        //     }
 
+        // });
 
+
 
+
 
     </script>
 
 </body>
 
 </html>

+ 2 - 2
src/boot/Lungo.Boot.Events.coffee
Xem Tập Tin 

@@ -86,8 +86,8 @@ Lungo.Boot.Events = do(lng = Lungo) ->
 
   _closeMenu = (event) ->
 
     event.preventDefault()
 
     el = lng.dom(this)
 
-    parent = el.parent("[data-control=menu]").removeClass(CLASS.SHOW)
 
-    lng.dom("[data-router=menu] > .icon").attr "class", "icon " + el.data("icon")
 
+    parent = el.parent("[data-control=menu]").removeClass(CLASS.SHOW).attr C.ATTRIBUTE.ID
 
+    lng.dom("[data-view-menu=#{parent}] > .icon").attr "class", "icon " + el.data("icon")
 
 
   _changeCheckboxValue = (event) ->
 
     event.preventDefault()

+ 2 - 2
src/modules/Lungo.Constants.coffee
Xem Tập Tin 

@@ -21,8 +21,8 @@ Lungo.Constants =
 
   QUERY:
 
     ARTICLE_ROUTER      : "[data-view-article]"
 
     SECTION_ROUTER      : "[data-view-section]"
 
-    ARTICLE_ROUTER_TOUCH: "header [data-view-article], footer [data-view-article], .groupbar [data-view-article]"
 
-    SECTION_ROUTER_TOUCH: "header [data-view-section], footer [data-view-section], .groupbar [data-view-section]"
 
+    ARTICLE_ROUTER_TOUCH: "header [data-view-article], footer [data-view-article], nav[data-control] [data-view-article]"
 
+    SECTION_ROUTER_TOUCH: "header [data-view-section], footer [data-view-section], nav[data-control] [data-view-section]"
 
     ARTICLE_ROUTER_TAP  : "article [data-view-article]"
 
     SECTION_ROUTER_TAP  : "article [data-view-section]"
 
     ASIDE_ROUTER        : "[data-view-aside]"

+ 3 - 0
src/stylesheets/constants.styl
Xem Tập Tin 

@@ -13,3 +13,6 @@ TRANSITION_TIME        = 400ms
 
 FONT_SIZE_TINY         = 11px
 
 FONT_SIZE_SMALL        = 0.9em
 
 FONT_SIZE_BIG          = 1.2em
 
+
 
+LIST_PADDING           = 14px
 
+LIST_PADDING_HORIZONTAL= (LIST_PADDING / 1.25)

+ 11 - 14
src/stylesheets/lungo.layout.list.styl
Xem Tập Tin 

@@ -10,19 +10,19 @@
 
 @import "constants.styl"
 
 
 .list
 
-  PAD = 14px
 
-  PAD_H = (PAD / 1.25)
 
+
 
   & li
 
     list-style-type: none
 
-    padding: PAD 0 (PAD - 1) 0
 
+    padding: LIST_PADDING LIST_PADDING_HORIZONTAL (LIST_PADDING - 1) LIST_PADDING_HORIZONTAL
 
     position: relative
 
 
+
 
     &, & a, & small, & .right
 
       font-weight: 300
 
 
     &.arrow::after
 
       position: absolute
 
-      right: PAD
 
+      right: LIST_PADDING
 
       top: 45%
 
       width: 6px
 
       height: 6px
 
@@ -39,32 +39,29 @@
 
       float: left
 
       line-height: 1.0em
 
       text-align: center
 
+      margin-right: LIST_PADDING_HORIZONTAL
 
+
 
     &:not(.thumb)
 
       & img, & .icon
 
-        margin-left: PAD_H
 
         width: S = 34px
 
         height: S
 
         font-size: 2.6em
 
     &.thumb
 
       & img, & .icon
 
-        margin-top: -(PAD)
 
-        height: S = 61px
 
+        margin-top: -(LIST_PADDING)
 
+        margin-left: -(LIST_PADDING_HORIZONTAL)
 
+
 
+        height: S = 60px
 
         width: S
 
         font-size: 3.6em
 
         line-height: 1.3em
 
 
     &.anchor
 
-      padding: (PAD_H / 2) PAD_H
 
+      padding: (LIST_PADDING_HORIZONTAL / 2) LIST_PADDING_HORIZONTAL
 
       line-height: 1.0em
 
       & .tag
 
         display: none
 
 
-    & strong, small, .text
 
-      padding-left: PAD_H
 
-
 
-    & .right
 
-      margin-right: PAD_H
 
-
 
     & strong
 
       position: relative
 
       font-size: FONT_SIZE_BIG

+ 46 - 43
src/stylesheets/lungo.layout.nav.styl
Xem Tập Tin 

@@ -56,7 +56,6 @@ nav
 
 
     & .icon ~ abbr
 
       margin-left: 4px
 
-      // float: right
 
 
     & .loading
 
       margin-top: .5em
 
@@ -64,9 +63,7 @@ nav
 
       & + .icon
 
         display: none
 
 
-
 
-
 
-  &.groupbar, footer &
 
+  &[data-control=groupbar], footer &
 
     display-box()
 
     box-pack(justify)
 
     width: 100%
 
@@ -78,7 +75,7 @@ nav
 
   /* ========================================================================= */
 
   /* =============================== GROUPBAR ================================ */
 
   /* ========================================================================= */
 
-  &.groupbar
 
+  &[data-control=groupbar]
 
     height: HEADER_GROUPBAR_HEIGHT
 
     width: 100%
 
     z-index: 2
 
@@ -100,6 +97,50 @@ nav
 
           left: 2px
 
 
 
+  /* ========================================================================= */
 
+  /* ================================= MENU ================================== */
 
+  /* ========================================================================= */
 
+  &[data-control=menu]
 
+    position: absolute
 
+    left: 0px
 
+    top: HEADER_HEIGHT
 
+    visibility: hidden
 
+    z-index: 2
 
+    width: inherit
 
+    text-align: center
 
+
 
+    transform translateY(-120%)
 
+    transition-property transform
 
+    transition-duration TRANSITION_TIME
 
+    transition-timing-function DEFAULT_TRANSITION
 
+    backface-visibility hidden
 
+
 
+    &.show
 
+      visibility: visible
 
+      transform translateY(0%)
 
+
 
+    &.icons
 
+      font-size: FONT_SIZE_TINY
 
+      & > a
 
+        width: 25%
 
+        float: left
 
+        padding: 10px 0
 
+        & > .icon
 
+          font-size: S = 32px
 
+          line-height: S
 
+          display: block
 
+
 
+    &:not(.icons)
 
+      font-size: FONT_SIZE_BIG
 
+      & > a
 
+        display: block
 
+        position: relative
 
+        padding: LIST_PADDING LIST_PADDING_HORIZONTAL (LIST_PADDING - 1) LIST_PADDING_HORIZONTAL
 
+        & > .icon
 
+          position: absolute
 
+          left: 0.5em
 
+          font-size: 1.5em
 
+
 
   /* ========================================================================= */
 
   /* ================================ FOOTER ================================= */
 
   /* ========================================================================= */
 
@@ -146,41 +187,3 @@ nav
 
         overflow: hidden
 
         white-space: nowrap
 
         text-overflow: ellipsis
 
-
 
-
 
-  /* ========================================================================= */
 
-  /* ================================= MENU ================================== */
 
-  /* ========================================================================= */
 
-  &[data-control=menu]
 
-    position: absolute
 
-    left: 0px
 
-    top: HEADER_HEIGHT
 
-    visibility: hidden
 
-    z-index: 2
 
-    width: inherit
 
-    font-size: FONT_SIZE_BIG
 
-    text-align: center
 
-
 
-    transform translateY(-120%)
 
-    transition-property transform
 
-    transition-duration TRANSITION_TIME
 
-    transition-timing-function DEFAULT_TRANSITION
 
-    backface-visibility hidden
 
-
 
-    &.show
 
-      visibility: visible
 
-      transform translateY(0%)
 
-
 
-    & > a
 
-      display: block
 
-      position: relative
 
-      padding: 14px 10px
 
-      text-shadow 0 1px 0 #111
 
-
 
-      &:active
 
-        border-color: transparent
 
-
 
-      & > .icon
 
-        position: absolute
 
-        left: 0.5em
 
-        font-size: 1.5em

+ 1 - 1
src/stylesheets/lungo.layout.styl
Xem Tập Tin 

@@ -54,7 +54,7 @@ aside
 
   &.active
 
     display-box()
 
   &.show
 
-    z-index: 1
 
+    z-index: 2
 
   &.right
 
     right: 0px

+ 1 - 1
src/stylesheets/lungo.widgets.notification.styl
Xem Tập Tin 

@@ -18,7 +18,7 @@ WINDOW_WIDTH = 280px
 
   left: 0
 
   width: 100%
 
   height: 100%
 
-  z-index: 3
 
+  z-index: 1980
 
   display: none
 
 
   & .window

+ 9 - 0
src/stylesheets/lungo.widgets.styl
Xem Tập Tin 

@@ -70,6 +70,15 @@ size = 5px
 
     margin-bottom: size
 
 
 
+/* ================================  CAROUSEL  ================================ */
 
+[data-view-menu]
 
+  &:after
 
+    content: "▼"
 
+    position: relative
 
+    top: -5px
 
+    left: 1px
 
+    font-size: FONT_SIZE_TINY
 
+
 
 /* ================================  CAROUSEL  ================================ */
 
 [data-control=carousel]
 
   overflow: hidden

+ 25 - 12
src/stylesheets/theme.lungo.styl
Xem Tập Tin 

@@ -58,7 +58,7 @@ section
 
     color: #fff
 
     border-radius 4px 4px 0 0
 
 
-  & > footer, & nav.groupbar
 
+  & > footer, & nav[data-control=groupbar]
 
     background-color: DARK
 
     box-shadow inset 0 3px 0 DARK_dark
 
   & > article, & > [data-control="pull"]
 
@@ -90,10 +90,10 @@ nav
 
       &:active
 
         color: darken(THEME, 50%)
 
 
-  section > &.groupbar > a.active
 
+  section > &[data-control=groupbar] > a.active
 
     box-shadow inset 0 -3px 0 THEME
 
 
-  section > footer > & > a, &.groupbar > a
 
+  section > footer > & > a, &[data-control=groupbar] > a
 
     color: NAV_LINK
 
     &.active
 
       color: NAV_LINK_ACTIVE
 
@@ -114,17 +114,30 @@ nav
 
     COLOR = DARK
 
     background: COLOR
 
     box-shadow 0 2px 0 rgba(0,0,0,0.15)
 
+
 
+    &.icons
 
+      background: rgba(0,0,0,0.8)
 
+      & > a
 
+        color: lighten(COLOR, 35%)
 
+        &:active > .icon
 
+          text-shadow: 0 0 32px #fff
 
+        & > .icon
 
+          color: #fff
 
+    &:not(.icons)
 
+      & > a
 
+        color: #fff
 
+        text-shadow 0 1px 0 #111
 
+        border-bottom: 1px solid darken(COLOR, 40%)
 
+        border-top: 1px solid lighten(COLOR, 5%)
 
+        &:active
 
+          background: #111
 
+          border-color: transparent
 
+        & > .icon
 
+          color: lighten(COLOR, 25%)
 
     & > a
 
-      color: #fff
 
-      text-shadow 0 1px 0 #111
 
       font-weight: 700
 
-      border-bottom: 1px solid darken(COLOR, 40%)
 
-      border-top: 1px solid lighten(COLOR, 5%)
 
-      &:active
 
-        background: #111
 
-        border-color: transparent
 
-      & > .icon
 
-        color: lighten(COLOR, 25%)
 
+
 
+
 
 
 
 /* -------------------------- LISTS -------------------------- */