Preparing new HTML structure

UI.md

@@ -0,0 +1,186 @@
+# UI Guidelines
+
+A (work-in-progress) guide to help in building bars, dropdowns, panels, fields and other UI elements within W admin interface.
+
+## Main principles
+
+Never rely on a first level tag name to style elements but prefer classnames. Tag names might be used within a child selector (so they can benefit from the cascade) :
+```css
+/* instead of */
+details { }
+/* prefer */
+.dropdown { }
+.dropdown h2 { }
+```
+
+## Elements
+
+### Layout helpers
+
+`.flexrow` helps to layout horizontal items, whichever is their inline/block natural behavior.
+
+`.flexcol` is the same for vertical layouts.
+
+### Fields
+
+Each field (input, submit, checkbox or radio) is wrapped widthin a `<p class="field"></p>`.
+```html
+<p class="field">
+	<label for="myinput">label</label>
+	<input type="text" name="myinput" id="myinput" value="">
+</p>
+```
+
+Label comes first, then comes the input. CSS manages the order in case of checkboxes or radios.
+
+When two fields whould be in a row, wrap them in a `.flexrow`:
+```html
+<div class="flexrow">
+	<p class="field">
+		<label for="myinput">label</label>
+		<input type="text" name="myinput" id="myinput" value="">
+	</p>
+	<p class="field">
+		<label for="myinput2">label</label>
+		<input type="text" name="myinput2" id="myinput2" value="">
+	</p>
+</div>
+```
+Submit inputs or buttons are wrapped in a  `<p class="field submit-field"></p>`.
+```html
+<p class="field submit-field">
+	<input type="submit" value="submit">
+</p>
+```
+### Horizontal bar
+
+Used for main top-bar and dropwdowns menu-bar.
+
+Should have the class `.hbar`, and contain one or many `.hbar-section`.
+
+Each section should contain one or many `.flexrow` to properly layout any kind of children :
+- `div`: for grouping elements – which might not be useful
+- `form > input(s)`: for update/post actions
+- `a`: for links actions
+- `span`: for help info 
+
+### Dropdown menus
+
+Like stated above, these menus should be put in a `.hbar-section` within a `.hbar`.
+
+They are based on `<details>` element – so that they can be closed and opened without js – that receive à `.dropdown` class.
+
+The inner content is wrapped within a `.dropdown-content`.
+```html
+<details class="dropdown">
+	<summary>Menu name</summary>
+	<div class="dropdown-content">
+		(dropdown sections)
+	</div>
+</details>
+```
+
+The content itself is wrapped within one or multiple `.dropdown-section` that can be a `div` or a `form`.
+```html
+<form class="dropdown-section" method="">
+	<h2>Section title</h2>
+	<div class="dropdown-section-content">
+		(fields)
+	</div>
+</form>
+```
+
+
+
+## Main structure
+
+```
+HEADER.hbar#topbar 
+
+	div.hbar-section
+		div.flexrow
+			div | form | input | button | a | span
+
+NAV.hbar#navbar
+
+	div.hbar-section
+		details.dropdown
+			summary
+			{div|form}.dropdown-content
+				{div|form}.dropdown-section
+					h2.dropdown-section-title
+					div.dropdown-section-content
+						(p.help)
+						p.field
+							label
+							input | button | a | span
+
+MAIN
+
+	? aside.panel
+		(h1.panel-title)
+		div.scrollable
+			? {div|form}.panel-section
+				h2.panel-section-title
+				{div|form}.panel-section-content
+					(.list | .tree | fieldset)
+			? details
+
+	? aside.collapsible
+		label + input[type=checkbox]
+		.collapsible-content
+			(h1.panel-title)
+			div.scrollable	
+				{div|form}.panel-section
+					h2.panel-section-title
+					{div|form}.panel-section-content
+						(.list | .tree | fieldset)
+							(h3 | legend)
+							(p.help)
+							p.field
+								label
+								input | button | a
+
+	? section.main#pages
+		h1
+			text
+			div.flexrow
+				input | button | a
+		div#searchbar
+			…
+		div.scrollable	
+			table
+				…
+
+	? section.main#page
+		div.tabs
+			div.tab
+				label + input[type=checkbox]
+				div.tab-content
+					textarea
+
+	? section.main#medias
+		h1
+		div.scrollable	
+			table		
+
+	? section.main#admin
+		div.scrollable	
+			div.admin-section
+				h2.admin-section-title
+				div.admin-section-content
+
+	? section.main#users
+		h1
+		div.scrollable	
+			table		
+
+	? section.main#account
+		div.scrollable	
+			div.admin-section
+				h2.admin-section-title
+				div.admin-section-content
+
+	? section.main#info
+		div.scrollable	
+```

app/view/templates/backtopbar.php

