dropdowns and more tweaks to new ui

misago/emberapp/app/components/pagination-aligned.js

@@ -3,5 +3,5 @@ import Ember from 'ember';
 export default Ember.Component.extend({
   tagName: 'nav',
 
-  classNames: ['pagination-aligned']
+  classNames: 'pager-aligned'
 });

misago/emberapp/app/styles/bootstrap/bootstrap.less

@@ -25,7 +25,7 @@
 @import "navbar.less";
 //@import "breadcrumbs.less";
 //@import "pagination.less";
-@import "pager.less";
+//@import "pager.less";
 @import "labels.less";
 @import "badges.less";
 //@import "jumbotron.less";

misago/emberapp/app/styles/misago/dropdowns.less

@@ -10,21 +10,36 @@
   .shadow-8dp();
 }
 
-.dropdown-menu>li>a {
-  font-size: @font-size-large;
-  font-weight: @weight-light;
+.dropdown-menu {
+  &>li {
+    &>a {
+      border-bottom: 1px solid @dropdown-link-border;
+      padding-top: @padding-base-vertical;
+      padding-bottom: @padding-base-vertical;
 
-  &>.material-icons {
-    margin-right: 8px;
+      font-size: @font-size-nav;
+      font-weight: @weight-light;
 
-    font-size: 22px;
-  }
+      &>.material-icons {
+        margin-right: 8px;
+        top: 1px;
+
+        font-size: 22px;
+      }
+
+      &>.badge {
+        float: right;
 
-  &>.badge {
-    float: right;
+        position: relative;
+        top: (@font-size-large - @font-size-base) / 2 + 1px;
+      }
+    }
 
-    position: relative;
-    top: (@font-size-large - @font-size-base) / 2 + 2px;
+    &:nth-last-of-type(1) {
+      &>a {
+        border-bottom: none;
+      }
+    }
   }
 }
 
@@ -99,4 +114,10 @@
   .dropdown-footer {
     margin-top: 8px;
   }
+
+  &>li:nth-last-of-type(2) {
+    &>a {
+      border-bottom: none;
+    }
+  }
 }

misago/emberapp/app/styles/misago/misago.less

@@ -12,6 +12,7 @@
 @import "modals.less";
 @import "navbar.less";
 @import "navs.less";
+@import "pagination.less";
 @import "page-header.less";
 @import "typo.less";
 @import "list-groups.less";

misago/emberapp/app/styles/misago/modals.less

@@ -4,7 +4,8 @@
 
 
 .modal-content {
-  .box-shadow(0px 0px 0px 4px rgba(0,0,0,.15));
+  border: none;
+  .shadow-16dp();
 }
 
 

misago/emberapp/app/styles/misago/navs.less

@@ -6,12 +6,12 @@
 // Pills on side of container
 .nav-side {
   &>a {
-    font-size: @font-size-large;
+    font-size: @font-size-nav;
     font-weight: @weight-light;
 
     .material-icons {
       margin-right: 8px;
-      top: 0px;
+      top: 1px;
 
       font-size: 22px;
     }
@@ -39,9 +39,68 @@
       color: @sidenav-active-color;
 
       .material-icons {
-        .opacity(.9);
+        .opacity(.8);
         color: @sidenav-hover-color;
       }
     }
   }
 }
+
+
+// Page tabs
+.page-header.tabbed {
+  padding-bottom: 0px;
+
+  .nav-tabs {
+    border-bottom: none;
+
+    margin-top: @line-height-computed / 2;
+    margin-bottom: -1px;
+
+    &>li {
+      &>a {
+        &, &:link, &:visited {
+          background-color: @nav-tab-bg;
+          border: none;
+          border-bottom: @nav-tabs-border-width solid @nav-tab-border;
+
+          margin: 0px;
+          padding: @nav-tabs-padding;
+
+          color: @nav-tab-color;
+          font-size: @font-size-nav;
+          font-weight: @weight-light;
+        }
+
+        &:hover, &:focus, &:active {
+          background-color: @nav-tab-hover-bg;
+          border-bottom-color: @nav-tab-hover-border;
+
+          color: @nav-tab-hover-color;
+        }
+
+        &:active {
+          border-bottom-color: @nav-tab-hover-color;
+        }
+      }
+
+      &.active {
+        a, a:link, a:visited, a:hover, a:focus, a:active {
+          background-color: @nav-tab-active-bg;
+          border-bottom-color: @nav-tab-active-border;
+
+          color: @nav-tab-active-color;
+        }
+      }
+    }
+  }
+
+  // Reset bottom margin on small displays and hide tabs
+  @media (max-width: @screen-sm-max) {
+    padding-bottom: ((@line-height-computed / 2) - 1);
+
+    .nav-tabs {
+      display: none;
+    }
+  }
+}

