Главная Обзор Помощь
Вход
pwa
/
Lungo2.0.js
зеркало из https://github.com/xabstract/Lungo2.0.js.git
2
0
Ответвить 0
Файлы Задачи 0 Вики
Просмотр исходного кода

first approach

@soyjavi 13 лет назад
Родитель
701df54b64
Сommit
bfc4a16c62
14 измененных файлов с 317 добавлено и 158 удалено
Разделённый вид Показать статистику Diff
  1. 5 5
      example/app/sections/layout.html
  2. 115 0
      example/flexbox.html
  3. 2 1
      grunt.js
  4. 0 42
      src/stylesheets/lungo.layout.article.styl
  5. 0 24
      src/stylesheets/lungo.layout.aside.styl
  6. 76 0
      src/stylesheets/lungo.layout.elements.styl
  7. 2 2
      src/stylesheets/lungo.layout.nav.styl
  8. 28 83
      src/stylesheets/lungo.layout.styl
  9. 45 0
      src/stylesheets/lungo.layout.transition.styl
  10. 20 0
      src/stylesheets/lungo.media.phone.styl
  11. 22 0
      src/stylesheets/lungo.media.tablet.styl
  12. 0 0
      src/stylesheets/lungo.media.tv.styl
  13. 1 0
      src/stylesheets/lungo.widgets.notification.styl
  14. 1 1
      src/stylesheets/theme.lungo.styl

+ 5 - 5
example/app/sections/layout.html
Просмотреть файл 

@@ -15,6 +15,11 @@
 
         <a href="#layout-art4" data-router="article" data-label="Settings"></a>
 
     </nav>
 
 
+    <article id="layout-art1" class="active"></article>
 
+    <article id="layout-art2"></article>
 
+    <article id="layout-art3"></article>
 
+    <article id="layout-art4"></article>
 
+
 
     <footer>
 
         <nav>
 
             <a href="#layout-art1" data-router="article" data-icon="home" class="active"></a>
 
@@ -23,9 +28,4 @@
 
             <a href="#layout-art4" data-router="article" data-icon="settings"></a>
 
         </nav>
 
     </footer>
 
-
 
-    <article id="layout-art1" class="active"></article>
 
-    <article id="layout-art2"></article>
 
-    <article id="layout-art3"></article>
 
-    <article id="layout-art4"></article>
 
 </section>

+ 115 - 0
example/flexbox.html
Просмотреть файл 

@@ -0,0 +1,115 @@
 
+<!doctype html>
 
+<html>
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>Lungo 2.1 - SDK</title>
 
+    <meta name="description" content="">
 
+    <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
 
+    <meta name="HandheldFriendly" content="True">
 
+    <meta name="viewport" content="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">
 
+
 
+    <!-- Main Stylesheet -->
 
+    <link rel="stylesheet" href="components/lungo/lungo.css">
 
+    <link rel="stylesheet" href="components/lungo/lungo.icon.css">
 
+    <link rel="stylesheet" href="components/lungo/lungo.icon.brand.css">
 
+    <link rel="stylesheet" href="components/lungo/lungo.css">
 
+
 
+    <link rel="stylesheet" href="components/lungo/theme.lungo.css" id="theme-stylesheet">
 
+
 
+    <!-- App Stylesheet -->
 
+    <link rel="stylesheet" href="stylesheets/app.css">
 
+</head>
 
+
 
+<body class="app">
 
+    <aside id="features" class="left">
 
+        <header data-title="Features">
 
+            <nav class="right">
 
+                <a href="#" class="buttons" data-icon="settings"></a>
 
+            </nav>
 
+        </header>
 
+
 
+        <article class="list scroll active">
 
+            <ul>
 
+                <!-- Basic Layout -->
 
+                <li class="active">
 
+                    <a href="#layout-art1" data-router="article" data-title="Profile" class="active">
 
+                        <strong>Profile</strong></a>
 
+                </li>
 
+                <li>
 
+                    <a href="#layout-art2" data-router="article" data-title="Inbox">
 
+                        <div class="tag right">19</div>
 
