forked from saurabh/orbit4-5
group mods by joshua
This commit is contained in:
rulingcom
parent
be61b4488e
commit
60bb2cac1e
|
|
@ -0,0 +1,78 @@
|
|||
(function() {
|
||||
"use strict";
|
||||
|
||||
var doc = document;
|
||||
|
||||
var group = {
|
||||
// Detect and change the top position of the cycle navs
|
||||
cycleFix: function() {
|
||||
if( doc.querySelectorAll( ".group-post-banner-image").length >= 1 ) {
|
||||
var imgs = doc.querySelectorAll( ".group-post-banner-image" ),
|
||||
imgHeight = imgs[ 0 ].clientHeight,
|
||||
cycleNav = doc.querySelectorAll( ".cycle-nav" ),
|
||||
cycleNavHeight = cycleNav[ 0 ].clientHeight,
|
||||
len = cycleNav.length,
|
||||
i = -1;
|
||||
|
||||
// Hide the navs when there's noly one slide
|
||||
if( imgs.length <= 1 ) {
|
||||
for( i = 0; i < len; i++ ) {
|
||||
cycleNav[ i ].classList.add( "hide" );
|
||||
}
|
||||
} else {
|
||||
// Change nav top positions which are calculating by JavaScript
|
||||
for ( i = 0; i < len; i++ ) {
|
||||
cycleNav[ i ].style.top = ( ( imgHeight / 2 ) - ( cycleNavHeight / 2 ) ) + "px";
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// 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,
|
||||
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;
|
||||
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";
|
||||
Array.prototype.slice.call( names ).forEach( function( el ) {
|
||||
frag.appendChild( el );
|
||||
});
|
||||
|
||||
// Append the final result to DOM
|
||||
wrap.appendChild( frag );
|
||||
container.appendChild( wrap );
|
||||
}
|
||||
},
|
||||
scrollEffect: function() {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
// When DOM is completely loaded
|
||||
document.addEventListener( "DOMContentLoaded", function( event ) {
|
||||
group.cycleFix();
|
||||
group.createToolTip();
|
||||
group.scrollEffect();
|
||||
});
|
||||
|
||||
})();
|
||||
|
|
@ -1,249 +0,0 @@
|
|||
@charset "utf-8";
|
||||
body {
|
||||
background: #f3f3f3;
|
||||
}
|
||||
|
||||
#main-wrap {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.group-page {}
|
||||
|
||||
.group-page-banner-image-wrap {
|
||||
position: relative;
|
||||
max-height: 280px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.group-page-view-switch {
|
||||
position: absolute;
|
||||
right: 2rem;
|
||||
top: 2rem;
|
||||
}
|
||||
|
||||
.group-page-banner-image {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.group-page-bar {
|
||||
overflow: hidden;
|
||||
background: #171717;
|
||||
padding: 20px 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.group-page-title {
|
||||
padding: 6px 0;
|
||||
color: #fff;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.group-page-setion {
|
||||
padding: 30px 2rem;
|
||||
overflow: hidden;
|
||||
max-width: 1350px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.gorup-page-info-wrap {
|
||||
display: block;
|
||||
font-size: .9rem;
|
||||
float: right;
|
||||
padding: 5px .5rem;
|
||||
border: 2px solid #cdcdcd;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.group-page-description-wrap {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.gorup-page-info-wrap {
|
||||
text-align: right;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.group-page-status-wrap {
|
||||
float: right;
|
||||
font-size: 0.75rem;
|
||||
color: #fff;
|
||||
background: #1d9e20;
|
||||
padding: 2px .4rem;
|
||||
border-radius: .2rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.group-page-status-wrap.close-eye{
|
||||
background: #c71932;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.group-page-description-wrap {
|
||||
padding: 16px 1.2rem 16px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: inset 0 0 8px #aaa;
|
||||
border-radius: .2rem;
|
||||
}
|
||||
|
||||
.group-page-description {
|
||||
clear: both;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.group-page-post {
|
||||
clear: both;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
margin-bottom: 40px;
|
||||
background: #fff;
|
||||
padding: 28px 1.5rem;
|
||||
border-radius: .2rem;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.group-page-post-link{
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.group-page-post:hover {
|
||||
box-shadow: 0 1px 25px 0 rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.group-page-post-link:hover {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.group-page-post-image-wrap {
|
||||
display: inline-block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.group-page-post-image {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
/*border-radius: 50%;*/
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.group-page-post-content {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.group-page-post-title {
|
||||
font-weight: normal;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.group-page-post-meta-wrap {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.group-page-post-author,
|
||||
.group-page-post-postdate {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
/* scroll view */
|
||||
.group-page.scroll {
|
||||
padding-top: 7rem;
|
||||
}
|
||||
.group-page.scroll .group-page-banner-image-wrap {
|
||||
height: 70px;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.group-page.scroll .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 {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.group-page.scroll .group-page-view-switch {
|
||||
position: static;
|
||||
display: inline-block;
|
||||
margin: 6px .5rem 0 0;
|
||||
}
|
||||
|
||||
.group-page.scroll .btn {
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
.group-page li a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.group-page .group-page-feed-view .active {
|
||||
color: #fff;
|
||||
}
|
||||
/* 600px */
|
||||
|
||||
@media screen and (min-width: 37.5rem) {
|
||||
.group-page-post {
|
||||
text-align: left;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.group-page-post-image-wrap {
|
||||
float: left;
|
||||
width: 12%;
|
||||
margin-right: 4%;
|
||||
min-width: 100px;
|
||||
}
|
||||
.group-page-post-content-wrap {
|
||||
float: left;
|
||||
width: 72%;
|
||||
}
|
||||
.group-page.scroll .group-page-view-switch {
|
||||
margin: 6px .5rem 0 0;
|
||||
}
|
||||
.group-page.scroll .group-page-bar {
|
||||
padding: 0 5rem 0 2rem;
|
||||
position: fixed;
|
||||
top: 70px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
/* 760px */
|
||||
|
||||
@media screen and (min-width: 47.5rem) {
|
||||
.group-page-post-content-wrap {
|
||||
width: 80%;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,511 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import url(http://fonts.googleapis.com/css?family=Maven+Pro);
|
||||
|
||||
// Font stacks
|
||||
|
||||
$main-font: "Maven Pro", "微軟正黑體" sans-serif;
|
||||
$gray: #f3f3f3;
|
||||
$dark-gray: #aaaaaa;
|
||||
$light-gray: #cdcdcd;
|
||||
$white: white;
|
||||
$black: black;
|
||||
$green: #1d9e20;
|
||||
$blue: #0056cc;
|
||||
$red: #c71932;
|
||||
$group-page-bar-color: #171717;
|
||||
|
||||
// General style
|
||||
body {
|
||||
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;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.tool-tip-parent {
|
||||
position: relative;
|
||||
&:hover {
|
||||
.tool-tip {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tool-tip {
|
||||
padding: 10px 0.75rem;
|
||||
border-radius: .2rem;
|
||||
color: $white;
|
||||
background: rgba($black, 0.85);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 100%;
|
||||
z-index: 150;
|
||||
&:after {
|
||||
border: 5px solid transparent;
|
||||
border-top-color: rgba($black, 0.85);
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
bottom: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
.topnav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Group page
|
||||
#main-wrap {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.group-page-banner-image-wrap {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
max-height: 280px;
|
||||
}
|
||||
|
||||
.group-page-view-switch {
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
right: 2rem;
|
||||
}
|
||||
|
||||
.group-page-banner-image {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.group-page-bar {
|
||||
overflow: hidden;
|
||||
padding: 20px 2rem;
|
||||
text-align: center;
|
||||
background: $group-page-bar-color;
|
||||
}
|
||||
|
||||
.group-page-title {
|
||||
margin-bottom: 12px;
|
||||
padding: 6px 0;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.group-page-setion {
|
||||
overflow: hidden;
|
||||
max-width: 1350px;
|
||||
margin: auto;
|
||||
padding: 30px 2rem;
|
||||
}
|
||||
|
||||
.gorup-page-info-wrap {
|
||||
font-size: .9rem;
|
||||
display: block;
|
||||
float: right;
|
||||
padding: 5px .5rem;
|
||||
cursor: pointer;
|
||||
border: 2px solid $light-gray;
|
||||
}
|
||||
|
||||
.group-page-description-wrap {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.gorup-page-info-wrap {
|
||||
margin-bottom: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.group-page-status-wrap {
|
||||
font-size: .75rem;
|
||||
float: right;
|
||||
margin-bottom: 10px;
|
||||
padding: 2px .4rem;
|
||||
color: $white;
|
||||
border-radius: .2rem;
|
||||
background: $green;
|
||||
}
|
||||
|
||||
.group-page-status-wrap.close-eye {
|
||||
margin-left: 5px;
|
||||
background: $red;
|
||||
}
|
||||
|
||||
.group-page-description-wrap {
|
||||
margin-bottom: 15px;
|
||||
padding: 16px 1.2rem 16px;
|
||||
border-radius: .2rem;
|
||||
box-shadow: inset 0 0 8px $dark-gray;
|
||||
}
|
||||
|
||||
.group-page-description {
|
||||
clear: both;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.group-page-post {
|
||||
clear: both;
|
||||
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);
|
||||
}
|
||||
|
||||
.group-page-post-link {
|
||||
text-decoration: none;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.group-page-post:hover {
|
||||
box-shadow: 0 1px 25px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.group-page-post-link:hover {
|
||||
text-decoration: none;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.group-page-post-image-wrap {
|
||||
display: inline-block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.group-page-post-image {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.group-page-post-content {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.group-page-post-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.group-page-post-meta-wrap {
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
.group-page-post-author,
|
||||
.group-page-post-postdate {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
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 {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.group-page.scroll .group-page-view-switch {
|
||||
position: static;
|
||||
display: inline-block;
|
||||
margin: 6px .5rem 0 0;
|
||||
}
|
||||
|
||||
.group-page.scroll .btn {
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
.group-page li a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.group-page .group-page-feed-view .active {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
||||
// 900px
|
||||
@media screen and (min-width: 56.25rem) {
|
||||
.group-page-post-content-wrap {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
// Group post
|
||||
.group-post {
|
||||
width: 980px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.group-post-meta {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.group-post-heading-wrap {
|
||||
}
|
||||
|
||||
.group-post-title {
|
||||
font-family: $main-font;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.group-post-avatar-wrap {
|
||||
float: right;
|
||||
}
|
||||
.group-post-avatar-username-toggle {
|
||||
display: block
|
||||
}
|
||||
|
||||
.group-post-avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.group-post-username {
|
||||
display: none;
|
||||
top: 100%;
|
||||
padding-bottom: 30px;
|
||||
right: 0;
|
||||
left: auto;
|
||||
&:after {
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: rgba(0, 0, 0, 0.85);
|
||||
top: -10px;
|
||||
left: auto;
|
||||
right: 20px;
|
||||
bottom: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.group-post-postdate {
|
||||
display: inline-block;
|
||||
margin-right: 1rem;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
.group-post-image-wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.group-post-image-list {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.group-post-cycle-prev {
|
||||
left: 2rem;
|
||||
}
|
||||
|
||||
.group-post-cycle-next {
|
||||
right: 2rem;
|
||||
}
|
||||
|
||||
.group-post-content {
|
||||
font-family: $main-font;
|
||||
font-size: .8125rem;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.group-post-attachment-wrap {
|
||||
float: left;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.group-post-attachment-icon {
|
||||
font-size: 1rem;
|
||||
padding: 6px 4px 0 0;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.group-post-attachments {
|
||||
display: inline-block;
|
||||
padding-left: 0.5rem;
|
||||
float: left;
|
||||
width: 95%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.group-post-seen-by-lead {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.group-post-seen-by-names {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.comments {
|
||||
clear: both
|
||||
}
|
||||
|
||||
.group-post-respond-comment {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.group-post-comment-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.group-post-comment-wrap {
|
||||
overflow: hidden;
|
||||
margin-bottom: 25px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid $light-gray;
|
||||
}
|
||||
|
||||
.group-post-comment-avatar {
|
||||
float: left;
|
||||
width: 8%;
|
||||
img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.group-post-comment-author {
|
||||
font-size: .9375rem;
|
||||
}
|
||||
|
||||
.group-post-comment-body {
|
||||
float: left;
|
||||
width: 80%;
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
body {
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@
|
|||
<%= stylesheet_link_tag "lib/main-forms" %>
|
||||
<%= stylesheet_link_tag "lib/fileupload" %>
|
||||
<%= stylesheet_link_tag "lib/main-list" %>
|
||||
<%= stylesheet_link_tag "lib/group" %>
|
||||
<%= stylesheet_link_tag "select2/select2" %>
|
||||
<style>
|
||||
.select2-container{
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
<% content_for :page_specific_css do -%>
|
||||
<%= stylesheet_link_tag "group_page" %>
|
||||
<%= stylesheet_link_tag "group_show" %>
|
||||
<% end -%>
|
||||
|
||||
<div class="group-page scroll">
|
||||
<% content_for :page_specific_javascript do -%>
|
||||
<%= 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">
|
||||
|
|
@ -69,7 +71,4 @@
|
|||
})
|
||||
|
||||
}(jQuery));
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1 +1,141 @@
|
|||
this is post for <%= params[:id] %>
|
||||
<% content_for :page_specific_css do -%>
|
||||
<%= stylesheet_link_tag "group_show" %>
|
||||
<% end -%>
|
||||
<% content_for :page_specific_javascript do -%>
|
||||
<%= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.min.js" %>
|
||||
<%= javascript_include_tag "group.js" %>
|
||||
<% end -%>
|
||||
|
||||
<article class="group-post">
|
||||
<header class="group-post-meta">
|
||||
<div class="group-post-heading-wrap clearfix">
|
||||
<h2 class="group-post-title">My Awesome Post!</h2>
|
||||
<div class="group-post-avatar-wrap">
|
||||
<a class="group-post-avatar-username-toggle tool-tip-parent" href="#">
|
||||
<img class="group-post-avatar" src="/uploads/group/image/550fa5ba7470004834050000/IMAG1518.jpg" alt="">
|
||||
<span class="group-post-username tool-tip">Isaac</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group-post-sub-wrap">
|
||||
<span class="group-post-postdate">
|
||||
<i class="group-post-postdate-icon icon-time"></i> 26 March
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
<section class="group-post-image-wrap">
|
||||
<ul class="group-post-image-list cycle-slideshow"
|
||||
data-cycle-slides="li"
|
||||
data-cycle-prev=".group-post-cycle-prev"
|
||||
data-cycle-next=".group-post-cycle-next"
|
||||
data-cycle-fx="fade"
|
||||
data-cycle-log="false"
|
||||
>
|
||||
<li class="group-post-image-item"><img class="group-post-banner-image" src="/uploads/group/image/550fa5ba7470004834050000/IMAG1518.jpg" alt="Post image"></li>
|
||||
<li class="group-post-image-item"><img class="group-post-banner-image" src="/uploads/group/image/550fa5ba7470004834050000/IMAG1518.jpg" alt="Post image"></li>
|
||||
<li class="group-post-image-item"><img class="group-post-banner-image" src="/uploads/group/image/550fa5ba7470004834050000/IMAG1518.jpg" alt="Post image"></li>
|
||||
</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>
|
||||
</section>
|
||||
<section class="group-post-content">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt repellendus quibusdam vel dignissimos, nihil numquam ex impedit error cupiditate reprehenderit mollitia repudiandae, aliquid aut pariatur suscipit porro voluptatem magnam rem obcaecati nam et iste inventore facere. Recusandae unde natus molestias aut odit soluta quibusdam. Quidem dignissimos natus nobis expedita ea ratione quod cupiditate repellat quis iusto, nulla architecto excepturi a qui, dolores molestiae culpa voluptas! Vitae eum alias fugiat eius ab, aliquid possimus, impedit odit eaque ad magnam, molestiae natus ex. Sed placeat consectetur eveniet culpa accusamus tempora earum unde debitis dolor eum fugit minus perspiciatis veniam id quod voluptate alias minima iure ipsam, natus molestiae. Quas dicta fugit nisi aspernatur, fugiat veniam, aut commodi mollitia quam consequatur aperiam vitae odio itaque tempore error iste tempora corporis nostrum nobis accusamus. Delectus dicta, voluptatibus repellendus? Dolor consequuntur minus, mollitia, quod aspernatur suscipit et quae quam omnis obcaecati laudantium dolore nisi ab!</p>
|
||||
</section>
|
||||
<div class="group-post-attachment-wrap">
|
||||
<i class="group-post-attachment-icon icon-paper-clip"></i>
|
||||
<span class="group-post-attachments">
|
||||
<a href="#" class="btn btn-default">My-Awesome-file</a>
|
||||
<a href="#" class="btn btn-default">My-fantastic-file</a>
|
||||
<a href="#" class="btn btn-default">My-lovely-file</a>
|
||||
<a href="#" class="btn btn-default">My-stunning-file</a>
|
||||
<a href="#" class="btn btn-default">My-Awesome-file</a>
|
||||
<a href="#" class="btn btn-default">My-fantastic-file</a>
|
||||
<a href="#" class="btn btn-default">My-lovely-file</a>
|
||||
<a href="#" class="btn btn-default">My-stunning-file</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="group-post-seen-by tool-tip-parent">
|
||||
<em class="group-post-seen-by-lead">Seen by: </em>
|
||||
<span class="group-post-seen-by-name">Harry</span>
|
||||
<span class="group-post-seen-by-name">Ika</span>
|
||||
<span class="group-post-seen-by-name">Joshua</span>
|
||||
<span class="group-post-seen-by-name">Mason</span>
|
||||
<span class="group-post-seen-by-name">Tina</span>
|
||||
<span class="group-post-seen-by-name">Shelley</span>
|
||||
<span class="group-post-seen-by-name">Anna</span>
|
||||
<span class="group-post-seen-by-name">Poke</span>
|
||||
<span class="group-post-seen-by-name">Moses</span>
|
||||
</div>
|
||||
<section class="comments">
|
||||
<div class="grou-post-respond">
|
||||
<form action="">
|
||||
<h3 class="group-post-respond-title">
|
||||
Leave a comment
|
||||
</h3>
|
||||
<div class="group-post-respond-wrap">
|
||||
<label for="comment" class="screen-reader">Comment</label>
|
||||
<textarea name="comment" id="comment" class="group-post-respond-comment" cols="100" rows="2" placeholder="Your comment here."></textarea>
|
||||
</div>
|
||||
<div class="grou-post-submit-wrap">
|
||||
<input type="submit" name="submit" class="grou-post-respond-submit btn btn-primary" id="submit" value="Submit Comment">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<h3 class="group-post-comment-title">
|
||||
Comments
|
||||
</h3>
|
||||
<ol class="group-post-comment-list">
|
||||
<li class="group-post-comment">
|
||||
<div class="group-post-comment-wrap">
|
||||
<div class="group-post-comment-avatar">
|
||||
<img src="/uploads/group/image/550fa5ba7470004834050000/IMAG1518.jpg" alt="Avatar image">
|
||||
</div>
|
||||
<div class="group-post-comment-body">
|
||||
<div class="group-post-comment-author-wrap">
|
||||
<div class="group-post-comment-author">Joshua Milton</div>
|
||||
<div class="group-post-comment-time muted">24 March</div>
|
||||
</div>
|
||||
<div class="group-post-comment-content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quam quos eveniet enim soluta delectus nisi modi beatae! Facilis eaque aperiam vitae dolorum at perspiciatis commodi. Error dolorem fuga aperiam.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="group-post-comment">
|
||||
<div class="group-post-comment-wrap">
|
||||
<div class="group-post-comment-avatar">
|
||||
<img src="/uploads/group/image/550fa5ba7470004834050000/IMAG1518.jpg" alt="Avatar image">
|
||||
</div>
|
||||
<div class="group-post-comment-body">
|
||||
<div class="group-post-comment-author-wrap">
|
||||
<div class="group-post-comment-author">Joshua Milton</div>
|
||||
<div class="group-post-comment-time muted">24 March</div>
|
||||
</div>
|
||||
<div class="group-post-comment-content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quam quos eveniet enim soluta delectus nisi modi beatae! Facilis eaque aperiam vitae dolorum at perspiciatis commodi. Error dolorem fuga aperiam.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="group-post-comment">
|
||||
<div class="group-post-comment-wrap">
|
||||
<div class="group-post-comment-avatar">
|
||||
<img src="/uploads/group/image/550fa5ba7470004834050000/IMAG1518.jpg" alt="Avatar image">
|
||||
</div>
|
||||
<div class="group-post-comment-body">
|
||||
<div class="group-post-comment-author-wrap">
|
||||
<div class="group-post-comment-author">Joshua Milton</div>
|
||||
<div class="group-post-comment-time muted">24 March</div>
|
||||
</div>
|
||||
<div class="group-post-comment-content">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius quam quos eveniet enim soluta delectus nisi modi beatae! Facilis eaque aperiam vitae dolorum at perspiciatis commodi. Error dolorem fuga aperiam.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
<%= link_to( ( content_tag(:span, content_tag(:i, nil, :class => 'icons-user'))), admin_members_path) %>
|
||||
<% end -%>
|
||||
<%= content_tag :li, :class => active_for_controllers('groups') do -%>
|
||||
<%= link_to( ( content_tag(:span, content_tag(:i, nil, :class => 'icons-layout'))), admin_groups_path) %>
|
||||
<%= link_to( ( content_tag(:span, content_tag(:i, nil, :class => 'icon-group'))), admin_groups_path) %>
|
||||
<% end -%>
|
||||
<% if (current_user.is_admin? rescue false) %>
|
||||
<%= content_tag :li, :class => active_for_controllers('plugins') do -%>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<%= stylesheet_link_tag "lib/main-forms.css" %>
|
||||
<%= stylesheet_link_tag "lib/fileupload.css" %>
|
||||
<%= stylesheet_link_tag "lib/togglebox.css" %>
|
||||
<%= stylesheet_link_tag "lib/group.css" %>
|
||||
<% end -%>
|
||||
<% content_for :page_specific_javascript do -%>
|
||||
<%= javascript_include_tag "lib/jquery-ui-1.10.3.custom.min.js" %>
|
||||
|
|
@ -16,7 +17,6 @@
|
|||
<%= javascript_include_tag "lib/member/role-forms.js" %>
|
||||
<% end -%>
|
||||
|
||||
|
||||
<%= form_for @member, :url => admin_member_path(@member), :html => { :multipart => true , :class=>"form-horizontal main-forms", :id=>"user-forms"} do |f| %>
|
||||
<%= f.error_messages %>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue