Loading...
 

Tikiwiki-devel (mailman list mirror)


Bootstrap Page Layout Consistency

posts: 366

Are there standard width classes for label and input/select we should be using in the templates for pages that are essentially forms? There are some inconsistencies:

Admin pages - label: col-sm-4; input/select: col-sm-8

tiki-register.php - label: col-md-4 col-sm-3; input/select: col-md-4 col-md-6

tracker plugin on a page - label: col-md-3; input/select: col-md-9

I don't really have a preference, except that it would be good to be consistent. The more consistent we are the more we can migrate to using inheritance and other efficiencies that Smarty 3 offers. The admin pages seem like they're pretty consistent so maybe we go with those settings since there are so many of them? Maybe this is already laid out on the themes site (which looks nice by the way!) but I didn't see it.
Thanks,
lindon

posts: 126226 United Kingdom

Hi Lindon

Yes, that's a good one - i came across it when trying to sort out the registration page layout when using user tracker registration fields a while back. Seem to remember there were all three versions on the same page somehow for that one!

Sometime this obviously depends on the content and field labels etc, but i think a 4/8 split usually is safest for most cases, and using the sm size means you still get that on (landscape) tablets but not on phones generally...

However, i wonder now if we should make this a pref? (or two prefs actually)

Not sure how you mean we could then use Smarty inheritance - how would that work?

jonny


> On 5 Nov 2015, at 03:35, lindon <lindon@akv.tiki.org> wrote:

>
> Are there standard width classes for label and input/select we should be using in the templates for pages that are essentially forms? There are some inconsistencies:
>
> Admin pages - label: col-sm-4; input/select: col-sm-8
>
> tiki-register.php - label: col-md-4 col-sm-3; input/select: col-md-4 col-md-6
>
> tracker plugin on a page - label: col-md-3; input/select: col-md-9
>
> I don't really have a preference, except that it would be good to be consistent. The more consistent we are the more we can migrate to using inheritance and other efficiencies that Smarty 3 offers. The admin pages seem like they're pretty consistent so maybe we go with those settings since there are so many of them? Maybe this is already laid out on the themes site (which looks nice by the way!) but I didn't see it.
> Thanks,
> lindon
> ------------------------------------------------------------------------------
> ___
> TikiWiki-devel mailing list
> TikiWiki-devel at lists.sourceforge.net
> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel


------------------------------------------------------------------------------
___
TikiWiki-devel mailing list
TikiWiki-devel at lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

posts: 1544

Hello everybody, especially Lindon and Jonny,

not sure if that fits to this part of the discussion: Firefox does have
issues with dropdown select.

There are Bootstrap menus, that work with Chrome, but not with certain
versions of Firefox.

If not yet managed to get a clear picture on that, but we should have a
look at these issues and consider to avoid certain types of dropdown, if
applicable and if we have alternatives.

Just thinking loud.

Best regards,
Torsten

Am 05.11.2015 um 19:46 schrieb Jonny Bradley:
> Hi Lindon
>
> Yes, that's a good one - i came across it when trying to sort out the registration page layout when using user tracker registration fields a while back. Seem to remember there were all three versions on the same page somehow for that one!
>
> Sometime this obviously depends on the content and field labels etc, but i think a 4/8 split usually is safest for most cases, and using the sm size means you still get that on (landscape) tablets but not on phones generally...
>
> However, i wonder now if we should make this a pref? (or two prefs actually)
>
> Not sure how you mean we could then use Smarty inheritance - how would that work?
>
> jonny
>
>
>

>> On 5 Nov 2015, at 03:35, lindon <lindon@akv.tiki.org> wrote:

>>
>> Are there standard width classes for label and input/select we should be using in the templates for pages that are essentially forms? There are some inconsistencies:
>>
>> Admin pages - label: col-sm-4; input/select: col-sm-8
>>
>> tiki-register.php - label: col-md-4 col-sm-3; input/select: col-md-4 col-md-6
>>
>> tracker plugin on a page - label: col-md-3; input/select: col-md-9
>>
>> I don't really have a preference, except that it would be good to be consistent. The more consistent we are the more we can migrate to using inheritance and other efficiencies that Smarty 3 offers. The admin pages seem like they're pretty consistent so maybe we go with those settings since there are so many of them? Maybe this is already laid out on the themes site (which looks nice by the way!) but I didn't see it.
>> Thanks,
>> lindon
>> ------------------------------------------------------------------------------
>> ___
>> TikiWiki-devel mailing list
>> TikiWiki-devel at lists.sourceforge.net
>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>
> ------------------------------------------------------------------------------
> ___
> TikiWiki-devel mailing list
> TikiWiki-devel at lists.sourceforge.net
> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel


------------------------------------------------------------------------------
___
TikiWiki-devel mailing list
TikiWiki-devel at lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

posts: 4444 Japan

Hi Torsten,

This is a different issue, but could you file a bug report about these
problems? I think it's kind of hard to avoid types of selectors so it
would be best to fix the problems if possible.

-- Gary