misago/emberapp/app/styles/misago/pagination.less

@@ -0,0 +1,64 @@
+//
+// Paginators and Pagers
+// --------------------------------------------------
+
+
+// Full-width pager
+.pager-aligned {
+  overflow: auto;
+
+  .btn {
+    .opacity(0.8);
+
+    .material-icons {
+      font-size: @font-size-base + 4px;
+    }
+  }
+
+  .btn-first-page, .btn-last-page {
+    .opacity(1);
+  }
+
+  .btn-previous-page {
+    float: left;
+    margin-right: 8px;
+  }
+
+  .btn-next-page {
+    float: right;
+    margin-left: 8px;
+  }
+
+  .btn-first-page {
+    .material-icons:first-child {
+      margin-right: @font-size-base * -1.25;
+    }
+  }
+
+  .btn-last-page {
+    .material-icons:last-child {
+      margin-left: @font-size-base * -1.25;
+    }
+  }
+
+  // Upscale buttons on small displays
+  @media (max-width: @screen-sm-max) {
+    .btn {
+      .material-icons {
+        font-size: @font-size-base * 2;
+      }
+    }
+
+    .btn-first-page {
+      .material-icons:first-child {
+        margin-right: @font-size-base * -1.75;
+      }
+    }
+
+    .btn-last-page {
+      .material-icons:last-child {
+        margin-left: @font-size-base * -1.75;
+      }
+    }
+  }
+}

misago/emberapp/app/styles/misago/variables.less

@@ -41,16 +41,16 @@
 //** Link hover decoration.
 @link-hover-decoration: underline;
 
-//** Site link styles
-@site-link-color:            #9e9e9e;
-@site-link-hover-color:      @text-color;
-@site-link-active-color:     @brand-accent;
-
 //** In-site navs states
-@state-default:         @gray-light;
+@state-default:         #9e9e9e;
 @state-hover:           @text-color;
-@state-clicked:         @brand-primary;
+@state-clicked:         @text-color;
+@state-active:          @brand-accent;
 
+//** Site link styles
+@site-link-color:            @state-default;
+@site-link-hover-color:      @state-hover;
+@site-link-active-color:     @state-clicked;
 
 //** Avatar radius
 @avatar-radius:             8px;
@@ -66,6 +66,9 @@
 @headings-color:          lighten(@text-color, 8%);;
 
 
+//** Nav link font size base
+@font-size-nav:           @font-size-base + 3px;
+
 //== Shadows
 //
 //##
@@ -322,6 +325,9 @@
 //** Active dropdown menu item background color.
 @dropdown-link-active-bg:        transparent;
 
+//** Dropdown link bottom border
+@dropdown-link-border:           darken(@dropdown-bg, 5%);
+
 //** Dropdown footer bg and border
 @dropdown-footer-border:         darken(@dropdown-bg, 10%);
 @dropdown-footer-bg:             darken(@dropdown-bg, 3%);
@@ -329,18 +335,36 @@
 
 //== Navs
 //
-//** Side nav
-@sidenav-color:                   @site-link-color;
+//##
+
+//== Side nav
+@sidenav-color:                   @state-default;
 @sidenav-border:                  @gray-lighter;
 @sidenav-bg:                      transparent;
 
-@sidenav-hover-color:             @site-link-hover-color;
+@sidenav-hover-color:             @state-hover;
 @sidenav-hover-bg:                transparent;
 
-@sidenav-active-color:            @site-link-active-color;
+@sidenav-active-color:            @state-active;
 @sidenav-active-border:           @gray-lighter;
 @sidenav-active-bg:               darken(@body-bg, 4%);
 
+//== Tabs
+@nav-tabs-border-width:           4px;
+@nav-tabs-padding:                10px 15px 6px;
+
+@nav-tab-color:                   @state-default;
+@nav-tab-bg:                      transparent;
+@nav-tab-border:                  transparent;
+
+@nav-tab-hover-color:             @state-hover;
+@nav-tab-hover-bg:                transparent;
+@nav-tab-hover-border:            @state-default;
+
+@nav-tab-active-color:            @state-hover;
+@nav-tab-active-bg:               transparent;
+@nav-tab-active-border:           @state-active;
+
 
 //== Editor
 //

misago/emberapp/app/templates/components/pagination-aligned.hbs

