From 04132023e6192625d52f3e2b72f9819f6de5e68f Mon Sep 17 00:00:00 2001
From: iRouge <bfavreault@inverse.ca>
Date: Tue, 27 Jan 2015 19:05:35 -0500
Subject: [PATCH] Clean-up markup in templates

---
 .../ContactsUI/UIxContactEditorTemplate.wox   |  41 +-
 .../ContactsUI/UIxContactFoldersView.wox      | 394 +++++++++---------
 UI/Templates/MailerUI/UIxMailMainFrame.wox    |  22 +-
 UI/Templates/UIxPageFrame.wox                 |   3 +-
 4 files changed, 238 insertions(+), 222 deletions(-)

diff --git a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
index 0fae6a43e..9aec2709d 100644
--- a/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
+++ b/UI/Templates/ContactsUI/UIxContactEditorTemplate.wox
@@ -1,29 +1,17 @@
 <?xml version='1.0' standalone='yes'?>
 <container xmlns = "http://www.w3.org/1999/xhtml" xmlns:var = "http://www.skyrix.com/od/binding" xmlns:const = "http://www.skyrix.com/od/constant" xmlns:label = "OGo:label">
+
   <md-content md-scroll-y = "true">
-    <div class = "editor md-padding">
-      <div class = "header">
+    <div class = "editor md-padding" style="padding-bottom: 72px">
+      <hgroup class = "header">
         <h1 data-ng-bind-html = "card.$fullname()"><!-- fullname --></h1>
         <h6>{{card.$description()}}
           <span class = "label radius" data-ng-repeat = "category in card.categories">{{category.value}}</span>
         </h6>
-      </div>
+      </hgroup>
 
       <form name = "cardForm" data-ng-show = "card.$isCard()" data-ng-submit = "save(cardForm)">
-      <div class = "buttonsToolbar">
-        <span class = "button tiny radius secondary" data-ng-click = "cancel()">
-          <i class = "icon-arrow-left"><!-- cancel --></i>
-          <var:string label:value = "Cancel" />
-        </span>
-        <span class = "button tiny radius secondary" data-ng-click = "reset()">
-          <i class = "icon-undo"><!-- reset --></i>
-          <var:string label:value = "Reset" />
-        </span>
-        <md-button class = "button tiny radius" type = "submit">
-          <i class = "icon-checkmark"><!-- save --></i>
-          <var:string label:value = "Save" />
-        </md-button>
-      </div>
+
       <md-input-container>
           <var:entity const:name = "nbsp" />
         <label>
@@ -270,8 +258,22 @@
         <textarea data-ng-model = "card.note"><!-- note --></textarea>
       </div>
     </div>
+    <fieldset class = "sg-buttongroup">
+      <span class = "button tiny radius secondary" data-ng-click = "cancel()">
+        <i class = "icon-arrow-left"><!-- cancel --></i>
+        <var:string label:value = "Cancel" />
+      </span>
+      <span class = "button tiny radius secondary" data-ng-click = "reset()">
+        <i class = "icon-undo"><!-- reset --></i>
+        <var:string label:value = "Reset" />
+      </span>
+      <md-button class = "button tiny radius" type = "submit">
+        <i class = "icon-checkmark"><!-- save --></i>
+        <var:string label:value = "Save" />
+      </md-button>
+    </fieldset>
   </form>
-  <form name = "listForm" data-ng-show = "card.$isList()" data-ng-submit = "save(listForm)">
+      <form name = "listForm" data-ng-show = "card.$isList()" data-ng-submit = "save(listForm)">
     <div class = "buttonsToolbar">
       <span class = "button tiny radius secondary" data-ng-click = "cancel()">
         <i class = "icon-arrow-left"><!-- cancel --></i>
@@ -341,6 +343,7 @@
       </div>
     </div>
   </form>
-</md-content>
+    </div>
+  </md-content>
 
     </container>