On 11/6/2015 7:00 AM, Torsten Fabricius wrote:
> Hello everybody, especially Lindon and Jonny,
>
> not sure if that fits to this part of the discussion: Firefox does have
> issues with dropdown select.
>
> There are Bootstrap menus, that work with Chrome, but not with certain
> versions of Firefox.
>
> If not yet managed to get a clear picture on that, but we should have a
> look at these issues and consider to avoid certain types of dropdown, if
> applicable and if we have alternatives.
>
> Just thinking loud.
>
> Best regards,
> Torsten
>
> Am 05.11.2015 um 19:46 schrieb Jonny Bradley:
>> Hi Lindon
>>
>> Yes, that's a good one - i came across it when trying to sort out the registration page layout when using user tracker registration fields a while back. Seem to remember there were all three versions on the same page somehow for that one!
>>
>> Sometime this obviously depends on the content and field labels etc, but i think a 4/8 split usually is safest for most cases, and using the sm size means you still get that on (landscape) tablets but not on phones generally...
>>
>> However, i wonder now if we should make this a pref? (or two prefs actually)
>>
>> Not sure how you mean we could then use Smarty inheritance - how would that work?
>>
>> jonny
>>
>>
>>

>>> On 5 Nov 2015, at 03:35, lindon <lindon@akv.tiki.org> wrote:

>>>
>>> Are there standard width classes for label and input/select we should be using in the templates for pages that are essentially forms? There are some inconsistencies:
>>>
>>> Admin pages - label: col-sm-4; input/select: col-sm-8
>>>
>>> tiki-register.php - label: col-md-4 col-sm-3; input/select: col-md-4 col-md-6
>>>
>>> tracker plugin on a page - label: col-md-3; input/select: col-md-9
>>>
>>> I don't really have a preference, except that it would be good to be consistent. The more consistent we are the more we can migrate to using inheritance and other efficiencies that Smarty 3 offers. The admin pages seem like they're pretty consistent so maybe we go with those settings since there are so many of them? Maybe this is already laid out on the themes site (which looks nice by the way!) but I didn't see it.
>>> Thanks,
>>> lindon
>>> ------------------------------------------------------------------------------
>>> ___
>>> TikiWiki-devel mailing list
>>> TikiWiki-devel at lists.sourceforge.net
>>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>>
>> ------------------------------------------------------------------------------
>> ___
>> TikiWiki-devel mailing list
>> TikiWiki-devel at lists.sourceforge.net
>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>
>
> ------------------------------------------------------------------------------
> ___
> TikiWiki-devel mailing list
> TikiWiki-devel at lists.sourceforge.net
> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>


------------------------------------------------------------------------------
___
TikiWiki-devel mailing list
TikiWiki-devel at lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

posts: 1544

afaik it is an error of Firefox, I try to file report, yes

T.

Am 06.11.2015 um 03:43 schrieb Gary Cunningham-Lee:
> Hi Torsten,
> yes
> This is a different issue, but could you file a bug report about these
> problems? I think it's kind of hard to avoid types of selectors so it
> would be best to fix the problems if possible.
>
> — Gary
>
> On 11/6/2015 7:00 AM, Torsten Fabricius wrote:
>> Hello everybody, especially Lindon and Jonny,
>>
>> not sure if that fits to this part of the discussion: Firefox does have
>> issues with dropdown select.
>>
>> There are Bootstrap menus, that work with Chrome, but not with certain
>> versions of Firefox.
>>
>> If not yet managed to get a clear picture on that, but we should have a
>> look at these issues and consider to avoid certain types of dropdown, if
>> applicable and if we have alternatives.
>>
>> Just thinking loud.
>>
>> Best regards,
>> Torsten
>>
>> Am 05.11.2015 um 19:46 schrieb Jonny Bradley:
>>> Hi Lindon
>>>
>>> Yes, that's a good one - i came across it when trying to sort out the registration page layout when using user tracker registration fields a while back. Seem to remember there were all three versions on the same page somehow for that one!
>>>
>>> Sometime this obviously depends on the content and field labels etc, but i think a 4/8 split usually is safest for most cases, and using the sm size means you still get that on (landscape) tablets but not on phones generally...
>>>
>>> However, i wonder now if we should make this a pref? (or two prefs actually)
>>>
>>> Not sure how you mean we could then use Smarty inheritance - how would that work?
>>>
>>> jonny
>>>
>>>
>>>

>>>> On 5 Nov 2015, at 03:35, lindon <lindon@akv.tiki.org> wrote:

>>>>
>>>> Are there standard width classes for label and input/select we should be using in the templates for pages that are essentially forms? There are some inconsistencies:
>>>>
>>>> Admin pages - label: col-sm-4; input/select: col-sm-8
>>>>
>>>> tiki-register.php - label: col-md-4 col-sm-3; input/select: col-md-4 col-md-6
>>>>
>>>> tracker plugin on a page - label: col-md-3; input/select: col-md-9
>>>>
>>>> I don't really have a preference, except that it would be good to be consistent. The more consistent we are the more we can migrate to using inheritance and other efficiencies that Smarty 3 offers. The admin pages seem like they're pretty consistent so maybe we go with those settings since there are so many of them? Maybe this is already laid out on the themes site (which looks nice by the way!) but I didn't see it.
>>>> Thanks,
>>>> lindon
>>>> ------------------------------------------------------------------------------
>>>> ___
>>>> TikiWiki-devel mailing list
>>>> TikiWiki-devel at lists.sourceforge.net
>>>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>>> ------------------------------------------------------------------------------
>>> ___
>>> TikiWiki-devel mailing list
>>> TikiWiki-devel at lists.sourceforge.net
>>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>>
>> ------------------------------------------------------------------------------
>> ___
>> TikiWiki-devel mailing list
>> TikiWiki-devel at lists.sourceforge.net
>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>>
>
> ------------------------------------------------------------------------------
> ___
> TikiWiki-devel mailing list
> TikiWiki-devel at lists.sourceforge.net
> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel


