joshua update for groups and orbit bar

app/assets/javascripts/group.js

@@ -8,13 +8,14 @@
         // Detect and change the top position of the cycle navs
         cycleFix: function() {
             if (doc.querySelectorAll(".group-show-post-banner-image").length >= 1) {
-                var imgs = doc.querySelectorAll(".group-post-banner-image"),
+                var imgs = doc.querySelectorAll(".group-show-post-banner-image"),
                     cycleNav = doc.querySelectorAll(".cycle-nav"),
                     len = cycleNav.length,
                     i = -1;
 
 
                 // Hide the navs when there's noly one slide
+                console.log(imgs.length)
                 if (imgs.length <= 1) {
                     for (i = 0; i < len; i++) {
                         cycleNav[i].classList.add("hide");
@@ -70,21 +71,28 @@
             }
         },
         // Bootstrap dropdown is too much of a hassle, using this instead
-        makeDropdown: function() {
+        makeDropdown: function(container, toggle, dropdown, kls) {
-            var $post = $('.group-post'),
+            var $container = $(container),
-                $toggle = $('.group-post-dropdown-toggle'),
+                $toggle = $container.find(toggle),
-                $dropdown = $post.find('.group-post-dropdown'),
+                $dropdown = $container.find(dropdown),
                 klass = 'open';
-            $toggle.click(function() {
+
+            $toggle.click(function(e) {
+                if ($(this).hasClass(klass)) {
+                    $toggle.removeClass(klass);
+                    $dropdown.removeClass(klass);
+                } else {
                     $toggle.removeClass(klass);
                     $dropdown.removeClass(klass);
                     $(this)
                         .addClass(klass)
-                    .next('.group-post-dropdown')
+                        .next(dropdown)
-                    .toggleClass(klass)
+                        .addClass(klass)
+                }
                 return false;
             });
-            $post.click(function() {
+
+            $(document.body).click(function() {
                 $toggle.removeClass(klass)
                 $dropdown.removeClass(klass);
             });
@@ -105,7 +113,15 @@
         if (doc.querySelector('.group-post')) {
             group.scrollEffect();
             group.makePostClick();
-            group.makeDropdown();
+            group.makeDropdown('.group-post', '.group-post-dropdown-toggle', '.group-post-dropdown');
+        }
+
+        if (doc.querySelector('.group-card')) {
+            group.makeDropdown('.group-public', '.group-card-dropdown-toggle', '.group-card-dropdown');
+        }
+
+        if (doc.querySelector('.group-index')) {
+            group.makeDropdown('.group-index', '.group-card-dropdown-toggle', '.group-card-dropdown');
         }
 
         group.cycleFix();

app/assets/stylesheets/basic/orbit_bar.css.erb

@@ -318,9 +318,9 @@
 	}
 }
 
-@media (max-width: 540px) {
+@media (max-width: 640px) {
 	#orbit-bar .orbit-bar-search-sign-language #search input[type="search"] {
-		width: 130px;
+		width: 100px;
 	}
 }
 

app/assets/stylesheets/lib/group/_group-category.scss

@@ -24,7 +24,7 @@
 
 .group-category-item {
     float: left;
-    margin-right: 0.625rem;
+    margin: 0 0.625rem 1rem 0;
     background-color: $green;
 
     &:hover {

app/assets/stylesheets/lib/group/_group-classes.scss

@@ -139,6 +139,62 @@
     }
 }
 
+
+.action {
+    position: relative;
+    .toggle {
+        border: none;
+        border-left: 1px solid darken($gray, 6%);
+        border-bottom: 1px solid darken($gray, 6%);
+        background: none;
+        padding: 2px 8px;
+        transition: $fast all;
+    }
+
+    &:hover, &.open {
+        border-top-right-radius: $general;
+        background: $blue;
+
+        .caret {
+            border-top-color: $white;
+        }
+    }
+    .caret {
+        border-top-color: darken($gray, 30%);
+        vertical-align: middle;
+    }
+
+
+    .action-dropdown {
+        display: none;
+        position: absolute;
+        right: 0;
+        top: 102%;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        background: $white;
+        border: 1px solid darken($gray, 6%);
+        border-radius: $general;
+        box-shadow: 0 1px 3px 0 rgba($black, 0.2);
+
+        a {
+            display: block;
+            padding: 3px 12px;
+            white-space: nowrap;
+
+            &:hover {
+                color: $white;
+                background-color: $blue;
+            }
+        }
+
+        &.open {
+            display: block;
+        }
+    }
+}
+
 .card {
     border-radius: $general;
     background: $white;

app/assets/stylesheets/lib/group/_group-index.scss

@@ -1,23 +1,43 @@
 @charset "utf-8";
 
 // Group index and public
-.group-index {}
+#main-wrap .wrap-inner {
+    padding: 80px 20px 20px;
+}
 
-.group-public {
+.group-public,
+.group-index {
     margin: auto;
-    max-width: $boundary;
+    max-width: 1500px;
 }
 
 .group-card {
     list-style: none;
     margin-bottom: 20px;
+}
 
+.group-card-action {
+    position: absolute;
+    right: 12px;
+    top: 6px;
+    z-index: 200;
+
+    .group-card-dropdown-toggle {
+        border: 1px solid darken($gray, 6%);
+        border-radius: $general;
+
+        &:hover {
+            border-radius: $general;
+        }
+    }
+    .group-card-dropdown {}
 }
 
 .group-card-inner {
-    padding: 1rem 1.25rem;
+    padding: 2.6rem 0.8rem;
     position: relative;
     min-height: 280px;
+
     hr {
         margin: 8px 0 10px 0;
     }
@@ -29,10 +49,13 @@
     height: 200px;
     overflow: hidden;
     background: $dark-gray;
+    z-index: 100;
+
     &:hover .action {
         z-index: 600;
         opacity: 1;
     }
+
     img {
         width: 100%;
         height: auto;
@@ -44,6 +67,7 @@
         z-index: 500;
         margin: auto;
     }
+
     .action {
         opacity: 0;
         background: rgba($blue, 0.9);
@@ -54,6 +78,7 @@
         left: 0;
         margin: auto;
     }
+
     .edit {
         color: $white;
         font-size: 25px;
@@ -63,6 +88,7 @@
         transform: translate(-50%, -50%);
         margin: auto;
     }
+
     .trash {
         color: $red;
         font-size: 25px;
@@ -88,14 +114,17 @@
     margin: 0;
     padding: 0;
     font-family: $sub-font;
+
     .label {
         font-family: $main-font;
         text-transform: capitalize;
         text-shadow: none;
     }
+
     .label.private {
         background-color: $red;
     }
+
     .label.public {
         background-color: #74c25d;
     }
@@ -115,25 +144,29 @@
     margin-bottom: 4px;
 }
 
-@media screen and (min-width: 370px) {
+// 370px
+@media screen and (min-width: 23.125rem) {
     .group-index {
-        margin-top: 50px;
         width: 90%;
     }
+
     .group-card {
         width: 100%;
     }
 }
 
-@media screen and (min-width: 600px) {
+// 600px
+@media screen and (min-width: 37.5rem) {
     .group-index {
         margin-top: 0;
         width: 100%;
     }
+
     .group-card {
         float: left;
         padding: 0 0.5rem;
         width: 50%;
+
         &:nth-child(2n+1) {
             clear: both;
             padding-left: 0;
@@ -141,29 +174,53 @@
     }
 }
 
-@media screen and (min-width: 900px) {
+// 900px
+@media screen and (min-width: 56.25rem) {
     .group-card {
         width: 33.3%;
+
         &:nth-child(2n+1) {
             clear: none;
             padding-left: 0.5rem;
         }
+
         &:nth-child(3n+1) {
             clear: both;
             padding-left: 0;
         }
     }
 }
+
+// 67.5rem
 @media screen and (min-width: 1080px) {
     .group-card {
         width: 25%;
+
         &:nth-child(3n+1) {
             clear: none;
             padding-left: 0.5rem;
         }
+
         &:nth-child(4n+1) {
             clear: both;
             padding-left: 0;
         }
     }
 }
+
+// 1400px
+@media screen and (min-width: 1400px) {
+    .group-card {
+        width: 20%;
+
+        &:nth-child(4n+1) {
+            clear: none;
+            padding-left: 0.5rem;
+        }
+
+        &:nth-child(5n+1) {
+            clear: both;
+            padding-left: 0;
+        }
+    }
+}

app/assets/stylesheets/lib/group/_group-post.scss

@@ -35,7 +35,7 @@
 }
 
 .group-post-bar {
-    padding: 0 2rem 20px 6rem;
+    padding: 0 2rem 0 6rem;
     text-align: center;
     background: rgba(25, 27, 29, 0.95);
     width: 100%;
@@ -58,7 +58,7 @@
     color: $white;
     font-family: $main-font;
     font-weight: normal;
-    max-width: 80%;
+    max-width: 100%;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -156,10 +156,12 @@
     &:hover, &.open {
         border-top-right-radius: $general;
         background: $blue;
+
         .caret {
             border-top-color: $white;
         }
     }
+
     .caret {
         border-top-color: darken($gray, 30%);
         vertical-align: middle;
@@ -177,12 +179,13 @@
     background: $white;
     border: 1px solid darken($gray, 6%);
     border-radius: $general;
-    box-shadow: 0 1px 3px 0 rgba($black, .2);
+    box-shadow: 0 1px 3px 0 rgba($black, 0.2);
 
     a {
         display: block;
         padding: 3px 12px;
         white-space: nowrap;
+
         &:hover {
             color: $white;
             background-color: $blue;
@@ -265,7 +268,7 @@
     }
 
     .group-post-new-post {
-        margin-top: 18px;
+        margin-top: 12px;
         padding: 6px 10px;
     }
 
@@ -283,7 +286,7 @@
 
     .group-post-view-switch-in-bar {
         display: inline-block;
-        margin-top: 18px;
+        margin-top: 12px;
 
         .button {
             padding: 4px .75rem;

app/assets/stylesheets/lib/group/_group-show-post.scss

@@ -249,6 +249,7 @@
         overflow: hidden;
         vertical-align: middle;
         width: 80px;
+        white-space: nowrap;
     }
 }
 

app/assets/stylesheets/lib/group/group-admin.scss

@@ -77,6 +77,11 @@ body {
         }
     }
 }
+.select2-result-label {
+    > span {
+        white-space: nowrap;
+    }
+}
 
 .wrap-inner {
     .upload-status-notice {
@@ -94,7 +99,12 @@ body {
         z-index: 3000;
     }
 }
-
+.fileupload {
+    .thumbnail {
+        max-width: 60%;
+        height: auto;
+    }
+}
 .img-avatar {
     width: 50px;
     height: 50px;

app/views/admin/groups/_group.html.erb

@@ -8,14 +8,23 @@
 %>  
 <li class="group-card animated bounceInDown" data-group-id="<%= group.id.to_s %>">
   <div class="group-card-inner card-ownership <%= current_user_is_group_admin ? "card-owner" : (current_user_is_group_member ? "card-member" : "card-public") %> card">
-    <div class="group-avatar">
-      <p></p>
      <% if current_user_is_group_admin %>
-        <div class="action">
+    <div class="group-card-action action">
-          <%= link_to(content_tag(:i, nil, :class => 'icon-edit'),edit_admin_group_path(group),:class=>"edit" ) %>
+      <button class="group-card-dropdown-toggle toggle">
-          <%= link_to(content_tag(:i, nil, :class => 'icon-trash'),"/admin/groups/#{group.id.to_s}",:class=>"trash delete-group-button" ) %>
+        <span class="caret"></span>
+      </button>
+      <ul class="group-card-dropdown action-dropdown">
+        <li class="group-card-dropdown-item">
+          <%= link_to(content_tag(:i, nil, :class => 'fa fa-pencil-square-o') + " Edit",edit_admin_group_path(group),:class=>"edit" ) %>
+        </li>
+        <li class="group-card-dropdown-item">
+          <%= link_to(content_tag(:i, nil, :class => 'fa fa-trash-o') + " Delete","/admin/groups/#{group.id.to_s}",:class=>"trash delete-group-button" ) %>
+
+        </li>
+      </ul>
     </div>
     <% end %>
+    <div class="group-avatar">     
       <%= image_tag(group.image) %>
     </div>
     <div class="group-info">

app/views/admin/groups/_post.html.erb

@@ -5,9 +5,19 @@
 			<span class="caret"></span>
 		</button>
 		<ul class="group-post-dropdown">
-			<li><a href="#">Flag inappropriate</a></li>
+			<li class="group-post-dropdown-item">
+				<a href="#">
+				<i class="fa fa-flag-o"></i>
+				Flag inappropriate</a>
+				</a>
+			</li>
 			<% if is_user_group_admin? || post.author.to_s == current_user.id.to_s %>
-				<li><a href="/admin/posts/<%=  post.id.to_s %>" class="delete-post-btn">Delete this post</a></li>
+			<li class="group-post-dropdown-item">
+					<a href="/admin/posts/<%=  post.id.to_s %>" class="delete-post-btn">
+						<i class="fa fa-trash-o"></i>
+						Delete this post
+					</a>
+			</li>
 			<% end %>
 		</ul>
   </div>

app/views/admin/groups/index.html.erb

@@ -1,4 +1,5 @@
 <% content_for :page_specific_css do -%>
+    <%= stylesheet_link_tag "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" %>
     <%= stylesheet_link_tag "lib/wrap-nav" %>
     <%= stylesheet_link_tag "lib/main-list" %>
     <%= stylesheet_link_tag "lib/filter" %>
@@ -11,7 +12,7 @@
     <%= javascript_include_tag "group.js" %>
 <% end -%>
 <div>
-	<ul class="group-index wrapper clearfix">
+	<ul class="group-index clearfix">
 		<%= render :partial=>"group",:collection=> @groups %>
 	</ul>
 </div>

app/views/admin/groups/public_groups.html.erb

@@ -1,4 +1,5 @@
 <% content_for :page_specific_css do -%>
+    <%= stylesheet_link_tag "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" %>
     <%= stylesheet_link_tag "lib/wrap-nav" %>
     <%= stylesheet_link_tag "lib/main-list" %>
     <%= stylesheet_link_tag "lib/filter" %>

app/views/admin/groups/show.html.erb

@@ -28,10 +28,12 @@
        <a class="group-post-new-post button button-primary" href="<%= admin_group_newpost_path(@group) %>"><i class="icon-plus"></i> New Post</a>
       <% end %>
       <ul class="group-post-view-switch-in-bar button-group">
-        <li class="group-post-feed-view button button-group-common button-default active">
+        <li class="group-post-feed-view button button-group-common button-default active tool-tip-parent">
+          <span class="tool-tip nowrap">List view</span>
           <a class="group-post-switch-btn" href="#" title="Feed"><i class="icon-list-ul"></i></a>
         </li>
-        <li class="group-post-grid-view button button-group-common button-default">
+        <li class="group-post-grid-view button button-group-common button-default tool-tip-parent">
+          <span class="tool-tip nowrap">Grid view</span>
           <a class="group-post-switch-btn" href="#" title="Grid"><i class="icon-th"></i></a>
         </li>
       </ul>

app/views/users/new.html.erb

@@ -11,7 +11,7 @@
               <label class="control-label" for="user_email"><%= t("users.user_id") %></label>
               <div class="controls">
                 <%= f.text_field :user_name, :placeholder => t("users.user_id"), :id=>"user_id",:class=>"availibility" %>
-                <span class="loader hide"><img src="/assets/availability-check-loader.gif" /></span>
+                <span class="loader hide"><img src="/assets/availability-check-loader.gif" alt="Loader" /></span>
                 <span class="notify not-ok hide alert alert-danger"><i class="icon-remove"></i>Not Available</span>
                 <span class="notify ok alert hide alert-success"><i class="icon-ok"></i>Available</span>
               </div>
@@ -21,7 +21,7 @@
               <label class="control-label" for="user_email"><%= t("user.first_name")%></label>
                 <div class="controls">
                   <%= text_field_tag :first_name, "", id: "user_first_name", placeholder: t("users.first_name") %>
-                  <span class="loader hide"><img src="/assets/availability-check-loader.gif" /></span>
+                  <span class="loader hide"><img src="/assets/availability-check-loader.gif" alt="Loader" /></span>
                 </div>
             </div>
 
@@ -29,7 +29,7 @@
               <label class="control-label" for="user_email"><%= t("user.last_name")%></label>
                 <div class="controls">
                   <%= text_field_tag :last_name, "", id: "user_last_name", placeholder: t("users.last_name") %>
-                  <span class="loader hide"><img src="/assets/availability-check-loader.gif" /></span>
+                  <span class="loader hide"><img src="/assets/availability-check-loader.gif" alt="Loader" /></span>
                 </div>
             </div>
 
@@ -37,7 +37,7 @@
               <label class="control-label" for="user_email"><%= t("user.email")%></label>
                 <div class="controls">
                   <%= email_field_tag :email, "", class: "availibility", id: "user_email", placeholder: t("users.email") %>
-                  <span class="loader hide"><img src="/assets/availability-check-loader.gif" /></span>
+                  <span class="loader hide"><img src="/assets/availability-check-loader.gif" alt="Loader" /></span>
                    <span class="notify not-ok hide alert alert-danger"><i class="icon-remove"></i>Not Available</span>
                   <span class="notify ok hide alert alert-success"><i class="icon-ok"></i>Available</span>
                 </div>