@@ -1,33 +1,29 @@
-<ul class="pager">
-  {{#if meta.first}}
-    <li class="previous">
-      {{#link-to (join-strings path ".index") model}}
-        {{gettext "Start"}}
-      {{/link-to}}
-    </li>
-  {{/if}}
+{{#if meta.first}}
+  {{#link-to (join-strings path ".index") model class="btn btn-default btn-previous-page btn-first-page"}}
+    <i class="material-icons">navigate_before</i>
+    <i class="material-icons">navigate_before</i>
+    <span class="hidden-xs hidden-sm">{{gettext "Start"}}</span>
+  {{/link-to}}
+{{/if}}
 
-  {{#if meta.previous}}
-    <li class="previous">
-      {{#link-to (join-strings path ".page") model meta.previous}}
-        {{gettext "Previous"}}
-      {{/link-to}}
-    </li>
-  {{/if}}
+{{#if meta.previous}}
+  {{#link-to (join-strings path ".page") model meta.previous class="btn btn-default btn-previous-page"}}
+    <i class="material-icons">navigate_before</i>
+    <span class="hidden-xs hidden-sm">{{gettext "Previous"}}</span>
+  {{/link-to}}
+{{/if}}
 
-  {{#if meta.last}}
-    <li class="next">
-      {{#link-to (join-strings path ".page") model meta.last}}
-        {{gettext "End"}}
-      {{/link-to}}
-    </li>
-  {{/if}}
+{{#if meta.next}}
+  {{#link-to (join-strings path ".page") model meta.last class="btn btn-default btn-next-page btn-last-page"}}
+    <span class="hidden-xs hidden-sm">{{gettext "End"}}</span>
+    <i class="material-icons">navigate_next</i>
+    <i class="material-icons">navigate_next</i>
+  {{/link-to}}
+{{/if}}
 
-  {{#if meta.next}}
-    <li class="next">
-      {{#link-to (join-strings path ".page") model meta.next}}
-        {{gettext "Next"}}
-      {{/link-to}}
-    </li>
-  {{/if}}
-</ul>
+{{#if meta.last}}
+  {{#link-to (join-strings path ".page") model meta.next class="btn btn-default btn-next-page"}}
+    <span class="hidden-xs hidden-sm">{{gettext "Next"}}</span>
+    <i class="material-icons">navigate_next</i>
+  {{/link-to}}
+{{/if}}

misago/emberapp/app/templates/options.hbs

@@ -1,6 +1,7 @@
 <div class="options-page">
   <div class="page-header">
     <div class="container">
+
       <h1 class="pull-left">{{gettext "Change Options"}}</h1>
 
       <div class="btn-group hidden-md hidden-lg pull-right">

misago/emberapp/app/templates/users.hbs

@@ -1,20 +1,51 @@
 <div class="users-page">
 
-  <div class="page-header">
+  <div class="page-header tabbed">
     <div class="container">
 
-      <h1>{{gettext "Users"}}</h1>
+      <h1 class="pull-left">{{gettext "Users"}}</h1>
+
+      <div class="btn-group hidden-md hidden-lg pull-right">
+        <button type="button" class="btn btn-default btn-icon dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          <i class="material-icons">menu</i>
+        </button>
+        <ul class="dropdown-menu">
+          {{#link-to "users.active" tagName="li" href=false}}
+            {{#link-to "users.active" activeClass=""}}
+              {{gettext "Most Active"}}
+            {{/link-to}}
+          {{/link-to}}
+
+          {{#if auth.user.acl.can_see_users_online_list}}
+            {{#link-to "users.online" tagName="li" href=false}}
+              {{#link-to "users.online" activeClass=""}}
+                {{gettext "Online Users"}}
+              {{/link-to}}
+            {{/link-to}}
+          {{/if}}
+
+          {{#each model as |rank|}}
+            {{#link-to "users.rank" rank tagName="li" href=false}}
+              {{#link-to "users.rank" rank activeClass=""}}
+                {{rank.name}}
+              {{/link-to}}
+            {{/link-to}}
+          {{/each}}
+        </ul>
+      </div>
+
+      <div class="clearfix"></div>
 
       <ul class="nav nav-tabs">
         {{#link-to "users.active" tagName="li" href=false}}
-          {{#link-to "users.active" bubbles=false activeClass=""}}
+          {{#link-to "users.active" activeClass=""}}
             {{gettext "Most Active"}}
           {{/link-to}}
         {{/link-to}}
 
         {{#if auth.user.acl.can_see_users_online_list}}
           {{#link-to "users.online" tagName="li" href=false}}
-            {{#link-to "users.online" bubbles=false activeClass=""}}
+            {{#link-to "users.online" activeClass=""}}
               {{gettext "Online Users"}}
             {{/link-to}}
           {{/link-to}}
@@ -22,7 +53,7 @@
 
         {{#each model as |rank|}}
           {{#link-to "users.rank" rank tagName="li" href=false}}
-            {{#link-to "users.rank" rank bubbles=false activeClass=""}}
+            {{#link-to "users.rank" rank activeClass=""}}
               {{rank.name}}
             {{/link-to}}
           {{/link-to}}