------------------------------------------------------------------------------
___
TikiWiki-devel mailing list
TikiWiki-devel at lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel


posts: 4444 Japan

Hi,

Looking at this earlier, I found two basic patterns: In the
tiki-admin_include pages, most forms have a 4/8 layout (for label and
input), and the forms in the application menu (like tiki-edit_blog.php)
tend to have a 3/9 layout. I imagine as we got started Bootstrapping the
forms, it was just a visual choice based on the text length of the
labels and input size requirements, with the first conversions more or
less setting a pattern as different people worked through the forms.

One thing about the 3/9 ratio is that it gives more room for the inputs.
Some people early on said they preferred the label above the input for
maximum input space (especially for text fields and textareas), so 3/9
is closer to this than 4/8. But in a form with long labels and narrow
selectors, for instance, it might be hard to justify a narrow column for
the labels that wrap several lines due to their length, just to conform
to a standard. Also, looking again at some of the forms, sometimes
there's inconsistency even in one form, but it works well for the page
because of a label length, etc., so if there isn't a coding reason to
require strict consistency, I'd say form readability/useability is the
top priority.

The other thing is whether to use col-sm- or col-md- . Again two
patterns: application menu forms tend to use col-sm- and admin-include
forms tend to use col-md- . In a 980x1280 display, col-sm- still uses
two columns for labels and inputs, whereas with col-md-, only one column
is used (labels are stacked above inputs). What's preferred here? There
is still plenty of room for text input, etc. with two columns at 980px
width, so I like the two columns (so col-sm- ).

So IMO, we should standardize on col-sm-3/col-sm-9 or col-sm-4/col-sm-8.
I'd tended to use 3/9 but don't have strong feelings about it.

-- Gary


On 11/5/2015 12:35 PM, lindon wrote:
> Are there standard width classes for label and input/select we should be
> using in the templates for pages that are essentially forms? There are
> some inconsistencies:
>
> Admin pages - label: col-sm-4; input/select: col-sm-8
> tiki-register.php - label: col-md-4 col-sm-3; input/select: col-md-4
> col-md-6
>
> tracker plugin on a page - label: col-md-3; input/select: col-md-9
>
> I don't really have a preference, except that it would be good to be
> consistent. The more consistent we are the more we can migrate to using
> inheritance and other efficiencies that Smarty 3 offers. The admin pages
> seem like they're pretty consistent so maybe we go with those settings
> since there are so many of them? Maybe this is already laid out on the
> themes site (which looks nice by the way!) but I didn't see it.
> Thanks,
> lindon
>
>
> ------------------------------------------------------------------------------
>
>
>
> ___
> TikiWiki-devel mailing list
> TikiWiki-devel at lists.sourceforge.net
> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>


------------------------------------------------------------------------------
___
TikiWiki-devel mailing list
TikiWiki-devel at lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

posts: 126226 United Kingdom


I agree Gary, no huge preference myself but maybe a pref with a little smarty object, something like

<div class="\{tikigridclass label=true\}">...


or something, so we can just use one pref and subtract that from 12 to get the other side. Maybe there could also be a way to make this do "stacked" forms as some have said they prefer?

We should bear in mind that a layout for a specific form might look ok in English but other languages will have different length labels (usually longer i have found).

jb




