From 98ec676197121d203b1e126f943e4e17de87c9ec Mon Sep 17 00:00:00 2001 From: rulingcom Date: Thu, 28 May 2015 14:27:27 +0800 Subject: [PATCH] joshua commit for groups and orbit bar again --- app/assets/javascripts/group.js | 54 ++++--- .../stylesheets/basic/orbit_bar.css.erb | 2 +- .../stylesheets/lib/group/_group-classes.scss | 50 ++++++- .../stylesheets/lib/group/_group-members.scss | 138 ++++++++++++++++++ .../stylesheets/lib/group/_group-post.scss | 53 +++---- .../stylesheets/lib/group/_group-reset.scss | 1 - .../lib/group/_group-show-post.scss | 67 ++++++--- .../lib/group/_group-variables.scss | 1 + .../stylesheets/lib/group/group-admin.scss | 20 +++ .../stylesheets/lib/group/group-main.scss | 1 + .../lib/orbit_bar/orbit-bar.scss.erb | 2 +- .../groups/_group_existing_member.html.erb | 9 +- app/views/admin/groups/_post.html.erb | 30 ++++ app/views/admin/groups/_post_comment.html.erb | 21 ++- app/views/admin/groups/_post_form.html.erb | 1 - app/views/admin/groups/edit.html.erb | 8 +- app/views/admin/groups/members.html.erb | 131 +++++++++++++++-- app/views/admin/groups/show.html.erb | 14 +- app/views/admin/groups/showpost.html.erb | 16 +- 19 files changed, 507 insertions(+), 112 deletions(-) create mode 100644 app/assets/stylesheets/lib/group/_group-members.scss diff --git a/app/assets/javascripts/group.js b/app/assets/javascripts/group.js index 6646026..5575430 100644 --- a/app/assets/javascripts/group.js +++ b/app/assets/javascripts/group.js @@ -15,7 +15,6 @@ // 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"); @@ -27,22 +26,21 @@ } }, // Create scroll effect (with css) - scrollEffect: function() { - if (doc.querySelector(".group-post")) { - var post = doc.querySelector(".group-post"), - wrap = doc.querySelector(".group-post-banner-image-wrap"), + scrollEffect: function(el) { + var wrap = doc.querySelector(el), scrollClass = "scroll"; // Use pageYOffset to get the Y positoin and add scroll on it, the animation // is done by css transition - window.addEventListener("scroll", function() { - if (window.pageYOffset > 0) { - post.classList.add(scrollClass); - } else { - post.classList.remove(scrollClass); - } - }, false); - } + if (el) { + window.addEventListener("scroll", function() { + if (window.pageYOffset > 0) { + wrap.classList.add(scrollClass); + } else { + wrap.classList.remove(scrollClass); + } + }, false); + } }, // Equal height for card equalHeight: function() { @@ -77,24 +75,25 @@ $dropdown = $container.find(dropdown), klass = 'open'; - $toggle.click(function(e) { + $container.on('click', '.toggle', function(e) { if ($(this).hasClass(klass)) { - $toggle.removeClass(klass); - $dropdown.removeClass(klass); + $(toggle).removeClass(klass); + $(dropdown).removeClass(klass); } else { - $toggle.removeClass(klass); - $dropdown.removeClass(klass); + $(toggle).removeClass(klass); + $(dropdown).removeClass(klass); $(this) .addClass(klass) .next(dropdown) .addClass(klass) } return false; - }); - $(document.body).click(function() { - $toggle.removeClass(klass) - $dropdown.removeClass(klass); + }); + + $(document.body).on('click', function() { + $(toggle).removeClass(klass) + $(dropdown).removeClass(klass); }); }, @@ -111,8 +110,7 @@ document.addEventListener("DOMContentLoaded", function(event) { if (doc.querySelector('.group-post')) { - group.scrollEffect(); - group.makePostClick(); + group.scrollEffect('.group-post'); group.makeDropdown('.group-post', '.group-post-dropdown-toggle', '.group-post-dropdown'); } @@ -124,6 +122,14 @@ group.makeDropdown('.group-index', '.group-card-dropdown-toggle', '.group-card-dropdown'); } + if (doc.querySelector('.group-show-post')) { + group.makeDropdown('.group-show-post', '.group-show-post-dropdown-toggle', '.group-show-post-dropdown'); + } + + if (doc.querySelector('.group-member')) { + group.scrollEffect('.group-member'); + } + group.cycleFix(); group.equalHeight(); group.plugins(); diff --git a/app/assets/stylesheets/basic/orbit_bar.css.erb b/app/assets/stylesheets/basic/orbit_bar.css.erb index a54cf2a..aab9c6a 100644 --- a/app/assets/stylesheets/basic/orbit_bar.css.erb +++ b/app/assets/stylesheets/basic/orbit_bar.css.erb @@ -3,7 +3,7 @@ left: -10px; right: -10px; height: 40px; - z-index: 1041; + z-index: 1040; position: fixed; margin-bottom: 0; } diff --git a/app/assets/stylesheets/lib/group/_group-classes.scss b/app/assets/stylesheets/lib/group/_group-classes.scss index a228898..c5966fb 100644 --- a/app/assets/stylesheets/lib/group/_group-classes.scss +++ b/app/assets/stylesheets/lib/group/_group-classes.scss @@ -7,6 +7,12 @@ left: -9999px; } +.img-reponsive { + max-width: 100%; + width: 100%; + height: auto; +} + .wrapper { margin: auto; max-width: $boundary; @@ -30,6 +36,7 @@ background-color: transparent; border: 2px solid $blue; transition: $fast all; + &:hover { color: $white; background-color: $blue; @@ -45,6 +52,7 @@ color: $white; background-color: $blue; transition: $fast all; + &:hover { color: $white; background-color: darken($blue, 15%); @@ -56,32 +64,43 @@ font-size: 0.75rem; } +.button-large { + padding: 14px 1.3rem; +} + // Button group .button-group { display: inline-block; list-style: none; + > .button-group-common { display: inline-block; } + > .button:first-child { border-radius: 15rem 0 0 15rem; margin-right: -4px; } + > .button:last-child { border-radius: 0 15rem 15rem 0; } + li { color: $blue; background-color: rgba($white, 0.2); + &:hover { a { color: $white; } } } + > .active { color: $white; background-color: $blue; + a { color: $white; } @@ -91,6 +110,7 @@ // Tool Tip .tool-tip-parent { position: relative; + &:hover { .tool-tip { display: block; @@ -108,6 +128,7 @@ bottom: 100%; z-index: 150; display: none; + &:after { border: 5px solid transparent; border-top-color: rgba($black, 0.85); @@ -116,17 +137,21 @@ left: 10px; bottom: -10px; } + &.right { left: auto; right: 0; + &:after { left: auto; right: 10px; } } + &.bottom { top: 100%; bottom: auto; + &:after { top: -10px; bottom: auto; @@ -134,14 +159,15 @@ border-bottom-color: rgba(0, 0, 0, 0.85); } } + &.nowrap { white-space: nowrap; } } - .action { position: relative; + .toggle { border: none; border-left: 1px solid darken($gray, 6%); @@ -149,22 +175,31 @@ background: none; padding: 2px 8px; transition: $fast all; + + &:hover, &.open { + border-color: $blue; + background: $blue; + + .caret { + border-top-color: $white; + } + } } &:hover, &.open { - border-top-right-radius: $general; + border-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; @@ -200,16 +235,25 @@ background: $white; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2); transition: $normal box-shadow; + &:hover { box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.2); } } +// avatar +.admin-avatar { + width: 60px; + height: 60px; + border-radius: $round; +} + // breadcrumb .breadcrumb { padding-left: 0; margin: 0; background: none; + > li { text-shadow: none; font-size: 13px; diff --git a/app/assets/stylesheets/lib/group/_group-members.scss b/app/assets/stylesheets/lib/group/_group-members.scss new file mode 100644 index 0000000..13a7d4e --- /dev/null +++ b/app/assets/stylesheets/lib/group/_group-members.scss @@ -0,0 +1,138 @@ +// Group page +#main-wrap { + padding-top: 0; + .wrap-inner { + // padding: 0; + } +} + +.group-member-banner-wrap { + height: 280px; + overflow: hidden; + position: fixed; + top: 0; + left: 0; + width: 100%; + transition: $fast all; + z-index: 500; + background: lighten($black, 25%); +} + +.group-member-bar { + padding: 0 2rem 0 6rem; + background: rgba(25, 27, 29, 0.95); + width: 100%; + position: absolute; + left: 0; + bottom: 0; +} + +.group-member-page-title { + margin-bottom: 12px; + padding: 6px 0; + color: $white; + font-family: $main-font; + font-weight: normal; + max-width: 100%; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} +.group-member-dropdown { + margin: 12px 0; + > button { + padding: 8px 0.75rem; + } + .badge { + margin-left: 4px; + } +} + +.group-member-section { + overflow: hidden; + padding: 220px 2rem 30px; +} + +.group-member-list { + padding: 0; + margin: 0; +} + +.group-member-item { + list-style: none; + padding: 8px 0.75rem; + margin: 8px 0 12px 0; +} + +.group-member-photo-wrap { + display: inline-block; + vertical-align: top; + margin-right: 0.5rem; +} + +.group-member-meta-wrap { + display: inline-block; + vertical-align: top; +} + +.group-member-name { + font-size: 0.8125rem; +} + +.group-member-photo { + width: 60px; + height: 60px; + border-radius: $round; +} + +// scroll view + +.group-member.scroll { + padding-top: 2rem; + padding-bottom: 9rem; + + .group-member-page-title { + margin-top: 0; + margin-bottom: 0; + font-size: 1.625rem; + line-height: 50px; + } + + .group-member-banner-wrap { + height: 120px; + } + + .group-member-page-title { + margin-bottom: 0; + font-size: 1.625rem; + line-height: 50px; + } + .group-member-section { + padding-top: 60px; + } +} + + +// 480px +@media screen and (min-width: 30rem) { + .group-member-item { + float: left; + margin-right: 1rem; + } +} + +// 760px + +@media screen and (min-width: 47.5rem) { + .group-member-content-wrap { + width: 70%; + } + + .group-member-page-title { + display: inline-block; + margin: 0; + padding: 0; + line-height: 70px; + transition: .6s all; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/lib/group/_group-post.scss b/app/assets/stylesheets/lib/group/_group-post.scss index 50fe90a..fc5dd26 100644 --- a/app/assets/stylesheets/lib/group/_group-post.scss +++ b/app/assets/stylesheets/lib/group/_group-post.scss @@ -121,6 +121,17 @@ text-align: justify; } +.group-post-member-count { + background: $blue; + color: $white; + padding: 6px 0.625rem; + border-radius: $general; + &:hover { + background: darken($blue, 10%); + color: $white; + } +} + .group-post-item { position: relative; clear: both; @@ -146,54 +157,22 @@ } .group-post-dropdown-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; } } .group-post-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; } } @@ -267,7 +246,8 @@ line-height: 50px; } - .group-post-new-post { + .group-post-new-post, + .group-post-join { margin-top: 12px; padding: 6px 10px; } @@ -317,7 +297,8 @@ // 400px @media screen and (min-width: 25rem) { - .group-post-new-post { + .group-post-new-post, + .group-post-join { margin: 0 0.625rem 16px; float: none; display: inline-block; @@ -374,9 +355,11 @@ padding: 0; line-height: 70px; transition: .6s all; + max-width: 80%; } - .group-post-new-post { + .group-post-new-post, + .group-post-join { float: right; margin: 18px 0 0 0; } diff --git a/app/assets/stylesheets/lib/group/_group-reset.scss b/app/assets/stylesheets/lib/group/_group-reset.scss index 17e8a23..3cd2b3b 100644 --- a/app/assets/stylesheets/lib/group/_group-reset.scss +++ b/app/assets/stylesheets/lib/group/_group-reset.scss @@ -16,7 +16,6 @@ h1, h2, h3, h4, h5, h6, label, legend { } img { - width: 100%; max-width: 100%; height: auto; } diff --git a/app/assets/stylesheets/lib/group/_group-show-post.scss b/app/assets/stylesheets/lib/group/_group-show-post.scss index d07747b..24f1c05 100644 --- a/app/assets/stylesheets/lib/group/_group-show-post.scss +++ b/app/assets/stylesheets/lib/group/_group-show-post.scss @@ -88,8 +88,8 @@ width: 2.5rem; height: 2.5rem; cursor: pointer; - -webkit-transition: $normal all; - transition: $normal all; + -webkit-transition: $fast all; + transition: $fast all; text-align: center; background-color: rgba($black, 0.8); border-radius: 50%; @@ -120,18 +120,13 @@ float: left; width: 80%; margin: 10px 0 25px; -} - -.group-show-post-attachments { - a { - margin-bottom: 10px; + .group-show-post-attachment-file-format { + margin-right: 8px; + vertical-align: middle; + font-size: 1rem; } } -.group-show-post-attachment-file-format { - margin-right: 8px; -} - .group-show-post-seen-by { float: right; cursor: pointer; @@ -171,7 +166,18 @@ height: 60px; padding: 0 1rem; box-shadow: none; + width: 100%; } + .group-show-post-avatar { + display: none; + } + +} + +.group-show-post-actions { + position: absolute; + right: 0; + top: 0; } .group-no-permission { @@ -184,9 +190,11 @@ margin-right: 8px; } } - +.group-show-post-respond-wrap { + margin-bottom: 16px; +} .group-show-post-respond-submit { - font-size: 0.75rem; + font-size: 0.875rem; } .group-show-post-comment-list { @@ -194,18 +202,25 @@ padding: 0; list-style: none; } - +.group-show-post-comment { + position: relative; + border-radius: 0; + box-shadow: none; + border-bottom: 2px solid $gray; + &:hover { + box-shadow: none; + } +} .group-show-post-comment-wrap { overflow: hidden; - margin-bottom: 25px; - padding-bottom: 8px; - border-bottom: 1px solid lighten($light-gray, 12%); + padding: 16px 1.25rem; } .group-show-post-no-comment { font-size: 0.8125rem; } + .group-show-post-comment-avatar { float: left; width: 60px; @@ -220,10 +235,11 @@ .group-show-post-comment-author { font-size: .9375rem; float: left; + margin-right: 0.5rem; } .group-show-post-comment-time { - float: right; + float: left; } .group-show-post-comment-content { @@ -265,6 +281,21 @@ .group-show-post-comment-body { width: 85%; } + .comments { + .group-show-post-avatar { + float: left; + width: 10%; + max-width: 60px; + min-width: 60px; + display: block; + } + .group-show-post-respond-comment { + float: left; + width: 89%; + margin-left: 1%; + } + + } } // 960px diff --git a/app/assets/stylesheets/lib/group/_group-variables.scss b/app/assets/stylesheets/lib/group/_group-variables.scss index 16cb283..223c52e 100644 --- a/app/assets/stylesheets/lib/group/_group-variables.scss +++ b/app/assets/stylesheets/lib/group/_group-variables.scss @@ -30,6 +30,7 @@ $slow: 1s; // Border radius units $general: 0.25rem; +$round: 50%; // Commonly use units $boundary: 1150px; \ No newline at end of file diff --git a/app/assets/stylesheets/lib/group/group-admin.scss b/app/assets/stylesheets/lib/group/group-admin.scss index eb907d7..7892700 100644 --- a/app/assets/stylesheets/lib/group/group-admin.scss +++ b/app/assets/stylesheets/lib/group/group-admin.scss @@ -27,6 +27,11 @@ body { max-width: none; } +// Override Bootstrap modal +.modal.fade { + top: -65%; +} + // Override select2 styles, I need this evil power #main-wrap { .select2-container-multi { @@ -105,7 +110,22 @@ body { height: auto; } } + .img-avatar { width: 50px; height: 50px; +} + + + +// members page +.group-edit-button { + box-sizing: border-box; + vertical-align: top; + line-height: 40px; + width: 60px; + height: 60px; + display: inline-block; + text-align: center; + font-size: 0.8125rem; } \ No newline at end of file diff --git a/app/assets/stylesheets/lib/group/group-main.scss b/app/assets/stylesheets/lib/group/group-main.scss index 0737846..d956e68 100644 --- a/app/assets/stylesheets/lib/group/group-main.scss +++ b/app/assets/stylesheets/lib/group/group-main.scss @@ -7,6 +7,7 @@ @import "group-post"; @import "group-show-post"; @import "group-category"; +@import "group-members"; .topnav { diff --git a/app/assets/stylesheets/lib/orbit_bar/orbit-bar.scss.erb b/app/assets/stylesheets/lib/orbit_bar/orbit-bar.scss.erb index 6f7981a..4cf87af 100644 --- a/app/assets/stylesheets/lib/orbit_bar/orbit-bar.scss.erb +++ b/app/assets/stylesheets/lib/orbit_bar/orbit-bar.scss.erb @@ -66,7 +66,7 @@ $orbit-bar-bgc-lighter: lighten($orbit-bar-bgc, 20%) !default; left: 0; font-family: 'Chivo'; font-size: 16px; - z-index: 1060; + z-index: 1040; -webkit-box-sizing: initial; -moz-box-sizing: initial; box-sizing: initial; diff --git a/app/views/admin/groups/_group_existing_member.html.erb b/app/views/admin/groups/_group_existing_member.html.erb index 1ea8a7b..97932ff 100644 --- a/app/views/admin/groups/_group_existing_member.html.erb +++ b/app/views/admin/groups/_group_existing_member.html.erb @@ -4,7 +4,7 @@
<% @existing_members.each_with_index do |em,i| %> <% if em["id"] != current_user.id.to_s %> - " class="existing-phone-avatar" src="<%= em["avatar"] %>" style="width:75px;height:75px;" /> + " class="existing-phone-avatar admin-avatar" src="<%= em["avatar"] %>" /> <% end %> <% if i == existing_members_limit %> … <%= (@existing_members.count - existing_members_limit).to_s %> more. @@ -12,8 +12,11 @@ end %> <% end %> <% if @existing_members.count > 1 %> - Edit members + + + Edit + <% else %> No members. <% end %> -
+ \ No newline at end of file diff --git a/app/views/admin/groups/_post.html.erb b/app/views/admin/groups/_post.html.erb index 3aaa789..22cb99e 100644 --- a/app/views/admin/groups/_post.html.erb +++ b/app/views/admin/groups/_post.html.erb @@ -38,6 +38,7 @@ <% end %>
+<<<<<<< Updated upstream

