Features / Usability

Posted by Torsten Fabricius 19 Aug 2014 14:35 GMT-0000 posts: 1563

Hi Nitreb,

please mind, that modules in the module zone top (header), which are applied in the usual way, usually have a 100% width (not the content - I refer to the "container", the module itself).

You might be able to see what I mean, when you go to /tiki-admin_modules.php and grab the logo to move it around a tiny little bit.

In pre-responsive days, until I started to hack Bootstrap into Tiki12 and to learn the basic concepts, that wasn't a problem, as I just altered the width in the modules appearance sector - field custom css to position the module - and in the worst case in the css file itself.

You know:

#module {
    width: Apx; 
    height: Bpx;  
    position: absolute; 
    top: Xpx;
    right: Ypx; 
}

and so on

With responsive design that is not working really well.

So I start to use custom modules more and more intense!

You create a custom module, in which you can use pure HTML and smarty.
Using the wiki tag and the literal tag, you even have a way to use wikisyntax and wikiplugins like for example the plugin "module".

As example a part of the code of a Bootstrap fixed-top navbar:

<ul class="nav navbar-nav navbar-right">
        {if !$user}
        <li><a href="tiki-register.php"><span class="glyphicon glyphicon-user"></span> {tr}Create Account{/tr}</a></li>{else}        <li><a href="my"><span class="glyphicon glyphicon-user"></span> {tr}My Account{/tr}</a></li>
        {/if}
        <li>{if !$user}<a href="login" style="color:#ffffff;"><span class="glyphicon glyphicon-log-in"></span> {tr}Login{/tr}</a>{else}<a href="logout" style="color:#ffffff;">{tr}Logout{/tr} <span class="glyphicon glyphicon-log-out"></span></a>{/if}
        </li>
        <li class="input"><div class="slim-fixed-top_navbar">{wiki}{literal}{module module="switch_lang" nobox="y"}{/literal}{/wiki}</div></li>
      </ul>

{if !$user} is smarty code, actually a part of the heavily used if/else constructions.

$ tells us, that we talk about a variable, actually a value we want to get from the database. Smarty does that together with PHP - please mind that Smarty towards PHP is in a similar relation than CSS towards HTML ... Smarty takes the design out of PHP.
In other words: PHP is for the "calculation" and Smarty shows the results. About so.

$user usually checks for the actual logged in user and displays it. In the above construction, Tiki checks IF there IS a user OR NOT and does something conditional to the result (here something else than displaying the user name ... so here something conditional to the fact if there is a user or not). OUCH! sounds complicated? Wait! Nearly there!

The ! in {if !$user} ... {/if} means simply: NOT, so "if not user", aka "if you (Tiki) do not find a logged in user" do something.

"Translated" example:

{if !$user} ... {else} ... {/if} = {if there is NOT a User logged in} show this HTML {else} do something else {end this if/else construction}

Another example of Smarty in a template / custom module:

{tr}Login{/tr} ... the {tr} ... {/tr} tag makes text strings (and even links) translatable

When you look at this:

{wiki}{literal}{module module="switch_lang" nobox="y"}{/literal}{/wiki}
you see, that you easily can use any wikisyntax and specifically the module plugin, once you use two tags - wiki and literal ... do not forget to close the tags!

Thining a bit forward, you now could combine the example from my previos post and the new info from above and create a new custom module to be applie in the header which will behave all the way you want to:

1.) use the Bootstrap grid classes ... this time not in DIV plugins, but staight in div HTML tags alike and so on.

2.) put the appropriate modules you need into the appropriate Bootstrap divs

3.) apply the custom module to the header

4.) go back to edit your custom module and play around a bit by changing the sort order of the module plugins and the bootstrap classes ... maybe try push and pull classes aswell, depending, on what you want to achieve.

for the Bootstrap classes find ressources here:
http://getbootstrap.com/css/#grid

for smarty tips, espcially variables for conditional content check this one:
http://themes.tiki.org/Template+Tricks

And for display conditional on the viewport, there are classes in Bootstrap, which automattically display:none; (not loading!) ... then you could choose larger elements for larger devices and smaller elements for smaller devices ... example to mind is the load time and data difference between very large and very small images etc.

Responsive design is not just and only changing width and fluidity related to the viewport. This is just the start of the concept and there is a lot of things possible (and to be done) "behind the scenes".

And please consider to take some time to learn about how to provide accessibility (for example for people with handicap) with Tiki and Bootstrap ... responsive design usually does rely a lot on JavaScript (for example navbars!) ... this might cause issues or completely exclude a lot of people, if not considered and tested well under means of accessibilty.

I hope my few lines help a bit,

best regards,
Torsten