> On 6 Nov 2015, at 02:43, Gary Cunningham-Lee <gary_c@cunningham-lee.com> wrote:
>
> Hi,
>
> Looking at this earlier, I found two basic patterns: In the
> tiki-admin_include pages, most forms have a 4/8 layout (for label and
> input), and the forms in the application menu (like tiki-edit_blog.php)
> tend to have a 3/9 layout. I imagine as we got started Bootstrapping the
> forms, it was just a visual choice based on the text length of the
> labels and input size requirements, with the first conversions more or
> less setting a pattern as different people worked through the forms.
>
> One thing about the 3/9 ratio is that it gives more room for the inputs.
> Some people early on said they preferred the label above the input for
> maximum input space (especially for text fields and textareas), so 3/9
> is closer to this than 4/8. But in a form with long labels and narrow
> selectors, for instance, it might be hard to justify a narrow column for
> the labels that wrap several lines due to their length, just to conform
> to a standard. Also, looking again at some of the forms, sometimes
> there's inconsistency even in one form, but it works well for the page
> because of a label length, etc., so if there isn't a coding reason to
> require strict consistency, I'd say form readability/useability is the
> top priority.
>
> The other thing is whether to use col-sm- or col-md- . Again two
> patterns: application menu forms tend to use col-sm- and admin-include
> forms tend to use col-md- . In a 980x1280 display, col-sm- still uses
> two columns for labels and inputs, whereas with col-md-, only one column
> is used (labels are stacked above inputs). What's preferred here? There
> is still plenty of room for text input, etc. with two columns at 980px
> width, so I like the two columns (so col-sm- ).
>
> So IMO, we should standardize on col-sm-3/col-sm-9 or col-sm-4/col-sm-8.
> I'd tended to use 3/9 but don't have strong feelings about it.
>
> — Gary
>
>
> On 11/5/2015 12:35 PM, lindon wrote:
>> Are there standard width classes for label and input/select we should be
>> using in the templates for pages that are essentially forms? There are
>> some inconsistencies:
>>
>> Admin pages - label: col-sm-4; input/select: col-sm-8
>> tiki-register.php - label: col-md-4 col-sm-3; input/select: col-md-4
>> col-md-6
>>
>> tracker plugin on a page - label: col-md-3; input/select: col-md-9
>>
>> I don't really have a preference, except that it would be good to be
>> consistent. The more consistent we are the more we can migrate to using
>> inheritance and other efficiencies that Smarty 3 offers. The admin pages
>> seem like they're pretty consistent so maybe we go with those settings
>> since there are so many of them? Maybe this is already laid out on the
>> themes site (which looks nice by the way!) but I didn't see it.
>> Thanks,
>> lindon
>>
>>
>> ------------------------------------------------------------------------------
>>
>>
>>
>> ___
>> TikiWiki-devel mailing list
>> TikiWiki-devel at lists.sourceforge.net
>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>>
>
>
> ------------------------------------------------------------------------------
> ___
> TikiWiki-devel mailing list
> TikiWiki-devel at lists.sourceforge.net
> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel


------------------------------------------------------------------------------
___
TikiWiki-devel mailing list
TikiWiki-devel at lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

posts: 2180

Hi Jonny,

what is label=true supposed to do?

luci


On 11/06/2015 11:48 AM, Jonny Bradley wrote:
> I agree Gary, no huge preference myself but maybe a pref with a little smarty object, something like
>

> <div class="\{tikigridclass label=true\}">...

>
> or something, so we can just use one pref and subtract that from 12 to get the other side. Maybe there could also be a way to make this do "stacked" forms as some have said they prefer?
>
> We should bear in mind that a layout for a specific form might look ok in English but other languages will have different length labels (usually longer i have found).
>
> jb
>
>
>
>
>> On 6 Nov 2015, at 02:43, Gary Cunningham-Lee <gary_c@cunningham-lee.com> wrote:
>>
>> Hi,
>>
>> Looking at this earlier, I found two basic patterns: In the
>> tiki-admin_include pages, most forms have a 4/8 layout (for label and
>> input), and the forms in the application menu (like tiki-edit_blog.php)
>> tend to have a 3/9 layout. I imagine as we got started Bootstrapping the
>> forms, it was just a visual choice based on the text length of the
>> labels and input size requirements, with the first conversions more or
>> less setting a pattern as different people worked through the forms.
>>
>> One thing about the 3/9 ratio is that it gives more room for the inputs.
>> Some people early on said they preferred the label above the input for
>> maximum input space (especially for text fields and textareas), so 3/9
>> is closer to this than 4/8. But in a form with long labels and narrow
>> selectors, for instance, it might be hard to justify a narrow column for
>> the labels that wrap several lines due to their length, just to conform
>> to a standard. Also, looking again at some of the forms, sometimes
>> there's inconsistency even in one form, but it works well for the page
>> because of a label length, etc., so if there isn't a coding reason to
>> require strict consistency, I'd say form readability/useability is the
>> top priority.
>>
>> The other thing is whether to use col-sm- or col-md- . Again two
>> patterns: application menu forms tend to use col-sm- and admin-include
>> forms tend to use col-md- . In a 980x1280 display, col-sm- still uses
>> two columns for labels and inputs, whereas with col-md-, only one column
>> is used (labels are stacked above inputs). What's preferred here? There
>> is still plenty of room for text input, etc. with two columns at 980px
>> width, so I like the two columns (so col-sm- ).
>>
>> So IMO, we should standardize on col-sm-3/col-sm-9 or col-sm-4/col-sm-8.
>> I'd tended to use 3/9 but don't have strong feelings about it.
>>
>> — Gary
>>
>>
>> On 11/5/2015 12:35 PM, lindon wrote:
>>> Are there standard width classes for label and input/select we should be
>>> using in the templates for pages that are essentially forms? There are
>>> some inconsistencies:
>>>
>>> Admin pages - label: col-sm-4; input/select: col-sm-8
>>> tiki-register.php - label: col-md-4 col-sm-3; input/select: col-md-4
>>> col-md-6
>>>
>>> tracker plugin on a page - label: col-md-3; input/select: col-md-9
>>>
>>> I don't really have a preference, except that it would be good to be
>>> consistent. The more consistent we are the more we can migrate to using
>>> inheritance and other efficiencies that Smarty 3 offers. The admin pages
>>> seem like they're pretty consistent so maybe we go with those settings
>>> since there are so many of them? Maybe this is already laid out on the
>>> themes site (which looks nice by the way!) but I didn't see it.
>>> Thanks,
>>> lindon
>>>
>>>
>>> ------------------------------------------------------------------------------
>>>
>>>
>>>
>>> ___
>>> TikiWiki-devel mailing list
>>> TikiWiki-devel at lists.sourceforge.net
>>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>>>
>>
>> ------------------------------------------------------------------------------
>> ___
>> TikiWiki-devel mailing list
>> TikiWiki-devel at lists.sourceforge.net
>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>
> ------------------------------------------------------------------------------
> ___
> TikiWiki-devel mailing list
> TikiWiki-devel at lists.sourceforge.net
> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel


