diff --git a/app/assets/javascripts/group.js b/app/assets/javascripts/group.js index 8cb3f76..aa2c742 100644 --- a/app/assets/javascripts/group.js +++ b/app/assets/javascripts/group.js @@ -7,47 +7,110 @@ var group = { // Detect and change the top position of the cycle navs cycleFix: function() { - if( doc.querySelectorAll( ".group-post-banner-image").length >= 1 ) { - var imgs = doc.querySelectorAll( ".group-post-banner-image" ), - cycleNav = doc.querySelectorAll( ".cycle-nav" ), - len = cycleNav.length, - i = -1; + if (doc.querySelectorAll(".group-show-post-banner-image").length >= 1) { + var imgs = doc.querySelectorAll(".group-post-banner-image"), + cycleNav = doc.querySelectorAll(".cycle-nav"), + len = cycleNav.length, + i = -1; - // Hide the navs when there's noly one slide - if( imgs.length <= 1 ) { - 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" ); - } + + // Hide the navs when there's noly one slide + if (imgs.length <= 1) { + for (i = 0; i < len; i++) { + cycleNav[i].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() { - if( doc.querySelector( ".group-page") ) { - var page = doc.querySelector( ".group-page" ), - wrap = doc.querySelector( ".group-page-banner-image-wrap" ), - scrollClass = "scroll"; + if (doc.querySelector(".group-post")) { + var post = doc.querySelector(".group-post"), + wrap = doc.querySelector(".group-post-banner-image-wrap"), + scrollClass = "scroll"; - // Use pageYOffset to get the Y positoin and add scroll on it, the animation - // is done by css transition - window.addEventListener( "scroll", function() { - if( window.pageYOffset !== 0 ) { - page.classList.add( scrollClass ); - } else { - page.classList.remove( scrollClass ); - } - }, false); - } + // Use pageYOffset to get the Y positoin and add scroll on it, the animation + // is done by css transition + window.addEventListener("scroll", function() { + if (window.pageYOffset > 0) { + post.classList.add(scrollClass); + } else { + post.classList.remove(scrollClass); + } + }, false); + } + }, + // 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() { + var $post = $('.group-post'), + $toggle = $('.group-post-dropdown-toggle'), + $dropdown = $post.find('.group-post-dropdown'), + klass = 'open'; + $toggle.click(function() { + $toggle.removeClass(klass); + $dropdown.removeClass(klass); + $(this) + .addClass(klass) + .next('.group-post-dropdown') + .toggleClass(klass) + return false; + }); + $post.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 ) { - group.cycleFix(); - group.scrollEffect(); + document.addEventListener("DOMContentLoaded", function(event) { + + if (doc.querySelector('.group-post')) { + group.scrollEffect(); + group.makePostClick(); + group.makeDropdown(); + } + + group.cycleFix(); + group.equalHeight(); + group.plugins(); }); })(); diff --git a/app/assets/stylesheets/group_show.css.scss b/app/assets/stylesheets/group_show.css.scss deleted file mode 100644 index dad398e..0000000 --- a/app/assets/stylesheets/group_show.css.scss +++ /dev/null @@ -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 \ No newline at end of file diff --git a/app/assets/stylesheets/lib/group/_group-category.scss b/app/assets/stylesheets/lib/group/_group-category.scss new file mode 100644 index 0000000..5cebf57 --- /dev/null +++ b/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-right: 0.625rem; + 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%); + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/lib/group/_group-classes.scss b/app/assets/stylesheets/lib/group/_group-classes.scss new file mode 100644 index 0000000..afa7935 --- /dev/null +++ b/app/assets/stylesheets/lib/group/_group-classes.scss @@ -0,0 +1,161 @@ +@charset "utf-8"; + +// Genernal classes and modules +.screen-reader { + position: absolute; + top: -9999px; + left: -9999px; +} + +.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; + } +} + +.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 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; + } +} + +.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); + } +} + +// breadcrumb +.breadcrumb { + padding-left: 0; + margin: 0; + background: none; + > li { + text-shadow: none; + font-size: 13px; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/lib/group/_group-index.scss b/app/assets/stylesheets/lib/group/_group-index.scss new file mode 100644 index 0000000..f01a773 --- /dev/null +++ b/app/assets/stylesheets/lib/group/_group-index.scss @@ -0,0 +1,160 @@ +@charset "utf-8"; + +// Group index and public +.group-index {} + +.group-public { + margin: auto; + max-width: $boundary; +} + +.group-card { + list-style: none; + margin-bottom: 20px; + +} + +.group-card-inner { + padding: 1rem 1.25rem; + position: relative; + min-height: 280px; + hr { + margin: 8px 0 10px 0; + } +} + +.group-avatar { + position: relative; + width: 100%; + height: 200px; + overflow: hidden; + background: $dark-gray; + &: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: 50%; + 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; +} + +@media screen and (min-width: 370px) { + .group-index { + margin-top: 50px; + width: 90%; + } + .group-card { + width: 100%; + } +} + +@media screen and (min-width: 600px) { + .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; + } + } +} + +@media screen and (min-width: 900px) { + .group-card { + width: 33.3%; + &:nth-child(2n+1) { + clear: none; + padding-left: 0.5rem; + } + &:nth-child(3n+1) { + clear: both; + padding-left: 0; + } + } +} +@media screen and (min-width: 1080px) { + .group-card { + width: 25%; + &:nth-child(3n+1) { + clear: none; + padding-left: 0.5rem; + } + &:nth-child(4n+1) { + clear: both; + padding-left: 0; + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/lib/group/_group-post.scss b/app/assets/stylesheets/lib/group/_group-post.scss new file mode 100644 index 0000000..f0ba97a --- /dev/null +++ b/app/assets/stylesheets/lib/group/_group-post.scss @@ -0,0 +1,400 @@ +@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; +} + +.group-post-bar { + padding: 0 2rem 20px 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: 80%; + 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-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 { + border: none; + border-left: 1px solid darken($gray, 6%); + border-bottom: 1px solid darken($gray, 6%); + background: none; + padding: 2px 8px; + transition: $fast all; + + &:hover, &.open { + border-top-right-radius: $general; + background: $blue; + .caret { + border-top-color: $white; + } + } + .caret { + border-top-color: darken($gray, 30%); + vertical-align: middle; + } +} + +.group-post-dropdown { + display: none; + position: absolute; + right: 0; + top: 102%; + list-style: none; + margin: 0; + padding: 0; + background: $white; + border: 1px solid darken($gray, 6%); + border-radius: $general; + box-shadow: 0 1px 3px 0 rgba($black, .2); + + a { + display: block; + padding: 3px 12px; + white-space: nowrap; + &:hover { + color: $white; + background-color: $blue; + } + } + + &.open { + display: block; + } +} + +.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 { + margin-top: 18px; + 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: 18px; + + .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 { + 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; + } + + .group-post-new-post { + 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%; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/lib/group/_group-reset.scss b/app/assets/stylesheets/lib/group/_group-reset.scss new file mode 100644 index 0000000..17e8a23 --- /dev/null +++ b/app/assets/stylesheets/lib/group/_group-reset.scss @@ -0,0 +1,38 @@ +@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 { + width: 100%; + max-width: 100%; + height: auto; +} + +a { + color: $blue; + text-decoration: none; + &:hover { + color: lighten($blue, 5%); + text-decoration: none; + } +} + +a, button { + &:focus { + outline: none; + } +} + diff --git a/app/assets/stylesheets/lib/group/_group-show-post.scss b/app/assets/stylesheets/lib/group/_group-show-post.scss new file mode 100644 index 0000000..a218a56 --- /dev/null +++ b/app/assets/stylesheets/lib/group/_group-show-post.scss @@ -0,0 +1,274 @@ +@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; + &: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: $normal all; + transition: $normal 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-attachments { + a { + margin-bottom: 10px; + } +} + +.group-show-post-attachment-file-format { + margin-right: 8px; +} + +.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; + } +} + +.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-submit { + font-size: 0.75rem; +} + +.group-show-post-comment-list { + margin: 0; + padding: 0; + list-style: none; +} + +.group-show-post-comment-wrap { + overflow: hidden; + margin-bottom: 25px; + padding-bottom: 8px; + border-bottom: 1px solid lighten($light-gray, 12%); +} + +.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; +} + +.group-show-post-comment-time { + float: right; +} + +.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; + } +} + +// 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%; + } +} + +// 960px +@media screen and (min-width: 60rem) { + .group-show-post-comment-body { + width: 90%; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/lib/group/_group-variables.scss b/app/assets/stylesheets/lib/group/_group-variables.scss new file mode 100644 index 0000000..16cb283 --- /dev/null +++ b/app/assets/stylesheets/lib/group/_group-variables.scss @@ -0,0 +1,35 @@ +@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; + +// Commonly use units +$boundary: 1150px; \ No newline at end of file diff --git a/app/assets/stylesheets/group_admin.css.scss b/app/assets/stylesheets/lib/group/group-admin.scss similarity index 76% rename from app/assets/stylesheets/group_admin.css.scss rename to app/assets/stylesheets/lib/group/group-admin.scss index 4beb145..3ed3073 100644 --- a/app/assets/stylesheets/group_admin.css.scss +++ b/app/assets/stylesheets/lib/group/group-admin.scss @@ -1,31 +1,8 @@ @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; +@import "group-variables"; +@import "group-classes"; +@import "group-reset"; // General style body { @@ -33,6 +10,18 @@ body { 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; @@ -44,8 +33,13 @@ body { margin-right: 0.9375rem; min-width: 200px; .select2-choices { - padding: 8px 0.5rem 6px; + padding: 0; border-radius: $general; + .select2-search-field { + input { + padding: 10px 5px; + } + } } .select2-search-choice { padding: 10px 1.75rem 10px 0.7rem; diff --git a/app/assets/stylesheets/lib/group/group-main.scss b/app/assets/stylesheets/lib/group/group-main.scss new file mode 100644 index 0000000..0737846 --- /dev/null +++ b/app/assets/stylesheets/lib/group/group-main.scss @@ -0,0 +1,14 @@ +@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"; + + +.topnav { + display: none; +} diff --git a/app/templates/orbit_bootstrap/assets/javascripts/app.js b/app/templates/orbit_bootstrap/assets/javascripts/app.js index 15ab1ad..a70b133 100644 --- a/app/templates/orbit_bootstrap/assets/javascripts/app.js +++ b/app/templates/orbit_bootstrap/assets/javascripts/app.js @@ -1,146 +1,167 @@ -(function( $ ) { +(function($) { - "use strict"; + 'use strict'; - function init() { - var doc = document, - lang = doc.documentElement.lang, - pageModule = doc.body.getAttribute( "data-module" ); + function init() { + var doc = document, + lang = doc.documentElement.lang, + pageModule = doc.body.getAttribute('data-module'); - var orbit = { + var orbit = { - helpers : { - // Cross-browser class manipulation - addClass: function( el, className ) { - if ( el.classList ) { - el.classList.add( className ); - } else { - el.className += " " + className; - } - }, - hasClass: function( el, cls ) { - 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" ); + helpers: { + // Cross-browser class manipulation + addClass: function(el, className) { + if (el.classList) { + el.classList.add(className); + } else { + el.className += ' ' + className; + } + }, + hasClass: function(el, cls) { + return (' ' + el.className + ' ').indexOf(' ' + cls + ' ') > -1; } - } - } - }, - // 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 ); - } - } - }, + plugins: { + // RWD image resize script + bullEye: function() { + $('.bullseye').bullseye({ + fadeEffect: false + }); + } + }, - announcement: { - // Announcement text truncation - truncateAnnouncement: function( els, maxLen ) { - var els = doc.querySelectorAll( els ), - newTitle = ""; - i = -1, - elsLen = els.length; + 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; - 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 ); - }); - } - }, - - // 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; + if (elsLen > 1) { + for (i = 0; i < elsLen; i++) { + if (els[i].children.length > len) { + this.helpers.addClass(els[i].parentNode, className || 'mega-dropdown'); + } } - }).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 ] ); - this.helpers.addClass( els[ i ], "dropdown-menu" ); + announcement: { + // 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 - orbit.sitemenuDropdown(); - orbit.plugins.bullEye(); - } + // Run the init function when DOM is ready + $(document).ready(function() { + init(); + }); - $( document ).ready(function() { - init(); - }); - -}( jQuery )); +}(jQuery)); diff --git a/app/templates/orbit_bootstrap/assets/stylesheets/template/base/_global.scss b/app/templates/orbit_bootstrap/assets/stylesheets/template/base/_global.scss index 15b6b42..4898dbc 100644 --- a/app/templates/orbit_bootstrap/assets/stylesheets/template/base/_global.scss +++ b/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; + } + } } \ No newline at end of file diff --git a/app/templates/orbit_bootstrap/assets/stylesheets/template/base/_unity.scss b/app/templates/orbit_bootstrap/assets/stylesheets/template/base/_unity.scss index 5bee26f..7bd36cb 100644 --- a/app/templates/orbit_bootstrap/assets/stylesheets/template/base/_unity.scss +++ b/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; diff --git a/app/templates/orbit_bootstrap/assets/stylesheets/template/modules/gallery.scss b/app/templates/orbit_bootstrap/assets/stylesheets/template/modules/gallery.scss index 0719259..9786060 100644 --- a/app/templates/orbit_bootstrap/assets/stylesheets/template/modules/gallery.scss +++ b/app/templates/orbit_bootstrap/assets/stylesheets/template/modules/gallery.scss @@ -1,124 +1,144 @@ -@charset "utf-8"; -@import "../initial"; +@charset 'utf-8'; + +@import '../initial'; // Gallery MODULES .widget-gallery { - .widget-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%); - } - } + .widget-title { + @extend .unity-title; } - } - &.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); - } - } + 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; + margin-right: -5px; + + .widget-pic { + margin-bottom: 10px; + padding-left: 5px; + padding-right: 5px; + + img { + @include size(100%, auto); + } + } + } } - } } .index-gallery { - .index-title { - @extend .unity-title; - } - &.index1 { - .index-content { - .index-content-inner { - position: relative; - } - .index-part { - position: absolute; - top: 4px; - right: 4px; - bottom: 4px; - left: 4px; - overflow: hidden; - background-color: rgba($theme-color-main, 0.8); - @include transition(all 0.5s ease); - @include opacity(0); - .index-content-title { - @include transition(all 0.3s ease); - @include transition-delay(0.1s); - @include scale(0); - } - &:hover { - @include opacity(1); - .index-content-title { - @include scale(1); - } - } - } - .index-content-title { - display: table; - margin: 0; - @include size(100%, 100%); - a { - display: table-cell; - color: #FFF; - text-decoration: none; - text-align: center; - vertical-align: middle; - } - } + .index-title { + @extend .unity-title; + } + + &.index1 { + .index-content { + .index-content-inner { + position: relative; + } + + .index-part { + position: absolute; + top: 4px; + right: 4px; + bottom: 4px; + left: 4px; + overflow: hidden; + background-color: rgba($theme-color-main, 0.8); + @include transition(all 0.5s ease); + @include opacity(0); + + .index-content-title { + @include transition(all 0.3s ease); + @include transition-delay(0.1s); + @include scale(0); + } + + &:hover { + @include opacity(1); + + .index-content-title { + @include scale(1); + } + } + } + + .index-content-title { + display: table; + margin: 0; + @include size(100%, 100%); + + a { + display: table-cell; + color: #FFF; + text-decoration: none; + text-align: center; + vertical-align: middle; + } + } + } } - } } .show-gallery { - .show-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-title { + @extend .unity-title; } - .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); + + .show-content { + padding-right: 0; + padding-left: 0; + .img { - opacity: (1); - -webkit-filter: grayscale(0%) brightness(1); - -moz-filter: grayscale(0%) brightness(1); - filter: grayscale(0%) brightness(1); + 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; + 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); + } + } } - } } - } } \ No newline at end of file diff --git a/app/templates/orbit_bootstrap/assets/stylesheets/template/modules/member.scss b/app/templates/orbit_bootstrap/assets/stylesheets/template/modules/member.scss index a35a63c..a42edf6 100644 --- a/app/templates/orbit_bootstrap/assets/stylesheets/template/modules/member.scss +++ b/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; } diff --git a/app/templates/orbit_bootstrap/assets/stylesheets/template/widget/sitemenu.scss b/app/templates/orbit_bootstrap/assets/stylesheets/template/widget/sitemenu.scss index 95aeaa6..17c73f8 100644 --- a/app/templates/orbit_bootstrap/assets/stylesheets/template/widget/sitemenu.scss +++ b/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; diff --git a/app/templates/orbit_bootstrap/home/header.html.erb b/app/templates/orbit_bootstrap/home/header.html.erb index bb666c8..6c69d08 100644 --- a/app/templates/orbit_bootstrap/home/header.html.erb +++ b/app/templates/orbit_bootstrap/home/header.html.erb @@ -21,7 +21,7 @@ - {{site_name}} + {{site_name}}
diff --git a/app/templates/orbit_bootstrap/modules/ad_banner/_ad_banner_widget3.html.erb b/app/templates/orbit_bootstrap/modules/ad_banner/_ad_banner_widget3.html.erb index abf99db..d052410 100644 --- a/app/templates/orbit_bootstrap/modules/ad_banner/_ad_banner_widget3.html.erb +++ b/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="

{{title}}

{{desc}}" + data-target="{{target}}" > - + diff --git a/app/templates/orbit_bootstrap/modules/ad_banner/_ad_banner_widget4.html.erb b/app/templates/orbit_bootstrap/modules/ad_banner/_ad_banner_widget4.html.erb index 088cce7..f2129d1 100644 --- a/app/templates/orbit_bootstrap/modules/ad_banner/_ad_banner_widget4.html.erb +++ b/app/templates/orbit_bootstrap/modules/ad_banner/_ad_banner_widget4.html.erb @@ -7,8 +7,9 @@ >
- + +

{{widget-title}}