bubble/digital-store
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/digital-store.git synced 2026-10-11 10:19:15 +03:00
Code Issues Packages Projects Releases Wiki Activity

Added pug and express server

Browse Source
This commit is contained in:
Sergey Yarkov 2019-11-11 22:31:53 +03:00
parent 87d5112154
commit 6fa9cc1c49
8 changed files with 1630 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
config/routes/index.js
View File

5
config/routes/routes.js Normal file
View File

@ -0,0 +1,5 @@
module.exports = function(app) {
app.get('/', (req, res) => {
res.render('index');
});
}

17
config/server.js
View File

@ -0,0 +1,17 @@
const express = require('express');
const app = express();
const path = require('path');
// Pug config
app.use(express.static('public'));
app.set('view engine', 'pug');
// Path to renred files
app.set('views', path.join(__dirname, '../dist/views'));
// Routes
require('./routes/routes')(app);
// 404 Redirect
app.use((req, res) => res.status(404).send('Error 404'));
app.listen(3000, () => console.log('Listen port 3000...'));

137
dist/public/css/media.css vendored Normal file
View File

@ -0,0 +1,137 @@
@media (max-width: 1600px) {
.category .category-items ul {
justify-content: center;
}
}
@media (max-width: 1500px) {
header nav,
main,
footer .container {
padding-left: 30px;
padding-right: 30px;
}
}
@media (max-width: 1240px) {
.container {
width: 85%;
}
}
@media (max-width: 1199px) {
header nav,
main,
footer .container {
padding: 0;
}
}
@media (max-width: 992px) {
.container {
width: 100%;
}
}
@media (max-width: 768px) {
.items .items-list {
flex-wrap: wrap;
justify-content: center;
padding-bottom: 7px;
padding-top: 7px;
}
#product .product-info {
flex-direction: column;
align-items: center;
}
#product .product-info__left {
width: initial;
flex-direction: column;
}
#product .product-info__cost {
width: initial;
margin: 15px 0;
}
}
@media (max-width: 620px) {
.items .items-list .items-list__info {
flex-wrap: wrap;
justify-content: center;
}
#cart .cart-content {
margin-top: 2rem;
}
}
@media (max-width: 511px) {
.list-count,
.list-price,
.list-one {
margin-bottom: 7px;
}
}
@media (max-width: 501px) {
.filter-options form {
justify-content: space-around;
}
#cart .modal-content__right {
width: 90px;
}
}
@media (max-width: 420px) {
nav .nav-wrapper .brand-logo {
font-size: 17px;
}
}
@media (max-width: 380px) {
.items .items-list .items-list__info {
flex-direction: column;
}
.list-count,
.list-price,
.list-one {
margin-right: 0px;
margin-left: 0px;
}
}
@media (max-width: 360px) {
.filter-options form {
justify-content: flex-start;
}
}
@media (max-width: 359px) {
#cart .modal-content__item {
flex-wrap: wrap;
justify-content: space-around;
text-align: center;
}
#cart .modal-content__right {
margin-top: 10px;
}
#cart .modal-content__right span {
margin-left: 0;
}
}
@media (max-width: 340px) {
nav .nav-wrapper .brand-logo {
font-size: 16px;
}
}

638
dist/public/css/style.css vendored
View File