------------------------------------------------------------------------------
___
TikiWiki-devel mailing list
TikiWiki-devel at lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

posts: 126226 United Kingdom


I was thinking that the pref could be something like: "Grid width for labels in forms (out of 12)" so label=true would give you that class, col-sm-4 and then label=false (or just \{tikigridclass\}) would give you the col-sm-8... but thinking about it further having two prefs, one for each "column" class would be more flexible and allow different breakpoints for various screen sizes.

Just thinking out loud :-)

jb



> On 6 Nov 2015, at 14:59, luciash d' being <luci@tiki.org> wrote:
>
> Hi Jonny,
>
> what is label=true supposed to do?
>
> luci
>
>
> On 11/06/2015 11:48 AM, Jonny Bradley wrote:
>> I agree Gary, no huge preference myself but maybe a pref with a little smarty object, something like
>>

>> <div class="\{tikigridclass label=true\}">...

>>
>> or something, so we can just use one pref and subtract that from 12 to get the other side. Maybe there could also be a way to make this do "stacked" forms as some have said they prefer?
>>
>> We should bear in mind that a layout for a specific form might look ok in English but other languages will have different length labels (usually longer i have found).
>>
>> jb
>>
>>
>>
>>
>>> On 6 Nov 2015, at 02:43, Gary Cunningham-Lee <gary_c@cunningham-lee.com> wrote:
>>>
>>> Hi,
>>>
>>> Looking at this earlier, I found two basic patterns: In the
>>> tiki-admin_include pages, most forms have a 4/8 layout (for label and
>>> input), and the forms in the application menu (like tiki-edit_blog.php)
>>> tend to have a 3/9 layout. I imagine as we got started Bootstrapping the
>>> forms, it was just a visual choice based on the text length of the
>>> labels and input size requirements, with the first conversions more or
>>> less setting a pattern as different people worked through the forms.
>>>
>>> One thing about the 3/9 ratio is that it gives more room for the inputs.
>>> Some people early on said they preferred the label above the input for
>>> maximum input space (especially for text fields and textareas), so 3/9
>>> is closer to this than 4/8. But in a form with long labels and narrow
>>> selectors, for instance, it might be hard to justify a narrow column for
>>> the labels that wrap several lines due to their length, just to conform
>>> to a standard. Also, looking again at some of the forms, sometimes
>>> there's inconsistency even in one form, but it works well for the page
>>> because of a label length, etc., so if there isn't a coding reason to
>>> require strict consistency, I'd say form readability/useability is the
>>> top priority.
>>>
>>> The other thing is whether to use col-sm- or col-md- . Again two
>>> patterns: application menu forms tend to use col-sm- and admin-include
>>> forms tend to use col-md- . In a 980x1280 display, col-sm- still uses
>>> two columns for labels and inputs, whereas with col-md-, only one column
>>> is used (labels are stacked above inputs). What's preferred here? There
>>> is still plenty of room for text input, etc. with two columns at 980px
>>> width, so I like the two columns (so col-sm- ).
>>>
>>> So IMO, we should standardize on col-sm-3/col-sm-9 or col-sm-4/col-sm-8.
>>> I'd tended to use 3/9 but don't have strong feelings about it.
>>>
>>> — Gary
>>>
>>>
>>> On 11/5/2015 12:35 PM, lindon wrote:
>>>> Are there standard width classes for label and input/select we should be
>>>> using in the templates for pages that are essentially forms? There are
>>>> some inconsistencies:
>>>>
>>>> Admin pages - label: col-sm-4; input/select: col-sm-8
>>>> tiki-register.php - label: col-md-4 col-sm-3; input/select: col-md-4
>>>> col-md-6
>>>>
>>>> tracker plugin on a page - label: col-md-3; input/select: col-md-9
>>>>
>>>> I don't really have a preference, except that it would be good to be
>>>> consistent. The more consistent we are the more we can migrate to using
>>>> inheritance and other efficiencies that Smarty 3 offers. The admin pages
>>>> seem like they're pretty consistent so maybe we go with those settings
>>>> since there are so many of them? Maybe this is already laid out on the
>>>> themes site (which looks nice by the way!) but I didn't see it.
>>>> Thanks,
>>>> lindon
>>>>
>>>>
>>>> ------------------------------------------------------------------------------
>>>>
>>>>
>>>>
>>>> ___
>>>> TikiWiki-devel mailing list
>>>> TikiWiki-devel at lists.sourceforge.net
>>>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>>>>
>>>
>>> ------------------------------------------------------------------------------
>>> ___
>>> TikiWiki-devel mailing list
>>> TikiWiki-devel at lists.sourceforge.net
>>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>>
>> ------------------------------------------------------------------------------
>> ___
>> TikiWiki-devel mailing list
>> TikiWiki-devel at lists.sourceforge.net
>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>
>
> ------------------------------------------------------------------------------
> ___
> TikiWiki-devel mailing list
> TikiWiki-devel at lists.sourceforge.net
> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel


