add: support compact mode for mobile web, auto adapt to small screen/window

4 files changed, 242 insertions, 103 deletions

diff --git a/client/components/main/header.jade b/client/components/main/header.jade
index 0d178250..ff79617e 100644
--- a/client/components/main/header.jade
+++ b/client/components/main/header.jade
@@ -1,32 +1,32 @@
 template(name="header")
-  #header(class=currentBoard.colorClass)
-    //-
-      If the user is connected we display a small "quick-access" top bar that
-      list all starred boards with a link to go there. This is inspired by the
-      Reddit "subreddit" bar.
-      The first link goes to the boards page.
-    unless isSandstorm
-      if currentUser
-        #header-quick-access
-          ul
-            li
-              a(href="{{pathFor 'home'}}")
-                span.fa.fa-home
-                | {{_ 'all-boards'}}
-            each currentUser.starredBoards
-              li.separator -
-              li(class="{{#if $.Session.equals 'currentBoard' _id}}current{{/if}}")
-                a(href="{{pathFor 'board' id=_id slug=slug}}")
-                  = title
-            else
-              li.current {{_ 'quick-access-description'}}
+  //-
+    If the user is connected we display a small "quick-access" top bar that
+    list all starred boards with a link to go there. This is inspired by the
+    Reddit "subreddit" bar.
+    The first link goes to the boards page.
+  unless isSandstorm
+    if currentUser
+      #header-quick-access(class=currentBoard.colorClass)
+        ul
+          li
+            a(href="{{pathFor 'home'}}")
+              span.fa.fa-home
+              | {{_ 'all-boards'}}
+          each currentUser.starredBoards
+            li.separator -
+            li(class="{{#if $.Session.equals 'currentBoard' _id}}current{{/if}}")
+              a(href="{{pathFor 'board' id=_id slug=slug}}")
+                = title
+          else
+            li.current {{_ 'quick-access-description'}}
 
 
-          a#header-new-board-icon.js-create-board
-            i.fa.fa-plus(title="Create a new board")
+        a#header-new-board-icon.js-create-board
+          i.fa.fa-plus(title="Create a new board")
 
-          +headerUserBar
+        +headerUserBar
 
+  #header(class=currentBoard.colorClass)
     //-
       The main bar is a colorful bar that provide all the meta-data for the
       current page. This bar is contextual based.
@@ -34,13 +34,14 @@ template(name="header")
     #header-main-bar(class="{{#if wrappedHeader}}wrapper{{/if}}")
       +Template.dynamic(template=headerBar)
 
-      //-
-        On sandstorm, the logo shouldn't be clickable, because we only have one
-        page/document on it, and we don't want to see the home page containing
-        the list of all boards.
-      if isSandstorm
-        .wekan-logo
-          img(src="{{pathFor '/wekan-logo-header.png'}}" alt="Wekan")
-      else
-        a.wekan-logo(href="{{pathFor 'home'}}" title="{{_ 'header-logo-title'}}")
-          img(src="{{pathFor '/wekan-logo-header.png'}}" alt="Wekan")
+      if wrappedHeader
+        //-
+          On sandstorm, the logo shouldn't be clickable, because we only have one
+          page/document on it, and we don't want to see the home page containing
+          the list of all boards.
+        if isSandstorm
+          .wekan-logo
+            img(src="{{pathFor '/wekan-logo-header.png'}}" alt="Wekan")
+        else
+          a.wekan-logo(href="{{pathFor 'home'}}" title="{{_ 'header-logo-title'}}")
+            img(src="{{pathFor '/wekan-logo-header.png'}}" alt="Wekan")
diff --git a/client/components/main/header.styl b/client/components/main/header.styl
index 6decf2df..d9abe07f 100644
--- a/client/components/main/header.styl
+++ b/client/components/main/header.styl
@@ -5,75 +5,8 @@
   transition: background-color 0.4s
   background: #2980B9
 
-  #header-quick-access
-    background-color: rgba(0, 0, 0, 0.2)
-    padding: 0px 10px
-    height: 28px
-    font-size: 12px
-    display: flex
-
-    #header-user-bar,
-    #header-new-board-icon,
-    ul li
-      color: darken(white, 17%)
-
-      .fa
-        color: inherit
-
-      a:hover, a.is-active
-        color: white
-
-    ul
-      transition: opacity 0.2s
-      margin: 4px 0 0 5px
-      overflow: hidden
-
-      li
-        display: block
-        float: left
-        width: auto
-        color: darken(white, 15%)
-        padding: 2px 5px 0
-
-        &.current
-          color: darken(white, 5%)
-
-        &:first-child .fa-home
-          margin-right: 5px
-
-        a.js-create-board
-          margin-left: 5px
-
-    #header-user-bar,
-    #header-new-board-icon
-      flex-shrink: 0
-
-    #header-user-bar
-      margin: 2px 0
-
-      .header-user-bar-avatar
-        float: left
-
-        .member
-          width: 24px
-          height: @width
-          margin: 0
-          margin-top: 1px
-
-      .header-user-bar-name
-        margin: 4px 8px 0 0
-        float: left
-
-        i.fa-chevron-down
-          margin-right: 4px
-
-    #header-new-board-icon
-      flex-grow: 1
-      margin: 6px 5px 0
-      width: 12px
-
   #header-main-bar
