From 8099a79918c64be2902b0d7695dded7be6c95350 Mon Sep 17 00:00:00 2001 From: rulingcom Date: Tue, 26 May 2015 14:13:38 +0800 Subject: [PATCH] joshua update for groups and orbit bar --- app/assets/javascripts/group.js | 44 +++++++---- .../stylesheets/basic/orbit_bar.css.erb | 4 +- .../lib/group/_group-category.scss | 2 +- .../stylesheets/lib/group/_group-classes.scss | 56 ++++++++++++++ .../stylesheets/lib/group/_group-index.scss | 73 +++++++++++++++++-- .../stylesheets/lib/group/_group-post.scss | 15 ++-- .../lib/group/_group-show-post.scss | 1 + .../stylesheets/lib/group/group-admin.scss | 12 ++- app/views/admin/groups/_group.html.erb | 25 +++++-- app/views/admin/groups/_post.html.erb | 14 +++- app/views/admin/groups/index.html.erb | 3 +- app/views/admin/groups/public_groups.html.erb | 1 + app/views/admin/groups/show.html.erb | 6 +- app/views/users/new.html.erb | 8 +- 14 files changed, 215 insertions(+), 49 deletions(-) diff --git a/app/assets/javascripts/group.js b/app/assets/javascripts/group.js index aa2c742..6646026 100644 --- a/app/assets/javascripts/group.js +++ b/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() { - 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(); diff --git a/app/assets/stylesheets/basic/orbit_bar.css.erb b/app/assets/stylesheets/basic/orbit_bar.css.erb index 8120a3d..a54cf2a 100644 --- a/app/assets/stylesheets/basic/orbit_bar.css.erb +++ b/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; } } diff --git a/app/assets/stylesheets/lib/group/_group-category.scss b/app/assets/stylesheets/lib/group/_group-category.scss index 5cebf57..ad039a4 100644 --- a/app/assets/stylesheets/lib/group/_group-category.scss +++ b/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 { diff --git a/app/assets/stylesheets/lib/group/_group-classes.scss b/app/assets/stylesheets/lib/group/_group-classes.scss index afa7935..a228898 100644 --- a/app/assets/stylesheets/lib/group/_group-classes.scss +++ b/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; diff --git a/app/assets/stylesheets/lib/group/_group-index.scss b/app/assets/stylesheets/lib/group/_group-index.scss index aa7346b..69fe9ec 100644 --- a/app/assets/stylesheets/lib/group/_group-index.scss +++ b/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; + } + } } \ 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 f0ba97a..50fe90a 100644 --- a/app/assets/stylesheets/lib/group/_group-post.scss +++ b/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; @@ -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; diff --git a/app/assets/stylesheets/lib/group/_group-show-post.scss b/app/assets/stylesheets/lib/group/_group-show-post.scss index a218a56..d07747b 100644 --- a/app/assets/stylesheets/lib/group/_group-show-post.scss +++ b/app/assets/stylesheets/lib/group/_group-show-post.scss @@ -249,6 +249,7 @@ overflow: hidden; vertical-align: middle; width: 80px; + white-space: nowrap; } } diff --git a/app/assets/stylesheets/lib/group/group-admin.scss b/app/assets/stylesheets/lib/group/group-admin.scss index 3ed3073..eb907d7 100644 --- a/app/assets/stylesheets/lib/group/group-admin.scss +++ b/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; diff --git a/app/views/admin/groups/_group.html.erb b/app/views/admin/groups/_group.html.erb index 825fd8b..b8bf856 100644 --- a/app/views/admin/groups/_group.html.erb +++ b/app/views/admin/groups/_group.html.erb @@ -8,14 +8,23 @@ %>
  • card"> -
    -

    - <% if current_user_is_group_admin %> -
    - <%= 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" ) %> -
    - <% end %> + <% if current_user_is_group_admin %> +
    + +
      +
    • + <%= link_to(content_tag(:i, nil, :class => 'fa fa-pencil-square-o') + " Edit",edit_admin_group_path(group),:class=>"edit" ) %> +
      • +
    • + <%= link_to(content_tag(:i, nil, :class => 'fa fa-trash-o') + " Delete","/admin/groups/#{group.id.to_s}",:class=>"trash delete-group-button" ) %> + +
      • +
    +
    + <% end %> +
    <%= image_tag(group.image) %>
    diff --git a/app/views/admin/groups/_post.html.erb b/app/views/admin/groups/_post.html.erb index 0c58b76..ae9c972 100644 --- a/app/views/admin/groups/_post.html.erb +++ b/app/views/admin/groups/_post.html.erb @@ -5,9 +5,19 @@
    diff --git a/app/views/admin/groups/index.html.erb b/app/views/admin/groups/index.html.erb index 0058d84..f5754aa 100644 --- a/app/views/admin/groups/index.html.erb +++ b/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 -%>
    -
      +
        <%= render :partial=>"group",:collection=> @groups %>
    diff --git a/app/views/admin/groups/public_groups.html.erb b/app/views/admin/groups/public_groups.html.erb index a2c01fd..9e5c86e 100644 --- a/app/views/admin/groups/public_groups.html.erb +++ b/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" %> diff --git a/app/views/admin/groups/show.html.erb b/app/views/admin/groups/show.html.erb index 4457a8b..babb15b 100644 --- a/app/views/admin/groups/show.html.erb +++ b/app/views/admin/groups/show.html.erb @@ -28,10 +28,12 @@ New Post <% end %>
      -
    • +
    • + List view
      • -
    • +
    • + Grid view
    diff --git a/app/views/users/new.html.erb b/app/views/users/new.html.erb index f86ecb5..001dbc5 100644 --- a/app/views/users/new.html.erb +++ b/app/views/users/new.html.erb @@ -11,7 +11,7 @@
    <%= f.text_field :user_name, :placeholder => t("users.user_id"), :id=>"user_id",:class=>"availibility" %> - + Loader Not Available Available
    @@ -21,7 +21,7 @@
    <%= text_field_tag :first_name, "", id: "user_first_name", placeholder: t("users.first_name") %> - + Loader
    @@ -29,7 +29,7 @@
    <%= text_field_tag :last_name, "", id: "user_last_name", placeholder: t("users.last_name") %> - + Loader
    @@ -37,7 +37,7 @@
    <%= email_field_tag :email, "", class: "availibility", id: "user_email", placeholder: t("users.email") %> - + Loader Not Available Available