Grid System

Navigation Menu Dropdown: base markup as a content provider + plone.app.standardtiles

Learn CSS Grid in 5 Min  CSS Grid + CSS Multi-Columns

<style>
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 2em;
  grid-gap: .5em;
}
</style>
<div class="grid">
  <label>label</label>
  <input type="text">
  <label>label</label>
  <input type="text">
  <label>label</label>
  <input type="text">
  ...
</div>

Grid Container Override collective.cover Default Grid

CSS Grid vs Web Layouts

https://medium.com/@johnapaolino/css-grid-for-designers-f74a883b98f5

Deco

設計構想之一，是減少 Content Type 的數量，使用通用型別的概念，讓使用者更具彈性地建立想要的文件。也就是 Event 或 News 都只是 Page，只是使用不同的 layout 和 metadata，上傳圖檔使用拖拉方式。使用者直接建立想要的表單，可以暫存供其他表單使用，概念類似 Office 裡的樣版。

Deco, Finally! - Rok Garbas, PloneConf2012 slide

CMSUI 的 toolbar 工具和 Deco 重覆，因此獨立成 plone.app.toolbar 來讓不同專案可以共用 toolbar 功能，在 Plone4.3 之後看來已被其他模組取代。

plonetheme.cmsui 提供實作範例

plone.app.toolbar 簡介影片 03:40 新增頁面 07:40 plone.app.jquery 版本 ushkosh.edu Human Resources 11:10 20:50

plone.app.blocks was developed with Deco in mind, where tiles can be included anywhere. But for collective.cover tiles only appear in the view of a cover. So perhaps collective.cover should not include the plone.app.blocks zcml but should instead register just the ParseXML and IncludeTiles transforms for covers only.

plone.app.mosaic

利用 plone.app.standardtiles 來取代 Viewlet open space discussion KeyError: 'pattern_options'

plone.app.mosaic 1.0a1
plone.app.standardtiles 1.0a3
plone.app.drafts 1.0b1
plone.app.tiles 2.1.0
plone.app.blocks 2.1.0
plone.tiles 1.4.0
plone.api 1.3.2
plone.formwidget.multifile 1.1
plone.formwidget.querystring 1.1.3
requests 2.7.0
rwproperty 1.0
zope.app.publisher 3.10.2
decorator 3.4.0

Creating HTML Tiles

Mosaic in Plone 5.1 needs different buildout

collective.cover

安裝相依狀況是:

Plone                           4.3.3   4.3.9   4.3.10
plone.tiles                     >= 1.2  1.6
plone.app.tiles                 1.0.1   1.0.2
plone.app.referenceablebehavior 0.5
plone.app.lockingbehavior       1.0.1
plone.app.blocks                1.1.1   2.2.1
collective.js.jqueryui          1.10.3  1.10.4  1.10.4
collective.js.galleria          1.2.5   1.2.5   1.2.5
collective.js.bootstrap         2.3.1.1 2.3.1.1 2.3.1.1
plone.app.drafts                1.0a2   1.0
decorator                       3.4.0   3.4.2

Blocks rendering engine 3.1.0 (2.2.0), Drafts support 1.0b3, Relation Field 1.2.3, Static resource storage 1.0.5, Tiles support 1.0.1, Working Copy Support (Iterate) 2.1.17, collective.js.galleria 1.2.5, jQuery UI 1.10.3, plone.app.intid: install utility 1.0.5

其中的 collective.js.jqueryui 在 Plone 4.2 需要 1.8.16.9 版本；如果同時安裝 eea.facetednavigation 也可能是它的相依模組。

啟用後會包括 Autocomplete Widget, Blocks Rendering Engine, Content Tree Widget, Drafts Support, Relation Filed, Tiles Support, JQuery UI, Collective JS Galleria。

eggs =
    collective.cover

常見的狀況之一，是 Collection Tile 顯示的項目附有 Lead Image 時，可能會造成 KeyError 錯誤，從 Layout Edit 取消 Collection Tile 的 Image 顯示就行。

1.0a9.dev0 搭配 Plone 4.3.3 沒問題，但 1.0a10.dev0 和 collective.js.jqueryui 1.10.3 會造成 Event 再編輯時，無法順利出現儲存鈕。

1.0a12 到 1.0b1 搭配 Plone 4.3.7 到 4.3.9 記得要指定 [versions] 參數值 collective.js.bootstrap = 2.3.1.1 (2.3.x 更新的版本並未釋出)，不然會遇到 plone.app.jquery 內建 1.7.2.1 但要求 >=1.8.3 的問題。在 Plone 4.3.10 只指定 collective.js.bootstrap 有成功。

[versions]
collective.js.bootstrap = 2.3.1.1
plone.app.blocks = 2.2.0
plone.app.tiles = 1.0.1

Locking Behavior 預設啟用，停用的話，會造成 Content Tab 只剩 View 和 Edit。

在 public.css 和 columns.css 之間，插入 collective.js.jqueryui.custom.min.css，在 ploneCustom.css 前面，插入 ++resource++collective.cover/contentchooser.css 和 ++resource++collective.cover/cover.css。在 ++resource++plone.formwidget.querystring.querywidget.js 後面，插入 ++resouce++collective.galleria.js 和 collective.js.jqueryui.custom.min.js 和 ++resource++collective.cover/contentchooser.js 和 ++resource++collective.js.bootstrap/js/bootstrap.min.js 和 ++resource++collective.cover/jquery.endless-scroll.js。

在 @@search 之前，由 collective/js/jqueryui/viewlet.py 插入

<script type="text/javascript">
jQuery(function($){
  if (typeof($.datepicker) != "undefined"){
    $.datepicker.setDefaults(
      jQuery.extend($.datepicker.regional['zh-TW'],
      {dateFormat: 'yy/mm/dd'}));
    }
  });
</script>

在 parents("*[id$='-autocomplete']") 後面的 JavaScript 和 HTML 都被刪除了。

Custom Cover View

似乎是 Block 啟用後，開始出現問題，有人回報 ParseXML transformer 會刪除 HTML 內容，可能要在 plone.app.blocks >= 2.0.0 之後才完整解決。

Carousel Tile 從 Galleria 到 Cycle 或 FlexSlider

RuntimeError: maximum recursion depth exceeded while calling a Python object

CSS try?

# static/css/cover.css
+.branding {
+    display: none !important;
+}

Plone5 相容狀況

Diazo Rule to Make Mosaic Editor Compatible with Skel.io CSS Grid