-    height: 28px * 1.618034 - 6px
+    height: 40px
     padding: 7px 10px 0
 
     h1
@@ -155,3 +88,111 @@
       border-left: 1px solid rgba(255, 255, 255, .3)
       height: 24px
       float: left
+
+#header-quick-access
+  color: white
+  transition: background-color 0.4s
+  background: #2573a7
+  height: 28px
+  font-size: 12px
+  display: flex
+
+  #header-user-bar,
+  #header-new-board-icon,
+  ul li
+    color: darken(white, 17%)
+
+    .fa
+      color: inherit
+
+    a:hover, a.is-active
+      color: white
+
+  ul
+    transition: opacity 0.2s
+    margin: 4px 0 0 5px
+    overflow: hidden
+
+    li
+      display: block
+      float: left
+      width: auto
+      color: darken(white, 15%)
+      padding: 2px 5px 0
+
+      &.current
+        color: darken(white, 5%)
+
+      &:first-child .fa-home
+        margin-right: 5px
+
+      a.js-create-board
+        margin-left: 5px
+
+  #header-user-bar,
+  #header-new-board-icon
+    flex-shrink: 0
+
+  #header-user-bar
+    margin: 2px 0
+
+    .header-user-bar-avatar
+      float: left
+      position: relative
+      top: -5px
+      margin-right: 5px
+
+      .member
+        width: 24px
+        height: @width
+        margin: 0
+        margin-top: 1px
+
+    .header-user-bar-name
+      margin: 4px 8px 0 0
+      float: left
+
+      i.fa-chevron-down
+        margin-right: 4px
+
+  #header-new-board-icon
+    flex-grow: 1
+    margin: 6px 5px 0
+    width: 12px
+
+@media screen and (max-width: 800px)
+  #header
+    #header-main-bar
+      height: 40px
+
+      h1
+        display: none
+
+      .board-header-btns
+        margin-top: 0px
+
+      .board-header-btn
+        height: 32px
+        line-height: @height
+        font-size: 16px
+
+        i.fa
+          line-height: 32px
+
+          + span
+            display: none
+
+  #header-quick-access
+    transition: background-color 0.4s
+    width: 100%
+    padding: 10px 0px
+    z-index: 30
+    position: absolute
+    bottom: 0px
+
+    ul
+      width: calc(100% - 150px)
+      overflow: ellipsis
+
+      li
+        height: 28px
diff --git a/client/components/main/layouts.styl b/client/components/main/layouts.styl
index 0e50dd55..b364d91b 100644
--- a/client/components/main/layouts.styl
+++ b/client/components/main/layouts.styl
@@ -355,3 +355,15 @@ a
 @keyframes flexGrowIn
   from
     flex-basis: 0
+
+@media screen and (max-width: 800px)
+  #content
+    margin: 1px 0px 49px 0px
+    height: calc(100% - 96px)
+
+    > .wrapper
+      margin-top: 0px
+
+  .wrapper
+    height: 100%
+    margin: 0px
diff --git a/client/components/main/popup.styl b/client/components/main/popup.styl
index 8a685069..b7c9e264 100644
--- a/client/components/main/popup.styl
+++ b/client/components/main/popup.styl
@@ -83,7 +83,7 @@ $popupWidth = 300px
     transition: transform 0.2s
 
     .content
-      width: 300 - 20px
+      width: $popupWidth - 20px
       padding: 0 10px 10px
       float: left
 
@@ -243,3 +243,88 @@ $popupWidth = 300px
 
         &:hover
           text-decoration: underline
+
+@media screen and (max-width: 800px)
+  .pop-over
+    width: 100%
+    height: 100%
+    overflow: hidden
+    margin-top: 0px
+    border: 0px solid #dbdbdb
+
+    .header
+      color: white
+      background: #2980B9
+      height: 48px
+      padding: 0px 0px
+      border: 0px
+      margin: 0px 0px
+      width: 100%
+      position: absolute
+      top: 0px
+
+      .header-title
+        font-size: 20px
+        font-weight: normal
+        padding-top: 8px
+
+      .back-btn
+        width: 30px
+        padding: 8px 12px 8px 12px
+
+        i.fa
+          color: white
+
+      .close-btn
+        padding: 10px 12px
+
+        i.fa
+          font-size: 24px
+          color: white
+
+    .content-wrapper
+      width: 100%
+      height: calc(100% - 48px)
+      overflow-y: scroll
+      overflow-x: hidden
+      margin: 48px 0px 0px 0px
+
+    .content-container
+      width: 1000%
+      height: 100%
+      max-height: 100%
+
+      .content
+        width: calc(10% - 20px)
+        height: calc(100% - 20px)
+        padding: 10px
+
+        form
+          margin: 10px 10px
+          width: calc(100% - 20px)
+
+        p,
+        textarea,
+        input[type="text"],
+        input[type="email"],
+        input[type="password"],
+        input[type="file"]
+          margin: 4px 0 12px
+          width: 100%
+
+    .pop-over-list
+      li > a
+        width: calc(100% - 20px)
+        padding: 10px 10px
+        margin: 0px 0px
+        border-bottom: 1px solid #eee
+
+    hr
+      width: 100%
+      height: 20px
+      margin: 0px 0px
+      color: #eee
+
+    for depth in (1..6)
+      .popup-container-depth-{depth}
+        transform: translateX(- depth * 10%)