forked from saurabh/orbit4-5
merged
This commit is contained in:
rulingcom
parent
1cfd6b80f9
commit
5aac9b297d
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.1 KiB |
|
|
@ -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();
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
body {
|
||||
}
|
||||
|
|
@ -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();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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/variables";
|
||||
@import "base/mixins";
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import url("http://fonts.googleapis.com/css?family=Droid+Sans:400,700");
|
||||
|
||||
// Base
|
||||
@import "base/pagination";
|
||||
@import "base/orbitbar-override";
|
||||
|
|
|
|||
|
|
@ -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="<li><a href='#'></a></li>"
|
||||
data-pager-active-class="active-slide"
|
||||
>
|
||||
|
|
@ -15,11 +15,11 @@
|
|||
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 class="w-ad-banner__caption"></div>
|
||||
<ul class="w-ad-banner__pager"></ul>
|
||||
<ul class="w-ad-banner__pager-1 banner-pager"></ul>
|
||||
</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"
|
||||
data-list="images"
|
||||
data-level="0"
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
data-cycle-log="false"
|
||||
data-overlay=".w-ad-banner__caption"
|
||||
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-active-class="active-slide"
|
||||
data-cycle-youtube="true"
|
||||
|
|
@ -15,24 +15,50 @@
|
|||
|
||||
{{html}}
|
||||
</div>
|
||||
<ul class="w-ad-banner__pager"></ul>
|
||||
<ul class="w-ad-banner__pager-2 banner-pager"></ul>
|
||||
</div>
|
||||
<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(){
|
||||
$("*[data-youtube-id]").each(function(){
|
||||
var obj = $(this).find("embed");
|
||||
obj.attr("id",$(this).data("youtube-id"));
|
||||
$("*[data-yt-binded=0]").each(function(){
|
||||
$(this).attr("data-yt-binded","1");
|
||||
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);
|
||||
y.addEventListener("onStateChange", "onytplayerStateChange");
|
||||
|
||||
if (typeof onYouTubeIframeAPIReady !== 'function'){
|
||||
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){
|
||||
$(".cycle-slideshow").cycle("resume");
|
||||
}else if(newState == 1){
|
||||
$(".cycle-slideshow").cycle("pause");
|
||||
|
||||
function onPlayerStateChange(event){
|
||||
var iframe = $(event.target.getIframe()),
|
||||
cyclediv = iframe.parents("div.cycle-slideshow");
|
||||
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>
|
||||
|
|
@ -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="<li><a href='#'></a></li>"
|
||||
data-pager-active-class="active-slide"
|
||||
>
|
||||
<div class="w-ad-banner__slide {{class}}"
|
||||
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>
|
||||
<ul class="w-ad-banner__pager"></ul>
|
||||
<ul class="w-ad-banner__pager-3 banner-pager"></ul>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,24 +1,19 @@
|
|||
<div class="w-annc widget-announcement-11">
|
||||
<div class="w-annc widget-announcement-11">
|
||||
<h3 class="w-annc__widget-title">
|
||||
<span>{{widget-title}}</span>
|
||||
</h3>
|
||||
<table class="w-annc__table table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-annc__th w-annc__th--title">{{title-head}}</th>
|
||||
<th class="w-annc__th w-annc__th--date">{{date-head}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<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 label status {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||
</td>
|
||||
<td class="w-annc__postdate" date-format="%Y-%m-%d">{{postdate}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<ul class="w-annc__list" data-level="0" data-list="announcements">
|
||||
<li class="w-annc__item row">
|
||||
<span class="w-annc__postdate-wrap col-sm-3" date-format="%Y-%m-%d">
|
||||
<i class="fa fa-calendar-o"></i>
|
||||
<span class="w-annc__postdate">{{postdate}}</span>
|
||||
</span>
|
||||
<h4 class="w-annc__entry-title col-sm-9">
|
||||
<span class="w-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="w-annc__status label {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||
</h4>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,26 +2,23 @@
|
|||
<h3 class="w-annc__widget-title">
|
||||
<span>{{widget-title}}</span>
|
||||
</h3>
|
||||
<div class="w-annc__inner row">
|
||||
<div class="w-annc__img-wrap col-md-4 bullseye">
|
||||
<img class="w-annc__img" src="{{main_picture}}" alt="{{main_picture_description}}" title="{{main_picture_description}}">
|
||||
</div>
|
||||
<ul class="w-annc__list col-md-8" data-level="0" data-list="announcements">
|
||||
<li class="w-annc__item">
|
||||
<div class="w-annc__content row">
|
||||
<h4 class="w-annc__entry-title col-md-9">
|
||||
<table class="w-annc__table table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-annc__th w-annc__th--title">{{title-head}}</th>
|
||||
<th class="w-annc__th w-annc__th--date">{{date-head}}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<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 label {{status-class}}">{{status}}</span>
|
||||
<span class="w-annc__status label status {{status-class}}">{{status}}</span>
|
||||
</span>
|
||||
<a class="w-annc__title" href="{{link_to_show}}">{{title}}</a>
|
||||
</h4>
|
||||
<span class="w-annc__postdate-wrap col-md-3" date-format="%Y-%m-%d">
|
||||
<i class="fa fa-calendar-o"></i>
|
||||
<span class="w-annc__postdate">{{postdate}}</span>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</td>
|
||||
<td class="w-annc__postdate" date-format="%Y-%m-%d">{{postdate}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</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>
|
||||
<table class="i-annc__table table table-striped">
|
||||
<table class="i-annc__table table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="i-annc__th i-annc__th--date">{{date-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--category">{{category-head}}</th>
|
||||
<th class="i-annc__th i-annc__th--title">{{title-head}}</th>
|
||||
<th class="i-annc__th i-annc__th--date">{{date-head}}</th>
|
||||
</tr>
|
||||
</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>
|
||||
<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><a class="i-annc__title" href="{{link_to_show}}">{{title}}</a></td>
|
||||
<td>{{category}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</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>
|
||||
<ul class="i-annc__list" data-level="0" data-list="announcements">
|
||||
<li class="i-annc__item row">
|
||||
<div class="i-annc__img-wrap col-sm-4">
|
||||
<img class="i-annc__img" src="{{img_src}}" alt="{{img_description}}">
|
||||
</div>
|
||||
<div class="i-annc__content-wrap col-sm-8">
|
||||
<div class="i-annc__meta">
|
||||
<span class="i-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="i-annc__status label status {{status-class}}">{{status}}</span>
|
||||
<table class="i-annc__table table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<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--date">{{date-head}}</th>
|
||||
<th class="i-annc__th i-annc__th--category">{{view-count-head}}</th>
|
||||
</tr>
|
||||
</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 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>
|
||||
</h4>
|
||||
<p class="i-annc__subtitle">{{subtitle}}</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td><span class="i-annc__postdate" date-format="%Y-%m-%d">{{postdate}}</span></td>
|
||||
<td class="i-annc__category">{{view_count}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</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>
|
||||
<ul class="i-annc__list" data-level="0" data-list="announcements">
|
||||
<li class="i-annc__item row">
|
||||
<div class="i-annc__content-wrap col-sm-8">
|
||||
<div class="i-annc__meta">
|
||||
<span class="i-annc__status-wrap" data-list="statuses" data-level="1">
|
||||
<span class="i-annc__status label status {{status-class}}">{{status}}</span>
|
||||
<table class="i-annc__table table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="i-annc__th i-annc__th--date">{{date-head}}</th>
|
||||
<th class="i-annc__th i-annc__th--title">{{title-head}}</th>
|
||||
<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 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>
|
||||
</h4>
|
||||
<p class="i-annc__subtitle">{{subtitle}}</p>
|
||||
</div>
|
||||
<div class="i-annc__img-wrap col-sm-4">
|
||||
<img class="i-annc__img" src="{{img_src}}" alt="{{img_description}}">
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td class="i-annc__category">{{category}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{{pagination_goes_here}}
|
||||
|
|
@ -3,26 +3,130 @@
|
|||
{
|
||||
"filename" : "annc_index1",
|
||||
"name" : {
|
||||
"zh_tw" : "1. 標準表格列表 ( 模組標題, 日期, 標題, 類別 )",
|
||||
"en" : "1. Standard Table List (widget-title, postdate, title, category)"
|
||||
"zh_tw" : "1. 標準標題列表-1A ( 模組標題, 類別, 狀態, 標題, 日期 )",
|
||||
"en" : "1. Standard Title List-1 (widget-title, category, status, title, postdate)"
|
||||
},
|
||||
"thumbnail" : "annc_index1_thumbs.png"
|
||||
},
|
||||
{
|
||||
"filename" : "annc_index2",
|
||||
"name" : {
|
||||
"zh_tw" : "2. 左圖右文 ( 模組標題, 圖片, 狀態, 日期, 類別, 標題, 副標題 )",
|
||||
"en" : "2. Balanced Image + Text(Right) (widget-title, image, status, postdate, category, title, subtitle)"
|
||||
"zh_tw" : "2. 標準標題列表-1B ( 模組標題, 類別, 狀態, 標題, 日期, 瀏覽人次 )",
|
||||
"en" : "2. Standard Title List-1B (widget-title, category, status, title, postdate, view-counts)"
|
||||
},
|
||||
"thumbnail" : "annc_index2_thumbs.png"
|
||||
},
|
||||
{
|
||||
"filename" : "annc_index3",
|
||||
"name" : {
|
||||
"zh_tw" : "3. 右圖左文 ( 模組標題, 狀態, 日期, 類別, 標題, 副標題, 圖片 )",
|
||||
"en" : "3. Balanced Image + Text(left) (widget-title, status, postdate, category, title, subtitle, image)"
|
||||
"zh_tw" : "3. 標準表格列表-2A ( 模組標題, 日期, 狀態, 標題, 類別 )",
|
||||
"en" : "3. Standard Table List-2 (widget-title, postdate, status, title, category)"
|
||||
},
|
||||
"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" : [
|
||||
|
|
@ -101,7 +205,7 @@
|
|||
{
|
||||
"filename" : "annc_widget10",
|
||||
"name" : {
|
||||
"zh_tw" : "10. 精簡標題列表 ( 模組標題, 狀態, 標題, 日期 )",
|
||||
"zh_tw" : "10. 精簡標題列表-1 ( 模組標題, 狀態, 標題, 日期 )",
|
||||
"en" : "10. Simple Title List-1 (widget-title, status, title, postdate)"
|
||||
},
|
||||
"thumbnail" : "annc_widget10_thumbs.png"
|
||||
|
|
@ -109,18 +213,34 @@
|
|||
{
|
||||
"filename" : "annc_widget11",
|
||||
"name" : {
|
||||
"zh_tw" : "11. 精簡表格列表 ( 模組標題, 狀態, 標題, 日期 )",
|
||||
"en" : "11. Simple Table List (widget-title, status, title, postdate)"
|
||||
"zh_tw" : "11. 精簡標題列表-2 ( 模組標題, 日期, 狀態, 標題 )",
|
||||
"en" : "11. Simple Title List-2 (widget-title, postdate, status, title)"
|
||||
},
|
||||
"thumbnail" : "annc_widget11_thumbs.png"
|
||||
},
|
||||
{
|
||||
"filename" : "annc_widget12",
|
||||
"name" : {
|
||||
"zh_tw" : "12. 一圖 + 標題列表 ( 模組標題, 圖片, 狀態, 標題, 日期 )",
|
||||
"en" : "12. 1 Image + Title List (widget-title, status, title, postdate)"
|
||||
"zh_tw" : "12. 精簡表格列表-1 ( 模組標題, 狀態, 標題, 日期 )",
|
||||
"en" : "12. Simple Table List (widget-title, status, title, postdate)"
|
||||
},
|
||||
"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"
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.1 KiB |
|
|
@ -17,4 +17,3 @@
|
|||
</a>
|
||||
</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-status" data-level="1" data-list="status-list">
|
||||
<h3 class="index-title">
|
||||
|
|
@ -26,6 +25,29 @@
|
|||
</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>
|
||||
{{pagination_goes_here}}
|
||||
|
|
@ -11,7 +11,8 @@
|
|||
<%= javascript_include_tag "plugin/modernizr"%>
|
||||
<%= 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.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 "#{@dataApi}" if @dataApi != nil%>
|
||||
<%= render_google_analytics %>
|
||||
|
|
|
|||
|
|
@ -30,6 +30,18 @@
|
|||
<% date = DateTime.parse(post.created_at.to_s).strftime("%d %B") %>
|
||||
<i class="group-page-post-postdate-icon icon-time"></i> <%= date %>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -5,32 +5,38 @@
|
|||
<%= javascript_include_tag "group.js" %>
|
||||
<% end -%>
|
||||
<div class="group-page">
|
||||
<div class="group-page-banner-image-wrap">
|
||||
<img class="group-page-banner-image" src="<%= @group.image.url %>" alt="<%= @group.title %>">
|
||||
<ul class="group-page-view-switch btn-group">
|
||||
<li class="group-page-feed-view btn btn-success"><a href="#" title="Feed" class="active"><i class="icon-list-ul"></i></a></li>
|
||||
<li class="group-page-grid-view btn"><a href="#" title="Grid"><i class="icon-th"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="group-page-bar">
|
||||
<h2 class="group-page-title"><%= @group.title %></h2>
|
||||
<% if user_can_write? %>
|
||||
<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>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="group-page-banner-wrap">
|
||||
<div class="group-page-banner-image-wrap">
|
||||
<img class="group-page-banner-image" src="<%= @group.image.url %>" alt="<%= @group.title %>">
|
||||
<ul class="group-page-view-switch button-group">
|
||||
<li class="group-page-feed-view button button-group-common button-default active">
|
||||
<a class="group-page-switch-btn" href="#" title="Feed"><i class="icon-list-ul"></i></a>
|
||||
</li>
|
||||
<li class="group-page-grid-view button button-group-common button-default">
|
||||
<a class="group-page-switch-btn" href="#" title="Grid"><i class="icon-th"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</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">
|
||||
<span class="gorup-page-info-wrap" id="group_info_button">
|
||||
<i class="group-page-info-icon icon-info-sign muted"></i> <span class="muted">Info</span>
|
||||
<span class="gorup-page-info-wrap button button-default" id="group_info_button">
|
||||
<i class="group-page-info-icon icon-info-sign"></i> <span>Info</span>
|
||||
</span>
|
||||
<div class="group-page-description-wrap" id="group_info_area" style="display:none;">
|
||||
<% 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
|
||||
</span>
|
||||
<% 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
|
||||
</span>
|
||||
<% end %>
|
||||
|
|
@ -44,17 +50,6 @@
|
|||
|
||||
<script>
|
||||
(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"),
|
||||
orbit_bar = $("#orbit-bar");
|
||||
|
|
@ -69,7 +64,13 @@
|
|||
})
|
||||
|
||||
$(document).on("scroll",function(){
|
||||
|
||||
orbit_bar.slideUp();
|
||||
|
||||
if ( window.pageYOffset === 0 ) {
|
||||
orbit_bar.slideDown( 100 );
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
}(jQuery));
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@
|
|||
<%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.min.js" %>
|
||||
<%= javascript_include_tag "group" %>
|
||||
<%= 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 -%>
|
||||
|
||||
<article class="group-post">
|
||||
|
|
@ -40,13 +42,15 @@
|
|||
data-cycle-next=".group-post-cycle-next"
|
||||
data-cycle-fx="fade"
|
||||
data-cycle-log="false"
|
||||
data-cycle-center-horz=true
|
||||
data-cycle-center-vert=true
|
||||
>
|
||||
<% @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>
|
||||
<% end %>
|
||||
</ul>
|
||||
<div class="group-post-cycle-prev cycle-nav"><i class="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-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="group-post-cycle-nav-icon icon-chevron-right"></i></div>
|
||||
</section>
|
||||
<section class="group-post-content">
|
||||
<%= @post.content.html_safe %>
|
||||
|
|
@ -117,4 +121,4 @@
|
|||
$("#comment-form").resetForm();
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
development:
|
||||
sessions:
|
||||
default:
|
||||
database: orbit_4_5
|
||||
database: orbit_4_5_joshua
|
||||
hosts:
|
||||
- localhost:27017
|
||||
|
||||
test:
|
||||
sessions:
|
||||
default:
|
||||
database: orbit_4_5
|
||||
database: orbit_4_5_joshua
|
||||
hosts:
|
||||
- localhost:27017
|
||||
options:
|
||||
|
|
@ -21,6 +21,6 @@ production:
|
|||
default:
|
||||
# username:
|
||||
# password:
|
||||
database: orbit_4_5
|
||||
database: orbit_4_5_joshua
|
||||
hosts:
|
||||
- localhost:27017
|
||||
|
|
|
|||
Loading…
Reference in New Issue