diff --git a/apps/content/templates/content/contest.html b/apps/content/templates/content/contest.html index 9edbe8ec..49a0bd19 100644 --- a/apps/content/templates/content/contest.html +++ b/apps/content/templates/content/contest.html @@ -45,3 +45,8 @@ {% endblock content %} + +{% block pre_app_js %} + + +{% endblock pre_app_js %} diff --git a/apps/content/templates/content/contest_edit.html b/apps/content/templates/content/contest_edit.html index d1c26b62..856a6d9b 100644 --- a/apps/content/templates/content/contest_edit.html +++ b/apps/content/templates/content/contest_edit.html @@ -12,7 +12,8 @@ {% block content %} {% endblock content %} -{% block foot %} - - -{% endblock foot %} + +{% block pre_app_js %} + + +{% endblock pre_app_js %} 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/apps/user/templates/user/bonus-history.html b/apps/user/templates/user/bonus-history.html index 105592a5..ef3bf9d8 100644 --- a/apps/user/templates/user/bonus-history.html +++ b/apps/user/templates/user/bonus-history.html @@ -79,3 +79,7 @@ {% endblock content %} + +{% block pre_app_js %} + +{% endblock pre_app_js %} diff --git a/apps/user/templates/user/profile-settings.html b/apps/user/templates/user/profile-settings.html index 04eecdec..7de0e74c 100644 --- a/apps/user/templates/user/profile-settings.html +++ b/apps/user/templates/user/profile-settings.html @@ -323,3 +323,7 @@ // (new Inputmask('+7 (999) 999-99-99')).mask(document.querySelector('[name=phone]')); {% 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 b2eeb14c..cc334c94 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/project/templates/lilcity/edit_index.html b/project/templates/lilcity/edit_index.html index a88a7e84..074fb6e4 100644 --- a/project/templates/lilcity/edit_index.html +++ b/project/templates/lilcity/edit_index.html @@ -316,6 +316,7 @@ {% include 'templates/blocks/lil_store_js.html' %} +{% block pre_app_js %}{% endblock pre_app_js %} - - diff --git a/web/src/components/ContestWorks.vue b/web/src/components/ContestWorks.vue index b0d6f493..156acf93 100644 --- a/web/src/components/ContestWorks.vue +++ b/web/src/components/ContestWorks.vue @@ -74,8 +74,8 @@ } } } - - heights[column] += workHeight; + + heights[column] += workHeight; [first, second, third][column].push(work); index++; } @@ -112,28 +112,3 @@ components: {ContestWork}, } - - diff --git a/web/src/components/CourseRedactor.vue b/web/src/components/CourseRedactor.vue index eaec96d4..c16a0a4b 100644 --- a/web/src/components/CourseRedactor.vue +++ b/web/src/components/CourseRedactor.vue @@ -1074,168 +1074,4 @@ } - diff --git a/web/src/components/UploadContestWork.vue b/web/src/components/UploadContestWork.vue index 326c05c4..60d5f657 100644 --- a/web/src/components/UploadContestWork.vue +++ b/web/src/components/UploadContestWork.vue @@ -153,41 +153,3 @@ } } - - diff --git a/web/src/components/blocks/ContestWork.vue b/web/src/components/blocks/ContestWork.vue index 617b9fab..2cb1def9 100644 --- a/web/src/components/blocks/ContestWork.vue +++ b/web/src/components/blocks/ContestWork.vue @@ -25,38 +25,3 @@ components: {Likes}, } - - diff --git a/web/src/js/app.js b/web/src/js/app.js index 1588467f..9301efe8 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,13 @@ if (process.env.NODE_ENV === 'development') { } const components = { - UploadContestWork, - ContestWorks, Likes, Comments, + FAQ, }; 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/contest-redactor.js deleted file mode 100644 index afbbb193..00000000 --- a/web/src/js/contest-redactor.js +++ /dev/null @@ -1,4 +0,0 @@ -import ContestRedactor from '../components/ContestRedactor.vue' - -window.LIL_STORE.components['contest-redactor'] = ContestRedactor; - diff --git a/web/src/js/pages/contest-edit.js b/web/src/js/pages/contest-edit.js new file mode 100644 index 00000000..95b05559 --- /dev/null +++ b/web/src/js/pages/contest-edit.js @@ -0,0 +1,5 @@ +import '../../sass/components/contest-edit.scss'; + +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..84902ebb --- /dev/null +++ b/web/src/js/pages/contest.js @@ -0,0 +1,7 @@ +import '../../sass/components/contest.scss'; + +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 79% rename from web/src/js/course-redactor.js rename to web/src/js/pages/course-edit.js index 45b3c970..25b1545b 100644 --- a/web/src/js/course-redactor.js +++ b/web/src/js/pages/course-edit.js @@ -1,5 +1,7 @@ -import 'babel-polyfill' -import CourseRedactor from '../components/CourseRedactor.vue' +import '../../sass/components/course-edit.scss'; + +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-edit.scss b/web/src/sass/components/contest-edit.scss new file mode 100644 index 00000000..574739d4 --- /dev/null +++ b/web/src/sass/components/contest-edit.scss @@ -0,0 +1,35 @@ +.upload-contest-work { + + .popup__wrap { + padding: 35px 35px 0; + } + + .title { + text-align: center; font-size: 24px; + + .text__curve { + right: 55px; + width: 170px; + bottom: -40px; + } + } + + .kit__photo { + height: 400px; + } + + .kit__photo.has-image { + border: none; + } + + .kit__photo-image { + max-height: 400px; + height: auto; + width: auto; + } + + .kit__file { + bottom: 0; + } + +} diff --git a/web/src/sass/components/contest.scss b/web/src/sass/components/contest.scss new file mode 100644 index 00000000..bc243ebf --- /dev/null +++ b/web/src/sass/components/contest.scss @@ -0,0 +1,55 @@ +.contest-works { + width: 100%; +} +.contest-works__works { + text-align: left; + display: flex; +} +.contest-works__column { + display: flex; + flex-direction: column; + margin-right: 20px; + width: 300px; +} +.contest-works__loader { + width: 100%; + height: 30px; + position: relative; +} +.contest-works__no-works { + text-align: center; + width: 100%; +} + +.contest-work-item { + break-inside: avoid; + border-radius: 8px; + overflow: hidden; + margin-bottom: 20px; + transition: opacity .4s ease-in-out; + text-transform: uppercase; + font-weight: bold; + color: black; + border: 1px solid #ececec; + display: block; +} +.contest-work-item__img { + width: 100%; + height: auto; +} +.contest-work-item__info { + display: flex; + padding: 5px 10px; +} +.contest-work-item__age { + color: #919191; +} +.contest-work-item__bio { + flex: calc(100% - 70px); +} + +@media only screen and (min-width: 1023px) { + .contest-works:hover .contest-work-item:not(:hover) { + opacity: 0.4; + } +} diff --git a/web/src/sass/components/course-edit.scss b/web/src/sass/components/course-edit.scss new file mode 100644 index 00000000..ad1d219e --- /dev/null +++ b/web/src/sass/components/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/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..21ead790 100644 --- a/web/webpack.config.js +++ b/web/webpack.config.js @@ -5,26 +5,27 @@ 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/*'), }, 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: {