diff --git a/UI/Templates/ContactsUI/UIxContactFoldersView.wox b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
index 9a272e89b..dbf5283cb 100644
--- a/UI/Templates/ContactsUI/UIxContactFoldersView.wox
+++ b/UI/Templates/ContactsUI/UIxContactFoldersView.wox
@@ -59,211 +59,215 @@
     <li><var:string label:value="View Raw Source" /></li>
     </ul>
     -->
+  <!--
+    MAIN CONTENT ROW
+    Content of the application view injected injected in the element bellow
+    MUST be the first html element after body
+    SHOULD  be a main tag (with role="main")
 
-  <div>
+    Templates script tag wrappers goes next
+  -->
+  <!-- fixme : consitently prefix attributes with or without data prefix-->
+    <main class="view" data-ui-view = "addressbooks" layout="row" layout-fill="layout-fill"><!-- addressbooks list --></main>
 
-    <div data-ui-view = "addressbooks" layout = "row" style = "max-height: 100%"><!-- addressbooks list --></div>
+  <!-- TEMPLATE SCRIPT WRAPPER -->
+  <script type = "text/ng-template" id = "UIxContactFoldersView">
 
+    <!-- dropdown menu for addressbook options button -->
+    <div id = "addressbookProperties" class = "f-dropdown icons-dropdown">
+      <ul class = "button-group">
+        <li label:data-tooltip = "Links to this Address Book"
+            data-tooltip-popup-delay = "500">
+          <span class = "button"
+              data-sg-dropdown-content-toggle = "#addressbookLinks">
+            <i class = "icon-hyperlink"><!-- links --></i>
+          </span>
+        </li>
+        <li label:data-tooltip = "Rename"
+            data-tooltip-popup-delay = "500">
+          <span class = "button" data-ng-click = "edit()">
+            <i class = "icon-pencil"><!-- rename --></i>
+          </span>
+        </li>
+        <li data-ng-show = "addressbook.isOwned"
+            label:data-tooltip = "Sharing..."
+            data-tooltip-popup-delay = "500">
+          <span class = "button" data-ng-click = "share()">
+            <i class = "icon-share"><!-- share --></i>
+          </span>
+        </li>
+        <li label:data-tooltip = "Import Cards"
+            data-tooltip-popup-delay = "500">
+          <span class = "button" data-ng-click = "importCards()">
+            <i class = "icon-file"><!-- import --></i>
+          </span>
+        </li>
+        <li label:data-tooltip = "Export"
+            data-tooltip-popup-delay = "500">
+          <span class = "button" data-ng-click = "exportCards()">
+            <i class = "icon-ion-ios7-upload-outline"><!-- export --></i>
+          </span>
+        </li>
+        <li label:data-tooltip = "Delete"
+            data-tooltip-popup-delay = "500">
+          <span class = "button" data-ng-click = "confirmDelete(addressbook)">
+            <i class = "icon-trash"><!-- delete --></i>
+          </span>
+        </li>
+      </ul>
+    </div>
+
+    <!-- dropdown menu for new card split button
+    <ul id="newListDrop" class="f-dropdown">
+      <li><a class="tiny" data-ui-sref="addressbook.new({addressbookId: addressbook.id, contactType: 'list'})"><var:string label:value="New List"/></a></li>
+    </ul>
+    -->
+
+    <!-- dropdown menu for addressbook links
+    <div id="addressbookLinks" class="sg-dropdown-content joyride-tip-guide">
+      <span class="joyride-nub left">!- dropdown nub -</span>
+      <div class="joyride-content-wrapper">
+        <ul>
+          <li class="title"><var:string label:value="Links to this Address Book"/></li>
+          <li class="subtitle"><var:string label:value="CardDAV URL for Authenticated User Access"/></li>
+          <li class="value">{{addressbook.cardDavURL}}</li>
+          <var:if condition="isPublicAccessEnabled">
+            <li class="subtitle"><var:string label:value="CardDAV URL for Public Access"/></li>
+            <li class="value">{{addressbook.publicCardDavURL}}</li>
+          </var:if>
+        </ul>
+      </div>
+    </div>
+    -->
+
+    <!-- dropdown menu for subscriptions
+    <div id="folderSubscribe" class="sg-dropdown-content"
+         data-sg-subscribe="contact"
+         data-sg-subscribe-on-select="subscribeToFolder">!- subscription dropdown -</div>
+    -->
+<!-- Sidenav -->
+    <md-sidenav class = "md-sidenav-left md-whiteframe-z1" md-component-id = "left" md-is-locked-open = "$media('gt-md')" layout = "column">
+      <md-toolbar class = "md-tall" layout-align = "end start">
+        <h2 class = "md-toolbar-tools md-toolbar-tools-bottom">
+          <span class = "md-flex">{{activeUser.identification}}</span>
+        </h2>
+      </md-toolbar>
+      <md-content md-scroll-y = "md-scroll-y" class = "md-padding" ng-controller = "LeftCtrl" flex="flex">
+        <md-button ng-click = "close()" class = "md-primary" hide-gt-md = "hide-gt-md">Close</md-button>
+        <!--<div class="newItemsToolbar">
+          <a class="button tiny radius split" data-ui-sref="addressbook.new({addressbookId: addressbook.id, contactType: 'card'})"><var:string label:value="New Card"/><span data-dropdown-toggle="#newListDrop"></span></a><br/>
+        </div>-->
+        <md-list>
+          <md-item ng-repeat = "folder in addressbooks track by folder.id"
+              ng-class = "{_selected: addressbook.id==folder.id}"
+              ng-dblclick = "edit($index)">
+            <md-item-content>
+              <i class = "icon" data-ng-class = "{'icon-earth': folder.isRemote, 'icon-address-book': folder.isEditable}"><!-- icon --></i>
+              <form data-ng-submit = "save($index)">
+                <a data-ui-sref = "addressbook({addressbookId: folder.id})"
+                    data-ng-click = "select($index)"
+                    data-ng-show = "editMode!=folder.id"
+                    data-ng-cloak = "ng-cloak">{{folder.name}}
+                </a>
+                <input class = "folder-name" type = "text"
+                    data-ng-model = "folder.name"
+                    data-ng-show = "editMode==folder.id"
+                    data-ng-cloak = "ng-cloak"
+                    data-ng-blur = "save($index)"
+                    data-sg-focus-on = "addressBookName_{{$index}}"
+                    data-sg-escape = "revertEditing($index)" />
+              </form>
+              <span class = "icon" data-ng-cloak = "ng-cloak">
+                <a class = "icon" href = "#"
+                    data-dropdown-toggle = "#addressbookProperties"
+                    data-options = "align:right"
+                    data-ng-show = "currentFolderIsConfigurable(folder)">
+                  <i class = "icon-cog"><!-- options --></i>
+                </a>
+              </span>
+            </md-item-content>
+          </md-item>
+        </md-list>
+        <!--<div class="buttonsToolbar">
+          <button data-ng-click="newAddressbook()" class="button" label:title="New Addressbook..."><i class="icon-plus">!- new -></i></button>
+          <a href="#" class="button" label:title="Subscribe to an Addressbook..."
+             data-sg-dropdown-content-toggle="#folderSubscribe"><i class="icon-earth">!- subscribe -</i></a>
+        </div>-->
+      </md-content>
+    </md-sidenav>
+
+    <main layout = "column" layout-fill = "layout-fill">
+      <md-toolbar layout = "row" layout-align = "space-between start" class = "md-tall">
+        <!--fixme : md-toolbar-tools height is inconsistently defined, in former version it was 64px (basic toolbar height), here it's 100% -->
+        <div class = "md-toolbar-tools" ng-controller = "toggleCtrl">
+          <span flex = "flex">
+            <md-button ng-click = "toggleLeft()" class = "md-primary" hide-gt-md = "hide-gt-md">
+              <span class = "icon-ic_menu_24px"></span>
+            </md-button>
+            <div class = "display-1" style = "font-size: 2em; font-weight: 300">
+              [[Contacts]]
+            </div>
+          </span>
+          <span class = "sd-toolbar-tools">
+            <span>search</span>
+          </span>
+        </div>
+      </md-toolbar>
+      <md-content layout = "row" flex = "flex">
+        <md-content md-scroll-y = "md-scroll-y" flex = "flex" style = "min-width: 300px;" id = "contactsList">
+          <!-- Search field & special results
+               <input type="text" placeholder="Search" data-ng-model="search.filter" data-ng-keyup="doSearch($event)" />
+               <div data-ng-switch="search.status">
+               <div data-ng-switch-when="min-char" class="alert-bg">
+               <i class="icon-warning"></i><var:string label:value="Please enter at least three characters"/>
+               </div>
+               <div data-ng-switch-when="no-result" class="alert-bg">
+               <i class="icon-ion-search"></i><var:string label:value="No matching card"/>
+               </div>
+               <div data-ng-switch-when="remote-addressbook" data-ng-show="addressbook.cards.length == 0" class="alert-bg">
+               <i class="icon-ion-search"></i><var:string label:value="Initiate a search"/>
+               </div>
+               </div>
+          -->
+          <!--dirty fix for vs-repeat-->
+          <style>
+            .vs-repeat-repeated-element {
+            width: 100%;
+            }
+          </style>
+          <md-list data-vs-repeat = "72"
+              data-vs-scroll-parent = "#contactsList">
+            <md-item ng-repeat = "currentCard in addressbook.cards track by currentCard.id"
+                ng-class = "{_selected: card.id == currentCard.id}">
+              <md-item-content>
+                <div class = "md-tile-left">
+                  <!--avatar-->
+                  <!-- currentCard.tag = vcard || vlist -->
+                </div>
+                <div class = "sg-tile-content">
+                  <a data-ui-sref = "addressbook.card.view({addressbookId: addressbook.id, cardId: currentCard.id})">
+                    <div class = "name" ng-bind-html = "currentCard.$fullname()"><!-- cn --></div>
+                    <div class = "subject">{{currentCard.$preferredEmail()}}</div>
+                  </a>
+                </div>
+              </md-item-content>
+              <md-divider md-inset = "true" ng-if = "!$last"><!--divider--></md-divider>
+            </md-item>
+          </md-list>
+        </md-content>
+        <md-content class = "md-padding" flex = "flex" data-ui-view = "card"><!-- card view --></md-content>
+      </md-content>
+    </main>
+
+  </script>
     <!-- modal for addressbook sharing options -->
     <script type = "text/ng-template" id = "UIxUserRightsEditor">
       <var:component className = "UIxContactsUserRightsEditor" />
     </script>
