7

Добрый день! Использую Django + Angular + Django REST. Необходимо динамически размещать изображения разного размера плиткой, с возможностью перемещения их посредством drag-n-drop. Для размещения использую сейчас bootstrap.js, а для перетаскивания Sortable.js + ng-sortable.js git:://github.com/rubaxa/Sortable.git Но возникает проблема с картинками разного размера, возникает ситуация подобная этой

Bootstrap и изображения разного размера

А нужно, чтобы было несколько колонок, и каждая картинка могла занимать одну или несколько колонок, в зависимости от размера картинки. Что-то вроде этого (представим, что каждый блок - это картинка):

Шаблон для блоков разного размера

Пример для 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-слои и наложение изображений друг на друга?

1 ответ 1

2

Я бы подключил masonry. И в "бутстрапе", и в "susy", проблемы выравнивания блоков с разной высотой есть и будут. А "masonry" справится.

Также рекомендую по возможности избавиться от "compass" - он перестал активно развиваться пару лет назад. Если нужна альтернатива - попробуйте bourbon.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.