diff --git a/apps/content/templates/content/contest_edit.html b/apps/content/templates/content/contest_edit.html index d1c26b62..409405a6 100644 --- a/apps/content/templates/content/contest_edit.html +++ b/apps/content/templates/content/contest_edit.html @@ -13,6 +13,5 @@ {% endblock content %} {% block foot %} - {% endblock foot %} diff --git a/apps/course/templates/course/course_edit.html b/apps/course/templates/course/course_edit.html index ee3143dd..296f8da1 100644 --- a/apps/course/templates/course/course_edit.html +++ b/apps/course/templates/course/course_edit.html @@ -13,7 +13,7 @@ access-token="{{ request.user.auth_token }}" {% if object and object.id %}:course-id="{{ object.id }}"{% endif %}> {% endblock content %} -{% block foot %} - - -{% endblock foot %} +{% block pre_app_js %} + + +{% endblock pre_app_js %} diff --git a/project/templates/blocks/lil_store_js.html b/project/templates/blocks/lil_store_js.html index 39770603..7556240c 100644 --- a/project/templates/blocks/lil_store_js.html +++ b/project/templates/blocks/lil_store_js.html @@ -21,10 +21,14 @@ components: {}, urls: { courses: "{% url 'courses' %}", + courseEdit: /\/course\/\d+\/edit/, + courseCreate: "{% url 'course_create' %}", userProfileEdit: "{% url 'user-edit-profile' %}", userProfile: "{% url 'user-profile' %}", userBonuses: "{% url 'user-bonuses' %}", faq: "{% url 'faq' %}", + contestEdit: /contest\/\w+\/edit/, + userGalleryEdit: "{% url 'user-gallery-edit' %}", }, flags: { referrer: '{{ referrer.id|default:'' }}', @@ -33,8 +37,12 @@ isGiftCertificateUrl: {{ is_gift_certificate_url|yesno:"true,false" }}, }, data: {}, - urlIs: (urlPatternName) => { - return window.location.pathname.search(window.LIL_STORE.urls[urlPatternName]) > -1; + urlIs: (urlPatternNames) => { + if(! Array.isArray(urlPatternNames)){ + urlPatternNames = [urlPatternNames]; + } + return urlPatternNames.filter( + urlPatternName => window.location.pathname.search(window.LIL_STORE.urls[urlPatternName]) > -1).length > 0; }, isIndexPage: window.location.pathname == '/', }; diff --git a/web/package.json b/web/package.json index f2c6d260..1c128202 100755 --- a/web/package.json +++ b/web/package.json @@ -41,6 +41,7 @@ "baguettebox.js": "^1.10.0", "clipboard": "^2.0.1", "downscale": "^1.0.4", + "extract-loader": "^3.1.0", "glob": "^7.1.2", "history": "^4.7.2", "ilyabirman-likely": "^2.3.0", diff --git a/web/src/js/app.js b/web/src/js/app.js index 1588467f..313141c1 100644 --- a/web/src/js/app.js +++ b/web/src/js/app.js @@ -13,7 +13,6 @@ import "./modules/tabs"; import "./modules/popup"; import "./modules/courses"; import "./modules/comments"; -import "./modules/comments"; import "./modules/password-show"; import "./modules/notification"; import "./modules/mixpanel"; @@ -25,9 +24,8 @@ import Vue from 'vue'; import Vuelidate from 'vuelidate'; import VueAutosize from '../components/directives/autosize' import Comments from '../components/Comments'; -import UploadContestWork from '../components/UploadContestWork.vue'; -import ContestWorks from '../components/ContestWorks.vue'; import Likes from '../components/blocks/Likes.vue'; +import FAQ from '../components/FAQ.vue'; Vue.use(Vuelidate); Vue.use(VueAutosize); @@ -38,23 +36,30 @@ if (process.env.NODE_ENV === 'development') { } const components = { - UploadContestWork, - ContestWorks, Likes, Comments, + FAQ, }; +// +//if(window.LIL_STORE.urlIs('userProfileEdit') || window.LIL_STORE.urlIs('userBonuses')){ +// const profile = require("./modules/profile"); +// profile.main(); +//} +//if(window.LIL_STORE.urlIs(['courseEdit', 'courseCreate'])){ +// const courseEdit = require("./modules/course-redactor"); +// courseEdit.main(); +//} +//if(window.LIL_STORE.urlIs('contestEdit')){ +// const ContestRedactor = require('../components/ContestRedactor.vue'); +// components['contest-redactor'] = ContestRedactor.default; +//} +//if(window.LIL_STORE.urlIs('userGalleryEdit')){ +// const userGalleryEdit = require("./modules/user-gallery-edit"); +// userGalleryEdit.main(); +//} Object.assign(components, window.LIL_STORE.components); -if(window.LIL_STORE.urlIs('faq')){ - const FAQ = require('../components/FAQ.vue'); - components['faq'] = FAQ.default; -} -if(window.LIL_STORE.urlIs('userProfileEdit') || window.LIL_STORE.urlIs('userBonuses')){ - const profile = require("./modules/profile"); - profile.main(); -} - const app = new Vue({ el: '#lilcity-vue-app', data() { diff --git a/web/src/js/contest-redactor.js b/web/src/js/pages/contest-edit.js similarity index 50% rename from web/src/js/contest-redactor.js rename to web/src/js/pages/contest-edit.js index afbbb193..e1daf8ef 100644 --- a/web/src/js/contest-redactor.js +++ b/web/src/js/pages/contest-edit.js @@ -1,4 +1,3 @@ -import ContestRedactor from '../components/ContestRedactor.vue' +import ContestRedactor from '../../components/ContestRedactor.vue'; window.LIL_STORE.components['contest-redactor'] = ContestRedactor; - diff --git a/web/src/js/pages/contest.js b/web/src/js/pages/contest.js new file mode 100644 index 00000000..d5785c15 --- /dev/null +++ b/web/src/js/pages/contest.js @@ -0,0 +1,5 @@ +import UploadContestWork from '../../components/UploadContestWork.vue'; +import ContestWorks from '../../components/ContestWorks.vue'; + +window.LIL_STORE.components['upload-contest-work'] = UploadContestWork; +window.LIL_STORE.components['contest-works'] = ContestWorks; diff --git a/web/src/js/course-redactor.js b/web/src/js/pages/course-edit.js similarity index 85% rename from web/src/js/course-redactor.js rename to web/src/js/pages/course-edit.js index 45b3c970..e7a2fcc4 100644 --- a/web/src/js/course-redactor.js +++ b/web/src/js/pages/course-edit.js @@ -1,5 +1,5 @@ -import 'babel-polyfill' -import CourseRedactor from '../components/CourseRedactor.vue' +import 'babel-polyfill'; +import CourseRedactor from '../../components/CourseRedactor.vue'; import $ from 'jquery'; window.LIL_STORE.components['course-redactor'] = CourseRedactor; diff --git a/web/src/js/modules/profile.js b/web/src/js/pages/profile.js similarity index 94% rename from web/src/js/modules/profile.js rename to web/src/js/pages/profile.js index 11f60b76..9ac8120a 100644 --- a/web/src/js/modules/profile.js +++ b/web/src/js/pages/profile.js @@ -1,9 +1,9 @@ import $ from 'jquery'; import slugify from 'slugify'; import ClipboardJS from 'clipboard'; -import {showNotification} from './notification'; +import {showNotification} from '../modules/notification'; -export const main = () => { +$(document).ready(function () { if(window.LIL_STORE.urlIs('userBonuses')){ $('#referrer-url').select().click(function(){ $(this).select(); @@ -53,4 +53,4 @@ export const main = () => { }); changeSlug(); } -} +}); diff --git a/web/src/js/user-gallery-edit.js b/web/src/js/pages/user-gallery-edit.js similarity index 77% rename from web/src/js/user-gallery-edit.js rename to web/src/js/pages/user-gallery-edit.js index 8c957d11..c7ce4449 100644 --- a/web/src/js/user-gallery-edit.js +++ b/web/src/js/pages/user-gallery-edit.js @@ -1,6 +1,7 @@ -import BlockImages from '../components/blocks/BlockImages.vue'; +import BlockImages from '../../components/blocks/BlockImages.vue'; import $ from 'jquery'; -import {api} from "./modules/api"; +import {api} from "../modules/api"; + window.LIL_STORE.components['block-images'] = BlockImages; diff --git a/web/src/sass/app.sass b/web/src/sass/app.sass index 82cdc94a..38c37335 100755 --- a/web/src/sass/app.sass +++ b/web/src/sass/app.sass @@ -2,4 +2,4 @@ @import helpers/all @import generated/sprite-svg @import common -@import '~baguettebox.js/dist/baguetteBox.min.css'; \ No newline at end of file +@import '~baguettebox.js/dist/baguetteBox.min.css'; diff --git a/web/src/sass/components/contest-work.scss b/web/src/sass/components/contest-work.scss new file mode 100644 index 00000000..e69de29b diff --git a/web/src/sass/pages/course-edit.scss b/web/src/sass/pages/course-edit.scss new file mode 100644 index 00000000..ad1d219e --- /dev/null +++ b/web/src/sass/pages/course-edit.scss @@ -0,0 +1,166 @@ +.vdp-datepicker__calendar { + width: 240px; + margin-top: 10px; + padding: 5px; + background: white; + box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1); + z-index: 99 !important; + + header { + display: flex; + margin-bottom: 5px; + -ms-flex-align: center; + align-items: center; + } + + .prev, .next { + font-size: 0; + cursor: pointer; + order: 1; + width: auto !important; + padding: 10px; + } + + .prev { + order: 1; + } + + .next { + order: 3; + } + + .prev:before, .next:before { + content: ''; + display: block; + width: 10px; + height: 10px; + border: solid #E6E6E6; + border-width: 2px 2px 0 0; + } + + .prev:after, .next:after { + content: none !important; + } + + .prev:before { + transform: rotate(-135deg); + } + + .next:before { + transform: rotate(45deg); + } +} + +.kit__preview { + img { + width: 140px; + height: 140px; + } +} + +.kit__photo { + width: 140px; + height: 140px; +} + +.kit__section-remove { + button.sortable__handle { + margin-right: 10px; + cursor: -webkit-grab; + cursor: grab; + + svg.icon-hamburger { + width: 1em; + height: 1em; + } + } +} + +.sortable-ghost, .sortable-chosen { + background: white; + border-radius: 10px; +} + +.course-redactor__preview-button-bg-save { + background-color: #58fffb; +} +.course-redactor__preview-button { + transition: backgroundColor 0.5s ease-in-out; +} + +.field_text { + height: 270px; + overflow: scroll; +} + +.courses__item { + flex: 0 0 300px; +} + +.courses__item .field { + margin-bottom: 0; +} + +.courses__content .redactor-box { + overflow-x: visible; + overflow-y: auto; + max-height: 200px; + background: none; + margin-top: 10px; +} + +.courses__content .redactor-layer{ + background: none; +} + +.courses__theme { + flex: 1; +} + +.courses__price { + margin-left: 20px; +} + +.courses__preview { + .upload { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + + .upload__title { + color: #888888; + font-size: 16px; + margin-top: 100px; + width: 100%; + text-align: center; + } + + .upload__file { + width: 100%; + height: 100%; + } +} + +.course-delete-cover { + left: 5px; + position: absolute; + bottom: 3px; +} + +.field-category .select__head { + font-size: inherit; + line-height: inherit; + height: auto; +} + +.datetime-fields { + display: flex; +} + +.field-time { + margin-left: 10px; + flex: 50%; +} diff --git a/web/webpack.config.js b/web/webpack.config.js index c2182909..886156ed 100644 --- a/web/webpack.config.js +++ b/web/webpack.config.js @@ -5,33 +5,36 @@ const NODE_ENV = process.env.NODE_ENV || 'development'; const ExtractTextPlugin = require("extract-text-webpack-plugin"); const SpriteLoaderPlugin = require('svg-sprite-loader/plugin'); + module.exports = { entry: { app: "./src/js/app.js", - courseRedactor: "./src/js/course-redactor.js", - contestRedactor: "./src/js/contest-redactor.js", - userGalleryEdit: "./src/js/user-gallery-edit.js", + courseEdit: "./src/js/pages/course-edit.js", + contest: "./src/js/pages/contest.js", + contestEdit: "./src/js/pages/contest-edit.js", + profile: "./src/js/pages/profile.js", + userGalleryEdit: "./src/js/pages/user-gallery-edit.js", mixpanel: "./src/js/third_party/mixpanel-2-latest.js", sprite: glob('./src/icons/*.svg'), images: glob('./src/img/*.*'), imagesCertificates: glob('./src/img/user-certificates/*'), imagesGiftCertificates: glob('./src/img/gift-certificates/*'), imagesReviews: glob('./src/img/reviews/*'), - fonts: glob('./src/fonts/*') + fonts: glob('./src/fonts/*'), +// pages: glob('./src/js/pages/*'), +// pagesCss: glob('./src/sass/pages/*'), }, output: { path: path.join(__dirname, "build"), filename: NODE_ENV === 'development' ? '[name].js' : '[name].js', library: '[name]', - //filename: NODE_ENV === 'development' ? '[name].js' : '[name].[id].[chunkhash].js', - //library: '[name]', publicPath: '/static/', }, module: { loaders: [ { test: /\.js$/, - exclude: /(node_modules|bower_components|third_party)/, + exclude: /(node_modules|bower_components|third_party|pages)/, use: { loader: 'babel-loader', options: { @@ -41,7 +44,7 @@ module.exports = { }, { test: /third_party\/.*\.js$/, - exclude: /(node_modules|bower_components)/, + exclude: /(node_modules|bower_components|pages)/, use: { loader: 'file-loader', options: { @@ -49,6 +52,22 @@ module.exports = { } } }, +// { +// test: /\.js$/, +// include: [path.resolve(__dirname, 'src/js/pages')], +// use: [{ +// loader: 'file-loader', +// options: { +// name: "[name].[ext]" +// } +// }, +// { +// loader: 'babel-loader', +// options: { +// "presets": ["es2015"], +// } +// }] +// }, { test: /\.css$/, use: ExtractTextPlugin.extract({ @@ -58,11 +77,39 @@ module.exports = { }, { test: /\.s[ac]ss$/, + exclude: [path.resolve(__dirname, 'src/sass/pages')], use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader'] }) }, + /* { + test: /\.s[ac]ss$/, + include: [path.resolve(__dirname, 'src/sass/pages')], + use: [ + { + loader: 'file-loader', + options: { + name: '[name].css', + } + }, + { + loader: 'extract-loader', + }, + { + loader: 'css-loader', + options: { + sourceMap: true + } + }, + { + loader: 'sass-loader', + options: { + sourceMap: true + } + } + ] + }, */ { test: /\.vue$/, loader: 'vue-loader', @@ -127,6 +174,10 @@ module.exports = { "window.$": "jquery" }), new ExtractTextPlugin('[name].css'), +// new MiniCssExtractPlugin({ +// filename: "[name].css", +// chunkFilename: "[id].css" +// }), ], resolve: {