-
-    <script type = "text/ng-template" id = "UIxContactFoldersView">
-
-      <!-- dropdown menu for addressbook options button -->
-      <div id = "addressbookProperties" class = "f-dropdown icons-dropdown">
-        <ul class = "button-group">
-          <li label:data-tooltip = "Links to this Address Book"
-              data-tooltip-popup-delay = "500">
-            <span class = "button"
-                data-sg-dropdown-content-toggle = "#addressbookLinks">
-              <i class = "icon-hyperlink"><!-- links --></i>
-            </span>
-          </li>
-          <li label:data-tooltip = "Rename"
-              data-tooltip-popup-delay = "500">
-            <span class = "button" data-ng-click = "edit()">
-              <i class = "icon-pencil"><!-- rename --></i>
-            </span>
-          </li>
-          <li data-ng-show = "addressbook.isOwned"
-              label:data-tooltip = "Sharing..."
-              data-tooltip-popup-delay = "500">
-            <span class = "button" data-ng-click = "share()">
-              <i class = "icon-share"><!-- share --></i>
-            </span>
-          </li>
-          <li label:data-tooltip = "Import Cards"
-              data-tooltip-popup-delay = "500">
-            <span class = "button" data-ng-click = "importCards()">
-              <i class = "icon-file"><!-- import --></i>
-            </span>
-          </li>
-          <li label:data-tooltip = "Export"
-              data-tooltip-popup-delay = "500">
-            <span class = "button" data-ng-click = "exportCards()">
-              <i class = "icon-ion-ios7-upload-outline"><!-- export --></i>
-            </span>
-          </li>
-          <li label:data-tooltip = "Delete"
-              data-tooltip-popup-delay = "500">
-            <span class = "button" data-ng-click = "confirmDelete(addressbook)">
-              <i class = "icon-trash"><!-- delete --></i>
-            </span>
-          </li>
-        </ul>
-      </div>
-
-      <!-- dropdown menu for new card split button
-      <ul id="newListDrop" class="f-dropdown">
-        <li><a class="tiny" data-ui-sref="addressbook.new({addressbookId: addressbook.id, contactType: 'list'})"><var:string label:value="New List"/></a></li>
-      </ul>
-      -->
-
-      <!-- dropdown menu for addressbook links
-      <div id="addressbookLinks" class="sg-dropdown-content joyride-tip-guide">
-        <span class="joyride-nub left">!- dropdown nub -</span>
-        <div class="joyride-content-wrapper">
-          <ul>
-            <li class="title"><var:string label:value="Links to this Address Book"/></li>
-            <li class="subtitle"><var:string label:value="CardDAV URL for Authenticated User Access"/></li>
-            <li class="value">{{addressbook.cardDavURL}}</li>
-            <var:if condition="isPublicAccessEnabled">
-              <li class="subtitle"><var:string label:value="CardDAV URL for Public Access"/></li>
-              <li class="value">{{addressbook.publicCardDavURL}}</li>
-            </var:if>
-          </ul>
-        </div>
-      </div>
-      -->
-
-      <!-- dropdown menu for subscriptions
-      <div id="folderSubscribe" class="sg-dropdown-content"
-           data-sg-subscribe="contact"
-           data-sg-subscribe-on-select="subscribeToFolder">!- subscription dropdown -</div>
-      -->
-
-      <md-sidenav class = "md-sidenav-left md-whiteframe-z1" md-component-id = "left" md-is-locked-open = "$media('gt-md')" layout = "column">
-        <md-toolbar class = "md-tall" layout-align = "end start">
-          <h2 class = "md-toolbar-tools md-toolbar-tools-bottom">
-            <span class = "md-flex">{{activeUser.identification}}</span>
-          </h2>
-        </md-toolbar>
-        <md-content md-scroll-y = "md-scroll-y" class = "md-padding" ng-controller = "LeftCtrl">
-          <md-button ng-click = "close()" class = "md-primary" hide-gt-md = "hide-gt-md">Close</md-button>
-          <!--<div class="newItemsToolbar">
-            <a class="button tiny radius split" data-ui-sref="addressbook.new({addressbookId: addressbook.id, contactType: 'card'})"><var:string label:value="New Card"/><span data-dropdown-toggle="#newListDrop"></span></a><br/>
-          </div>-->
-          <md-list>
-            <md-item ng-repeat = "folder in addressbooks track by folder.id"
-                ng-class = "{_selected: addressbook.id==folder.id}"
-                ng-dblclick = "edit($index)">
-              <md-item-content>
-                <i class = "icon" data-ng-class = "{'icon-earth': folder.isRemote, 'icon-address-book': folder.isEditable}"><!-- icon --></i>
-                <form data-ng-submit = "save($index)">
-                  <a data-ui-sref = "addressbook({addressbookId: folder.id})"
-                      data-ng-click = "select($index)"
-                      data-ng-show = "editMode!=folder.id"
-                      data-ng-cloak = "ng-cloak">{{folder.name}}
-                  </a>
-                  <input class = "folder-name" type = "text"
-                      data-ng-model = "folder.name"
-                      data-ng-show = "editMode==folder.id"
-                      data-ng-cloak = "ng-cloak"
-                      data-ng-blur = "save($index)"
-                      data-sg-focus-on = "addressBookName_{{$index}}"
-                      data-sg-escape = "revertEditing($index)" />
-                </form>
-                <span class = "icon" data-ng-cloak = "ng-cloak">
-                  <a class = "icon" href = "#"
-                      data-dropdown-toggle = "#addressbookProperties"
-                      data-options = "align:right"
-                      data-ng-show = "currentFolderIsConfigurable(folder)">
-                    <i class = "icon-cog"><!-- options --></i>
-                  </a>
-                </span>
-              </md-item-content>
-            </md-item>
-          </md-list>
-          <!--<div class="buttonsToolbar">
-            <button data-ng-click="newAddressbook()" class="button" label:title="New Addressbook..."><i class="icon-plus">!- new -></i></button>
-            <a href="#" class="button" label:title="Subscribe to an Addressbook..."
-               data-sg-dropdown-content-toggle="#folderSubscribe"><i class="icon-earth">!- subscribe -</i></a>
-          </div>-->
-        </md-content>
-      </md-sidenav>
-
-      <main layout = "column" layout-fill = "layout-fill">
-        <md-toolbar layout = "row" layout-align = "space-between start" class = "md-tall md-grey">
-          <!--fixme : md-toolbar-tools height is inconsistently defined, in former version it was 64px (basic toolbar height), here it's 100% -->
-          <div class = "md-toolbar-tools" ng-controller = "toggleCtrl">
-            <span flex = "flex">
-              <md-button ng-click = "toggleLeft()" class = "md-primary" hide-gt-md = "hide-gt-md">
-                <span class = "icon-ic_menu_24px"></span>
-              </md-button>
-              <div class = "display-1" style = "font-size: 2em; font-weight: 300">
-                [[Contacts]]
-              </div>
-            </span>
-            <span class = "sd-toolbar-tools">
-              <span>search</span>
-            </span>
-          </div>
-        </md-toolbar>
-        <md-content layout = "row" flex = "flex">
-          <md-content md-scroll-y = "md-scroll-y" flex = "flex" style = "min-width: 300px;" id = "contactsList">
-            <!-- Search field & special results
-                 <input type="text" placeholder="Search" data-ng-model="search.filter" data-ng-keyup="doSearch($event)" />
-                 <div data-ng-switch="search.status">
-                 <div data-ng-switch-when="min-char" class="alert-bg">
-                 <i class="icon-warning"></i><var:string label:value="Please enter at least three characters"/>
-                 </div>
-                 <div data-ng-switch-when="no-result" class="alert-bg">
-                 <i class="icon-ion-search"></i><var:string label:value="No matching card"/>
-                 </div>
-                 <div data-ng-switch-when="remote-addressbook" data-ng-show="addressbook.cards.length == 0" class="alert-bg">
-                 <i class="icon-ion-search"></i><var:string label:value="Initiate a search"/>
-                 </div>
-                 </div>
-            -->
-            <!--dirty fix for vs-repeat-->
-            <style>
-              .vs-repeat-repeated-element {
-              width: 100%;
-              }
-            </style>
-            <md-list data-vs-repeat = "72"
-                data-vs-scroll-parent = "#contactsList">
-              <md-item ng-repeat = "currentCard in addressbook.cards track by currentCard.id"
-                  ng-class = "{_selected: card.id == currentCard.id}">
-                <md-item-content>
-                  <div class = "md-tile-left">
-                    <!--avatar-->
-                    <!-- currentCard.tag = vcard || vlist -->
-                  </div>
-                  <div class = "sg-tile-content">
-                    <a data-ui-sref = "addressbook.card.view({addressbookId: addressbook.id, cardId: currentCard.id})">
-                      <div class = "name" ng-bind-html = "currentCard.$fullname()"><!-- cn --></div>
-                      <div class = "subject">{{currentCard.$preferredEmail()}}</div>
-                    </a>
-                  </div>
-                </md-item-content>
-                <md-divider md-inset = "true" ng-if = "!$last"><!--divider--></md-divider>
-              </md-item>
-            </md-list>
-          </md-content>
-          <md-content class = "md-padding" flex = "flex" data-ui-view = "card"><!-- card view --></md-content>
-        </md-content>
-      </main>
-
-    </script>
-    <!-- UIxContactFoldersView -->
-
     <script type = "text/ng-template" id = "UIxContactViewTemplate">
       <var:component className = "UIxContactViewTemplate" />
     </script>
 
     <var:string value = "errorAlertJavaScript" const:escapeHTML = "NO" />
