diff --git a/app/assets/images/no-image.jpg b/app/assets/images/no-image.jpg index ae19706..a47918f 100644 Binary files a/app/assets/images/no-image.jpg and b/app/assets/images/no-image.jpg differ diff --git a/app/assets/javascripts/group.js b/app/assets/javascripts/group.js index 4329a10..14358bf 100644 --- a/app/assets/javascripts/group.js +++ b/app/assets/javascripts/group.js @@ -1,6 +1,7 @@ (function() { "use strict"; + // Commonly use variables var doc = document; var group = { @@ -8,9 +9,7 @@ cycleFix: function() { if( doc.querySelectorAll( ".group-post-banner-image").length >= 1 ) { var imgs = doc.querySelectorAll( ".group-post-banner-image" ), - imgHeight = imgs[ 0 ].clientHeight, cycleNav = doc.querySelectorAll( ".cycle-nav" ), - cycleNavHeight = cycleNav[ 0 ].clientHeight, len = cycleNav.length, i = -1; @@ -19,31 +18,27 @@ for( i = 0; i < len; i++ ) { cycleNav[ i ].classList.add( "hide" ); } - } else { - // Change nav top positions which are calculating by JavaScript - for ( i = 0; i < len; i++ ) { - cycleNav[ i ].style.top = ( ( imgHeight / 2 ) - ( cycleNavHeight / 2 ) ) + "px"; - } } + + } 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" ); } }, // Create the tool tip wrap and get the seen counts and then inject them into DOM - createToolTip: function() { - if( doc.querySelectorAll( ".group-post-seen-by-name" ).length >= 1 ) { - var container = doc.querySelector( ".group-post-seen-by" ), - names = doc.querySelectorAll( ".group-post-seen-by-name" ), - namesLen = names.length, + createToolTip: function( container, names, cls1, cls2, wrapEl ) { + if( doc.querySelectorAll( names ).length >= 1 ) { + var container = doc.querySelector( container ), + names = doc.querySelectorAll( names ), span = doc.createElement( "span" ), wrap = doc.createElement( "div" ), frag = document.createDocumentFragment(); // Get the seen counts and append them - span.className = "group-post-seen-by-count"; - span.textContent = namesLen; + span.className = cls1; names[ 0 ].parentNode.appendChild( span ); // Create the tool tip and save them in the document fragment - wrap.className = "group-post-seen-by-names tool-tip"; + wrap.className = cls2 + " tool-tip"; Array.prototype.slice.call( names ).forEach( function( el ) { frag.appendChild( el ); }); @@ -53,25 +48,30 @@ container.appendChild( wrap ); } }, + // Create scroll effect (with css) scrollEffect: function() { - var page = doc.querySelector( ".group-page" ), - wrap = doc.querySelector( ".group-page-banner-image-wrap" ), - scrollClass = "scroll"; + if( doc.querySelector( ".group-page") ) { + var page = doc.querySelector( ".group-page" ), + wrap = doc.querySelector( ".group-page-banner-image-wrap" ), + scrollClass = "scroll"; - function stickyScroll( e ) { - if( window.pageYOffset > 210 ) { - page.classList.add( scrollClass ); - } - } - - window.addEventListener( "scroll", stickyScroll); + // 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); + } } } - // When DOM is completely loaded + // When DOM is completely loaded, execute these functions document.addEventListener( "DOMContentLoaded", function( event ) { group.cycleFix(); - group.createToolTip(); + group.createToolTip( ".group-post-seen-by", ".group-post-seen-by-name", "group-post-seen-by-count", "group-post-seen-by-names" ); group.scrollEffect(); }); diff --git a/app/assets/stylesheets/group_show.css.scss b/app/assets/stylesheets/group_show.css.scss index c2f01dd..7cc7985 100644 --- a/app/assets/stylesheets/group_show.css.scss +++ b/app/assets/stylesheets/group_show.css.scss @@ -2,50 +2,133 @@ @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: #1d9e20; -$blue: #0056cc; +$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; + background: $gray; } *, *:before, *:after { - box-sizing: border-box; -} - -.screen-reader { - position: absolute; - top: -9999px; - left: -9999px; -} - -.button { - padding: 8px .75rem; - color: $gray; - border: none; - border: 1px solid #38b7ea; - border-radius: 10rem; - background: $white; + box-sizing: border-box; } img { - width: 100%; - max-width: 100%; - height: auto; + 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: lighten($blue, 5%); + } +} + +// 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 { @@ -54,270 +137,292 @@ img { } } } + .tool-tip { - padding: 10px 0.75rem; - border-radius: .2rem; - color: $white; - background: rgba($black, 0.85); + padding: 10px 0.75rem; + border-radius: .2rem; + color: $white; + background: rgba($black, 0.85); + position: absolute; + left: 0; + bottom: 100%; + z-index: 150; + &:after { + border: 5px solid transparent; + border-top-color: rgba($black, 0.85); + content: ""; position: absolute; - left: 0; - bottom: 100%; - z-index: 150; - &:after { - border: 5px solid transparent; - border-top-color: rgba($black, 0.85); - content: ""; - position: absolute; - left: 10px; - bottom: -10px; - } + left: 10px; + bottom: -10px; + } } .topnav { - display: none; + display: none; } // Group page #main-wrap { - padding-top: 0; + 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; } .group-page-banner-image-wrap { - position: relative; - overflow: hidden; - max-height: 280px; + background-color: $black; + text-align: center; } .group-page-view-switch { - position: absolute; - top: 2rem; - right: 2rem; + position: absolute; + top: 4rem; + right: 2rem; } .group-page-banner-image { - width: 100%; - max-width: 100%; - height: auto; + width: auto; + max-width: 100%; + height: auto; } .group-page-bar { - overflow: hidden; - padding: 20px 2rem; - text-align: center; - background: $group-page-bar-color; + padding: 0 2rem 0 6rem; + text-align: center; + background: rgba($group-page-bar-color, 0.95); + width: 100%; + position: absolute; + left: 0; + bottom: 0; } .group-page-title { - margin-bottom: 12px; - padding: 6px 0; - color: $white; + margin-bottom: 12px; + padding: 6px 0; + color: $white; + font-family: $main-font; + font-weight: normal; } -.group-page-setion { - overflow: hidden; - max-width: 1350px; - margin: auto; - padding: 30px 2rem; +.group-page-new-post { + float: right; + margin: 18px 0 0 0; +} + +.group-page-section { + overflow: hidden; + max-width: 1350px; + margin: auto; + padding: 300px 2rem 30px; } .gorup-page-info-wrap { - font-size: .9rem; - display: block; - float: right; - padding: 5px .5rem; - cursor: pointer; - border: 2px solid $light-gray; + font-size: .9rem; + padding: 6px 1rem; + display: block; + float: right; + cursor: pointer; } .group-page-description-wrap { - clear: both; + clear: both; } .gorup-page-info-wrap { - margin-bottom: 10px; - text-align: right; + margin-bottom: 10px; + text-align: right; } .group-page-status-wrap { - font-size: .75rem; - float: right; - margin-bottom: 10px; - padding: 2px .4rem; - color: $white; - border-radius: .2rem; - background: $green; + font-size: .75rem; + float: right; + padding: 2px 0.5rem; + margin-bottom: 10px; } .group-page-status-wrap.close-eye { - margin-left: 5px; - background: $red; + 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; + 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; + clear: both; + text-align: justify; } .group-page-post { - clear: both; - overflow: hidden; - margin-bottom: 40px; - padding: 28px 1.5rem; - text-align: center; - border-radius: .2rem; - background: $white; - box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2); + clear: both; + overflow: hidden; + 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); } .group-page-post-link { - text-decoration: none; - color: $black; + text-decoration: none; + color: $black; } .group-page-post:hover { - box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.2); + box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.2); } .group-page-post-link:hover { - text-decoration: none; - color: $black; + text-decoration: none; + color: $black; } .group-page-post-image-wrap { - display: inline-block; - margin-bottom: 12px; + display: inline-block; + margin-bottom: 12px; } .group-page-post-image { - width: 100%; - max-width: 100%; - height: auto; - margin-top: 12px; + width: 100%; + max-width: 100%; + height: auto; + margin-top: 12px; + border: 2px solid $gray; + border-radius: $general; } .group-page-post-content { - margin-bottom: .5rem; + margin-bottom: .5rem; + color: $dark-gray; } .group-page-post-title { - font-size: 1.5rem; - font-weight: normal; - line-height: 1; - margin-bottom: 12px; + font-size: 1.5rem; + font-weight: normal; + line-height: 1; + margin-bottom: 12px; + color: $light-black; + font-family: $paragraph-font; } .group-page-post-meta-wrap { - color: $dark-gray; + color: $dark-gray; } .group-page-post-author, .group-page-post-postdate { - margin-right: .5rem; + margin-right: .5rem; } -/* scroll view */ +.group-page-seen-by { + display: inline-block; +} + +// scroll view .group-page.scroll { - padding-top: 7rem; -} - -.group-page.scroll .group-page-banner-image-wrap { - position: fixed; - top: 0; - overflow: hidden; - height: 70px; -} - -.group-page.scroll .group-page-title { + padding-top: 7rem; + .group-page-banner-wrap { + height: 120px; + } + .group-page-banner-image-wrap {} + .group-page-title { margin-bottom: 0; -} - -.group-page.scroll .group-page-title { - font-size: 18px; -} - -.group-page.scroll .group-page-new-post { - margin-top: 6px; -} - -.group-page.scroll .group-page-new-post { + font-size: 1.625rem; + line-height: 50px; + } + .group-page-new-post { + margin-top: 9px; + padding: 6px 10px; + } + .group-page-new-post { display: inline-block; vertical-align: top; -} - -.group-page.scroll .group-page-view-switch { + } + .group-page-view-switch { position: static; display: inline-block; margin: 6px .5rem 0 0; -} - -.group-page.scroll .btn { + display: none; + } + .group-page-view-switch { + margin: 6px .5rem 0 0; + } + .group-page-section { + padding-top: 60px; + } + .group-page-bar {} + .btn { padding: 2px 5px; + } } .group-page li a { - text-decoration: none; + text-decoration: none; } -.group-page .group-page-feed-view .active { +.group-page-switch-btn { + color: $blue; + &:hover { color: $white; + } } /* 600px */ @media screen and (min-width: 37.5rem) { - .group-page-post { - margin-bottom: 15px; - text-align: left; - } - .group-page-post-image-wrap { - float: left; - width: 12%; - min-width: 100px; - margin-right: 4%; - } - .group-page-post-content-wrap { - float: left; - width: 70%; - } - .group-page.scroll .group-page-view-switch { - margin: 6px .5rem 0 0; - } - .group-page.scroll .group-page-bar { - position: fixed; - top: 70px; - width: 100%; - padding: 0 5rem 0 2rem; - } + .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 { - float: left; - margin: 0; - padding: 0; - } - .group-page-new-post { - float: right; - } - .group-page-view-switch { - float: right; - } + .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 {} + .group-page-view-switch { + float: right; + } } // 900px @@ -329,101 +434,117 @@ img { // Group post .group-post { - width: 980px; - margin: auto; + width: 980px; + margin: auto; } .group-post-meta { - margin-bottom: 15px; -} - -.group-post-heading-wrap { + margin-bottom: 15px; } .group-post-title { - font-family: $main-font; - float: left; + font-family: $main-font; + float: left; + width: 90%; } .group-post-avatar-wrap { - float: right; + float: right; + padding: 20px 0.375rem 0 0; } + .group-post-avatar-username-toggle { - display: block + display: block; } .group-post-avatar { - width: 60px; - height: 60px; - border-radius: 50%; + width: 60px; + height: 60px; + border-radius: 50%; } .group-post-username { - display: none; - top: 100%; - padding-bottom: 30px; - right: 0; + display: none; + top: 100%; + padding-bottom: 30px; + right: 0; + left: auto; + white-space: nowrap; + &:after { + border-top-color: transparent; + border-bottom-color: rgba(0, 0, 0, 0.85); + top: -10px; left: auto; - &:after { - border-top-color: transparent; - border-bottom-color: rgba(0, 0, 0, 0.85); - top: -10px; - left: auto; - right: 20px; - bottom: auto; - } + right: 20px; + bottom: auto; + } } .group-post-postdate { - display: inline-block; - margin-right: 1rem; - clear: both; + display: inline-block; + margin-right: 1rem; + clear: both; } - .group-post-image-wrap { - position: relative; + 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; + margin: 0; + padding: 0; + list-style: none; } .cycle-nav { - font-size: 1.2rem; - position: absolute; - line-height: 2.7rem; - z-index: 500; - width: 2.5rem; - height: 2.5rem; - cursor: pointer; - -webkit-transition: .3s all; - transition: .3s all; - text-align: center; - opacity: .5; - color: $white; - border-radius: 50%; - background-color: rgba($white, 0.2); - &:hover { - opacity: 1; - background-color: $blue; - } + 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: 2rem; + left: 0; } .group-post-cycle-next { - right: 2rem; + right: 0; } .group-post-content { - font-family: $main-font; - font-size: .8125rem; - margin: 15px 0; + font-family: $main-font; + font-size: .8125rem; + margin: 15px 0; } .group-post-attachment-wrap { @@ -432,9 +553,9 @@ img { } .group-post-attachment-icon { - font-size: 1rem; - padding: 6px 4px 0 0; - float: left; + font-size: 1rem; + padding: 6px 4px 0 0; + float: left; } .group-post-attachments { @@ -442,70 +563,69 @@ img { padding-left: 0.5rem; float: left; width: 95%; - a { + a { margin-bottom: 10px; - } + } } - .group-post-seen-by { - float: right; - cursor: pointer; - &:hover { - .group-post-seen-by-names { - display: block; - } - } - .group-post-seen-by-name { - display: block; - color: #fff; + float: right; + cursor: pointer; + &:hover { + .group-post-seen-by-names { + display: block; } + } + .group-post-seen-by-name { + display: block; + color: #fff; + } } .group-post-seen-by-lead { - margin-right: 4px; + margin-right: 4px; } .group-post-seen-by-names { - display: none; + display: none; } .comments { - clear: both + clear: both; } .group-post-respond-comment { - width: 100%; + width: 100%; } .group-post-comment-list { - margin: 0; - padding: 0; - list-style: none; + margin: 0; + padding: 0; + list-style: none; } .group-post-comment-wrap { - overflow: hidden; - margin-bottom: 25px; - padding-bottom: 8px; - border-bottom: 1px solid $light-gray; + overflow: hidden; + margin-bottom: 25px; + padding-bottom: 8px; + border-bottom: 1px solid $light-gray; } .group-post-comment-avatar { - float: left; - width: 8%; - img { - width: 60px; - height: 60px; - border-radius: 50%; - } + float: left; + width: 8%; + img { + width: 60px; + height: 60px; + border-radius: 50%; + } } .group-post-comment-author { - font-size: .9375rem; + font-size: .9375rem; } .group-post-comment-body { - float: left; - width: 80%; + float: left; + width: 80%; } \ No newline at end of file diff --git a/app/assets/stylesheets/lib/group.css b/app/assets/stylesheets/lib/group.css deleted file mode 100644 index 47e1dc8..0000000 --- a/app/assets/stylesheets/lib/group.css +++ /dev/null @@ -1,2 +0,0 @@ -body { -} \ No newline at end of file diff --git a/app/templates/orbit_bootstrap/assets/javascripts/app.js b/app/templates/orbit_bootstrap/assets/javascripts/app.js index 139e974..7c20337 100644 --- a/app/templates/orbit_bootstrap/assets/javascripts/app.js +++ b/app/templates/orbit_bootstrap/assets/javascripts/app.js @@ -4,7 +4,8 @@ function init() { var doc = document, - lang = doc.documentElement.lang; + lang = doc.documentElement.lang, + pageModule = doc.body.getAttribute( "data-module" ); var orbit = { @@ -68,7 +69,7 @@ i = -1, elsLen = els.length; - for( i = 0; i < elsLen; i ++ ) { + for ( i = 0; i < elsLen; i ++ ) { if ( els[ i ].firstChild !== null ) { if( els[ i ].firstChild.length > maxLen ) { newTitle = els[ i ].firstChild.textContent; @@ -79,6 +80,20 @@ } }, + 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() { @@ -115,12 +130,13 @@ } // Specific functions that will be running on homepage - if ( doc.body.getAttribute( "data-module" ) === "home" ) { + if ( pageModule === "home" ) { } // Functions that will be running on every page orbit.sitemenuDropdown(); + orbit.member.equalHeight(); orbit.plugins.bullEye(); } 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 3e6534b..03b86f8 100644 --- a/app/templates/orbit_bootstrap/assets/stylesheets/template/base/_global.scss +++ b/app/templates/orbit_bootstrap/assets/stylesheets/template/base/_global.scss @@ -26,3 +26,12 @@ th, td { padding: 8px .5rem; } + +.borderless>tbody>tr>td, +.borderless>tbody>tr>th, +.borderless>tfoot>tr>td, +.borderless>tfoot>tr>th, +.borderless>thead>tr>td, +.borderless>thead>tr>th { + border: none !important; +} \ No newline at end of file diff --git a/app/templates/orbit_bootstrap/assets/stylesheets/template/base/_variables.scss b/app/templates/orbit_bootstrap/assets/stylesheets/template/base/_variables.scss index 3064767..7e86c90 100644 --- a/app/templates/orbit_bootstrap/assets/stylesheets/template/base/_variables.scss +++ b/app/templates/orbit_bootstrap/assets/stylesheets/template/base/_variables.scss @@ -1,8 +1,5 @@ @charset "utf-8"; -// Google fonts -@import url(http://fonts.googleapis.com/css?family=Roboto); - // Base Color $theme-gray: #495054; $theme-gray-light: #cecece; @@ -17,11 +14,13 @@ $theme-color-main: #47bab5; $theme-color-second: #5bc0de; $theme-color-third: #ed4c43; - // Font stacks $main-font: 'Roboto', "微軟正黑體", "Helvetica Neue", Helvetica, sans-serif; $sub-font: 'Roboto', "新細明體", "Helvetica Neue", Helvetica, sans-serif; +// Font sizes +$font-15: 0.9375rem; +$font-13: 0.8125rem; // // Modules @@ -71,3 +70,10 @@ $table-th-bgcolor: $theme-color-main; // Font sizes $w-item-heading-font-size: 0.85rem; + + +// +// Member Module +// -------------------------------------------------- + +$border-width: 4px; \ No newline at end of file diff --git a/app/templates/orbit_bootstrap/assets/stylesheets/template/init.scss b/app/templates/orbit_bootstrap/assets/stylesheets/template/init.scss deleted file mode 100644 index ba687b7..0000000 --- a/app/templates/orbit_bootstrap/assets/stylesheets/template/init.scss +++ /dev/null @@ -1,4 +0,0 @@ -@import "bootstrap/mixins"; -@import "bootstrap/variables"; -@import "base/mixins"; -@import "base/variables"; diff --git a/app/templates/orbit_bootstrap/assets/stylesheets/template/initial.scss b/app/templates/orbit_bootstrap/assets/stylesheets/template/initial.scss index 694cb99..493bbbb 100644 --- a/app/templates/orbit_bootstrap/assets/stylesheets/template/initial.scss +++ b/app/templates/orbit_bootstrap/assets/stylesheets/template/initial.scss @@ -1,4 +1,3 @@ -@import url("http://fonts.googleapis.com/css?family=Droid+Sans:400,700"); @import "bootstrap/mixins"; @import "bootstrap/variables"; @import "base/mixins"; diff --git a/app/templates/orbit_bootstrap/assets/stylesheets/template/modules/ad_banner.scss b/app/templates/orbit_bootstrap/assets/stylesheets/template/modules/ad_banner.scss index 9bef0ac..35b53e3 100644 --- a/app/templates/orbit_bootstrap/assets/stylesheets/template/modules/ad_banner.scss +++ b/app/templates/orbit_bootstrap/assets/stylesheets/template/modules/ad_banner.scss @@ -1,9 +1,10 @@ @charset "utf-8"; + @import "../initial"; // // Widget -// +// // Widget // ## gerenral styles @@ -15,19 +16,46 @@ } } +.w-ad-banner__wrap { + width: 100%; +} -// Widget 1 +.w-ad-banner__slide { + width: 100%; +} + +.banner-pager { + @include list-reset; + position: absolute; + right: 1em; + top: 1em; + z-index: 200; + + li { + display: inline-block; + } + + a { + background: $theme-color-main; + display: inline-block; + margin-right: 0.25em; + width: 0.8em; + height: 0.8em; + border-radius: 50%; + opacity: .5; + } + + .active-slide a { + opacity: 1; + } +} + +.banner-responsive { + width: 100%; +} + +// Widget 1 .ad-banner-widget-1 { - .w-ad-banner__wrap { - width: 100%; - } - .w-ad-banner__slide { - width: 100%; - } - .w-ad-banner__image { - width: 100%; - height: auto; - } .w-ad-banner__caption { background: $theme-color-main; color: $theme-white; @@ -44,123 +72,50 @@ font-family: $main-font; font-size: $w-caption-desc; } - - } - .w-ad-banner__pager { - @include list-reset(); - position: absolute; - right: 1em; - top: 1em; - z-index: 200; - - li { - display: inline-block; - } - - a { - background: $theme-color-main; - display: inline-block; - margin-right: 0.25em; - width: 0.8em; - height: 0.8em; - border-radius: 50%; - opacity: 0.5; - } - - .active-slide a{ - opacity: 1; - } } } -// Widget 2 +// Widget 2 .ad-banner-widget-2 { - .w-ad-banner__wrap { - width: 100%; - } - .w-ad-banner__slide { - width: 100%; - } .w-ad-banner__image { width: 100%; height: auto; } - .youtube { - } + .youtube, .cycle-youtube { width: 100%; height: 100%; } - object, embed{ - width: 100%; - height: 100%; + + object, embed { + width: 100%; + height: 100%; } - .w-ad-banner__pager { - @include list-reset(); - position: absolute; + + .banner-pager { right: 1em; bottom: 1em; z-index: 102; - - li { - display: inline-block; - } - - a { - background: $theme-color-main; - display: inline-block; - margin-right: 0.25em; - width: 0.8em; - height: 0.8em; - border-radius: 50%; - opacity: 0.5; - } - - .active-slide a{ - opacity: 1; - } } } - // Widget 3 .ad-banner-widget-3 { - .w-ad-banner__wrap { + .w-ad-banner__wrap { width: 100%; } + .w-ad-banner__slide { width: 100%; } - .w-ad-banner__image { - width: 100%; - height: auto; - } - .w-ad-banner__pager { - @include list-reset(); - position: absolute; + + .banner-pager { + top: auto; right: 1em; bottom: 1em; - z-index: 200; - - li { - display: inline-block; - } - - a { - background: $theme-color-main; - display: inline-block; - margin-right: 0.25em; - width: 0.8em; - height: 0.8em; - border-radius: 50%; - opacity: 0.5; - } - .active-slide a{ - opacity: 1; - } } } -.cycle-slide-active{ +.cycle-slide-active { z-index: 101 !important; } \ No newline at end of file diff --git a/app/templates/orbit_bootstrap/assets/stylesheets/template/modules/announcement.scss b/app/templates/orbit_bootstrap/assets/stylesheets/template/modules/announcement.scss index a5918d0..e9eeebb 100644 --- a/app/templates/orbit_bootstrap/assets/stylesheets/template/modules/announcement.scss +++ b/app/templates/orbit_bootstrap/assets/stylesheets/template/modules/announcement.scss @@ -1,380 +1,500 @@ @charset "utf-8"; + @import "../initial"; // // Widget -// +// // Announcement widget // ## Gerneral styles for widgets .w-annc { - .w-annc__widget-title { - @extend .unity-title; + .w-annc__widget-title { + @extend .unity-title; + } + + .w-annc__list { + margin: 0; + padding: 0; + list-style: none; + } + + .w-annc__item { + margin-bottom: 30px; + } + + .label { + font-size: 0.75rem; + font-weight: normal; + } + + .w-annc__meta { + .w-annc__status-wrap, + .w-annc__postdate-wrap, + .w-annc__category-wrap { + display: inline-block; + margin-right: 0.2em; + font-size: 0.8125em; + color: $theme-gray; + font-weight: normal; } - .w-annc__list { - margin: 0; - padding: 0; - list-style: none; + + i { + color: $theme-gray; } - .w-annc__item { - margin-bottom: 30px; - } - .label { - font-size: 0.75rem; - font-weight: normal; - } - .w-annc__meta { - .w-annc__status-wrap, - .w-annc__postdate-wrap, - .w-annc__category-wrap { - display: inline-block; - margin-right: 0.2em; - font-size: 0.8125em; - color: $theme-gray; - font-weight: normal; - } - i { - color: $theme-gray; - } - } - .status-top { - background: $theme-color-second; - } - .status-hot { - background: $theme-color-third; - } - .w-annc__subtitle { - font-size: 0.8125em; - color: $theme-gray; - } - .w-annc__entry-title { - margin-bottom: 10px; - } - .w-annc__title { - font-family: $sub-font; - color: $theme-color-main; - text-decoration: none; - font-size: 0.8125rem; - &:hover { - color: darken($theme-color-main, 10%); - } + } + + .status-top { + background: $theme-color-second; + } + + .status-hot { + background: $theme-color-third; + } + + .w-annc__subtitle { + font-size: 0.8125em; + color: $theme-gray; + } + + .w-annc__entry-title { + margin-bottom: 10px; + } + + .w-annc__title { + font-family: $sub-font; + color: $theme-color-main; + text-decoration: none; + font-size: 0.8125rem; + + &:hover { + color: darken($theme-color-main, 10%); } + } } // Widget-1 .widget-announcement-1 { - .w-annc__img-wrap { - height: 200px; - margin: 0 0 1em 0; - } - .w-annc__title { - font-family: $main-font; - line-height: 1.3; - font-size: 1.2rem; - } + .w-annc__img-wrap { + height: 200px; + margin: 0 0 1em 0; + } + + .w-annc__title { + font-family: $main-font; + line-height: 1.3; + font-size: 1.2rem; + } } // Widget-2 .widget-announcement-2 { - .w-annc__img-wrap { - height: 200px; - margin: 0 0 1em 0; - } - .w-annc__title { - font-family: $main-font; - line-height: 1.3; - font-size: 1.2rem; - } + .w-annc__img-wrap { + height: 200px; + margin: 0 0 1em 0; + } + + .w-annc__title { + font-family: $main-font; + line-height: 1.3; + font-size: 1.2rem; + } } // Widget-3 .widget-announcement-3 { - .w-annc__img-wrap { - height: 200px; - margin: 0 0 1em 0; - } - .w-annc__title { - font-family: $main-font; - line-height: 1.3; - font-size: 1.2rem; - } + .w-annc__img-wrap { + height: 200px; + margin: 0 0 1em 0; + } + + .w-annc__title { + font-family: $main-font; + line-height: 1.3; + font-size: 1.2rem; + } } // Widget-4 .widget-announcement-4 { - .w-annc__title { - font-family: $main-font; - line-height: 1.3; - font-size: 1.2rem; - } - .w-annc__list > .w-annc__item:nth-child(3n+1) { - clear: both; - } - .w-annc__img-wrap { - height: 200px; - margin: 0 0 1em 0; - } + .w-annc__title { + font-family: $main-font; + line-height: 1.3; + font-size: 1.2rem; + } + + .w-annc__list > .w-annc__item:nth-child(3n+1) { + clear: both; + } + + .w-annc__img-wrap { + height: 200px; + margin: 0 0 1em 0; + } } // Widget-5 .widget-announcement-5 { - .w-annc__title { - font-family: $main-font; - line-height: 1.3; - font-size: 1.2rem; - } - .w-annc__item { - border-bottom: 1px dashed lighten($theme-gray, 65%); - padding-bottom: 1em; - margin-bottom: 1em; - } + .w-annc__title { + font-family: $main-font; + line-height: 1.3; + font-size: 1.2rem; + } + + .w-annc__item { + border-bottom: 1px dashed lighten($theme-gray, 65%); + padding-bottom: 1em; + margin-bottom: 1em; + } } // Widget-6 .widget-announcement-6 { - .w-annc__item { - margin-bottom: 0.8em; - padding-bottom: 0.8em; - border-bottom: 1px dashed lighten($theme-gray, 65%); - } - .w-annc__entry-title { - margin: 0; - } - .w-annc__category-wrap, - .w-annc__status, - .w-annc__title, - .w-annc__postdate-wrap { - font-size: 0.8125rem; - } - .w-annc__status { - display: inline-block; - } + .w-annc__item { + margin-bottom: 0.8em; + padding-bottom: 0.8em; + border-bottom: 1px dashed lighten($theme-gray, 65%); + } + + .w-annc__entry-title { + margin: 0; + } + + .w-annc__category-wrap, + .w-annc__status, + .w-annc__title, + .w-annc__postdate-wrap { + font-size: 0.8125rem; + } + + .w-annc__status { + display: inline-block; + } } // Widget-7 .widget-announcement-7 { - .w-annc__item { - margin-bottom: 0.8em; - padding-bottom: 0.8em; - border-bottom: 1px dashed lighten($theme-gray, 65%); - } - .w-annc__entry-title { - margin: 0; - } - .w-annc__category-wrap, - .w-annc__status, - .w-annc__title, - .w-annc__postdate-wrap { - font-size: 0.75rem; - } - .w-annc__status { - display: inline-block; - } + .w-annc__item { + margin-bottom: 0.8em; + padding-bottom: 0.8em; + border-bottom: 1px dashed lighten($theme-gray, 65%); + } + + .w-annc__entry-title { + margin: 0; + } + + .w-annc__category-wrap, + .w-annc__status, + .w-annc__title, + .w-annc__postdate-wrap { + font-size: 0.75rem; + } + + .w-annc__status { + display: inline-block; + } } // Widget-8 // ## Table .widget-announcement-8 { - .w-annc__th { - color: #fff; - background: $theme-color-main; - font-size: 0.8125em; - border: none; - } - .w-annc__status { - display: inline-block; - font-size: 0.75rem; - } - td { - font-size: 0.8125em; - } - a:hover { - text-decoration: none; - } + .w-annc__th { + color: #fff; + background: $theme-color-main; + font-size: 0.8125em; + border: none; + } + + .w-annc__status { + display: inline-block; + font-size: 0.75rem; + } + + td { + font-size: 0.8125em; + } + + a:hover { + text-decoration: none; + } } // Widget-9 // ## Table .widget-announcement-9 { - .w-annc__th { - color: #fff; - background: $theme-color-main; - font-size: 0.8125em; - border: none; - } - .w-annc__status { - display: inline-block; - font-size: 0.75rem; - } - td { - font-size: 0.8125em; - } - a:hover { - text-decoration: none; - } + .w-annc__th { + color: #fff; + background: $theme-color-main; + font-size: 0.8125em; + border: none; + } + + .w-annc__status { + display: inline-block; + font-size: 0.75rem; + } + + td { + font-size: 0.8125em; + } + + a:hover { + text-decoration: none; + } } // Widget-10 .widget-announcement-10 { - .w-annc__item { - margin-bottom: 0.8em; - padding-bottom: 0.8em; - border-bottom: 1px dashed lighten($theme-gray, 65%); - } - .w-annc__entry-title { - margin: 0; - } - .w-annc__postdate-wrap { - font-size: 0.8125em; - } - .w-annc__status { - display: inline-block; - font-size: 0.75rem; - } + .w-annc__item { + margin-bottom: 0.8em; + padding-bottom: 0.8em; + border-bottom: 1px dashed lighten($theme-gray, 65%); + } + + .w-annc__entry-title { + margin: 0; + } + + .w-annc__postdate-wrap { + font-size: 0.8125em; + } + + .w-annc__status { + display: inline-block; + font-size: 0.75rem; + } } // Widget-11 -// ## Table .widget-announcement-11 { - .w-annc__th { - color: #fff; - background: $theme-color-main; - font-size: 0.8125em; - border: none; - } - .w-annc__status { - display: inline-block; - font-size: 0.75rem; - } - td { - font-size: 0.8125em; - } - a:hover { - text-decoration: none; - } + .w-annc__item { + margin-bottom: 0.8em; + padding-bottom: 0.8em; + border-bottom: 1px dashed lighten($theme-gray, 65%); + } + + .w-annc__entry-title { + margin: 0; + } + + .w-annc__postdate-wrap { + font-size: 0.8125em; + } + + .w-annc__status { + display: inline-block; + font-size: 0.75rem; + } } // Widget-12 +// ## Table .widget-announcement-12 { - .w-annc__list { - padding: 0 15px; + .w-annc__th { + color: #fff; + background: $theme-color-main; + font-size: 0.8125em; + border: none; + } + + .w-annc__status { + display: inline-block; + font-size: 0.75rem; + } + + td { + font-size: 0.8125em; + } + + a:hover { + text-decoration: none; + } +} + +// Widget-13 +// ## Table +.widget-announcement-13 { + .w-annc__th { + color: #fff; + background: $theme-color-main; + font-size: 0.8125em; + border: none; + } + + .w-annc__status { + display: inline-block; + font-size: 0.75rem; + } + + td { + font-size: 0.8125em; + } + + a:hover { + text-decoration: none; + } +} + +// Widget-14 +.widget-announcement-14 { + .w-annc__list { + padding: 0 15px; + } + + .w-annc__img-wrap { + height: 300px; + margin-bottom: 15px; + + @media (min-width: $screen-md) { + height: 200px; + margin-bottom: 0; } - .w-annc__img-wrap { - height: 300px; - margin-bottom: 15px; - @media (min-width: $screen-md) { - height: 200px; - margin-bottom: 0; - } - } - .w-annc__item { - margin-bottom: 0.8em; - padding-bottom: 0.8em; - border-bottom: 1px dashed lighten($theme-gray, 65%); - } - .w-annc__entry-title { - margin: 0 0 10px 0; - @media (min-width: $screen-md) { - margin-bottom: 0; - } - } - .w-annc__postdate-wrap { - font-size: 0.8125em; - } - .w-annc__status { - display: inline-block; - } - .w-annc__postdate { - font-size: 0.8125rem; + } + + .w-annc__item { + margin-bottom: 0.8em; + padding-bottom: 0.8em; + border-bottom: 1px dashed lighten($theme-gray, 65%); + } + + .w-annc__entry-title { + margin: 0 0 10px 0; + + @media (min-width: $screen-md) { + margin-bottom: 0; } + } + + .w-annc__postdate-wrap { + font-size: 0.8125em; + } + + .w-annc__status { + display: inline-block; + } + + .w-annc__postdate { + font-size: 0.8125rem; + } } // Announcement index // ## General style for index pages .i-annc { - .i-annc__page-title { - @extend .unity-title; + .i-annc__page-title { + @extend .unity-title; + } + + .i-annc__list { + margin: 0; + padding: 0; + list-style: none; + } + + .status-top { + background: $theme-color-second; + } + + .status-hot { + background: $theme-color-third; + } + + .i-annc__widget-title { + @extend .unity-title; + } + + .i-annc__item { + margin-bottom: 30px; + } + + .i-annc__img { + width: 100%; + max-width: 100%; + height: auto; + } + + .i-annc__th { + color: #fff; + background: $theme-color-main; + font-size: 0.8125em; + border: none; + white-space: nowrap; + } + + .i-annc__status-wrap { + span { + display: inline-block; + padding: .2em .6em .3em; + + &:last-child { + margin: 0 5px 3px 0; + display: inline-block; + } } - .i-annc__list { - margin: 0; - padding: 0; - list-style: none; + } + + td { + font-size: 0.8125rem; + } + + .i-annc__title:hover { + text-decoration: none; + } + + .label { + font-size: 0.75rem; + font-weight: normal; + } + + .i-annc__meta { + .i-annc__status-wrap, + .i-annc__postdate-wrap, + .i-annc__category-wrap { + display: inline-block; + margin-right: 0.2em; + font-size: 0.8125em; + color: $theme-gray; + font-weight: normal; } - .status-top { - background: $theme-color-second; + + i { + color: $theme-gray; } - .status-hot { - background: $theme-color-third; - } - .w-annc__widget-title { - @extend .unity-title; - } - .i-annc__item { - margin-bottom: 30px; - } - .i-annc__img { - width: 100%; - max-width: 100%; - height: auto; - } - .label { - font-size: 0.75rem; - font-weight: normal; - } - .i-annc__meta { - .i-annc__status-wrap, - .i-annc__postdate-wrap, - .i-annc__category-wrap { - display: inline-block; - margin-right: 0.2em; - font-size: 0.8125em; - color: $theme-gray; - font-weight: normal; - } - i { - color: $theme-gray; - } - } - .i-annc__subtitle { - font-size: 0.8125em; - color: $theme-gray; - } - .i-annc__entry-title { - margin-bottom: 10px; - } - .i-annc__title { - font-family: $sub-font; - color: $theme-color-main; - text-decoration: none; - font-size: 0.8125rem; - &:hover { - color: darken($theme-color-main, 10%); - } + } + + .i-annc__subtitle { + font-size: 0.8125em; + color: $theme-gray; + } + + .i-annc__entry-title { + margin-bottom: 10px; + } + + .i-annc__title { + font-family: $sub-font; + color: $theme-color-main; + text-decoration: none; + font-size: 0.8125rem; + + &:hover { + color: darken($theme-color-main, 10%); } + } } // Index-1 -.index-announcement-1 { - .i-annc__th { - color: #fff; - background: $theme-color-main; - font-size: 0.8125em; - border: none; - } - td { - font-size: 0.8125rem; - } - .i-annc__title:hover { - text-decoration: none; - } -} +.index-announcement-1 {} -// Index-2 -.index-announcement-2, -.index-announcement-3 { +// Index-5 +// Index-6 +.index-announcement-5, +.index-announcement-6 { .i-annc__img-wrap { margin: 0 0 1em; } + .i-annc__title { font-family: $main-font; font-size: 1.2rem; @@ -382,73 +502,177 @@ } } +// Index-7 +.index-announcement-7 { + .i-annc__title { + font-family: $main-font; + line-height: 1.3; + font-size: 1.2rem; + } + + .i-annc__list > .i-annc__item:nth-child(3n+1) { + clear: both; + } + + .i-annc__img-wrap { + height: 200px; + margin: 0 0 1em 0; + } +} + +// Index-8 +.index-announcement-8 { + .i-annc__title { + font-family: $main-font; + line-height: 1.3; + font-size: 1.2rem; + } + + .i-annc__item { + border-bottom: 1px dashed lighten($theme-gray, 65%); + padding-bottom: 1em; + margin-bottom: 1em; + } +} + +// Index-9 +// Index-10 +.index-announcement-9, +.index-announcement-10 { + .i-annc__item { + margin-bottom: 0.8em; + padding-bottom: 0.8em; + border-bottom: 1px dashed lighten($theme-gray, 65%); + } + + .i-annc__entry-title { + margin: 0; + } + + .i-annc__category-wrap, + .i-annc__status, + .i-annc__title, + .i-annc__postdate-wrap { + font-size: 0.8125rem; + } + + .i-annc__status { + display: inline-block; + } +} + + +// Index-11 +// Index-12 +.index-announcement-11, +.index-announcement-12 { + .i-annc__item { + margin-bottom: 0.8em; + padding-bottom: 0.8em; + border-bottom: 1px dashed lighten($theme-gray, 65%); + } + + .i-annc__entry-title { + margin: 0; + } + + .i-annc__postdate-wrap { + font-size: 0.8125em; + } + + .i-annc__status { + display: inline-block; + font-size: 0.75rem; + } +} + +// Index-16 +.index-announcement-16 { + td ul { + margin: 0; + padding: 0; + list-style: none; + } +} + // Announcement show .s-annc { - .s-annc__show-title { - @extend .unity-title; - } - .s-annc__meta-wrap { - border-bottom: 1px solid $theme-gray-light; - @include clearfix; - .s-annc__meta--item { - font-size: 0.875rem; - margin-right: 1em; - margin-bottom: 0.6em; - float: left; - i { - color: darken($theme-gray-light, 10%); - } - } - .s-annc__tag-wrap { - position: relative; - margin-right: 0; - padding-left: 1.6em; - clear: both; - float: none; - i { - position: absolute; - top: 7px; - left: 0; - } - } - .s-annc__tag-wrap { - .s-annc__tag { - font-weight: normal; - } - } - } - .s-annc__post-wrap { - @include clearfix; - margin-bottom: 2em; - } - .s-annc__related-wrap { - padding-top: 1em; - border-top: 1px dotted $theme-gray-light; - } - .s-annc__related-file { - margin-bottom: 15px; - } - .s-annc__related-file, - .s-annc__related-link { - padding-bottom: 6px; - padding-left: 1.6em; - i { - margin: 8px 0 0 -1.6em; - float: left; - color: darken($theme-gray-light, 10%); - } - a { + .s-annc__show-title { + @extend .unity-title; + } - } + .s-annc__meta-wrap { + border-bottom: 1px solid $theme-gray-light; + @include clearfix; + + .s-annc__meta--item { + font-size: 0.875rem; + margin-right: 1em; + margin-bottom: 0.6em; + float: left; + + i { + color: darken($theme-gray-light, 10%); + } } - .s-annc__related-link-list, - .s-annc__related-file-list { - display: inline-block; + + .s-annc__tag-wrap { + position: relative; + margin-right: 0; + padding-left: 1.6em; + clear: both; + float: none; + + i { + position: absolute; + top: 7px; + left: 0; + } } - .s-annc__flie-title { - max-width: 9.375rem; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; + + .s-annc__tag-wrap { + .s-annc__tag { + font-weight: normal; + } } + } + + .s-annc__post-wrap { + @include clearfix; + margin-bottom: 2em; + } + + .s-annc__related-wrap { + padding-top: 1em; + border-top: 1px dotted $theme-gray-light; + } + + .s-annc__related-file { + margin-bottom: 15px; + } + + .s-annc__related-file, + .s-annc__related-link { + padding-bottom: 6px; + padding-left: 1.6em; + + i { + margin: 8px 0 0 -1.6em; + float: left; + color: darken($theme-gray-light, 10%); + } + a {} + } + + .s-annc__related-link-list, + .s-annc__related-file-list { + display: inline-block; + } + + .s-annc__flie-title { + max-width: 9.375rem; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } } \ 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 9d084b3..67c9a3f 100644 --- a/app/templates/orbit_bootstrap/assets/stylesheets/template/modules/member.scss +++ b/app/templates/orbit_bootstrap/assets/stylesheets/template/modules/member.scss @@ -1,54 +1,101 @@ @charset "utf-8"; @import "../initial"; - -// Member index page -.index-member { - .index-title { - @extend .unity-title; - } - th, - td { - font-family: $sub-font; - font-size: .8125rem; - } - th[class^="member-data-title"] { - white-space: nowrap; - } - .index-member-item { - min-height: 200px; - margin-bottom: 20px; - } - .index-member-item:nth-child(2n+1) { - clear: both; - } - .member-data-title-job-title:before, - .member-data-title-name:before, - .member-data-title-email:before, - .member-data-title-office-tel:before { - font-family: "fontAwesome"; - font-size: .75rem; - display: inline-block; - min-width: 15px; - margin-right: .3125rem; - content: "\f007"; - color: gray; - } - .member-data-title-job-title:before { - content: "\f19d"; - } - .member-data-title-email:before { - content: "\f0e0"; - } - .member-data-title-office-tel:before { - content: "\f098"; - } - .member-profile-data-wrap { - overflow: hidden; - } - .member-pic { - border-radius: .25rem; +// +// Index +// +// Member Index +// ## Gerneral styles for Index +.i-member-section { + max-width: 500px; + margin: auto; + @media screen and (min-width: $screen-sm) { + max-width: 100%; } } + +.i-member-status-title { + @extend .unity-title; +} + +.i-member-item-inner { + background: none; + border-radius: 0.25rem; + padding: 24px 1rem; + margin-bottom: 16px; + @media screen and (min-width: $screen-sm) { + background: $theme-gray-lighter; + } +} + +.i-member-pic-wrap { + height: auto; + margin-bottom: 16px; + + @media screen and (min-width: $screen-sm) { + position: relative; + overflow: hidden; + height: 125px; + } +} + +.i-member-pic { + width: 100%; + + @media screen and (min-width: $screen-sm) { + position: absolute; + top: -100%; + left: 0; + right: 0; + bottom: -100%; + margin: auto; + width: 100%; + } +} + +.i-member-profile-list { + @include list-reset; +} + +.i-member-profile-item { + margin-bottom: 8px; + font-size: $font-13; +} + +.member-data-title-job-title:before, +.member-data-title-name:before, +.member-data-title-email:before, +.member-data-title-office-tel:before { + font-family: "fontAwesome"; + font-size: .75rem; + display: inline-block; + min-width: 15px; + margin-right: .3125rem; + content: "\f007"; + text-align: center; + color: $theme-gray; +} + +.member-data-title-job-title:before { + content: "\f19d"; +} + +.member-data-title-email:before { + content: "\f0e0"; +} + +.member-data-title-office-tel:before { + content: "\f098"; +} + +// Index 3 +.i-member-item:nth-child( even) { + .i-member-item-inner {} +} + +.i-member-pic-wrap { + padding: 0; +} + // Member show page .show-member { font-family: $sub-font; diff --git a/app/templates/orbit_bootstrap/assets/stylesheets/template/template.scss b/app/templates/orbit_bootstrap/assets/stylesheets/template/template.scss index 006f71d..ef7c34f 100644 --- a/app/templates/orbit_bootstrap/assets/stylesheets/template/template.scss +++ b/app/templates/orbit_bootstrap/assets/stylesheets/template/template.scss @@ -1,3 +1,5 @@ +@import url("http://fonts.googleapis.com/css?family=Droid+Sans:400,700"); + // Base @import "base/pagination"; @import "base/orbitbar-override"; diff --git a/app/templates/orbit_bootstrap/modules/ad_banner/_ad_banner_widget1.html.erb b/app/templates/orbit_bootstrap/modules/ad_banner/_ad_banner_widget1.html.erb index 31c154f..867eeb4 100644 --- a/app/templates/orbit_bootstrap/modules/ad_banner/_ad_banner_widget1.html.erb +++ b/app/templates/orbit_bootstrap/modules/ad_banner/_ad_banner_widget1.html.erb @@ -5,7 +5,7 @@ data-cycle-slides=".w-ad-banner__slide" data-cycle-log="false" data-overlay=".w-ad-banner__caption" - data-pager=".w-ad-banner__pager" + data-pager=".w-ad-banner__pager-1" data-pager-template="
    • " data-pager-active-class="active-slide" > @@ -15,11 +15,11 @@ data-cycle-desc="{{context}}" data-overlay-template="

    {{title}}

    {{desc}}" > - +
    - + diff --git a/app/templates/orbit_bootstrap/modules/ad_banner/_ad_banner_widget2.html.erb b/app/templates/orbit_bootstrap/modules/ad_banner/_ad_banner_widget2.html.erb index 842ebc3..b820dbd 100644 --- a/app/templates/orbit_bootstrap/modules/ad_banner/_ad_banner_widget2.html.erb +++ b/app/templates/orbit_bootstrap/modules/ad_banner/_ad_banner_widget2.html.erb @@ -1,4 +1,4 @@ -
    +
    -
      +
      \ No newline at end of file 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 0524e45..abf99db 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 @@ -4,16 +4,19 @@ data-level="0" data-cycle-slides=".w-ad-banner__slide" data-cycle-log="false" - data-pager=".w-ad-banner__pager" + data-pager=".w-ad-banner__pager-3" data-pager-template="
      • " data-pager-active-class="active-slide" >
      - +
      - +
      diff --git a/app/templates/orbit_bootstrap/modules/ad_banner/info.json b/app/templates/orbit_bootstrap/modules/ad_banner/info.json index b1a540b..8b460b0 100644 --- a/app/templates/orbit_bootstrap/modules/ad_banner/info.json +++ b/app/templates/orbit_bootstrap/modules/ad_banner/info.json @@ -19,8 +19,8 @@ { "filename" : "ad_banner_widget3", "name" : { - "zh_tw" : "3. 廣告輪播 ( 圖片 )", - "en" : "3. AD banner ( image )" + "zh_tw" : "3. 橫幅輪播 ( 圖片, 導航圖示 )", + "en" : "3. Carousel ( image, navigation )" }, "thumbnail" : "thumbnail-block.png" }, diff --git a/app/templates/orbit_bootstrap/modules/announcement/_annc_widget11.html.erb b/app/templates/orbit_bootstrap/modules/announcement/_annc_widget11.html.erb index dcbe3e5..16d806e 100644 --- a/app/templates/orbit_bootstrap/modules/announcement/_annc_widget11.html.erb +++ b/app/templates/orbit_bootstrap/modules/announcement/_annc_widget11.html.erb @@ -1,24 +1,19 @@ -
      +

      {{widget-title}}

      - - - - - - - - - - - - - -
      {{title-head}}{{date-head}}
      - - {{status}} - - {{title}} - {{postdate}}
      -
      \ No newline at end of file + +
      diff --git a/app/templates/orbit_bootstrap/modules/announcement/_annc_widget12.html.erb b/app/templates/orbit_bootstrap/modules/announcement/_annc_widget12.html.erb index 07bdcc2..4504ea6 100644 --- a/app/templates/orbit_bootstrap/modules/announcement/_annc_widget12.html.erb +++ b/app/templates/orbit_bootstrap/modules/announcement/_annc_widget12.html.erb @@ -2,26 +2,23 @@

      {{widget-title}}

      -
      -
      - {{main_picture_description}} -
      -