Skip to content

Commit f7a5560

Browse files
committed
product thumb
1 parent 80e06b2 commit f7a5560

File tree

37 files changed

+977
-1137
lines changed

37 files changed

+977
-1137
lines changed

.storybook/config.js

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import Vue from 'vue';
22
// import Vuex from 'vuex'
33
import { configure, addDecorator } from '@storybook/vue';
4-
import "vuefront/assets/scss/main.scss";
4+
import "vuefront/assets/scss/bootstrap.scss";
55
import centered from '@storybook/addon-centered/vue';
66
import { withInfo } from 'storybook-addon-vue-info';
77
import VueI18n from 'vue-i18n';
88
import * as messages from 'vuefront/lib/locales/en-gb';
99
import placeholder from "vuefront/assets/img/placeholder.png"
1010

11+
12+
1113
// Vue.use(Vuex)
1214
Vue.use(VueI18n);
1315
const i18n = new VueI18n({
@@ -32,39 +34,37 @@ Vue.prototype.$vuefront = {
3234
get isAMP() {
3335
return false;
3436
},
35-
get options() {
37+
get images() {
3638
return {
37-
image: {
38-
placeholder: placeholder,
39-
categoryThumb: {
40-
width: 300,
41-
height: 180
42-
},
43-
product: {
44-
width: 825,
45-
height: 825
39+
placeholder: placeholder,
40+
categoryThumb: {
41+
width: 300,
42+
height: 180
43+
},
44+
product: {
45+
width: 825,
46+
height: 825
4647

47-
},
48-
productThumb: {
49-
width: 300,
50-
height: 300
51-
},
52-
productThumbInline: {
53-
width: 200,
54-
height: 200
55-
},
56-
post: {
57-
width: 825, //10x6
58-
height: 495
59-
},
60-
postThumb: {
61-
width: 300, //10x6
62-
height: 180
63-
},
64-
postThumbInline: {
65-
width: 200, //10x6
66-
height: 120
67-
}
48+
},
49+
productThumb: {
50+
width: 300,
51+
height: 300
52+
},
53+
productThumbInline: {
54+
width: 200,
55+
height: 200
56+
},
57+
post: {
58+
width: 825, //10x6
59+
height: 495
60+
},
61+
postThumb: {
62+
width: 300, //10x6
63+
height: 180
64+
},
65+
postThumbInline: {
66+
width: 200, //10x6
67+
height: 120
6868
}
6969
}
7070
}

.storybook/store/product.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
export default {
22
"id": "42",
3-
"name": "Apple Cinema 30\"",
3+
"name": "Apple Cinema 30\" Apple Cinema 30 Apple Cinema 30 Apple Cinema 30\"",
44
"shortDescription": "The 30-inch Apple Cinema HD Display delivers an amazing 2560 x 1600 pixel resolution. Designed speci..",
55
"description": "<p>\r\n\t<font face=\"helvetica,geneva,arial\" size=\"2\"><font face=\"Helvetica\" size=\"2\">The 30-inch Apple Cinema HD Display delivers an amazing 2560 x 1600 pixel resolution. Designed specifically for the creative professional, this display provides more space for easier access to all the tools and palettes needed to edit, format and composite your work. Combine this display with a Mac Pro, MacBook Pro, or PowerMac G5 and there's no limit to what you can achieve. <br>\r\n\t<br>\r\n\t<\/font><font face=\"Helvetica\" size=\"2\">The Cinema HD features an active-matrix liquid crystal display that produces flicker-free images that deliver twice the brightness, twice the sharpness and twice the contrast ratio of a typical CRT display. Unlike other flat panels, it's designed with a pure digital interface to deliver distortion-free images that never need adjusting. With over 4 million digital pixels, the display is uniquely suited for scientific and technical applications such as visualizing molecular structures or analyzing geological data. <br>\r\n\t<br>\r\n\t<\/font><font face=\"Helvetica\" size=\"2\">Offering accurate, brilliant color performance, the Cinema HD delivers up to 16.7 million colors across a wide gamut allowing you to see subtle nuances between colors from soft pastels to rich jewel tones. A wide viewing angle ensures uniform color from edge to edge. Apple's ColorSync technology allows you to create custom profiles to maintain consistent color onscreen and in print. The result: You can confidently use this display in all your color-critical applications. <br>\r\n\t<br>\r\n\t<\/font><font face=\"Helvetica\" size=\"2\">Housed in a new aluminum design, the display has a very thin bezel that enhances visual accuracy. Each display features two FireWire 400 ports and two USB 2.0 ports, making attachment of desktop peripherals, such as iSight, iPod, digital and still cameras, hard drives, printers and scanners, even more accessible and convenient. Taking advantage of the much thinner and lighter footprint of an LCD, the new displays support the VESA (Video Electronics Standards Association) mounting interface standard. Customers with the optional Cinema Display VESA Mount Adapter kit gain the flexibility to mount their display in locations most appropriate for their work environment. <br>\r\n\t<br>\r\n\t<\/font><font face=\"Helvetica\" size=\"2\">The Cinema HD features a single cable design with elegant breakout for the USB 2.0, FireWire 400 and a pure digital connection using the industry standard Digital Video Interface (DVI) interface. The DVI connection allows for a direct pure-digital connection.<br>\r\n\t<\/font><\/font><\/p>\r\n<h3>\r\n\tFeatures:<\/h3>\r\n<p>\r\n\tUnrivaled display performance<\/p>\r\n<ul>\r\n\t<li>\r\n\t\t30-inch (viewable) active-matrix liquid crystal display provides breathtaking image quality and vivid, richly saturated color.<\/li>\r\n\t<li>\r\n\t\tSupport for 2560-by-1600 pixel resolution for display of high definition still and video imagery.<\/li>\r\n\t<li>\r\n\t\tWide-format design for simultaneous display of two full pages of text and graphics.<\/li>\r\n\t<li>\r\n\t\tIndustry standard DVI connector for direct attachment to Mac- and Windows-based desktops and notebooks<\/li>\r\n\t<li>\r\n\t\tIncredibly wide (170 degree) horizontal and vertical viewing angle for maximum visibility and color performance.<\/li>\r\n\t<li>\r\n\t\tLightning-fast pixel response for full-motion digital video playback.<\/li>\r\n\t<li>\r\n\t\tSupport for 16.7 million saturated colors, for use in all graphics-intensive applications.<\/li>\r\n<\/ul>\r\n<p>\r\n\tSimple setup and operation<\/p>\r\n<ul>\r\n\t<li>\r\n\t\tSingle cable with elegant breakout for connection to DVI, USB and FireWire ports<\/li>\r\n\t<li>\r\n\t\tBuilt-in two-port USB 2.0 hub for easy connection of desktop peripheral devices.<\/li>\r\n\t<li>\r\n\t\tTwo FireWire 400 ports to support iSight and other desktop peripherals<\/li>\r\n<\/ul>\r\n<p>\r\n\tSleek, elegant design<\/p>\r\n<ul>\r\n\t<li>\r\n\t\tHuge virtual workspace, very small footprint.<\/li>\r\n\t<li>\r\n\t\tNarrow Bezel design to minimize visual impact of using dual displays<\/li>\r\n\t<li>\r\n\t\tUnique hinge design for effortless adjustment<\/li>\r\n\t<li>\r\n\t\tSupport for VESA mounting solutions (Apple Cinema Display VESA Mount Adapter sold separately)<\/li>\r\n<\/ul>\r\n<h3>\r\n\tTechnical specifications<\/h3>\r\n<p>\r\n\t<b>Screen size (diagonal viewable image size)<\/b><\/p>\r\n<ul>\r\n\t<li>\r\n\t\tApple Cinema HD Display: 30 inches (29.7-inch viewable)<\/li>\r\n<\/ul>\r\n<p>\r\n\t<b>Screen type<\/b><\/p>\r\n<ul>\r\n\t<li>\r\n\t\tThin film transistor (TFT) active-matrix liquid crystal display (AMLCD)<\/li>\r\n<\/ul>\r\n<p>\r\n\t<b>Resolutions<\/b><\/p>\r\n<ul>\r\n\t<li>\r\n\t\t2560 x 1600 pixels (optimum resolution)<\/li>\r\n\t<li>\r\n\t\t2048 x 1280<\/li>\r\n\t<li>\r\n\t\t1920 x 1200<\/li>\r\n\t<li>\r\n\t\t1280 x 800<\/li>\r\n\t<li>\r\n\t\t1024 x 640<\/li>\r\n<\/ul>\r\n<p>\r\n\t<b>Display colors (maximum)<\/b><\/p>\r\n<ul>\r\n\t<li>\r\n\t\t16.7 million<\/li>\r\n<\/ul>\r\n<p>\r\n\t<b>Viewing angle (typical)<\/b><\/p>\r\n<ul>\r\n\t<li>\r\n\t\t170\u00b0 horizontal; 170\u00b0 vertical<\/li>\r\n<\/ul>\r\n<p>\r\n\t<b>Brightness (typical)<\/b><\/p>\r\n<ul>\r\n\t<li>\r\n\t\t30-inch Cinema HD Display: 400 cd\/m2<\/li>\r\n<\/ul>\r\n<p>\r\n\t<b>Contrast ratio (typical)<\/b><\/p>\r\n<ul>\r\n\t<li>\r\n\t\t700:1<\/li>\r\n<\/ul>\r\n<p>\r\n\t<b>Response time (typical)<\/b><\/p>\r\n<ul>\r\n\t<li>\r\n\t\t16 ms<\/li>\r\n<\/ul>\r\n<p>\r\n\t<b>Pixel pitch<\/b><\/p>\r\n<ul>\r\n\t<li>\r\n\t\t30-inch Cinema HD Display: 0.250 mm<\/li>\r\n<\/ul>\r\n<p>\r\n\t<b>Screen treatment<\/b><\/p>\r\n<ul>\r\n\t<li>\r\n\t\tAntiglare hardcoat<\/li>\r\n<\/ul>\r\n<p>\r\n\t<b>User controls (hardware and software)<\/b><\/p>\r\n<ul>\r\n\t<li>\r\n\t\tDisplay Power,<\/li>\r\n\t<li>\r\n\t\tSystem sleep, wake<\/li>\r\n\t<li>\r\n\t\tBrightness<\/li>\r\n\t<li>\r\n\t\tMonitor tilt<\/li>\r\n<\/ul>\r\n<p>\r\n\t<b>Connectors and cables<\/b><br>\r\n\tCable<\/p>\r\n<ul>\r\n\t<li>\r\n\t\tDVI (Digital Visual Interface)<\/li>\r\n\t<li>\r\n\t\tFireWire 400<\/li>\r\n\t<li>\r\n\t\tUSB 2.0<\/li>\r\n\t<li>\r\n\t\tDC power (24 V)<\/li>\r\n<\/ul>\r\n<p>\r\n\tConnectors<\/p>\r\n<ul>\r\n\t<li>\r\n\t\tTwo-port, self-powered USB 2.0 hub<\/li>\r\n\t<li>\r\n\t\tTwo FireWire 400 ports<\/li>\r\n\t<li>\r\n\t\tKensington security port<\/li>\r\n<\/ul>\r\n<p>\r\n\t<b>VESA mount adapter<\/b><br>\r\n\tRequires optional Cinema Display VESA Mount Adapter (M9649G\/A)<\/p>\r\n<ul>\r\n\t<li>\r\n\t\tCompatible with VESA FDMI (MIS-D, 100, C) compliant mounting solutions<\/li>\r\n<\/ul>\r\n<p>\r\n\t<b>Electrical requirements<\/b><\/p>\r\n<ul>\r\n\t<li>\r\n\t\tInput voltage: 100-240 VAC 50-60Hz<\/li>\r\n\t<li>\r\n\t\tMaximum power when operating: 150W<\/li>\r\n\t<li>\r\n\t\tEnergy saver mode: 3W or less<\/li>\r\n<\/ul>\r\n<p>\r\n\t<b>Environmental requirements<\/b><\/p>\r\n<ul>\r\n\t<li>\r\n\t\tOperating temperature: 50\u00b0 to 95\u00b0 F (10\u00b0 to 35\u00b0 C)<\/li>\r\n\t<li>\r\n\t\tStorage temperature: -40\u00b0 to 116\u00b0 F (-40\u00b0 to 47\u00b0 C)<\/li>\r\n\t<li>\r\n\t\tOperating humidity: 20% to 80% noncondensing<\/li>\r\n\t<li>\r\n\t\tMaximum operating altitude: 10,000 feet<\/li>\r\n<\/ul>\r\n<p>\r\n\t<b>Agency approvals<\/b><\/p>\r\n<ul>\r\n\t<li>\r\n\t\tFCC Part 15 Class B<\/li>\r\n\t<li>\r\n\t\tEN55022 Class B<\/li>\r\n\t<li>\r\n\t\tEN55024<\/li>\r\n\t<li>\r\n\t\tVCCI Class B<\/li>\r\n\t<li>\r\n\t\tAS\/NZS 3548 Class B<\/li>\r\n\t<li>\r\n\t\tCNS 13438 Class B<\/li>\r\n\t<li>\r\n\t\tICES-003 Class B<\/li>\r\n\t<li>\r\n\t\tISO 13406 part 2<\/li>\r\n\t<li>\r\n\t\tMPR II<\/li>\r\n\t<li>\r\n\t\tIEC 60950<\/li>\r\n\t<li>\r\n\t\tUL 60950<\/li>\r\n\t<li>\r\n\t\tCSA 60950<\/li>\r\n\t<li>\r\n\t\tEN60950<\/li>\r\n\t<li>\r\n\t\tENERGY STAR<\/li>\r\n\t<li>\r\n\t\tTCO '03<\/li>\r\n<\/ul>\r\n<p>\r\n\t<b>Size and weight<\/b><br>\r\n\t30-inch Apple Cinema HD Display<\/p>\r\n<ul>\r\n\t<li>\r\n\t\tHeight: 21.3 inches (54.3 cm)<\/li>\r\n\t<li>\r\n\t\tWidth: 27.2 inches (68.8 cm)<\/li>\r\n\t<li>\r\n\t\tDepth: 8.46 inches (21.5 cm)<\/li>\r\n\t<li>\r\n\t\tWeight: 27.5 pounds (12.5 kg)<\/li>\r\n<\/ul>\r\n<p>\r\n\t<b>System Requirements<\/b><\/p>\r\n<ul>\r\n\t<li>\r\n\t\tMac Pro, all graphic options<\/li>\r\n\t<li>\r\n\t\tMacBook Pro<\/li>\r\n\t<li>\r\n\t\tPower Mac G5 (PCI-X) with ATI Radeon 9650 or better or NVIDIA GeForce 6800 GT DDL or better<\/li>\r\n\t<li>\r\n\t\tPower Mac G5 (PCI Express), all graphics options<\/li>\r\n\t<li>\r\n\t\tPowerBook G4 with dual-link DVI support<\/li>\r\n\t<li>\r\n\t\tWindows PC and graphics card that supports DVI ports with dual-link digital bandwidth and VESA DDC standard for plug-and-play setup<\/li>\r\n<\/ul>\r\n",
66
"model": "Product 15",
77
"stock": true,
88
"price": "95.72\u20ac",
99
"special": "86.31\u20ac",
1010
"image": "https:\/\/opencart.vuefront.com\/image\/cache\/catalog\/demo\/apple_cinema_30-228x228.jpg",
11+
"keyword": "seo-url",
1112
"reviews": [{
1213
"author": "John Doe",
1314
"author_email": "",

.storybook/webpack.config.js

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,20 @@ module.exports = async({ config, mode }) => {
1010

1111
config.module.rules.push({
1212
test: /\.scss$/,
13-
use: ['style-loader', 'css-loader', { loader: 'postcss-loader', options: { config: { path: path.resolve(__dirname, './') } } }, 'sass-loader'],
13+
use: ['style-loader', 'css-loader',
14+
{ loader: 'postcss-loader', options: { config: { path: path.resolve(__dirname, './') } } },
15+
{
16+
loader: 'sass-loader',
17+
options: {
18+
additionalData: `
19+
@import "~bootstrap/scss/functions";
20+
@import "~vuefront/assets/scss/variables";
21+
@import "~bootstrap/scss/variables";
22+
@import "~bootstrap/scss/mixins";
23+
`
24+
}
25+
}
26+
],
1427
include: path.resolve(__dirname, '../'),
1528
});
1629

0 commit comments

Comments
 (0)