@ -0,0 +1,638 @@
* {
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
padding: 0;
margin: 0;
}
h1 {
font-size: 16px;
font-weight: 500;
color: #5d5d5d;
}
html {
font-family: "Roboto", sans-serif;
font-weight: normal;
}
body {
background-color: #F3F3F3;
}
a {
color: #000;
}
hr {
margin-top: 20px;
margin-bottom: 20px;
border: 0;
border-top: 1px solid #e0e0e0;
}
.select-dropdown li img {
width: 35px;
height: 35px;
}
/* Custom Styles */
.block-title {
display: flex;
align-items: center;
}
.block-title h1, .block-title h2, .block-title h3 {
padding-left: 10px;
}
.block-content {
padding: 20px;
}
.small-title {
font-size: 15px;
text-transform: uppercase;
font-weight: 600;
color: rgba(0, 0, 0, 0.54);
}
.med-title {
font-size: 18px;
text-transform: uppercase;
font-weight: 600;
color: rgba(0, 0, 0, 0.747);
}
.show {
display: block;
}
.hide {
display: none;
}
/* Cart */
.cart-btn {
position: fixed;
right: 30px;
bottom: 50px;
background-color: #1ba860 !important;
width: 65px !important;
height: 65px !important;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
cursor: pointer;
}
.cart-btn i {
font-size: 30px;
}
.cart-btn .counter {
display: inline-block;
position: absolute;
right: 9px;
top: 8px;
width: 20px;
height: 20px;
font-size: 13px;
color: #000;
border-radius: 50%;
background-color: #fff;
}
.cart,
.pay {
display: flex;
justify-content: center;
padding-right: 10px;
padding-left: 10px;
}
.cart-wrap,
.pay-wrap {
position: fixed;
background: rgba(0, 0, 0, .5);
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 999;
}
.cart-content,
.pay-content {
background-color: #fff;
margin-top: 7rem;
padding: 25px;
width: 460px;
min-height: 350px;
}
.modal-content__header .small-title {
color: #404751;
}
.modal-content__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.cart-close,
.pay-close {
cursor: pointer;
}
.cart-close i,
.pay-close i {
color: #8d8d8d;
}
.modal-content__purchase {
margin-top: 15px;
}
.modal-content__purchase .purchase-btn {
width: 100%;
height: 45px;
font-family: 'Roboto';
font-weight: 500;
}
.modal-content__info {
margin-top: 20px;
}
.modal-content__info .modal-content__counter,
.modal-content__info .modal-content__pay {
display: flex;
justify-content: space-between;
font-size: 13px;
padding: 3px 0;
}
#total-price {
font-size: 16px;
}
#item-remove i {
font-size: 20px;
cursor: pointer;
}
.modal-content__items {
border-top: 1px solid #e0e0e0;
max-height: 237px;
overflow-y: scroll;
}
.modal-content__item {
padding: 10px 0px 10px 0;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #e0e0e0;
}
.modal-content__title {
font-size: 13px;
white-space: nowrap;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
width: 200px;
}
.modal-content__right {
align-self: center;
}
.modal-content__right span {
font-size: 14px;
margin-left: 15px;
}
.modal-content__right button {
height: 0px;
width: 15px;
background: none;
border: none;
padding: 0;
color: #404751;
font-size: 14px;
cursor: pointer;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
.modal-content__right input[type="number"] {
background: none;
height: 18px;
border: 1px solid #EAECED;
width: 30px;
margin: 0 5px;
color: #404751;
font-family: Arial, sans-serif;
font-size: 12px;
text-align: center;
border-radius: 1px;
}
.in-stock {
color: #99a1aa;
}
/* Information Block */
.information {
border-radius: 2px;
margin-bottom: 1rem;
background-color: #FFE8E8;
color: #333;
font-size: 15px;
}
.information-title h2 {
color: #f55555;
margin-bottom: 1rem;
}
.information-close {
display: flex;
justify-content: flex-end;
margin-top: 5px;
}
/* Items Pagination */
.items-pagination ul {
display: flex;
justify-content: center;
}
.pagination li.active {
background-color: #26A69A;
}
/* Header */
header {
position: fixed;
right: 0;
left: 0;
top: 0;
z-index: 999;
}
nav {
background-color: #26A69A;
font-weight: 300;
box-shadow: none;
}
.nav-wrapper .brand-logo {
font-size: 20px;
padding: 0px 5px 0px 5px;
}
.nav-wrapper .brand-logo i {
font-size: 28px;
}
/* Main */
.main-section {
margin-top: 6rem;
}
header nav,
main,
footer .container {
padding-left: 90px;
padding-right: 90px;
}
/* Category */
.category,
.filter,
.purchase,
.background {
background-color: #fff;
border-radius: 4px;
margin-bottom: 1rem;
}
.category-items ul {
display: flex;
flex-wrap: wrap;
}
.category-items li a {
display: block;
width: 165px;
height: 42px;
line-height: 42px;
text-align: center;
background: #EFEFEF;
color: #929292;
margin: 3px;
transition: 0.2s;
border-radius: 2px;
}
.category-items li a:hover {
background: #26A69A;
color: #fff;
}
.category-items li .active {
background: rgb(39, 134, 125);
color: #fff;
}
/* Filter items */
.filter-options {
margin-top: 1rem;
}
.filter-options form {
display: flex;
flex-wrap: wrap;
}
.filter-options form label {
width: 130px;
margin-bottom: 7px;
}
/* Items */
.items {
background-color: #fff;
border-radius: 4px;
min-height: 200px;
}
.items-title {
margin-bottom: 1rem;
}
.items-category {
background-color: #26A69A;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 3px;
margin-bottom: 1rem;
margin-top: 1rem;
}
.items-category h2 {
color: #fff;
font-weight: 300;
}
.items-list {
background-color: #F9F9F9;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 42px;
font-size: 14px;
padding: 0px 10px 0px 10px;
margin-bottom: 5px;
border-radius: 3px;
}
.items-list__name,
.items-list__info {
display: flex;
align-items: center;
}
.items-list .list-icon img {
width: 24px;
height: 24px;
}
.items-list__info {
margin-top: 5px;
}
.list-icon,
.list-buttons {
display: flex;
align-items: center;
}
.list-title {
padding-left: 7px;
}
.list-title a {
color: #000;
text-decoration: underline;
}
.list-count,
.list-price {
height: 24px;
background: #E7E7E7;
text-align: center;
border-radius: 15px;
}
.list-price {
padding: 0 13px;
}
.list-count {
width: 80px;
margin-left: 10px;
}
.list-one {
width: 90px;
}
.list-count,
.list-price,
.list-one,
.list-buttons button:nth-child(1) {
margin-right: 10px;
}
.items-pagination,
.items-footer,
.items-footer__info,
.items-footer__info p {
margin-top: 1rem;
}
.background {
background-color: #fff;
padding: 40px;
margin: 40px 0;
min-height: 650px;
}
/* Product */
.product .breadcrumb ul {
display: flex;
flex-wrap: wrap;
}
.product .breadcrumb li {
color: #6b6b6b;
font-size: 14px;
}
.product .breadcrumb li a {
color: #b3b3b3;
}
.product .breadcrumb li::after {
content: "/";
padding: 0 10px;
color: #b3b3b3;
}
.product .breadcrumb li:nth-child(3)::after {
content: '';
}
.product-title h1 {
font-size: 21px;
color: #5d5d5d;
margin-bottom: 40px;
}
.product-info {
display: flex;
}
/* Product-info Left */
.product-info__left {
width: 360px;
display: flex;
}
.product-left__pay {
display: flex;
flex-direction: column;
align-items: center;
width: 120px;
}
.product-left__pay button {
width: 100%;
margin-top: 20px;
}
.product-left__pay img {
width: 35px;
height: 35px;
border-radius: 50%;
}
.product-info__cost {
width: 50%;
display: flex;
flex-direction: column;
align-items: center;
}
.product-info__count span {
font-weight: 400;
font-size: 14px;
background: #E7E7E7;
padding: 2px 13px;
border-radius: 15px;
color: #000;
text-align: center;
margin-top: 2px;
}
.product-info__price span {
font-weight: 400;
font-size: 14px;
background: #E7E7E7;
padding: 2px 13px;
border-radius: 15px;
color: #000;
text-align: center;
margin-top: 2px;
}
.product-info__cost p {
padding: 10px 0;
font-weight: 400;
font-size: 14px;
}
/* Product-info Right */
.product-info__right {
background-color: #F9F9F9;
min-height: 450px;
width: 100%;
border-radius: 4px;
padding: 20px;
color: #383838;
max-width: 820px;
}
.product-right__title {
margin-bottom: 10px;
}
.product-right__title span {
font-size: 17px;
font-weight: 500;
color: #5d5d5d;
}
.product-right__content h2 {
font-weight: 500;
font-size: 16px;
}
.product-right__content h3 {
font-weight: 500;
font-size: 16px;
color: #5d5d5d;
}
.product-right__content p {
margin: 15px 0;
}
/* Footer */
footer {
margin-top: 5rem;
background-color: #25998f;
padding-top: 10px;
padding-bottom: 10px;
color: #fff;
min-height: 90px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}

1
dist/views/index.pug vendored Normal file
View File

@ -0,0 +1 @@
h2 Server is working

850
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@ -17,7 +17,9 @@
}, },
"homepage": "https://github.com/sergeyyarkov/digital-store#readme", "homepage": "https://github.com/sergeyyarkov/digital-store#readme",
"dependencies": { "dependencies": {
"@babel/polyfill": "^7.7.0" "@babel/polyfill": "^7.7.0",
"express": "^4.17.1",
"pug": "^2.0.4"
}, },
"devDependencies": { "devDependencies": {
"@babel/cli": "^7.7.0", "@babel/cli": "^7.7.0",