Мелкие правки (белый селект категорий + autosized textarea)

web/package-lock.json

@@ -367,6 +367,16 @@
         "postcss-value-parser": "3.3.0"
       }
     },
+    "autosize": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/autosize/-/autosize-4.0.0.tgz",
+      "integrity": "sha1-egWZsbqE1zvXWJsNnaOHAVLGkjc="
+    },
+    "autosize-input": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/autosize-input/-/autosize-input-0.4.0.tgz",
+      "integrity": "sha1-pc20MRDjH2odn7aVzLdHSVrwu14="
+    },
     "aws-sign2": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
@@ -11571,6 +11581,15 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-2.5.13.tgz",
       "integrity": "sha512-3D+lY7HTkKbtswDM4BBHgqyq+qo8IAEE8lz8va1dz3LLmttjgo0FxairO4r1iN2OBqk8o1FyL4hvzzTFEdQSEw=="
     },
+    "vue-autosize": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/vue-autosize/-/vue-autosize-1.0.2.tgz",
+      "integrity": "sha1-1BWYSKfA+DnUnepFQSzkcs3TpIo=",
+      "requires": {
+        "autosize": "4.0.0",
+        "autosize-input": "0.4.0"
+      }
+    },
     "vue-hot-reload-api": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.2.4.tgz",

web/package.json

@@ -11,9 +11,6 @@
     "autoprefixer": "^6.3.3",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.2",
-    "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
-    "babel-plugin-transform-es2015-shorthand-properties": "^6.24.1",
-    "babel-plugin-transform-es2015-template-literals": "^6.22.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-es2015": "^6.24.1",
@@ -66,6 +63,7 @@
     "smooth-scroll": "^12.1.5",
     "validator": "^9.2.0",
     "vue": "^2.5.13",
+    "vue-autosize": "^1.0.2",
     "vuejs-datepicker": "^0.9.25"
   }
 }

web/src/components/CourseRedactor.vue

@@ -24,13 +24,15 @@
                 <div class="info__field field field_info">
                   <div class="field__label">НАЗВАНИЕ КУРСА</div>
                   <div class="field__wrap">
-              <textarea class="field__textarea field__textarea_lg" title="Название курса"
-                        v-model="course.title"></textarea>
+                    <textarea class="field__textarea field__textarea_lg"
+                              title="Название курса"
+                              v-autosize="course.title"
+                              v-model="course.title"></textarea>
                   </div>
                 </div>
               </div>
               <div class="info__foot">
-                <div class="info__field field field_info">
+                <div class="info__field field field_info info__field--light">
                   <div class="field__label field__label_gray">КАТЕГОРИЯ</div>
                   <div class="field__wrap">
                     <lil-select :value.sync="categorySelect" :options="categoryOptions"
@@ -116,8 +118,11 @@
               <div class="kit__section">
                 <div class="kit__field field">
                   <div class="field__wrap">
-                    <input type="text" class="field__input" placeholder="Кратко о курсе"
-                           v-model="course.short_description">
+                    <textarea type="text"
+                              class="field__input"
+                              placeholder="Кратко о курсе"
+                              v-autosize="course.short_description"
+                              v-model="course.short_description"></textarea>
                   </div>
                 </div>
               </div>

web/src/js/course-redactor.js

@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import VueAutosize from 'vue-autosize'
 import 'babel-polyfill'
 import CourseRedactor from '../components/CourseRedactor.vue'
 
@@ -7,6 +8,8 @@ if (process.env.NODE_ENV === 'development') {
     Vue.config.devtools = true;
 }
 
+Vue.use(VueAutosize);
+
 let app = new Vue({
     el: '#lilcity-vue-app',
     components: {

web/src/sass/_common.sass

@@ -1862,6 +1862,19 @@ a.grey-link
   &.selected &__head
     color: $cl  
 
+.info__field--light
+  .select
+    .select__head
+      color: #777
+      font-size: 15px
+      &:after
+        border-color: #fff transparent transparent transparent
+    &.selected
+      .select__head
+        color: #fff
+        &:after
+          border-color: #fff transparent transparent transparent
+
 .field
   margin-bottom: 20px
   &__label
@@ -1904,7 +1917,8 @@ a.grey-link
     padding: 7px 0
     resize: vertical
     &_lg
-      height: 80px
+      min-height: 44px
+      height: auto
       font-size: 25px
   &__preview
     position: absolute
@@ -2987,6 +3001,7 @@ a.grey-link
   &__foot &__field
     margin-right: 20px
     flex: 0 0 140px
+    flex-grow: 1
   &__wrap
     max-width: 349px 
     height: 550px