Merge branch 'master' of http://gitlab.tp.rulingcom.com/saurabh/orbit4-5 into nccu_unit

Gemfile

@@ -31,7 +31,8 @@ gem 'nokogiri'
 gem 'httparty'
 
 #database
-gem 'mongoid', github: "mongoid/mongoid"
+# gem 'mongoid', github: "mongoid/mongoid"
+gem 'mongoid', '~> 4.0.2'
 
 #file uploading and carrierwave
 gem "mini_magick", "3.5.0"

app/assets/javascripts/admin/store_manager.js

@@ -138,7 +138,7 @@ var StoreManager = function(section){
 			"url" : "/admin/store/check_credentials"
 		}).done(function(status){
 			if(status.success == true){
-				resendEmail();
+				authorizeAllModules();
 			}else if(status.success == false){
 				waitForStoreResponseCount++;
 				if(waitForStoreResponseCount > 5){
@@ -152,6 +152,22 @@ var StoreManager = function(section){
 		}).fail(showError);
 	}
 
+	var authorizeAllModules = function(){
+		loadingAreaStatus.text("Authorizing default modules.");
+		$.ajax({
+			"type" : "post",
+			"dataType" : "json",
+			"url" : "/admin/store/authorize_default_modules"
+		}).done(function(status){
+			if(status.success == true){
+				resendEmail();
+			}else if(status.success == false){
+				loadingArea.find("img").hide();
+				loadingAreaStatus.text(data.message);
+			}
+		}).fail(showError);
+	}
+
 	var resendEmail = function(){
 		loadingArea.find("img").show();
 		loadingAreaStatus.text("Sending verification email.");

app/assets/javascripts/basic/orbit_js_1.0.1.js

@@ -291,6 +291,7 @@ if($.support.touch) {
             $el.find('a').removeAttr('href');
         };
         $el.on(mouseenterEvent, function(e) {
+            $sidebar.addClass('on')
             $block.siblings().removeClass('show').end().eq($(this).index()).addClass('show');
             $arrow.stop(true, false).animate({
                 top: ($(this).position().top+$(this).height()/2)-$arrowHeightFormat+$('.scroller').position().top,
@@ -346,6 +347,7 @@ if($.support.touch) {
                 $el.eq($blockIndex).hasClass('active') ? '':$el.eq($blockIndex).children('span').addClass('hover');
             },
             mouseleave: function() {
+                $sidebar.removeClass('on');
                 $block.removeClass('show');
                 if(!$sidebarState || !$el.hasClass('active')) {
                     $blockList.css({'width': 0});

app/assets/javascripts/ckeditor/config.js.erb

@@ -5,11 +5,14 @@
 
 CKEDITOR.editorConfig = function( config ) {
 	config.uiColor = '#e6e6e6';
-	config.language = 'zh';
+	config.defaultLanguage = "en";
+	config.language = '<%= (I18n.locale.to_s == "zh_tw" || I18n.locale.to_s == "zh_cn" ? "zh" : I18n.locale.to_s) %>';
 	config.height = 400;
 	config.resize_minHeight = 400;
 	config.toolbarCanCollapse = true;
 	config.allowedContent = true;
+	config.pasteFromWordRemoveFontStyles=false;
+	config.pasteFromWordRemoveStyles=false;
 
 	config.plugins = 'dialogui,dialog,about,a11yhelp,dialogadvtab,basicstyles,blockquote,clipboard,button,panelbutton,panel,floatpanel,colorbutton,colordialog,templates,menu,contextmenu,resize,toolbar,elementspath,enterkey,entities,popup,filebrowser,find,image,fakeobjects,floatingspace,listblock,richcombo,font,format,horizontalrule,htmlwriter,iframe,wysiwygarea,indent,indentblock,indentlist,justify,menubutton,link,list,liststyle,magicline,maximize,newpage,pastetext,pastefromword,removeformat,selectall,showblocks,showborders,sourcearea,specialchar,scayt,stylescombo,tab,table,tabletools,undo,wsc,youtube,codemirror';
 

app/assets/javascripts/group.js

@@ -7,47 +7,132 @@
     var group = {
         // Detect and change the top position of the cycle navs
         cycleFix: function() {
-          if( doc.querySelectorAll( ".group-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
+
-              if( imgs.length <= 1 ) {
+                // Hide the navs when there's noly one slide
-                  for( i = 0; i < len; i++ ) {
+                if (imgs.length <= 1) {
-                      cycleNav[ i ].classList.add( "hide" );
+                    for (i = 0; i < len; i++) {
-                  }
+                        cycleNav[i].classList.add("hide");
-              }
+                    }
-              
+                }
-          } else if ( doc.querySelectorAll( ".group-post-banner-image").length === 0 && doc.querySelector( ".group-post-image-wrap" ) ) {
+
-              doc.querySelector( ".group-post-image-wrap").classList.add( "hide" );
+            } else if (doc.querySelectorAll(".group-show-post-banner-image").length === 0 && doc.querySelector(".group-show-post-image-wrap")) {
-          }
+                doc.querySelector(".group-show-post-image-wrap").classList.add("hide");
+            }
         },
         // Create scroll effect (with css)
-        scrollEffect: function() {
+        scrollEffect: function(el) {
-          if( doc.querySelector( ".group-page") ) {
+                var wrap = doc.querySelector(el),
-              var page = doc.querySelector( ".group-page" ),
+                    scrollClass = "scroll";
-                  wrap = doc.querySelector( ".group-page-banner-image-wrap" ),
-                  scrollClass = "scroll";
 
-              // Use pageYOffset to get the Y positoin and add scroll on it, the animation
+                // Use pageYOffset to get the Y positoin and add scroll on it, the animation
-              // is done by css transition
+                // is done by css transition
-              window.addEventListener( "scroll", function() {
+                if (el) {
-                if( window.pageYOffset !== 0 ) {
+                    window.addEventListener("scroll", function() {
-                    page.classList.add( scrollClass );
+                        if (window.pageYOffset > 0) {
-                } else {
+                            wrap.classList.add(scrollClass);
-                    page.classList.remove( scrollClass );
+                        } else {
+                            wrap.classList.remove(scrollClass);
+                        }
+                    }, false);
                 }
-              }, false);
+        },
-          }
+        // Equal height for card
+        equalHeight: function() {
+            var bigbrother = -1,
+                $card = $('.group-card-inner');
+
+            $card.each(function() {
+                bigbrother = bigbrother > $(this).height() ? bigbrother : $(this).height();
+            });
+
+            $card.each(function() {
+                $(this).height(bigbrother);
+            });
+        },
+        // We want to place a dropdown in group-post-item, but link cannot be nested, hance this fix
+        makePostClick: function() {
+            var postLink = doc.querySelectorAll('.group-post-link');
+
+            if (postLink) {
+                Array.prototype.forEach.call(postLink, function(item) {
+                    item.parentNode.classList.add('clickable');
+                    item.parentNode.addEventListener('click', function(e) {
+                        window.location.href = item.href;
+                    });
+                });
+            }
+        },
+        // Bootstrap dropdown is too much of a hassle, using this instead
+        makeDropdown: function(container, toggle, dropdown, kls) {
+            var $container = $(container),
+                $toggle = $container.find(toggle),
+                $dropdown = $container.find(dropdown),
+                klass = 'open';
+
+            $container.on('click', '.toggle', 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;
+
+                });
+
+            $(document.body).on('click', function() {
+                $(toggle).removeClass(klass)
+                $(dropdown).removeClass(klass);
+            });
+        },
+
+        // Third-party plugin settings
+        plugins: function() {
+            // WOWjs
+            if (typeof window.WOW !== 'undefined') {
+                new WOW().init();
+            }
         }
     }
 
     // When DOM is completely loaded, execute these functions
-    document.addEventListener( "DOMContentLoaded", function( event ) {
+    document.addEventListener("DOMContentLoaded", function(event) {
-        group.cycleFix();  
+
-        group.scrollEffect();
+        if (doc.querySelector('.group-post')) {
+            group.scrollEffect('.group-post');
+            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');
+        }
+
+        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();
     });
 
 })();

app/assets/stylesheets/basic/global.css

@@ -49,7 +49,7 @@ input:focus::-webkit-input-placeholder {
     color: transparent;
 }
 body {
-  background-color: #F3F3F3;
+  background-color: #f3f3f3;
   font-family: 'Chivo';
 }
 body.modalBlur > nav,
@@ -319,6 +319,18 @@ legend {
   background-color: rgba(0, 136, 204, .6);
 }
 
+/* sidebar on */
+#sidebar.on ~ #main-wrap .fc-border-separate {
+  table-layout: fixed;
+}
+
+#sidebar.on ~ #main-wrap .fc-view-month .fc-day-header {
+  width: auto !important;
+}
+
+#sidebar.on ~ #main-wrap .fc-view-agendaWeek .fc-widget-header.fc-last {
+  width: 15px !important;
+}
 
 /* Main Wrap */
 #main-wrap {

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;
 }
@@ -16,7 +16,7 @@
 	background-repeat: no-repeat;
 	background-image: url('<%= asset_path 'orbit-logo.svg' %>');
 
-	/* For Suck IE */
+	/* For IE */
 	background-image: url('<%= asset_path 'orbit-logo.png' %>');
 }
 #orbit-bar.navbar .nav > li > a {
@@ -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/group_admin.css.scss

@@ -1,107 +0,0 @@
-@charset "utf-8";
-
-@import url(http://fonts.googleapis.com/css?family=Maven+Pro);
-
-@import url(http://fonts.googleapis.com/css?family=Roboto);
-
-// Font stacks
-$main-font: "Maven Pro", "微軟正黑體" sans-serif;
-$paragraph-font: "Roboto", "微軟正黑體", sans-serif;
-$gray: #f3f3f3;
-$dark-gray: #aaaaaa;
-$light-gray: #cdcdcd;
-$white: white;
-$light-black: #353535;
-$black: black;
-$green: #4ad976;
-$blue: #4171d5;
-$red: #c71932;
-$blue-green: #00acee;
-$group-page-bar-color: #171717;
-
-// Transition units
-$fast: 0.3s;
-$normal: 0.6s;
-$slow: 1s;
-
-// Border radius units
-$general: 0.25rem;
-
-// General style
-body {
-    background: $gray;
-    font-family: $main-font;
-}
-
-// Override and resolve the conflict with main-form.css for that I need RWD support for this page
-.main-forms fieldset .input-area .controls textarea {
-    max-width: none;
-}
-
-// Override select2 styles, I need this evil power
-#main-wrap {
-    .select2-container-multi {
-        margin-right: 0.9375rem;
-        min-width: 200px;
-        .select2-choices {
-            padding: 8px 0.5rem 6px;
-            border-radius: $general;
-        }
-        .select2-search-choice {
-            padding: 10px 1.75rem 10px 0.7rem;
-            border-color: lighten($light-gray, 5%);
-            background: $white;
-            > div {
-                &:before {
-                    content: "\F007";
-                    font-family: FontAwesome;
-                    display: inline-block;
-                    font-size: 0.9375rem;
-                    color: $blue;
-                    margin: 0 0.5rem 0 0;
-                }
-            }
-        }
-        .select2-search-choice-close {
-            right: 15px;
-            left: auto;
-            &:before {
-                content: "\f057";
-                font-family: FontAwesome;
-                position: absolute;
-                cursor: pointer;
-                left: 6px;
-                top: 6px;
-                font-size: 0.9375rem;
-                color: $dark-gray;
-            }
-            &:hover {
-                &:before {
-                    color: $red;
-                }
-            }
-        }
-    }
-}
-
-.wrap-inner {
-    .upload-status-notice {
-        position: fixed;
-        right: 1rem;
-        top: 4rem;
-        color: $white;
-        padding: 16px 1.375rem;
-        background-color: $blue;
-        border-radius: $general;
-        font-size: 0.8125rem;
-        box-shadow: 0px 0px 16px 3px rgba(0, 0, 0, 0.2);
-        -webkit-animation-duration: .3s;
-        animation-duration: .3s;
-        z-index: 3000;
-    }
-}
-
-.img-avatar {
-    width: 50px;
-    height: 50px;
-}

app/assets/stylesheets/group_show.css.scss

@@ -1,765 +0,0 @@
-@charset "utf-8";
-
-@import url(http://fonts.googleapis.com/css?family=Maven+Pro);
-
-@import url(http://fonts.googleapis.com/css?family=Roboto);
-
-// Font stacks
-
-$main-font: "Maven Pro", "微軟正黑體" sans-serif;
-$paragraph-font: "Roboto", "微軟正黑體", sans-serif;
-$gray: #f3f3f3;
-$dark-gray: #aaaaaa;
-$light-gray: #cdcdcd;
-$white: white;
-$light-black: #353535;
-$black: black;
-$green: #4ad976;
-$blue: #4171d5;
-$red: #c71932;
-$blue-green: #00acee;
-$group-page-bar-color: #171717;
-
-// Transition units
-$fast: 0.3s;
-$normal: 0.6s;
-$slow: 1s;
-
-// Border radius units
-$general: 0.25rem;
-
-// General style
-body {
-    background: $gray;
-    font-family: $main-font;
-}
-
-*,
-*:before,
-*:after {
-    box-sizing: border-box;
-}
-
-h1, h2, h3, h4, h5, h6, label, legend {
-    font-family: $main-font;
-}
-
-img {
-    width: 100%;
-    max-width: 100%;
-    height: auto;
-}
-
-a {
-    text-decoration: none;
-}
-
-a:hover, a:visited {
-    text-decoration: none;
-}
-
-// General classes
-
-.screen-reader {
-    position: absolute;
-    top: -9999px;
-    left: -9999px;
-}
-
-// Buttons
-.button {
-    padding: 8px .75rem;
-    color: $black;
-    border: none;
-    border-radius: 15rem;
-    background: $gray;
-}
-
-.button-default {
-    color: $blue;
-    background-color: transparent;
-    border: 2px solid $blue;
-    transition: $fast all;
-    &:hover {
-        color: $white;
-        background-color: $blue;
-    }
-}
-
-.button-activated {
-    color: #fff;
-    background-color: $green;
-}
-
-.button-primary {
-    color: $white;
-    background-color: $blue;
-    transition: $fast all;
-    &:hover {
-        color: $white;
-        background-color: darken($blue, 15%);
-    }
-}
-
-// 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;
-        }
-    }
-}
-
-// Tool Tip
-.tool-tip-parent {
-    position: relative;
-    &:hover {
-        .tool-tip {
-            display: block;
-        }
-    }
-}
-
-.tool-tip {
-    padding: 10px 0.75rem;
-    border-radius: .2rem;
-    color: $white;
-    background: rgba($black, 0.85);
-    position: absolute;
-    left: 0;
-    bottom: 100%;
-    z-index: 150;
-    display: none;
-    &:after {
-        border: 5px solid transparent;
-        border-top-color: rgba($black, 0.85);
-        content: "";
-        position: absolute;
-        left: 10px;
-        bottom: -10px;
-    }
-    &.right {
-        left: auto;
-        right: 0;
-        &:after {
-            left: auto;
-            right: 10px;
-        }
-    }
-}
-
-.topnav {
-    display: none;
-}
-
-// breadcrumb
-.breadcrumb {
-    padding-left: 0;
-    margin: 0;
-    background: none;
-    > li {
-        text-shadow: none;
-        font-size: 13px;
-    }
-}
-
-// dropzone
-
-.dropzone-pool {
-    border: 2px dashed $blue;
-    margin-bottom: 16px;
-    font-family: $paragraph-font;
-    font-size: 0.9375rem;
-    color: $dark-gray;
-    margin-right: 1rem;
-    border-radius: $general;
-}
-
-// overriding member css
-#main-wrap {}
-
-// Group page
-#main-wrap {
-    padding-top: 0;
-}
-
-.group-page-banner-wrap {
-    height: 280px;
-    overflow: hidden;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    transition: $fast all;
-    z-index: 500;
-    background: $black;
-}
-
-.group-page-banner-image-wrap {
-    background-color: $black;
-    text-align: center;
-}
-
-.group-page-view-switch {
-    position: absolute;
-    top: 4rem;
-    right: 2rem;
-}
-
-.group-page-banner-image {
-    width: auto;
-    max-width: 100%;
-    height: auto;
-}
-
-.group-page-bar {
-    padding: 0 2rem 20px 6rem;
-    text-align: center;
-    background: rgba($group-page-bar-color, 0.95);
-    width: 100%;
-    position: absolute;
-    left: 0;
-    bottom: 0;
-}
-
-.group-page-view-switch-in-bar {
-    display: none;
-    .button {
-        padding: 3px .75rem;
-    }
-}
-
-.group-page-title {
-    margin-bottom: 12px;
-    padding: 6px 0;
-    color: $white;
-    font-family: $main-font;
-    font-weight: normal;
-}
-
-.group-page-section {
-    overflow: hidden;
-    max-width: 1150px;
-    margin: auto;
-    padding: 300px 2rem 30px;
-}
-
-.gorup-page-info-wrap {
-    font-size: .9rem;
-    padding: 6px 1rem;
-    display: block;
-    float: right;
-    cursor: pointer;
-}
-
-.group-page-description-wrap {
-    clear: both;
-}
-
-.gorup-page-info-wrap {
-    margin-bottom: 10px;
-    text-align: right;
-}
-
-.group-page-status-wrap {
-    font-size: .75rem;
-    float: right;
-    padding: 2px 0.5rem;
-    margin-bottom: 10px;
-}
-
-.group-page-status-wrap.close-eye {
-    margin-left: 5px;
-    background: $red;
-}
-
-.group-page-description-wrap {
-    margin-bottom: 15px;
-    padding: 16px 1.2rem 16px;
-    border-radius: .2rem;
-    box-shadow: inset 0 0 8px $dark-gray;
-}
-
-.group-page-description {
-    clear: both;
-    text-align: justify;
-}
-
-.group-page-post {
-    clear: both;
-    margin-bottom: 40px;
-    padding: 28px 1.5rem;
-    text-align: center;
-    border-radius: $general;
-    background: $white;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
-    transition: $normal box-shadow;
-}
-
-.group-page-post-link {
-    text-decoration: none;
-    color: $black;
-}
-
-.group-page-post:hover {
-    box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.2);
-}
-
-.group-page-post-link:hover {
-    text-decoration: none;
-    color: $black;
-}
-
-.group-page-post-image-wrap {
-    display: inline-block;
-    margin-bottom: 12px;
-}
-
-.group-page-post-image {
-    width: 100%;
-    max-width: 100%;
-    height: auto;
-    margin-top: 12px;
-    border: 2px solid $gray;
-    border-radius: $general;
-}
-
-.group-page-post-content {
-    margin-bottom: .5rem;
-    color: $dark-gray;
-    overflow: hidden;
-}
-
-.group-page-post-title {
-    font-size: 1.5rem;
-    font-weight: normal;
-    line-height: 1;
-    margin-bottom: 12px;
-    color: $light-black;
-    font-family: $paragraph-font;
-}
-
-.group-page-post-sub-wrap {
-    display: inline-block;
-}
-
-.group-page-post-meta-wrap {
-    color: $dark-gray;
-}
-
-.group-page-post-author,
-.group-page-post-sub-wrap {
-    margin-right: .5rem;
-}
-
-.group-page-seen-by {
-    display: inline-block;
-}
-
-.group-page-seen-by-lead {
-    font-style: normal;
-}
-
-// scroll view
-
-.group-page.scroll {
-    padding-top: 7rem;
-    .group-page-banner-wrap {
-        height: 120px;
-    }
-    .group-page-title {
-        margin-bottom: 0;
-        font-size: 1.625rem;
-        line-height: 50px;
-    }
-    .group-page-new-post {
-        margin-top: 18px;
-        padding: 6px 10px;
-    }
-    .group-page-new-post {
-        display: inline-block;
-        vertical-align: top;
-    }
-    .group-page-view-switch {
-        position: static;
-        display: inline-block;
-        margin: 6px .5rem 0 0;
-        display: none;
-    }
-    .group-page-view-switch-in-bar {
-      display: inline-block;
-      margin-top: 18px;
-      .button {
-        padding: 4px .75rem;
-      }
-    }
-    .group-page-section {
-        padding-top: 60px;
-    }
-    .btn {
-        padding: 2px 5px;
-    }
-
-}
-
-.group-page li a {
-    text-decoration: none;
-}
-
-.group-page-switch-btn {
-    color: $blue;
-    &:hover {
-        color: $white;
-    }
-}
-
-// 400px
-@media screen and (min-width: 25rem) {
-    .group-page-new-post {
-        margin: 0 0.625rem 16px;
-        float: none;
-        display: inline-block;
-    }
-    .group-page-view-switch-in-bar {
-        float: none;
-        margin: 0;
-        .button {
-          padding: 6px .75rem;
-        }
-    }
-}
-
-// 600px
-
-@media screen and (min-width: 37.5rem) {
-    .group-page-post {
-        margin-bottom: 35px;
-        text-align: left;
-    }
-    .group-page-post-image-wrap {
-        float: left;
-        width: 12%;
-        min-width: 100px;
-        margin-right: 4%;
-        max-height: 140px;
-        overflow: hidden;
-    }
-    .group-page-post-content-wrap {
-        float: left;
-        width: 70%;
-        font-family: $paragraph-font;
-    }
-}
-
-/* 760px */
-
-@media screen and (min-width: 47.5rem) {
-    .group-page-post-content-wrap {
-        width: 70%;
-    }
-    .group-page-bar {
-        text-align: left;
-    }
-    .group-page-title {
-        display: inline-block;
-        margin: 0;
-        padding: 0;
-        line-height: 70px;
-        transition: .6s all;
-    }
-    .group-page-new-post {
-        float: right;
-        margin: 18px 0 0 0;
-    }
-    .group-page-view-switch-in-bar {
-        margin: 18px 8px 0 0;
-        float: right;
-        li {
-          padding: 8px .75rem;
-        }
-    }
-    .group-page-view-switch {
-        float: right;
-    }
-}
-
-// 900px
-@media screen and (min-width: 56.25rem) {
-    .group-page-post-content-wrap {
-        width: 80%;
-    }
-}
-
-// Group post
-.group-post {
-    padding: 50px 2rem 30px;
-    max-width: 1150px;
-    margin: auto;
-}
-
-.group-post-meta {
-    margin-bottom: 15px;
-}
-
-.group-post-title {
-    font-family: $main-font;
-    float: left;
-    width: 90%;
-    font-weight: normal;
-    line-height: 1;
-}
-
-.group-post-avatar-wrap {
-    float: right;
-    padding: 0 0.375rem 0 0;
-}
-
-.group-post-avatar-username-toggle {
-    display: block;
-}
-
-.group-post-avatar {
-    width: 60px;
-    height: 60px;
-    border-radius: 50%;
-}
-
-.group-post-username {
-    display: none;
-    top: 100%;
-    padding-bottom: 30px;
-    right: 0;
-    left: auto;
-    white-space: nowrap;
-    font-size: 0.75rem;
-    &:after {
-        border-top-color: transparent;
-        border-bottom-color: rgba(0, 0, 0, 0.85);
-        top: -10px;
-        left: auto;
-        right: 20px;
-        bottom: auto;
-    }
-}
-
-.group-post-postdate {
-    display: inline-block;
-    clear: both;
-}
-
-.group-post-image-wrap {
-    position: relative;
-    background: $black;
-    &:hover {
-        .cycle-nav {
-            opacity: 1;
-        }
-        .group-post-cycle-prev {
-            left: 2rem;
-        }
-        .group-post-cycle-next {
-            right: 2rem;
-        }
-    }
-}
-
-.group-post-image-list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-.cycle-nav {
-    font-size: 1.2rem;
-    position: absolute;
-    top: 50%;
-    margin-top: -1.25rem;
-    line-height: 1.5rem;
-    color: $white;
-    z-index: 500;
-    width: 2.5rem;
-    height: 2.5rem;
-    cursor: pointer;
-    -webkit-transition: $normal all;
-    transition: $normal all;
-    text-align: center;
-    background-color: rgba($black, 0.8);
-    border-radius: 50%;
-    opacity: 0;
-    &:hover {
-        background-color: $blue;
-    }
-    .group-post-cycle-nav-icon {
-        line-height: 2.6rem;
-    }
-}
-
-.group-post-cycle-prev {
-    left: 0;
-}
-
-.group-post-cycle-next {
-    right: 0;
-}
-
-.group-post-content {
-    font-family: $main-font;
-    font-size: .8125rem;
-    margin: 15px 0;
-}
-
-.group-post-attachment-wrap {
-    float: left;
-    width: 80%;
-    margin: 10px 0 25px;
-}
-
-.group-post-attachments {
-    a {
-        margin-bottom: 10px;
-    }
-}
-
-.group-post-attachment-file-format {
-    margin-right: 8px;
-}
-
-.group-post-seen-by {
-    float: right;
-    cursor: pointer;
-    &:hover {
-        .group-post-seen-by-names {
-            display: block;
-            white-space: nowrap;
-        }
-    }
-    .group-post-seen-by-name {
-        display: block;
-        color: #fff;
-        white-space: nowrap;
-    }
-}
-
-.group-post-seen-by-lead {
-    margin-right: 4px;
-    font-style: normal;
-}
-
-.group-post-seen-by-names {
-    display: none;
-}
-
-.group-post-seen-by-count {
-    border-radius: 50%;
-    background: $gray;
-    display: inline-block;
-}
-
-// Comment section
-.comments {
-    clear: both;
-}
-
-.comments .group-post-respond-comment {
-    width: 100%;
-    height: 60px;
-    padding: 0 1rem;
-    box-shadow: none;
-}
-
-.group-post-respond-submit {
-    font-size: 0.75rem;
-}
-
-.group-post-comment-list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-.group-post-comment-wrap {
-    overflow: hidden;
-    margin-bottom: 25px;
-    padding-bottom: 8px;
-    border-bottom: 1px solid lighten($light-gray, 12%);
-}
-
-.group-post-no-comment {
-    font-size: 0.8125rem;
-}
-
-.group-post-comment-avatar {
-    float: left;
-    width: 60px;
-    margin-right: 1rem;
-    img {
-        width: 60px;
-        height: 60px;
-        border-radius: 50%;
-    }
-}
-
-.group-post-comment-author {
-    font-size: .9375rem;
-    float: left;
-}
-
-.group-post-comment-time {
-    float: right;
-}
-
-.group-post-comment-content {
-    clear: both;
-}
-
-.group-post-comment-body {
-    float: left;
-    width: 80%;
-}
-
-// 260px
-@media screen and (min-width: 16.25rem) {
-    .group-post-attachments {
-        a {
-            display: inline-block;
-            text-overflow: ellipsis;
-        }
-    }
-    .group-post-attachments-file-name {
-        display: inline-block;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        vertical-align: middle;
-    }
-}
-
-@media screen and (min-width: 370px) {
-    .group-post-comment-body {
-        width: 60%;
-    }
-}
-
-// group new

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

@@ -0,0 +1,109 @@
+@charset "utf-8";
+
+// Group category page
+.group-category {
+    margin-bottom: 16px;
+}
+
+.group-category-tab {
+    .group-category-tab-nav {
+        font-size: 0.8125rem;
+        padding: 10px 12px;
+    }
+
+    .active {
+        .group-category-tab-nav {
+            background-color: $blue;
+
+            &:hover {
+                background-color: lighten($blue, 5%);
+            }
+        }
+    }
+}
+
+.group-category-item {
+    float: left;
+    margin: 0 0.625rem 1rem 0;
+    background-color: $green;
+
+    &:hover {
+        background-color: lighten($green, 5%);
+    }
+
+    .group-category-tag-icon {
+        font-size: 1rem;
+        vertical-align: middle;
+    }
+
+    a {
+        font-size: 0.8125rem;
+        font-family: $sub-font;
+        color: $white;
+    }
+}
+
+.group-category-request {
+    .group-category-item {
+        background-color: darken($dark-gray, 25%);
+    }
+}
+
+.group-category-tab-content {
+    border-top: 1px solid #ddd;
+    padding: 16px 0;
+    overflow: visible;
+}
+
+.group-category-controls {
+    margin-left: 8px;
+    a {
+        padding: 2px 0.4rem;
+        color: $white;
+        display: inline-block;
+        border-radius: 50%;
+    }
+    .group-category-approve {
+        background-color: $green;
+    }
+
+    .group-category-reject {
+        background-color: $red;
+    }
+}
+
+.group-category-approve-tootip {
+    white-space: nowrap;
+}
+
+.card-ownership {
+    border-top: 6px solid darken($gray, 7%);
+
+    &:before {
+        border-top-left-radius: $general;
+        content: "";
+        height: 6px;
+        width: 80%;
+        position: absolute;
+        left: 0;
+        top: -6px;
+    }
+}
+
+.card-owner {
+    &:before {
+        background-color: lighten($blue, 10%);
+    }
+}
+
+.card-public {
+    &:before {
+        background-color: lighten($green, 10%);
+    }
+}
+
+.card-member {
+    &:before {
+        background-color: lighten($red, 20%);
+    }
+}

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

@@ -0,0 +1,304 @@
+@charset "utf-8";
+
+// Genernal classes and modules
+.screen-reader {
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+}
+
+.img-reponsive {
+    max-width: 100%;
+    width: 100%;
+    height: auto;
+}
+
+.wrapper {
+    margin: auto;
+    max-width: $boundary;
+}
+
+.radius {
+    border-radius: $general;
+}
+
+// Buttons
+.button {
+    padding: 8px .75rem;
+    color: $black;
+    border: none;
+    border-radius: 15rem;
+    background: $gray;
+}
+
+.button-default {
+    color: $blue;
+    background-color: transparent;
+    border: 2px solid $blue;
+    transition: $fast all;
+
+    &:hover {
+        color: $white;
+        background-color: $blue;
+    }
+
+    &.gray {
+        color: $dark-gray;
+        border: 2px solid $dark-gray;
+        &:hover {
+            color: $white;
+            background-color: $dark-gray;
+        }
+    }
+}
+
+.button-activated {
+    color: #fff;
+    background-color: $green;
+}
+
+.button-primary {
+    color: $white;
+    background-color: $blue;
+    transition: $fast all;
+
+    &:hover {
+        color: $white;
+        background-color: darken($blue, 15%);
+    }
+}
+
+.button-small {
+    padding: 4px 0.625rem;
+    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;
+        }
+    }
+}
+
+// Tool Tip
+.tool-tip-parent {
+    position: relative;
+
+    &:hover {
+        .tool-tip {
+            display: block;
+        }
+    }
+}
+
+.tool-tip {
+    padding: 10px 0.75rem;
+    border-radius: .2rem;
+    color: $white;
+    background: rgba($black, 0.85);
+    position: absolute;
+    left: 0;
+    bottom: 100%;
+    z-index: 150;
+    display: none;
+
+    &:after {
+        border: 5px solid transparent;
+        border-top-color: rgba($black, 0.85);
+        content: "";
+        position: absolute;
+        left: 10px;
+        bottom: -10px;
+    }
+
+    &.right {
+        left: auto;
+        right: 0;
+
+        &:after {
+            left: auto;
+            right: 10px;
+        }
+    }
+
+    &.bottom {
+        top: 100%;
+        bottom: auto;
+
+        &:after {
+            top: -10px;
+            bottom: auto;
+            border-top-color: transparent;
+            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%);
+        border-bottom: 1px solid darken($gray, 6%);
+        background: none;
+        padding: 2px 8px;
+        transition: $fast all;
+
+        &:hover, &.open {
+            border-color: $blue;
+            background: $blue;
+            
+            .caret {
+                border-top-color: $white;
+            }
+        }
+    }
+
+    &:hover, &.open {
+        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;
+        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;
+    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);
+    }
+}
+
+// responsive grid
+.square {
+    float: left;
+    position: relative;
+    width: 20%;
+    padding-bottom: 20%;
+    margin: 1%;
+    background-color: $white;
+    overflow: hidden;
+    .content {
+        position: absolute;
+        height: 90%;
+        width: 90%;
+        padding: 5%;
+        .rs {
+            width: auto;
+            height: auto;
+            max-height: 90%;
+            max-width: 100%;
+        }
+    }
+    .table {
+        display: table;
+        width: 100%;
+        height: 100%;
+    }
+    .table-cell {
+        display: table-cell;
+        vertical-align: middle;
+    }
+    
+}
+
+// avatar
+.admin-avatar {
+    width: 60px;
+    height: 60px;
+    max-width: none;
+    border-radius: $round;
+}
+
+// breadcrumb
+.breadcrumb {
+    padding-left: 0;
+    margin: 0;
+    background: none;
+
+    > li {
+        text-shadow: none;
+        font-size: 13px;
+    }
+}

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

@@ -0,0 +1,226 @@
+@charset "utf-8";
+
+// Group index and public
+#main-wrap .wrap-inner {
+    padding: 80px 20px 20px;
+}
+
+.group-public,
+.group-index {
+    margin: auto;
+    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: 2.6rem 0.8rem;
+    position: relative;
+    min-height: 280px;
+
+    hr {
+        margin: 8px 0 10px 0;
+    }
+}
+
+.group-avatar {
+    position: relative;
+    width: 100%;
+    height: 200px;
+    overflow: hidden;
+    background: $dark-gray;
+    z-index: 100;
+
+    &:hover .action {
+        z-index: 600;
+        opacity: 1;
+    }
+
+    img {
+        width: 100%;
+        height: auto;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 500;
+        margin: auto;
+    }
+
+    .action {
+        opacity: 0;
+        background: rgba($blue, 0.9);
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        margin: auto;
+    }
+
+    .edit {
+        color: $white;
+        font-size: 25px;
+        position: absolute;
+        top: 50%;
+        left: 45%;
+        transform: translate(-50%, -50%);
+        margin: auto;
+    }
+
+    .trash {
+        color: $red;
+        font-size: 25px;
+        position: absolute;
+        top: 49%;
+        left: 60%;
+        transform: translate(-50%, -50%);
+        margin: auto;
+    }
+}
+
+.group-info {
+    overflow: hidden;
+}
+
+.group-mail {
+    color: $dark-gray;
+    font-family: $sub-font;
+}
+
+.group-roles {
+    list-style: none;
+    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;
+    }
+}
+
+.group-privacy {
+    color: $dark-gray;
+    margin-bottom: 8px;
+}
+
+.group-description {
+    overflow: hidden;
+    max-height: 150px;
+}
+
+.group-name {
+    margin-bottom: 4px;
+}
+
+// 370px
+@media screen and (min-width: 23.125rem) {
+    .group-index {
+        width: 90%;
+    }
+
+    .group-card {
+        width: 100%;
+    }
+}
+
+// 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;
+        }
+    }
+}
+
+// 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;
+        }
+    }
+}
+
+// 1080px
+@media screen and (min-width: 67.5rem) {
+    .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: 87.5rem) {
+    .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-members.scss

@@ -0,0 +1,152 @@
+// 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: 16px 1rem;
+    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;
+    width: 50%;
+}
+
+.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;
+    }
+}
+
+
+// 620
+@media screen and (min-width: 38.75rem) {
+    .group-member-item {
+        float: left;
+        margin-right: 1rem;
+        width: 45%;
+    }
+}
+
+// 980px
+
+@media screen and (min-width: 61.25rem) {
+    .group-member-content-wrap {
+        width: 70%;
+    }
+
+    .group-member-item {
+        width: 30%;
+    }
+
+    .group-member-page-title {
+        display: inline-block;
+        margin: 0;
+        padding: 0;
+        line-height: 70px;
+        transition: .6s all;
+    }
+}
+
+// 1400px 
+@media screen and (min-width: 87.5rem) {
+    .group-member-item {
+        width: 20%;
+    }
+
+}

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