-  </div>
+
 </var:component>
diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox
index 6ad3c50b7..db68e520a 100644
--- a/UI/Templates/MailerUI/UIxMailMainFrame.wox
+++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox
@@ -219,11 +219,18 @@
     </ul>
   </div>
   -->
-  <!--FIXME : repport in-line styling in style definitions -->
-  <div class = "view" ui-view = "mailboxes" layout = "row"><!-- mailboxes list --></div>
+<!--
+  MAIN CONTENT ROW
+  Content of the application view injected injected in the element bellow
+  MUST be the first html element after body
+  SHOULD  be a main tag (with role="main")
 
+  Templates script tag wrappers goes next
+-->
+  <main class="view" ui-view="mailboxes" layout="row" layout-fill="layout-fill"><!-- mailboxes list --></main>
+
+  <!-- TEMPLATE SCRIPT WRAPPER -->
   <script type = "text/ng-template" id = "UIxMailMainFrame">
-
     <!-- dropdown menu for mailbox options button -->
     <div id = "folderProperties" class = "f-dropdown icons-dropdown" data-dropdown-content = "dropdown-content">
       <ul class = "button-group">
@@ -255,6 +262,7 @@
       </ul>
     </div>
 
+<!-- Sidenav -->
     <md-sidenav class = "md-sidenav-left md-whiteframe-z1" md-component-id = "left"
         md-is-locked-open = "$media('gt-md')" layout = "column">
       <md-toolbar class = "md-tall" layout-align = "end start">
