This commit is contained in:
rulingcom 2015-04-14 15:31:41 +08:00
parent 1cfd6b80f9
commit 5aac9b297d
37 changed files with 1542 additions and 993 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -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();
}); });

View File

@ -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%;
} }

View File

@ -1,2 +0,0 @@
body {
}

View File

@ -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();
} }

View File

@ -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;
}

View File

@ -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;

View File

@ -1,4 +0,0 @@
@import "bootstrap/mixins";
@import "bootstrap/variables";
@import "base/mixins";
@import "base/variables";

View File

@ -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";

View File

@ -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;
} }

View File

@ -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;

View File

@ -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";

View File

@ -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>

View File

@ -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"

View File

@ -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>

View File

@ -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>

View File

@ -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"
}, },

View File

@ -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>

View File

@ -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>

View File

@ -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}}

View File

@ -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}}

View File

@ -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}}

View File

@ -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"
} }
] ]
} }

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

View File

@ -17,4 +17,3 @@
</a> </a>
</div> </div>
</div> </div>
<%= javascript_include_tag "plugin/jquery.cycle2.carousel.min"%>

View File

@ -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}}

View File

@ -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 %>

View File

@ -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>

View File

@ -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));

View File

@ -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>

View File

@ -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