------------------------------------------------------------------------------
___
TikiWiki-devel mailing list
TikiWiki-devel at lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

posts: 1544

I am loving the idea, which I feel to see arising out of Jonny's genious
brain :-)

T.

Am 06.11.2015 um 16:17 schrieb Jonny Bradley:
> I was thinking that the pref could be something like: "Grid width for labels in forms (out of 12)" so label=true would give you that class, col-sm-4 and then label=false (or just \{tikigridclass\}) would give you the col-sm-8... but thinking about it further having two prefs, one for each "column" class would be more flexible and allow different breakpoints for various screen sizes.
>
> Just thinking out loud :-)
>
> jb
>
>
>
>> On 6 Nov 2015, at 14:59, luciash d' being <luci@tiki.org> wrote:
>>
>> Hi Jonny,
>>
>> what is label=true supposed to do?
>>
>> luci
>>
>>
>> On 11/06/2015 11:48 AM, Jonny Bradley wrote:
>>> I agree Gary, no huge preference myself but maybe a pref with a little smarty object, something like
>>>

>>> <div class="\{tikigridclass label=true\}">...

>>>
>>> or something, so we can just use one pref and subtract that from 12 to get the other side. Maybe there could also be a way to make this do "stacked" forms as some have said they prefer?
>>>
>>> We should bear in mind that a layout for a specific form might look ok in English but other languages will have different length labels (usually longer i have found).
>>>
>>> jb
>>>
>>>
>>>
>>>
>>>> On 6 Nov 2015, at 02:43, Gary Cunningham-Lee <gary_c@cunningham-lee.com> wrote:
>>>>
>>>> Hi,
>>>>
>>>> Looking at this earlier, I found two basic patterns: In the
>>>> tiki-admin_include pages, most forms have a 4/8 layout (for label and
>>>> input), and the forms in the application menu (like tiki-edit_blog.php)
>>>> tend to have a 3/9 layout. I imagine as we got started Bootstrapping the
>>>> forms, it was just a visual choice based on the text length of the
>>>> labels and input size requirements, with the first conversions more or
>>>> less setting a pattern as different people worked through the forms.
>>>>
>>>> One thing about the 3/9 ratio is that it gives more room for the inputs.
>>>> Some people early on said they preferred the label above the input for
>>>> maximum input space (especially for text fields and textareas), so 3/9
>>>> is closer to this than 4/8. But in a form with long labels and narrow
>>>> selectors, for instance, it might be hard to justify a narrow column for
>>>> the labels that wrap several lines due to their length, just to conform
>>>> to a standard. Also, looking again at some of the forms, sometimes
>>>> there's inconsistency even in one form, but it works well for the page
>>>> because of a label length, etc., so if there isn't a coding reason to
>>>> require strict consistency, I'd say form readability/useability is the
>>>> top priority.
>>>>
>>>> The other thing is whether to use col-sm- or col-md- . Again two
>>>> patterns: application menu forms tend to use col-sm- and admin-include
>>>> forms tend to use col-md- . In a 980x1280 display, col-sm- still uses
>>>> two columns for labels and inputs, whereas with col-md-, only one column
>>>> is used (labels are stacked above inputs). What's preferred here? There
>>>> is still plenty of room for text input, etc. with two columns at 980px
>>>> width, so I like the two columns (so col-sm- ).
>>>>
>>>> So IMO, we should standardize on col-sm-3/col-sm-9 or col-sm-4/col-sm-8.
>>>> I'd tended to use 3/9 but don't have strong feelings about it.
>>>>
>>>> — Gary
>>>>
>>>>
>>>> On 11/5/2015 12:35 PM, lindon wrote:
>>>>> Are there standard width classes for label and input/select we should be
>>>>> using in the templates for pages that are essentially forms? There are
>>>>> some inconsistencies:
>>>>>
>>>>> Admin pages - label: col-sm-4; input/select: col-sm-8
>>>>> tiki-register.php - label: col-md-4 col-sm-3; input/select: col-md-4
>>>>> col-md-6
>>>>>
>>>>> tracker plugin on a page - label: col-md-3; input/select: col-md-9
>>>>>
>>>>> I don't really have a preference, except that it would be good to be
>>>>> consistent. The more consistent we are the more we can migrate to using
>>>>> inheritance and other efficiencies that Smarty 3 offers. The admin pages
>>>>> seem like they're pretty consistent so maybe we go with those settings
>>>>> since there are so many of them? Maybe this is already laid out on the
>>>>> themes site (which looks nice by the way!) but I didn't see it.
>>>>> Thanks,
>>>>> lindon
>>>>>
>>>>>
>>>>> ------------------------------------------------------------------------------
>>>>>
>>>>>
>>>>>
>>>>> ___
>>>>> TikiWiki-devel mailing list
>>>>> TikiWiki-devel at lists.sourceforge.net
>>>>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>>>>>
>>>> ------------------------------------------------------------------------------
>>>> ___
>>>> TikiWiki-devel mailing list
>>>> TikiWiki-devel at lists.sourceforge.net
>>>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>>> ------------------------------------------------------------------------------
>>> ___
>>> TikiWiki-devel mailing list
>>> TikiWiki-devel at lists.sourceforge.net
>>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>>
>> ------------------------------------------------------------------------------
>> ___
>> TikiWiki-devel mailing list
>> TikiWiki-devel at lists.sourceforge.net
>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>
> ------------------------------------------------------------------------------
> ___
> TikiWiki-devel mailing list
> TikiWiki-devel at lists.sourceforge.net
> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel


