alex
/
orbit4-5
forked from saurabh/orbit4-5
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

joshua update for groups and orbit bar

This commit is contained in:
rulingcom 2015-05-26 14:13:38 +08:00
parent c406951876
commit 8099a79918
14 changed files with 215 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
app/assets/javascripts/group.js
View File

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

4
app/assets/stylesheets/basic/orbit_bar.css.erb
View File

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

2
app/assets/stylesheets/lib/group/_group-category.scss
View File

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

56
app/assets/stylesheets/lib/group/_group-classes.scss
View File

@ -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 { .card {
border-radius: $general; border-radius: $general;
background: $white; background: $white;

73
app/assets/stylesheets/lib/group/_group-index.scss
View File

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

15
app/assets/stylesheets/lib/group/_group-post.scss
View File

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

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

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

12
app/assets/stylesheets/lib/group/group-admin.scss
View File

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

25
app/views/admin/groups/_group.html.erb
View File

@ -8,14 +8,23 @@
%> %>
<li class="group-card animated bounceInDown" data-group-id="<%= group.id.to_s %>"> <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-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"> <% if current_user_is_group_admin %>
<p></p> <div class="group-card-action action">
<% if current_user_is_group_admin %> <button class="group-card-dropdown-toggle toggle">
<div class="action"> <span class="caret"></span>
<%= link_to(content_tag(:i, nil, :class => 'icon-edit'),edit_admin_group_path(group),:class=>"edit" ) %> </button>
<%= link_to(content_tag(:i, nil, :class => 'icon-trash'),"/admin/groups/#{group.id.to_s}",:class=>"trash delete-group-button" ) %> <ul class="group-card-dropdown action-dropdown">
</div> <li class="group-card-dropdown-item">
<% end %> <%= 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) %> <%= image_tag(group.image) %>
</div> </div>
<div class="group-info"> <div class="group-info">

14
app/views/admin/groups/_post.html.erb
View File

@ -5,9 +5,19 @@
<span class="caret"></span> <span class="caret"></span>
</button> </button>
<ul class="group-post-dropdown"> <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 %> <% 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 %> <% end %>
</ul> </ul>
</div> </div>

3
app/views/admin/groups/index.html.erb
View File

@ -1,4 +1,5 @@
<% content_for :page_specific_css do -%> <% 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/wrap-nav" %>
<%= stylesheet_link_tag "lib/main-list" %> <%= stylesheet_link_tag "lib/main-list" %>
<%= stylesheet_link_tag "lib/filter" %> <%= stylesheet_link_tag "lib/filter" %>
@ -11,7 +12,7 @@
<%= javascript_include_tag "group.js" %> <%= javascript_include_tag "group.js" %>
<% end -%> <% end -%>
<div> <div>
<ul class="group-index wrapper clearfix"> <ul class="group-index clearfix">
<%= render :partial=>"group",:collection=> @groups %> <%= render :partial=>"group",:collection=> @groups %>
</ul> </ul>
</div> </div>

1
app/views/admin/groups/public_groups.html.erb
View File

@ -1,4 +1,5 @@
<% content_for :page_specific_css do -%> <% 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/wrap-nav" %>
<%= stylesheet_link_tag "lib/main-list" %> <%= stylesheet_link_tag "lib/main-list" %>
<%= stylesheet_link_tag "lib/filter" %> <%= stylesheet_link_tag "lib/filter" %>

6
app/views/admin/groups/show.html.erb
View File

@ -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> <a class="group-post-new-post button button-primary" href="<%= admin_group_newpost_path(@group) %>"><i class="icon-plus"></i> New Post</a>
<% end %> <% end %>
<ul class="group-post-view-switch-in-bar button-group"> <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> <a class="group-post-switch-btn" href="#" title="Feed"><i class="icon-list-ul"></i></a>
</li> </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> <a class="group-post-switch-btn" href="#" title="Grid"><i class="icon-th"></i></a>
</li> </li>
</ul> </ul>

8
app/views/users/new.html.erb
View File

@ -11,7 +11,7 @@
<label class="control-label" for="user_email"><%= t("users.user_id") %></label> <label class="control-label" for="user_email"><%= t("users.user_id") %></label>
<div class="controls"> <div class="controls">
<%= f.text_field :user_name, :placeholder => t("users.user_id"), :id=>"user_id",:class=>"availibility" %> <%= 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 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> <span class="notify ok alert hide alert-success"><i class="icon-ok"></i>Available</span>
</div> </div>
@ -21,7 +21,7 @@
<label class="control-label" for="user_email"><%= t("user.first_name")%></label> <label class="control-label" for="user_email"><%= t("user.first_name")%></label>
<div class="controls"> <div class="controls">
<%= text_field_tag :first_name, "", id: "user_first_name", placeholder: t("users.first_name") %> <%= 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>
</div> </div>
@ -29,7 +29,7 @@
<label class="control-label" for="user_email"><%= t("user.last_name")%></label> <label class="control-label" for="user_email"><%= t("user.last_name")%></label>
<div class="controls"> <div class="controls">
<%= text_field_tag :last_name, "", id: "user_last_name", placeholder: t("users.last_name") %> <%= 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>
</div> </div>
@ -37,7 +37,7 @@
<label class="control-label" for="user_email"><%= t("user.email")%></label> <label class="control-label" for="user_email"><%= t("user.email")%></label>
<div class="controls"> <div class="controls">
<%= email_field_tag :email, "", class: "availibility", id: "user_email", placeholder: t("users.email") %> <%= 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 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> <span class="notify ok hide alert alert-success"><i class="icon-ok"></i>Available</span>
</div> </div>