@@ -262,7 +270,7 @@
           <span class = "md-flex">{{activeUser.identification}}</span>
         </h2>
       </md-toolbar>
-      <md-content md-scroll-y = "md-scroll-y" class = "md-padding" ng-controller = "LeftCtrl" flex="1 1 100%">
+      <md-content md-scroll-y = "md-scroll-y" class = "md-padding" ng-controller = "LeftCtrl" flex="flex">
         <md-button ng-click = "close()" class = "md-primary" hide-gt-md = "hide-gt-md">Close</md-button>
         <md-list ng-repeat = "account in accounts track by account.id">
           <md-item>
@@ -285,8 +293,8 @@
     <!--<div class="newItemsToolbar">
         <a class="button tiny radius split" data-ui-sref="mail.newMessage()"><var:string label:value="Compose"/><span data-dropdown-toggle="#draftsDrop"></span></a><br/>
         </div>-->
-
-    <main layout = "column" layout-fill = "layout-fill">
+<!-- Main section -->
+    <section layout = "column" layout-fill = "layout-fill">
       <md-toolbar layout = "row" layout-align = "space-between start" class = "md-tall md-grey">
         <!--fixme : md-toolbar-tools height is inconsistently defined, in former version it was 64px (basic toolbar height), here it's 100% -->
         <div class = "md-toolbar-tools" ng-controller = "toggleCtrl">
