<html>
<head>
<meta content="text/html; charset=windows-1252"
http-equiv="Content-Type">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p>Hi Samuel,</p>
<p>First of all thanks for your extensive investigation on various
possibilities in front of us !!!</p>
<p>I personally liked the option <span lang="EN-US"><a
moz-do-not-send="true" href="https://www.sitepoint.com/"><a class="moz-txt-link-freetext" href="https://www.sitepoint.com/">https://www.sitepoint.com/</a></a>
which would be ideal to have with possibly 3 level navigation.</span></p>
<p><span lang="EN-US">Nevertheless, let us start with having side
pane to provide immediate relief with the way proposed in the
figures </span>ginger_sidebar_1.png and ginger_storage_2.png
and eventually make it more better if it is too complex doing all
of it ones.</p>
<p>I agree with Daniel recommendation for the for
ginger_sidebar*.png, ie. have one second level tab for now and all
the functionalities go under the side pane which would be enabler
in future some thing similar to your proposal of <span
lang="EN-US"><a moz-do-not-send="true"
href="https://www.sitepoint.com/">https://www.sitepoint.com/</a></span></p>
<div class="moz-cite-prefix">Thanks and Regards<br>
Chandra<br>
<br>
On 7/5/16 12:32 AM, Samuel Henrique De Oliveira Guimaraes wrote:<br>
</div>
<blockquote
cite="mid:2df85d56b6a541a0aea21ef11bf9eea7@serv031.corp.eldorado.org.br"
type="cite">
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<meta name="Generator" content="Microsoft Word 15 (filtered
medium)">
<style><!--
/* Font Definitions */
@font-face
{font-family:Wingdings;
panose-1:5 0 0 0 0 0 0 0 0 0;}
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;
mso-fareast-language:EN-US;}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:#0563C1;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:#954F72;
text-decoration:underline;}
p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph
{mso-style-priority:34;
margin-top:0cm;
margin-right:0cm;
margin-bottom:0cm;
margin-left:36.0pt;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif;
mso-fareast-language:EN-US;}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:"Calibri",sans-serif;
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;
font-family:"Calibri",sans-serif;
mso-fareast-language:EN-US;}
@page WordSection1
{size:612.0pt 792.0pt;
margin:70.85pt 3.0cm 70.85pt 3.0cm;}
div.WordSection1
{page:WordSection1;}
/* List Definitions */
@list l0
{mso-list-id:262812166;
mso-list-type:hybrid;
mso-list-template-ids:-2083256826 68550657 68550659 68550661 68550657 68550659 68550661 68550657 68550659 68550661;}
@list l0:level1
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;
font-family:Symbol;}
@list l0:level2
{mso-level-number-format:bullet;
mso-level-text:o;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;
font-family:"Courier New";}
@list l0:level3
{mso-level-number-format:bullet;
mso-level-text:\F0A7;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;
font-family:Wingdings;}
@list l0:level4
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;
font-family:Symbol;}
@list l0:level5
{mso-level-number-format:bullet;
mso-level-text:o;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;
font-family:"Courier New";}
@list l0:level6
{mso-level-number-format:bullet;
mso-level-text:\F0A7;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;
font-family:Wingdings;}
@list l0:level7
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;
font-family:Symbol;}
@list l0:level8
{mso-level-number-format:bullet;
mso-level-text:o;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;
font-family:"Courier New";}
@list l0:level9
{mso-level-number-format:bullet;
mso-level-text:\F0A7;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;
font-family:Wingdings;}
@list l1
{mso-list-id:1469858233;
mso-list-type:hybrid;
mso-list-template-ids:482217636 68550657 68550659 68550661 68550657 68550659 68550661 68550657 68550659 68550661;}
@list l1:level1
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;
font-family:Symbol;}
@list l1:level2
{mso-level-number-format:bullet;
mso-level-text:o;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;
font-family:"Courier New";}
@list l1:level3
{mso-level-number-format:bullet;
mso-level-text:\F0A7;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;
font-family:Wingdings;}
@list l1:level4
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;
font-family:Symbol;}
@list l1:level5
{mso-level-number-format:bullet;
mso-level-text:o;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;
font-family:"Courier New";}
@list l1:level6
{mso-level-number-format:bullet;
mso-level-text:\F0A7;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;
font-family:Wingdings;}
@list l1:level7
{mso-level-number-format:bullet;
mso-level-text:\F0B7;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;
font-family:Symbol;}
@list l1:level8
{mso-level-number-format:bullet;
mso-level-text:o;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;
font-family:"Courier New";}
@list l1:level9
{mso-level-number-format:bullet;
mso-level-text:\F0A7;
mso-level-tab-stop:none;
mso-level-number-position:left;
text-indent:-18.0pt;
font-family:Wingdings;}
ol
{margin-bottom:0cm;}
ul
{margin-bottom:0cm;}
--></style><!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
<div class="WordSection1">
<p class="MsoNormal">Hi team,<o:p></o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal"><span lang="EN-US">We currently have an
issue with Ginger/Gingerbase navigation bar in small screen
resolutions and we also have huge tables in System Services
page. Since working on the navigation bar involves editing
Wok styles, I’m sending this e-mail to Wok mailing list
instead of Ginger group.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">I looked for successful
combinations of sidebar + horizontal navigation bars and so
far I couldn’t find any example that would exactly fit with
Wok and its plugins. The majority of examples I’m listing
below are very good with traditional pages with deep
subcategories and the navigation bars can work as sitemaps
and replace breadcrumbs:<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoListParagraph"
style="text-indent:-18.0pt;mso-list:l0 level1 lfo1"><!--[if !supportLists]--><span
style="font-family:Symbol" lang="EN-US"><span
style="mso-list:Ignore">·<span style="font:7.0pt
"Times New Roman"">
</span></span></span><!--[endif]--><span lang="EN-US"><a
moz-do-not-send="true"
href="http://www.worldwildlife.org/"><a class="moz-txt-link-freetext" href="http://www.worldwildlife.org/">http://www.worldwildlife.org/</a></a>
-
<a moz-do-not-send="true" href="https://vimeo.com/166812605">https://vimeo.com/166812605</a><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoListParagraph"
style="text-indent:-18.0pt;mso-list:l0 level1 lfo1"><!--[if !supportLists]--><span
style="font-family:Symbol" lang="EN-US"><span
style="mso-list:Ignore">·<span style="font:7.0pt
"Times New Roman"">
</span></span></span><!--[endif]--><span lang="EN-US"><a
moz-do-not-send="true"
href="https://www.theguardian.com/us"><a class="moz-txt-link-freetext" href="https://www.theguardian.com/us">https://www.theguardian.com/us</a></a>
-
<a moz-do-not-send="true" href="https://vimeo.com/166812599">https://vimeo.com/166812599</a><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoListParagraph"
style="text-indent:-18.0pt;mso-list:l0 level1 lfo1"><!--[if !supportLists]--><span
style="font-family:Symbol" lang="EN-US"><span
style="mso-list:Ignore">·<span style="font:7.0pt
"Times New Roman"">
</span></span></span><!--[endif]--><span lang="EN-US"><a
moz-do-not-send="true" href="https://next.ft.com/fastft"><a class="moz-txt-link-freetext" href="https://next.ft.com/fastft">https://next.ft.com/fastft</a></a>
-
<a moz-do-not-send="true" href="https://vimeo.com/166812597">https://vimeo.com/166812597</a><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">Wok currently has two
navigation levels. Kimchi doesn’t have multiple sections but
Ginger and Gingerbase uses collapsible panel groups to
separate sections that could be third level elements on a
sidebar. This was already discussed when we moved some
features from Ginger to Gingerbase but I think we could
achieve a functional sidebar with up to three levels without
using a “landing page” for second-level elements.<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">In the attached
screenshots ginger_sidebar1 and ginger_sidebar2 are mockups
for an off-canvas menu that would slide the main content and
hide itself once an option is clicked. It would also hide
the other panel accordions. Here are two off-canvas menu in
action:<o:p></o:p></span></p>
<p class="MsoListParagraph"
style="text-indent:-18.0pt;mso-list:l1 level1 lfo2"><!--[if !supportLists]--><span
style="font-family:Symbol" lang="EN-US"><span
style="mso-list:Ignore">·<span style="font:7.0pt
"Times New Roman"">
</span></span></span><!--[endif]--><span lang="EN-US"><a
moz-do-not-send="true"
href="http://codepen.io/SitePoint/full/uIemr/"><a class="moz-txt-link-freetext" href="http://codepen.io/SitePoint/full/uIemr/">http://codepen.io/SitePoint/full/uIemr/</a></a><o:p></o:p></span></p>
<p class="MsoListParagraph"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoListParagraph"
style="text-indent:-18.0pt;mso-list:l1 level1 lfo2"><!--[if !supportLists]--><span
style="font-family:Symbol" lang="EN-US"><span
style="mso-list:Ignore">·<span style="font:7.0pt
"Times New Roman"">
</span></span></span><!--[endif]--><span lang="EN-US"><a
moz-do-not-send="true"
href="https://codepen.io/benske/full/cxrta/"><a class="moz-txt-link-freetext" href="https://codepen.io/benske/full/cxrta/">https://codepen.io/benske/full/cxrta/</a></a><o:p></o:p></span></p>
<p class="MsoListParagraph"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">Since this would require
a change in Wok tabs and ginger/gingerbase tab-ext.xml, I
think we could implement something entirely different that
would with Wok and all plugins. This site menu only have
first-level options on the sidebar but I think we could add
collapsible links like a tree-table menu:
<a moz-do-not-send="true" href="https://www.sitepoint.com/">https://www.sitepoint.com/</a><o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">In addition to the
sidebar, we could put a search/filter input on the top that
would allow the user to type the desired option and show its
position on the menu. Please take a look at the remaining
attached screenshots. I did one variation with the content
aligned to the center and another one aligned to the left.
<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US"><o:p> </o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">Regards,<o:p></o:p></span></p>
<p class="MsoNormal"><span lang="EN-US">Samuel<o:p></o:p></span></p>
</div>
<br>
<fieldset class="mimeAttachmentHeader"></fieldset>
<br>
<pre wrap="">_______________________________________________
Kimchi-devel mailing list
<a class="moz-txt-link-abbreviated" href="mailto:Kimchi-devel@ovirt.org">Kimchi-devel@ovirt.org</a>
<a class="moz-txt-link-freetext" href="http://lists.ovirt.org/mailman/listinfo/kimchi-devel">http://lists.ovirt.org/mailman/listinfo/kimchi-devel</a>
</pre>
</blockquote>
<br>
</body>
</html>