<%= post.title %>

@@ -63,5 +64,34 @@
+======= +

+ + <%= post.title %> + +

+
+ <% content = strip_tags post.content %> + <%= content[0..250] %> + <%= "..." if content.length > 350 %> +
+
+ + <% + user = User.find(post.author) rescue nil + if !user.nil? + author = (user.member_profile.name == nil ? user.user_name : user.member_profile.name rescue "") + %> + <%= author %> + <% end %> + +
+ + <% date = DateTime.parse(post.created_at.to_s).strftime("%d %B %H:%M") %> + <%= date %> + +
+
+>>>>>>> Stashed changes diff --git a/app/views/admin/groups/_post_comment.html.erb b/app/views/admin/groups/_post_comment.html.erb index 8685461..92f9c33 100644 --- a/app/views/admin/groups/_post_comment.html.erb +++ b/app/views/admin/groups/_post_comment.html.erb @@ -1,4 +1,23 @@ -
  • +
  • +
    + + +
    <% diff --git a/app/views/admin/groups/_post_form.html.erb b/app/views/admin/groups/_post_form.html.erb index 9885174..768be7a 100644 --- a/app/views/admin/groups/_post_form.html.erb +++ b/app/views/admin/groups/_post_form.html.erb @@ -15,7 +15,6 @@ <%= javascript_include_tag "lib/dropzone" %> <% end %>
    -
    Uploading... diff --git a/app/views/admin/groups/edit.html.erb b/app/views/admin/groups/edit.html.erb index 05cbac3..e299ffe 100644 --- a/app/views/admin/groups/edit.html.erb +++ b/app/views/admin/groups/edit.html.erb @@ -1,3 +1,7 @@ +<% content_for :page_specific_css do -%> + <%= stylesheet_link_tag "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" %> +<% end -%> + <%= form_for @group, :url => admin_group_path(@group.id), :html => { :multipart => true , :class=>"form-horizontal main-forms"} do |f| %>
    <%= render :partial => "group_form", locals: {f: f} %> @@ -15,11 +19,11 @@ <% @existing_members.each do |em| %> - + <% if em["id"] != current_user.id.to_s %> - + <% end %> <% end %> diff --git a/app/views/admin/groups/members.html.erb b/app/views/admin/groups/members.html.erb index e9ce9b9..da5c27f 100644 --- a/app/views/admin/groups/members.html.erb +++ b/app/views/admin/groups/members.html.erb @@ -7,22 +7,125 @@ <%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js" %> <%= javascript_include_tag "group.js" %> <% end -%> -
    -
    -
    - <%= @group.title %> +
    +
    +
    + <%= @group.title %>
    -
    -

    <%= @group.title %> - Members

    +
    +

    <%= @group.title %> - Members

    -
    -
    -
    - +
    +
    + +
    +
    + + + +
    +
    diff --git a/app/views/admin/groups/show.html.erb b/app/views/admin/groups/show.html.erb index b3254a0..bf291b0 100644 --- a/app/views/admin/groups/show.html.erb +++ b/app/views/admin/groups/show.html.erb @@ -24,6 +24,10 @@

    <%= @group.title %>

    + + + Join this group + <% if user_can_write? %> New Post <% end %> @@ -64,9 +68,15 @@

    <% number_of_members = @group.users.count %> <% if number_of_members > 0 %> - <%= number_of_members.to_s %> member<%= number_of_members > 1 ? "s" : "" %> + href="<%= admin_group_members_path(@group) %>"> + + <%= number_of_members.to_s %> member<%= number_of_members > 1 ? "s" : "" %> + <% else %> - No members + + + No members + <% end %>

    diff --git a/app/views/admin/groups/showpost.html.erb b/app/views/admin/groups/showpost.html.erb index e973b3b..44f703e 100644 --- a/app/views/admin/groups/showpost.html.erb +++ b/app/views/admin/groups/showpost.html.erb @@ -29,7 +29,7 @@ avatar = (!user.member_profile.avatar.nil? ? user.member_profile.avatar.thumb.url : "/assets/member-pic.png" rescue "/assets/member-pic.png") end %> - + Post Avatar <%= author %>
    @@ -40,7 +40,6 @@ <% date = DateTime.parse(@post.created_at.to_s).strftime("%d %B %H:%M ") %> <%= date %> -
    @@ -54,7 +53,9 @@ data-cycle-center-vert=true > <% @post.group_post_images.each do |gpi| %> -
  • <%= @post.title %>
    • +
  • + <%= @post.title %> +
    • <% end %>
    @@ -87,7 +88,7 @@ css_class = "fa-file-zip-o" end %> - <%= File.basename(gpf.file.path) %> + <%= File.basename(gpf.file.path) %> <% end %> <% end %> @@ -110,14 +111,17 @@

    Leave a comment

    -
    +
    +
    + User Avatar +
    - +
    " style="width:75px;height:75px;" />" /> >
    <%= em["name"][I18n.locale.to_s] %>
    		" <%= em["admin"] ? "checked='checked'" : ""%> /> Admin