------------------------------------------------------------------------------
___
TikiWiki-devel mailing list
TikiWiki-devel at lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

posts: 366

The coding reason I was thinking of was how to streamline all of the templates we use. I ran into this with the registration password fields, which are used in 3 places, using exactly the same code. They should be combined into one template that can be included where needed, but the label widths are different in the 3 places where they are used. There is a category smarty function that is included in different admin panels to provide a button to categorize things - I had to add a variable for label and input widths because those were different in the different forms that used the function.

The more things are standardized, the more we can reuse the same code or template rather than duplicating it given lots of Tiki built-in pages do essentially the same thing with different content - display a form, list items, etc. It's not a make-or-break issue and I've only thought about it in general so I don't know how much can really be done in this direction, but does seem like if we gave some thought to it there is probably quite a bit we could do. And the first step would be to get rid of the small unnecessary inconsistencies.

I hadn't thought about preferences for setting the label and input width - I wouldn't be opposed to it but I'm not sure how much demand there really is to customize the built-in admin pages in this way.
My 2 cents.
Regards,
lindon



> On Nov 5, 2015, at 9:43 PM, Gary Cunningham-Lee <gary_c@cunningham-lee.com> wrote:
>
> Hi,
>
> Looking at this earlier, I found two basic patterns: In the
> tiki-admin_include pages, most forms have a 4/8 layout (for label and
> input), and the forms in the application menu (like tiki-edit_blog.php)
> tend to have a 3/9 layout. I imagine as we got started Bootstrapping the
> forms, it was just a visual choice based on the text length of the
> labels and input size requirements, with the first conversions more or
> less setting a pattern as different people worked through the forms.
>
> One thing about the 3/9 ratio is that it gives more room for the inputs.
> Some people early on said they preferred the label above the input for
> maximum input space (especially for text fields and textareas), so 3/9
> is closer to this than 4/8. But in a form with long labels and narrow
> selectors, for instance, it might be hard to justify a narrow column for
> the labels that wrap several lines due to their length, just to conform
> to a standard. Also, looking again at some of the forms, sometimes
> there's inconsistency even in one form, but it works well for the page
> because of a label length, etc., so if there isn't a coding reason to
> require strict consistency, I'd say form readability/useability is the
> top priority.
>
> The other thing is whether to use col-sm- or col-md- . Again two
> patterns: application menu forms tend to use col-sm- and admin-include
> forms tend to use col-md- . In a 980x1280 display, col-sm- still uses
> two columns for labels and inputs, whereas with col-md-, only one column
> is used (labels are stacked above inputs). What's preferred here? There
> is still plenty of room for text input, etc. with two columns at 980px
> width, so I like the two columns (so col-sm- ).
>
> So IMO, we should standardize on col-sm-3/col-sm-9 or col-sm-4/col-sm-8.
> I'd tended to use 3/9 but don't have strong feelings about it.
>
> — Gary
>
>
> On 11/5/2015 12:35 PM, lindon wrote:
>> Are there standard width classes for label and input/select we should be
>> using in the templates for pages that are essentially forms? There are
>> some inconsistencies:
>>
>> Admin pages - label: col-sm-4; input/select: col-sm-8
>> tiki-register.php - label: col-md-4 col-sm-3; input/select: col-md-4
>> col-md-6
>>
>> tracker plugin on a page - label: col-md-3; input/select: col-md-9
>>
>> I don't really have a preference, except that it would be good to be
>> consistent. The more consistent we are the more we can migrate to using
>> inheritance and other efficiencies that Smarty 3 offers. The admin pages
>> seem like they're pretty consistent so maybe we go with those settings
>> since there are so many of them? Maybe this is already laid out on the
>> themes site (which looks nice by the way!) but I didn't see it.
>> Thanks,
>> lindon
>>
>>
>> ------------------------------------------------------------------------------
>>
>>
>>
>> ___
>> TikiWiki-devel mailing list
>> TikiWiki-devel at lists.sourceforge.net
>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>>
>
>
> ------------------------------------------------------------------------------
> ___
> TikiWiki-devel mailing list
> TikiWiki-devel at lists.sourceforge.net
> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel


------------------------------------------------------------------------------
___
TikiWiki-devel mailing list
TikiWiki-devel at lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

posts: 496

HiAll
thanks for tackling this, lets decide upon a standard
My vote: 3/9 col-sm, label aligned to the right (so it is close to the input field)

About having a preference for this: it would require modifying lots of templates. i see some benefit, but not sure if we can cover all tastes
having a screenbuilder feature would be best 
cheers,
gezza


From: lindon <lindon@akv.tiki.org>

To: Tiki developers <tikiwiki-devel@lists.sourceforge.net>
Sent: Saturday, November 7, 2015 1:35 AM
Subject: Re: Tiki-devel Bootstrap Page Layout Consistency

The coding reason I was thinking of was how to streamline all of the templates we use. I ran into this with the registration password fields, which are used in 3 places, using exactly the same code. They should be combined into one template that can be included where needed, but the label widths are different in the 3 places where they are used. There is a category smarty function that is included in different admin panels to provide a button to categorize things - I had to add a variable for label and input widths because those were different in the different forms that used the function.

The more things are standardized, the more we can reuse the same code or template rather than duplicating it given lots of Tiki built-in pages do essentially the same thing with different content - display a form, list items, etc. It's not a make-or-break issue and I've only thought about it in general so I don't know how much can really be done in this direction, but does seem like if we gave some thought to it there is probably quite a bit we could do. And the first step would be to get rid of the small unnecessary inconsistencies.

I hadn't thought about preferences for setting the label and input width - I wouldn't be opposed to it but I'm not sure how much demand there really is to customize the built-in admin pages in this way.
My 2 cents.
Regards,
lindon



> On Nov 5, 2015, at 9:43 PM, Gary Cunningham-Lee <gary_c@cunningham-lee.com> wrote:
>
> Hi,
>
> Looking at this earlier, I found two basic patterns: In the
> tiki-admin_include pages, most forms have a 4/8 layout (for label and
> input), and the forms in the application menu (like tiki-edit_blog.php)
> tend to have a 3/9 layout. I imagine as we got started Bootstrapping the
> forms, it was just a visual choice based on the text length of the
> labels and input size requirements, with the first conversions more or
> less setting a pattern as different people worked through the forms.
>
> One thing about the 3/9 ratio is that it gives more room for the inputs.
> Some people early on said they preferred the label above the input for
> maximum input space (especially for text fields and textareas), so 3/9
> is closer to this than 4/8. But in a form with long labels and narrow
> selectors, for instance, it might be hard to justify a narrow column for
> the labels that wrap several lines due to their length, just to conform
> to a standard. Also, looking again at some of the forms, sometimes
> there's inconsistency even in one form, but it works well for the page
> because of a label length, etc., so if there isn't a coding reason to
> require strict consistency, I'd say form readability/useability is the
> top priority.
>
> The other thing is whether to use col-sm- or col-md- . Again two
> patterns: application menu forms tend to use col-sm- and admin-include
> forms tend to use col-md- . In a 980x1280 display, col-sm- still uses
> two columns for labels and inputs, whereas with col-md-, only one column
> is used (labels are stacked above inputs). What's preferred here? There
> is still plenty of room for text input, etc. with two columns at 980px
> width, so I like the two columns (so col-sm- ).
>
> So IMO, we should standardize on col-sm-3/col-sm-9 or col-sm-4/col-sm-8.
> I'd tended to use 3/9 but don't have strong feelings about it.
>
> — Gary
>
>
> On 11/5/2015 12:35 PM, lindon wrote:
>> Are there standard width classes for label and input/select we should be
>> using in the templates for pages that are essentially forms? There are
>> some inconsistencies:
>>
>>    Admin pages -  label: col-sm-4; input/select: col-sm-8
>>    tiki-register.php - label: col-md-4 col-sm-3; input/select: col-md-4
>>    col-md-6
>>
>>    tracker plugin on a page - label: col-md-3; input/select: col-md-9
>>
>> I don't really have a preference, except that it would be good to be
>> consistent. The more consistent we are the more we can migrate to using
>> inheritance and other efficiencies that Smarty 3 offers. The admin pages
>> seem like they're pretty consistent so maybe we go with those settings
>> since there are so many of them? Maybe this is already laid out on the
>> themes site (which looks nice by the way!) but I didn't see it.
>> Thanks,
>> lindon
>>
>>
>> ------------------------------------------------------------------------------
>>
>>
>>
>> ___
>> TikiWiki-devel mailing list
>> TikiWiki-devel at lists.sourceforge.net
>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel


>>
>
>
> ------------------------------------------------------------------------------
> ___
> TikiWiki-devel mailing list
> TikiWiki-devel at lists.sourceforge.net
> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel


------------------------------------------------------------------------------
___
TikiWiki-devel mailing list
TikiWiki-devel at lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel


Why Register?

Register at tiki.org and you'll be able to use the account at any *.tiki.org site, thanks to the InterTiki feature. A valid email address is required to receive site notifications and occasional newsletters. You can opt out of these items at any time.