New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Portlet Design #163

Closed
bloodbare opened this Issue Feb 10, 2014 · 8 comments

Comments

Projects
None yet
8 participants
@bloodbare
Member

bloodbare commented Feb 10, 2014

No description provided.

@khink

This comment has been minimized.

Show comment
Hide comment
@khink

khink Feb 11, 2014

Member

Example implementation: plone/plone.app.portlets@c241e84

This commit does these replacements:
dl.portlet -> div.portlet
dt.portletHeader -> header.portletHeader
dd.portletItem -> li.portletItem (if there are items; these are wrapped in a ul.portletContent)
dd.portletItem -> section.portletContent (if there are no items)
dt.portletFooter -> footer.portletFooter

I've tested it with the bootstrap theme by adding these classes (see plone/plone.app.portlets@fb72d22, just an example!).

So our Less setup should add these classes:
div.portlet: panel panel-default
header.portletHeader: panel-heading
ul.portletContent: list-group
li.portletItem: list-group-item
footer.portletFooter: panel-footer

(Updated: dd.portletItem -> section.portletContent instead of div.portletContent)

Member

khink commented Feb 11, 2014

Example implementation: plone/plone.app.portlets@c241e84

This commit does these replacements:
dl.portlet -> div.portlet
dt.portletHeader -> header.portletHeader
dd.portletItem -> li.portletItem (if there are items; these are wrapped in a ul.portletContent)
dd.portletItem -> section.portletContent (if there are no items)
dt.portletFooter -> footer.portletFooter

I've tested it with the bootstrap theme by adding these classes (see plone/plone.app.portlets@fb72d22, just an example!).

So our Less setup should add these classes:
div.portlet: panel panel-default
header.portletHeader: panel-heading
ul.portletContent: list-group
li.portletItem: list-group-item
footer.portletFooter: panel-footer

(Updated: dd.portletItem -> section.portletContent instead of div.portletContent)

@maartenkling

This comment has been minimized.

Show comment
Hide comment
@maartenkling

maartenkling Feb 11, 2014

Member

Should div.portlet not be section.portlet ?


Using the footer element

An important point to note is that you are not restricted to use one

element per site, you can use multiple footers, each of which will then become the for that section of the document. You could therefore have a for a or an .

Section

<section>
Section content appears here.
<footer>
Footer information for section.
</footer>
</section>
Article

<article>
Article content appears here.
<footer>
Footer information for article.
</footer>
</article>

Member

maartenkling commented Feb 11, 2014

Should div.portlet not be section.portlet ?


Using the footer element

An important point to note is that you are not restricted to use one

element per site, you can use multiple footers, each of which will then become the for that section of the document. You could therefore have a for a or an .

Section

<section>
Section content appears here.
<footer>
Footer information for section.
</footer>
</section>
Article

<article>
Article content appears here.
<footer>
Footer information for article.
</footer>
</article>

@khink

This comment has been minimized.

Show comment
Hide comment
@khink

khink Feb 11, 2014

Member

http://www.w3.org/html/wg/drafts/html/master/sections.html#the-section-element says "The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead." It looks like the latter is more the case here. But I'm no expert.

Member

khink commented Feb 11, 2014

http://www.w3.org/html/wg/drafts/html/master/sections.html#the-section-element says "The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead." It looks like the latter is more the case here. But I'm no expert.

@khink

This comment has been minimized.

Show comment
Hide comment
@khink

khink Feb 11, 2014

Member

Ramon and Paul are also +1 for section.portlet

Member

khink commented Feb 11, 2014

Ramon and Paul are also +1 for section.portlet

@agnogueira

This comment has been minimized.

Show comment
Hide comment
@agnogueira

agnogueira Feb 11, 2014

Member

-1
The main HTML portlet could use a ASIDE tag. W3C rewrote the aside specification to meet this use case: http://html5doctor.com/aside-revisited/

But I think we will need different HTML for diferent portlets.
We can not forget about specific portlets, like navigation, that should use a NAV tag instead.

With this, the portlets HTML will be much more semantic.

Member

agnogueira commented Feb 11, 2014

-1
The main HTML portlet could use a ASIDE tag. W3C rewrote the aside specification to meet this use case: http://html5doctor.com/aside-revisited/

But I think we will need different HTML for diferent portlets.
We can not forget about specific portlets, like navigation, that should use a NAV tag instead.

With this, the portlets HTML will be much more semantic.

@khink

This comment has been minimized.

Show comment
Hide comment
@khink
Member

khink commented Feb 11, 2014

@polyester

This comment has been minimized.

Show comment
Hide comment
@polyester

polyester Feb 12, 2014

Member

be careful when going overboard with "aside" and other HTML5 tags. Most screenreaders unfortunately don't support it. ARIA roles are complementary, and supported. http://www.maxability.co.in/tag/html-5-accessibility-2/

another annoying Jaws bug is that headings are marked 'lower' in the hierarchy when inside an aside. So that a H2 effectively becomes a h4. That can be overcome by marking the portlet-headers themselves with the Aria role, so add: role="heading" to the first heading in the respective portlets.

Member

polyester commented Feb 12, 2014

be careful when going overboard with "aside" and other HTML5 tags. Most screenreaders unfortunately don't support it. ARIA roles are complementary, and supported. http://www.maxability.co.in/tag/html-5-accessibility-2/

another annoying Jaws bug is that headings are marked 'lower' in the hierarchy when inside an aside. So that a H2 effectively becomes a h4. That can be overcome by marking the portlet-headers themselves with the Aria role, so add: role="heading" to the first heading in the respective portlets.

@thet thet referenced this issue Feb 18, 2014

Merged

Remove dt dl dd #146

@davisagli davisagli referenced this issue Feb 25, 2014

Closed

Plone 5 #184

76 of 90 tasks complete
@albertcasado

This comment has been minimized.

Show comment
Hide comment
@albertcasado

albertcasado Nov 6, 2014

Member

I think it is all done

Member

albertcasado commented Nov 6, 2014

I think it is all done

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment