Inicio Explorar Axuda
Iniciar sesión
pwa
/
Lungo2.0.js
réplica de https://github.com/xabstract/Lungo2.0.js.git
2
0
Fork 0
Ficheiros Incidencias 0 Wiki
Explorar o código

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

Javi Jimenez Villar %!s(int64=13) %!d(string=hai) anos
pai
6b67f9a45e
achega
3b48604578
Modificáronse 10 ficheiros con 138 adicións e 85 borrados
Dividir vista Mostrar estatísticas de Diff
  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
Ver ficheiro 

@@ -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
Ver ficheiro 

@@ -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
Ver ficheiro 

@@ -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
Ver ficheiro 

@@ -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
Ver ficheiro 

@@ -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
Ver ficheiro 

@@ -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
Ver ficheiro 

@@ -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
Ver ficheiro 

@@ -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
Ver ficheiro 

@@ -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
Ver ficheiro 

@@ -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 -------------------------- */