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
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() {
var $post = $('.group-post'),
$toggle = $('.group-post-dropdown-toggle'),
$dropdown = $post.find('.group-post-dropdown'),
makeDropdown: function(container, toggle, dropdown, kls) {
var $container = $(container),
$toggle = $container.find(toggle),
$dropdown = $container.find(dropdown),
klass = 'open';
$toggle.click(function() {
$toggle.removeClass(klass);
$dropdown.removeClass(klass);
$(this)
.addClass(klass)
.next('.group-post-dropdown')
.toggleClass(klass)
$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(dropdown)
.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();

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"] {
width: 130px;
width: 100px;
}
}

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

@ -24,7 +24,7 @@
.group-category-item {
float: left;
margin-right: 0.625rem;
margin: 0 0.625rem 1rem 0;
background-color: $green;
&: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 {
border-radius: $general;
background: $white;

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

@ -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;
}
}
}

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

@ -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;
@ -194,7 +197,7 @@
}
}
.group-post-action-hint {
.group-post-action-hint {
white-space: nowrap;
}
@ -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;

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

@ -249,6 +249,7 @@
overflow: hidden;
vertical-align: middle;
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 {
.upload-status-notice {
@ -94,7 +99,12 @@ body {
z-index: 3000;
}
}
.fileupload {
.thumbnail {
max-width: 60%;
height: auto;
}
}
.img-avatar {
width: 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 %>">
<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">
<%= link_to(content_tag(:i, nil, :class => 'icon-edit'),edit_admin_group_path(group),:class=>"edit" ) %>
<%= link_to(content_tag(:i, nil, :class => 'icon-trash'),"/admin/groups/#{group.id.to_s}",:class=>"trash delete-group-button" ) %>
</div>
<% end %>
<% if current_user_is_group_admin %>
<div class="group-card-action action">
<button class="group-card-dropdown-toggle toggle">
<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">

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

@ -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>

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

@ -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>

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

@ -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" %>

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>
<% 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>

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>
<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>