+                        <strong>Inbox</strong></a>
 
+                </li>
 
+                <li>
 
+                    <a href="#layout-art3" data-router="article" data-title="Map"><strong>Map</strong></a>
 
+                </li>
 
+                <li>
 
+                    <a href="#layout-art4" data-router="article" data-title="Settings"><strong>Settings</strong></a>
 
+                </li>
 
+
 
+            </ul>
 
+        </article>
 
+
 
+        <footer>ASIDE/FOOTER</footer>
 
+    </aside>
 
+
 
+    <section id="main" data-transition="">
 
+        <header>
 
+            <nav class="left">
 
+                <a href="#features" data-router="aside" data-icon="menu"></a>
 
+            </nav>
 
+            <img src="http://cdn.tapquo.com/lungo/logo.png" class="title centered">
 
+            <nav class="right">
 
+                <a href="#second" data-router="section" class="button theme" data-icon="brand twitter"></a>
 
+            </nav>
 
+        </header>
 
+
 
+        <nav class="groupbar">
 
+            <a href="#layout-art1" data-router="article" data-label="Profile" class="active"></a>
 
+            <a href="#layout-art2" data-router="article" data-label="Inbox" data-count="19"></a>
 
+            <a href="#layout-art3" data-router="article" data-label="Map"></a>
 
+            <a href="#layout-art4" data-router="article" data-label="Settings"></a>
 
+        </nav>
 
+
 
+        <article id="layout-art1" class="active"></article>
 
+        <article id="layout-art2"></article>
 
+        <article id="layout-art3"></article>
 
+        <article id="layout-art4"></article>
 
+
 
+        <footer>
 
+            <nav>
 
+                <a href="#layout-art1" data-router="article" data-icon="home" class="active"></a>
 
+                <a href="#layout-art2" data-router="article" data-icon="inbox" data-count="19"></a>
 
+                <a href="#layout-art3" data-router="article" data-icon="compass"></a>
 
+                <a href="#layout-art4" data-router="article" data-icon="settings"></a>
 
+            </nav>
 
+        </footer>
 
+
 
+    </section>
 
+
 
+    <section id='second' data-transition="slide">
 
+        <header data-title='second' data-back="home"></header>
 
+        <footer class=''>
 
+            <nav class=''></nav>
 
+        </footer>
 
+
 
+        <article id='a' class='active'></article>
 
+    </section>
 
+
 
+    <!-- Lungo dependencies -->
 
+    <script src="components/quojs/quo.js"></script>
 
+    <script src="components/lungo/lungo.js"></script>
 
+
 
+    <!-- LungoJS - Sandbox App -->
 
+    <script>
 
+        Lungo.init({
 
+            name: 'Flexbox',
 
+            version: '2.2'
 
+        });
 
+    </script>
 
+</body>
 
+</html>

+ 2 - 1
grunt.js
Просмотреть файл 

@@ -28,7 +28,8 @@ module.exports = function(grunt) {
 
             'src/**/lungo.layout.styl',
 
             'src/**/lungo.layout.*.styl',
 
             'src/**/lungo.widgets.styl',
 
-            'src/**/lungo.widgets.*.styl'],
 
+            'src/**/lungo.widgets.*.styl',
 
+            'src/**/lungo.media.*.styl'],
 
         icons: ['src/**/lungo.icon**.styl'],
 
         themes: ['src/**/theme**.styl']
 
     },

+ 0 - 42
src/stylesheets/lungo.layout.article.styl
Просмотреть файл 

@@ -1,42 +0,0 @@
 
-/**
 
- * Stylesheet
 
- *
 
- * @namespace Lungo.Layout
 
- * @class Article
 
- *
 
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 
- */
 
-
 
-@import "constants.styl"
 
-
 
-article
 
-  position: absolute
 
-  top: 0
 
-  bottom: 0
 
-  width: inherit
 
-  height: auto
 
-  visibility: hidden
 
-  display: none
 
-  z-index: 0
 
-
 
-  .show > &.active, .hide > &.active, .hiding > &.active
 
