NLCH-0011 Интегрируемся с Wufoo для работы с интерактивными веб-формами

[SergiiShapoval]

Из тех провайдеров веб-форм API которых я видел, наиболее гибкая система у Wufoo: стили вебформ подганяются под стили сайта = формы имеют responsive design + сам интерфейс дружелюбнее.

Пример, формы находится пока на http://sergiishapoval.github.io/nasha_lepta/#/article8, код ниже:

`

` Важный момент - отключено ssl шифрование ('ssl': false), иначе могут быть проблемы с подгрузкой нашего стиля в форму. Доступ к форме - логин nasha.lepta.challenge@gmail.com и пароль TzX7geKQJVsa73dn Можно вставлять, конечно, каждый раз форму с помощью html/css опции - но это не автоматизированный вариант. По этому предлагается использоваться опцию Embed Code. Для её использования нужно: 1. Слить наши стиль в один единственный (сейчас на выходе vendor и main ) и продублировать его на постоянном адресе. Всё это можно сделать, прописав дополнительные grunt таски: 1. новые таски должны быть вставлены после минификации, до переименования в название с хешем, чтобы отследить куда должна быть вставлена дополнительная таска - используйте grunt -v build 2. дополнительная таска должна быть подвидом concat таски grunt - (GitHub - gruntjs/grunt-contrib-concat, http://www.thoughtdelimited.org/thoughts/post.cfm/using-grunt-to-concatenate-only-the-js-css-files-used-in-index-html) 3. добавить тему в wufoo на основе единого css стиля  2. Добавить вставленному div class, который будет использовать фон родительского элемента

[vsashyn]

@SergiiShapoval, не рассматривали Google Forms для реализации таски? С интеграцией будет проще.

Воркфлоу следующий:

1. На GoogleForms создаем форму
2. Через CKeditor Embed Code вставляем код GoogleForm
3. Форма готова

Преимущества:

1. Данные все так же в облаке
2. Имхо, GoogleForms довольно симпатичные и не плохо кастомизируются
3. Легкость внедрения

[SergiiShapoval]

@vsashyn рассматривал, проблема в том,ч то google forms вставляются с помощью iframe = будут проблемы с responsive, не говоря уже о возможности переопределить стили, wufoo это позволяет

[icanhazsoulz]

В общем, у меня наконец получился единый файл стиля, ссылка на который вставляется корректно. Порядок выполнения: создание двух стилей (combined и main вместо vendor и main) -> конкатенация (combined = combined + main) -> удаление main -> вставка combined с хешем в index.html (место вставки отмечено специальным комментарием).

Изменения здесь: https://github.com/katana-ua/nasha_lepta/commit/20ed226e9fec34172aa530957e119af11a3c5b1f

[SergiiShapoval]

@katana-ua применил все изменения, кроме изменения версии grunt-contrib-imagemin, сомневаюсь, что это изменение изменит генерирование css стилей

на выходе main.css где-то потерялся, хотя ссылка осталась, думаю, нужно поменять вот это:

  <!-- build:css(.tmp) styles/main.css -->
  <link rel="stylesheet" href="styles/main.css">
  <!-- endbuild -->

combined.css содержал в себе значения main.css в конце, как и надо

стили должны изменятся ещё и в подпроектах...

докрути

[icanhazsoulz]

@SergiiShapoval да, затык был связан именно с разными путями (.) и (.tmp) в этих двух комментариях. По сути, там и конкатенацию добавлять - излишество, т.к. cssmin сам объединяет все, что находится в комментариях. Поэтому я сделала еще чуть иначе и проще: в комментарии оставила только один путь и добавила таску copy:css, которая копирует main.css туда, где cssmin может его найти, после чего clean:css эту копию удаляет.

Новый вариант: https://github.com/katana-ua/nasha_lepta/commit/c09ca11a8decb25e8402769a714d680172f30cce

Если все ОК, перехожу к форме.

[SergiiShapoval]

@katana-ua у меня в прошлый раз сгенерировался только combined файл с хешем, а нужно два один с хешем, второй без... будет два после текущих изменений?

[icanhazsoulz]

Нужно два файла combined или combined с хешем, main без хеша? Я тут просто намучалась, пока придумала, как сделать именно один - а оказывается, нужно два ))

[SergiiShapoval]

1. Слить наши стиль в один единственный (сейчас на выходе vendor и main ) и продублировать его на постоянном адресе.

