From e68c52bc00ff81574306430d5996e6fc8c509c8d Mon Sep 17 00:00:00 2001 From: chris Date: Wed, 5 Dec 2012 13:46:10 +0800 Subject: [PATCH] Changes for store back-end --- app/assets/stylesheets/module-store.css | 110 +++++ app/assets/stylesheets/normalize.css | 375 +++++++++++++++++ app/assets/stylesheets/rulingorbit.css | 382 ++++++++++++++++++ app/assets/stylesheets/template-store.css | 110 +++++ app/views/admin/designs/edit.html.erb | 2 +- app/views/admin/module_store/index.html.erb | 128 +++--- app/views/admin/module_store/show.html.erb | 124 ++---- app/views/admin/template_store/index.html.erb | 103 ++++- app/views/admin/template_store/show.html.erb | 93 ++--- 9 files changed, 1212 insertions(+), 215 deletions(-) create mode 100644 app/assets/stylesheets/module-store.css create mode 100644 app/assets/stylesheets/normalize.css create mode 100644 app/assets/stylesheets/rulingorbit.css create mode 100644 app/assets/stylesheets/template-store.css diff --git a/app/assets/stylesheets/module-store.css b/app/assets/stylesheets/module-store.css new file mode 100644 index 00000000..21814ee0 --- /dev/null +++ b/app/assets/stylesheets/module-store.css @@ -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; +} \ No newline at end of file diff --git a/app/assets/stylesheets/normalize.css b/app/assets/stylesheets/normalize.css new file mode 100644 index 00000000..73abb76f --- /dev/null +++ b/app/assets/stylesheets/normalize.css @@ -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; +} \ No newline at end of file diff --git a/app/assets/stylesheets/rulingorbit.css b/app/assets/stylesheets/rulingorbit.css new file mode 100644 index 00000000..fd69bfe6 --- /dev/null +++ b/app/assets/stylesheets/rulingorbit.css @@ -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; +} \ No newline at end of file diff --git a/app/assets/stylesheets/template-store.css b/app/assets/stylesheets/template-store.css new file mode 100644 index 00000000..9f597112 --- /dev/null +++ b/app/assets/stylesheets/template-store.css @@ -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); +} \ No newline at end of file diff --git a/app/views/admin/designs/edit.html.erb b/app/views/admin/designs/edit.html.erb index 45ea0bf0..37e67808 100644 --- a/app/views/admin/designs/edit.html.erb +++ b/app/views/admin/designs/edit.html.erb @@ -18,7 +18,7 @@
  • - <%= t(javascripts) %> + <%= t(:javascripts) %>