-    visibility: visible
 
-    display: block
 
-    z-index: 1
 
-
 
-    &.pull
 
-      transition-property(transform)
 
-      transition-duration(TRANSITION_TIME)
 
-
 
-header
 
-  &:not(.extended) ~ article
 
-    top: HEADER_FOOTER_HEIGHT
 
-  &.extended ~ article
 
-    top: ARTICLE_WITH_HEADER_EXTENDED
 
-
 
-footer ~ article
 
-  bottom: HEADER_FOOTER_HEIGHT
 
-
 
-@media handheld, only screen and (min-width: 768px)
 
-  article.aside
 
-    transform(translate3d(0px, 0, 0))

+ 0 - 24
src/stylesheets/lungo.layout.aside.styl
Просмотреть файл 

@@ -9,27 +9,12 @@
 
 
 @import "constants.styl"
 
 
-section.aside
 
-  &:not(.small)
 
-    transform translateX(ASIDE_WIDTH)
 
-  &.small
 
-    transform translateX(ASIDE_WIDTH_SMALL)
 
 
-  &.right
 
-    transform translateX(-(ASIDE_WIDTH))
 
-    &.small
 
-      transform translateX(-(ASIDE_WIDTH_SMALL))
 
 
 aside
 
-  position: absolute
 
-  top: 0
 
-  bottom: 0
 
-  height: inherit
 
   width: ASIDE_WIDTH
 
   visibility: hidden
 
   z-index: -1
 
-
 
-
 
   &.show
 
     z-index: 0
 
     visibility: visible
 
@@ -37,15 +22,6 @@ aside
 
   &.right
 
     right: 0px
 
 
-  & header, footer
 
-    position: relative
 
-    left: none
 
-    height: HEADER_FOOTER_HEIGHT
 
-
 
-  & footer
 
-    position: absolute
 
-    bottom: 0
 
-
 
   &.small
 
     width: ASIDE_WIDTH_SMALL
 
     & nav

+ 76 - 0
src/stylesheets/lungo.layout.elements.styl
Просмотреть файл 

@@ -0,0 +1,76 @@
 
+/**
 
+ * Stylesheet
 
+ *
 
+ * @namespace Lungo.Layout
 
+ * @class Article
 
+ *
 
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 
+ */
 
+
 
+@import "constants.styl"
 
+
 
+
 
+/* ========================================================================= */
 
+/* ============================= HEADER/FOOTER ============================= */
 
+/* ========================================================================= */
 
+header, footer
 
+  height: HEADER_FOOTER_HEIGHT
 
+  line-height: HEADER_FOOTER_HEIGHT
 
+
 
+  // display-box()
 
+  // box-pack(justify)
 
+  // box-orient(horizontal)
 
+  // overflow: hidden
 
+
 
+  & > nav
 
+    box-flex(0)
 
+
 
+  & > .title
 
+    margin: 0 4px
 
+    float: left
 
+    z-index: -1
 
+    font-size: (FONT_SIZE_BIG * 1.2)
 
+    z-index: 0
 
+    box-flex(1)
 
+
 
+    &.centered
 
+      position: absolute
 
+      left: 32px
 
+      right: 32px
 
+      text-align: center
 
+      display: inline-block
 
+
 
+  & img.title
 
+    PAD = 18px
 
+    height: (HEADER_FOOTER_HEIGHT - PAD)
 
+    margin: (PAD / 2) auto
 
+
 
+
 
+/* ========================================================================= */
 
+/* ================================ ARTICLE ================================ */
 
+/* ========================================================================= */
 
+article
 
+  visibility: hidden
 
+  display: none
 
+
 
+  .show > &.active, .hide > &.active, .hiding > &.active
 
+    visibility: visible
 
+    display: block
 
+    z-index: 1
 
+
 
+    &.pull
 
+      transition-property(transform)
 
+      transition-duration(TRANSITION_TIME)
 
+
 
+header
 
+  &:not(.extended) ~ article
 
+    top: HEADER_FOOTER_HEIGHT
 
+  &.extended ~ article
 