@@ -1,83 +1,62 @@
-<header id="topbar">
-
-    <span id="search">
-        <form action="<?= $this->url('search') ?>" method="post">
-            <input type="text" list="searchdatalist" name="id" id="search" placeholder="page id" required <?= $tab !== 'edit' && !$user->isvisitor() ? 'autofocus' : '' ?>>
-            <input type="submit" name="action" value="read">
-            <?= $user->iseditor() ? '<input type="submit" name="action" value="edit">' : '' ?>
-
-            <?php if($user->iseditor()) : ?>
-            <datalist id="searchdatalist">
-                <?php foreach ($pagelist as $id) : ?>
-                    <option value="<?= $id ?>"><?= $id ?></option>
-                <?php endforeach ?>
-            </datalist>
+<header class="hbar" id="topbar">
+
+    <div class="hbar-section">
+        <div class="flexrow">
+
+            <form action="<?= $this->url('search') ?>" method="post"  id="search">
+                <input type="text" list="searchdatalist" name="id" id="search" placeholder="page id" required <?= $tab !== 'edit' && !$user->isvisitor() ? 'autofocus' : '' ?>>
+                <input type="submit" name="action" value="read">
+                <?= $user->iseditor() ? '<input type="submit" name="action" value="edit">' : '' ?>
+                <?php if($user->iseditor()) : ?>
+                    <datalist id="searchdatalist">
+                        <?php foreach ($pagelist as $id) : ?>
+                            <option value="<?= $id ?>"><?= $id ?></option>
+                        <?php endforeach ?>
+                    </datalist>
+                <?php endif ?>
+            </form>
+
+            <?php if($user->iseditor()) : ?>                
+                <a href="<?= $this->url('home') ?>" <?= $tab == 'home' ? 'class="currentpage"' : '' ?>>
+                    <i class="fa fa-home"></i> <span>home</span>
+                </a>
+                <a href="<?= $this->url('media') ?>" <?= $tab == 'media' ? 'class="currentpage"' : '' ?>>
+                    <i class="fa fa-link"></i> <span>media</span>
+                </a>
             <?php endif ?>
+        </div>
+    </div>
 
-        </form>
-    </span>
-
-
-
-    <?php if($user->iseditor()) : ?>
-
-    <span id="menu">
-        <a href="<?= $this->url('home') ?>" <?= $tab == 'home' ? 'class="currentpage"' : '' ?>>
-            <i class="fa fa-home"></i>
-            <span>home</span>
-        </a>
-        <a href="<?= $this->url('media') ?>" <?= $tab == 'media' ? 'class="currentpage"' : '' ?>>
-            <i class="fa fa-link"></i>
-            <span>media</span>
-        </a>
-    </span>
+    <div id="user" class="hbar-section">
+        <div class="flexrow">
 
-    <?php endif ?>
-
-
-    <span id="user">
-
-        <span>
             <?php if($user->isadmin()) : ?>
-
-            <a href="<?= $this->url('user') ?>" <?= $tab == 'user' ? 'class="currentpage"' : '' ?>>
-                <i class="fa fa-users"></i>
-                <span>users</span>
-            </a>
-
-            <a href="<?= $this->url('admin') ?>" <?= $tab == 'admin' ? 'class="currentpage"' : '' ?>>
-                <i class="fa fa-cog"></i>
-                <span>admin</span>
-
-            </a>
+                <a href="<?= $this->url('user') ?>" <?= $tab == 'user' ? 'class="currentpage"' : '' ?>>
+                    <i class="fa fa-users"></i> <span>users</span>
+                </a>
+                <a href="<?= $this->url('admin') ?>" <?= $tab == 'admin' ? 'class="currentpage"' : '' ?>>
+                    <i class="fa fa-cog"></i> <span>admin</span>
+                </a>
             <?php endif ?>
+
             <a href="<?= $this->url('info') ?>"  <?= $tab == 'info' ? 'class="currentpage"' : '' ?>>
-                <i class="fa fa-book"></i>
-                <span>documentation</span>
+                <i class="fa fa-book"></i> <span>documentation</span>
             </a>
 
-            <a
-                href="<?= $this->url('profile') ?>"
-                title="Edit my profile"
-                <?= $tab == 'profile' ? 'class="currentpage"' : '' ?>
-            >
-                <i class="fa fa-user"></i>
-                <span><?= $user->id() ?></span>
+            <a href="<?= $this->url('profile') ?>" title="Edit my profile" <?= $tab == 'profile' ? 'class="currentpage"' : '' ?> >
+                <i class="fa fa-user"></i> <span><?= $user->id() ?></span>
             </a>
-        </span>
-
-
-        <form action="<?= $this->url('log') ?>" method="post" id="connect">
-            <input type="submit" name="log" value="logout" >
-            <?php if($tab === 'edit') : ?>
-                <input type="hidden" name="route" value="pageread">
-                <input type="hidden" name="id" value="<?= $pageid ?>">
-            <?php endif ?>
-
-        </form>
-
-
 
-    </span>
+            <form action="<?= $this->url('log') ?>" method="post" id="connect">
+                <input type="submit" name="log" value="logout" >
+                <?php if($tab === 'edit') : ?>
+                    <input type="hidden" name="route" value="pageread">
+                    <input type="hidden" name="id" value="<?= $pageid ?>">
+                <?php endif ?>
+            </form>
+
+        </div>
+
+    </div>
 
 </header>