refactor(bs3): start porting app, general layout and filters

public/css/filters.styl

@@ -1,36 +1,19 @@
-/* Filters */
 .filters
-  padding-left: 19px
-  padding-right: 19px
   
-.filters .nav
-  margin-bottom: 0
-
-.filter-description
-  margin-top: 7px
-  margin-right: 7px
-
-/* Filters applied to tasks */
-.task.filtered-out
-  display: none
-
-.tag-label:hover
-  background-color: #3a87ad
-  cursor: pointer
-
- .tag-editing
- 	padding 2px 0 0 2px
-
- .tag-editing .tag-editing-pill
- 	height:auto
+  margin-top: 5px
+  margin-bottom: 5px
   
-.tag-list
-  overflow-y: auto
-  white-space: nowrap
-  
-  .nav-pills
-    height: 43px
-    
-    li
-      display: inline-block
-      float: none
+  .filter-description
+    margin-top: 7px
+    margin-right: 7px
+    padding-left: 7px
+
+  .input-group 
+    float: left
+    width: 1px // Trick for proper alignment
+    margin-left: 3px
+    margin-right: 3px
+    margin-top: 5px
+
+    .form-control
+      width: auto

public/css/index.styl

@@ -40,8 +40,7 @@ html,body,p,h1,ul,li,table,tr,th,td
   -webkit-box-sizing: border-box
   -moz-box-sizing: border-box
   box-sizing: border-box
-
-* { font-family: "Lato", sans-serif }
+  font-family: "Lato", sans-serif
 
 hr
   border-top: 0
@@ -79,8 +78,7 @@ div.tooltip-inner {
 /*html, body {height: 100%;}*/
 #wrap
   z-index:-1
-#main
-  padding-bottom: 250px; /* don't know why this works, sticky footers are weird */
+  padding: 0 15px // Required by Bootstrap 3 when using .container-fluid
 
 @media (max-width: 600px) {
   #wrap {
@@ -172,6 +170,9 @@ div.tooltip-inner {
 a
   cursor: pointer
 
+a span.glyphicon
+  color: #333 // Takes base color from bootstrap
+
 #modalMember p
     word-wrap: break-word
 

views/index.jade

@@ -3,9 +3,12 @@ doctype 5
 html(ng-app="habitrpg", ng-controller="RootCtrl", ng-class='{"applying-action":applyingAction}', ui-keyup="{27:'castCancel()'}")
   head
     title=env.t('titleIndex')
-
     // ?v=1 needed to force refresh
-    link(rel='shortcut icon', href='#{env.getBuildUrl("favicon.ico")}?v=2')
+    link(rel='shortcut icon', href='#{env.getBuildUrl("favicon.ico")}?v=3')
+
+    meta(charset='utf-8')
+    meta(name='viewport', content='width=device-width, initial-scale=1.0')
+    meta(name='apple-mobile-web-app-capable', content='yes')
 
     script(type='text/javascript').
       window.env = !{JSON.stringify(env)};
@@ -19,8 +22,7 @@ html(ng-app="habitrpg", ng-controller="RootCtrl", ng-class='{"applying-action":a
 
     //webfonts
     link(href='//fonts.googleapis.com/css?family=Lato:300,400,700,400italic,700italic', rel='stylesheet', type='text/css')
-    meta(name='viewport', content='width=device-width')
-    meta(name='apple-mobile-web-app-capable', content='yes')
+
 
   body(ng-cloak)
     div(ng-controller='GroupsCtrl')
@@ -32,14 +34,13 @@ html(ng-app="habitrpg", ng-controller="RootCtrl", ng-class='{"applying-action":a
       include ./options/index
 
       #notification-area(ng-controller='NotificationCtrl')
-      #wrap
-
+      #wrap.container-fluid
         //if they hide the header, we still need user-menu visible 
         div(ng-if='user.preferences.hideHeader')
           include ./shared/header/menu
 
-        .exp-chart(ng-show='charts.exp')
-
-        #main(ui-view)
+        .row
+          .col-md-12.exp-chart(ng-show='charts.exp')
+          #main(ui-view)
 
       include ./shared/footer

views/main/filters.jade

@@ -1,4 +1,4 @@
-.filters.tag-list(ng-controller='FiltersCtrl')
+.filters.col-md-12(ng-controller='FiltersCtrl')
   .pull-left.filter-description
     =env.t('tags')
     |:
@@ -6,20 +6,21 @@
     li
       a(rel='tooltip', title=env.t('editTags'), ng-click='saveOrEdit()')
         span.glyphicon(ng-class='{"glyphicon-ok": _editing, "glyphicon-pencil": !_editing}')
-    li(bindonce='user.tags', ng-class='{active: user.filters[tag.id]}', ng-repeat='tag in user.tags', style='position: relative;')
-      .input-append.option-group.tag-editing(ng-show='_editing')
-        input.input.input-small.option-content.tag-editing-pill(type='text', ng-model='tag.name')
-        span.add-on.tag-editing-pill
-          a.pull-right(ng-click='user.ops.deleteTag({params:{id:tag.id}})')
+    li(bindonce='user.tags', ng-class='{active: user.filters[tag.id]}', ng-repeat='tag in user.tags')
+      .input-group(ng-show='_editing')
+        input.form-control.input-sm(type='text', ng-model='tag.name')
+        span.input-group-addon
+          a(ng-click='user.ops.deleteTag({params:{id:tag.id}})')
             span.glyphicon.glyphicon-trash
       a(ng-hide='_editing', ng-click='toggleFilter(tag)')
         span.glyphicon.glyphicon-bullhorn(bo-if="tag.challenge")
         markdown(ng-model='tag.name',style='display: inline-block')
     li
       form.form-inline(ng-show='_editing', ng-submit='createTag(_newTag)')
-        .input-append.tag-editing
-          input.span2.tag-editing-pill(type='text', ng-model='_newTag', placeholder=env.t('newTag'))
-          button.add-on.tag-editing-pill(type='submit')=env.t('add')
+        .input-group
+          input.form-control.input-sm(type='text', ng-model='_newTag', placeholder=env.t('newTag'))
+          span.input-group-addon(type='submit')
+            =env.t('add')
     // <li class="{#unless activeFilters(users[_userId].filters)}hidden{/}">
     li
       a(rel='tooltip', title=env.t('clearFilters'), ng-click='user.filters = {}')

views/static/layout.jade

@@ -12,6 +12,11 @@ html
     meta(charset='utf-8')
     meta(name='viewport', content='width=device-width, initial-scale=1.0')
 
+    style.
+      [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
+        display: none;
+      }
+
     != env.getManifestFiles("static")
 
   body