+    top: ARTICLE_WITH_HEADER_EXTENDED
 
+
 
+footer ~ article
 
+  bottom: HEADER_FOOTER_HEIGHT
 
+
 
+@media handheld, only screen and (min-width: 768px)
 
+  article.aside
 
+    transform(translate3d(0px, 0, 0))

+ 2 - 2
src/stylesheets/lungo.layout.nav.styl
Просмотреть файл 

@@ -68,8 +68,8 @@ nav
 
 
 
   &.groupbar
 
-    position: relative
 
-    top: HEADER_FOOTER_HEIGHT
 
+    // position: relative
 
+    // top: HEADER_FOOTER_HEIGHT
 
     height: HEADER_GROUPBAR_HEIGHT
 
     width: 100%
 
     z-index: 2

+ 28 - 83
src/stylesheets/lungo.layout.styl
Просмотреть файл 

@@ -9,97 +9,42 @@
 
 
 @import "constants.styl"
 
 
+body, html
 
+  height: 100%
 
+  width: 100%
 
+  margin: 0
 
+  padding: 0
 
+  overflow: hidden
 
+
 
 body
 
-  &[data-position="absolute"] > section
 
-    position: absolute
 
+  // &[data-position="absolute"] > section
 
+  //   position: absolute
 
 
-  &[data-position="fixed"] > section
 
-    position: fixed
 
+  // &[data-position="fixed"] > section
 
+  //   position: fixed
 
 
   & [data-transition]
 
-    display: block !important
 
+    // display: block !important
 
+    display-box()
 
     transition-property( opacity, z-index, transform )
 
     transition-duration( TRANSITION_TIME )
 
     transition-timing-function( DEFAULT_TRANSITION )
 
     backface-visibility( hidden )
 
 
-section
 
-  top:  0
 
-  left:  0
 
-  width: 100%
 
-  height: 100%
 
-  z-index: 1
 
-  display: none
 
-  &.show
 
-    z-index: 2
 
-    display: block
 
-
 
-  /* Transition: POP */
 
-  &[data-transition="pop"]
 
-    opacity: 0
 
-    transform( scale(1.15) )
 
-    &.show
 
-      transform( scale(1) )
 
-      opacity: 1
 
-    &.hide
 
-      transform( scale(0.9) )
 
-      opacity: 0
 
-
 
-  /* Transition: SLIDE */
 
-  &[data-transition="slide"]
 
-    transform( translateX(100%) )
 
-    visibility: visible !important
 
-    &.show
 
-      transform( translateX(0%) )
 
-    &.hide
 
-      transform( translateX(-100%) )
 
-
 
-  /* Transition: COVER */
 
-  &[data-transition="cover"]
 
-    transform( translateY(110%) )
 
-    &.show, &.hide
 
-      transform( translateY(0%) )
 
-
 
-  /* Transition: FADE */
 
-  &[data-transition="fade"]
 
-    opacity: 0
 
-    &:first-child, &.show
 
-      opacity: 1
 
-    &:hide
 
-      opacity: 0
 
-
 
-
 
-header, footer
 
-  position: absolute
 
-  left: 0
 
-  width: 100%
 
-  display: block
 
-  z-index: 3
 
-
 
-header
 
-  top: 0
 
-  height: HEADER_FOOTER_HEIGHT
 
-  line-height: HEADER_FOOTER_HEIGHT
 
-
 
-  & .title
 
-    margin-left: 4px
 
-    float: left
 
-    z-index: -1
 
-    font-size: (FONT_SIZE_BIG * 1.2)
 
-
 
-    &.centered
 
-      position: absolute
 
-      left: 32px
 
-      right: 32px
 
-      text-align: center
 
-      display: inline-block
 
-
 
-  & img.title
 
-    PAD = 18px
 
-    height: (HEADER_FOOTER_HEIGHT - PAD)
 
-    margin: (PAD / 2) auto
 
+  & > aside, > section
 
+    display-box()
 
+    box-orient(vertical)
 
+    height: inherit
 
+    & header, footer
 
+      box-flex(0)
 