@@ -0,0 +1,393 @@
+@charset "utf-8";
+
+// Group page
+#main-wrap {
+    padding-top: 0;
+}
+
+.group-post-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-post-banner-image-wrap {
+    background-color: $black;
+    text-align: center;
+}
+
+.group-post-view-switch {
+    position: absolute;
+    top: 4rem;
+    right: 2rem;
+}
+
+.group-post-banner-image {
+    width: auto;
+    max-width: 100%;
+    height: auto;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    margin: auto;
+}
+
+.group-post-bar {
+    padding: 0 2rem 0 6rem;
+    text-align: center;
+    background: rgba(25, 27, 29, 0.95);
+    width: 100%;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+}
+
+.group-post-view-switch-in-bar {
+    display: none;
+
+    .button {
+        padding: 3px .75rem;
+    }
+}
+
+.group-post-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-post-section {
+    overflow: hidden;
+    padding: 300px 2rem 30px;
+}
+
+.breadcrumb {
+    li {
+        overflow: hidden;
+        max-width: 150px;
+        display: inline-block;
+        vertical-align: middle;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+.gorup-page-info-wrap {
+    font-size: .9rem;
+    padding: 6px 1rem;
+    display: block;
+    float: right;
+    cursor: pointer;
+}
+
+.group-post-description-wrap {
+    clear: both;
+}
+
+.gorup-page-info-wrap {
+    margin-bottom: 10px;
+    text-align: right;
+}
+
+.group-post-status-wrap {
+    font-size: .75rem;
+    float: right;
+    padding: 2px 0.5rem;
+    margin-bottom: 10px;
+}
+
+.group-post-status-wrap.close-eye {
+    margin-left: 5px;
+    background: $red;
+}
+
+.group-post-description-wrap {
+    margin-bottom: 15px;
+    padding: 16px 1.2rem 16px;
+    border-radius: .2rem;
+    box-shadow: inset 0 0 8px $dark-gray;
+}
+
+.group-post-description {
+    clear: both;
+    text-align: justify;
+}
+
+.group-post-member-count,
+.group-post-no-member {
+    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;
+    margin-bottom: 40px;
+    padding: 28px 1.5rem;
+    text-align: center;
+
+    &.clickable {
+        cursor: pointer;
+    }
+
+    &:hover {
+        .group-post-title {
+            color: $blue;
+        }
+    }
+}
+
+.group-post-actions {
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.group-post-dropdown-toggle {
+    &:hover, &.open {
+        .caret {
+        }
+    }
+
+    .caret {
+    }
+}
+
+.group-post-dropdown {
+    a {
+        &:hover {
+        }
+    }
+
+    &.open {
+    }
+}
+
+.group-post-action-hint {
+    white-space: nowrap;
+}
+
+.group-post-image-wrap {
+    display: inline-block;
+    margin-bottom: 12px;
+}
+
+.group-post-image {
+    width: 100%;
+    max-width: 100%;
+    height: auto;
+    margin-top: 12px;
+    border: 2px solid $gray;
+    border-radius: $general;
+}
+
+.group-post-content {
+    margin-bottom: .5rem;
+    color: $dark-gray;
+    overflow: hidden;
+}
+
+.group-post-title {
+    font-size: 1.5rem;
+    font-weight: normal;
+    line-height: 1;
+    margin-bottom: 12px;
+    color: $light-black;
+    font-family: $paragraph-font;
+}
+
+.group-post-sub-wrap {
+    display: inline-block;
+}
+
+.group-post-meta-wrap {
+    color: $dark-gray;
+}
+
+.group-post-author,
+.group-post-sub-wrap {
+    margin-right: .5rem;
+}
+
+.group-post-seen-by {
+    display: inline-block;
+}
+
+.group-post-seen-by-lead {
+    font-style: normal;
+}
+
+// scroll view
+
+.group-post.scroll {
+    padding-top: 7rem;
+    padding-bottom: 6rem;
+
+    .group-post-banner-wrap {
+        height: 120px;
+    }
+
+    .group-post-page-title {
+        margin-bottom: 0;
+        font-size: 1.625rem;
+        line-height: 50px;
+    }
+
+    .group-post-new-post,
+    .group-post-join {
+        margin-top: 12px;
+        padding: 6px 10px;
+    }
+
+    .group-post-new-post {
+        display: inline-block;
+        vertical-align: top;
+    }
+
+    .group-post-view-switch {
+        position: static;
+        display: inline-block;
+        margin: 6px .5rem 0 0;
+        display: none;
+    }
+
+    .group-post-view-switch-in-bar {
+        display: inline-block;
+        margin-top: 12px;
+
+        .button {
+            padding: 4px .75rem;
+        }
+    }
+
+    .group-post-section {
+        padding-top: 60px;
+    }
+
+    .btn {
+        padding: 2px 5px;
+    }
+}
+
+.group-post li a {
+    text-decoration: none;
+    text-align: left;
+}
+
+.group-post-switch-btn {
+    color: $blue;
+
+    &:hover {
+        color: $white;
+    }
+}
+
+// 400px
+@media screen and (min-width: 25rem) {
+    .group-post-new-post,
+    .group-post-join {
+        margin: 0 0.625rem 16px;
+        float: none;
+        display: inline-block;
+    }
+
+    .group-post-view-switch-in-bar {
+        float: none;
+        margin: 0;
+
+        .button {
+            padding: 6px .75rem;
+        }
+    }
+}
+
+// 600px
+
+@media screen and (min-width: 37.5rem) {
+    .group-post-item {
+        margin-bottom: 35px;
+        text-align: left;
+    }
+
+    .group-post-image-wrap {
+        float: left;
+        width: 12%;
+        min-width: 100px;
+        margin-right: 4%;
+        max-height: 140px;
+        overflow: hidden;
+    }
+
+    .group-post-content-wrap {
+        float: left;
+        width: 70%;
+        font-family: $paragraph-font;
+    }
+}
+
+/* 760px */
+
+@media screen and (min-width: 47.5rem) {
+    .group-post-content-wrap {
+        width: 70%;
+    }
+
+    .group-post-bar {
+        text-align: left;
+    }
+
+    .group-post-page-title {
+        display: inline-block;
+        margin: 0;
+        padding: 0;
+        line-height: 70px;
+        transition: .6s all;
+        max-width: 80%;
+    }
+
+    .group-post-new-post,
+    .group-post-join {
+        float: right;
+        margin: 18px 0 0 0;
+    }
+
+    .group-post-view-switch-in-bar {
+        margin: 18px 8px 0 0;
+        float: right;
+
+        li {
+            padding: 8px .75rem;
+        }
+    }
+
+    .group-post-view-switch {
+        float: right;
+    }
+}
+
+// 900px
+@media screen and (min-width: 56.25rem) {
+    .group-post-content-wrap {
+        width: 80%;
+    }
+}

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

@@ -0,0 +1,37 @@
+@charset "utf-8";
+
+// General style
+body {
+    background: $gray;
+    font-family: $main-font;
+}
+
+.group-show-post-respond-comment,
+ul, li, div, img {
+    box-sizing: border-box;
+}
+
+h1, h2, h3, h4, h5, h6, label, legend {
+    font-family: $main-font;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+}
+
+a {
+    color: $blue;
+    text-decoration: none;
+    &:hover {
+        color: lighten($blue, 5%);
+        text-decoration: none;
+    }
+}
+
+a, button {
+    &:focus {
+        outline: none;
+    }
+}
+

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

@@ -0,0 +1,307 @@
+@charset "utf-8";
+
+// Group show post
+.group-show-post {
+    padding: 0 2rem 30px;
+}
+
+.group-show-post-meta {
+    margin-bottom: 15px;
+}
+
+.group-show-post-title {
+    font-family: $main-font;
+    float: left;
+    width: 90%;
+    font-weight: normal;
+    line-height: 1;
+}
+
+.group-show-post-avatar-wrap {
+    float: right;
+    padding: 0 0.375rem 0 0;
+}
+
+.group-show-post-avatar-username-toggle {
+    display: block;
+}
+
+.group-show-post-avatar {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+}
+
+.group-show-post-username {
+    display: none;
+    top: 100%;
+    padding-bottom: 30px;
+    right: 0;
+    left: auto;
+    white-space: nowrap;
+    font-size: 0.75rem;
+    &:after {
+        border-top-color: transparent;
+        border-bottom-color: rgba(0, 0, 0, 0.85);
+        top: -10px;
+        left: auto;
+        right: 20px;
+        bottom: auto;
+    }
+}
+
+.group-show-post-postdate {
+    display: inline-block;
+    clear: both;
+}
+
+.group-show-post-image-wrap {
+    position: relative;
+    background: $black;
+    overflow: hidden;
+    &:hover {
+        .cycle-nav {
+            opacity: 1;
+        }
+        .group-show-post-cycle-prev {
+            left: 2rem;
+        }
+        .group-show-post-cycle-next {
+            right: 2rem;
+        }
+    }
+}
+
+.group-show-post-image-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.cycle-nav {
+    font-size: 1.2rem;
+    position: absolute;
+    top: 50%;
+    margin-top: -1.25rem;
+    line-height: 1.5rem;
+    color: $white;
+    z-index: 500;
+    width: 2.5rem;
+    height: 2.5rem;
+    cursor: pointer;
+    -webkit-transition: $fast all;
+    transition: $fast all;
+    text-align: center;
+    background-color: rgba($black, 0.8);
+    border-radius: 50%;
+    opacity: 0;
+    &:hover {
+        background-color: $blue;
+    }
+    .group-show-post-cycle-nav-icon {
+        line-height: 2.6rem;
+    }
+}
+
+.group-show-post-cycle-prev {
+    left: 0;
+}
+
+.group-show-post-cycle-next {
+    right: 0;
+}
+
+.group-show-post-content {
+    font-family: $main-font;
+    font-size: .8125rem;
+    margin: 15px 0;
+}
+
+.group-show-post-attachment-wrap {
+    float: left;
+    width: 80%;
+    margin: 10px 0 25px;
+    .group-show-post-attachment-file-format {
+        margin-right: 8px;
+        vertical-align: middle;
+        font-size: 1rem;
+    }
+}
+
+.group-show-post-seen-by {
+    float: right;
+    cursor: pointer;
+    &:hover {
+        .group-show-post-seen-by-names {
+            display: block;
+            white-space: nowrap;
+        }
+    }
+    .group-show-post-seen-by-name {
+        display: block;
+        color: #fff;
+        white-space: nowrap;
+    }
+}
+
+.group-show-post-seen-by-lead {
+    margin-right: 4px;
+    font-style: normal;
+}
+
+.group-show-post-seen-by-names {
+    display: none;
+}
+
+.group-show-post-seen-by-count {
+    border-radius: 50%;
+    background: $gray;
+    display: inline-block;
+}
+
+// Comment section
+.comments {
+    clear: both;
+    .group-show-post-respond-comment {
+        width: 100%;
+        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 {
+    padding-left: 2rem;
+    background: $red;
+    color: $white;
+    padding: 10px 0.75rem;
+    border-radius: $general;
+    i {
+        margin-right: 8px;
+    }
+}
+.group-show-post-respond-wrap {
+    margin-bottom: 16px;
+}
+.group-show-post-respond-submit {
+    font-size: 0.875rem;
+}
+
+.group-show-post-comment-list {
+    margin: 0;
+    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;
+    padding: 16px 1.25rem;
+}
+
+.group-show-post-no-comment {
+    font-size: 0.8125rem;
+}
+
+
+.group-show-post-comment-avatar {
+    float: left;
+    width: 60px;
+    margin-right: 1rem;
+    img {
+        width: 60px;
+        height: 60px;
+        border-radius: 50%;
+    }
+}
+
+.group-show-post-comment-author {
+    font-size: .9375rem;
+    float: left;
+    margin-right: 0.5rem;
+}
+
+.group-show-post-comment-time {
+    float: left;
+}
+
+.group-show-post-comment-content {
+    clear: both;
+}
+
+.group-show-post-comment-body {
+    float: left;
+    width: 60%;
+}
+
+// 260px
+@media screen and (min-width: 16.25rem) {
+    .group-show-post-attachments {
+        a {
+            display: inline-block;
+            text-overflow: ellipsis;
+        }
+    }
+    .group-show-post-attachments-file-name {
+        display: inline-block;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        vertical-align: middle;
+        width: 80px;
+        white-space: nowrap;
+    }
+}
+
+// 370px
+@media screen and (min-width: 23.125rem) {
+    .group-show-post-comment-body {
+        width: 70%;
+    }
+}
+
+// 800px
+@media screen and (min-width: 50rem) {
+    .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
+@media screen and (min-width: 60rem) {
+    .group-show-post-comment-body {
+        width: 90%;
+    }
+}

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

@@ -0,0 +1,36 @@
+@charset "utf-8";
+
+// Google fonts
+@import url(http://fonts.googleapis.com/css?family=Maven+Pro);
+
+@import url(http://fonts.googleapis.com/css?family=Roboto);
+
+// Font stacks
+$main-font: "Maven Pro", "微軟正黑體" sans-serif;
+$sub-font: "Roboto", "微軟正黑體", sans-serif;
+$paragraph-font: "Roboto", "微軟正黑體", sans-serif;
+
+// Colors
+$gray: #f3f3f3;
+$dark-gray: #aaaaaa;
+$light-gray: #cdcdcd;
+$white: white;
+$light-black: #353535;
+$black: black;
+$green: #74c25d;
+$blue: #4171d5;
+$red: #dd5933;
+$blue-green: #00acee;
+$group-page-bar-color: #171717;
+
+// Transition units
+$fast: 0.3s;
+$normal: 0.6s;
+$slow: 1s;
+
+// Border radius units
+$general: 0.25rem;
+$round: 50%;
+
+// Commonly use units
+$boundary: 1150px;

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

@@ -0,0 +1,229 @@
+@charset "utf-8";
+
+@import "group-variables";
+@import "group-classes";
+@import "group-reset";
+
+// General style
+body {
+    background: $gray;
+    font-family: $main-font;
+}
+
+// dropzone
+
+.dropzone-pool {
+    border: 2px dashed $blue;
+    margin-bottom: 16px;
+    font-family: $paragraph-font;
+    font-size: 0.9375rem;
+    color: $dark-gray;
+    margin-right: 1rem;
+    border-radius: $general;
+}
+
+// Override and resolve the conflict with main-form.css for that I need RWD support for this page
+.main-forms fieldset .input-area .controls textarea {
+    max-width: none;
+}
+
+// Override Bootstrap modal 
+.modal.fade {
+    top: -65%;
+}
+
+// Override select2 styles, I need this evil power
+#main-wrap {
+    .select2-container-multi {
+        margin-right: 0.9375rem;
+        min-width: 200px;
+        .select2-choices {
+            padding: 0;
+            border-radius: $general;
+            .select2-search-field {
+                input {
+                    padding: 10px 5px;
+                }
+            }
+        }
+        .select2-search-choice {
+            padding: 10px 1.75rem 10px 0.7rem;
+            border-color: lighten($light-gray, 5%);
+            background: $white;
+            > div {
+                &:before {
+                    content: "\F007";
+                    font-family: FontAwesome;
+                    display: inline-block;
+                    font-size: 0.9375rem;
+                    color: $blue;
+                    margin: 0 0.5rem 0 0;
+                }
+            }
+        }
+        .select2-search-choice-close {
+            right: 15px;
+            left: auto;
+            &:before {
+                content: "\f057";
+                font-family: FontAwesome;
+                position: absolute;
+                cursor: pointer;
+                left: 6px;
+                top: 6px;
+                font-size: 0.9375rem;
+                color: $dark-gray;
+            }
+            &:hover {
+                &:before {
+                    color: $red;
+                }
+            }
+        }
+    }
+}
+.select2-result-label {
+    > span {
+        white-space: nowrap;
+    }
+}
+
+.wrap-inner {
+    .upload-status-notice {
+        position: fixed;
+        right: 1rem;
+        top: 4rem;
+        color: $white;
+        padding: 16px 1.375rem;
+        background-color: $blue;
+        border-radius: $general;
+        font-size: 0.8125rem;
+        box-shadow: 0px 0px 16px 3px rgba(0, 0, 0, 0.2);
+        -webkit-animation-duration: .3s;
+        animation-duration: .3s;
+        z-index: 3000;
+    }
+}
+.fileupload {
+    .thumbnail {
+        max-width: 60%;
+        height: auto;
+    }
+}
+
+.img-avatar {
+    width: 50px;
+    height: 50px;
+}
+
+
+
+// members page
+.existing-phone-avatar {
+    vertical-align: top;
+    margin: 0 0.5rem 0.5rem 0;
+}
+.existing-member-count {
+    width: 60px;
+    height: 60px;
+    display: inline-block;
+    box-sizing: border-box;
+    line-height: 40px;
+    text-align: center;
+    white-space: nowrap;
+    padding: 8px 0.45rem;
+    font-size: 0.8125rem;
+}
+.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;
+}
+
+.group-edit-avatar {
+    width: 60;
+}
+
+.group-member-edit-table {
+    width: 100%;
+    tr {
+        border-bottom: 1px solid $gray;
+    }
+    td {
+        padding: 8px 0.75rem;
+        &:first-child {
+            width: 60px;
+        }
+    }
+    .make-admin-checkbox {
+        display: inline-block;
+        vertical-align: top;
+        margin-right: 0.3125rem;
+    }
+    .group-member-permission {
+        display: inline-block;
+        vertical-align: text-top;
+    }
+
+}
+.group-admin-edit-image-wrap {
+    margin: 0 24px 1rem 0;
+}
+.group-admin-edit-image-item {
+    margin-bottom: 16px;
+    padding: 16px 0.5rem;
+}
+.group-admin-edit-image-container {
+    float: left;
+    width: 15%;
+    min-width: 150px;
+    margin: 0 1rem 16px 0;
+}
+
+.group-admin-edit-checkbox-wrap {
+    color: $white;
+    font-size: 0.8125rem;
+    background: $blue;
+    padding: 2px 0.625rem;
+    border-radius: $general;
+    float: left;
+}
+.group-admin-edit-image-checkbox {
+    display: inline-block;
+    vertical-align: top;
+}
+.group-admin-edit-image-label {
+    display: inline-block;
+    vertical-align: text-top;
+    font-size: 0.75rem;
+}
+.group-admin-edit-image-item-inner {
+    padding: 16px 0.625rem;
+    background: $white;
+    border-radius: $general;
+}
+.group-admin-edit-file-wrap {
+    margin-bottom: 10px;
+}
+.group-admin-edit-file-item {
+    padding: 10px 16px;
+    float: left;
+    margin: 0 8px 0.5rem 0;
+    font-size: 0.8125rem;
+    .group-admin-edit-file-checkbox {
+        margin: 0;
+    }
+}
+.group-admin-edit-filename {
+    margin-right: 0.3125rem;
+}
+.group-admin-edit-file-delete {
+    padding-bottom: 4px;
+    border-bottom: 1px dotted $red;
+    vertical-align: top;
+}

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

@@ -0,0 +1,15 @@
+@charset "utf-8";
+
+@import "group-variables";
+@import "group-classes";
+@import "group-reset";
+@import "group-index";
+@import "group-post";
+@import "group-show-post";
+@import "group-category";
+@import "group-members";
+
+
+.topnav {
+    display: none;
+}

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;
@@ -310,24 +310,25 @@ $orbit-bar-bgc-lighter:           lighten($orbit-bar-bgc, 20%) !default;
           }
           li {
             min-width: 100px;
-            padding: 0 0.8em;
+            padding: 0;
             &.divider {
               height: 1px;
               margin: 0.3em 0;
               background-color: lighten($orbit-bar-bgc, 60%);
             }
             &:hover, &.active {
+              color: #fff;
               background-color: #0095CF;
               a {
                 color: #FFF;
               }
             }
           }
-          a {
+          a, .active {
             color: $orbit-bar-bgc-lighter;
             font-size: 0.8em;
             display: block;
-            padding: 0.5em 0;
+            padding: 0.5em 1.2em;
             white-space: nowrap;
           }
         }

app/controllers/admin/groups_controller.rb

@@ -9,7 +9,15 @@ class Admin::GroupsController < OrbitGroupController
 	end
 
 	def categories
-		@categories = GroupCategory.all
+		old_categories = GroupCategory.where(:is_accepted.ne => false)
+		if old_categories.count > 0
+			old_categories.each do |oc|
+				oc.is_accepted = true
+				oc.save
+			end
+		end
+		@admin_categories = GroupCategory.by_admin
+		@requested_categories = GroupCategory.is_requested
 	end
 
 	def newpost
@@ -25,6 +33,20 @@ class Admin::GroupsController < OrbitGroupController
 		redirect_to admin_group_path(@group)
 	end
 
+	def updatepost
+		@post = GroupPost.find(params[:id])
+		group = @post.group
+		@post.update_attributes(post_update_params)
+		@post.save
+		redirect_to admin_group_path(group)
+	end
+
+	def deletepost
+		gp = GroupPost.find(params[:id])
+		gp.destroy
+		render :json => {"success" => true}.to_json
+	end
+
 	def showpost
 		render_401 and return if !user_can_read?
 		if (current_user.id.to_s != @post.author.to_s) && (!@post.read_by.include?(current_user.id.to_s))
@@ -38,6 +60,12 @@ class Admin::GroupsController < OrbitGroupController
 		}
 	end
 
+	def editpost
+		render_401 and return if @post.author != current_user.id
+		@no_breadcrumb = true
+		@grouppost = @post
+	end
+
 	def show
 		@no_breadcrumb = true
 		@no_filter = true
@@ -46,10 +74,41 @@ class Admin::GroupsController < OrbitGroupController
 		end
 	end
 
+	def members
+		render_401 and return if !user_can_read?
+		@group_members = []
+		@group.users.each do |user|
+			mp = user.member_profile rescue nil
+			if !mp.nil?
+				avatar = (mp.avatar.thumb.url == "thumb_person.png" ? "/assets/thumb_person.png" : mp.avatar.thumb.url rescue "/assets/thumb_person.png")		
+				@group_members << {
+					"id" => user.id.to_s,
+					"user_name" => (user.user_name rescue ""),
+					"avatar" => avatar,
+					"name" => (mp.name_translations rescue {"en" => "","zh_tw" => ""}),
+					"admin" => @group.admins.include?(user.id.to_s)
+				}
+			end
+		end
+	end
+
 	def create_category
 		gc = GroupCategory.new(category_params)
 		gc.save
-		@categories = GroupCategory.all
+		if !current_user.is_admin?
+			@requested_categories = GroupCategory.is_requested
+			render :partial => "group_requested_categories"
+		else
+			@admin_categories = GroupCategory.by_admin
+			render :partial => "group_categories"
+		end
+	end
+
+	def update_category
+		gc = GroupCategory.find(params[:category_id])
+		gc.update_attributes(category_params)
+		gc.save
+		@admin_categories = GroupCategory.by_admin
 		render :partial => "group_categories"
 	end
 
@@ -81,9 +140,23 @@ class Admin::GroupsController < OrbitGroupController
 		redirect_to admin_groups_path
 	end
 
+	def update
+		@group = Group.find(params[:id])
+		@group.update_attributes(group_update_params)
+		@group.save
+		redirect_to admin_groups_path
+	end
+
+	def destroy
+		group = Group.find(params[:id])
+		group.destroy
+		render :json => {"success" => true}.to_json
+	end
+
 	def new
 		@group = Group.new
-		@categories = GroupCategory.all.collect{|gc| [gc.title,gc.id]}
+		@no_breadcrumb = true
+		@categories = GroupCategory.by_admin.collect{|gc| [gc.title,gc.id]}
 		@members = []
 		MemberProfile.all.each do |mp|
 			user = mp.user rescue nil
@@ -99,6 +172,81 @@ class Admin::GroupsController < OrbitGroupController
 		end
 	end
 
+	def edit
+		render_401 and return if !is_user_group_admin?
+		@no_breadcrumb = true
+		@members = []
+		MemberProfile.all.each do |mp|
+			user = mp.user rescue nil
+			if !user.nil? && user.id.to_s != current_user.id.to_s && user.user_name != "rulingcom" && !@group.users.include?(user)
+				avatar = (mp.avatar.thumb.url == "thumb_person.png" ? "/assets/thumb_person.png" : mp.avatar.thumb.url rescue "/assets/thumb_person.png")
+				@members << {
+					"id" => user.id.to_s,
+					"user_name" => (user.user_name rescue ""),
+					"avatar" => avatar,
+					"name" => (mp.name_translations rescue {"en" => "","zh_tw" => ""})
+				}
+			end
+		end
+		@existing_members = []
+		@group.users.each do |user|
+			mp = user.member_profile rescue nil
+			if !mp.nil?
+				avatar = (mp.avatar.thumb.url == "thumb_person.png" ? "/assets/thumb_person.png" : mp.avatar.thumb.url rescue "/assets/thumb_person.png")		
+				@existing_members << {
+					"id" => user.id.to_s,
+					"user_name" => (user.user_name rescue ""),
+					"avatar" => avatar,
+					"name" => (mp.name_translations rescue {"en" => "","zh_tw" => ""}),
+					"admin" => @group.admins.include?(user.id.to_s)
+				}
+			end
+		end
+	end
+
+	def get_existing_member_template
+		g = params[:group_id]
+		group = Group.find(g)
+		@existing_members = []
+		group.users.each do |user|
+			mp = user.member_profile rescue nil
+			if !mp.nil?
+				avatar = (mp.avatar.thumb.url == "thumb_person.png" ? "/assets/thumb_person.png" : mp.avatar.thumb.url rescue "/assets/thumb_person.png")		
+				@existing_members << {
+					"id" => user.id.to_s,
+					"user_name" => (user.user_name rescue ""),
+					"avatar" => avatar,
+					"name" => (mp.name_translations rescue {"en" => "","zh_tw" => ""}),
+					"admin" => group.admins.include?(user.id.to_s)
+				}
+			end
+		end
+		render :partial => "group_existing_member"
+	end
+
+	def remove_user
+		group = Group.find(params[:group_id])
+		user_id = params[:user_id]
+		user = User.find(user_id)
+		group.users.delete(user)
+		group.admins.delete(user.id.to_s) if group.admins.include?(user.id.to_s)
+		group.save
+		render :json => {"success" => true}.to_json
+	end
+
+	def toggle_admin
+		group = Group.find(params[:group_id])
+		user_id = params[:user_id]
+		user = User.find(user_id)
+		if params[:admin] == "true"
+			group.admins << user.id.to_s
+		else
+			group.admins.delete(user.id.to_s)
+		end
+		group.save
+		render :json => {"success" => true}.to_json
+	end
+
 	def new_comment
 		gpc = GroupPostComment.new(comment_params)
 		gpc.save
@@ -108,7 +256,13 @@ class Admin::GroupsController < OrbitGroupController
 	private 
 
 	def category_params
-		params.require(:category).permit!
+		p = params.require(:category).permit!
+		if p[:is_accepted].nil?
+			p[:is_accepted] = true
+		else
+			p[:is_accepted] = false
+		end
+		p
 	end
 
 	def comment_params
@@ -137,6 +291,42 @@ class Admin::GroupsController < OrbitGroupController
 		p
 	end
 
+	def post_update_params
+		p = params.require(:group_post).permit!
+		p["author"] = current_user.id
+		params[:images_to_destroy].each do |img|
+			gpi = GroupPostImage.find(img) rescue nil
+			gpi.destroy if !gpi.nil?
+		end if !params[:images_to_destroy].nil?
+
+		images = @post.group_post_images
+
+		p[:group_post_images].each do |id|
+			gpi = GroupPostImage.find(id) rescue nil
+			if !gpi.nil?
+				images << gpi
+			end
+		end if !p[:group_post_images].nil?
+
+		params[:files_to_destroy].each do |fil|
+			gpf = GroupPostFile.find(fil) rescue nil
+			gpf.destroy if !gpf.nil?
+		end if !params[:files_to_destroy].nil?
+
+		files = @post.group_post_files
+
+		p[:group_post_files].each do |id|
+			gpf = GroupPostFile.find(id) rescue nil
+			if !gpf.nil?
+				files << gpf
+			end
+		end if !p[:group_post_files].nil?
+
+		p[:group_post_images] = images
+		p[:group_post_files] = files
+		p
+	end
+
 	def post_image_params
 		params.require(:group_post_image).permit!
 	end
@@ -154,4 +344,16 @@ class Admin::GroupsController < OrbitGroupController
 		p
 	end
 
-end
+	def group_update_params
+		p = params.require(:group).permit!
+		p["user_ids"] = [] if p["user_ids"].nil?
+		p["user_ids"].concat(@group.users.collect{|u| u.id.to_s})
+		p
+	end
+
+end
+
+
+
+
+

app/controllers/admin/members_controller.rb

@@ -468,12 +468,15 @@ class Admin::MembersController < OrbitMemberController
 
   def create
     @member = MemberProfile.new(member_profile_params)
-    if user_params["user_name"] != ""
-      @user = User.new(user_params) rescue nil
-      @user.member_profile = @member
-      @user.save
-    end
     if @member.save
+      if user_params["user_name"] != ""
+        @user = User.new(user_params) rescue nil
+        @user.member_profile = @member
+        if !@user.save
+          @member.destroy
+          render 'new' and return
+        end
+      end
       if !params[:member_profile_field_values].nil?
         params[:member_profile_field_values].each_with_index do |m,i|
           @custom_field_value = @member.member_profile_field_values.build(value: m.second["value"], member_profile_field_id: m.second["member_profile_field_id"])

app/controllers/admin/store_controller.rb

@@ -35,6 +35,35 @@ class Admin::StoreController < OrbitAdminController
 		response = http.request(request)
 		data = JSON.parse(response.body)
       	render :json => data.to_json
+      	%x(kill -s USR2 `cat tmp/pids/unicorn.pid`)
+    	sleep 5
+	end
+
+	def authorize_default_modules
+		modules = ModuleApp.all
+	    ids = modules.collect{|ma| ma.key}
+	    store_token = Site.first.store_token rescue nil
+	    if !store_token.nil?
+	      module_apps = ModuleApp.all
+	      params_to_send = {'store_token' => store_token, "apps" => ids}
+	      uri = URI.parse(OrbitStore::URL)
+	      http = Net::HTTP.new(uri.host,uri.port)
+	      request = Net::HTTP::Post.new("/store/register_old_sites_modules")
+	      request.body = params_to_send.to_query
+	      response = http.request(request) rescue nil
+	      if response.nil?
+	       render :json => {"success" => false, "message" => "Could not connect to the store."}.to_json
+	      else
+	      	data = JSON.parse(response.body)
+	      	if data["success"]
+				render :json => {"success" => true}.to_json
+			elsif !data["success"]
+				render :json => {"success" => false, "message" => data["message"]}.to_json
+			end
+	      end
+	    else
+	      render :json => {"success" => false, "message" => "Cannot register modules, site is not registered with store."}.to_json
+	    end
 	end
 
 	def check_permissions

app/controllers/orbit_group_controller.rb

@@ -4,13 +4,13 @@ class OrbitGroupController < ApplicationController
 
 	  def get_group
 	  	case params[:action]
-	  	when "show"
+	  	when "show","edit"
 	  		uid = params[:id].split("-").last
 	  		@group = Group.find_by(:uid => uid)
-	  	when "newpost", "createpost"
+	  	when "newpost", "createpost", "members"
 			uid = params[:group_id].split("-").last
 			@group = Group.find_by(:uid => uid)
-		when "showpost"
+		when "showpost", "editpost"
 			uid = params[:id].split("-").last
 			@post = GroupPost.find_by(:uid => uid)
 			@group = @post.group
@@ -21,7 +21,7 @@ class OrbitGroupController < ApplicationController
 	  	@access_right_level = "none"
 	  	read_or_write = @group.permission rescue "read"
 	  	case params[:action]
-	  	when "show", "showpost", "newpost"
+	  	when "show", "showpost", "newpost", "edit", "members", "editpost"
 	  		is_member = @group.users.include?(current_user)
 	  		if @group.admins.include?(current_user.id.to_s)
 	  			@access_right_level = "admin"

app/controllers/pages_controller.rb

@@ -31,6 +31,7 @@ class PagesController < ApplicationController
     	impressionist(page)
     	page.inc(view_count: 1)
     end
+    params[:is_frontend_view] = "true"
     OrbitHelper.set_params params,current_user
     OrbitHelper.set_site_locale locale
     render :html => render_final_page("home",page,true).html_safe
@@ -39,6 +40,7 @@ class PagesController < ApplicationController
   def show
     display_type = ""
     path = request.path.split('/')
+    params[:is_frontend_view] = "true"
     if path.size <= 2
       redirect_to root_path
     else
@@ -131,6 +133,17 @@ class PagesController < ApplicationController
     end
   end
 
+  def update_child_pages_url(page)
+    page.child_page.each do |cp|
+      if !cp.child_page.blank?
+        update_child_pages_url(cp)
+      else
+        cp.url = page.url + "/#{cp.page_id}"
+        cp.save
+      end
+    end
+  end
+
   def update_item_position
     @page = Page.find(params[:id])
     new_parent_page = Page.find(params[:parent_id])
@@ -139,6 +152,9 @@ class PagesController < ApplicationController
     if new_parent_page.id != old_parent_page_id
       url = (new_parent_page.url == "/" ? "" : new_parent_page.url)
       @page.url = url + "/#{@page.page_id}"
+      if !@page.child_page.blank?
+        update_child_pages_url(@page)
+      end
     end
     @page.save
     params["children_ids"].each_with_index do |child,i|
@@ -198,11 +214,11 @@ class PagesController < ApplicationController
       {"key" => "email", "human_readable" => I18n.t("users.email")}
     ]
 
-    custom_attribs = MemberProfileField.all.collect do |mpf|
+    custom_attribs = MemberProfileField.all.asc(:created_at).collect do |mpf|
       {"key" => mpf.key, "human_readable" => mpf.title}
     end
 
-    role_attribs = AttributeField.all.collect do |af|
+    role_attribs = AttributeField.all.asc(:created_at).collect do |af|
       {"key" => af.key, "human_readable" => af.title}
     end
 
@@ -416,7 +432,8 @@ class PagesController < ApplicationController
       end
       @layout_html = render_to_string(@file)
       doc = Nokogiri::HTML(@layout_html, nil, "UTF-8")
-
+      head = doc.css("head")
+      head[0].inner_html = head.inner_html + OrbitHelper.get_css_to_render_in_head
       @part_partials.each do |key, partial|
         html_string = ""
         partial.each do |p|

app/helpers/application_helper.rb

@@ -66,6 +66,7 @@ module ApplicationHelper
 		site_footer = site_footer.nil? ? "" : site_footer
 		html = html.gsub("{{footer-data}}",site_footer)
 		counter = Page.root.view_count.to_s rescue ""
+		counter = t(:visitors_count) + " : " + counter
 		html = html.gsub("{{site-counter}}",counter)
 		html.html_safe
 	end

app/helpers/orbit_helper.rb

@@ -339,6 +339,18 @@ module OrbitHelper
     !$mobile.blank?
   end
 
+  def self.render_css_in_head(css=[])
+    @css_to_render_in_head = css
+  end
+
+  def self.get_css_to_render_in_head
+    css_html = ""
+    @css_to_render_in_head.each do |css|
+      css_html = css_html + "<link rel='stylesheet' media='screen' href='/assets/#{css}'>\n"
+    end
+    return css_html
+  end
+
   # ===============================================================  
   # Breadcrumbs
   # ===============================================================

app/models/group.rb

@@ -13,12 +13,16 @@ class Group
 
 	belongs_to :group_category
 	has_and_belongs_to_many :users
-  	has_many :group_posts
+  	has_many :group_posts, :dependent => :destroy
   
 	scope :closed, ->{ where(privacy: "closed") }
 	scope :open, ->{ where(privacy: "open") }
 	scope :archived, ->{ where(archive: true) }
 	scope :not_archived, ->{ where(archive: false) }
 
+	def privacy_name
+		return self.privacy == "closed" ? "private" : "public"
+	end
+
 
 end

app/models/group_category.rb

@@ -3,6 +3,10 @@ class GroupCategory
   	include Mongoid::Timestamps
 
   	field :title, localize: true
+  	field :is_accepted, type: Boolean, :default => true
 
   	has_many :groups
+
+  	scope :is_requested, ->{ where(is_accepted: false) }
+  	scope :by_admin, ->{ where(is_accepted: true) }
 end

app/templates/orbit_bootstrap/assets/javascripts/app.js

@@ -1,146 +1,167 @@
-(function( $ ) {
+(function($) {
 
-  "use strict";
+    'use strict';
 
-  function init() {
+    function init() {
-    var doc = document,
+        var doc = document,
-        lang = doc.documentElement.lang,
+            lang = doc.documentElement.lang,
-        pageModule = doc.body.getAttribute( "data-module" );
+            pageModule = doc.body.getAttribute('data-module');
 
-    var orbit = {
+        var orbit = {
 
-        helpers : {
+            helpers: {
-          // Cross-browser class manipulation
+                // Cross-browser class manipulation
-          addClass: function( el, className ) {
+                addClass: function(el, className) {
-            if ( el.classList ) {
+                    if (el.classList) {
-              el.classList.add( className );
+                        el.classList.add(className);
-            } else {
+                    } else {
-              el.className += " " + className;
+                        el.className += ' ' + className;
-            }
+                    }
-          },
+                },
-          hasClass: function( el, cls ) {
+                hasClass: function(el, cls) {
-            return ( " " + el.className + " " ).indexOf( " " + cls + " " ) > -1;
+                    return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1;
-          }
-        },
-
-        plugins : {
-          // RWD image resize script
-          bullEye: function() {
-            $( ".bullseye" ).bullseye({
-              fadeEffect: false
-            });
-          }
-        },
-
-        nav : {
-          // Add class name to the menu item when its child items are more than 8 items
-          addMegaDropdownClass: function( els, len, className ) {
-            var els = doc.querySelectorAll( els ),
-                elsLen = els.length,
-                i = -1;
-
-            if( elsLen > 1 ) {
-              for ( i = 0; i < elsLen; i++ ) {
-                if ( els[ i ].children.length > len ) {
-                    this.helpers.addClass( els[ i ].parentNode, className || "mega-dropdown" );
                 }
-              }
+            },
-            }
-          },
-          // Append caret to menu item if it has dropdown
-          addCaret: function() {
-            var els = doc.querySelectorAll( ".page_menu.level_2" ),
-                len = els.length,
-                i = -1;
 
-            for ( i = 0; i < len; i++ ) {
+            plugins: {
-              var node = doc.createElement( "span" );
+                // RWD image resize script
-              node.className = "caret";
+                bullEye: function() {
-              els[ i ].parentNode.appendChild( node );
+                    $('.bullseye').bullseye({
-            }
+                        fadeEffect: false
-          }
+                    });
-        },
+                }
+            },
 
-        announcement: {
+            nav: {
-          // Announcement text truncation
+                // Add class name to the menu item when its child items are more than 8 items
-          truncateAnnouncement: function( els, maxLen ) {
+                addMegaDropdownClass: function(els, len, className) {
-              var els = doc.querySelectorAll( els ),
+                    var els = doc.querySelectorAll(els),
-                  newTitle = "";
+                        elsLen = els.length,
-                  i = -1,
+                        i = -1;
-                  elsLen = els.length;
 
-              for ( i = 0; i < elsLen; i ++ ) {
+                    if (elsLen > 1) {
-                  if ( els[ i ].firstChild !== null ) {
+                        for (i = 0; i < elsLen; i++) {
-                      if( els[ i ].firstChild.length > maxLen ) {
+                            if (els[i].children.length > len) {
-                          newTitle = els[ i ].firstChild.textContent;
+                                this.helpers.addClass(els[i].parentNode, className || 'mega-dropdown');
-                          els[ i ].textContent = newTitle.substring( 0, maxLen ) + "...";
+                            }
-                      }
-                  }
-              }
-          }
-        },
-
-        member: {
-          equalHeight: function() {
-              var bigbrother = -1;
-
-              $( ".i-member-item" ).each( function() {
-                bigbrother = bigbrother > $( ".i-member-item" ).height() ? bigbrother : $( ".i-member-item" ).height();
-              });
-
-              $( ".i-member-item" ).each( function() {
-                $( ".i-member-item" ).height( bigbrother );
-              });
-          }
-        },
-
-        // Add link and cursor class name on element that has data-link attribute
-        addLinkOnADBanner: function( els ) {
-            $.each( els, function() {
-                if ( $( this ).data( "link" ) !== "" && !$( this ).hasClass( "youtube" ) ) {
-                    $( this ).on( "click", function() {
-                        var target = $( this ).data( "target" ),
-                            link = $( this ).data( "link" );
-                        if ( target === "_blank" ) {
-                            window.open( link, target );
-                        } else {
-                            window.location.href = link;
                         }
-                    }).addClass( "cursor" );
+                    }
+                },
+                // Append caret to menu item if it has dropdown
+                addCaret: function() {
+                    var els = doc.querySelectorAll('.page_menu.level_2'),
+                        len = els.length,
+                        i = -1;
+
+                    for (i = 0; i < len; i++) {
+                        var node = doc.createElement('span');
+                        node.className = 'caret';
+                        els[i].parentNode.appendChild(node);
+                    }
                 }
-            });
+            },
-        },
-    
-        // Sitemenu dropdown
-        sitemenuDropdown: function( els ) {
-          var els = doc.querySelectorAll(".sitemenu__list.level-2"),
-              len = els.length,
-              i = -1;
-          for ( i = 0; i < len; i++ ) {
-            if ( els[ i ].children.length ) {
-              var caret = doc.createElement( "span" );
-              caret.className = "sitemenu___dropdown-toggle fa fa-caret-down";
-              caret.setAttribute( "data-toggle", "dropdown" );
 
-              els[ i ].parentNode.insertBefore( caret, els[ i ] );
+            announcement: {
-              this.helpers.addClass( els[ i ], "dropdown-menu" );
+                // Announcement text truncation
+                truncateAnnouncement: function(els, maxLen) {
+                    var els = doc.querySelectorAll(els),
+                        newTitle = '';
+                    i = -1,
+                        elsLen = els.length;
+
+                    for (i = 0; i < elsLen; i++) {
+                        if (els[i].firstChild !== null) {
+                            if (els[i].firstChild.length > maxLen) {
+                                newTitle = els[i].firstChild.textContent;
+                                els[i].textContent = newTitle.substring(0, maxLen) + '...';
+                            }
+                        }
+                    }
+                }
+            },
+
+            member: {
+                equalHeight: function() {
+                    var bigbrother = -1;
+                    $('.i-member-item').each(function() {
+                        bigbrother = bigbrother > $('.i-member-item').height() ? bigbrother : $('.i-member-item').height();
+                    });
+
+                    $('.i-member-item').each(function() {
+                        $('.i-member-item').height(bigbrother);
+                    });
+                },
+
+                // Remove table row, list item if it only has sigle title or value not in pair
+                removeEmptyRow: function() {
+                    // Remove index page empty item
+                    $('.i-member-profile-item .i-member-value').each(function() {
+                    	if ($(this).text().trim() === '' || $(this).text().trim() === ':') {
+                    	    $(this).parent().addClass('hide');
+                    	}
+                    });
+
+                    // Remove empty table cell on show page
+                    $('.show-member th, .show-member td').each(function() {
+                        if ($(this).text().trim() === '') {
+                            $(this).parent('tr').addClass('hide');
+                        }
+                    });
+                },
+            },
+
+            // Add link and cursor class name on element that has data-link attribute
+            addLinkOnADBanner: function(els) {
+                $.each(els, function() {
+                    if ($(this).data('link') !== '' && !$(this).hasClass('youtube')) {
+                        $(this).on('click', function() {
+                            var target = $(this).data('target'),
+                                link = $(this).data('link');
+                            if (target === '_blank') {
+                                window.open(link, target);
+                            } else {
+                                window.location.href = link;
+                            }
+                        }).addClass('cursor');
+                    }
+                });
+            },
+
+            // Sitemenu dropdown
+            sitemenuDropdown: function(els) {
+                var els = doc.querySelectorAll('.sitemenu-list.level-2'),
+                    len = els.length,
+                    i = -1;
+                for (i = 0; i < len; i++) {
+                    if (els[i].children.length) {
+                        var caret = doc.createElement('span');
+                        caret.className = 'sitemenu-dropdown-toggle fa fa-caret-down';
+                        caret.setAttribute('data-toggle', 'dropdown');
+
+                        els[i].parentNode.insertBefore(caret, els[i]);
+                        this.helpers.addClass(els[i], 'dropdown-menu');
+                    }
+                }
             }
-          }
+
+        };
+        // Specific functions that will be running on homepage
+        if (pageModule === 'home') {
+
+
+        }
+        if (pageModule === 'member') {
+            orbit.member.removeEmptyRow();
         }
-    };
-
-    // Specific functions that will be running on homepage
-    if ( pageModule === "home" ) {
 
+        // Functions that will be running on every page
+        orbit.sitemenuDropdown();
+        orbit.plugins.bullEye();
     }
 
-    // Functions that will be running on every page
+    // Run the init function when DOM is ready
-    orbit.sitemenuDropdown();
+    $(document).ready(function() {
-    orbit.plugins.bullEye();
+        init();
-  }
+    });
 
-  $( document ).ready(function() {
+}(jQuery));
-    init();
-  });
-
-}( jQuery ));

app/templates/orbit_bootstrap/assets/stylesheets/template/base/_global.scss

@@ -34,4 +34,21 @@ td {
 .borderless>thead>tr>td, 
 .borderless>thead>tr>th {
   border: none !important;
+}
+
+.page-module-title {
+  @extend .unity-title;
+  margin-bottom: 18px;
+}
+
+.view-count {
+  font-size: 0.75rem;
+}
+.view_count {
+  > i {
+    font-size: 0.75rem;
+    &:before {
+      margin-right: 8px;
+    }
+  }
 }

app/templates/orbit_bootstrap/assets/stylesheets/template/base/_unity.scss

@@ -5,6 +5,7 @@
   margin: 0.5em 0;
   line-height: 1.5;
   font-family: $main-font;
+  font-size: 1.5rem;
   .layout-footer & {
     margin-bottom: 10px;
     border-bottom: none;

app/templates/orbit_bootstrap/assets/stylesheets/template/base/_variables.scss

@@ -2,6 +2,7 @@
 
 // Base Color
 $theme-gray: #495054;
+$theme-gray-subtle: #ddd;
 $theme-gray-light: #cecece;
 $theme-gray-lighter: #f3f3f3;
 $theme-gray-dark: #363636;

app/templates/orbit_bootstrap/assets/stylesheets/template/modules/calendar.scss

@@ -0,0 +1,52 @@
+@charset "utf-8";
+
+.w-calendar {
+    width: 100%;
+    position: relative;
+
+    .widget-title {
+        text-align: center;
+        border: 1px solid $theme-gray-subtle;
+        margin: 0;
+        padding: 8px 0;
+    }
+
+    th {
+        background: $theme-color-main;
+        color: $theme-white;
+        text-align: center;
+        font-size: 0.8125rem;
+    }
+
+    td {
+        border: 1px solid $theme-gray-subtle;
+        text-align: center;
+        font-size: 0.8125rem;
+    }
+}
+.w-calendar-table {
+    margin-bottom: 0;
+    .w-calendar-today {
+        background: $theme-color-main;
+        color: $theme-white;
+    }
+    .w-calendar-event {
+        background: $theme-color-third;
+        color: $theme-white;
+        cursor: pointer;
+    }
+
+}
+
+.w-calendar-nav {
+    a {
+        position: absolute;
+        top: 8px;
+        left: 10px;
+        color: $theme-color-main;
+    }
+    .w-calendar-nav-next {
+        left: auto;
+        right: 10px;
+    }
+}

app/templates/orbit_bootstrap/assets/stylesheets/template/modules/gallery.scss

@@ -1,124 +1,144 @@
-@charset "utf-8";
+@charset 'utf-8';
-@import "../initial";
+
+@import '../initial';
 
 // Gallery MODULES
 .widget-gallery {
-  .widget-title {
+    .widget-title {
-    @extend .unity-title;
+        @extend .unity-title;
-  }
-  .widget-content {
-    position: relative;
-  }
-  &.widget1 {
-    .widget-content {
-      overflow: hidden;
-      .widget-pic {
-        display: inline-block;
-        padding: 1px;
-        text-align: center;
-        @include size(33.3333%, auto);
-        img {
-          @include size(100%, 100%);
-        }
-      }
     }
-  }
+
-  &.widget2 {
     .widget-content {
-      margin-left: -5px;
+        position: relative;
-      margin-right: -5px;
+    }
-      .widget-pic {
+
-        margin-bottom: 10px;
+    &.widget1 {
-        padding-left: 5px;
+        .widget-content {
-        padding-right: 5px;
+            overflow: hidden;
-        img {
+
-          @include size(100%, auto);
+            .widget-pic {
-        }
+                display: inline-block;
-      }
+                padding: 1px;
+                text-align: center;
+                @include size(33.3333%, auto);
+
+                img {
+                    @include size(100%, 100%);
+                }
+            }
+        }
+    }
+
+    &.widget2 {
+        .widget-content {
+            margin-left: -5px;
+            margin-right: -5px;
+
+            .widget-pic {
+                margin-bottom: 10px;
+                padding-left: 5px;
+                padding-right: 5px;
+
+                img {
+                    @include size(100%, auto);
+                }
+            }
+        }
     }
-  }
 }
 
 .index-gallery {
-  .index-title {
+    .index-title {
-    @extend .unity-title;
+        @extend .unity-title;
-  }
+    }
-  &.index1 {
+
-    .index-content {
+    &.index1 {
-      .index-content-inner {
+        .index-content {
-        position: relative;
+            .index-content-inner {
-      }
+                position: relative;
-      .index-part {
+            }
-        position: absolute;
+
-        top: 4px;
+            .index-part {
-        right: 4px;
+                position: absolute;
-        bottom: 4px;
+                top: 4px;
-        left: 4px;
+                right: 4px;
-        overflow: hidden;
+                bottom: 4px;
-        background-color: rgba($theme-color-main, 0.8);
+                left: 4px;
-        @include transition(all 0.5s ease);
+                overflow: hidden;
-        @include opacity(0);
+                background-color: rgba($theme-color-main, 0.8);
-        .index-content-title {
+                @include transition(all 0.5s ease);
-          @include transition(all 0.3s ease);
+                @include opacity(0);
-          @include transition-delay(0.1s);
+
-          @include scale(0);
+                .index-content-title {
-        }
+                    @include transition(all 0.3s ease);
-        &:hover {
+                    @include transition-delay(0.1s);
-          @include opacity(1);
+                    @include scale(0);
-          .index-content-title {
+                }
-            @include scale(1);
+
-          }
+                &:hover {
-        }
+                    @include opacity(1);
-      }
+
-      .index-content-title {
+                    .index-content-title {
-        display: table;
+                        @include scale(1);
-        margin: 0;
+                    }
-        @include size(100%, 100%);
+                }
-        a {
+            }
-          display: table-cell;
+
-          color: #FFF;
+            .index-content-title {
-          text-decoration: none;
+                display: table;
-          text-align: center;
+                margin: 0;
-          vertical-align: middle;
+                @include size(100%, 100%);
-        }
+
-      }
+                a {
+                    display: table-cell;
+                    color: #FFF;
+                    text-decoration: none;
+                    text-align: center;
+                    vertical-align: middle;
+                }
+            }
+        }
     }
-  }
 }
 
 .show-gallery {
-  .show-title {
+    .show-title {
-    @extend .unity-title;
+        @extend .unity-title;
-  }
-  .show-content {
-    padding-right: 0;
-    padding-left: 0;
-    .img {
-      display: inline-block;
-      width: 100%;
-      height: auto;
-      opacity: (0.8);
-      -webkit-filter: grayscale(100%) brightness(1.2);
-      -moz-filter: grayscale(100%) brightness(1.2);
-      filter: grayscale(100%) brightness(1.2);
-      @include transition(all 0.2s ease);
     }
-    .show-content-inner {
+
-      position: relative;
+    .show-content {
-      padding: 2px;
+        padding-right: 0;
-      z-index: 0;
+        padding-left: 0;
-      @include scale(1);
+
-      @include transition(all 0.2s ease);
-      &:hover {
-        z-index: 1;
-        @include scale(1.1);
         .img {
-          opacity: (1);
+            display: inline-block;
-          -webkit-filter: grayscale(0%) brightness(1);
+            width: 100%;
-          -moz-filter: grayscale(0%) brightness(1);
+            height: auto;
-          filter: grayscale(0%) brightness(1);
+            opacity: 0.8;
+            -webkit-filter: grayscale(100%) brightness(1.2);
+            -moz-filter: grayscale(100%) brightness(1.2);
+            filter: grayscale(100%) brightness(1.2);
+            @include transition(all 0.2s ease);
+        }
+
+        .show-content-inner {
+            position: relative;
+            padding: 2px;
+            z-index: 0;
+            @include scale(1);
+            @include transition(all 0.2s ease);
+
+            &:hover {
+                z-index: 1;
+                @include scale(1.1);
+
+                .img {
+                    opacity: 1;
+                    -webkit-filter: grayscale(0%) brightness(1);
+                    -moz-filter: grayscale(0%) brightness(1);
+                    filter: grayscale(0%) brightness(1);
+                }
+            }
         }
-      }
     }
-  }
 }

app/templates/orbit_bootstrap/assets/stylesheets/template/modules/member.scss

@@ -7,6 +7,20 @@
 //
 // Member Index
 // ## Gerneral styles for Index
+
+// Index 1
+.index-member-1 {
+    .i-member-tr-head {
+        &:nth-child(1n+2) {
+            display: none;
+        }
+        th {
+            background: $theme-color-main;
+            color: #fff;
+        }
+    }
+}
+
 // Index 2
 .index-member-2 {
     .i-member-section {
@@ -118,7 +132,7 @@
         font-size: .8125rem;
     }
     .member-plugins {
-        margin-bottom: 20px;
+        margin: 20px 0;
         a {
             font-size: .8125rem;
         }

app/templates/orbit_bootstrap/assets/stylesheets/template/template.scss

@@ -12,15 +12,7 @@
 @import "layout/footer";
 
 // Modules
-@import "modules/menu";
+@import "modules/*";
-@import "modules/ad_banner";
-@import "modules/announcement";
-@import "modules/faq";
-@import "modules/web_resource";
-@import "modules/gallery";
-@import "modules/archives";
-@import "modules/member";
-@import "modules/personal_plugin";
 
 // Widget
 @import "widget/breadcrumb";

app/templates/orbit_bootstrap/assets/stylesheets/template/widget/sitemenu.scss

@@ -4,15 +4,15 @@
 .sitemenu-wrap {
     padding: 10px 0;
     @include clearfix;
-    .sitemenu__title {
+    .sitemenu-title {
         display: none;
     }
-    .sitemenu__list {
+    .sitemenu-list {
         margin: 0;
         padding: 0;
         list-style: none;
     }
-    .sitemenu__item.level-1 {
+    .sitemenu-item.level-1 {
         font-size: 0.8125rem;
         position: relative;
         float: left;
@@ -27,24 +27,24 @@
             background: darken($theme-color-second, 10%);
         }
     }
-    .sitemenu__link.level-1 {
+    .sitemenu-link.level-1 {
         margin-right: .25rem;
         color: #fff;
     }
-    .sitemenu___dropdown-toggle {
+    .sitemenu-dropdown-toggle {
         font-size: 0.75rem;
         padding: 2px .3125rem;
         cursor: pointer;
     }
     // sitemenu dropdown
-    .sitemenu__list.dropdown-menu {
+    .sitemenu-list.dropdown-menu {
         min-width: 100%;
         margin-top: 4px;
         border: none;
         border-radius: .2em;
         background: $theme-color-main;
     }
-    .sitemenu__link.level-2 {
+    .sitemenu-link.level-2 {
         color: #fff;
         font-size: 0.8125rem;
         padding: 4px 0.625rem;

app/templates/orbit_bootstrap/home/header.html.erb

@@ -12,6 +12,7 @@
 <header class="navbar layout-header" role="navigation">
   <div class="container">
     <div class="header-nav" >
+    <a id="accesskey_top" accesskey="Q" href="/<%= "#{locale.to_s}" %>/accesskey" title="Toolbar">:::</a>
       {{header-data}}
     </div>
     <div class="navbar-header">
@@ -21,9 +22,10 @@
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
-      <a class="navbar-brand" href="/"><img class="site-logo" src="{{logo_url}}"> {{site_name}}</a>
+      <a class="navbar-brand" href="/"><img class="site-logo" src="{{logo_url}}" alt="Site Logo"> {{site_name}}</a>
     </div>
     <div class="collapse navbar-collapse modules-menu" id="layout-navigation">
+    <a id="accesskey_menu" accesskey="M" href="/<%= "#{locale.to_s}" %>/accesskey" title="Main menu">:::</a>
       <%= render_menu %>
     </div>
   </div>

app/templates/orbit_bootstrap/home/index.html.erb

@@ -8,6 +8,7 @@
   <%= render_header %>
   <section class="layout-slide" data-pp="300"></section>
   <div class="layout-content">
+  <a id="accesskey_content" accesskey="C" href="/<%= "#{locale.to_s}" %>/accesskey" title="Content">:::</a>
     <div class="layout-content-inner container">
       <section class="layout-content-box" data-pp="1"></section>
       <div class="row">

app/templates/orbit_bootstrap/modules/active/index.html.erb

@@ -1,27 +1,24 @@
 <table class="table table-hover table-striped active-index">
-  <caption>
+	<caption>
-    <h3>{{page-title}}</h3>
+		<h3>{{page-title}}</h3>
-  </caption>
+	</caption>
-  <thead>
+	<thead>
-    <tr>
+		<tr>
-      <th class="col-md-2">{{th_category}}</th>
+			<th class="col-md-2">{{th_category}}</th>
-      <th class="col-md-2">{{th_act_time_range}}</th>
+			<th class="col-md-2">{{th_act_time_range}}</th>
-      <th class="col-md-5">{{th_title}}</th>
+			<th class="col-md-5">{{th_title}}</th>
-      <th class="col-md-2">{{th_sign_up_time_range}}</th>
+			<th class="col-md-2">{{th_sign_up_time_range}}</th>
-      <th class="col-md-2">{{th_sign_up}}</th>
+			<th class="col-md-2">{{th_sign_up}}</th>
-    </tr>
+		</tr>
-  </thead>
+	</thead>
-  <tbody data-level="0" data-list="acts">
+		<tbody data-level="0" data-list="acts">
-    <tr>
+			<tr>
-      <td>{{category}}</td>
+				<td>{{category}}</td>
-      <td>{{act_start_date}} ~
+				<td>{{act_start_date}} ~ <br /> {{act_end_date}}</td>
-        <br /> {{act_end_date}}</td>
+				<td>{{title}}</td>
-      <td>{{title}}</td>
+				<td>{{sign_start_date}} ~ <br /> {{sign_end_date}}</td>
-      <td>{{sign_start_date}} ~
+				<td>{{sign_up}}</i></td>
-        <br /> {{sign_end_date}}</td>
+			</tr>
-      <td>{{sign_up}}</i>
+		</tbody>
-      </td>
-    </tr>
-  </tbody>
 </table>
-{{pagination_goes_here}}
+{{pagination_goes_here}}

app/templates/orbit_bootstrap/modules/ad_banner/_ad_banner_widget1.html.erb

@@ -14,8 +14,9 @@
         data-cycle-title="{{title}}"
         data-cycle-desc="{{context}}"
         data-overlay-template="<h2>{{title}}</h2>{{desc}}"
+        data-target="{{target}}"
       >
-        <img class="w-ad-banner__image banner-responsive" src="{{image_link}}">
+        <img class="w-ad-banner__image banner-responsive" src="{{image_link}}" alt="{{alt_title}}">
     </div>
   </div>
     <div class="w-ad-banner__caption"></div>

app/templates/orbit_bootstrap/modules/ad_banner/_ad_banner_widget3.html.erb

@@ -13,8 +13,9 @@
         data-cycle-title="{{title}}"
         data-cycle-desc="{{context}}"
         data-overlay-template="<h2>{{title}}</h2>{{desc}}"
+        data-target="{{target}}"
       >
-        <img class="w-ad-banner__image banner-responsive" src="{{image_link}}">
+        <img class="w-ad-banner__image banner-responsive" src="{{image_link}}" alt="{{alt_title}}>
     </div>
   </div>
     <ul class="w-ad-banner__pager-3 banner-pager"></ul>

app/templates/orbit_bootstrap/modules/ad_banner/_ad_banner_widget4.html.erb

@@ -7,8 +7,9 @@
     >
     <div class="w-ad-banner__slide {{class}}"
         data-link="{{link}}"
+        data-target="{{target}}"
     >
-        <img class="w-ad-banner__image banner-responsive" src="{{image_link}}">
+        <img class="w-ad-banner__image banner-responsive" src="{{image_link}}" alt="{{alt_title}}>
     </div>
   </div>
 </div>

app/templates/orbit_bootstrap/modules/ad_banner/info.json

@@ -6,7 +6,7 @@
                 "zh_tw" : "1. 橫幅輪播 ( 圖片, 圖片說明文字, 導航圖示 )",
                 "en" : "1. Carousel ( image, description, navigation )"
                 },
-            "thumbnail" : "thumbnail-block.png"
+            "thumbnail" : "thumb.png"
         },
         {
             "filename" : "ad_banner_widget2_video",
@@ -14,7 +14,7 @@
                 "zh_tw" : "2. 橫幅輪播 + Youtube影片 ( 圖片, Youtube影片, 導航圖示 )",
                 "en" : "2. Carousel ( image, Youtube video, navigation )"
             },
-            "thumbnail" : "thumbnail-block.png"
+            "thumbnail" : "thumb.png"
         },
         {
             "filename" : "ad_banner_widget3",
@@ -22,7 +22,7 @@
                 "zh_tw" : "3. 橫幅輪播 ( 圖片, 導航圖示 )",
                 "en" : "3. Carousel ( image, navigation )"
             },
-            "thumbnail" : "thumbnail-block.png"
+            "thumbnail" : "thumb.png"
         },
         {
             "filename" : "ad_banner_widget4",
@@ -30,7 +30,7 @@
                 "zh_tw" : "4. 廣告輪播 ( 圖片 )",
                 "en" : "4. AD banner ( image )"
             },
-            "thumbnail" : "thumbnail-block.png"
+            "thumbnail" : "thumb.png"
         }
 
     ]

app/templates/orbit_bootstrap/modules/announcement/_annc_widget10.html.erb

@@ -1,16 +1,16 @@
-<div class="w-annc widget-announcement-10">
+<div class="w-annc  widget-announcement-10">
   <h3 class="w-annc__widget-title">
     <span>{{widget-title}}</span>
   </h3>
   <ul class="w-annc__list" data-level="0" data-list="announcements">
     <li class="w-annc__item  row">
-        <h4 class="w-annc__entry-title col-sm-9">
+        <h4 class="w-annc__entry-title  col-sm-9">
           <span class="w-annc__status-wrap" data-list="statuses" data-level="1">
             <span class="w-annc__status label {{status-class}}">{{status}}</span>
           </span>
           <a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
         </h4>
-        <span class="w-annc__postdate-wrap col-sm-3" date-format="%Y-%m-%d">
+        <span class="w-annc__postdate-wrap  col-sm-3" date-format="%Y-%m-%d">
           <i class="fa fa-calendar-o"></i>
           <span class="w-annc__postdate">{{postdate}}</span>
         </span>

app/templates/orbit_bootstrap/modules/announcement/_annc_widget5.html.erb

@@ -1,8 +1,8 @@
-<div class="w-annc widget-announcement-5">
+<div class="w-annc  widget-announcement-5">
   <h3 class="w-annc__widget-title">
     <span>{{widget-title}}</span>
   </h3>
-  <ul class="w-annc__list row" data-level="0" data-list="announcements">
+  <ul class="w-annc__list  row" data-level="0" data-list="announcements">
     <li class="w-annc__item">
     <div class="w-annc__content-wrap">  
       <div class="w-annc__meta">

app/templates/orbit_bootstrap/modules/announcement/_annc_widget6.html.erb

@@ -1,20 +1,20 @@
-<div class="w-annc widget-announcement-6">
+<div class="w-annc  widget-announcement-6">
   <h3 class="w-annc__widget-title">
     <span>{{widget-title}}</span>
   </h3>
   <ul class="w-annc__list" data-level="0" data-list="announcements">
-    <li class="w-annc__item row">
+    <li class="w-annc__item  row">
         <span class="w-annc__category-wrap  col-sm-2">
           <i class="fa fa-tasks"></i>
           <span class="w-annc__category">{{category}}</span>
         </span>
-        <h4 class="w-annc__entry-title col-sm-8">
+        <h4 class="w-annc__entry-title  col-sm-8">
           <span class="w-annc__status-wrap" data-list="statuses" data-level="1">
             <span class="w-annc__status label {{status-class}}">{{status}}</span>
           </span>
           <a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
         </h4>
-        <span class="w-annc__postdate-wrap col-sm-2" date-format="%Y-%m-%d">
+        <span class="w-annc__postdate-wrap  col-sm-2" date-format="%Y-%m-%d">
           <i class="fa fa-calendar-o"></i>
           <span class="w-annc__postdate">{{postdate}}</span>
         </span>

app/templates/orbit_bootstrap/modules/announcement/_annc_widget7.html.erb

@@ -1,20 +1,20 @@
-<div class="w-annc widget-announcement-7">
+<div class="w-annc  widget-announcement-7">
   <h3 class="w-annc__widget-title">
     <span>{{widget-title}}</span>
   </h3>
   <ul class="w-annc__list" data-level="0" data-list="announcements">
-    <li class="w-annc__item row">
+    <li class="w-annc__item  row">
-        <span class="w-annc__postdate-wrap col-sm-2" date-format="%Y-%m-%d">
+        <span class="w-annc__postdate-wrap  col-sm-2" date-format="%Y-%m-%d">
           <i class="fa fa-calendar-o"></i>
           <span class="w-annc__postdate">{{postdate}}</span>
         </span>
-        <h4 class="w-annc__entry-title col-sm-8">
+        <h4 class="w-annc__entry-title  col-sm-8">
           <span class="w-annc__status-wrap" data-list="statuses" data-level="1">
             <span class="w-annc__status label {{status-class}}">{{status}}</span>
           </span>
           <a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
         </h4>         
-        <span class="w-annc__category-wrap col-sm-2">
+        <span class="w-annc__category-wrap  col-sm-2">
           <i class="fa fa-tasks"></i>
           <span class="w-annc__category">{{category}}</span>
         </span>

app/templates/orbit_bootstrap/modules/announcement/_annc_widget8.html.erb

@@ -1,13 +1,13 @@
-<div class="w-annc widget-announcement-8">
+<div class="w-annc  widget-announcement-8">
   <h3 class="w-annc__widget-title">
     <span>{{widget-title}}</span>
   </h3>
-  <table class="w-annc__table table">
+  <table class="w-annc__table  table">
     <thead>
       <tr>
-        <th class="w-annc__th w-annc__th--category">{{category-head}}</th>
+        <th class="w-annc__th  w-annc__th--category">{{category-head}}</th>
-        <th class="w-annc__th w-annc__th--title">{{title-head}}</th>
+        <th class="w-annc__th  w-annc__th--title">{{title-head}}</th>
-        <th class="w-annc__th w-annc__th--date">{{date-head}}</th>
+        <th class="w-annc__th  w-annc__th--date">{{date-head}}</th>
       </tr>
     </thead>
     <tbody data-level="0" data-list="announcements">
@@ -15,7 +15,7 @@
           <td class="w-annc__category">{{category}}</td>
           <td>
             <span class="w-annc__status-wrap" data-list="statuses" data-level="1">
-              <span class="w-annc__status label status {{status-class}}">{{status}}</span>
+              <span class="w-annc__status  label  status {{status-class}}">{{status}}</span>
             </span>
             <a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
           </td>

app/templates/orbit_bootstrap/modules/announcement/_annc_widget9.html.erb

@@ -1,13 +1,13 @@
-<div class="w-annc widget-announcement-9">
+<div class="w-annc  widget-announcement-9">
   <h3 class="w-annc__widget-title">
     <span>{{widget-title}}</span>
   </h3>
-  <table class="w-annc__table table">
+  <table class="w-annc__table  table">
     <thead>
       <tr>
-        <th class="w-annc__th w-annc__th--date">{{date-head}}</th>
+        <th class="w-annc__th  w-annc__th--date">{{date-head}}</th>
-        <th class="w-annc__th w-annc__th--title">{{title-head}}</th>
+        <th class="w-annc__th  w-annc__th--title">{{title-head}}</th>
-        <th class="w-annc__th w-annc__th--category">{{category-head}}</th>
+        <th class="w-annc__th  w-annc__th--category">{{category-head}}</th>
       </tr>
     </thead>
     <tbody data-level="0" data-list="announcements">
@@ -15,7 +15,7 @@
           <td class="w-annc__postdate" date-format="%Y-%m-%d">{{postdate}}</td>
           <td>
             <span class="w-annc__status-wrap" data-list="statuses" data-level="1">
-              <span class="w-annc__status label status {{status-class}}">{{status}}</span>
+              <span class="w-annc__status  label  status {{status-class}}">{{status}}</span>
             </span>
             <a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
           </td>

app/templates/orbit_bootstrap/modules/announcement/info.json

@@ -12,7 +12,7 @@
 			"filename" : "annc_index2",
 			"name" : {
 				"zh_tw" : "2. 標準標題列表-1B ( 模組標題, 類別, 狀態, 標題, 日期, 瀏覽人次 )",
-				"en" : "2. Standard Title List-1B (widget-title, category, status, title, postdate, view-counts)"
+				"en" : "2. Standard Title List-1B (widget-title, category, status, title, postdate, view-count)"
 				},
 			"thumbnail" : "annc_index2_thumbs.png"
 		},
@@ -28,7 +28,7 @@
 			"filename" : "annc_index4",
 			"name" : {
 				"zh_tw" : "4. 標準表格列表-2B ( 模組標題, 日期, 狀態, 標題, 類別, 瀏覽人次 )",
-				"en" : "4. Standard Table List-2 (widget-title, postdate, status, title, category, view-counts)"
+				"en" : "4. Standard Table List-2 (widget-title, postdate, status, title, category, view-count)"
 				},
 			"thumbnail" : "annc_index4_thumbs.png"
 		},
@@ -116,15 +116,15 @@
 			"filename" : "annc_index15",
 			"name" : {
 				"zh_tw" : "15. 精簡表格列表-3 ( 模組標題, 日期, 狀態, 標題, 瀏覽人次 )",
-				"en" : "15. Simple Table List (widget-title, postdate, status, title, view-counts)"
+				"en" : "15. Simple Table List (widget-title, postdate, status, title, view-count)"
 				},
 			"thumbnail" : "annc_index15_thumbs.png"
 		},
 		{
 			"filename" : "annc_index16",
 			"name" : {
-				"zh_tw" : "16. 連結 + 附件表格列表 ( 模組標題, 日期, 狀態, 標題 )",
+				"zh_tw" : "16. 連結 + 附件表格列表 ( 模組標題, 類別, 狀態, 標題 )",
-				"en" : "16. Table List including Links and attachments (widget-title, postdate, status, title, view-counts)"
+				"en" : "16. Table List including Links and attachments (widget-title, category, status, title, view-count)"
 				},
 			"thumbnail" : "annc_index16_thumbs.png"
 		}
@@ -238,7 +238,7 @@
 			"filename" : "annc_widget14",
 			"name" : {
 				"zh_tw" : "14. 一圖 + 標題列表 ( 模組標題, 圖片, 狀態, 標題, 日期 )",
-				"en" : "14. 1 Image + Title List (widget-title, status, title, postdate)"
+				"en" : "14. 1 Image + Title List (widget-title, image, status, title, postdate)"
 				},
 			"thumbnail" : "annc_widget14_thumbs.png"
 		}

app/templates/orbit_bootstrap/modules/announcement/show.html.erb

@@ -26,7 +26,7 @@
     <li class="s-annc__related-file">
       <i class="fa fa-fw fa-paperclip"></i>
       <div class="s-annc__related-file-list" data-list="bulletin_files" data-level="0">
-        <a class="s-annc__flie-title  btn  btn-default  btn-sm" href="{{file_url}}" target="_blank">{{file_title}}</a>
+        <a class="s-annc__flie-title  btn  btn-default  btn-sm" href="{{file_url}}">{{file_title}}</a>
       </div>
     </li>
 

app/templates/orbit_bootstrap/modules/archive/_archive_widget1.html.erb

@@ -1,10 +1,10 @@
-<div class="w-archive widget-archive-1" module="archive" data-ps="">
+<div class="w-archive  widget-archive-1" module="archive" data-ps="">
   <h3 class="w-archive__widget-title">{{widget-title}}</h3>
-  <ul class="w-archive__list level-1"  data-list="categories" data-level="0">
+  <ul class="w-archive__list  level-1"  data-list="categories" data-level="0">
-    <li class="w-archive__item level-1">
+    <li class="w-archive__item  level-1">
       <h4 class="w-archive__item-heading">{{category-title}}</h4>
-      <ul class="w-archive__list level-2" data-list="archives" data-level="1">
+      <ul class="w-archive__list  level-2" data-list="archives" data-level="1">
-        <li class="w-archive__item level-2">
+        <li class="w-archive__item  level-2">
           <a class="w-archive__link" href="{{archive_url}}">{{archive-title}}</a>
         </li>
       </ul>

app/templates/orbit_bootstrap/modules/archive/archive_index1.html.erb

@@ -1,4 +1,4 @@
-<div class="i-archive index-archive-1">
+<div class="i-archive  index-archive-1">
   <h3 class="i-archive__page-title">{{page-title}}</h3>
   <ul class="i-archive__list" data-list="categories" data-level="0">
     <li class="i-archive__item">
@@ -8,13 +8,13 @@
           <dt class="i-archive__category-item">
             <sapn class="i-archive__archive-title">{{archive-title}}</span>
             <span class="i-archive__status-wrap" data-list="statuses" data-level="2">
-              <span class="i-archive__status label status {{status-class}}">{{status}}</span>
+              <span class="i-archive__status  label  status  {{status-class}}">{{status}}</span>
             </span>
           </dt>
           <dl class="i-archive__file-list" data-list="files"  data-level="2">
             <dd class="i-archive__file-wrap">
               <a class="i-archive__file-name" href="{{file-url}}" target="_blank">{{file-name}}</a>
-              <span class="i-archive__file-type label label-primary">{{file-type}}</span>
+              <span class="i-archive__file-type  label label-primary">{{file-type}}</span>
             </dd>
           </dl>
         </div>

app/templates/orbit_bootstrap/modules/archive/archive_index2.html.erb

@@ -12,7 +12,7 @@
           </a>
         </h4>
       </div>
-      <div id="collapse" class="panel-collapse collapse in">
+      <div id="collapse" class="panel-collapse collapse">
         <div class="panel-body">
           <dl class="dl-horizontal index-archive-item-group" data-list="archives" data-level="1">
             <dt class="index-archive-item-list">
@@ -21,7 +21,7 @@
                 <span class="label status {{status-class}}">{{status}}</span>
               </span>
             </dt>
-            <dl class="index-archives-files-list" data-list="files" data-level="2">
+            <dl class="index-archives-files-list" data-list="files"  data-level="2">
               <dd>
                 <a href="{{file-url}}" class="index-archives-files-item" target="_blank">{{file-name}}</a>
                 <span class="label label-primary">{{file-type}}</span>

app/templates/orbit_bootstrap/modules/archive/info.json

@@ -3,36 +3,36 @@
         {
             "filename" : "archive_index1",
             "name" : {
-                "zh_tw" : "1. 列表",
+                "zh_tw" : "1. 列表 ( 模組標題, 類別標題, 檔案名稱, 下載連結 )",
-                "en" : "1. List"
+                "en" : "1. List (widget-title, category, filename, download link)"
                 },
-            "thumbnail" : "thumbnail-block-list.png"
+            "thumbnail" : "thumb.png"
         },
         {
             "filename" : "archive_index2",
             "name" : {
-                "zh_tw" : "2. 互動式列表",
+                "zh_tw" : "2. 手風琴式列表 ( 模組標題, 類別標題, 檔案名稱, 下載連結 )",
-                "en" : "2. Accordion list"
+                "en" : "2. Accordion list (widget-title, category, filename, download link)"
                 },
-            "thumbnail" : "thumbnail-block.png"
+            "thumbnail" : "thumb.png"
         }
     ],
     "widgets" : [
         {
             "filename" : "archive_widget1",
             "name" : {
-                "zh_tw" : "1. 列表",
+                "zh_tw" : "1. 列表 ( 模組標題, 類別標題, 下載頁面連結 )",
-                "en" : "1. List"
+                "en" : "1. List (widget-title, category, link of download page)"
                 },
-            "thumbnail" : "thumbnail-block.png"
+            "thumbnail" : "thumb.png"
         },
         {
             "filename" : "archive_widget2",
             "name" : {
-                "zh_tw" : "2. 互動式列表",
+                "zh_tw" : "2. 手風琴式列表 ( 模組標題, 類別標題, 下載頁面連結 )",
-                "en" : "2. Accordion list"
+                "en" : "2. Accordion list (widget-title, category, link of download page)"
             },
-            "thumbnail" : "thumbnail-block.png"
+            "thumbnail" : "thumb.png"
         }
     ]
 }

app/templates/orbit_bootstrap/modules/calendar/index.html.erb

@@ -1,40 +0,0 @@
-<div id="orbit_calendar">
-  <div id="sec1">
-    <div class="btn-toolbar" id="navigation">
-      <div id="calendar-nav">
-        <div class="btn-group">
-          <button class="btn btn-default btn-sm" id="prev_month_btn">
-            <i class="icon-chevron-left"></i>
-          </button>
-          <button class="btn btn-default btn-sm" id="next_month_btn">
-            <i class="icon-chevron-right"></i>
-          </button>
-          <button class="btn btn-default btn-sm" id="today_btn">Today</button>
-        </div>
-      </div>
-    </div>
-    <div class="form-inline" id="range_selection"></div>
-  </div>
-  <div id='sec3' class="btn-toolbar">
-    <div class="btn-group calendar_mode">
-      <button class="btn btn-default mode_switch btn-sm" data-mode="agendaDay" >day</button>
-      <button class="btn btn-default mode_switch btn-sm" data-mode="agendaWeek" >week</button>
-      <button class="btn btn-default active mode_switch btn-sm" data-mode="month" >month</button>
-      <button class="btn btn-default mode_switch btn-sm" data-mode="agenda" >agenda</button>
-    </div>
-    <button id="refresh_btn" class="btn btn-default btn-sm">
-      <i class="icons-cycle"></i>
-    </button>
-  </div>
-  <div id="view_holder">
-    <h3 id="current_title" class="current_day_title"></h3>
-    <div id="calendar"></div>
-    <div id="calendar_agenda"></div>
-  </div>
-</div>
-<div id="event_quick_view" class="modal" style="width: 300px; display:none; margin:0 0 0 0;"></div>
-<div id="calendar-loading"></div>
-
-<script type="text/javascript">
-  var calendar = new Calendar("#calendar","{{page_id}}");
-</script>

app/templates/orbit_bootstrap/modules/faq/_faq_widget2.html.erb

@@ -1,16 +0,0 @@
-<div class="widget-faqs widget1">
-  <h3 class="widget-title">
-    <span>{{widget-title}}</span>
-  </h3>
-  <ul class="list-unstyled" data-list="faqs" data-level="0">
-    <li class="widget-content">
-      <a class="widget-content-title" href="{{link_to_show}}" target="_blank">{{title}}</a>
-      <span data-list="statuses" data-level="1">
-        <span class="label status {{status-class}}">{{status}}</span>
-      </span>
-    </li>
-  </ul>
-  <p class="more text-right">
-    <a class="btn btn-sm btn-info" href="{{more_url}}">More</a>
-  </p>
-</div>

app/templates/orbit_bootstrap/modules/faq/faq_index2.html.erb

@@ -1,16 +0,0 @@
-<div class="index-faqs index1">
-  <h3 class="index-title">
-    <span>{{page-title}}</span>
-  </h3>
-  <ul class="list-unstyled" data-list="faqs" data-level="0">
-    <li class="index-content">
-      <h4>
-        <a class="index-content-title" href="{{link_to_show}}">{{question}}</a>
-        <span data-list="statuses" data-level="1">
-          <span class="label status {{status-class}}">{{status}}</span>
-        </span>
-      </h4>
-    </li>
-  </ul>
-</div>
-{{pagination_goes_here}}

app/templates/orbit_bootstrap/modules/faq/info.json

@@ -0,0 +1,22 @@
+{
+    "frontend": [
+        {
+            "filename" : "faq_index1",
+            "name" : {
+                "zh_tw" : "1. 列表 ( 模組標題, 問題 )",
+                "en" : "1. Thumbnail ( widget-title, question )"
+                },
+            "thumbnail" : "thumb.png"
+        }
+    ],
+    "widgets" : [
+        {
+            "filename" : "faq_widget1",
+            "name" : {
+                "zh_tw" : "1. 列表 ( 模組標題, 問題 )",
+                "en" : "1. List (widget-title, question)"
+                },
+            "thumbnail" : "thumb.png"
+        }
+    ]
+}

app/templates/orbit_bootstrap/modules/gallery/_gallery_widget1.html.erb

@@ -13,7 +13,7 @@
   data-cycle-log="false"
   data-cycle-carousel-fluid="true">
     <a class="widget-pic" href="{{link_to_show}}" target="_blank">
-      <img src="{{thumb-src}}" alt="">
+      <img src="{{thumb-src}}" alt="{{alt_title}}">
     </a>
   </div>
 </div>

app/templates/orbit_bootstrap/modules/gallery/_gallery_widget2.html.erb

@@ -2,19 +2,9 @@
   <h3 class="widget-title">
     <span>{{widget-title}}</span>
   </h3>
-  <div class="cycle-slideshow widget-content"
+  <div class="row widget-content" data-level="0" data-list="images">
-  data-level="0"
+    <a class="widget-pic col-xs-4" href="{{link_to_show}}" target="_blank">
-  data-list="images"
+      <img src="{{thumb-src}}" alt="{{alt_title}}">
-  data-cycle-slides="> a"
-  data-cycle-fx="carousel"
-  data-cycle-timeout="3000"
-  data-cycle-carousel-visible="3"
-  data-cycle-log="false"
-  data-cycle-pause-on-hover="true"
-  data-cycle-carousel-fluid="true">
-    <a class="widget-pic" href="{{link_to_show}}" target="_blank">
-      <img src="{{thumb-src}}" alt="">
     </a>
   </div>
-</div>
+</div>
-<%= javascript_include_tag "plugin/jquery.cycle2.carousel.min"%>

app/templates/orbit_bootstrap/modules/gallery/_gallery_widget3.html.erb

@@ -1,10 +0,0 @@
-<div class="widget-gallery widget3">
-  <h3 class="widget-title">
-    <span>{{widget-title}}</span>
-  </h3>
-  <div class="row widget-content" data-level="0" data-list="images">
-    <a class="widget-pic col-xs-4" href="{{link_to_show}}" target="_blank">
-      <img src="{{thumb-src}}" alt="">
-    </a>
-  </div>
-</div>

app/templates/orbit_bootstrap/modules/gallery/gallery_index1.html.erb

@@ -6,7 +6,7 @@
     <div class="index-content col-xs-4 col-sm-3">
       <div class="index-content-inner">
         <div class="index-pic">
-          <img class="img-thumbnail" src="{{thumb-src}}" alt="">
+          <img class="img-thumbnail" src="{{thumb-src}}" alt="{{alt_title}}">
         </div>
         <section class="index-part">
           <h4 class="index-content-title">

app/templates/orbit_bootstrap/modules/gallery/gallery_index2.html.erb

@@ -1,20 +0,0 @@
-<div class="index-gallery index1">
-  <h3 class="index-title">
-    <span>{{widget-title}}</span>
-  </h3>
-  <div class="row" data-level="0" data-list="albums">
-    <div class="index-content col-xs-4 col-sm-3">
-      <div class="index-content-inner">
-        <div class="index-pic">
-          <img class="img-thumbnail" src="{{thumb-src}}" alt="">
-        </div>
-        <section class="index-part">
-          <h4 class="index-content-title">
-            <a href="{{link_to_show}}">{{album-name}}</a>
-          </h4>
-        </section>
-      </div>
-    </div>
-  </div>
-</div>
-{{pagination_goes_here}}

app/templates/orbit_bootstrap/modules/gallery/info.json

@@ -3,16 +3,8 @@
         {
             "filename" : "gallery_index1",
             "name" : {
-                "zh_tw" : "1. 相本排版-1",
+                "zh_tw" : "1. 縮圖 ( 相本圖片, 分頁導覽 )",
-                "en" : "1. Gallery-1"
+                "en" : "1. Thumbnail ( gallery thumbnail, page navigation )"
-                },
-            "thumbnail" : "thumb.png"
-        },
-        {
-            "filename" : "gallery_index2",
-            "name" : {
-                "zh_tw" : "2. 相本排版-2",
-                "en" : "2. Gallery-2"
                 },
             "thumbnail" : "thumb.png"
         }
@@ -21,24 +13,16 @@
         {
             "filename" : "gallery_widget1",
             "name" : {
-                "zh_tw" : "1. 相本排版-1",
+                "zh_tw" : "1. 跑馬燈 ( 模組標題, 圖片 )",
-                "en" : "1. Gallery-1"
+                "en" : "1. Carousel Effect (widget-title, image)"
                 },
             "thumbnail" : "thumb.png"
         },
         {
             "filename" : "gallery_widget2",
             "name" : {
-                "zh_tw" : "2. 相本排版-2",
+                "zh_tw" : "2. 相本排版",
-                "en" : "2. Gallery-2"
+                "en" : "2. Thumbnail"
-            },
-            "thumbnail" : "thumb.png"
-        },
-        {
-            "filename" : "gallery_widget3",
-            "name" : {
-                "zh_tw" : "3. 相本排版-3",
-                "en" : "2. Gallery-3"
             },
             "thumbnail" : "thumb.png"
         }

app/templates/orbit_bootstrap/modules/gallery/show.html.erb

@@ -7,7 +7,7 @@
       <div class="show-content-inner">
         <div class="show-pic">
           <a href="{{link_to_show}}">
-            <img class="img" src="{{thumb-src}}" alt="">
+            <img class="img" src="{{thumb-src}}" alt="{{alt_title}}">
           </a>
         </div>
       </div>

app/templates/orbit_bootstrap/modules/member/info.json

@@ -1,28 +1,28 @@
-{
+{
-    "frontend": [
+    "frontend": [
-        {
+        {
-            "filename" : "member_index1",
+            "filename" : "member_index1",
-            "name" : {
+            "name" : {
-                "zh_tw" : "1. 表格列表",
+                "zh_tw" : "1. 表格列表 ( 類別標題, 個人資料等自訂欄位 )",
-                "en" : "1. Table List"
+                "en" : "1. Table List (category title and customized profile data)"
-                },
+                },
-            "thumbnail" : "thumbnail-block-list.png"
+            "thumbnail" : "member_index1_thumb.png"
-        },
+        },
-        {
+        {
-            "filename" : "member_index2",
+            "filename" : "member_index2",
-            "name" : {
+            "name" : {
-                "zh_tw" : "2. 單欄式 ( 類別標題, 個人照片, 個人資料)",
+                "zh_tw" : "2. 單欄式 ( 類別標題, 個人照片, 個人資料等自訂欄位 )",
-                "en" : "2. Single Column (category title, photo, profile)"
+                "en" : "2. Single Column (category title, photo and customized profile data)"
-                },
+                },
-            "thumbnail" : "member_index2_thumb.png"
+            "thumbnail" : "member_index2_thumb.png"
-        },
+        },
-        {
+        {
-            "filename" : "member_index3",
+            "filename" : "member_index3",
-            "name" : {
+            "name" : {
-                "zh_tw" : "3. 名片式 ( 類別標題, 個人照片, 個人資料 )",
+                "zh_tw" : "3. 名片式 ( 類別標題, 個人照片, 個人資料等自訂欄位 )",
-                "en" : "3. Two Columns (category title, photo, profile)"
+                "en" : "3. Two Columns (category title, photo and customized profile data)"
-                },
+                },
-            "thumbnail" : "member_index3_thumb.png"
+            "thumbnail" : "member_index3_thumb.png"
-        }
+        }
-    ]
+    ]
 }

app/templates/orbit_bootstrap/modules/member/member_index1.html.erb

@@ -4,8 +4,13 @@
     <h3 class="i-member__status-title">{{status-title}}</h3>
     <div class="index-member-list" >
       <table class="i-member__table  table  table-striped">
+        <thead data-level="2" data-list="members">
+          <tr class="i-member-tr-head" data-list="profile_data" data-level="3">
+            <th>{{key}}</th>
+          </tr>
+        </thead>
         <tbody data-level="2" data-list="members">
-          <tr  data-list="profile_data" data-level="3">
+          <tr data-list="profile_data" data-level="3">
               <td class="{{value_class}}">{{value}}</td>
           </tr>
         </tbody>

app/templates/orbit_bootstrap/modules/personal_book/index.html.erb

@@ -3,9 +3,8 @@
   <thead>
     <tr>
       <th class="col-md-1">{{th_year}}</th>
-      <th class="col-md-7">{{th_title}}</th>
+      <th class="col-md-9">{{th_title}}</th>
       <th class="col-md-2">{{th_book_paper_type}}</th>
-      <th class="col-md-2">{{th_author}}</th>
     </tr>
   </thead>
   <tbody data-level="0" data-list="books">
@@ -13,7 +12,6 @@
       <td>{{year}}</td>
       <td><a href="{{link_to_show}}">{{book_title}}</a></td>
       <td>{{book_paper_type}}</td>
-      <td>{{author}}</td>
     </tr>
   </tbody>
 </table>

app/templates/orbit_bootstrap/modules/personal_conference/index.html.erb

@@ -3,15 +3,13 @@
   <thead>
     <tr>
       <th class="col-md-1">{{th_year}}</th>
-      <th class="col-md-9">{{th_title}}</th>
+      <th class="col-md-11">{{th_title}}</th>
-      <th class="col-md-2">{{th_author}}</th>
     </tr>
   </thead>
   <tbody data-level="0" data-list="writing_conferences">
     <tr>
       <td>{{year}}</td>
       <td><a href="{{link_to_show}}">{{paper_title}}</a></td>
-      <td>{{author}}</td>
     </tr>
   </tbody>
 </table>

app/templates/orbit_bootstrap/modules/personal_journal/index.html.erb

@@ -3,15 +3,13 @@
   <thead>
     <tr>
       <th class="col-md-1">{{th_year}}</th>
-      <th class="col-md-9">{{th_title}}</th>
+      <th class="col-md-11">{{th_title}}</th>
-      <th class="col-md-2">{{th_author}}</th>
     </tr>
   </thead>
   <tbody data-level="0" data-list="journal_papers">
     <tr>
       <td>{{year}}</td>
       <td><a href="{{link_to_show}}">{{paper_title}}</a></td>
-      <td>{{author}}</td>
     </tr>
   </tbody>
 </table>

app/templates/orbit_bootstrap/modules/web_resource/_web_res_widget2.html.erb

@@ -1,13 +0,0 @@
-<div class="widget-link widget1">
-  <h3 class="widget-title">
-    <span>{{widget-title}}</span>
-  </h3>
-  <ul class="list-unstyled" data-level="0" data-list="web_link">
-    <li class="widget-content">
-      <a class="widget-content-title" href="{{link_to_show}}" target="_blank">{{title}}</a>
-      <span data-list="statuses" data-level="1">
-        <span class="label status {{status-class}}">{{status}}</span>
-      </span>
-    </li>
-  </ul>
-</div>

app/templates/orbit_bootstrap/modules/web_resource/info.json

@@ -0,0 +1,22 @@
+{
+    "frontend": [
+        {
+            "filename" : "web_res_index1",
+            "name" : {
+                "zh_tw" : "1. 列表 ( 模組標題, 連結, 連結說明 )",
+                "en" : "1. List (widget-title, link, link description)"
+                },
+            "thumbnail" : "thumb.png"
+        }
+    ],
+    "widgets" : [
+        {
+            "filename" : "web_res_widget1",
+            "name" : {
+                "zh_tw" : "1. 列表 ( 模組標題, 連結 )",
+                "en" : "1. List (widget-title, link)"
+                },
+            "thumbnail" : "thumb.png"
+        }
+    ]
+}

app/templates/orbit_bootstrap/modules/web_resource/web_res_index2.html.erb

@@ -1,17 +0,0 @@
-<div class="index-link index1">
-  <h3 class="index-title">
-    <span>{{page-title}}</span>
-  </h3>
-  <ul class="list-unstyled" data-list="web_link" data-level="0">
-    <li class="index-content">
-      <h4>
-        <a class="index-content-title" href="{{link_to_show}}" target="_blank">{{title}}</a>
-        <span data-list="statuses" data-level="1">
-          <span class="label status {{status-class}}">{{status}}</span>
-        </span>
-      </h4>
-      <small class="index-context">{{context}}</small>
-    </li>
-  </ul>
-</div>
-{{pagination_goes_here}}

app/templates/orbit_bootstrap/widgets/breadcrumb_widget/info.json

@@ -0,0 +1,12 @@
+{
+    "widgets" : [
+        {
+            "filename" : "breadcrumb_widget1",
+            "name" : {
+                "zh_tw" : "1. 標準 ( 模組標題, 麵包屑連結 )",
+                "en" : "1. Standard (widget-title, breadcrumb link)"
+                },
+            "thumbnail" : "thumb.png"
+        }
+    ]
+}

app/templates/orbit_bootstrap/widgets/site_menu_widget/_site_menu_widget1.html.erb

@@ -0,0 +1,19 @@
+<div class="sitemenu-wrap">
+	<a id="accesskey_sitemenu" accesskey="S" href="/<%= "#{locale.to_s}" %>/accesskey" title="Sitemenu">:::</a>
+	<h3 class="sitemenu-title">{{widget_title}}</h3>
+	<ul data-list="pages" class="sitemenu-list level-1" data-level="0">
+		<li class="sitemenu-item level-1">
+			<a class="sitemenu-link level-1" href="{{url}}" target="{{target}}">{{page_name}}</a>
+			<ul class="sitemenu-list level-2" data-list="children" data-level="1">
+				<li class="sitemenu-item level-2">
+					<a class="sitemenu-link level-2" href="{{url}}" target="{{target}}">{{page_name}}</a>
+					<ul data-list="children" data-level="2">
+						<li>
+							<a href="{{url}}" target="{{target}}">{{page_name}}</a>
+						</li>
+					</ul>
+				</li>
+			</ul>
+		</li>
+	</ul>
+</div>

app/templates/orbit_bootstrap/widgets/site_menu_widget/_widget.html.erb

@@ -1,18 +0,0 @@
-<div class="sitemenu-wrap">
-	<h3 class="sitemenu__title">{{widget_title}}</h3>
-	<ul data-list="pages" class="sitemenu__list level-1" data-level="0">
-		<li class="sitemenu__item level-1">
-			<a class="sitemenu__link level-1" href="{{url}}" target="{{target}}">{{page_name}}</a>
-			<ul class="sitemenu__list level-2" data-list="children" data-level="1">
-				<li class="sitemenu__item level-2">
-					<a class="sitemenu__link level-2" href="{{url}}" target="{{target}}">{{page_name}}</a>
-					<ul data-list="children" data-level="2">
-						<li>
-							<a href="{{url}}" target="{{target}}">{{page_name}}</a>
-						</li>
-					</ul>
-				</li>
-			</ul>
-		</li>
-	</ul>
-</div>

app/templates/orbit_bootstrap/widgets/site_menu_widget/info.json

@@ -0,0 +1,12 @@
+{
+    "widgets" : [
+        {
+            "filename" : "site_menu_widget1",
+            "name" : {
+                "zh_tw" : "1. 下拉式 ( 模組標題, 網站第二層選單, 網站第三層選單 )",
+                "en" : "1. Dropdown (widget-title, second level dropdown, third level dropdown)"
+                },
+            "thumbnail" : "thumb.png"
+        }
+    ]
+}

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

@@ -1,6 +1,3 @@
-<% content_for :page_specific_javascript do -%>
-    <%= javascript_include_tag "group.js" %>
-<% end -%>
 <% 
   current_user_is_group_admin = group.admins.include?(current_user.id.to_s) ? true : false 
   if !current_user_is_group_admin
@@ -9,39 +6,53 @@
     current_user_is_group_member = true
   end
 %>  
-<li>
+<li class="group-card animated bounceInDown" data-group-id="<%= group.id.to_s %>">
-  <div class="member-avatar">
+  <div class="group-card-inner card-ownership <%= current_user_is_group_admin ? "card-owner" : (current_user_is_group_member ? "card-member" : "card-public") %> card">
-     
+     <% if current_user_is_group_admin %>
-    <p class="<%= current_user_is_group_admin ? "gender-man" : (current_user_is_group_member ? "gender-woman" : "gender-none") %>"></p>
+    <div class="group-card-action action">
-    <div class="action">
+      <button class="group-card-dropdown-toggle toggle">
-      <%= link_to(content_tag(:i, nil, :class => 'icon-edit'),"#",:class=>"edit" ) if current_user_is_group_admin %>
+        <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>
-    <%= image_tag(group.image) %>
+    <% end %>
-  </div>
+    <div class="group-avatar"> 
-  <div class="member-info">
+    <a href="<%=  admin_group_path(group) %>">
-    <h4 class="member-name"><%= link_to group.title, admin_group_path(group) %></h4>
+      <%= image_tag(group.image) %>
-    <% 
+    </a>
-      author = ""
+    </div>
-      group.admins.each_with_index do |admin,i|
+    <div class="group-info">
-        user = User.find(admin) rescue nil
+      <h4 class="group-name"><%= link_to group.title, admin_group_path(group) %></h4>
-        if !user.nil?
+      <% 
-          author = author + (user.member_profile.name == nil ? user.user_name : user.member_profile.name rescue "")
+        author = ""
-          author = author + ", " if i != group.admins.count - 1
+        group.admins.each_with_index do |admin,i|
+          user = User.find(admin) rescue nil
+          if !user.nil?
+            author = author + (user.member_profile.name == nil ? user.user_name : user.member_profile.name rescue "")
+            author = author + ", " if i != group.admins.count - 1
+          end
         end
-      end
     %>
-    <div class="member-mail muted">Admin : <%= author %></div>
+    <div class="group-mail">Admin : <%= author %></div>
     <hr>
-    <ul class="member-roles">
+    <ul class="group-roles">
-      <li>
+      <li class="group-privacy">
-        <span class="member-staturs muted">Privacy : </i> 
+        <span class="group-staturs">Privacy : </i> 
-        <span class="label <%= group.privacy == 'closed' ? "label-important" : "label-success" %>"><%= group.privacy %></span>
+        <span class="label <%= group.privacy_name %>"><%= group.privacy_name %></span>
       </li>
-      <li>
+      <li class="group-description">
         <% content = group.description %>
-        <%= content[0..250] %>
+        <%= content[0..150] %>
         <%= "..." if content.length > 250 %>
       </li>
     </ul>
   </div>
-</li>
+</li>

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

@@ -1,5 +1,7 @@
-<% @categories.each do |cat| %>
+<% is_admin = current_user.is_admin? %>
-	<div>
+<% @admin_categories.each do |cat| %>
-		<%= cat.title_translations["en"] %> / <%= cat.title_translations["zh_tw"] %> 
+	<div class="group-category-item button button-primary">
+		<i class="group-category-tag-icon fa fa-tag"></i>
+        <a href="#" class="<%= is_admin ? "open-slide" : "" %>" data-title="Edit" data-form="<%= cat.title_translations.to_json %>" data-id="<%= cat.id.to_s %>" ><%= cat.title_translations["en"] %> / <%= cat.title_translations["zh_tw"] %></a>
 	</div>
 <% end %>

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

@@ -0,0 +1,22 @@
+<% existing_members_limit = 4 %>
+
+  <label class="control-label muted"><%= t(:existing_members) %></label>
+  <div class="controls" id="existing-member-avatar-holder">
+    <% @existing_members.each_with_index do |em,i| %>
+      <% if em["id"] != current_user.id.to_s %>
+        <img data-member-id="<%= em["id"] %>" class="existing-phone-avatar admin-avatar" src="<%= em["avatar"] %>" />
+      <% end %>
+       <% if i == existing_members_limit %>
+        <span class="existing-member-count button button-default gray"><%= (@existing_members.count - existing_members_limit).to_s %> more</span>
+      <% break
+          end %>
+    <% end %>
+    <% if @existing_members.count > 1 %>
+      <a class="group-edit-button button button-default" href="#existing_members_dialog" data-toggle="modal">
+        <!-- <i class="fa fa-pencil"></i> -->
+        Edit
+      </a>
+    <% else %>
+      No members.
+    <% end %>
+  </div>

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

@@ -2,7 +2,7 @@
   <%= stylesheet_link_tag "lib/main-forms" %>
   <%= stylesheet_link_tag "lib/fileupload" %>
   <%= stylesheet_link_tag "lib/main-list" %>
-  <%= stylesheet_link_tag "group_admin" %>
+  <%= stylesheet_link_tag "lib/group/group-admin" %>
   <%= stylesheet_link_tag "select2/select2" %>
 <% end %>
 <% content_for :page_specific_javascript do %>
@@ -28,13 +28,18 @@
       <div class="control-group">
         <label class="control-label muted"><%= t(:category) %></label>
         <div class="controls">
-          <%= f.select :group_category_id, @categories %>
+          <% if params[:action] == "new" %>
+            <%= f.select :group_category_id, @categories %>
+          <% else %>
+            <%= @group.group_category.title %>
+          <% end %>
         </div>
       </div>
       <!-- group banner image  -->
       <div class="control-group">
         <label class="control-label muted"><%= t(:image) %></label>
         <div class="controls">
+          <div class="help-block">建議上傳圖片尺寸為 : 1400px * 280px, 如果沒有上傳圖片，預設背景為黑色</div>
           <div class="fileupload fileupload-new clearfix <%= 'fileupload-edit' if @group.image.file %>" data-provides="fileupload">
             <div class="fileupload-new thumbnail pull-left">
               <% if @group.image.file %>
@@ -63,10 +68,10 @@
         <label class="control-label muted">Privacy</label>
         <div class="controls">
           <label class="radio inline">
-            <input type="radio" name="group[privacy]" value="open" /> Open
+            <input type="radio" name="group[privacy]" value="open" <%= @group.privacy == "open" ? "checked='checked'" : "" %> /> Public
           </label>
           <label class="radio inline">
-           <input type="radio" name="group[privacy]" value="closed" checked="checked" /> Closed
+           <input type="radio" name="group[privacy]" value="closed" <%= @group.privacy == "closed" ? "checked='checked'" : "" %> /> Private
           </label>
         </div>
       </div>
@@ -74,10 +79,10 @@
         <label class="control-label muted">Permission</label>
         <div class="controls">
           <label class="radio inline">
-            <input type="radio" name="group[permission]" value="read" /> Read
+            <input type="radio" name="group[permission]" value="read" <%= @group.permission == "read" ? "checked='checked'" : "" %> /> Read
           </label>
           <label class="radio inline">
-           <input type="radio" name="group[permission]" value="write" checked="checked" /> Write
+           <input type="radio" name="group[permission]" value="write" <%= @group.permission == "write" ? "checked='checked'" : "" %> /> Write
           </label>
       </div>
     </div>
@@ -90,14 +95,18 @@
             name = member["name"][I18n.locale.to_s] == "" ? member["name"]["zh_tw"] : member["name"][I18n.locale.to_s]
             name = "" if name.nil?
             user_name = "(#{member["user_name"]})"
-            text = "#{name} #{user_name}"
+            text = " #{name} #{user_name}"
           %>
             <option value="<%= member["id"] %>" data-member="<%= member.to_json %>"><%= text %></option>
           <% end %>
           </select>
         </div>
       </div>
-
+    <% if params[:action] == "edit" %>
+      <div class="control-group" id="group_existing_member_holder">
+        <%= render :partial => "group_existing_member" %>
+      </div>
+    <% end %>
     </div>
   </div>
    <!-- Language Tabs -->
@@ -145,26 +154,29 @@
   <!-- Form Actions -->
 
 <div class="form-actions">
-    <%= f.submit t('submit'), class: 'btn btn-primary' %>
+  <%= f.submit t('submit'), class: 'btn btn-primary' %>
-    <%= link_to t('cancel'), admin_groups_path, :class=>"btn" %>  
+  <%= link_to t('cancel'), admin_groups_path, :class=>"btn" %>  
-  </div>
+</div>
 <script type="text/javascript">
-var locale = "<%= I18n.locale.to_s %>";
+  var locale = "<%= I18n.locale.to_s %>";
-  $(".member_selection").select2({
+  var bindSelect = function(){
-    formatResult: function (el) {
+    $(".member_selection").select2({
-      var $el = $(el.element),
+      formatResult: function (el) {
-          member = $el.data("member"),
+        var $el = $(el.element),
-          name = (member.name[locale] == "" ? member.name.zh_tw : member.name[locale]),
+            member = $el.data("member"),
-          user_name = "(" + member.user_name + ")",
+            name = (member.name[locale] == "" ? member.name.zh_tw : member.name[locale]),
-          text = name + " " + user_name;
+            user_name = "(" + member.user_name + ")",
-      if (!el.id) { return el.text; }
+            text = name + " " + user_name;
-      var $state = $(
+        if (!el.id) { return el.text; }
-        '<span><img src="' + member.avatar + '" class="img-avatar" /> ' + text + '</span>'
+        var $state = $(
-      );
+          '<span><img src="' + member.avatar + '" class="img-avatar" /> ' + text + '</span>'
-      return $state;
+        );
-    },
+        return $state;
-    placeholder: "Add Members"
+      },
-  });
+      placeholder: "Add Members"
+    });
+  }
+  bindSelect();
 </script>
 
 

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

@@ -0,0 +1,23 @@
+<% is_admin = current_user.is_admin? %>
+<% @requested_categories.each do |rc| %>
+  <div class="group-category-item button button-primary">
+    <i class="group-category-tag-icon fa fa-tag"></i>
+    <a href="#"><%= rc.title_translations["en"] + "/" + rc.title_translations["zh_tw"] %></a>
+    <% if is_admin %>
+      <span class="group-category-controls">
+        <a href="#" class="group-category-approve tool-tip-parent">
+          <i class="fa fa-check"></i>
+          <span class="group-category-approve-tootip tool-tip">
+            Approve
+          </span>
+        </a>
+        <a href="#" class="group-category-reject tool-tip-parent">
+          <i class="fa fa-times"></i>
+          <span class="group-category-approve-tootip tool-tip">
+            Reject
+          </span>
+        </a>
+      </span>
+    <% end %>
+  </div>
+<% end %>

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

@@ -1,47 +1,70 @@
- <a href="/admin/posts/<%= post.to_param %>" class="group-page-post-link">
+<div class="group-post-item card clearfix wow bounceInUp" data-post-id="<%= post.id.to_s %>">
-   <div class="group-page-post clearfix">
+  <div class="group-post-actions tool-tip-parent action">
-      <div class="group-page-post-image-wrap">
+        <button class="group-post-dropdown-toggle toggle">
-        <% if !post.group_post_images.blank? %>
+            <span class="caret"></span>
-          <img class="group-page-post-image" src="<%= post.group_post_images.first.image.thumb.url %>" alt="<%= post.title %>">
+        </button>
-        <% else %>
+        <ul class="group-post-dropdown action-dropdown">
-          <img class="group-page-post-image" src="/assets/no-image.jpg" alt="Post image">
+        <% if post.author.to_s != current_user.id.to_s %>
-          <% end %>
+            <li class="group-post-dropdown-item">
-      </div>
+                <a href="#">
-      <div class="group-page-post-content-wrap">
+                  <i class="fa fa-flag-o"></i>
-        <h3 class="group-page-post-title">
+                  Flag inappropriate
-        <%= post.title %>
+                </a>
-        </h3>
+            </li>
-        <div class="group-page-post-content">
+            <% else %>
-          <% content = strip_tags post.content %>
+                <li class="group-post-dropdown-item">
-          <%= content[0..250] %>
+                  <a href="/admin/post/<%=  post.to_param %>/edit">
-          <%= "..." if content.length > 350 %>
+                    <i class="fa fa-pencil-square-o"></i>
-        </div>
+                    Edit this post
-        <div class="group-page-post-meta-wrap">
+                  </a>
-          <span class="group-page-post-author">
+                </li>
-            <% 
-              user = User.find(post.author) rescue nil
-              if !user.nil?
-                author = (user.member_profile.name == nil ? user.user_name : user.member_profile.name rescue "") 
-              %>
-                <i class="group-page-post-author-icon icon-user"></i> <%= author %>
               <% end %>
-          </span>
+              <% if is_user_group_admin? || post.author.to_s == current_user.id.to_s%>
-          <div class="group-page-post-sub-wrap">
+                <li class="group-post-dropdown-item">
-            <span class="group-page-post-postdate">
+                  <a href="/admin/posts/<%=  post.id.to_s %>" class="delete-post-btn">
-              <% date = DateTime.parse(post.created_at.to_s).strftime("%d %B %H:%M") %>
+                    <i class="fa fa-trash-o"></i>
-              <i class="group-page-post-postdate-icon icon-time"></i> <%= date %>
+                    Delete this post
-            </span>
+                  </a>
-            <!-- <span class="group-post-time">10:25</span> -->
+                </li>
-          </div>
+              <% end %>
-          <!-- <div class="group-page-seen-by tool-tip-parent">
+        </ul>
-            <i class="fa fa-eye"></i>
+  </div>
-            <em class="group-page-seen-by-lead">Seen by: </em>
+  <div class="group-post-image-wrap">
-            <div class="gorup-post-seen-by-names tool-tip right">
+    <a href="/admin/posts/<%= post.to_param %>" class="group-post-link">
-              <span class="group-page-seen-by-name">Harry</span>
+    <% if !post.group_post_images.blank? %>
-              <span class="group-page-seen-by-name">Ika</span>
+      <img class="group-post-image" src="<%= post.group_post_images.first.image.thumb.url %>" alt="<%= post.title %>">
-            </div>
+    <% else %>
-          </div> -->
+      <img class="group-post-image" src="/assets/no-image.jpg" alt="Post image">
-        </div>
+      <% end %>
-      </div>
+    </a>
-    </div>
+  </div>
-</a>
+  <div class="group-post-content-wrap">
+	<h3 class="group-post-title">
+		<a href="/admin/posts/<%= post.to_param %>" class="group-post-link">
+			<%= post.title %>
+		</a>
+	</h3>
+	<div class="group-post-content">
+	  <% content = strip_tags post.content %>
+	  <%= content[0..250] %>
+	  <%= "..." if content.length > 350 %>
+	</div>
+	<div class="group-post-meta-wrap">
+	  <span class="group-post-author">
+		<% 
+		  user = User.find(post.author) rescue nil
+		  if !user.nil?
+			author = (user.member_profile.name == nil ? user.user_name : user.member_profile.name rescue "") 
+		  %>
+			<i class="group-post-author-icon icon-user"></i> <%= author %>
+		  <% end %>
+	  </span>
+	  <div class="group-post-sub-wrap">
+		<span class="group-post-postdate">
+		  <% date = DateTime.parse(post.created_at.to_s).strftime("%d %B %H:%M") %>
+		  <i class="group-post-postdate-icon icon-time"></i> <%= date %>
+		</span>
+	  </div>
+	</div>
+  </div>
+</div>

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

@@ -1,6 +1,25 @@
-<li class="group-post-comment">
+<li class="group-show-post-comment card">
-  <div class="group-post-comment-wrap">
+    <div class="group-show-post-actions action tool-tip-parent">
-    <div class="group-post-comment-avatar">
+      <button class="group-show-post-dropdown-toggle toggle">
+        <span class="caret"></span>
+      </button>
+      <ul class="group-show-post-dropdown action-dropdown">
+        <li class="group-show-post-dropdown-item">
+          <a href="#">
+          <i class="fa fa-flag-o"></i>
+          Flag inappropriate</a>
+          </a>
+        </li>
+        <li class="group-show-post-dropdown-item">
+            <a href="#" class="delete-post-btn">
+              <i class="fa fa-trash-o"></i>
+              Delete this post
+            </a>
+        </li>
+      </ul>
+    </div>
+  <div class="group-show-post-comment-wrap">
+    <div class="group-show-post-comment-avatar">
      <% 
         user = post_comment.user rescue nil
         if !user.nil?
@@ -10,13 +29,13 @@
     %>
       <img src="<%= avatar %> " alt="Avatar image">
     </div>
-    <div class="group-post-comment-body">
+    <div class="group-show-post-comment-body">
-      <div class="group-post-comment-author-wrap">
+      <div class="group-show-post-comment-author-wrap">
-        <div class="group-post-comment-author"><%= author %></div>
+        <div class="group-show-post-comment-author"><%= author %></div>
         <% date = DateTime.parse(post_comment.created_at.to_s).strftime("%d %B") %>
-        <div class="group-post-comment-time muted"><%= date %></div>
+        <div class="group-show-post-comment-time muted"><%= date %></div>
       </div>
-      <div class="group-post-comment-content">
+      <div class="group-show-post-comment-content">
         <% content_images = parse_for_images(post_comment.comment) %>
         <%= content_images.first %>
         <%= content_images.last.html_safe %>