merged
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.1 KiB |
|
@ -1,6 +1,7 @@
|
||||||
(function() {
|
(function() {
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
|
// Commonly use variables
|
||||||
var doc = document;
|
var doc = document;
|
||||||
|
|
||||||
var group = {
|
var group = {
|
||||||
|
@ -8,9 +9,7 @@
|
||||||
cycleFix: function() {
|
cycleFix: function() {
|
||||||
if( doc.querySelectorAll( ".group-post-banner-image").length >= 1 ) {
|
if( doc.querySelectorAll( ".group-post-banner-image").length >= 1 ) {
|
||||||
var imgs = doc.querySelectorAll( ".group-post-banner-image" ),
|
var imgs = doc.querySelectorAll( ".group-post-banner-image" ),
|
||||||
imgHeight = imgs[ 0 ].clientHeight,
|
|
||||||
cycleNav = doc.querySelectorAll( ".cycle-nav" ),
|
cycleNav = doc.querySelectorAll( ".cycle-nav" ),
|
||||||
cycleNavHeight = cycleNav[ 0 ].clientHeight,
|
|
||||||
len = cycleNav.length,
|
len = cycleNav.length,
|
||||||
i = -1;
|
i = -1;
|
||||||
|
|
||||||
|
@ -19,31 +18,27 @@
|
||||||
for( i = 0; i < len; i++ ) {
|
for( i = 0; i < len; i++ ) {
|
||||||
cycleNav[ i ].classList.add( "hide" );
|
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
|
// Create the tool tip wrap and get the seen counts and then inject them into DOM
|
||||||
createToolTip: function() {
|
createToolTip: function( container, names, cls1, cls2, wrapEl ) {
|
||||||
if( doc.querySelectorAll( ".group-post-seen-by-name" ).length >= 1 ) {
|
if( doc.querySelectorAll( names ).length >= 1 ) {
|
||||||
var container = doc.querySelector( ".group-post-seen-by" ),
|
var container = doc.querySelector( container ),
|
||||||
names = doc.querySelectorAll( ".group-post-seen-by-name" ),
|
names = doc.querySelectorAll( names ),
|
||||||
namesLen = names.length,
|
|
||||||
span = doc.createElement( "span" ),
|
span = doc.createElement( "span" ),
|
||||||
wrap = doc.createElement( "div" ),
|
wrap = doc.createElement( "div" ),
|
||||||
frag = document.createDocumentFragment();
|
frag = document.createDocumentFragment();
|
||||||
|
|
||||||
// Get the seen counts and append them
|
// Get the seen counts and append them
|
||||||
span.className = "group-post-seen-by-count";
|
span.className = cls1;
|
||||||
span.textContent = namesLen;
|
|
||||||
names[ 0 ].parentNode.appendChild( span );
|
names[ 0 ].parentNode.appendChild( span );
|
||||||
|
|
||||||
// Create the tool tip and save them in the document fragment
|
// 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 ) {
|
Array.prototype.slice.call( names ).forEach( function( el ) {
|
||||||
frag.appendChild( el );
|
frag.appendChild( el );
|
||||||
});
|
});
|
||||||
|
@ -53,25 +48,30 @@
|
||||||
container.appendChild( wrap );
|
container.appendChild( wrap );
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
// Create scroll effect (with css)
|
||||||
scrollEffect: function() {
|
scrollEffect: function() {
|
||||||
var page = doc.querySelector( ".group-page" ),
|
if( doc.querySelector( ".group-page") ) {
|
||||||
wrap = doc.querySelector( ".group-page-banner-image-wrap" ),
|
var page = doc.querySelector( ".group-page" ),
|
||||||
scrollClass = "scroll";
|
wrap = doc.querySelector( ".group-page-banner-image-wrap" ),
|
||||||
|
scrollClass = "scroll";
|
||||||
|
|
||||||
function stickyScroll( e ) {
|
// Use pageYOffset to get the Y positoin and add scroll on it, the animation
|
||||||
if( window.pageYOffset > 210 ) {
|
// is done by css transition
|
||||||
page.classList.add( scrollClass );
|
window.addEventListener( "scroll", function() {
|
||||||
}
|
if( window.pageYOffset !== 0 ) {
|
||||||
}
|
page.classList.add( scrollClass );
|
||||||
|
} else {
|
||||||
window.addEventListener( "scroll", stickyScroll);
|
page.classList.remove( scrollClass );
|
||||||
|
}
|
||||||
|
}, false);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// When DOM is completely loaded
|
// When DOM is completely loaded, execute these functions
|
||||||
document.addEventListener( "DOMContentLoaded", function( event ) {
|
document.addEventListener( "DOMContentLoaded", function( event ) {
|
||||||
group.cycleFix();
|
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();
|
group.scrollEffect();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -2,50 +2,133 @@
|
||||||
|
|
||||||
@import url(http://fonts.googleapis.com/css?family=Maven+Pro);
|
@import url(http://fonts.googleapis.com/css?family=Maven+Pro);
|
||||||
|
|
||||||
|
@import url(http://fonts.googleapis.com/css?family=Roboto);
|
||||||
|
|
||||||
// Font stacks
|
// Font stacks
|
||||||
|
|
||||||
$main-font: "Maven Pro", "微軟正黑體" sans-serif;
|
$main-font: "Maven Pro", "微軟正黑體" sans-serif;
|
||||||
|
$paragraph-font: "Roboto", "微軟正黑體", sans-serif;
|
||||||
$gray: #f3f3f3;
|
$gray: #f3f3f3;
|
||||||
$dark-gray: #aaaaaa;
|
$dark-gray: #aaaaaa;
|
||||||
$light-gray: #cdcdcd;
|
$light-gray: #cdcdcd;
|
||||||
$white: white;
|
$white: white;
|
||||||
|
$light-black: #353535;
|
||||||
$black: black;
|
$black: black;
|
||||||
$green: #1d9e20;
|
$green: #4ad976;
|
||||||
$blue: #0056cc;
|
$blue: #4171d5;
|
||||||
$red: #c71932;
|
$red: #c71932;
|
||||||
|
$blue-green: #00acee;
|
||||||
$group-page-bar-color: #171717;
|
$group-page-bar-color: #171717;
|
||||||
|
|
||||||
|
// Transition units
|
||||||
|
$fast: 0.3s;
|
||||||
|
$normal: 0.6s;
|
||||||
|
$slow: 1s;
|
||||||
|
|
||||||
|
// Border radius units
|
||||||
|
$general: 0.25rem;
|
||||||
|
|
||||||
// General style
|
// General style
|
||||||
body {
|
body {
|
||||||
background: $gray;
|
background: $gray;
|
||||||
}
|
}
|
||||||
|
|
||||||
*,
|
*,
|
||||||
*:before,
|
*:before,
|
||||||
*:after {
|
*:after {
|
||||||
box-sizing: border-box;
|
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
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 {
|
.tool-tip-parent {
|
||||||
position: relative;
|
position: relative;
|
||||||
&:hover {
|
&:hover {
|
||||||
|
@ -54,270 +137,292 @@ img {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tool-tip {
|
.tool-tip {
|
||||||
padding: 10px 0.75rem;
|
padding: 10px 0.75rem;
|
||||||
border-radius: .2rem;
|
border-radius: .2rem;
|
||||||
color: $white;
|
color: $white;
|
||||||
background: rgba($black, 0.85);
|
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;
|
position: absolute;
|
||||||
left: 0;
|
left: 10px;
|
||||||
bottom: 100%;
|
bottom: -10px;
|
||||||
z-index: 150;
|
}
|
||||||
&:after {
|
|
||||||
border: 5px solid transparent;
|
|
||||||
border-top-color: rgba($black, 0.85);
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
left: 10px;
|
|
||||||
bottom: -10px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.topnav {
|
.topnav {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Group page
|
// Group page
|
||||||
#main-wrap {
|
#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 {
|
.group-page-banner-image-wrap {
|
||||||
position: relative;
|
background-color: $black;
|
||||||
overflow: hidden;
|
text-align: center;
|
||||||
max-height: 280px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-page-view-switch {
|
.group-page-view-switch {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 2rem;
|
top: 4rem;
|
||||||
right: 2rem;
|
right: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-page-banner-image {
|
.group-page-banner-image {
|
||||||
width: 100%;
|
width: auto;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-page-bar {
|
.group-page-bar {
|
||||||
overflow: hidden;
|
padding: 0 2rem 0 6rem;
|
||||||
padding: 20px 2rem;
|
text-align: center;
|
||||||
text-align: center;
|
background: rgba($group-page-bar-color, 0.95);
|
||||||
background: $group-page-bar-color;
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-page-title {
|
.group-page-title {
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
padding: 6px 0;
|
padding: 6px 0;
|
||||||
color: $white;
|
color: $white;
|
||||||
|
font-family: $main-font;
|
||||||
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-page-setion {
|
.group-page-new-post {
|
||||||
overflow: hidden;
|
float: right;
|
||||||
max-width: 1350px;
|
margin: 18px 0 0 0;
|
||||||
margin: auto;
|
}
|
||||||
padding: 30px 2rem;
|
|
||||||
|
.group-page-section {
|
||||||
|
overflow: hidden;
|
||||||
|
max-width: 1350px;
|
||||||
|
margin: auto;
|
||||||
|
padding: 300px 2rem 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gorup-page-info-wrap {
|
.gorup-page-info-wrap {
|
||||||
font-size: .9rem;
|
font-size: .9rem;
|
||||||
display: block;
|
padding: 6px 1rem;
|
||||||
float: right;
|
display: block;
|
||||||
padding: 5px .5rem;
|
float: right;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: 2px solid $light-gray;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-page-description-wrap {
|
.group-page-description-wrap {
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gorup-page-info-wrap {
|
.gorup-page-info-wrap {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-page-status-wrap {
|
.group-page-status-wrap {
|
||||||
font-size: .75rem;
|
font-size: .75rem;
|
||||||
float: right;
|
float: right;
|
||||||
margin-bottom: 10px;
|
padding: 2px 0.5rem;
|
||||||
padding: 2px .4rem;
|
margin-bottom: 10px;
|
||||||
color: $white;
|
|
||||||
border-radius: .2rem;
|
|
||||||
background: $green;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-page-status-wrap.close-eye {
|
.group-page-status-wrap.close-eye {
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
background: $red;
|
background: $red;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-page-description-wrap {
|
.group-page-description-wrap {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
padding: 16px 1.2rem 16px;
|
padding: 16px 1.2rem 16px;
|
||||||
border-radius: .2rem;
|
border-radius: .2rem;
|
||||||
box-shadow: inset 0 0 8px $dark-gray;
|
box-shadow: inset 0 0 8px $dark-gray;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-page-description {
|
.group-page-description {
|
||||||
clear: both;
|
clear: both;
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-page-post {
|
.group-page-post {
|
||||||
clear: both;
|
clear: both;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-bottom: 40px;
|
margin-bottom: 40px;
|
||||||
padding: 28px 1.5rem;
|
padding: 28px 1.5rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: .2rem;
|
border-radius: $general;
|
||||||
background: $white;
|
background: $white;
|
||||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-page-post-link {
|
.group-page-post-link {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: $black;
|
color: $black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-page-post:hover {
|
.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 {
|
.group-page-post-link:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: $black;
|
color: $black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-page-post-image-wrap {
|
.group-page-post-image-wrap {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-page-post-image {
|
.group-page-post-image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
|
border: 2px solid $gray;
|
||||||
|
border-radius: $general;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-page-post-content {
|
.group-page-post-content {
|
||||||
margin-bottom: .5rem;
|
margin-bottom: .5rem;
|
||||||
|
color: $dark-gray;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-page-post-title {
|
.group-page-post-title {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
|
color: $light-black;
|
||||||
|
font-family: $paragraph-font;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-page-post-meta-wrap {
|
.group-page-post-meta-wrap {
|
||||||
color: $dark-gray;
|
color: $dark-gray;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-page-post-author,
|
.group-page-post-author,
|
||||||
.group-page-post-postdate {
|
.group-page-post-postdate {
|
||||||
margin-right: .5rem;
|
margin-right: .5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* scroll view */
|
.group-page-seen-by {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
// scroll view
|
||||||
|
|
||||||
.group-page.scroll {
|
.group-page.scroll {
|
||||||
padding-top: 7rem;
|
padding-top: 7rem;
|
||||||
}
|
.group-page-banner-wrap {
|
||||||
|
height: 120px;
|
||||||
.group-page.scroll .group-page-banner-image-wrap {
|
}
|
||||||
position: fixed;
|
.group-page-banner-image-wrap {}
|
||||||
top: 0;
|
.group-page-title {
|
||||||
overflow: hidden;
|
|
||||||
height: 70px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.group-page.scroll .group-page-title {
|
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
font-size: 1.625rem;
|
||||||
|
line-height: 50px;
|
||||||
.group-page.scroll .group-page-title {
|
}
|
||||||
font-size: 18px;
|
.group-page-new-post {
|
||||||
}
|
margin-top: 9px;
|
||||||
|
padding: 6px 10px;
|
||||||
.group-page.scroll .group-page-new-post {
|
}
|
||||||
margin-top: 6px;
|
.group-page-new-post {
|
||||||
}
|
|
||||||
|
|
||||||
.group-page.scroll .group-page-new-post {
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
.group-page-view-switch {
|
||||||
.group-page.scroll .group-page-view-switch {
|
|
||||||
position: static;
|
position: static;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 6px .5rem 0 0;
|
margin: 6px .5rem 0 0;
|
||||||
}
|
display: none;
|
||||||
|
}
|
||||||
.group-page.scroll .btn {
|
.group-page-view-switch {
|
||||||
|
margin: 6px .5rem 0 0;
|
||||||
|
}
|
||||||
|
.group-page-section {
|
||||||
|
padding-top: 60px;
|
||||||
|
}
|
||||||
|
.group-page-bar {}
|
||||||
|
.btn {
|
||||||
padding: 2px 5px;
|
padding: 2px 5px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-page li a {
|
.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;
|
color: $white;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 600px */
|
/* 600px */
|
||||||
|
|
||||||
@media screen and (min-width: 37.5rem) {
|
@media screen and (min-width: 37.5rem) {
|
||||||
.group-page-post {
|
.group-page-post {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 35px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
.group-page-post-image-wrap {
|
.group-page-post-image-wrap {
|
||||||
float: left;
|
float: left;
|
||||||
width: 12%;
|
width: 12%;
|
||||||
min-width: 100px;
|
min-width: 100px;
|
||||||
margin-right: 4%;
|
margin-right: 4%;
|
||||||
}
|
max-height: 140px;
|
||||||
.group-page-post-content-wrap {
|
overflow: hidden;
|
||||||
float: left;
|
}
|
||||||
width: 70%;
|
.group-page-post-content-wrap {
|
||||||
}
|
float: left;
|
||||||
.group-page.scroll .group-page-view-switch {
|
width: 70%;
|
||||||
margin: 6px .5rem 0 0;
|
font-family: $paragraph-font;
|
||||||
}
|
}
|
||||||
.group-page.scroll .group-page-bar {
|
|
||||||
position: fixed;
|
|
||||||
top: 70px;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0 5rem 0 2rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 760px */
|
/* 760px */
|
||||||
|
|
||||||
@media screen and (min-width: 47.5rem) {
|
@media screen and (min-width: 47.5rem) {
|
||||||
.group-page-post-content-wrap {
|
.group-page-post-content-wrap {
|
||||||
width: 70%;
|
width: 70%;
|
||||||
}
|
}
|
||||||
.group-page-bar {
|
.group-page-bar {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
.group-page-title {
|
.group-page-title {
|
||||||
float: left;
|
display: inline-block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
line-height: 70px;
|
||||||
.group-page-new-post {
|
transition: .6s all;
|
||||||
float: right;
|
}
|
||||||
}
|
.group-page-new-post {}
|
||||||
.group-page-view-switch {
|
.group-page-view-switch {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 900px
|
// 900px
|
||||||
|
@ -329,101 +434,117 @@ img {
|
||||||
|
|
||||||
// Group post
|
// Group post
|
||||||
.group-post {
|
.group-post {
|
||||||
width: 980px;
|
width: 980px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-post-meta {
|
.group-post-meta {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
|
||||||
|
|
||||||
.group-post-heading-wrap {
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-post-title {
|
.group-post-title {
|
||||||
font-family: $main-font;
|
font-family: $main-font;
|
||||||
float: left;
|
float: left;
|
||||||
|
width: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-post-avatar-wrap {
|
.group-post-avatar-wrap {
|
||||||
float: right;
|
float: right;
|
||||||
|
padding: 20px 0.375rem 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-post-avatar-username-toggle {
|
.group-post-avatar-username-toggle {
|
||||||
display: block
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-post-avatar {
|
.group-post-avatar {
|
||||||
width: 60px;
|
width: 60px;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-post-username {
|
.group-post-username {
|
||||||
display: none;
|
display: none;
|
||||||
top: 100%;
|
top: 100%;
|
||||||
padding-bottom: 30px;
|
padding-bottom: 30px;
|
||||||
right: 0;
|
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;
|
left: auto;
|
||||||
&:after {
|
right: 20px;
|
||||||
border-top-color: transparent;
|
bottom: auto;
|
||||||
border-bottom-color: rgba(0, 0, 0, 0.85);
|
}
|
||||||
top: -10px;
|
|
||||||
left: auto;
|
|
||||||
right: 20px;
|
|
||||||
bottom: auto;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-post-postdate {
|
.group-post-postdate {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.group-post-image-wrap {
|
.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 {
|
.group-post-image-list {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cycle-nav {
|
.cycle-nav {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
line-height: 2.7rem;
|
top: 50%;
|
||||||
z-index: 500;
|
margin-top: -1.25rem;
|
||||||
width: 2.5rem;
|
line-height: 1.5rem;
|
||||||
height: 2.5rem;
|
color: $white;
|
||||||
cursor: pointer;
|
z-index: 500;
|
||||||
-webkit-transition: .3s all;
|
width: 2.5rem;
|
||||||
transition: .3s all;
|
height: 2.5rem;
|
||||||
text-align: center;
|
cursor: pointer;
|
||||||
opacity: .5;
|
-webkit-transition: $normal all;
|
||||||
color: $white;
|
transition: $normal all;
|
||||||
border-radius: 50%;
|
text-align: center;
|
||||||
background-color: rgba($white, 0.2);
|
background-color: rgba($black, 0.8);
|
||||||
&:hover {
|
border-radius: 50%;
|
||||||
opacity: 1;
|
opacity: 0;
|
||||||
background-color: $blue;
|
&:hover {
|
||||||
}
|
background-color: $blue;
|
||||||
|
}
|
||||||
|
.group-post-cycle-nav-icon {
|
||||||
|
line-height: 2.6rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-post-cycle-prev {
|
.group-post-cycle-prev {
|
||||||
left: 2rem;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-post-cycle-next {
|
.group-post-cycle-next {
|
||||||
right: 2rem;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-post-content {
|
.group-post-content {
|
||||||
font-family: $main-font;
|
font-family: $main-font;
|
||||||
font-size: .8125rem;
|
font-size: .8125rem;
|
||||||
margin: 15px 0;
|
margin: 15px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-post-attachment-wrap {
|
.group-post-attachment-wrap {
|
||||||
|
@ -432,9 +553,9 @@ img {
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-post-attachment-icon {
|
.group-post-attachment-icon {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
padding: 6px 4px 0 0;
|
padding: 6px 4px 0 0;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-post-attachments {
|
.group-post-attachments {
|
||||||
|
@ -442,70 +563,69 @@ img {
|
||||||
padding-left: 0.5rem;
|
padding-left: 0.5rem;
|
||||||
float: left;
|
float: left;
|
||||||
width: 95%;
|
width: 95%;
|
||||||
a {
|
a {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.group-post-seen-by {
|
.group-post-seen-by {
|
||||||
float: right;
|
float: right;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
&:hover {
|
&:hover {
|
||||||
.group-post-seen-by-names {
|
.group-post-seen-by-names {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
|
||||||
}
|
|
||||||
.group-post-seen-by-name {
|
|
||||||
display: block;
|
|
||||||
color: #fff;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
.group-post-seen-by-name {
|
||||||
|
display: block;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-post-seen-by-lead {
|
.group-post-seen-by-lead {
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-post-seen-by-names {
|
.group-post-seen-by-names {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comments {
|
.comments {
|
||||||
clear: both
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-post-respond-comment {
|
.group-post-respond-comment {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-post-comment-list {
|
.group-post-comment-list {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-post-comment-wrap {
|
.group-post-comment-wrap {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-bottom: 25px;
|
margin-bottom: 25px;
|
||||||
padding-bottom: 8px;
|
padding-bottom: 8px;
|
||||||
border-bottom: 1px solid $light-gray;
|
border-bottom: 1px solid $light-gray;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-post-comment-avatar {
|
.group-post-comment-avatar {
|
||||||
float: left;
|
float: left;
|
||||||
width: 8%;
|
width: 8%;
|
||||||
img {
|
img {
|
||||||
width: 60px;
|
width: 60px;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-post-comment-author {
|
.group-post-comment-author {
|
||||||
font-size: .9375rem;
|
font-size: .9375rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group-post-comment-body {
|
.group-post-comment-body {
|
||||||
float: left;
|
float: left;
|
||||||
width: 80%;
|
width: 80%;
|
||||||
}
|
}
|
|
@ -1,2 +0,0 @@
|
||||||
body {
|
|
||||||
}
|
|
|
@ -4,7 +4,8 @@
|
||||||
|
|
||||||
function init() {
|
function init() {
|
||||||
var doc = document,
|
var doc = document,
|
||||||
lang = doc.documentElement.lang;
|
lang = doc.documentElement.lang,
|
||||||
|
pageModule = doc.body.getAttribute( "data-module" );
|
||||||
|
|
||||||
var orbit = {
|
var orbit = {
|
||||||
|
|
||||||
|
@ -68,7 +69,7 @@
|
||||||
i = -1,
|
i = -1,
|
||||||
elsLen = els.length;
|
elsLen = els.length;
|
||||||
|
|
||||||
for( i = 0; i < elsLen; i ++ ) {
|
for ( i = 0; i < elsLen; i ++ ) {
|
||||||
if ( els[ i ].firstChild !== null ) {
|
if ( els[ i ].firstChild !== null ) {
|
||||||
if( els[ i ].firstChild.length > maxLen ) {
|
if( els[ i ].firstChild.length > maxLen ) {
|
||||||
newTitle = els[ i ].firstChild.textContent;
|
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
|
// Add link and cursor class name on element that has data-link attribute
|
||||||
addLinkOnADBanner: function( els ) {
|
addLinkOnADBanner: function( els ) {
|
||||||
$.each( els, function() {
|
$.each( els, function() {
|
||||||
|
@ -115,12 +130,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// Specific functions that will be running on homepage
|
// 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
|
// Functions that will be running on every page
|
||||||
orbit.sitemenuDropdown();
|
orbit.sitemenuDropdown();
|
||||||
|
orbit.member.equalHeight();
|
||||||
orbit.plugins.bullEye();
|
orbit.plugins.bullEye();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -26,3 +26,12 @@ th,
|
||||||
td {
|
td {
|
||||||
padding: 8px .5rem;
|
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;
|
||||||
|
}
|
|
@ -1,8 +1,5 @@
|
||||||
@charset "utf-8";
|
@charset "utf-8";
|
||||||
|
|
||||||
// Google fonts
|
|
||||||
@import url(http://fonts.googleapis.com/css?family=Roboto);
|
|
||||||
|
|
||||||
// Base Color
|
// Base Color
|
||||||
$theme-gray: #495054;
|
$theme-gray: #495054;
|
||||||
$theme-gray-light: #cecece;
|
$theme-gray-light: #cecece;
|
||||||
|
@ -17,11 +14,13 @@ $theme-color-main: #47bab5;
|
||||||
$theme-color-second: #5bc0de;
|
$theme-color-second: #5bc0de;
|
||||||
$theme-color-third: #ed4c43;
|
$theme-color-third: #ed4c43;
|
||||||
|
|
||||||
|
|
||||||
// Font stacks
|
// Font stacks
|
||||||
$main-font: 'Roboto', "微軟正黑體", "Helvetica Neue", Helvetica, sans-serif;
|
$main-font: 'Roboto', "微軟正黑體", "Helvetica Neue", Helvetica, sans-serif;
|
||||||
$sub-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
|
// Modules
|
||||||
|
@ -71,3 +70,10 @@ $table-th-bgcolor: $theme-color-main;
|
||||||
|
|
||||||
// Font sizes
|
// Font sizes
|
||||||
$w-item-heading-font-size: 0.85rem;
|
$w-item-heading-font-size: 0.85rem;
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Member Module
|
||||||
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
$border-width: 4px;
|
|
@ -1,4 +0,0 @@
|
||||||
@import "bootstrap/mixins";
|
|
||||||
@import "bootstrap/variables";
|
|
||||||
@import "base/mixins";
|
|
||||||
@import "base/variables";
|
|
|
@ -1,4 +1,3 @@
|
||||||
@import url("http://fonts.googleapis.com/css?family=Droid+Sans:400,700");
|
|
||||||
@import "bootstrap/mixins";
|
@import "bootstrap/mixins";
|
||||||
@import "bootstrap/variables";
|
@import "bootstrap/variables";
|
||||||
@import "base/mixins";
|
@import "base/mixins";
|
||||||
|
|
|
@ -1,9 +1,10 @@
|
||||||
@charset "utf-8";
|
@charset "utf-8";
|
||||||
|
|
||||||
@import "../initial";
|
@import "../initial";
|
||||||
|
|
||||||
//
|
//
|
||||||
// Widget
|
// Widget
|
||||||
//
|
//
|
||||||
|
|
||||||
// Widget
|
// Widget
|
||||||
// ## gerenral styles
|
// ## 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 {
|
.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 {
|
.w-ad-banner__caption {
|
||||||
background: $theme-color-main;
|
background: $theme-color-main;
|
||||||
color: $theme-white;
|
color: $theme-white;
|
||||||
|
@ -44,123 +72,50 @@
|
||||||
font-family: $main-font;
|
font-family: $main-font;
|
||||||
font-size: $w-caption-desc;
|
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 {
|
.ad-banner-widget-2 {
|
||||||
.w-ad-banner__wrap {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.w-ad-banner__slide {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.w-ad-banner__image {
|
.w-ad-banner__image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
.youtube {
|
|
||||||
}
|
|
||||||
.youtube, .cycle-youtube {
|
.youtube, .cycle-youtube {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
object, embed{
|
|
||||||
width: 100%;
|
object, embed {
|
||||||
height: 100%;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
.w-ad-banner__pager {
|
|
||||||
@include list-reset();
|
.banner-pager {
|
||||||
position: absolute;
|
|
||||||
right: 1em;
|
right: 1em;
|
||||||
bottom: 1em;
|
bottom: 1em;
|
||||||
z-index: 102;
|
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
|
// Widget 3
|
||||||
.ad-banner-widget-3 {
|
.ad-banner-widget-3 {
|
||||||
.w-ad-banner__wrap {
|
.w-ad-banner__wrap {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.w-ad-banner__slide {
|
.w-ad-banner__slide {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.w-ad-banner__image {
|
|
||||||
width: 100%;
|
.banner-pager {
|
||||||
height: auto;
|
top: auto;
|
||||||
}
|
|
||||||
.w-ad-banner__pager {
|
|
||||||
@include list-reset();
|
|
||||||
position: absolute;
|
|
||||||
right: 1em;
|
right: 1em;
|
||||||
bottom: 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;
|
z-index: 101 !important;
|
||||||
}
|
}
|
|
@ -1,54 +1,101 @@
|
||||||
@charset "utf-8";
|
@charset "utf-8";
|
||||||
@import "../initial";
|
@import "../initial";
|
||||||
|
//
|
||||||
// Member index page
|
// Index
|
||||||
.index-member {
|
//
|
||||||
.index-title {
|
// Member Index
|
||||||
@extend .unity-title;
|
// ## Gerneral styles for Index
|
||||||
}
|
.i-member-section {
|
||||||
th,
|
max-width: 500px;
|
||||||
td {
|
margin: auto;
|
||||||
font-family: $sub-font;
|
@media screen and (min-width: $screen-sm) {
|
||||||
font-size: .8125rem;
|
max-width: 100%;
|
||||||
}
|
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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
|
// Member show page
|
||||||
.show-member {
|
.show-member {
|
||||||
font-family: $sub-font;
|
font-family: $sub-font;
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
|
@import url("http://fonts.googleapis.com/css?family=Droid+Sans:400,700");
|
||||||
|
|
||||||
// Base
|
// Base
|
||||||
@import "base/pagination";
|
@import "base/pagination";
|
||||||
@import "base/orbitbar-override";
|
@import "base/orbitbar-override";
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
data-cycle-slides=".w-ad-banner__slide"
|
data-cycle-slides=".w-ad-banner__slide"
|
||||||
data-cycle-log="false"
|
data-cycle-log="false"
|
||||||
data-overlay=".w-ad-banner__caption"
|
data-overlay=".w-ad-banner__caption"
|
||||||
data-pager=".w-ad-banner__pager"
|
data-pager=".w-ad-banner__pager-1"
|
||||||
data-pager-template="<li><a href='#'></a></li>"
|
data-pager-template="<li><a href='#'></a></li>"
|
||||||
data-pager-active-class="active-slide"
|
data-pager-active-class="active-slide"
|
||||||
>
|
>
|
||||||
|
@ -15,11 +15,11 @@
|
||||||
data-cycle-desc="{{context}}"
|
data-cycle-desc="{{context}}"
|
||||||
data-overlay-template="<h2>{{title}}</h2>{{desc}}"
|
data-overlay-template="<h2>{{title}}</h2>{{desc}}"
|
||||||
>
|
>
|
||||||
<img class="w-ad-banner__image" src="{{image_link}}">
|
<img class="w-ad-banner__image banner-responsive" src="{{image_link}}">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-ad-banner__caption"></div>
|
<div class="w-ad-banner__caption"></div>
|
||||||
<ul class="w-ad-banner__pager"></ul>
|
<ul class="w-ad-banner__pager-1 banner-pager"></ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<div class="w-ad-banner ad-banner-widget-3">
|
<div class="w-ad-banner ad-banner-widget-2">
|
||||||
<div class="w-ad-banner__wrap cycle-slideshow"
|
<div class="w-ad-banner__wrap cycle-slideshow"
|
||||||
data-list="images"
|
data-list="images"
|
||||||
data-level="0"
|
data-level="0"
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
data-cycle-log="false"
|
data-cycle-log="false"
|
||||||
data-overlay=".w-ad-banner__caption"
|
data-overlay=".w-ad-banner__caption"
|
||||||
data-cycle-auto-height="640:360"
|
data-cycle-auto-height="640:360"
|
||||||
data-pager=".w-ad-banner__pager"
|
data-pager=".w-ad-banner__pager-2"
|
||||||
data-pager-template="<li><a href='#'></a></li>"
|
data-pager-template="<li><a href='#'></a></li>"
|
||||||
data-pager-active-class="active-slide"
|
data-pager-active-class="active-slide"
|
||||||
data-cycle-youtube="true"
|
data-cycle-youtube="true"
|
||||||
|
@ -15,24 +15,50 @@
|
||||||
|
|
||||||
{{html}}
|
{{html}}
|
||||||
</div>
|
</div>
|
||||||
<ul class="w-ad-banner__pager"></ul>
|
<ul class="w-ad-banner__pager-2 banner-pager"></ul>
|
||||||
</div>
|
</div>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
|
if (typeof ad_banners_count === 'undefined'){
|
||||||
|
var ad_banners_count = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(document.getElementById("youtube-iframe-api") == null){
|
||||||
|
var tag = document.createElement('script');
|
||||||
|
tag.setAttribute("id", "youtube-iframe-api");
|
||||||
|
tag.src = "https://www.youtube.com/iframe_api";
|
||||||
|
var firstScriptTag = document.getElementsByTagName('script')[0];
|
||||||
|
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
||||||
|
}
|
||||||
|
|
||||||
$("document").ready(function(){
|
$("document").ready(function(){
|
||||||
$("*[data-youtube-id]").each(function(){
|
$("*[data-yt-binded=0]").each(function(){
|
||||||
var obj = $(this).find("embed");
|
$(this).attr("data-yt-binded","1");
|
||||||
obj.attr("id",$(this).data("youtube-id"));
|
var obj = $(this).find("iframe");
|
||||||
|
obj.attr("id",$(this).data("youtube-id") + "_" + ad_banners_count);
|
||||||
|
ad_banners_count++;
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
function onYouTubePlayerReady(playerId) {
|
|
||||||
var y = document.getElementById(playerId);
|
if (typeof onYouTubeIframeAPIReady !== 'function'){
|
||||||
y.addEventListener("onStateChange", "onytplayerStateChange");
|
function onYouTubeIframeAPIReady(){
|
||||||
|
$(".w-ad-banner iframe[data-yt-api-binded=0]").each(function(){
|
||||||
|
$(this).attr("data-yt-api-binded","1");
|
||||||
|
new YT.Player($(this).attr("id"), {
|
||||||
|
events: {
|
||||||
|
'onStateChange': onPlayerStateChange
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
}
|
}
|
||||||
function onytplayerStateChange(newState) {
|
|
||||||
if(newState == 0){
|
function onPlayerStateChange(event){
|
||||||
$(".cycle-slideshow").cycle("resume");
|
var iframe = $(event.target.getIframe()),
|
||||||
}else if(newState == 1){
|
cyclediv = iframe.parents("div.cycle-slideshow");
|
||||||
$(".cycle-slideshow").cycle("pause");
|
if(event.data == YT.PlayerState.PLAYING || event.data == YT.PlayerState.BUFFERING){
|
||||||
|
cyclediv.cycle("pause");
|
||||||
|
}else if(event.data == YT.PlayerState.PAUSED || event.data == YT.PlayerState.ENDED){
|
||||||
|
cyclediv.cycle("resume");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
|
@ -4,16 +4,19 @@
|
||||||
data-level="0"
|
data-level="0"
|
||||||
data-cycle-slides=".w-ad-banner__slide"
|
data-cycle-slides=".w-ad-banner__slide"
|
||||||
data-cycle-log="false"
|
data-cycle-log="false"
|
||||||
data-pager=".w-ad-banner__pager"
|
data-pager=".w-ad-banner__pager-3"
|
||||||
data-pager-template="<li><a href='#'></a></li>"
|
data-pager-template="<li><a href='#'></a></li>"
|
||||||
data-pager-active-class="active-slide"
|
data-pager-active-class="active-slide"
|
||||||
>
|
>
|
||||||
<div class="w-ad-banner__slide {{class}}"
|
<div class="w-ad-banner__slide {{class}}"
|
||||||
data-link="{{link}}"
|
data-link="{{link}}"
|
||||||
|
data-cycle-title="{{title}}"
|
||||||
|
data-cycle-desc="{{context}}"
|
||||||
|
data-overlay-template="<h2>{{title}}</h2>{{desc}}"
|
||||||
>
|
>
|
||||||
<img class="w-ad-banner__image" src="{{image_link}}">
|
<img class="w-ad-banner__image banner-responsive" src="{{image_link}}">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ul class="w-ad-banner__pager"></ul>
|
<ul class="w-ad-banner__pager-3 banner-pager"></ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -19,8 +19,8 @@
|
||||||
{
|
{
|
||||||
"filename" : "ad_banner_widget3",
|
"filename" : "ad_banner_widget3",
|
||||||
"name" : {
|
"name" : {
|
||||||
"zh_tw" : "3. 廣告輪播 ( 圖片 )",
|
"zh_tw" : "3. 橫幅輪播 ( 圖片, 導航圖示 )",
|
||||||
"en" : "3. AD banner ( image )"
|
"en" : "3. Carousel ( image, navigation )"
|
||||||
},
|
},
|
||||||
"thumbnail" : "thumbnail-block.png"
|
"thumbnail" : "thumbnail-block.png"
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,24 +1,19 @@
|
||||||
<div class="w-annc widget-announcement-11">
|
<div class="w-annc widget-announcement-11">
|
||||||
<h3 class="w-annc__widget-title">
|
<h3 class="w-annc__widget-title">
|
||||||
<span>{{widget-title}}</span>
|
<span>{{widget-title}}</span>
|
||||||
</h3>
|
</h3>
|
||||||
<table class="w-annc__table table">
|
<ul class="w-annc__list" data-level="0" data-list="announcements">
|
||||||
<thead>
|
<li class="w-annc__item row">
|
||||||
<tr>
|
<span class="w-annc__postdate-wrap col-sm-3" date-format="%Y-%m-%d">
|
||||||
<th class="w-annc__th w-annc__th--title">{{title-head}}</th>
|
<i class="fa fa-calendar-o"></i>
|
||||||
<th class="w-annc__th w-annc__th--date">{{date-head}}</th>
|
<span class="w-annc__postdate">{{postdate}}</span>
|
||||||
</tr>
|
</span>
|
||||||
</thead>
|
<h4 class="w-annc__entry-title col-sm-9">
|
||||||
<tbody data-level="0" data-list="announcements">
|
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
|
||||||
<tr>
|
<span class="w-annc__status label {{status-class}}">{{status}}</span>
|
||||||
<td>
|
</span>
|
||||||
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
|
<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||||
<span class="w-annc__status label status {{status-class}}">{{status}}</span>
|
</h4>
|
||||||
</span>
|
</li>
|
||||||
<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
|
</ul>
|
||||||
</td>
|
</div>
|
||||||
<td class="w-annc__postdate" date-format="%Y-%m-%d">{{postdate}}</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
|
|
|
@ -2,26 +2,23 @@
|
||||||
<h3 class="w-annc__widget-title">
|
<h3 class="w-annc__widget-title">
|
||||||
<span>{{widget-title}}</span>
|
<span>{{widget-title}}</span>
|
||||||
</h3>
|
</h3>
|
||||||
<div class="w-annc__inner row">
|
<table class="w-annc__table table">
|
||||||
<div class="w-annc__img-wrap col-md-4 bullseye">
|
<thead>
|
||||||
<img class="w-annc__img" src="{{main_picture}}" alt="{{main_picture_description}}" title="{{main_picture_description}}">
|
<tr>
|
||||||
</div>
|
<th class="w-annc__th w-annc__th--title">{{title-head}}</th>
|
||||||
<ul class="w-annc__list col-md-8" data-level="0" data-list="announcements">
|
<th class="w-annc__th w-annc__th--date">{{date-head}}</th>
|
||||||
<li class="w-annc__item">
|
</tr>
|
||||||
<div class="w-annc__content row">
|
</thead>
|
||||||
<h4 class="w-annc__entry-title col-md-9">
|
<tbody data-level="0" data-list="announcements">
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
|
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
|
||||||
<span class="w-annc__status label {{status-class}}">{{status}}</span>
|
<span class="w-annc__status label status {{status-class}}">{{status}}</span>
|
||||||
</span>
|
</span>
|
||||||
<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
|
<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||||
</h4>
|
</td>
|
||||||
<span class="w-annc__postdate-wrap col-md-3" date-format="%Y-%m-%d">
|
<td class="w-annc__postdate" date-format="%Y-%m-%d">{{postdate}}</td>
|
||||||
<i class="fa fa-calendar-o"></i>
|
</tr>
|
||||||
<span class="w-annc__postdate">{{postdate}}</span>
|
</tbody>
|
||||||
</span>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
|
@ -1,20 +1,25 @@
|
||||||
<div class="i-annc index-announcement-1 {{display}}">
|
<div class="i-annc index-announcement-1 {{display}}">
|
||||||
<h3 class="i-annc__page-title">{{page-title}}</h3>
|
<h3 class="i-annc__page-title">{{page-title}}</h3>
|
||||||
<table class="i-annc__table table table-striped">
|
<table class="i-annc__table table table-striped">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th class="i-annc__th i-annc__th--date">{{date-head}}</th>
|
<th class="i-annc__th i-annc__th--category">{{category-head}}</th>
|
||||||
<th class="i-annc__th i-annc__th--title">{{title-head}}</th>
|
<th class="i-annc__th i-annc__th--title">{{title-head}}</th>
|
||||||
<th class="i-annc__th i-annc__th--title">{{category-head}}</th>
|
<th class="i-annc__th i-annc__th--date">{{date-head}}</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody data-level="0" data-list="announcements">
|
<tbody data-level="0" data-list="announcements">
|
||||||
<tr>
|
<tr>
|
||||||
|
<td class="i-annc__category">{{category}}</td>
|
||||||
|
<td>
|
||||||
|
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
|
||||||
|
<span class="w-annc__status label {{status-class}}">{{status}}</span>
|
||||||
|
</span>
|
||||||
|
<a class="i-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||||
|
</td>
|
||||||
<td><span class="i-annc__postdate" date-format="%Y-%m-%d">{{postdate}}</span></td>
|
<td><span class="i-annc__postdate" date-format="%Y-%m-%d">{{postdate}}</span></td>
|
||||||
<td><a class="i-annc__title" href="{{link_to_show}}">{{title}}</a></td>
|
|
||||||
<td>{{category}}</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
{{pagination_goes_here}}
|
{{pagination_goes_here}}
|
||||||
|
|
|
@ -1,30 +1,27 @@
|
||||||
<div class="i-annc index-announcement-2 {{display}}">
|
<div class="i-annc index-announcement-1 {{display}}">
|
||||||
<h3 class="i-annc__page-title">{{page-title}}</h3>
|
<h3 class="i-annc__page-title">{{page-title}}</h3>
|
||||||
<ul class="i-annc__list" data-level="0" data-list="announcements">
|
<table class="i-annc__table table table-striped">
|
||||||
<li class="i-annc__item row">
|
<thead>
|
||||||
<div class="i-annc__img-wrap col-sm-4">
|
<tr>
|
||||||
<img class="i-annc__img" src="{{img_src}}" alt="{{img_description}}">
|
<th class="i-annc__th i-annc__th--category">{{category-head}}</th>
|
||||||
</div>
|
<th class="i-annc__th i-annc__th--title">{{title-head}}</th>
|
||||||
<div class="i-annc__content-wrap col-sm-8">
|
<th class="i-annc__th i-annc__th--date">{{date-head}}</th>
|
||||||
<div class="i-annc__meta">
|
<th class="i-annc__th i-annc__th--category">{{view-count-head}}</th>
|
||||||
<span class="i-annc__status-wrap" data-list="statuses" data-level="1">
|
</tr>
|
||||||
<span class="i-annc__status label status {{status-class}}">{{status}}</span>
|
</thead>
|
||||||
|
<tbody data-level="0" data-list="announcements">
|
||||||
|
<tr>
|
||||||
|
<td class="i-annc__category">{{category}}</td>
|
||||||
|
<td>
|
||||||
|
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
|
||||||
|
<span class="w-annc__status label {{status-class}}">{{status}}</span>
|
||||||
</span>
|
</span>
|
||||||
<span class="i-annc__postdate-wrap" date-format="%Y-%m-%d">
|
|
||||||
<i class="fa fa-calendar-o"></i>
|
|
||||||
<span class="i-annc__postdate">{{postdate}}</span>
|
|
||||||
</span>
|
|
||||||
<span class="i-annc__category-wrap">
|
|
||||||
<i class="fa fa-tasks"></i>
|
|
||||||
<span class="i-annc__category">{{category}}</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<h4 class="i-annc__entry-title">
|
|
||||||
<a class="i-annc__title" href="{{link_to_show}}">{{title}}</a>
|
<a class="i-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||||
</h4>
|
</td>
|
||||||
<p class="i-annc__subtitle">{{subtitle}}</p>
|
<td><span class="i-annc__postdate" date-format="%Y-%m-%d">{{postdate}}</span></td>
|
||||||
</div>
|
<td class="i-annc__category">{{view_count}}</td>
|
||||||
</li>
|
</tr>
|
||||||
</ul>
|
</tbody>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
{{pagination_goes_here}}
|
{{pagination_goes_here}}
|
|
@ -1,30 +1,25 @@
|
||||||
<div class="i-annc index-announcement-3 {{display}}">
|
<div class="i-annc index-announcement-3 {{display}}">
|
||||||
<h3 class="i-annc__page-title">{{page-title}}</h3>
|
<h3 class="i-annc__page-title">{{page-title}}</h3>
|
||||||
<ul class="i-annc__list" data-level="0" data-list="announcements">
|
<table class="i-annc__table table table-striped">
|
||||||
<li class="i-annc__item row">
|
<thead>
|
||||||
<div class="i-annc__content-wrap col-sm-8">
|
<tr>
|
||||||
<div class="i-annc__meta">
|
<th class="i-annc__th i-annc__th--date">{{date-head}}</th>
|
||||||
<span class="i-annc__status-wrap" data-list="statuses" data-level="1">
|
<th class="i-annc__th i-annc__th--title">{{title-head}}</th>
|
||||||
<span class="i-annc__status label status {{status-class}}">{{status}}</span>
|
<th class="i-annc__th i-annc__th--category">{{category-head}}</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody data-level="0" data-list="announcements">
|
||||||
|
<tr>
|
||||||
|
<td><span class="i-annc__postdate" date-format="%Y-%m-%d">{{postdate}}</span></td>
|
||||||
|
<td>
|
||||||
|
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
|
||||||
|
<span class="w-annc__status label {{status-class}}">{{status}}</span>
|
||||||
</span>
|
</span>
|
||||||
<span class="i-annc__postdate-wrap" date-format="%Y-%m-%d">
|
|
||||||
<i class="fa fa-calendar-o"></i>
|
|
||||||
<span class="i-annc__postdate">{{postdate}}</span>
|
|
||||||
</span>
|
|
||||||
<span class="i-annc__category-wrap">
|
|
||||||
<i class="fa fa-tasks"></i>
|
|
||||||
<span class="i-annc__category">{{category}}</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<h4 class="i-annc__entry-title">
|
|
||||||
<a class="i-annc__title" href="{{link_to_show}}">{{title}}</a>
|
<a class="i-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||||
</h4>
|
</td>
|
||||||
<p class="i-annc__subtitle">{{subtitle}}</p>
|
<td class="i-annc__category">{{category}}</td>
|
||||||
</div>
|
</tr>
|
||||||
<div class="i-annc__img-wrap col-sm-4">
|
</tbody>
|
||||||
<img class="i-annc__img" src="{{img_src}}" alt="{{img_description}}">
|
</table>
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
{{pagination_goes_here}}
|
{{pagination_goes_here}}
|
|
@ -3,26 +3,130 @@
|
||||||
{
|
{
|
||||||
"filename" : "annc_index1",
|
"filename" : "annc_index1",
|
||||||
"name" : {
|
"name" : {
|
||||||
"zh_tw" : "1. 標準表格列表 ( 模組標題, 日期, 標題, 類別 )",
|
"zh_tw" : "1. 標準標題列表-1A ( 模組標題, 類別, 狀態, 標題, 日期 )",
|
||||||
"en" : "1. Standard Table List (widget-title, postdate, title, category)"
|
"en" : "1. Standard Title List-1 (widget-title, category, status, title, postdate)"
|
||||||
},
|
},
|
||||||
"thumbnail" : "annc_index1_thumbs.png"
|
"thumbnail" : "annc_index1_thumbs.png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"filename" : "annc_index2",
|
"filename" : "annc_index2",
|
||||||
"name" : {
|
"name" : {
|
||||||
"zh_tw" : "2. 左圖右文 ( 模組標題, 圖片, 狀態, 日期, 類別, 標題, 副標題 )",
|
"zh_tw" : "2. 標準標題列表-1B ( 模組標題, 類別, 狀態, 標題, 日期, 瀏覽人次 )",
|
||||||
"en" : "2. Balanced Image + Text(Right) (widget-title, image, status, postdate, category, title, subtitle)"
|
"en" : "2. Standard Title List-1B (widget-title, category, status, title, postdate, view-counts)"
|
||||||
},
|
},
|
||||||
"thumbnail" : "annc_index2_thumbs.png"
|
"thumbnail" : "annc_index2_thumbs.png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"filename" : "annc_index3",
|
"filename" : "annc_index3",
|
||||||
"name" : {
|
"name" : {
|
||||||
"zh_tw" : "3. 右圖左文 ( 模組標題, 狀態, 日期, 類別, 標題, 副標題, 圖片 )",
|
"zh_tw" : "3. 標準表格列表-2A ( 模組標題, 日期, 狀態, 標題, 類別 )",
|
||||||
"en" : "3. Balanced Image + Text(left) (widget-title, status, postdate, category, title, subtitle, image)"
|
"en" : "3. Standard Table List-2 (widget-title, postdate, status, title, category)"
|
||||||
},
|
},
|
||||||
"thumbnail" : "annc_index3_thumbs.png"
|
"thumbnail" : "annc_index3_thumbs.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename" : "annc_index4",
|
||||||
|
"name" : {
|
||||||
|
"zh_tw" : "4. 標準表格列表-2B ( 模組標題, 日期, 狀態, 標題, 類別, 瀏覽人次 )",
|
||||||
|
"en" : "4. Standard Table List-2 (widget-title, postdate, status, title, category, view-counts)"
|
||||||
|
},
|
||||||
|
"thumbnail" : "annc_index4_thumbs.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename" : "annc_index5",
|
||||||
|
"name" : {
|
||||||
|
"zh_tw" : "5. 左圖右文 ( 模組標題, 圖片, 狀態, 日期, 類別, 標題, 副標題 )",
|
||||||
|
"en" : "5. Balanced Image + Text(Left) (widget-title, image, status, postdate, category, title, subtitle)"
|
||||||
|
},
|
||||||
|
"thumbnail" : "annc_index5_thumbs.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename" : "annc_index6",
|
||||||
|
"name" : {
|
||||||
|
"zh_tw" : "6. 右圖左文 ( 模組標題, 圖片, 狀態, 日期, 類別, 標題, 副標題 )",
|
||||||
|
"en" : "6. Balanced Image + Text(Right) (widget-title, image, status, postdate, category, title, subtitle)"
|
||||||
|
},
|
||||||
|
"thumbnail" : "annc_index6_thumbs.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename" : "annc_index7",
|
||||||
|
"name" : {
|
||||||
|
"zh_tw" : "7. 三欄圖文 ( 模組標題, 圖片, 狀態, 日期, 類別, 標題, 副標題 )",
|
||||||
|
"en" : "7. 3-Column Standard Image + Text (widget-title, image, status, postdate, category, title, subtitle)"
|
||||||
|
},
|
||||||
|
"thumbnail" : "annc_index7_thumbs.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename" : "annc_index8",
|
||||||
|
"name" : {
|
||||||
|
"zh_tw" : "8. 標準文字列表 ( 模組標題, 日期, 類別, 狀態, 標題, 副標題 )",
|
||||||
|
"en" : "8. Standard Text List (widget-title, postdate, category, status, title, subtitle)"
|
||||||
|
},
|
||||||
|
"thumbnail" : "annc_index8_thumbs.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename" : "annc_index9",
|
||||||
|
"name" : {
|
||||||
|
"zh_tw" : "9. 標準標題列表-1 ( 模組標題, 類別, 狀態, 標題, 日期 )",
|
||||||
|
"en" : "9. Standard Title List-1 (widget-title, category, status, title, postdate)"
|
||||||
|
},
|
||||||
|
"thumbnail" : "annc_index9_thumbs.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename" : "annc_index10",
|
||||||
|
"name" : {
|
||||||
|
"zh_tw" : "10. 標準標題列表-2 ( 模組標題, 日期, 狀態, 標題, 類別 )",
|
||||||
|
"en" : "10. Standard Title List-2 (widget-title, postdate, status, title, category)"
|
||||||
|
},
|
||||||
|
"thumbnail" : "annc_index10_thumbs.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename" : "annc_index11",
|
||||||
|
"name" : {
|
||||||
|
"zh_tw" : "11. 精簡標題列表-1 ( 模組標題, 狀態, 標題, 日期 )",
|
||||||
|
"en" : "11. Simple Title List-1 (widget-title, status, title, postdate)"
|
||||||
|
},
|
||||||
|
"thumbnail" : "annc_index11_thumbs.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename" : "annc_index12",
|
||||||
|
"name" : {
|
||||||
|
"zh_tw" : "12. 精簡標題列表-2 ( 模組標題, 日期, 狀態, 標題 )",
|
||||||
|
"en" : "12. Simple Title List-2 (widget-title, postdate, status, title)"
|
||||||
|
},
|
||||||
|
"thumbnail" : "annc_index12_thumbs.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename" : "annc_index13",
|
||||||
|
"name" : {
|
||||||
|
"zh_tw" : "13. 精簡表格列表-1 ( 模組標題, 狀態, 標題, 日期 )",
|
||||||
|
"en" : "13. Simple Table List (widget-title, status, title, postdate)"
|
||||||
|
},
|
||||||
|
"thumbnail" : "annc_index13_thumbs.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename" : "annc_index14",
|
||||||
|
"name" : {
|
||||||
|
"zh_tw" : "14. 精簡表格列表-2 ( 模組標題, 日期, 狀態, 標題 )",
|
||||||
|
"en" : "14. Simple Table List (widget-title, postdate, status, title)"
|
||||||
|
},
|
||||||
|
"thumbnail" : "annc_index14_thumbs.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename" : "annc_index15",
|
||||||
|
"name" : {
|
||||||
|
"zh_tw" : "15. 精簡表格列表-3 ( 模組標題, 日期, 狀態, 標題, 瀏覽人次 )",
|
||||||
|
"en" : "15. Simple Table List (widget-title, postdate, status, title, view-counts)"
|
||||||
|
},
|
||||||
|
"thumbnail" : "annc_index15_thumbs.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename" : "annc_index16",
|
||||||
|
"name" : {
|
||||||
|
"zh_tw" : "16. 連結 + 附件表格列表 ( 模組標題, 日期, 狀態, 標題 )",
|
||||||
|
"en" : "16. Table List including Links and attachments (widget-title, postdate, status, title, view-counts)"
|
||||||
|
},
|
||||||
|
"thumbnail" : "annc_index16_thumbs.png"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"widgets" : [
|
"widgets" : [
|
||||||
|
@ -101,7 +205,7 @@
|
||||||
{
|
{
|
||||||
"filename" : "annc_widget10",
|
"filename" : "annc_widget10",
|
||||||
"name" : {
|
"name" : {
|
||||||
"zh_tw" : "10. 精簡標題列表 ( 模組標題, 狀態, 標題, 日期 )",
|
"zh_tw" : "10. 精簡標題列表-1 ( 模組標題, 狀態, 標題, 日期 )",
|
||||||
"en" : "10. Simple Title List-1 (widget-title, status, title, postdate)"
|
"en" : "10. Simple Title List-1 (widget-title, status, title, postdate)"
|
||||||
},
|
},
|
||||||
"thumbnail" : "annc_widget10_thumbs.png"
|
"thumbnail" : "annc_widget10_thumbs.png"
|
||||||
|
@ -109,18 +213,34 @@
|
||||||
{
|
{
|
||||||
"filename" : "annc_widget11",
|
"filename" : "annc_widget11",
|
||||||
"name" : {
|
"name" : {
|
||||||
"zh_tw" : "11. 精簡表格列表 ( 模組標題, 狀態, 標題, 日期 )",
|
"zh_tw" : "11. 精簡標題列表-2 ( 模組標題, 日期, 狀態, 標題 )",
|
||||||
"en" : "11. Simple Table List (widget-title, status, title, postdate)"
|
"en" : "11. Simple Title List-2 (widget-title, postdate, status, title)"
|
||||||
},
|
},
|
||||||
"thumbnail" : "annc_widget11_thumbs.png"
|
"thumbnail" : "annc_widget11_thumbs.png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"filename" : "annc_widget12",
|
"filename" : "annc_widget12",
|
||||||
"name" : {
|
"name" : {
|
||||||
"zh_tw" : "12. 一圖 + 標題列表 ( 模組標題, 圖片, 狀態, 標題, 日期 )",
|
"zh_tw" : "12. 精簡表格列表-1 ( 模組標題, 狀態, 標題, 日期 )",
|
||||||
"en" : "12. 1 Image + Title List (widget-title, status, title, postdate)"
|
"en" : "12. Simple Table List (widget-title, status, title, postdate)"
|
||||||
},
|
},
|
||||||
"thumbnail" : "annc_widget12_thumbs.png"
|
"thumbnail" : "annc_widget12_thumbs.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename" : "annc_widget13",
|
||||||
|
"name" : {
|
||||||
|
"zh_tw" : "13. 精簡表格列表-2 ( 模組標題, 日期, 狀態, 標題 )",
|
||||||
|
"en" : "13. Simple Table List (widget-title, postdate, status, title)"
|
||||||
|
},
|
||||||
|
"thumbnail" : "annc_widget13_thumbs.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename" : "annc_widget14",
|
||||||
|
"name" : {
|
||||||
|
"zh_tw" : "14. 一圖 + 標題列表 ( 模組標題, 圖片, 狀態, 標題, 日期 )",
|
||||||
|
"en" : "14. 1 Image + Title List (widget-title, status, title, postdate)"
|
||||||
|
},
|
||||||
|
"thumbnail" : "annc_widget14_thumbs.png"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
Before Width: | Height: | Size: 2.2 KiB |
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.1 KiB |
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.2 KiB |
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.1 KiB |
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.0 KiB |
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.1 KiB |
|
@ -17,4 +17,3 @@
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<%= javascript_include_tag "plugin/jquery.cycle2.carousel.min"%>
|
|
|
@ -1,5 +1,4 @@
|
||||||
<div class="index-member index1">
|
<!-- <div class="index-member-group" data-list="roles" data-level="0">
|
||||||
<div class="index-member-group" data-list="roles" data-level="0">
|
|
||||||
<div class="index-member-group-item">
|
<div class="index-member-group-item">
|
||||||
<div class="index-member-status" data-level="1" data-list="status-list">
|
<div class="index-member-status" data-level="1" data-list="status-list">
|
||||||
<h3 class="index-title">
|
<h3 class="index-title">
|
||||||
|
@ -26,6 +25,29 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
<div class="i-member index-member-1">
|
||||||
|
<div class="i-member-group" data-list="roles" data-level="0">
|
||||||
|
<div class="index-member-status" data-level="1" data-list="status-list">
|
||||||
|
<h3 class="i-member__status-title">{{status-title}}</h3>
|
||||||
|
<div class="index-member-list" >
|
||||||
|
<table class="i-member__table table table-striped">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="i-member__th i-member__th--date {{title_class}}">{{date-head}}</th>
|
||||||
|
<th class="i-member__th i-member__th--title">{{title-head}}</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody data-level="2" data-list="members">
|
||||||
|
<tr data-list="profile_data" data-level="3">
|
||||||
|
<th class="">{{title}}</th>
|
||||||
|
<td class="{{value_class}}">{{value}}</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{pagination_goes_here}}
|
{{pagination_goes_here}}
|
|
@ -11,7 +11,8 @@
|
||||||
<%= javascript_include_tag "plugin/modernizr"%>
|
<%= javascript_include_tag "plugin/modernizr"%>
|
||||||
<%= javascript_include_tag "plugin/jquery-bullseye-min"%>
|
<%= javascript_include_tag "plugin/jquery-bullseye-min"%>
|
||||||
<%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.min.js"%>
|
<%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.min.js"%>
|
||||||
<%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.video.min.js"%>
|
<%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.carousel.min.js"%>
|
||||||
|
<%= javascript_include_tag "plugin/jquery.cycle2.video.min.js"%>
|
||||||
<%= javascript_include_tag "app"%>
|
<%= javascript_include_tag "app"%>
|
||||||
<%= javascript_include_tag "#{@dataApi}" if @dataApi != nil%>
|
<%= javascript_include_tag "#{@dataApi}" if @dataApi != nil%>
|
||||||
<%= render_google_analytics %>
|
<%= render_google_analytics %>
|
||||||
|
|
|
@ -30,6 +30,18 @@
|
||||||
<% date = DateTime.parse(post.created_at.to_s).strftime("%d %B") %>
|
<% date = DateTime.parse(post.created_at.to_s).strftime("%d %B") %>
|
||||||
<i class="group-page-post-postdate-icon icon-time"></i> <%= date %>
|
<i class="group-page-post-postdate-icon icon-time"></i> <%= date %>
|
||||||
</span>
|
</span>
|
||||||
|
<div class="group-page-seen-by tool-tip-parent">
|
||||||
|
<em class="group-page-seen-by-lead">Seen by: </em>
|
||||||
|
<span class="group-page-seen-by-name">Harry</span>
|
||||||
|
<span class="group-page-seen-by-name">Ika</span>
|
||||||
|
<span class="group-page-seen-by-name">Joshua</span>
|
||||||
|
<span class="group-page-seen-by-name">Mason</span>
|
||||||
|
<span class="group-page-seen-by-name">Tina</span>
|
||||||
|
<span class="group-page-seen-by-name">Shelley</span>
|
||||||
|
<span class="group-page-seen-by-name">Anna</span>
|
||||||
|
<span class="group-page-seen-by-name">Poke</span>
|
||||||
|
<span class="group-page-seen-by-name">Moses</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -5,32 +5,38 @@
|
||||||
<%= javascript_include_tag "group.js" %>
|
<%= javascript_include_tag "group.js" %>
|
||||||
<% end -%>
|
<% end -%>
|
||||||
<div class="group-page">
|
<div class="group-page">
|
||||||
<div class="group-page-banner-image-wrap">
|
<div class="group-page-banner-wrap">
|
||||||
<img class="group-page-banner-image" src="<%= @group.image.url %>" alt="<%= @group.title %>">
|
<div class="group-page-banner-image-wrap">
|
||||||
<ul class="group-page-view-switch btn-group">
|
<img class="group-page-banner-image" src="<%= @group.image.url %>" alt="<%= @group.title %>">
|
||||||
<li class="group-page-feed-view btn btn-success"><a href="#" title="Feed" class="active"><i class="icon-list-ul"></i></a></li>
|
<ul class="group-page-view-switch button-group">
|
||||||
<li class="group-page-grid-view btn"><a href="#" title="Grid"><i class="icon-th"></i></a></li>
|
<li class="group-page-feed-view button button-group-common button-default active">
|
||||||
</ul>
|
<a class="group-page-switch-btn" href="#" title="Feed"><i class="icon-list-ul"></i></a>
|
||||||
</div>
|
</li>
|
||||||
<div class="group-page-bar">
|
<li class="group-page-grid-view button button-group-common button-default">
|
||||||
<h2 class="group-page-title"><%= @group.title %></h2>
|
<a class="group-page-switch-btn" href="#" title="Grid"><i class="icon-th"></i></a>
|
||||||
<% if user_can_write? %>
|
</li>
|
||||||
<a class="group-page-new-post btn btn-large btn-primary" href="<%= admin_group_newpost_path(@group) %>"><i class="icon-plus"></i> New Post</a>
|
</ul>
|
||||||
<% end %>
|
</div>
|
||||||
</div>
|
<div class="group-page-bar">
|
||||||
|
<h2 class="group-page-title"><%= @group.title %></h2>
|
||||||
|
<% if user_can_write? %>
|
||||||
|
<a class="group-page-new-post button button-primary" href="<%= admin_group_newpost_path(@group) %>"><i class="icon-plus"></i> New Post</a>
|
||||||
|
<% end %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="group-page-setion">
|
<div class="group-page-section">
|
||||||
<div class="group-page-detail">
|
<div class="group-page-detail">
|
||||||
<span class="gorup-page-info-wrap" id="group_info_button">
|
<span class="gorup-page-info-wrap button button-default" id="group_info_button">
|
||||||
<i class="group-page-info-icon icon-info-sign muted"></i> <span class="muted">Info</span>
|
<i class="group-page-info-icon icon-info-sign"></i> <span>Info</span>
|
||||||
</span>
|
</span>
|
||||||
<div class="group-page-description-wrap" id="group_info_area" style="display:none;">
|
<div class="group-page-description-wrap" id="group_info_area" style="display:none;">
|
||||||
<% if @group.privacy == "closed" %>
|
<% if @group.privacy == "closed" %>
|
||||||
<span class="group-page-status-wrap close-eye">
|
<span class="group-page-status-wrap close-eye button button-activated">
|
||||||
<i class="group-page-status icon-eye-open"></i> Closed
|
<i class="group-page-status icon-eye-open"></i> Closed
|
||||||
</span>
|
</span>
|
||||||
<% else %>
|
<% else %>
|
||||||
<span class="group-page-status-wrap open-eye">
|
<span class="group-page-status-wrap open-eye button button-activated">
|
||||||
<i class="group-page-status icon-eye-open"></i> Open
|
<i class="group-page-status icon-eye-open"></i> Open
|
||||||
</span>
|
</span>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
@ -44,17 +50,6 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
(function($) {
|
(function($) {
|
||||||
$( document ).ready( function() {
|
|
||||||
|
|
||||||
var doc = document,
|
|
||||||
viewSwitch = doc.querySelector( ".group-page-view-switch" ),
|
|
||||||
bar = doc.querySelector( ".group-page-bar" );
|
|
||||||
|
|
||||||
if( $( ".group-page" ).hasClass( "scroll" ) ) {
|
|
||||||
$( ".group-page-new-post" ).removeClass( "btn-large" );
|
|
||||||
bar.appendChild( viewSwitch );
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
var group_info_area = $("#group_info_area"),
|
var group_info_area = $("#group_info_area"),
|
||||||
orbit_bar = $("#orbit-bar");
|
orbit_bar = $("#orbit-bar");
|
||||||
|
@ -69,7 +64,13 @@
|
||||||
})
|
})
|
||||||
|
|
||||||
$(document).on("scroll",function(){
|
$(document).on("scroll",function(){
|
||||||
|
|
||||||
orbit_bar.slideUp();
|
orbit_bar.slideUp();
|
||||||
|
|
||||||
|
if ( window.pageYOffset === 0 ) {
|
||||||
|
orbit_bar.slideDown( 100 );
|
||||||
|
}
|
||||||
|
|
||||||
})
|
})
|
||||||
|
|
||||||
}(jQuery));
|
}(jQuery));
|
||||||
|
|
|
@ -5,6 +5,8 @@
|
||||||
<%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.min.js" %>
|
<%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.min.js" %>
|
||||||
<%= javascript_include_tag "group" %>
|
<%= javascript_include_tag "group" %>
|
||||||
<%= javascript_include_tag "lib/jquery.form" %>
|
<%= javascript_include_tag "lib/jquery.form" %>
|
||||||
|
<%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.center.min.js" %>
|
||||||
|
<%= javascript_include_tag "group.js" %>
|
||||||
<% end -%>
|
<% end -%>
|
||||||
|
|
||||||
<article class="group-post">
|
<article class="group-post">
|
||||||
|
@ -40,13 +42,15 @@
|
||||||
data-cycle-next=".group-post-cycle-next"
|
data-cycle-next=".group-post-cycle-next"
|
||||||
data-cycle-fx="fade"
|
data-cycle-fx="fade"
|
||||||
data-cycle-log="false"
|
data-cycle-log="false"
|
||||||
|
data-cycle-center-horz=true
|
||||||
|
data-cycle-center-vert=true
|
||||||
>
|
>
|
||||||
<% @post.group_post_images.each do |gpi| %>
|
<% @post.group_post_images.each do |gpi| %>
|
||||||
<li class="group-post-image-item"><img class="group-post-banner-image" src="<%= gpi.image.url %>" alt="<%= @post.title %>"></li>
|
<li class="group-post-image-item"><img class="group-post-banner-image" src="<%= gpi.image.url %>" alt="<%= @post.title %>"></li>
|
||||||
<% end %>
|
<% end %>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="group-post-cycle-prev cycle-nav"><i class="icon-chevron-left"></i></div>
|
<div class="group-post-cycle-prev cycle-nav"><i class="group-post-cycle-nav-icon icon-chevron-left"></i></div>
|
||||||
<div class="group-post-cycle-next cycle-nav"><i class="icon-chevron-right"></i></div>
|
<div class="group-post-cycle-next cycle-nav"><i class="group-post-cycle-nav-icon icon-chevron-right"></i></div>
|
||||||
</section>
|
</section>
|
||||||
<section class="group-post-content">
|
<section class="group-post-content">
|
||||||
<%= @post.content.html_safe %>
|
<%= @post.content.html_safe %>
|
||||||
|
@ -117,4 +121,4 @@
|
||||||
$("#comment-form").resetForm();
|
$("#comment-form").resetForm();
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,14 +1,14 @@
|
||||||
development:
|
development:
|
||||||
sessions:
|
sessions:
|
||||||
default:
|
default:
|
||||||
database: orbit_4_5
|
database: orbit_4_5_joshua
|
||||||
hosts:
|
hosts:
|
||||||
- localhost:27017
|
- localhost:27017
|
||||||
|
|
||||||
test:
|
test:
|
||||||
sessions:
|
sessions:
|
||||||
default:
|
default:
|
||||||
database: orbit_4_5
|
database: orbit_4_5_joshua
|
||||||
hosts:
|
hosts:
|
||||||
- localhost:27017
|
- localhost:27017
|
||||||
options:
|
options:
|
||||||
|
@ -21,6 +21,6 @@ production:
|
||||||
default:
|
default:
|
||||||
# username:
|
# username:
|
||||||
# password:
|
# password:
|
||||||
database: orbit_4_5
|
database: orbit_4_5_joshua
|
||||||
hosts:
|
hosts:
|
||||||
- localhost:27017
|
- localhost:27017
|
||||||
|
|