=на выходе два файла, combined с хешем и без, содержимое обоих файлов одинаковое

[icanhazsoulz]

Теперь два, gruntfile здесь: https://github.com/katana-ua/nasha_lepta/commit/b2d840b5396f7169d4af8c9bfddedb0dd04f7419

[SergiiShapoval]

@katana-ua просьба делать в отдельных ветках, так мы сможем отделить твои изменения по данной фиче от всех остальных и я смогу быстро проверять

[SergiiShapoval]

добавил изменения с твоего мастера в отдельную ветку , запустил билд, пишет что нету logfile-grunt

[icanhazsoulz]

Это пакет, который я себе доустановила для того, чтобы вся инфа при работе гранта записывалась в лог. Может, запустить с --force?

[SergiiShapoval]

доустановил, только изменения всегда должны быть такими, чтобы любой мог повторить без доп танцев, просьба устанавливать с --save-dev

ок генерирует всё правильно

молодец, добавляй pull request, желательно с изменениями, которые только касаються wufoo

[icanhazsoulz]

В package.json он внесен - просто из-за нескольких коммитов уже не разобрать где что :( постараюсь в дальнейшем не путать и отдельные ветки делать.

ОК, щас добавлю.

[SergiiShapoval]

добавил pull-request #34

[SergiiShapoval]

в Wufoo поставь пока ссылку на свой combined.css для тестирования потом поменяю на css из SergiiShapoval

[icanhazsoulz]

Поставила, получилось? Визуально у меня ничего не поменялось что-то.

[SergiiShapoval]

@katana-ua как называется тема? wufoo-bootstrap? удали старые оставь только ту, что нам надо

ссылку ставила на http://katana-ua.github.io/nasha_lepta/styles/combined.css ?

теперь надо поиграться с классом для общего div и, возможно для отдельных елементов в форме

[icanhazsoulz]

Я тут ошибочно удалила форму вместо темы :( надеюсь, это не смертельно и есть скрин или схема, из которых смогу восстановить. Пока сделала похожую новую на основе темы из галереи Wufoo Church Visitors Form (вроде это она и была?) и полей из той формы, которая отображается на странице http://sergiishapoval.github.io/nasha_lepta/#/article8 ниже, код новой:

`

` Ссылку на свой combined.css поставила, выглядит так: http://katana-ua.github.io/nasha_lepta/#/article8 НО: перебрала все классы, дают один и тот же результат - градиент, как в самом внешнем элементе. В футере вообще-то тоже самое: градиент из body перекрывает градиент футера (хотя по идее так не должно вроде быть?) Не там ищу?

[SergiiShapoval]

@katana-ua какой-то странный стиль кнопок у тебе получается:

фон всё-равно будем менять на однотонный, так, что можем уже сейчас поменять на однотонный согласно psd

меня больше беспокоит, что стили бутстрапа, выглядят не как стили бутстрапа,

я сегодня с утра нашёл что 3 версия бутстрапа сильно отличается от предыдущих = не совпадает с тем, что было в уроках на codeschool по названиям классов, было бы хорошо проставить элементам классы нашего бутстрапа

[kaflan]

Почему бы не делать ветки потом делать пул реквест в мастер может через жиру попробуем?

[kaflan]

Assignee

@katana-ua katana-ua как мне такой же статус получить?

[SergiiShapoval]

Почему бы не делать ветки потом делать пул реквест в мастер может через жиру попробуем?

По-моему, сейчас так и происходит

как мне такой же статус получить?

начни коммитить полезные вещи :-)

[kaflan]

@SergiiShapoval а почему бы не сделать сервис или фабрику для этой штуки? как d3 интегрируесться?

[kaflan]

http://www.ng-newsletter.com/posts/d3-on-angular.html сделать модулем и подключать его где надо все

[kaflan]

а шаблон в базе я так понял? да

[SergiiShapoval]

@kaflan для этой задачи уже утвердили wufoo, много слов и рассуждений, давай уже сделай что-то

[kaflan]

@SergiiShapoval ок будет к вечеру как токо оттестетисрую. ну к ночи

[kaflan]

я попробую сервисом его зафигачить посмотрю как оно будет

[kaflan]

а как тут пулл реквест сделать?

[SergiiShapoval]

https://css-tricks.com/video-screencasts/130-first-moments-grunt/ https://24ways.org/2013/grunt-is-not-weird-and-hard/

[SergiiShapoval]

need to put classes in wufoo