@@ -304,7 +312,7 @@
         </div>
       </md-toolbar>
       <md-content layout = "row" flex = "flex" ui-view = "mailbox"><!-- messages list --></md-content>
-    </main>
+    </section>
   </script>
 
   <script type = "text/ng-template" id = "UIxMailFolderTemplate">
diff --git a/UI/Templates/UIxPageFrame.wox b/UI/Templates/UIxPageFrame.wox
index 5958bd022..a5d7a5774 100644
--- a/UI/Templates/UIxPageFrame.wox
+++ b/UI/Templates/UIxPageFrame.wox
@@ -76,9 +76,10 @@
             <var:if condition = "isUIxDebugEnabled"
                 ><!-- space --></var:if>
           </var:if>
+<!-- MAIN CONTENT ROW -->
 
           <var:component-content />
-          <!--FIXME : make sure the .md-button.md-default-theme[disabled] is "contrast aware" disabled labels are actualy almost invisible -->
+
 <!-- BOTTOM-BAR -->
           <md-toolbar class = "sg-bottombar" layout = "row" layout-align = "center center" hide-sm="hide-sm"> <!--todo : transform show/hide attributes to classes. Adjust body padding accordingly to bottombar visibility (in media query) -->
             <var:if condition = "userHasCalendarAccess">