Добрый день! Использую Django + Angular + Django REST. Необходимо динамически размещать изображения разного размера плиткой, с возможностью перемещения их посредством drag-n-drop. Для размещения использую сейчас bootstrap.js, а для перетаскивания Sortable.js + ng-sortable.js git:://github.com/rubaxa/Sortable.git Но возникает проблема с картинками разного размера, возникает ситуация подобная этой
А нужно, чтобы было несколько колонок, и каждая картинка могла занимать одну или несколько колонок, в зависимости от размера картинки. Что-то вроде этого (представим, что каждый блок - это картинка):
Пример для Susy с их сайта вроде ближе к тому, что должно быть:
Но до конца не уверен, подойдет ли мне этот фреймоворк для решения данной задачи?
Установил sudo gem install sass, sudo gem install susy, pip install libsass
. Что еще нужно установить и как использовать susy для django сайта?
Для Zend фреймворка нашел мануал: http://zencoder.ru/susy/brief-tutorial-susy-2/
Как мне сделать аналогичное для Django? При помощи susy или предложите, пожалуйста, лучший вариант. По поводу susy не уверен.
Обновление:
Установил еще sudo apt-get install ruby-dev, sudo gem install compass
.
Где подключать вот это, и в каком виде для Django?
@import "normalize";
@import "compass";
@import "susy";
Обновление 2:
Установил sudo pip install django-compass2
, в settings.py добавил:
COMPASS_INPUT = BASE_DIR + 'media/sass'
COMPASS_OUTPUT = BASE_DIR + 'media/css'
COMPASS_STYLE = 'compact'
COMPASS_REQUIRES = (
'ninesixty', # 960.gs Grid System
)
и 'djcompass' в INSTALLED_APPS. Создал папки media/sass, media/css
При выполнении python manage.py compass
не находит модуль 'djcompass'.
Обновление 3: пока закомментировал djcompass в INSTALLED_APPS. Добавил в settings.py:
COMPRESS_PRECOMPILERS = (
('text/scss', 'sass --scss {infile} {outfile}'),
)
В шаблоне:
{% load compress %}
{% load staticfiles %}
{% compress css %}
<link rel="stylesheet" type="text/scss" href="{% static 'styles.scss' %}" />
{% endcompress %}
Ругается: 'compress' is not a valid tag library
Гугл говорит, что нужно сделать что-то вроде
compass create [folder] -r rest-foundation --using foundation
Но compass мне не удалось настроить. И не совсем понятно, для susy/compass/sass необходимо создавать отдельный проект внутри проекта django? Пока не понимаю, как их всех вместе скрестить, чтобы работало: Django + Django REST + Angular + SASS + Compass (и непонятно, можно ли обойтись без него?) + Susy.
Обновление 4:
sass -v
выдает Sass 3.4.18 (Selective Steve)
Установил pip install django-compressor на основе этого http://django-compressor.readthedocs.org/en/latest/quickstart/ В settings добавил
STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
# other finders..
'compressor.finders.CompressorFinder',
)
Добавил в INSTALLED_APPS "compressor" - после этого 500 ошибка.
При добавлении в TEMPLATES OPTIONS
django.templatetags.compress и django.contrib.staticfiles.templatetags.compress
пишет, что у таких модулей нет "compress" attribute/class
Обновление 5: нашел angular-gridster.js, который размещает вроде как нужно, + поддерживает drag-n-drop http://manifestwebdesign.github.io/angular-gridster/?utm_source=angular-js.in&utm_medium=website&utm_campaign=content-curation На этапе до sass/susy/compass:
bower install angular-gridster
<link rel="stylesheet" href="bower_components/angular-gridster/dist/angular-gridster.min.css"/>
<script src="bower_components/javascript-detect-element-resize/jquery.resize.js"></script>
<script src="bower_components/angular-gridster/dist/angular-gridster.min.js"></script>
Обновление 6
Подключил по мануалу на сайте разработчика, все работает. Единственная проблема - как настроить angular-gripster, чтобы убрать z-слои и наложение изображений друг на друга?