diff --git a/package.json b/package.json new file mode 100644 index 00000000..82bd1320 --- /dev/null +++ b/package.json @@ -0,0 +1,37 @@ +{ + "name": "test-profite", + "version": "1.0.0", + "description": "Teste para admissão na empresa Profit-e", + "main": "index.js", + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject", + "build-css": "node-sass src/ -o src/", + "watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/henriqueViana/get-devs.git" + }, + "author": "Henrique Viana ", + "license": "ISC", + "bugs": { + "url": "https://github.com/henriqueViana/get-devs/issues" + }, + "homepage": "https://github.com/henriqueViana/get-devs#readme", + "devDependencies": { + "font-awesome": "^4.7.0", + "node-sass": "^4.5.2", + "react": "^15.5.4", + "react-dom": "^15.5.4", + "react-redux": "^5.0.4", + "react-router-dom": "^4.1.1", + "react-scripts": "^0.9.5", + "redux": "^3.6.0", + "redux-multi": "^0.1.12", + "redux-thunk": "^2.2.0", + "style-it": "^1.6.7" + } +} diff --git a/public/index.html b/public/index.html new file mode 100644 index 00000000..8be9bb13 --- /dev/null +++ b/public/index.html @@ -0,0 +1,11 @@ + + + + + + Teste Profit-e + + +
+ + diff --git a/src/assets/images/icon_bag.png b/src/assets/images/icon_bag.png new file mode 100644 index 00000000..0da51c36 Binary files /dev/null and b/src/assets/images/icon_bag.png differ diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png new file mode 100644 index 00000000..1eb53054 Binary files /dev/null and b/src/assets/images/logo.png differ diff --git a/src/assets/images/model1.png b/src/assets/images/model1.png new file mode 100644 index 00000000..2b78cd9e Binary files /dev/null and b/src/assets/images/model1.png differ diff --git a/src/assets/images/model2.png b/src/assets/images/model2.png new file mode 100644 index 00000000..f16b4f06 Binary files /dev/null and b/src/assets/images/model2.png differ diff --git a/src/assets/images/model3.png b/src/assets/images/model3.png new file mode 100644 index 00000000..0c2b1dc4 Binary files /dev/null and b/src/assets/images/model3.png differ diff --git a/src/assets/images/model4.png b/src/assets/images/model4.png new file mode 100644 index 00000000..47f59ae1 Binary files /dev/null and b/src/assets/images/model4.png differ diff --git a/src/assets/images/model5.png b/src/assets/images/model5.png new file mode 100644 index 00000000..5b32d68b Binary files /dev/null and b/src/assets/images/model5.png differ diff --git a/src/assets/images/model6.png b/src/assets/images/model6.png new file mode 100644 index 00000000..5976d111 Binary files /dev/null and b/src/assets/images/model6.png differ diff --git a/src/assets/images/model7.png b/src/assets/images/model7.png new file mode 100644 index 00000000..9ac567ca Binary files /dev/null and b/src/assets/images/model7.png differ diff --git a/src/assets/images/model8.png b/src/assets/images/model8.png new file mode 100644 index 00000000..38434c01 Binary files /dev/null and b/src/assets/images/model8.png differ diff --git a/src/assets/images/model9.png b/src/assets/images/model9.png new file mode 100644 index 00000000..3a8337f7 Binary files /dev/null and b/src/assets/images/model9.png differ diff --git a/src/assets/stylesheets/base/all.css b/src/assets/stylesheets/base/all.css new file mode 100644 index 00000000..3a550232 --- /dev/null +++ b/src/assets/stylesheets/base/all.css @@ -0,0 +1,28 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; } + +html, +body { + height: 100%; + font-family: sans-serif; } + +.inner-content { + width: 940px; + margin-left: auto; + margin-right: auto; } + +h1 { + font-size: 30px; + font-weight: 300; } + +h3 { + font-size: 20px; + font-weight: 300; } + +@media (max-width: 990px) { + .inner-content { + width: 100%; + padding-left: 20px; + padding-right: 20px; } } diff --git a/src/assets/stylesheets/base/all.scss b/src/assets/stylesheets/base/all.scss new file mode 100644 index 00000000..92d11a3b --- /dev/null +++ b/src/assets/stylesheets/base/all.scss @@ -0,0 +1,2 @@ +@import 'default.scss'; +@import 'highlights.scss'; \ No newline at end of file diff --git a/src/assets/stylesheets/base/default.css b/src/assets/stylesheets/base/default.css new file mode 100644 index 00000000..3a550232 --- /dev/null +++ b/src/assets/stylesheets/base/default.css @@ -0,0 +1,28 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; } + +html, +body { + height: 100%; + font-family: sans-serif; } + +.inner-content { + width: 940px; + margin-left: auto; + margin-right: auto; } + +h1 { + font-size: 30px; + font-weight: 300; } + +h3 { + font-size: 20px; + font-weight: 300; } + +@media (max-width: 990px) { + .inner-content { + width: 100%; + padding-left: 20px; + padding-right: 20px; } } diff --git a/src/assets/stylesheets/base/default.scss b/src/assets/stylesheets/base/default.scss new file mode 100644 index 00000000..838ebc55 --- /dev/null +++ b/src/assets/stylesheets/base/default.scss @@ -0,0 +1,36 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + +} + +html, +body{ + height: 100%; + font-family: sans-serif; +} + +.inner-content{ + width: 940px; + margin-left: auto; + margin-right: auto; +} + +h1{ + font-size: 30px; + font-weight: 300; +} + +h3{ + font-size: 20px; + font-weight: 300; +} + +@media(max-width: 990px){ + .inner-content{ + width: 100%; + padding-left: 20px; + padding-right: 20px; + } +} \ No newline at end of file diff --git a/src/assets/stylesheets/base/highlights.css b/src/assets/stylesheets/base/highlights.css new file mode 100644 index 00000000..e69de29b diff --git a/src/assets/stylesheets/base/highlights.scss b/src/assets/stylesheets/base/highlights.scss new file mode 100644 index 00000000..befdc9f6 --- /dev/null +++ b/src/assets/stylesheets/base/highlights.scss @@ -0,0 +1,8 @@ +$orange: #ff9f1c; +$dark-orange: #e68c10; +$light: #ffffff; +$light-gray: #b0b0b0; +$medium-gray: #666666; + +$bg-footer: #000000; +$font-light: #ffffff; \ No newline at end of file diff --git a/src/assets/stylesheets/components/all.scss b/src/assets/stylesheets/components/all.scss new file mode 100644 index 00000000..2eb08402 --- /dev/null +++ b/src/assets/stylesheets/components/all.scss @@ -0,0 +1,9 @@ +@import 'dresses.scss'; +@import 'buttonCart.scss'; +@import 'filterSort.scss'; +@import 'buttonMore.scss'; +@import 'radioButton.scss'; +@import 'checkboxSizes.scss'; +@import 'checkboxSizeList.scss'; +@import 'buttonCloseFilterAndSort.scss'; +@import 'buttonSortMobile.scss'; diff --git a/src/assets/stylesheets/components/buttonCart.css b/src/assets/stylesheets/components/buttonCart.css new file mode 100644 index 00000000..d4e5e2fb --- /dev/null +++ b/src/assets/stylesheets/components/buttonCart.css @@ -0,0 +1,11 @@ +.button-cart { + width: 52px; + height: 34px; + background-color: #ff9f1c; + text-align: center; + color: #ffffff; + cursor: pointer; + border: none; + transition: background-color .2s ease-in-out; } + .button-cart:hover { + background-color: #e68c10; } diff --git a/src/assets/stylesheets/components/buttonCart.scss b/src/assets/stylesheets/components/buttonCart.scss new file mode 100644 index 00000000..8b445c8b --- /dev/null +++ b/src/assets/stylesheets/components/buttonCart.scss @@ -0,0 +1,17 @@ +@import '../base/highlights.scss'; + +.button-cart{ + width: 52px; + height: 34px; + background-color: $orange; + text-align: center; + color: $font-light; + cursor: pointer; + border: none; + transition: background-color .2s ease-in-out; + + &:hover{ + background-color: $dark-orange; + } + +} \ No newline at end of file diff --git a/src/assets/stylesheets/components/buttonCloseFilterAndSort.css b/src/assets/stylesheets/components/buttonCloseFilterAndSort.css new file mode 100644 index 00000000..d8dfd2d9 --- /dev/null +++ b/src/assets/stylesheets/components/buttonCloseFilterAndSort.css @@ -0,0 +1,17 @@ +.close-filter { + width: 100%; + height: 60px; + line-height: 60px; + padding-left: 20px; + padding-right: 20px; + display: flex; + justify-content: space-between; + cursor: pointer; + border-bottom: 1px solid #666666; } + .close-filter .label-filters { + color: #666666; + text-transform: uppercase; } + .close-filter .icons { + transform: rotate(45deg); + font-weight: 300; + font-size: 25px; } diff --git a/src/assets/stylesheets/components/buttonCloseFilterAndSort.scss b/src/assets/stylesheets/components/buttonCloseFilterAndSort.scss new file mode 100644 index 00000000..c57e9871 --- /dev/null +++ b/src/assets/stylesheets/components/buttonCloseFilterAndSort.scss @@ -0,0 +1,24 @@ +@import '../base/highlights.scss'; + +.close-filter{ + width: 100%; + height: 60px; + line-height: 60px; + padding-left: 20px; + padding-right: 20px; + display: flex; + justify-content: space-between; + cursor: pointer; + border-bottom: 1px solid $medium-gray; + + .label-filters{ + color: $medium-gray; + text-transform: uppercase; + } + + .icons{ + transform: rotate(45deg); + font-weight: 300; + font-size: 25px; + } +} diff --git a/src/assets/stylesheets/components/buttonMore.css b/src/assets/stylesheets/components/buttonMore.css new file mode 100644 index 00000000..8f1417ae --- /dev/null +++ b/src/assets/stylesheets/components/buttonMore.css @@ -0,0 +1,22 @@ +.button-more { + margin-top: 10px; + margin-bottom: 60px; + margin-left: calc(50% - 130px); + background-color: #ff9f1c; + color: #ffffff; + text-transform: uppercase; + width: 260px; + height: 45px; + line-height: 45px; + border: none; + cursor: pointer; + transition: background-color .2s ease-in-out; } + .button-more:hover { + background-color: #e68c10; } + .button-more.hide-true { + display: none; } + +@media (max-width: 680px) { + .button-more { + width: 100%; + margin-left: 0; } } diff --git a/src/assets/stylesheets/components/buttonMore.scss b/src/assets/stylesheets/components/buttonMore.scss new file mode 100644 index 00000000..b0c89504 --- /dev/null +++ b/src/assets/stylesheets/components/buttonMore.scss @@ -0,0 +1,31 @@ +@import '../base/highlights.scss'; + +.button-more{ + margin-top: 10px; + margin-bottom: 60px; + margin-left: calc(50% - 130px); + background-color: $orange; + color: $font-light; + text-transform: uppercase; + width: 260px; + height: 45px; + line-height: 45px; + border: none; + cursor: pointer; + transition: background-color .2s ease-in-out; + + &:hover{ + background-color: $dark-orange; + } + + &.hide-true{ + display: none; + } +} + +@media(max-width: 680px){ + .button-more{ + width: 100%; + margin-left: 0; + } +} \ No newline at end of file diff --git a/src/assets/stylesheets/components/buttonSortMobile.scss b/src/assets/stylesheets/components/buttonSortMobile.scss new file mode 100644 index 00000000..c26af62a --- /dev/null +++ b/src/assets/stylesheets/components/buttonSortMobile.scss @@ -0,0 +1,24 @@ +@import '../base/highlights.scss'; + +.button-sort-mobile{ + width: 100%; + height: 60px; + line-height: 60px; + padding-left: 20px; + padding-right: 20px; + cursor: pointer; + position: relative; + + &:hover{ + background-color: $orange; + color: $font-light; + } +} + +.trigger{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} \ No newline at end of file diff --git a/src/assets/stylesheets/components/checkboxSizeList.css b/src/assets/stylesheets/components/checkboxSizeList.css new file mode 100644 index 00000000..55640806 --- /dev/null +++ b/src/assets/stylesheets/components/checkboxSizeList.css @@ -0,0 +1,14 @@ +.box-sizes { + width: 160px; + height: auto; + display: flex; + justify-content: space-between; + flex-flow: row wrap; + align-content: flex-start; } + .box-sizes .flex-null { + width: 30px; + height: 0; + margin-right: 10px; } + +.box-sizes.mobile { + margin-left: calc(50% - 100px); } diff --git a/src/assets/stylesheets/components/checkboxSizeList.scss b/src/assets/stylesheets/components/checkboxSizeList.scss new file mode 100644 index 00000000..487c98f0 --- /dev/null +++ b/src/assets/stylesheets/components/checkboxSizeList.scss @@ -0,0 +1,18 @@ +.box-sizes{ + width: 160px; + height: auto; + display: flex; + justify-content: space-between; + flex-flow: row wrap; + align-content: flex-start; + + .flex-null{ + width: 30px; + height: 0; + margin-right: 10px; + } +} + +.box-sizes.mobile{ + margin-left: calc(50% - 100px); +} \ No newline at end of file diff --git a/src/assets/stylesheets/components/checkboxSizes.css b/src/assets/stylesheets/components/checkboxSizes.css new file mode 100644 index 00000000..4a20c091 --- /dev/null +++ b/src/assets/stylesheets/components/checkboxSizes.css @@ -0,0 +1,31 @@ +.content-check { + width: 30px; + height: 30px; + margin-right: 10px; + margin-bottom: 10px; + position: relative; + font-family: 'Open Sans', arial; } + .content-check .label-check { + position: absolute; + color: #b0b0b0; + font-size: 12px; + margin: auto; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); } + .content-check .checks { + width: 30px; + height: 30px; + cursor: pointer; + position: relative; + border: 1px solid #b0b0b0; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + z-index: 5; } + .content-check .checks:checked { + border: 1px solid #ff9f1c; } + .content-check .checks:checked ~ .label-check { + color: #000; } diff --git a/src/assets/stylesheets/components/checkboxSizes.scss b/src/assets/stylesheets/components/checkboxSizes.scss new file mode 100644 index 00000000..794e0d9a --- /dev/null +++ b/src/assets/stylesheets/components/checkboxSizes.scss @@ -0,0 +1,43 @@ +@import '../base/highlights.scss'; +.content-check{ + width: 30px; + height: 30px; + margin-right: 10px; + margin-bottom: 10px; + position: relative; + font-family: 'Open Sans', arial; + + .label-check{ + position: absolute; + color: $light-gray; + font-size: 12px; + margin: auto; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + } + + .checks { + width: 30px; + height: 30px; + cursor: pointer; + position: relative; + border: 1px solid $light-gray; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + z-index: 5; + + } + + .checks:checked { + border: 1px solid $orange; + } + + .checks:checked ~ .label-check{ + color: #000 + } + +} diff --git a/src/assets/stylesheets/components/dresses.css b/src/assets/stylesheets/components/dresses.css new file mode 100644 index 00000000..9fe19dc3 --- /dev/null +++ b/src/assets/stylesheets/components/dresses.css @@ -0,0 +1,19 @@ +.dress { + margin-bottom: 50px; } + .dress-name { + text-align: center; + text-transform: uppercase; + margin-top: 10px; + margin-bottom: 30px; } + .dress .container-price { + display: flex; + margin-left: 25px; } + .dress .container-price .price { + text-align: right; + margin-right: 15px; + font-family: 'Baskerville'; + font-size: 14px; } + .dress .container-price .price .sale-price { + font-weight: bold; + font-size: 16px; + margin-bottom: 3px; } diff --git a/src/assets/stylesheets/components/dresses.scss b/src/assets/stylesheets/components/dresses.scss new file mode 100644 index 00000000..7f2829be --- /dev/null +++ b/src/assets/stylesheets/components/dresses.scss @@ -0,0 +1,29 @@ +.dress{ + margin-bottom: 50px; + + &-name{ + text-align: center; + text-transform: uppercase; + margin-top: 10px; + margin-bottom: 30px; + } + + .container-price{ + display: flex; + margin-left: 25px; + + .price{ + text-align: right; + margin-right: 15px; + font-family: 'Baskerville'; + font-size: 14px; + + .sale-price{ + font-weight: bold; + font-size: 16px; + margin-bottom: 3px; + } + + } + } +} \ No newline at end of file diff --git a/src/assets/stylesheets/components/filterSort.scss b/src/assets/stylesheets/components/filterSort.scss new file mode 100644 index 00000000..ebfcf718 --- /dev/null +++ b/src/assets/stylesheets/components/filterSort.scss @@ -0,0 +1,53 @@ +@import '../base/highlights.scss'; + +.filter-order{ + position: absolute; + right: 0; + top: 0; + width: 125px; + font-size: 12px; + border: 1px solid black; + font-family: 'Open Sans', arial; + + .options{ + padding: 10px; + cursor: pointer; + background-color: $light; + display: none; + + &.open{ + display: block; + } + + &:not(.label):hover{ + background-color: $orange; + color: $font-light; + } + } + + .options.label{ + display: block; + + &.open{ + border-bottom: 1px solid black; + } + .angle{ + font-size: 16px; + position: absolute; + top: 8px; + right: 10px; + } + } +} + +@media(max-width: 990px){ + .filter-order{ + right: 20px; + } +} + +@media(max-width: 680px){ + .filter-order{ + display: none; + } +} \ No newline at end of file diff --git a/src/assets/stylesheets/components/radioButton.scss b/src/assets/stylesheets/components/radioButton.scss new file mode 100644 index 00000000..1ca98557 --- /dev/null +++ b/src/assets/stylesheets/components/radioButton.scss @@ -0,0 +1,33 @@ +@import '../base/highlights.scss'; + +.box-radio{ + margin-bottom: 5px; + font-family: 'Open Sans', arial; + font-size: 14px; +} + +.radio-buttons{ + cursor: pointer; + position: relative; + padding: 2px; + border: 1px solid $light-gray; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + margin-right: 10px; + +} + +.radio-buttons:after{ + content: ''; + width: 8px; + height: 8px; + display: block; +} + +.radio-buttons:checked:after{ + background-color: $orange; + box-shadow: 0 0 0 transparent !important; + +} + diff --git a/src/assets/stylesheets/pages/all.css b/src/assets/stylesheets/pages/all.css new file mode 100644 index 00000000..45a156ca --- /dev/null +++ b/src/assets/stylesheets/pages/all.css @@ -0,0 +1,7 @@ +.content-page { + display: flex; + position: relative; } + +@media (max-width: 680px) { + .content-page { + position: initial; } } diff --git a/src/assets/stylesheets/pages/all.scss b/src/assets/stylesheets/pages/all.scss new file mode 100644 index 00000000..63c8f1ac --- /dev/null +++ b/src/assets/stylesheets/pages/all.scss @@ -0,0 +1 @@ +@import 'index.scss'; diff --git a/src/assets/stylesheets/pages/index.css b/src/assets/stylesheets/pages/index.css new file mode 100644 index 00000000..45a156ca --- /dev/null +++ b/src/assets/stylesheets/pages/index.css @@ -0,0 +1,7 @@ +.content-page { + display: flex; + position: relative; } + +@media (max-width: 680px) { + .content-page { + position: initial; } } diff --git a/src/assets/stylesheets/pages/index.scss b/src/assets/stylesheets/pages/index.scss new file mode 100644 index 00000000..b1227081 --- /dev/null +++ b/src/assets/stylesheets/pages/index.scss @@ -0,0 +1,10 @@ +.content-page{ + display: flex; + position: relative; +} + +@media(max-width: 680px){ + .content-page{ + position: initial; + } +} \ No newline at end of file diff --git a/src/assets/stylesheets/templates/all.css b/src/assets/stylesheets/templates/all.css new file mode 100644 index 00000000..f188d3aa --- /dev/null +++ b/src/assets/stylesheets/templates/all.css @@ -0,0 +1,186 @@ +.header { + width: 100%; + height: 100px; + border-bottom: 2px solid #ff9f1c; + padding-top: 35px; + margin-bottom: 40px; } + .header-content { + display: flex; + justify-content: space-between; + height: 30px; } + .header .bag { + position: relative; + margin-right: 15px; } + .header .bag .counter { + position: absolute; + top: 7px; + right: -16px; + width: 20px; + height: 20px; + line-height: 20px; + background-color: #ff9f1c; + border-radius: 50%; + color: #ffffff; + text-align: center; + font-size: 13px; } + +.footer { + width: 100%; + height: 35px; + line-height: 35px; + background-color: #000000; + text-align: center; + color: #ffffff; } + +.sidebar { + width: 220px; + height: 100%; + margin-bottom: 40px; } + .sidebar .title { + margin-bottom: 65px; + text-transform: uppercase; } + .sidebar .sub-title { + margin-bottom: 40px; + text-transform: uppercase; } + .sidebar .set-size, + .sidebar .set-color { + margin-bottom: 60px; } + .sidebar .more-colors { + margin-top: 15px; + font-size: 14px; + color: #666666; + cursor: pointer; } + .sidebar .more-colors:hover { + text-decoration: underline; } + +@media (max-width: 680px) { + .sidebar { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: darkred; + display: none; } + .sidebar.open { + display: block; } } + +.box-products { + width: 100%; + height: auto; } + .box-products .title-mobile { + display: none; + text-align: center; + margin-bottom: 20px; } + .box-products .buttons-mobile { + display: none; + width: 100%; } + .box-products .products { + width: 100%; + height: auto; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + padding-left: 20px; + margin-top: 100px; } + +.loading { + color: #ff9f1c; + display: none; } + .loading.open { + display: block; } + +@media (max-width: 910px) { + .box-products .products { + justify-content: space-around; } } + +@media (max-width: 680px) { + .box-products .title-mobile { + display: block; + text-transform: uppercase; } + .box-products .buttons-mobile { + display: flex; } + .box-products .buttons-mobile div { + height: 50px; + width: 50%; + line-height: 50px; + border: 1px solid #666666; + color: #666666; + text-align: center; + cursor: pointer; + transition: background-color .2s ease-in-out, color .2s ease-in-out, border .2s ease-in-out; } + .box-products .buttons-mobile div:hover { + background-color: #ff9f1c; + color: #ffffff; + border: 1px solid #ff9f1c; } } + +.bg-mobile-filter { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + background: #ffffff; + z-index: 1; + display: none; } + +.filter-mobile { + width: 100%; + min-height: 100%; + height: auto; + padding-bottom: 20px; + position: absolute; + top: 0; + left: 0; + background-color: #ffffff; + display: none; + z-index: 5; } + .filter-mobile .close-filter, + .filter-mobile .open-close-filters { + width: 100%; + height: 60px; + line-height: 60px; + padding-left: 20px; + padding-right: 20px; + display: flex; + justify-content: space-between; + cursor: pointer; } + .filter-mobile .close-filter { + border-bottom: 1px solid #666666; } + .filter-mobile .close-filter .label-filters { + color: #666666; } + .filter-mobile .close-filter .icons { + transform: rotate(45deg); } + .filter-mobile .open-close-filters:hover { + background-color: #ff9f1c; + color: #ffffff; } + .filter-mobile .label-filters { + text-transform: uppercase; } + .filter-mobile .icons { + font-weight: 300; + font-size: 25px; } + .filter-mobile .content-filters { + width: 100%; + height: auto; + padding: 10px 20px; + display: none; } + .filter-mobile .content-filters.open { + display: block; } + +@media (max-width: 680px) { + .filter-mobile.open, + .bg-mobile-filter.open { + display: block; } } + +.sort-mobile { + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + background-color: #fff; + display: none; } + +@media (max-width: 680px) { + .sort-mobile.open { + display: block; } } diff --git a/src/assets/stylesheets/templates/all.scss b/src/assets/stylesheets/templates/all.scss new file mode 100644 index 00000000..c5442464 --- /dev/null +++ b/src/assets/stylesheets/templates/all.scss @@ -0,0 +1,6 @@ +@import 'header.scss'; +@import 'footer.scss'; +@import 'sidebar.scss'; +@import 'products.scss'; +@import 'filterMobile.scss'; +@import 'sortMobile.scss'; \ No newline at end of file diff --git a/src/assets/stylesheets/templates/filterMobile.css b/src/assets/stylesheets/templates/filterMobile.css new file mode 100644 index 00000000..ddc75fff --- /dev/null +++ b/src/assets/stylesheets/templates/filterMobile.css @@ -0,0 +1,57 @@ +.bg-mobile-filter { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + background: #ffffff; + z-index: 1; + display: none; } + +.filter-mobile { + width: 100%; + min-height: 100%; + height: auto; + padding-bottom: 20px; + position: absolute; + top: 0; + left: 0; + background-color: #ffffff; + display: none; + z-index: 5; } + .filter-mobile .close-filter, + .filter-mobile .open-close-filters { + width: 100%; + height: 60px; + line-height: 60px; + padding-left: 20px; + padding-right: 20px; + display: flex; + justify-content: space-between; + cursor: pointer; } + .filter-mobile .close-filter { + border-bottom: 1px solid #666666; } + .filter-mobile .close-filter .label-filters { + color: #666666; } + .filter-mobile .close-filter .icons { + transform: rotate(45deg); } + .filter-mobile .open-close-filters:hover { + background-color: #ff9f1c; + color: #ffffff; } + .filter-mobile .label-filters { + text-transform: uppercase; } + .filter-mobile .icons { + font-weight: 300; + font-size: 25px; } + .filter-mobile .content-filters { + width: 100%; + height: auto; + padding: 10px 20px; + display: none; } + .filter-mobile .content-filters.open { + display: block; } + +@media (max-width: 680px) { + .filter-mobile.open, + .bg-mobile-filter.open { + display: block; } } diff --git a/src/assets/stylesheets/templates/filterMobile.scss b/src/assets/stylesheets/templates/filterMobile.scss new file mode 100644 index 00000000..383c5f2d --- /dev/null +++ b/src/assets/stylesheets/templates/filterMobile.scss @@ -0,0 +1,82 @@ +@import '../base/highlights.scss'; + +.bg-mobile-filter{ + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + background: $light; + z-index: 1; + display: none; +} + +.filter-mobile{ + width: 100%; + min-height: 100%; + height: auto; + padding-bottom: 20px; + position: absolute; + top: 0; + left: 0; + background-color: $light; + display: none; + z-index: 5; + + .close-filter , + .open-close-filters{ + width: 100%; + height: 60px; + line-height: 60px; + padding-left: 20px; + padding-right: 20px; + display: flex; + justify-content: space-between; + cursor: pointer; + } + + .close-filter{ + border-bottom: 1px solid $medium-gray; + + .label-filters{ + color: $medium-gray; + } + + .icons{ + transform: rotate(45deg); + } + + } + + .open-close-filters:hover{ + background-color: $orange; + color: $font-light; + } + + .label-filters{ + text-transform: uppercase; + } + + .icons{ + font-weight: 300; + font-size: 25px; + } + + .content-filters{ + width: 100%; + height: auto; + padding: 10px 20px; + display: none; + } + + .content-filters.open{ + display: block; + } +} + +@media(max-width: 680px){ + .filter-mobile.open , + .bg-mobile-filter.open{ + display: block; + } +} \ No newline at end of file diff --git a/src/assets/stylesheets/templates/footer.scss b/src/assets/stylesheets/templates/footer.scss new file mode 100644 index 00000000..6b72fe3f --- /dev/null +++ b/src/assets/stylesheets/templates/footer.scss @@ -0,0 +1,10 @@ +@import '../base/highlights.scss'; + +.footer{ + width: 100%; + height: 35px; + line-height: 35px; + background-color: $bg-footer; + text-align: center; + color: $font-light; +} \ No newline at end of file diff --git a/src/assets/stylesheets/templates/header.scss b/src/assets/stylesheets/templates/header.scss new file mode 100644 index 00000000..f7a65630 --- /dev/null +++ b/src/assets/stylesheets/templates/header.scss @@ -0,0 +1,37 @@ +@import '../base/highlights.scss'; + +.header{ + width: 100%; + height: 100px; + border-bottom: 2px solid $orange; + padding-top: 35px; + margin-bottom: 40px; + + &-content{ + display: flex; + justify-content: space-between; + height: 30px; + } + + .bag{ + position: relative; + margin-right: 15px; + + .counter{ + position: absolute; + top: 7px; + right: -16px; + width: 20px; + height: 20px; + line-height: 20px; + background-color: $orange; + border-radius: 50%; + color: $font-light; + text-align: center; + font-size: 13px; + } + } + + + +} \ No newline at end of file diff --git a/src/assets/stylesheets/templates/products.scss b/src/assets/stylesheets/templates/products.scss new file mode 100644 index 00000000..49c22eb8 --- /dev/null +++ b/src/assets/stylesheets/templates/products.scss @@ -0,0 +1,76 @@ +@import '../base/highlights.scss'; + +.box-products{ + width: 100%; + height: auto; + + .title-mobile{ + display: none; + text-align: center; + margin-bottom: 20px; + } + + .buttons-mobile{ + display: none; + width: 100%; + } + + .products{ + width: 100%; + height: auto; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + padding-left: 20px; + margin-top: 100px; + } +} + +.loading{ + color: $orange; + display: none; + + &.open{ + display: block; + } +} + +@media(max-width: 910px){ + .box-products{ + .products{ + justify-content: space-around; + } + } +} + +@media(max-width: 680px){ + .box-products{ + + .title-mobile{ + display: block; + text-transform: uppercase; + } + + .buttons-mobile{ + display: flex; + + div{ + height: 50px; + width: 50%; + line-height: 50px; + border: 1px solid $medium-gray; + color: $medium-gray; + text-align: center; + cursor: pointer; + transition: background-color .2s ease-in-out, color .2s ease-in-out, border .2s ease-in-out; + + &:hover{ + background-color: $orange; + color: $font-light; + border: 1px solid $orange; + } + + } + } + } +} diff --git a/src/assets/stylesheets/templates/sidebar.css b/src/assets/stylesheets/templates/sidebar.css new file mode 100644 index 00000000..25bbebb9 --- /dev/null +++ b/src/assets/stylesheets/templates/sidebar.css @@ -0,0 +1,32 @@ +.sidebar { + width: 220px; + height: 100%; + margin-bottom: 40px; } + .sidebar .title { + margin-bottom: 65px; + text-transform: uppercase; } + .sidebar .sub-title { + margin-bottom: 40px; + text-transform: uppercase; } + .sidebar .set-size, + .sidebar .set-color { + margin-bottom: 60px; } + .sidebar .more-colors { + margin-top: 15px; + font-size: 14px; + color: #666666; + cursor: pointer; } + .sidebar .more-colors:hover { + text-decoration: underline; } + +@media (max-width: 680px) { + .sidebar { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: darkred; + display: none; } + .sidebar.open { + display: block; } } diff --git a/src/assets/stylesheets/templates/sidebar.scss b/src/assets/stylesheets/templates/sidebar.scss new file mode 100644 index 00000000..e631ca68 --- /dev/null +++ b/src/assets/stylesheets/templates/sidebar.scss @@ -0,0 +1,51 @@ +@import '../base/highlights.scss'; + +.sidebar{ + width: 220px; + height: 100%; + margin-bottom: 40px; + + .title{ + margin-bottom: 65px; + text-transform: uppercase; + } + + .sub-title{ + margin-bottom: 40px; + text-transform: uppercase; + } + + .set-size , + .set-color{ + margin-bottom: 60px; + } + + .more-colors{ + margin-top: 15px; + font-size: 14px; + color: $medium-gray; + cursor: pointer; + + &:hover{ + text-decoration: underline; + } + } + + +} + +@media(max-width: 680px){ + .sidebar{ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: darkred; + display: none; + } + + .sidebar.open{ + display: block; + } +} diff --git a/src/assets/stylesheets/templates/sortMobile.css b/src/assets/stylesheets/templates/sortMobile.css new file mode 100644 index 00000000..7557501a --- /dev/null +++ b/src/assets/stylesheets/templates/sortMobile.css @@ -0,0 +1,12 @@ +.sort-mobile { + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + background-color: #fff; + display: none; } + +@media (max-width: 680px) { + .sort-mobile.open { + display: block; } } diff --git a/src/assets/stylesheets/templates/sortMobile.scss b/src/assets/stylesheets/templates/sortMobile.scss new file mode 100644 index 00000000..73374cad --- /dev/null +++ b/src/assets/stylesheets/templates/sortMobile.scss @@ -0,0 +1,16 @@ +.sort-mobile{ + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + background-color: #fff; + display: none; +} + + +@media(max-width: 680px){ + .sort-mobile.open{ + display: block; + } +} \ No newline at end of file diff --git a/src/components/buttonCart.jsx b/src/components/buttonCart.jsx new file mode 100644 index 00000000..dbed8ba9 --- /dev/null +++ b/src/components/buttonCart.jsx @@ -0,0 +1,20 @@ +import React, { Component } from 'react'; +import { connect } from 'react-redux'; +import { bindActionCreators } from 'redux'; + +import { addCart } from '../reducers/buttonsActions'; + +class ButtonCart extends Component{ + + render(){ + return( + + ) + } +} + +const mapDispatchToProps = dispatch => (bindActionCreators({ addCart }, dispatch)); + +export default connect(null, mapDispatchToProps)(ButtonCart); \ No newline at end of file diff --git a/src/components/buttonMore.jsx b/src/components/buttonMore.jsx new file mode 100644 index 00000000..ec1efb4c --- /dev/null +++ b/src/components/buttonMore.jsx @@ -0,0 +1,23 @@ +import React, { Component } from 'react'; +import { connect } from 'react-redux'; +import { bindActionCreators } from 'redux'; + +import { loadMore } from '../reducers/buttonsActions'; + +class ButtonMore extends Component{ + + render(){ + + return( + + ) + } +} + +const mapStateToProps = state => ({hide: state.actions.buttonHide}); + +const mapDispatchToProps = dispatch => (bindActionCreators({ loadMore }, dispatch)); + +export default connect(mapStateToProps, mapDispatchToProps)(ButtonMore); \ No newline at end of file diff --git a/src/components/dresses.jsx b/src/components/dresses.jsx new file mode 100644 index 00000000..07287cd1 --- /dev/null +++ b/src/components/dresses.jsx @@ -0,0 +1,32 @@ +import React, {Component} from 'react'; +import ButtonCart from '../components/buttonCart'; + +class Dresses extends Component{ + + valuePlots() { + return (this.props.price / this.props.plots).toFixed(2); + } + + render(){ + return( +
+ {`Imagem + +
{this.props.name}
+ +
+
+
R$ {this.props.price}
+
{`até ${this.props.plots}x de R$ ${this.valuePlots()}`}
+
+
+ +
+
+
+ ) + } + +} + +export default Dresses; \ No newline at end of file diff --git a/src/components/filterSort.jsx b/src/components/filterSort.jsx new file mode 100644 index 00000000..4b10fc4f --- /dev/null +++ b/src/components/filterSort.jsx @@ -0,0 +1,53 @@ +import React, { Component } from 'react'; +import { connect } from 'react-redux'; +import { bindActionCreators } from 'redux'; + +import { openClose, sortByLowestPrice, sortByBiggestPrice, sortByDate } from '../reducers/sortActions'; + +import OptionSort from './optionSort'; + +class FilterSort extends Component{ + + render() { + return( + +
+
Ordenar por:
+ + + + + + +
+ ) + } +} + +const mapStateToProps = state => ({isOpen: state.sort.openClose}); + +const mapDispatchToProps = dispatch => (bindActionCreators( + { + openClose , + sortByLowestPrice , + sortByBiggestPrice , + sortByDate + }, dispatch) +); + +export default connect(mapStateToProps, mapDispatchToProps)(FilterSort); \ No newline at end of file diff --git a/src/components/mobile/buttonCloseFilterAndSort.jsx b/src/components/mobile/buttonCloseFilterAndSort.jsx new file mode 100644 index 00000000..bc88a05e --- /dev/null +++ b/src/components/mobile/buttonCloseFilterAndSort.jsx @@ -0,0 +1,15 @@ +import React, { Component } from 'react'; + +class ButtonCloseFilterAndSort extends Component{ + + render() { + return( +
+
{this.props.name}
+
+
+
+ ) + } +} + +export default ButtonCloseFilterAndSort; \ No newline at end of file diff --git a/src/components/mobile/buttonFilterMobile.jsx b/src/components/mobile/buttonFilterMobile.jsx new file mode 100644 index 00000000..3919fb01 --- /dev/null +++ b/src/components/mobile/buttonFilterMobile.jsx @@ -0,0 +1,21 @@ +import React, { Component } from 'react'; + +class ButtonFilterMobile extends Component{ + + render() { + return( +
+
+
{this.props.name}
+
{this.props.icon}
+
+ +
+ {this.props.childComponent} +
+
+ ) + } +} + +export default ButtonFilterMobile; \ No newline at end of file diff --git a/src/components/mobile/buttonSortMobile.jsx b/src/components/mobile/buttonSortMobile.jsx new file mode 100644 index 00000000..bb40f014 --- /dev/null +++ b/src/components/mobile/buttonSortMobile.jsx @@ -0,0 +1,21 @@ +import React, { Component } from 'react'; +import { connect } from 'react-redux'; +import {bindActionCreators } from 'redux'; + +import { openCloseSort } from '../../reducers/sortMobileActions'; + +class ButtonSortMobile extends Component{ + + render() { + return( +
+ {this.props.label} +
+
+ ) + } +} + +const mapDispatchToProps = dispatch => (bindActionCreators({ openCloseSort }, dispatch)); + +export default connect(null, mapDispatchToProps)(ButtonSortMobile); \ No newline at end of file diff --git a/src/components/optionSort.jsx b/src/components/optionSort.jsx new file mode 100644 index 00000000..a4fd740e --- /dev/null +++ b/src/components/optionSort.jsx @@ -0,0 +1,17 @@ +import React, { Component } from 'react'; + +class OptionSort extends Component{ + render() { + return( +
+ {this.props.label} +
+ ) + } +} + +export default OptionSort; \ No newline at end of file diff --git a/src/components/radioButton.jsx b/src/components/radioButton.jsx new file mode 100644 index 00000000..61a917cb --- /dev/null +++ b/src/components/radioButton.jsx @@ -0,0 +1,19 @@ +import React, { Component } from 'react'; + + +class RadioButton extends Component{ + + render() { + + return( +
+ + {this.props.label} +
+ ) + } +} + +export default RadioButton; + + \ No newline at end of file diff --git a/src/components/radioButtonColorList.jsx b/src/components/radioButtonColorList.jsx new file mode 100644 index 00000000..187f9e18 --- /dev/null +++ b/src/components/radioButtonColorList.jsx @@ -0,0 +1,42 @@ +import React, { Component } from 'react'; +import { connect } from 'react-redux'; +import { bindActionCreators } from 'redux'; + +import RadioButton from './radioButton'; +import colors from '../json/colors.json'; + +import { moreColors } from '../reducers/moreColorsActions'; +import { colorChanged } from '../reducers/filterActions'; +import productsData from '../json/products'; + + +class RadioButtonColorList extends Component{ + + render() { + return( +
+ { + Object.keys(colors) + .slice(0,!this.props.isMobile ? this.props.total : colors.length) + .map((key, index) => ( + this.props.colorChanged(key, productsData)}/> + ) + ) + } + + {!this.props.isMobile ?
this.props.moreColors(colors.length)}>{this.props.label}
: ''} +
+ ) + } +} + +const mapStateToProps = state => ( + { + label: state.moreColors.label , + total: state.moreColors.total , + } +); + +const mapDispatchToProps = dispatch => (bindActionCreators({ moreColors, colorChanged }, dispatch)); + +export default connect(mapStateToProps, mapDispatchToProps)(RadioButtonColorList); \ No newline at end of file diff --git a/src/components/radioButtonPriceList.jsx b/src/components/radioButtonPriceList.jsx new file mode 100644 index 00000000..edfe9fd0 --- /dev/null +++ b/src/components/radioButtonPriceList.jsx @@ -0,0 +1,37 @@ +import React, { Component } from 'react'; +import { connect } from 'react-redux'; +import { bindActionCreators } from 'redux'; + +import RadioButton from './radioButton'; +import pricesFilter from '../json/pricesFilter.json'; +import productsData from '../json/products'; + +import { priceChanged } from '../reducers/filterActions'; + +class RadioButtonPriceList extends Component{ + + render() { + return( +
+ { + Object.keys(pricesFilter).map((key, index) => ( + this.props.priceChanged(productsData, pricesFilter[key].min, pricesFilter[key].max)} + /> + )) + } + + this.props.priceChanged(productsData, 501, 100000000)}/> + +
+ ) + } +} + +const mapDispatchToProps = dispatch => (bindActionCreators({ priceChanged }, dispatch)); + +export default connect(null, mapDispatchToProps)(RadioButtonPriceList); \ No newline at end of file diff --git a/src/components/radioButtonSizeList.jsx b/src/components/radioButtonSizeList.jsx new file mode 100644 index 00000000..83725f24 --- /dev/null +++ b/src/components/radioButtonSizeList.jsx @@ -0,0 +1,25 @@ +import React, { Component } from 'react'; + +import RadioButtonSizes from './radioButtonSizes'; + +import sizes from '../json/sizes.json'; + +class RadioButtonSizeList extends Component{ + + render() { + return( +
+ { + Object.keys(sizes) + .map((key, index) =>( + + )) + } + +
+
+ ) + } +} + +export default RadioButtonSizeList; \ No newline at end of file diff --git a/src/components/radioButtonSizes.jsx b/src/components/radioButtonSizes.jsx new file mode 100644 index 00000000..349bd16b --- /dev/null +++ b/src/components/radioButtonSizes.jsx @@ -0,0 +1,26 @@ +import React, { Component } from 'react'; +import { connect } from 'react-redux'; +import { bindActionCreators } from 'redux'; + +import { sizeChanged } from '../reducers/filterActions'; + +import productsData from '../json/products'; + + +class RadioButtonSizes extends Component{ + + render() { + + return( +
+ this.props.sizeChanged(productsData , this.props.size)} /> + +
+ ) + } +} + +const mapDispatchToProps = dispatch => (bindActionCreators({ sizeChanged }, dispatch)); + + +export default connect(null, mapDispatchToProps)(RadioButtonSizes); diff --git a/src/fonts.css b/src/fonts.css new file mode 100644 index 00000000..83cde468 --- /dev/null +++ b/src/fonts.css @@ -0,0 +1,67 @@ +@font-face { + font-family: 'Baskerville'; + font-style: normal; + font-weight: 400; + src: local("Baskerville-Normal.ttf"), url("./fonts/Baskerville-Normal.ttf"); } + +@font-face { + font-family: 'BellCentennialBT'; + font-style: normal; + font-weight: 400; + src: local("Bell Centennial Address BT.ttf"), url("./fonts/Bell Centennial Address BT.ttf"); } + +/* cyrillic-ext */ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local("Open Sans"), local("OpenSans"), url(https://fonts.gstatic.com/s/opensans/v13/K88pR3goAWT7BTt32Z01mxJtnKITppOI_IvcXXDNrsc.woff2) format("woff2"); + unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; } + +/* cyrillic */ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local("Open Sans"), local("OpenSans"), url(https://fonts.gstatic.com/s/opensans/v13/RjgO7rYTmqiVp7vzi-Q5URJtnKITppOI_IvcXXDNrsc.woff2) format("woff2"); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } + +/* greek-ext */ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local("Open Sans"), local("OpenSans"), url(https://fonts.gstatic.com/s/opensans/v13/LWCjsQkB6EMdfHrEVqA1KRJtnKITppOI_IvcXXDNrsc.woff2) format("woff2"); + unicode-range: U+1F00-1FFF; } + +/* greek */ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local("Open Sans"), local("OpenSans"), url(https://fonts.gstatic.com/s/opensans/v13/xozscpT2726on7jbcb_pAhJtnKITppOI_IvcXXDNrsc.woff2) format("woff2"); + unicode-range: U+0370-03FF; } + +/* vietnamese */ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local("Open Sans"), local("OpenSans"), url(https://fonts.gstatic.com/s/opensans/v13/59ZRklaO5bWGqF5A9baEERJtnKITppOI_IvcXXDNrsc.woff2) format("woff2"); + unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; } + +/* latin-ext */ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local("Open Sans"), local("OpenSans"), url(https://fonts.gstatic.com/s/opensans/v13/u-WUoqrET9fUeobQW7jkRRJtnKITppOI_IvcXXDNrsc.woff2) format("woff2"); + unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; } + +/* latin */ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local("Open Sans"), local("OpenSans"), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; } diff --git a/src/fonts.scss b/src/fonts.scss new file mode 100644 index 00000000..3ec6cb18 --- /dev/null +++ b/src/fonts.scss @@ -0,0 +1,70 @@ +@font-face { + font-family: 'Baskerville'; + font-style: normal; + font-weight: 400; + src: local('Baskerville-Normal.ttf'), url('./fonts/Baskerville-Normal.ttf'); +} + +@font-face { + font-family: 'BellCentennialBT'; + font-style: normal; + font-weight: 400; + src: local('Bell Centennial Address BT.ttf'), url('./fonts/Bell Centennial Address BT.ttf'); +} + +/* cyrillic-ext */ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/K88pR3goAWT7BTt32Z01mxJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); + unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; +} +/* cyrillic */ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/RjgO7rYTmqiVp7vzi-Q5URJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; +} +/* greek-ext */ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/LWCjsQkB6EMdfHrEVqA1KRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); + unicode-range: U+1F00-1FFF; +} +/* greek */ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/xozscpT2726on7jbcb_pAhJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); + unicode-range: U+0370-03FF; +} +/* vietnamese */ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/59ZRklaO5bWGqF5A9baEERJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); + unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; +} +/* latin-ext */ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/u-WUoqrET9fUeobQW7jkRRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); + unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; +} \ No newline at end of file diff --git a/src/fonts/Baskerville-Normal.ttf b/src/fonts/Baskerville-Normal.ttf new file mode 100644 index 00000000..39401cc4 Binary files /dev/null and b/src/fonts/Baskerville-Normal.ttf differ diff --git a/src/fonts/Bell Centennial Address BT.ttf b/src/fonts/Bell Centennial Address BT.ttf new file mode 100644 index 00000000..a04c5730 Binary files /dev/null and b/src/fonts/Bell Centennial Address BT.ttf differ diff --git a/src/index.js b/src/index.js new file mode 100644 index 00000000..14f224fa --- /dev/null +++ b/src/index.js @@ -0,0 +1,21 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import { createStore } from 'redux'; +import { Provider } from 'react-redux'; + + +import '../node_modules/font-awesome/css/font-awesome.min.css'; + +import Routes from './routes/routes'; +import './style.css'; + +import reducers from './reducers/reducers'; + +const store = createStore(reducers); + +ReactDOM.render( + + + + , document.getElementById('root') +); diff --git a/src/json/colors.json b/src/json/colors.json new file mode 100644 index 00000000..2a7bd578 --- /dev/null +++ b/src/json/colors.json @@ -0,0 +1,13 @@ +{ + "yellow": "Amarelo" , + "blue": "Azul" , + "white": "Branco" , + "gray": "Cinza" , + "orange": "Laranja" , + "green": "Verde" , + "red": "Vermelho" , + "black": "Preto" , + "pink": "Rosa" , + "darkred": "Vinho" + +} \ No newline at end of file diff --git a/src/json/pricesFilter.json b/src/json/pricesFilter.json new file mode 100644 index 00000000..71dc0a77 --- /dev/null +++ b/src/json/pricesFilter.json @@ -0,0 +1,7 @@ +{ + "1": {"min": 0, "max": 50} , + "2": {"min": 51, "max": 100} , + "3": {"min": 101, "max": 150} , + "4": {"min": 151, "max": 300} , + "5": {"min": 301, "max": 500} +} \ No newline at end of file diff --git a/src/json/products.js b/src/json/products.js new file mode 100644 index 00000000..586edbfd --- /dev/null +++ b/src/json/products.js @@ -0,0 +1,175 @@ +import image1 from '../assets/images/model1.png'; +import image2 from '../assets/images/model2.png'; +import image3 from '../assets/images/model3.png'; +import image4 from '../assets/images/model4.png'; +import image5 from '../assets/images/model5.png'; +import image6 from '../assets/images/model6.png'; +import image7 from '../assets/images/model7.png'; +import image8 from '../assets/images/model8.png'; +import image9 from '../assets/images/model9.png'; + +const productsData = [ + { + "id": 1 , + "image": image1 , + "name": "Bata Bordada" , + "price": 236 , + "plots": 5 , + "date": '2017-04-15' , + "colors": ['yellow', 'gray', 'orange'], + "sizes": ['P' ,'G', '38', '40', '42' ] + } , + { + "id": 2 , + "image": image2 , + "name": "Vestido com Botão" , + "price": 254 , + "plots": 5 , + "date": '2017-03-15' , + "colors": ['pink', 'red', 'black', 'orange'], + "sizes": ['M' ,'G', 'GG','44', '46' ] + } , + { + "id": 3 , + "image": image3 , + "name": "Vestido Texturizado" , + "price": 158 , + "plots": 5 , + "date": '2017-04-18' , + "colors": ['pink', 'blue'], + "sizes": ['M' ,'G', 'U','36'] + } , + { + "id": 4 , + "image": image4 , + "name": "Vestido Florido" , + "price": 125 , + "plots": 5 , + "date": '2017-02-15' , + "colors": ['gray', 'purple', 'yellow'], + "sizes": ['P', 'M' ,'G', 'U','36'] + } , + { + "id": 5 , + "image": image5 , + "name": "Vestido P/B" , + "price": 146 , + "plots": 5 , + "date": '2017-02-21' , + "colors": ['black', 'white'], + "sizes": ['P', '36', '38', '42'] + } , + { + "id": 6 , + "image": image6 , + "name": "Vestido Listrado" , + "price": 210 , + "plots": 5 , + "date": '2017-01-10' , + "colors": ['green', 'blue', 'brown'], + "sizes": ['P', 'M', 'GG', '42'] + } , + { + "id": 7 , + "image": image7 , + "name": "Vestido Azul" , + "price": 225 , + "plots": 5 , + "date": '2017-04-01' , + "colors": ['blue', 'white'], + "sizes": ['P', '36', '42'] + } , + { + "id": 8 , + "image": image8 , + "name": "Vestido Estampado" , + "price": 120 , + "plots": 5 , + "date": '2017-03-02' , + "colors": ['pink', 'purple', 'yellow'], + "sizes": ['36', '38','40', '42'] + } , + { + "id": 9 , + "image": image9 , + "name": "Vestido Curto" , + "price": 190 , + "plots": 5 , + "date": '2017-04-11' , + "colors": ['red', 'white'], + "sizes": ['P', '36', '38', '42'] + } , + { + "id": 10 , + "image": image1 , + "name": "Vestido Longo" , + "price": 180 , + "plots": 5 , + "date": '2017-03-22' , + "colors": ['black', 'white', 'darkred' ], + "sizes": ['P', '36', 'g', '42'] + } , + { + "id": 11 , + "image": image3 , + "name": "Vestido Promoção" , + "price": 40 , + "plots": 5 , + "date": '2017-03-22' , + "colors": ['black' ,'red' , 'yellow'], + "sizes": ['P', '36', 'g', '42'] + } , + { + "id": 12 , + "image": image5 , + "name": "Vestido Promoção" , + "price": 70 , + "plots": 5 , + "date": '2017-03-22' , + "colors": ['darkred', 'gray', 'orange'], + "sizes": ['P', '36', 'g', '42'] + } , + { + "id": 13 , + "image": image8 , + "name": "Vestido Caro" , + "price": 350 , + "plots": 5 , + "date": '2017-03-22' , + "colors": ['darkred', 'gray', 'orange'], + "sizes": ['P', '36', 'g', '42'] + } , + { + "id": 14 , + "image": image5 , + "name": "Vestido Caro" , + "price": 400 , + "plots": 5 , + "date": '2017-03-22' , + "colors": ['darkred', 'gray', 'orange'], + "sizes": ['P', '36', 'g', '42'] + } , + { + "id": 15 , + "image": image1 , + "name": "Vestido Caro" , + "price": 490 , + "plots": 5 , + "date": '2017-03-22' , + "colors": ['darkred', 'gray', 'orange'], + "sizes": ['P', '36', 'g', '42'] + } , + { + "id": 16 , + "image": image9 , + "name": "Vestido Caro" , + "price": 580 , + "plots": 5 , + "date": '2017-03-22' , + "colors": ['darkred', 'gray', 'orange'], + "sizes": ['P', '36', 'g', '42'] + } + +] + +export default productsData; \ No newline at end of file diff --git a/src/json/sizes.json b/src/json/sizes.json new file mode 100644 index 00000000..be309cd1 --- /dev/null +++ b/src/json/sizes.json @@ -0,0 +1,13 @@ +{ + "1": "P" , + "2": "M" , + "3": "G" , + "4": "GG" , + "5": "U" , + "6": "36" , + "7": "38" , + "8": "40" , + "9": "42" , + "10": "44" , + "11": "46" +} \ No newline at end of file diff --git a/src/pages/index.jsx b/src/pages/index.jsx new file mode 100644 index 00000000..a9ea0fb8 --- /dev/null +++ b/src/pages/index.jsx @@ -0,0 +1,17 @@ +import React from 'react'; +import Sidebar from '../templates/sidebar'; +import Products from '../templates/products'; +import FilterSort from '../components/filterSort'; +import FilterMobile from '../templates/filterMobile'; +import SortMobile from '../templates/sortMobile'; + + +export default props => ( +
+ + + + + +
+) \ No newline at end of file diff --git a/src/reducers/buttonsActions.js b/src/reducers/buttonsActions.js new file mode 100644 index 00000000..74ecf1ce --- /dev/null +++ b/src/reducers/buttonsActions.js @@ -0,0 +1,12 @@ +export const ADD_CART = 'ADD_CART'; +export const LOAD_MORE = 'LOAD_MORE'; + + +export const addCart = () => ({ + type: ADD_CART +}); + +export const loadMore = (total) => ({ + type: LOAD_MORE , + total: total +}) diff --git a/src/reducers/buttonsReducers.js b/src/reducers/buttonsReducers.js new file mode 100644 index 00000000..aa7a9470 --- /dev/null +++ b/src/reducers/buttonsReducers.js @@ -0,0 +1,23 @@ +import { ADD_CART, LOAD_MORE } from './buttonsActions'; + +const INITIAL_STATE = {count: 0, more: 6, buttonHide: false} + +export default (state = INITIAL_STATE, action) => { + switch(action.type) { + + case ADD_CART: + return {...state, count: state.count + 1} + + case LOAD_MORE: + + if(state.more >= action.total - 3){ + state.buttonHide = true; + } else if(state.more > action.total - 3){ + return state + } + return {...state, more: state.more + 3} + + default: + return state + } +} \ No newline at end of file diff --git a/src/reducers/filterActions.js b/src/reducers/filterActions.js new file mode 100644 index 00000000..14e234e5 --- /dev/null +++ b/src/reducers/filterActions.js @@ -0,0 +1,22 @@ +export const COLOR_CHANGED = 'COLOR_CHANGED'; +export const PRICE_CHANGED = 'PRICE_CHANGED'; +export const SIZE_CHANGED = 'SIZE_CHANGED'; + +export const colorChanged = (key, products) => ({ + type: COLOR_CHANGED , + key , + products +}); + +export const priceChanged = (products, min, max) => ({ + type: PRICE_CHANGED , + products , + min , + max +}); + +export const sizeChanged = (products, size) => ({ + type: SIZE_CHANGED, + products , + size +}) \ No newline at end of file diff --git a/src/reducers/filterMobileActions.js b/src/reducers/filterMobileActions.js new file mode 100644 index 00000000..a5f7e6e0 --- /dev/null +++ b/src/reducers/filterMobileActions.js @@ -0,0 +1,20 @@ +export const OPEN_CLOSE_FILTER = 'OPEN_CLOSE_FILTER'; +export const OPEN_CLOSE_FILTER_COLORS = 'OPEN_CLOSE_FILTER_COLORS'; +export const OPEN_CLOSE_FILTER_SIZES = 'OPEN_CLOSE_FILTER_SIZES'; +export const OPEN_CLOSE_FILTER_PRICES = 'OPEN_CLOSE_FILTER_PRICES'; + +export const openCloseFilter = () => ({ + type: OPEN_CLOSE_FILTER +}); + +export const openCloseFilterColors = () => ({ + type: OPEN_CLOSE_FILTER_COLORS +}); + +export const openCloseFilterSizes = () => ({ + type: OPEN_CLOSE_FILTER_SIZES +}); + +export const openCloseFilterPrices = () => ({ + type: OPEN_CLOSE_FILTER_PRICES +}); \ No newline at end of file diff --git a/src/reducers/filterMobileReducers.js b/src/reducers/filterMobileReducers.js new file mode 100644 index 00000000..8fddc843 --- /dev/null +++ b/src/reducers/filterMobileReducers.js @@ -0,0 +1,43 @@ +import { OPEN_CLOSE_FILTER, OPEN_CLOSE_FILTER_COLORS, OPEN_CLOSE_FILTER_SIZES, OPEN_CLOSE_FILTER_PRICES } from './filterMobileActions'; + +const INITIAL_STATE = { + openCloseFilterProp: '' , + openCloseFilterColorsProp: '' , + openCloseFilterSizesProp: '' , + openCloseFilterPricesProp: '' , + iconColors: '+' , + iconSizes: '+' , + iconPrices: '+' +} + +export default (state = INITIAL_STATE, action) => { + switch(action.type){ + + case OPEN_CLOSE_FILTER: + if(!state.openCloseFilterProp){ + return {...state, openCloseFilterProp: 'open'} + } + return {...state, openCloseFilterProp: ''} + + case OPEN_CLOSE_FILTER_COLORS: + if(!state.openCloseFilterColorsProp){ + return {...state, openCloseFilterColorsProp: 'open', iconColors: '-'} + } + return {...state, openCloseFilterColorsProp: '', iconColors: '+'} + + case OPEN_CLOSE_FILTER_SIZES: + if(!state.openCloseFilterSizesProp){ + return {...state, openCloseFilterSizesProp: 'open', iconSizes: '-'} + } + return {...state, openCloseFilterSizesProp: '', iconSizes: '+'} + + case OPEN_CLOSE_FILTER_PRICES: + if(!state.openCloseFilterPricesProp){ + return {...state, openCloseFilterPricesProp: 'open', iconPrices: '-'} + } + return {...state, openCloseFilterPricesProp: '', iconPrices: '+'} + + default: + return state + } +} \ No newline at end of file diff --git a/src/reducers/filterReducers.js b/src/reducers/filterReducers.js new file mode 100644 index 00000000..1b261e62 --- /dev/null +++ b/src/reducers/filterReducers.js @@ -0,0 +1,46 @@ +import { COLOR_CHANGED, PRICE_CHANGED, SIZE_CHANGED } from './filterActions'; + +const INITIAL_STATE = { colorSelected: '', priceSelected: '', sizeSelected: ''} + +export default (state = INITIAL_STATE, action) => { + switch(action.type){ + + case COLOR_CHANGED: + + return { + ...state, + colorSelected: action.products.filter((product) => { + if(product.colors.indexOf(action.key) !== -1){ + return product + } + return null; + }) + } + + case PRICE_CHANGED: + + return { + ...state, + priceSelected: action.products.filter((product) => { + if(product.price > action.min && product.price < action.max){ + return product + } + return null; + }) + } + + case SIZE_CHANGED: + return { + ...state, + sizeSelected: action.products.filter((product) => { + if(product.sizes.indexOf(action.size) !== -1){ + return product + } + return null; + }) + } + + default: + return state + } +} \ No newline at end of file diff --git a/src/reducers/moreColorsActions.js b/src/reducers/moreColorsActions.js new file mode 100644 index 00000000..be2f1dcb --- /dev/null +++ b/src/reducers/moreColorsActions.js @@ -0,0 +1,6 @@ +export const MORE_COLORS = 'MORE_COLORS'; + +export const moreColors = (total) => ({ + type: MORE_COLORS , + total: total +}); \ No newline at end of file diff --git a/src/reducers/moreColorsReducers.js b/src/reducers/moreColorsReducers.js new file mode 100644 index 00000000..e550b534 --- /dev/null +++ b/src/reducers/moreColorsReducers.js @@ -0,0 +1,17 @@ +import { MORE_COLORS } from './moreColorsActions'; + +const INITIAL_STATE = {total: 5, label: 'Ver todas as cores'} + +export default (state = INITIAL_STATE, action) => { + switch(action.type){ + + case MORE_COLORS: + if(state.total === action.total){ + return {...state, total: 5, label: 'Ver todas as cores'} + } + return {...state, total: action.total, label: 'Ver menos'} + + default: + return state + } +} \ No newline at end of file diff --git a/src/reducers/reducers.js b/src/reducers/reducers.js new file mode 100644 index 00000000..f91b9e50 --- /dev/null +++ b/src/reducers/reducers.js @@ -0,0 +1,18 @@ +import { combineReducers } from 'redux'; +import buttonsReducers from './buttonsReducers'; +import sortReducers from './sortReducers'; +import moreColorsReducers from './moreColorsReducers'; +import filterMobileReducers from './filterMobileReducers'; +import sortMobileReducers from './sortMobileReducers'; +import filterReducers from './filterReducers'; + +const reducers = combineReducers({ + actions: buttonsReducers , + sort: sortReducers , + moreColors: moreColorsReducers , + filterMobile: filterMobileReducers , + sortMobile: sortMobileReducers , + filter: filterReducers +}); + +export default reducers; \ No newline at end of file diff --git a/src/reducers/sortActions.js b/src/reducers/sortActions.js new file mode 100644 index 00000000..9254e598 --- /dev/null +++ b/src/reducers/sortActions.js @@ -0,0 +1,22 @@ +export const OPEN_CLOSE = 'OPEN_CLOSE'; +export const SORT_BY_LOWEST_PRICE = 'SORT_BY_LOWEST_PRICE'; +export const SORT_BY_BIGGEST_PRICE = 'SORT_BY_BIGGEST_PRICE'; +export const SORT_BY_DATE = 'SORT_BY_DATE'; +export const COLOR_CHANGED = 'COLOR_CHANGED'; + + +export const openClose = () => ({ + type: OPEN_CLOSE +}) + +export const sortByLowestPrice = () => ({ + type: SORT_BY_LOWEST_PRICE +}); + +export const sortByBiggestPrice = () => ({ + type: SORT_BY_BIGGEST_PRICE +}); + +export const sortByDate = () => ({ + type: SORT_BY_DATE +}); diff --git a/src/reducers/sortMobileActions.js b/src/reducers/sortMobileActions.js new file mode 100644 index 00000000..e06bbcfa --- /dev/null +++ b/src/reducers/sortMobileActions.js @@ -0,0 +1,5 @@ +export const OPEN_CLOSE_SORT = 'OPEN_CLOSE_SORT'; + +export const openCloseSort = () => ({ + type: OPEN_CLOSE_SORT +}) diff --git a/src/reducers/sortMobileReducers.js b/src/reducers/sortMobileReducers.js new file mode 100644 index 00000000..2d3c0e57 --- /dev/null +++ b/src/reducers/sortMobileReducers.js @@ -0,0 +1,16 @@ +import { OPEN_CLOSE_SORT } from './sortMobileActions'; + +const INITIAL_STATE = { openClose: '' } + +export default (state = INITIAL_STATE, action) => { + switch(action.type){ + case OPEN_CLOSE_SORT: + if(!state.openClose){ + return {...state, openClose: 'open'} + } + return {...state, openClose: ''} + + default: + return state + } +} \ No newline at end of file diff --git a/src/reducers/sortReducers.js b/src/reducers/sortReducers.js new file mode 100644 index 00000000..692f068d --- /dev/null +++ b/src/reducers/sortReducers.js @@ -0,0 +1,37 @@ +import { + OPEN_CLOSE , + SORT_BY_LOWEST_PRICE , + SORT_BY_BIGGEST_PRICE , + SORT_BY_DATE , +} from './sortActions'; + +const INITIAL_STATE = {openClose: '', ordered: '', color: ''} + +export default (state = INITIAL_STATE, action) => { + switch(action.type) { + + case OPEN_CLOSE: + if(!state.openClose){ + return {...state, openClose: 'open'} + } + return {...state, openClose: ''} + + case SORT_BY_LOWEST_PRICE: + return {...state, openClose: '', ordered: (a,b) => { + return a.price - b.price + }} + + case SORT_BY_BIGGEST_PRICE: + return {...state, openClose: '', ordered: (a,b) => { + return b.price - a.price + }} + + case SORT_BY_DATE: + return {...state, openClose: '', ordered: (a,b) => { + return a.date > b.date ? -1 : a.date < b.date ? 1 : 0; + }} + + default: + return state + } +} \ No newline at end of file diff --git a/src/routes/routes.jsx b/src/routes/routes.jsx new file mode 100644 index 00000000..ddf78043 --- /dev/null +++ b/src/routes/routes.jsx @@ -0,0 +1,17 @@ +import React from 'react'; + +import { BrowserRouter as Router, Route } from 'react-router-dom'; + +import Header from '../templates/header'; +import Footer from '../templates/footer'; +import Index from '../pages/index'; + +export default props => ( + +
+
+ +
+
+ +) \ No newline at end of file diff --git a/src/style.css b/src/style.css new file mode 100644 index 00000000..ded2354f --- /dev/null +++ b/src/style.css @@ -0,0 +1,491 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; } + +html, +body { + height: 100%; + font-family: sans-serif; } + +.inner-content { + width: 940px; + margin-left: auto; + margin-right: auto; } + +h1 { + font-size: 30px; + font-weight: 300; } + +h3 { + font-size: 20px; + font-weight: 300; } + +@media (max-width: 990px) { + .inner-content { + width: 100%; + padding-left: 20px; + padding-right: 20px; } } + +.header { + width: 100%; + height: 100px; + border-bottom: 2px solid #ff9f1c; + padding-top: 35px; + margin-bottom: 40px; } + .header-content { + display: flex; + justify-content: space-between; + height: 30px; } + .header .bag { + position: relative; + margin-right: 15px; } + .header .bag .counter { + position: absolute; + top: 7px; + right: -16px; + width: 20px; + height: 20px; + line-height: 20px; + background-color: #ff9f1c; + border-radius: 50%; + color: #ffffff; + text-align: center; + font-size: 13px; } + +.footer { + width: 100%; + height: 35px; + line-height: 35px; + background-color: #000000; + text-align: center; + color: #ffffff; } + +.sidebar { + width: 220px; + height: 100%; + margin-bottom: 40px; } + .sidebar .title { + margin-bottom: 65px; + text-transform: uppercase; } + .sidebar .sub-title { + margin-bottom: 40px; + text-transform: uppercase; } + .sidebar .set-size, + .sidebar .set-color { + margin-bottom: 60px; } + .sidebar .more-colors { + margin-top: 15px; + font-size: 14px; + color: #666666; + cursor: pointer; } + .sidebar .more-colors:hover { + text-decoration: underline; } + +@media (max-width: 680px) { + .sidebar { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: darkred; + display: none; } + .sidebar.open { + display: block; } } + +.box-products { + width: 100%; + height: auto; } + .box-products .title-mobile { + display: none; + text-align: center; + margin-bottom: 20px; } + .box-products .buttons-mobile { + display: none; + width: 100%; } + .box-products .products { + width: 100%; + height: auto; + display: flex; + justify-content: space-between; + flex-wrap: wrap; + padding-left: 20px; + margin-top: 100px; } + +.loading { + color: #ff9f1c; + display: none; } + .loading.open { + display: block; } + +@media (max-width: 910px) { + .box-products .products { + justify-content: space-around; } } + +@media (max-width: 680px) { + .box-products .title-mobile { + display: block; + text-transform: uppercase; } + .box-products .buttons-mobile { + display: flex; } + .box-products .buttons-mobile div { + height: 50px; + width: 50%; + line-height: 50px; + border: 1px solid #666666; + color: #666666; + text-align: center; + cursor: pointer; + transition: background-color .2s ease-in-out, color .2s ease-in-out, border .2s ease-in-out; } + .box-products .buttons-mobile div:hover { + background-color: #ff9f1c; + color: #ffffff; + border: 1px solid #ff9f1c; } } + +.bg-mobile-filter { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + background: #ffffff; + z-index: 1; + display: none; } + +.filter-mobile { + width: 100%; + min-height: 100%; + height: auto; + padding-bottom: 20px; + position: absolute; + top: 0; + left: 0; + background-color: #ffffff; + display: none; + z-index: 5; } + .filter-mobile .close-filter, + .filter-mobile .open-close-filters { + width: 100%; + height: 60px; + line-height: 60px; + padding-left: 20px; + padding-right: 20px; + display: flex; + justify-content: space-between; + cursor: pointer; } + .filter-mobile .close-filter { + border-bottom: 1px solid #666666; } + .filter-mobile .close-filter .label-filters { + color: #666666; } + .filter-mobile .close-filter .icons { + transform: rotate(45deg); } + .filter-mobile .open-close-filters:hover { + background-color: #ff9f1c; + color: #ffffff; } + .filter-mobile .label-filters { + text-transform: uppercase; } + .filter-mobile .icons { + font-weight: 300; + font-size: 25px; } + .filter-mobile .content-filters { + width: 100%; + height: auto; + padding: 10px 20px; + display: none; } + .filter-mobile .content-filters.open { + display: block; } + +@media (max-width: 680px) { + .filter-mobile.open, + .bg-mobile-filter.open { + display: block; } } + +.sort-mobile { + width: 100%; + height: 100%; + position: fixed; + top: 0; + left: 0; + background-color: #fff; + display: none; } + +@media (max-width: 680px) { + .sort-mobile.open { + display: block; } } + +.content-page { + display: flex; + position: relative; } + +@media (max-width: 680px) { + .content-page { + position: initial; } } + +.dress { + margin-bottom: 50px; } + .dress-name { + text-align: center; + text-transform: uppercase; + margin-top: 10px; + margin-bottom: 30px; } + .dress .container-price { + display: flex; + margin-left: 25px; } + .dress .container-price .price { + text-align: right; + margin-right: 15px; + font-family: 'Baskerville'; + font-size: 14px; } + .dress .container-price .price .sale-price { + font-weight: bold; + font-size: 16px; + margin-bottom: 3px; } + +.button-cart { + width: 52px; + height: 34px; + background-color: #ff9f1c; + text-align: center; + color: #ffffff; + cursor: pointer; + border: none; + transition: background-color .2s ease-in-out; } + .button-cart:hover { + background-color: #e68c10; } + +.filter-order { + position: absolute; + right: 0; + top: 0; + width: 125px; + font-size: 12px; + border: 1px solid black; + font-family: 'Open Sans', arial; } + .filter-order .options { + padding: 10px; + cursor: pointer; + background-color: #ffffff; + display: none; } + .filter-order .options.open { + display: block; } + .filter-order .options:not(.label):hover { + background-color: #ff9f1c; + color: #ffffff; } + .filter-order .options.label { + display: block; } + .filter-order .options.label.open { + border-bottom: 1px solid black; } + .filter-order .options.label .angle { + font-size: 16px; + position: absolute; + top: 8px; + right: 10px; } + +@media (max-width: 990px) { + .filter-order { + right: 20px; } } + +@media (max-width: 680px) { + .filter-order { + display: none; } } + +.button-more { + margin-top: 10px; + margin-bottom: 60px; + margin-left: calc(50% - 130px); + background-color: #ff9f1c; + color: #ffffff; + text-transform: uppercase; + width: 260px; + height: 45px; + line-height: 45px; + border: none; + cursor: pointer; + transition: background-color .2s ease-in-out; } + .button-more:hover { + background-color: #e68c10; } + .button-more.hide-true { + display: none; } + +@media (max-width: 680px) { + .button-more { + width: 100%; + margin-left: 0; } } + +.box-radio { + margin-bottom: 5px; + font-family: 'Open Sans', arial; + font-size: 14px; } + +.radio-buttons { + cursor: pointer; + position: relative; + padding: 2px; + border: 1px solid #b0b0b0; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + margin-right: 10px; } + +.radio-buttons:after { + content: ''; + width: 8px; + height: 8px; + display: block; } + +.radio-buttons:checked:after { + background-color: #ff9f1c; + box-shadow: 0 0 0 transparent !important; } + +.content-check { + width: 30px; + height: 30px; + margin-right: 10px; + margin-bottom: 10px; + position: relative; + font-family: 'Open Sans', arial; } + .content-check .label-check { + position: absolute; + color: #b0b0b0; + font-size: 12px; + margin: auto; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); } + .content-check .checks { + width: 30px; + height: 30px; + cursor: pointer; + position: relative; + border: 1px solid #b0b0b0; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + z-index: 5; } + .content-check .checks:checked { + border: 1px solid #ff9f1c; } + .content-check .checks:checked ~ .label-check { + color: #000; } + +.box-sizes { + width: 160px; + height: auto; + display: flex; + justify-content: space-between; + flex-flow: row wrap; + align-content: flex-start; } + .box-sizes .flex-null { + width: 30px; + height: 0; + margin-right: 10px; } + +.box-sizes.mobile { + margin-left: calc(50% - 100px); } + +.close-filter { + width: 100%; + height: 60px; + line-height: 60px; + padding-left: 20px; + padding-right: 20px; + display: flex; + justify-content: space-between; + cursor: pointer; + border-bottom: 1px solid #666666; } + .close-filter .label-filters { + color: #666666; + text-transform: uppercase; } + .close-filter .icons { + transform: rotate(45deg); + font-weight: 300; + font-size: 25px; } + +.button-sort-mobile { + width: 100%; + height: 60px; + line-height: 60px; + padding-left: 20px; + padding-right: 20px; + cursor: pointer; + position: relative; } + .button-sort-mobile:hover { + background-color: #ff9f1c; + color: #ffffff; } + +.trigger { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } + +@font-face { + font-family: 'Baskerville'; + font-style: normal; + font-weight: 400; + src: local("Baskerville-Normal.ttf"), url("./fonts/Baskerville-Normal.ttf"); } + +@font-face { + font-family: 'BellCentennialBT'; + font-style: normal; + font-weight: 400; + src: local("Bell Centennial Address BT.ttf"), url("./fonts/Bell Centennial Address BT.ttf"); } + +/* cyrillic-ext */ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local("Open Sans"), local("OpenSans"), url(https://fonts.gstatic.com/s/opensans/v13/K88pR3goAWT7BTt32Z01mxJtnKITppOI_IvcXXDNrsc.woff2) format("woff2"); + unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; } + +/* cyrillic */ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local("Open Sans"), local("OpenSans"), url(https://fonts.gstatic.com/s/opensans/v13/RjgO7rYTmqiVp7vzi-Q5URJtnKITppOI_IvcXXDNrsc.woff2) format("woff2"); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } + +/* greek-ext */ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local("Open Sans"), local("OpenSans"), url(https://fonts.gstatic.com/s/opensans/v13/LWCjsQkB6EMdfHrEVqA1KRJtnKITppOI_IvcXXDNrsc.woff2) format("woff2"); + unicode-range: U+1F00-1FFF; } + +/* greek */ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local("Open Sans"), local("OpenSans"), url(https://fonts.gstatic.com/s/opensans/v13/xozscpT2726on7jbcb_pAhJtnKITppOI_IvcXXDNrsc.woff2) format("woff2"); + unicode-range: U+0370-03FF; } + +/* vietnamese */ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local("Open Sans"), local("OpenSans"), url(https://fonts.gstatic.com/s/opensans/v13/59ZRklaO5bWGqF5A9baEERJtnKITppOI_IvcXXDNrsc.woff2) format("woff2"); + unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; } + +/* latin-ext */ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local("Open Sans"), local("OpenSans"), url(https://fonts.gstatic.com/s/opensans/v13/u-WUoqrET9fUeobQW7jkRRJtnKITppOI_IvcXXDNrsc.woff2) format("woff2"); + unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; } + +/* latin */ +@font-face { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local("Open Sans"), local("OpenSans"), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; } diff --git a/src/style.scss b/src/style.scss new file mode 100644 index 00000000..8cd770ea --- /dev/null +++ b/src/style.scss @@ -0,0 +1,5 @@ +@import 'assets/stylesheets/base/all.scss'; +@import 'assets/stylesheets/templates/all.scss'; +@import 'assets/stylesheets/pages/all.scss'; +@import 'assets/stylesheets/components/all.scss'; +@import 'fonts.scss'; \ No newline at end of file diff --git a/src/templates/filterMobile.jsx b/src/templates/filterMobile.jsx new file mode 100644 index 00000000..75cee7dd --- /dev/null +++ b/src/templates/filterMobile.jsx @@ -0,0 +1,78 @@ +import React, { Component } from 'react'; +import { connect } from 'react-redux'; +import { bindActionCreators } from 'redux'; + +import ButtonCloseFilterAndSort from '../components/mobile/buttonCloseFilterAndSort'; +import ButtonFilterMobile from '../components/mobile/buttonFilterMobile'; + +import RadioButtonColorList from '../components/radioButtonColorList'; +import RadioButtonSizeList from '../components/radioButtonSizeList'; +import RadioButtonPriceList from '../components/radioButtonPriceList'; + +import { openCloseFilter } from '../reducers/filterMobileActions'; +import { openCloseFilterColors } from '../reducers/filterMobileActions'; +import { openCloseFilterSizes } from '../reducers/filterMobileActions'; +import { openCloseFilterPrices } from '../reducers/filterMobileActions'; + +class FilterMobile extends Component{ + + render() { + return( +
+ +
+ +
+ + + } + /> + + } + /> + + } + /> +
+
+ ) + } +} + +const mapStateToProps = state => ( + { + openCloseFilterProp: state.filterMobile.openCloseFilterProp , + iconColors: state.filterMobile.iconColors , + openCloseColors: state.filterMobile.openCloseFilterColorsProp , + iconSizes: state.filterMobile.iconSizes , + openCloseSizes: state.filterMobile.openCloseFilterSizesProp , + iconPrices: state.filterMobile.iconPrices , + openClosePrices: state.filterMobile.openCloseFilterPricesProp + } +); + +const mapDispatchToProps = dispatch => (bindActionCreators( + { + openCloseFilter , + openCloseFilterColors , + openCloseFilterSizes , + openCloseFilterPrices + } , dispatch) +); + +export default connect(mapStateToProps, mapDispatchToProps)(FilterMobile); \ No newline at end of file diff --git a/src/templates/footer.jsx b/src/templates/footer.jsx new file mode 100644 index 00000000..3bba43ca --- /dev/null +++ b/src/templates/footer.jsx @@ -0,0 +1,7 @@ +import React from 'react'; + +export default props => ( + +) \ No newline at end of file diff --git a/src/templates/header.jsx b/src/templates/header.jsx new file mode 100644 index 00000000..c7130fa2 --- /dev/null +++ b/src/templates/header.jsx @@ -0,0 +1,29 @@ +import React, { Component } from 'react'; +import { connect } from 'react-redux'; + + +import logo from '../assets/images/logo.png'; +import iconBag from '../assets/images/icon_bag.png'; + +class Header extends Component{ + + render() { + return( +
+
+
+ Logo Profite +
+ Icone Bolsa +
{this.props.count}
+
+
+
+
+ ) + } +} + +const mapStateToProps = state => ({count: state.actions.count}); + +export default connect(mapStateToProps)(Header); \ No newline at end of file diff --git a/src/templates/products.jsx b/src/templates/products.jsx new file mode 100644 index 00000000..e9bc2e61 --- /dev/null +++ b/src/templates/products.jsx @@ -0,0 +1,72 @@ +import React, { Component } from 'react'; +import { connect } from 'react-redux'; +import { bindActionCreators } from 'redux'; + +import productsData from '../json/products'; +import Dresses from '../components/dresses'; +import ButtonMore from '../components/buttonMore'; + +import { openCloseFilter } from '../reducers/filterMobileActions'; +import { openCloseSort } from '../reducers/sortMobileActions'; + + +class Products extends Component{ + + constructor(props){ + super(props); + + this.filterProducts = productsData; + } + + + + render() { + this.filterProducts.sort(this.props.typeSort); + + if(this.props.colorSelected) this.filterProducts = this.props.colorSelected; + if(this.props.sizeSelected) this.filterProducts = this.props.sizeSelected; + if(this.props.priceSelected) this.filterProducts = this.props.priceSelected; + + return( +
+ +

Vestidos

+ +
+
Filtrar
+
Ordenar
+
+ +
+ {this.filterProducts.slice(0,this.props.quantity).map((product, index) => ( + ) + )} +
+ + +
+ ) + } +} + +const mapStateToProps = state => ( + { + quantity: state.actions.more , + typeSort: state.sort.ordered , + colorSelected: state.filter.colorSelected , + priceSelected: state.filter.priceSelected , + sizeSelected: state.filter.sizeSelected + } +); + +const mapDispatchToProps = dispatch => (bindActionCreators({ openCloseFilter, openCloseSort }, dispatch)) + +export default connect(mapStateToProps, mapDispatchToProps)(Products); + diff --git a/src/templates/sidebar.jsx b/src/templates/sidebar.jsx new file mode 100644 index 00000000..f9ab40f0 --- /dev/null +++ b/src/templates/sidebar.jsx @@ -0,0 +1,39 @@ +import React, { Component } from 'react'; + +import RadioButtonSizeList from '../components/radioButtonSizeList'; +import RadioButtonColorList from '../components/radioButtonColorList'; +import RadioButtonPriceList from '../components/radioButtonPriceList'; + +class Sidebar extends Component { + + render() { + return( + + ) + } +} + + +export default Sidebar; \ No newline at end of file diff --git a/src/templates/sortMobile.jsx b/src/templates/sortMobile.jsx new file mode 100644 index 00000000..3402a491 --- /dev/null +++ b/src/templates/sortMobile.jsx @@ -0,0 +1,39 @@ +import React, { Component } from 'react'; +import { connect } from 'react-redux'; +import { bindActionCreators } from 'redux'; + +import ButtonCloseFilterAndSort from '../components/mobile/buttonCloseFilterAndSort'; +import ButtonSortMobile from '../components/mobile/buttonSortMobile'; + +import { openCloseSort } from '../reducers/sortMobileActions'; +import { sortByLowestPrice, sortByBiggestPrice, sortByDate } from '../reducers/sortActions'; + + +class SortMobile extends Component{ + + render() { + return( +
+ + + + + + +
+ ) + } +} + +const mapStateToProps = state => ({ openClose: state.sortMobile.openClose }); + +const mapDispatchToProps = dispatch => (bindActionCreators( + { + openCloseSort , + sortByLowestPrice, + sortByBiggestPrice, + sortByDate + } , dispatch) +); + +export default connect(mapStateToProps, mapDispatchToProps)(SortMobile); \ No newline at end of file