+      z-index: 3
 
+    & article
 
+      box-flex(1)
 
+      z-index: 0
 
 
+section
 
+  z-index: 2
 
+  &:not(.show)
 
+    z-index: 1
 
+    display: none
 
 
-footer
 
-  bottom: 0
 
-  height: HEADER_FOOTER_HEIGHT

+ 45 - 0
src/stylesheets/lungo.layout.transition.styl
Просмотреть файл 

@@ -0,0 +1,45 @@
 
+/**
 
+ * Stylesheet
 
+ *
 
+ * @namespace Lungo
 
+ * @class Layout
 
+ *
 
+ * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 
+ */
 
+
 
+@import "constants.styl"
 
+
 
+section
 
+  /* Transition: POP */
 
+  &[data-transition="pop"]
 
+    opacity: 0
 
+    transform( scale(1.15) )
 
+    &.show
 
+      transform( scale(1) )
 
+      opacity: 1
 
+    &.hide
 
+      transform( scale(0.9) )
 
+      opacity: 0
 
+
 
+  /* Transition: SLIDE */
 
+  &[data-transition="slide"]
 
+    transform( translateX(100%) )
 
+    visibility: visible !important
 
+    &.show
 
+      transform( translateX(0%) )
 
+    &.hide
 
+      transform( translateX(-100%) )
 
+
 
+  /* Transition: COVER */
 
+  &[data-transition="cover"]
 
+    transform( translateY(110%) )
 
+    &.show, &.hide
 
+      transform( translateY(0%) )
 
+
 
+  /* Transition: FADE */
 
+  &[data-transition="fade"]
 
+    opacity: 0
 
+    &:first-child, &.show
 
+      opacity: 1
 
+    &:hide
 
+      opacity: 0

+ 20 - 0
src/stylesheets/lungo.media.phone.styl
Просмотреть файл 

@@ -0,0 +1,20 @@
 
+@import "constants.styl"
 
+
 
+/* ==== Any phone ==== */
 
+@media only screen and (max-width: 767px)
 
+  aside
 
+    position: absolute
 
+
 
+  section
 
+    &.aside
 
+      &:not(.small)
 
+        transform translateX(ASIDE_WIDTH)
 
+      &.small
 
+        transform translateX(ASIDE_WIDTH_SMALL)
 
+
 
+      &.right
 
+        transform translateX(-(ASIDE_WIDTH))
 
+        &.small
 
+          transform translateX(-(ASIDE_WIDTH_SMALL))
 
+
 
+

+ 22 - 0
src/stylesheets/lungo.media.tablet.styl
Просмотреть файл 

@@ -0,0 +1,22 @@
 
+@import "constants.styl"
 
+
 
+/* ==== Tablet ==== */
 
+@media only screen and (min-width: 768px) and (max-width: 1280px)
 
+
 
+  body
 
+    display-box()
 
+    box-pack(justify)
 
+    box-orient(horizontal)
 
+    overflow: hidden
 
+
 
+  aside
 
+    z-index: 0
 
+    visibility: visible
 
+    position: relative
 
+    & > article
 
+      visibility: visible !important
 
+      display: block !important
 
+      z-index: 1
 
+
 
+  section
 
+    box-flex(1)

src/stylesheets/lungo.media.styl → src/stylesheets/lungo.media.tv.styl
Просмотреть файл


+ 1 - 0
src/stylesheets/lungo.widgets.notification.styl
Просмотреть файл 

@@ -16,6 +16,7 @@ WINDOW_WIDTH = 280px
 
 .notification
 
   position: absolute
 
   top: 0
 
+  left: 0
 
   width: 100%
 
   height: 100%
 
   z-index: 3

+ 1 - 1
src/stylesheets/theme.lungo.styl
Просмотреть файл 

@@ -34,7 +34,7 @@ THEME_dark      = darken(THEME, 15%)
 
 
 /* -------------------------- DEFAULTS -------------------------- */
 
 body
 
-  background-color: DARK
 
+  background-color: #000
 
   color: COLOR
 
   font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
 
   font-weight: 400