Changes for store back-end
This commit is contained in:
chris
parent
9a79e432dd
commit
e68c52bc00
|
|
@ -0,0 +1,110 @@
|
|||
/* list page */
|
||||
header {
|
||||
background-image: url(../image/mheader_bg.jpg);
|
||||
}
|
||||
#toolbar {
|
||||
background-image: url(../image/mfilter_bg.jpg);
|
||||
border: solid 1px #8b8b8b;
|
||||
box-shadow: inset 0 -1px 0 #9a9a9a;
|
||||
}
|
||||
#feature {
|
||||
border: solid 1px #ccc;
|
||||
padding: 3px;
|
||||
background-color: #fff;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
#feature ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
#feature .holder {
|
||||
width: 740px;
|
||||
height: 220px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#feature-nav {
|
||||
float: right;
|
||||
}
|
||||
#feature-nav li {
|
||||
margin-top: 9px;
|
||||
position: relative;
|
||||
}
|
||||
#feature-nav li:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
#feature-nav li a {
|
||||
display: block;
|
||||
}
|
||||
#feature-nav li a:hover:after, #feature-nav li.activeSlide a:after {
|
||||
content: '';
|
||||
display: block;
|
||||
border-top: 30px solid transparent;
|
||||
border-bottom: 30px solid transparent;
|
||||
border-right: 30px solid #fff;
|
||||
position: absolute;
|
||||
left: -30px;
|
||||
top: 4px;
|
||||
}
|
||||
#feature-nav li a:hover, #feature-nav li.activeSlide {
|
||||
outline: solid 9px #fff;
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
box-shadow: 0 10px 3px rgba(0,0,0,0.2);
|
||||
}
|
||||
#item-list ul {
|
||||
margin: 0 -11px;
|
||||
}
|
||||
#item-list li {
|
||||
width: 312px;
|
||||
margin: 0 11px 35px 11px;
|
||||
}
|
||||
#item-list li a {
|
||||
border: solid 1px #ccc;
|
||||
background-color: #fff;
|
||||
}
|
||||
#item-list .item-thumb {
|
||||
width: 144px;
|
||||
height: 144px;
|
||||
border: solid 3px #fff;
|
||||
float: left;
|
||||
}
|
||||
#item-list .item-info {
|
||||
width: 154px;
|
||||
height: 144px;
|
||||
padding: 3px;
|
||||
float: right;
|
||||
position: relative;
|
||||
}
|
||||
#item-list .item-name {
|
||||
color: #000;
|
||||
padding: 8px;
|
||||
display: inline-block;
|
||||
}
|
||||
#item-list .item-price {
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.fn .label {
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
/* content page */
|
||||
#content {
|
||||
background: #fff url(../image/mside_bg.png) 0 0 repeat-y;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.user-list {
|
||||
background-color: #fff;
|
||||
}
|
||||
.user-list li:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
.user-list li {
|
||||
color: #333;
|
||||
border-top: solid 1px #f1f1f1;
|
||||
padding: 8px;
|
||||
padding-left: 20px;
|
||||
background: url(../image/ar1.png) 10px 14px no-repeat;
|
||||
}
|
||||
|
|
@ -0,0 +1,375 @@
|
|||
/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
|
||||
|
||||
/* ==========================================================================
|
||||
HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Corrects `block` display not defined in IE 8/9.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Corrects `inline-block` display not defined in IE 8/9.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Prevents modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses styling for `hidden` attribute not present in IE 8/9.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Base
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* 1. Sets default font family to sans-serif.
|
||||
* 2. Prevents iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Removes default margin.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Links
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Addresses `outline` inconsistency between Chrome and other browsers.
|
||||
*/
|
||||
|
||||
a:focus {
|
||||
outline: thin dotted;
|
||||
}
|
||||
|
||||
/*
|
||||
* Improves readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Typography
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
|
||||
* Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses styling not present in IE 8/9, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses styling not present in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Corrects font family set oddly in Safari 5 and Chrome.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, serif;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/*
|
||||
* Improves readability of pre-formatted text in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/*
|
||||
* Sets consistent quote types.
|
||||
*/
|
||||
|
||||
q {
|
||||
quotes: "\201C" "\201D" "\2018" "\2019";
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/*
|
||||
* Prevents `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Removes border when inside `a` element in IE 8/9.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* Corrects overflow displayed oddly in IE 9.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Figures
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Addresses margin not present in IE 8/9 and Safari 5.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Forms
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Corrects color not being inherited in IE 8/9.
|
||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Corrects font family not being inherited in all browsers.
|
||||
* 2. Corrects font size not being inherited in all browsers.
|
||||
* 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 2 */
|
||||
margin: 0; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
button,
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Corrects inability to style clickable `input` types in iOS.
|
||||
* 3. Improves usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Addresses box sizing set to `content-box` in IE 8/9.
|
||||
* 2. Removes excess padding in IE 8/9.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
|
||||
* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/*
|
||||
* Removes inner padding and search cancel button in Safari 5 and Chrome
|
||||
* on OS X.
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Removes inner padding and border in Firefox 4+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
* 1. Removes default vertical scrollbar in IE 8/9.
|
||||
* 2. Improves readability and alignment in all browsers.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto; /* 1 */
|
||||
vertical-align: top; /* 2 */
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Tables
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,382 @@
|
|||
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
|
||||
|
||||
body {
|
||||
font-family: Lato, 微軟正黑體, 新細明體, sans-serif;
|
||||
font-size: 80%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
.wrapper {
|
||||
width: 980px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#main-menu ul, #item-list ul, .item-extra-info, .user-list, .option-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
header {
|
||||
background-color: #e0e0e0;
|
||||
background-position: center 60px;
|
||||
background-repeat: no-repeat;
|
||||
height: 200px;
|
||||
}
|
||||
#orbit-logo {
|
||||
margin: 0;
|
||||
height: 62px;
|
||||
}
|
||||
#orbit-logo a {
|
||||
display: inline-block;
|
||||
width: 150px;
|
||||
height: 32px;
|
||||
overflow: hidden;
|
||||
text-indent: -9999px;
|
||||
background: url(../image/logo.png) 0 0 no-repeat;
|
||||
margin-top: 14px;
|
||||
}
|
||||
#orbit-logo span {
|
||||
font-size: 10px;
|
||||
color: #cdcdcd;
|
||||
font-weight: normal;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: -4px 0 0 16px;
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
#main-menu {
|
||||
background: url(../image/topnav_bg.png) 0 0 repeat-x;
|
||||
}
|
||||
#main-menu ul {
|
||||
float: right;
|
||||
}
|
||||
#main-menu li {
|
||||
float: left;
|
||||
margin-left: 24px;
|
||||
line-height: 62px;
|
||||
}
|
||||
#main-menu li a {
|
||||
display: inline-block;
|
||||
line-height: normal;
|
||||
color: #b2b2b2;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
}
|
||||
#main-menu li a:hover, #main-menu li a.active {
|
||||
color: #fff;
|
||||
}
|
||||
#main-menu .demo a {
|
||||
background-color: #c51c09;
|
||||
color: #fff;
|
||||
border: solid 2px #ea311d;
|
||||
border-radius: 5px;
|
||||
padding: 4px 8px;
|
||||
font-weight: normal;
|
||||
}
|
||||
#page-title {
|
||||
margin: 0;
|
||||
padding: 36px 0 0 16px;
|
||||
font-size: 3em;
|
||||
text-shadow: 0 2px 0 #fff;
|
||||
}
|
||||
#page-title .sub {
|
||||
font-weight: 300;
|
||||
color: #b2b2b2;
|
||||
}
|
||||
#search-form {
|
||||
float: right;
|
||||
margin: 50px 16px 0 0;
|
||||
}
|
||||
#search-form input {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 7px 12px;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
width: 230px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
color: #333;
|
||||
font-family: inherit;
|
||||
box-shadow: inset 0 1px 0 #999, inset 0 -1px 0 #eee;
|
||||
border-radius: 15px;
|
||||
background-color: #cecece;
|
||||
}
|
||||
#toolbar {
|
||||
margin: -25px 0 35px 0;
|
||||
height: 50px;
|
||||
background-color: #fff;
|
||||
background-repeat: repeat-x;
|
||||
border: solid 1px #e0e0e0;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 #c9c9c9;
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
}
|
||||
.ui {
|
||||
background: #F2F2F2 url(../image/ui_bg.png) left center repeat-x;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
border: solid 1px #e0e0e0;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.controller, .btn {
|
||||
padding: 0 8px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
color: #333;
|
||||
}
|
||||
.controller:hover, .btn:hover {
|
||||
background: none;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
}
|
||||
.fn {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
font-size: 14px;
|
||||
margin: 10px 0 10px 16px;
|
||||
}
|
||||
.fn .label {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
line-height: 28px;
|
||||
color: #999;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.option-default {
|
||||
font-weight: bold;
|
||||
}
|
||||
.option-list {
|
||||
/*display: none;*/
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: -1px;
|
||||
background-color: #fff;
|
||||
border: solid 1px #e0e0e0;
|
||||
width: 180px;
|
||||
}
|
||||
.option-list li {
|
||||
border-top: solid 1px #eee;
|
||||
}
|
||||
.option-list li:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
.option-list a {
|
||||
color: #666;
|
||||
text-decoration: none;
|
||||
}
|
||||
.option-list a:hover {
|
||||
color: #333;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
.drop-menu {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.drop-menu:after {
|
||||
display: table;
|
||||
width: 100%;
|
||||
content: '';
|
||||
}
|
||||
.drop-menu .arrow {
|
||||
display: inline-block;
|
||||
background: url(../image/dropdown_ad.png) 0 0 no-repeat;
|
||||
width: 16px;
|
||||
height: 18px;
|
||||
vertical-align: top;
|
||||
margin: 5px 0 0 8px;
|
||||
}
|
||||
.drop-menu:hover {
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
.drop-menu:hover .controller {
|
||||
border-bottom: solid 1px #fff;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
}
|
||||
.drop-menu:hover .option-list {
|
||||
display: block;
|
||||
border-radius: 0 4px 4px 4px;
|
||||
}
|
||||
.drop-menu .option-list {
|
||||
display: none;
|
||||
}
|
||||
.drop-menu .option-list li a {
|
||||
display: block;
|
||||
line-height: normal;
|
||||
padding: 8px;
|
||||
}
|
||||
.drop-menu .option-default {
|
||||
display: inline-block;
|
||||
}
|
||||
.select {
|
||||
display: inline-block;
|
||||
}
|
||||
.select .option-list {
|
||||
position: static;
|
||||
display: inline-block;
|
||||
border: 0;
|
||||
width: auto;
|
||||
background-color: transparent;
|
||||
}
|
||||
.select .option-list li {
|
||||
display: inline-block;
|
||||
border-top: 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
.select .option-list li a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#item-list ul {}
|
||||
#item-list li {
|
||||
float: left;
|
||||
}
|
||||
#item-list li a {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
#item-list li a:hover {}
|
||||
.item-thumb {
|
||||
display: block;
|
||||
background: #ccc url(../image/thumb_default.png) center center no-repeat;
|
||||
}
|
||||
#item-list .item-info {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
#item-list .item-name {
|
||||
font-size: 1.25em;
|
||||
font-weight: normal;
|
||||
}
|
||||
#item-list .item-price {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #c51c09;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
color: #fff;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
/* content page */
|
||||
#content h3 {
|
||||
font-size: 1.5em;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
#content .side, #content .main {
|
||||
padding: 0 20px;
|
||||
}
|
||||
#content .side {
|
||||
float: left;
|
||||
}
|
||||
#content .main {
|
||||
float: right;
|
||||
width: 680px;
|
||||
}
|
||||
#item-info .item-thumb {
|
||||
width: 210px;
|
||||
height: 210px;
|
||||
border: solid 5px #fff;
|
||||
}
|
||||
#item-info .item-name {
|
||||
font-size: 2.16em;
|
||||
text-shadow: 0 2px 0 #fff;
|
||||
}
|
||||
#item-info .item-extra-info {
|
||||
margin: 20px 0;
|
||||
}
|
||||
#item-info .item-extra-info li {
|
||||
border-top: solid 1px #E0E0E0;
|
||||
padding-top: 12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
#item-info .item-extra-info li:first-child {
|
||||
border-top: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
#item-info .item-extra-info .title {
|
||||
color: #666;
|
||||
display: inline-block;
|
||||
/*width: 70px;*/
|
||||
margin-right: 12px;
|
||||
}
|
||||
#item-info .item-extra-info .count {
|
||||
font-size: 1.5em;
|
||||
color: #000;
|
||||
}
|
||||
#screen-shot {
|
||||
padding: 5px;
|
||||
background-color: #fff;
|
||||
}
|
||||
#screen-shot .holder {
|
||||
overflow: hidden;
|
||||
height: 450px;
|
||||
}
|
||||
#screen-shot .preview {
|
||||
width: 670px;
|
||||
height: 450px;
|
||||
}
|
||||
#scr-nav {
|
||||
text-align: center;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
#scr-nav a {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin: 0 6px;
|
||||
overflow: hidden;
|
||||
text-indent: -999px;
|
||||
background-color: #aaa;
|
||||
border-radius: 6px;
|
||||
box-shadow: inset 0 1px 0 rgba(0,0,0,0.4);
|
||||
}
|
||||
#scr-nav a.activeSlide, #scr-nav a:hover {
|
||||
background-color: #e7230d;
|
||||
}
|
||||
#download {
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-transform: capitalize;
|
||||
font-size: 1.5em;
|
||||
color: #fff;
|
||||
line-height: 2.2em;
|
||||
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
|
||||
border-radius: 5px;
|
||||
box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2);
|
||||
background: #dd200b;
|
||||
background: -moz-linear-gradient(top, #dd200b 0%, #c51c09 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dd200b), color-stop(100%,#c51c09));
|
||||
background: -webkit-linear-gradient(top, #dd200b 0%,#c51c09 100%);
|
||||
background: -o-linear-gradient(top, #dd200b 0%,#c51c09 100%);
|
||||
background: -ms-linear-gradient(top, #dd200b 0%,#c51c09 100%);
|
||||
background: linear-gradient(to bottom, #dd200b 0%,#c51c09 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd200b', endColorstr='#c51c09',GradientType=0 );
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #fff;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
padding: 16px 0;
|
||||
margin-top: 35px;
|
||||
}
|
||||
footer p {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
/* list page */
|
||||
header {
|
||||
background-image: url(../image/theader_bg.jpg);
|
||||
}
|
||||
#toolbar {
|
||||
background-image: url(../image/tfilter_bg.jpg);
|
||||
}
|
||||
#item-list li {
|
||||
width: 25%;
|
||||
}
|
||||
#item-list li a {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
background: url(../image/tlist_tap.png) center top no-repeat;
|
||||
padding-top: 16px;
|
||||
margin: 0 auto 35px auto;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
|
||||
}
|
||||
#item-list li a:hover .item-info {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
#item-list .item-thumb {
|
||||
width: 210px;
|
||||
height: 210px;
|
||||
border: solid 5px #fff;
|
||||
}
|
||||
#item-list .item-info {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 5px;
|
||||
width: 190px;
|
||||
height: 60px;
|
||||
padding: 10px;
|
||||
background-color: #000;
|
||||
background-color: rgba(0,0,0,0.7);
|
||||
|
||||
-webkit-transition: opacity 0.3s ease;
|
||||
-moz-transition: opacity 0.3s ease;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
#item-list .item-name {
|
||||
color: #fff;
|
||||
}
|
||||
#item-list .item-price {
|
||||
right: 10px;
|
||||
bottom: 0;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
.color-tag {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,0.6);
|
||||
}
|
||||
.btn .color-tag {
|
||||
margin: 2px -6px;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
.red {
|
||||
background-color: #ef202a;
|
||||
}
|
||||
.yellow {
|
||||
background-color: #feba29;
|
||||
}
|
||||
.green {
|
||||
background-color: #2ca53b;
|
||||
}
|
||||
.blue {
|
||||
background-color: #019cef;
|
||||
}
|
||||
.purple{
|
||||
background-color: #d402e7;
|
||||
}
|
||||
.white {
|
||||
background-color: #fff;
|
||||
}
|
||||
.gray {
|
||||
background-color: #969696;
|
||||
}
|
||||
.black {
|
||||
background-color: #222;
|
||||
}
|
||||
#color-filter .btn:hover {
|
||||
background-color: #aaa;
|
||||
border-color: #9a9a9a;
|
||||
background-image: linear-gradient(bottom, rgb(204,204,204) 0%, rgb(172,172,172) 100%);
|
||||
background-image: -o-linear-gradient(bottom, rgb(204,204,204) 0%, rgb(172,172,172) 100%);
|
||||
background-image: -moz-linear-gradient(bottom, rgb(204,204,204) 0%, rgb(172,172,172) 100%);
|
||||
background-image: -webkit-linear-gradient(bottom, rgb(204,204,204) 0%, rgb(172,172,172) 100%);
|
||||
background-image: -ms-linear-gradient(bottom, rgb(204,204,204) 0%, rgb(172,172,172) 100%);
|
||||
}
|
||||
#color-filter .btn:hover .color-tag {
|
||||
box-shadow: inset 0 1px 1px rgba(0,0,0,0.6), inset 0 -1px 0 rgba(255,255,255,0.6);
|
||||
}
|
||||
#color-filter .option-default:hover {
|
||||
background-color: #f6f6f6;
|
||||
background-image: none;
|
||||
border-color: #e0e0e0;
|
||||
}
|
||||
|
||||
/* content page */
|
||||
#item-info .item-thumb, #screen-shot {
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
</ul>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><%= t(javascripts) %> <b class="caret"></b></a>
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><%= t(:javascripts) %> <b class="caret"></b></a>
|
||||
<ul class="dropdown-menu">
|
||||
<% @design.javascripts.each do |js| %>
|
||||
<li><a href="#<%= dom_id js %>" data-toggle="tab"><%= js.name %></a></li>
|
||||
|
|
|
|||
|
|
@ -3,56 +3,90 @@
|
|||
<% end %>
|
||||
|
||||
<% content_for :page_specific_css do %>
|
||||
<%= stylesheet_link_tag 'modulestore' %>
|
||||
<%= stylesheet_link_tag 'normalize' %>
|
||||
<%= stylesheet_link_tag 'bootstrap-responsive' %>
|
||||
<%= stylesheet_link_tag 'rulingorbit' %>
|
||||
<%= stylesheet_link_tag 'module-store' %>
|
||||
<% end %>
|
||||
|
||||
<% content_for :page_specific_javascript do %>
|
||||
<%= javascript_include_tag 'lib/jquery.cycle.all.latest.js' %>
|
||||
<script type="text/javascript">
|
||||
// Banner slideshow
|
||||
$(function() {
|
||||
$('.slide').cycle({
|
||||
fx: 'scrollRight',
|
||||
speed: 600,
|
||||
timeout: 4000,
|
||||
slideExpr: 'img',
|
||||
next: '.next',
|
||||
prev: '.prev'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<% end %>
|
||||
|
||||
<div class="md-bg">
|
||||
<div class="modulestore md-store">
|
||||
<div class="header">
|
||||
<h1 class="home"><a href="modulestore">Orbit Module Store</a></h1>
|
||||
<div class="slide-wrap">
|
||||
<div class="slide-feature"></div>
|
||||
<div class="slide">
|
||||
<div class="slide-nav">
|
||||
<a class="prev" href="#">‹</a>
|
||||
<a class="next" href="#">›</a>
|
||||
</div>
|
||||
<a href="#"><img src="<%= asset_path 'modulestore/slide01.jpg' %>"></a>
|
||||
<a href="#"><img src="<%= asset_path 'modulestore/slide01.jpg' %>"></a>
|
||||
<a href="#"><img src="<%= asset_path 'modulestore/slide01.jpg' %>"></a>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div id="toolbar">
|
||||
<div class="filter fn">
|
||||
<span class="label">Price</span>
|
||||
<div class="drop-menu ui">
|
||||
<a href="" class="controller">
|
||||
<span class="option-default">All</span>
|
||||
<span class="arrow down"></span>
|
||||
</a>
|
||||
<ul class="option-list">
|
||||
<li><a class="option-item" href="">All</a></li>
|
||||
<li><a class="option-item" href="">3000</a></li>
|
||||
<li><a class="option-item" href="">4000</a></li>
|
||||
<li><a class="option-item" href="">5000</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter fn">
|
||||
<span class="label">Category</span>
|
||||
<div class="drop-menu ui">
|
||||
<a href="" class="controller">
|
||||
<span class="option-default">All</span>
|
||||
<span class="arrow down"></span>
|
||||
</a>
|
||||
<ul class="option-list">
|
||||
<li><a class="option-item" href="">All</a></li>
|
||||
<li><a class="option-item" href="">National Taiwan University</a></li>
|
||||
<li><a class="option-item" href="">Category 1</a></li>
|
||||
<li><a class="option-item" href="">Category 2</a></li>
|
||||
<li><a class="option-item" href="">Category 3</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter fn">
|
||||
<span class="label">Sort by</span>
|
||||
<div class="drop-menu ui">
|
||||
<a href="" class="controller">
|
||||
<span class="option-default">Date</span>
|
||||
<span class="arrow down"></span>
|
||||
</a>
|
||||
<ul class="option-list">
|
||||
<li><a class="option-item" href="">Date</a></li>
|
||||
<li><a class="option-item" href="">Popular</a></li>
|
||||
<li><a class="option-item" href="">Recent Upload</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="app-list row">
|
||||
<% 9.times do %>
|
||||
<div class="app span3">
|
||||
<a href="module_store/show">
|
||||
<img src="<%= asset_path 'modulestore/app.jpg' %>" alt="App" />
|
||||
<div class="detail">
|
||||
<strong class="apptitle">Orange theme</strong>
|
||||
<em class="price">Free download</em>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<div id="feature" class="clearfix">
|
||||
<div id="feature-nav">
|
||||
<ul>
|
||||
<li><a href=""><img class="item-thumb" src="assets/image/f_sample.jpg" alt="Thumbnail 1" width="228" height="67"></a></li>
|
||||
<li><a href=""><img class="item-thumb" src="" alt="Thumbnail 2" width="228" height="67"></a></li>
|
||||
<li><a href=""><img class="item-thumb" src="" alt="Thumbnail 3" width="228" height="67"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="holder">
|
||||
<ul>
|
||||
<li><a href=""><img class="item-thumb" src="assets/image/f_sample.jpg" alt="Thumbnail 1" width="740" height="220"></a></li>
|
||||
<li><a href=""><img class="item-thumb" src="" alt="Thumbnail 2" width="740" height="220"></a></li>
|
||||
<li><a href=""><img class="item-thumb" src="" alt="Thumbnail 3" width="740" height="220"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="item-list">
|
||||
<ul class="clearfix">
|
||||
<li><a href="module_store/show"><img src="" alt="" class="item-thumb"><span class="item-info"><b class="item-name">Module 1</b><span class="item-price">Free</span></span></a></li>
|
||||
<li><a href="module_store/show"><img src="" alt="" class="item-thumb"><span class="item-info"><b class="item-name">Module 2</b><span class="item-price">Free</span></span></a></li>
|
||||
<li><a href="module_store/show"><img src="" alt="" class="item-thumb"><span class="item-info"><b class="item-name">Module 3</b><span class="item-price">Free</span></span></a></li>
|
||||
<li><a href="module_store/show"><img src="" alt="" class="item-thumb"><span class="item-info"><b class="item-name">Module 4</b><span class="item-price">Free</span></module_store/showspan></a></li>
|
||||
<li><a href=""><img src="" alt="" class="item-thumb"><span class="item-info"><b class="item-name">Module 5</b><span class="item-price">Free</span></span></a></li>
|
||||
<li><a href="module_store/show"><img src="" alt="" class="item-thumb"><span class="item-info"><b class="item-name">Module 6</b><span class="item-price">Free</span></span></a></li>
|
||||
<li><a href="module_store/show"><img src="" alt="" class="item-thumb"><span class="item-info"><b class="item-name">Module 7</b><span class="item-price">Free</span></span></a></li>
|
||||
<li><a href="module_store/show"><img src="" alt="" class="item-thumb"><span class="item-info"><b class="item-name">Module 8</b><span class="item-price">Free</span></span></a></li>
|
||||
<li><a href="module_store/show"><img src="" alt="" class="item-thumb"><span class="item-info"><b class="item-name">Module 9</b><span class="item-price">Free</span></span></a></li>
|
||||
<li><a href="module_store/show"><img src="" alt="" class="item-thumb"><span class="item-info"><b class="item-name">Module 10</b><span class="item-price">Free</span></span></a></li>
|
||||
<li><a href="module_store/show"><img src="" alt="" class="item-thumb"><span class="item-info"><b class="item-name">Module 11</b><span class="item-price">Free</span></span></a></li>
|
||||
<li><a href="module_store/show"><img src="" alt="" class="item-thumb"><span class="item-info"><b class="item-name">Module 12</b><span class="item-price">Free</span></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -3,95 +3,49 @@
|
|||
<% end %>
|
||||
|
||||
<% content_for :page_specific_css do %>
|
||||
<%= stylesheet_link_tag 'modulestore' %>
|
||||
<%= stylesheet_link_tag 'normalize' %>
|
||||
<%= stylesheet_link_tag 'bootstrap-responsive' %>
|
||||
<%= stylesheet_link_tag 'rulingorbit' %>
|
||||
<%= stylesheet_link_tag 'module-store' %>
|
||||
<% end %>
|
||||
|
||||
<% content_for :page_specific_javascript do %>
|
||||
<%= javascript_include_tag 'lib/jquery.cycle.all.latest.js' %>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$('.slide').cycle({
|
||||
fx: 'scrollRight',
|
||||
speed: 'fast',
|
||||
timeout: 4000,
|
||||
pager: '.detail-slide-nav',
|
||||
pagerEvent: 'mouseover',
|
||||
slideExpr: 'img'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<% end %>
|
||||
<div class="modulestore-detail md-store">
|
||||
<div class="header">
|
||||
<h1 class="home"><a href="modulestore.html">Orbit Module Store</a></h1>
|
||||
</div>
|
||||
<div class="main row-fluid clearfix">
|
||||
<div class="left-col span3">
|
||||
<%= image_tag 'modulestore/app-icon.jpg', :class => "app-icon" %>
|
||||
<a href="#" class="price btn btn-primary">Free download</a>
|
||||
<ul class="download-meta">
|
||||
<li><strong class="downloads">Download:<span> 257985 times</span></strong></li>
|
||||
<li>
|
||||
<h3 class="who-are-using-this-apps">Who are using this apps?</h3>
|
||||
<ul>
|
||||
<li>NTU College of Liberal Arts</li>
|
||||
<li>NTU Department of Mathematics</li>
|
||||
<li>NCKU Graduate Institute of Communication Engineering</li>
|
||||
<li>NCCU Graduate Institute of Biomedical Electronics and Bioinformatics</li>
|
||||
<li>NTHU Nano-Electro-Mechanical System Research Center</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<h3 class="recommends">Who are using this also like</h3>
|
||||
<ul class="recommend-thumbs">
|
||||
<li>
|
||||
<a href=""><%= image_tag 'modulestore/dropbox.jpg' %></a>
|
||||
<a href=""><%= image_tag 'modulestore/screen-capture.jpg' %></a>
|
||||
<a href=""><%= image_tag 'modulestore/deault-app-icon.jpg' %></a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
<div class="wrapper">
|
||||
<div id="toolbar">
|
||||
<div class="fn"><a class="ui btn" href="/admin/module_store">Back to Store</a></div>
|
||||
</div>
|
||||
<div id="content" class="clearfix">
|
||||
<div class="side">
|
||||
<div id="item-info">
|
||||
<img src="" alt="" class="item-thumb">
|
||||
<h2 class="item-name">Module Name</h2>
|
||||
<a id="download" href="">free download</a>
|
||||
<ul class="item-extra-info">
|
||||
<li><span class="title">downloads</span><span class="count">15,241</span></li>
|
||||
</ul>
|
||||
<h3>who use it?</h3>
|
||||
<ul class="user-list">
|
||||
<li>Unversity 1</li>
|
||||
<li>Unversity 2</li>
|
||||
<li>Unversity 3</li>
|
||||
<li>Unversity 4</li>
|
||||
<li>Unversity 5</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right-col span6">
|
||||
<ul class="breadcrumb">
|
||||
<li><a href="Orbit_module_home.html">Home</a> <span class="divider">/</span></li>
|
||||
<li class="active">Orbit</li>
|
||||
</ul>
|
||||
<h2>Orbit app name here</h2>
|
||||
<h3>Description</h3>
|
||||
<p class="app-description">
|
||||
Orbit Blog makes it easy to post text, photos and video onto your blog.
|
||||
|
||||
We created Orbit blog to give you an easy way to share your thoughts about current events, what's going on in your life, or anything else you'd care to discuss with the world. We've developed a host of features to make blogging as simple and effective as possible:
|
||||
|
||||
* Free hosting for your images, video, and blog content
|
||||
* Powerful Template Designer for customizing your blog's look and feel
|
||||
* Drag and drop widget arrangements
|
||||
* Hundreds of background images and of flexible default templates
|
||||
* Built-in blog stats for realtime traffic data
|
||||
* Easy, built-in monetization with AdSense
|
||||
* Mobile support for blogging-on-the-go
|
||||
* Use your custom URL for free
|
||||
* Support for individual, team, and private blogs
|
||||
* Post and comment notifications
|
||||
* Gadget directory with hundreds of free widgets and add-ons
|
||||
* Available in 4 languages
|
||||
</p>
|
||||
<div class="screenshots">
|
||||
<h3>Screenshots</h3>
|
||||
<div class="slide">
|
||||
<div class="detail-slide-nav">
|
||||
</div>
|
||||
<a href="#"><%= image_tag 'modulestore/screenshot1.jpg' %></a>
|
||||
<a href="#"><%= image_tag 'modulestore/screenshot2.jpg' %></a>
|
||||
<a href="#"><%= image_tag 'modulestore/screenshot3.jpg' %></a>
|
||||
<a href="#"><%= image_tag 'modulestore/screenshot4.jpg' %></a>
|
||||
<a href="#"><%= image_tag 'modulestore/screenshot5.jpg' %></a>
|
||||
<div class="main clearfix">
|
||||
<h3>description</h3>
|
||||
<div id="desc-holder" class="paragraph">Pixel Union’s Jitensha defines storefront minimalism. Japanese for “bicycle,” Jitensha offers clean typography and easy usability, including full color, font, logo, and footer customization. With its painless social media and blog integration, Jitensha gorgeously accomodates every aspect of your business. Any questions before you launch? Don’t hesitate to email us: Support@PixelUnion.net.</div>
|
||||
<h3>screen shot</h3>
|
||||
<div id="screen-shot">
|
||||
<div class="holder">
|
||||
<img src="" alt="Thumbnail 1" class="preview item-thumb">
|
||||
<img src="" alt="Thumbnail 2" class="preview item-thumb">
|
||||
<img src="" alt="Thumbnail 3" class="preview item-thumb">
|
||||
<img src="" alt="Thumbnail 4" class="preview item-thumb">
|
||||
<img src="" alt="Thumbnail 5" class="preview item-thumb">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -3,28 +3,93 @@
|
|||
<% end %>
|
||||
|
||||
<% content_for :page_specific_css do %>
|
||||
<%= stylesheet_link_tag 'templatestore' %>
|
||||
<%= stylesheet_link_tag 'normalize' %>
|
||||
<%= stylesheet_link_tag 'bootstrap-responsive' %>
|
||||
<%= stylesheet_link_tag 'rulingorbit' %>
|
||||
<%= stylesheet_link_tag 'template-store' %>
|
||||
<% end %>
|
||||
|
||||
<div class="templatestore tp-store">
|
||||
<div class="header">
|
||||
<h1 class="home"><a href="template_store">Orbit Template Store</a></h1>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="template-list row">
|
||||
<% 9.times do %>
|
||||
<div class="template span3">
|
||||
<a href="template_store/show">
|
||||
<img src="<%= asset_path 'templatestore/template.jpg' %>" alt="Template" />
|
||||
<div class="detail">
|
||||
<strong class="template-title">Orange theme</strong>
|
||||
<em class="price">Free download</em>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div id="toolbar">
|
||||
<div class="filter fn">
|
||||
<span class="label">Price</span>
|
||||
<div class="drop-menu ui">
|
||||
<a href="" class="controller">
|
||||
<span class="option-default">All</span>
|
||||
<span class="arrow down"></span>
|
||||
</a>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<ul class="option-list">
|
||||
<li><a class="option-item" href="">All</a></li>
|
||||
<li><a class="option-item" href="">15,000</a></li>
|
||||
<li><a class="option-item" href="">20,000</a></li>
|
||||
<li><a class="option-item" href="">25,000</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter fn">
|
||||
<span class="label">Color</span>
|
||||
<div class="select single-select" id="color-filter">
|
||||
<ul class="option-list">
|
||||
<li><a href="" class="ui btn option-default">All</a></li>
|
||||
<li><a class="ui btn" href=""><span class="color-tag red"></span></a></li>
|
||||
<li><a class="ui btn" href=""><span class="color-tag yellow"></span></a></li>
|
||||
<li><a class="ui btn" href=""><span class="color-tag green"></span></a></li>
|
||||
<li><a class="ui btn" href=""><span class="color-tag blue"></span></a></li>
|
||||
<li><a class="ui btn" href=""><span class="color-tag purple"></span></a></li>
|
||||
<li><a class="ui btn" href=""><span class="color-tag white"></span></a></li>
|
||||
<li><a class="ui btn" href=""><span class="color-tag gray"></span></a></li>
|
||||
<li><a class="ui btn" href=""><span class="color-tag black"></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter fn">
|
||||
<span class="label">Category</span>
|
||||
<div class="drop-menu ui">
|
||||
<a href="" class="controller">
|
||||
<span class="option-default">All</span>
|
||||
<span class="arrow down"></span>
|
||||
</a>
|
||||
<ul class="option-list">
|
||||
<li><a class="option-item" href="">All</a></li>
|
||||
<li><a class="option-item" href="">National Taiwan University</a></li>
|
||||
<li><a class="option-item" href="">Category 1</a></li>
|
||||
<li><a class="option-item" href="">Category 2</a></li>
|
||||
<li><a class="option-item" href="">Category 3</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="filter fn">
|
||||
<span class="label">Sort by</span>
|
||||
<div class="drop-menu ui">
|
||||
<a href="" class="controller">
|
||||
<span class="option-default">Date</span>
|
||||
<span class="arrow down"></span>
|
||||
</a>
|
||||
<ul class="option-list">
|
||||
<li><a class="option-item" href="">Date</a></li>
|
||||
<li><a class="option-item" href="">Popular</a></li>
|
||||
<li><a class="option-item" href="">Recent Upload</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="item-list">
|
||||
<ul class="clearfix">
|
||||
<li><a href="template_store/show"><img src="" alt="" class="item-thumb"><span class="item-info"><b class="item-name">Template 1</b><span class="item-price">Free</span></span></a></li>
|
||||
<li><a href="template_store/show"><img src="" alt="" class="item-thumb"><span class="item-info"><b class="item-name">Template 2</b><span class="item-price">Free</span></span></a></li>
|
||||
<li><a href="template_store/show"><img src="" alt="" class="item-thumb"><span class="item-info"><b class="item-name">Template 3</b><span class="item-price">Free</span></span></a></li>
|
||||
<li><a href="template_store/show"><img src="" alt="" class="item-thumb"><span class="item-info"><b class="item-name">Template 4</b><span class="item-price">Free</span></span></a></li>
|
||||
<li><a href="template_store/show"><img src="" alt="" class="item-thumb"><span class="item-info"><b class="item-name">Template 5</b><span class="item-price">Free</span></span></a></li>
|
||||
<li><a href="template_store/show"><img src="" alt="" class="item-thumb"><span class="item-info"><b class="item-name">Template 6</b><span class="item-price">Free</span></span></a></li>
|
||||
<li><a href="template_store/show"><img src="" alt="" class="item-thumb"><span class="item-info"><b class="item-name">Template 7</b><span class="item-price">Free</span></span></a></li>
|
||||
<li><a href="template_store/show"><img src="" alt="" class="item-thumb"><span class="item-info"><b class="item-name">Template 8</b><span class="item-price">Free</span></span></a></li>
|
||||
<li><a href="template_store/show"><img src="" alt="" class="item-thumb"><span class="item-info"><b class="item-name">Template 9</b><span class="item-price">Free</span></span></a></li>
|
||||
<li><a href="template_store/show"><img src="" alt="" class="item-thumb"><span class="item-info"><b class="item-name">Template 10</b><span class="item-price">Free</template_store/showspan></span></a></li>
|
||||
<li><a href=""><img src="" alt="" class="item-thumb"><span class="item-info"><b class="item-name">Template 11</b><span class="item-price">Free</template_store/showspan></span></a></li>
|
||||
<li><a href=""><img src="" alt="" class="item-thumb"><span class="item-info"><b class="item-name">Template 12</b><span class="item-price">Free</span></span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3,75 +3,42 @@
|
|||
<% end %>
|
||||
|
||||
<% content_for :page_specific_css do %>
|
||||
<%= stylesheet_link_tag 'templatestore' %>
|
||||
<%= stylesheet_link_tag 'normalize' %>
|
||||
<%= stylesheet_link_tag 'bootstrap-responsive' %>
|
||||
<%= stylesheet_link_tag 'rulingorbit' %>
|
||||
<%= stylesheet_link_tag 'template-store' %>
|
||||
<% end %>
|
||||
|
||||
<% content_for :page_specific_javascript do %>
|
||||
<%= javascript_include_tag 'lib/jquery.cycle.all.latest.js' %>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$('.slide').cycle({
|
||||
fx: 'scrollRight',
|
||||
speed: 'fast',
|
||||
timeout: 4000,
|
||||
pager: '.detail-slide-nav',
|
||||
pagerEvent: 'mouseover',
|
||||
slideExpr: 'img'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<% end %>
|
||||
|
||||
<div class="templatestore-detail tp-store">
|
||||
<div class="header">
|
||||
<h1 class="home"><a href="templatestore.html">Orbit Template Store</a></h1>
|
||||
<div class="wrapper">
|
||||
<div id="toolbar">
|
||||
<div class="fn"><a class="ui btn" href="/admin/template_store">Back to Store</a></div>
|
||||
</div>
|
||||
<div class="main row-fluid">
|
||||
<div class="left-col span3">
|
||||
<%= image_tag 'templatestore/template-icon.jpg', :class => "template-icon" %>
|
||||
<a href="#" class="price btn btn-primary">Free download</a>
|
||||
<ul class="view-meta">
|
||||
<li><strong class="views">Views:<span> 7985 times</span></strong></li>
|
||||
</ul>
|
||||
<div id="content" class="clearfix">
|
||||
<div class="side">
|
||||
<div id="item-info">
|
||||
<img src="" alt="" class="item-thumb">
|
||||
<h2 class="item-name">Template Name</h2>
|
||||
<a id="download" href="">free download</a>
|
||||
<ul class="item-extra-info">
|
||||
<li><span class="title">views</span><span class="count">15,241</span></li>
|
||||
<li><span class="title">color</span><span class="color-tag green"></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="right-col span6">
|
||||
<ul class="breadcrumb">
|
||||
<li><a href="Orbit_template_home.html">Home</a> <span class="divider">/</span></li>
|
||||
<li class="active">Orbit</li>
|
||||
</ul>
|
||||
<h2>Orbit Template name here</h2>
|
||||
<h3>Description</h3>
|
||||
<p class="template-description">
|
||||
Orbit Blog makes it easy to post text, photos and video onto your blog.
|
||||
|
||||
We created Orbit blog to give you an easy way to share your thoughts about current events, what's going on in your life, or anything else you'd care to discuss with the world. We've developed a host of features to make blogging as simple and effective as possible:
|
||||
|
||||
* Free hosting for your images, video, and blog content
|
||||
* Powerful Template Designer for customizing your blog's look and feel
|
||||
* Drag and drop widget arrangements
|
||||
* Hundreds of background images and of flexible default templates
|
||||
* Built-in blog stats for realtime traffic data
|
||||
* Easy, built-in monetization with AdSense
|
||||
* Mobile support for blogging-on-the-go
|
||||
* Use your custom URL for free
|
||||
* Support for individual, team, and private blogs
|
||||
* Post and comment notifications
|
||||
* Gadget directory with hundreds of free widgets and add-ons
|
||||
* Available in 4 languages
|
||||
</p>
|
||||
<div class="screenshots">
|
||||
<h3>Screenshots</h3>
|
||||
<div class="slide">
|
||||
<div class="detail-slide-nav">
|
||||
</div>
|
||||
<a href="#"><%= image_tag 'templatestore/screenshot1.jpg' %></a>
|
||||
<a href="#"><%= image_tag 'templatestore/screenshot2.jpg' %></a>
|
||||
<a href="#"><%= image_tag 'templatestore/screenshot3.jpg' %></a>
|
||||
<a href="#"><%= image_tag 'templatestore/screenshot4.jpg' %></a>
|
||||
<a href="#"><%= image_tag 'templatestore/screenshot5.jpg' %></a>
|
||||
<div class="main clearfix">
|
||||
<h3>description</h3>
|
||||
<div id="desc-holder" class="paragraph">Pixel Union’s Jitensha defines storefront minimalism. Japanese for “bicycle,” Jitensha offers clean typography and easy usability, including full color, font, logo, and footer customization. With its painless social media and blog integration, Jitensha gorgeously accomodates every aspect of your business. Any questions before you launch? Don’t hesitate to email us: Support@PixelUnion.net.</div>
|
||||
<h3>screen shot</h3>
|
||||
<div id="screen-shot">
|
||||
<div class="holder">
|
||||
<img src="" alt="Thumbnail 1" class="preview item-thumb">
|
||||
<img src="" alt="Thumbnail 2" class="preview item-thumb">
|
||||
<img src="" alt="Thumbnail 3" class="preview item-thumb">
|
||||
<img src="" alt="Thumbnail 4" class="preview item-thumb">
|
||||
<img src="" alt="Thumbnail 5" class="preview item-thumb">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue