<h1 class="title">Web Responsive</h1> <p><a class="reference external" href="https://odoo-community.org/page/development-status"><img alt="Production/Stable" src="https://img.shields.io/badge/maturity-Production%2FStable-green.png" /></a> <a class="reference external" href="http://www.gnu.org/licenses/lgpl-3.0-standalone.html"><img alt="License: LGPL-3" src="https://img.shields.io/badge/licence-LGPL--3-blue.png" /></a> <a class="reference external" href="https://github.com/OCA/web/tree/14.0/web_responsive"><img alt="OCA/web" src="https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github" /></a> <a class="reference external" href="https://translation.odoo-community.org/projects/web-14-0/web-14-0-web_responsive"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external" href="https://runbot.odoo-community.org/runbot/162/14.0"><img alt="Try me on Runbot" src="https://img.shields.io/badge/runbot-Try%20me-875A7B.png" /></a></p> <p>This module adds responsiveness to web backend.</p> <p>Features for all devices:</p> <ul> <li><p class="first">New navigation with an app drawer</p> <img alt="https://user-images.githubusercontent.com/973709/48417193-09a1e080-e74a-11e8-8a0c-e73eb689b2fb.gif" src="https://user-images.githubusercontent.com/973709/48417193-09a1e080-e74a-11e8-8a0c-e73eb689b2fb.gif" /> </li> <li><p class="first">Quick menu search from the app drawer</p> <img alt="https://user-images.githubusercontent.com/973709/48417213-17576600-e74a-11e8-846a-57691e82636b.gif" src="https://user-images.githubusercontent.com/973709/48417213-17576600-e74a-11e8-846a-57691e82636b.gif" /> </li> </ul> <p>Features for mobile:</p> <ul> <li><p class="first">App-specific submenus are shown on full screen when toggling them from the &quot;hamburger&quot; menu</p> <img alt="https://user-images.githubusercontent.com/973709/48417297-51286c80-e74a-11e8-9a47-22c810b18c43.gif" src="https://user-images.githubusercontent.com/973709/48417297-51286c80-e74a-11e8-9a47-22c810b18c43.gif" /> </li> <li><p class="first">View type picker dropdown displays confortably</p> <img alt="https://user-images.githubusercontent.com/973709/50964322-e3d55580-14c6-11e9-8249-48db9539600f.gif" src="https://user-images.githubusercontent.com/973709/50964322-e3d55580-14c6-11e9-8249-48db9539600f.gif" /> </li> <li><p class="first">Top app bar is always visible, but the control panel is hidden when scrolling down, to save some vaulable vertical space</p> <img alt="https://user-images.githubusercontent.com/973709/50964496-5cd4ad00-14c7-11e9-9261-fd223a329d02.gif" src="https://user-images.githubusercontent.com/973709/50964496-5cd4ad00-14c7-11e9-9261-fd223a329d02.gif" /> </li> <li><p class="first">Form status bar action and status buttons are collapsed in dropdowns. Other control panel buttons use icons to save space.</p> <img alt="https://user-images.githubusercontent.com/973709/50965446-e08f9900-14c9-11e9-92d6-dda472cb6557.gif" src="https://user-images.githubusercontent.com/973709/50965446-e08f9900-14c9-11e9-92d6-dda472cb6557.gif" /> </li> <li><p class="first">Breadcrumbs navigation is collapsed with a &quot;back arrow&quot; button.</p> <img alt="https://user-images.githubusercontent.com/973709/50965168-1d0ec500-14c9-11e9-82a0-dfee82ed0861.gif" src="https://user-images.githubusercontent.com/973709/50965168-1d0ec500-14c9-11e9-82a0-dfee82ed0861.gif" /> </li> <li><p class="first">Search panel is hidden on small screens.</p> <img alt="https://raw.githubusercontent.com/OCA/web/14.0/web_responsive/static/img/search_panel.gif" src="https://raw.githubusercontent.com/OCA/web/14.0/web_responsive/static/img/search_panel.gif" /> </li> </ul> <p>Features for computers:</p> <ul> <li><p class="first">Keyboard shortcuts for easier navigation, <strong>using ``Alt + Shift + [key]``</strong> combination instead of just <code>Alt + [key]</code>. See <a class="reference external" href="https://github.com/odoo/odoo/issues/30068">https://github.com/odoo/odoo/issues/30068</a> to understand why.</p> <img alt="https://user-images.githubusercontent.com/973709/48417578-ff341680-e74a-11e8-8881-017709e912bc.png" src="https://user-images.githubusercontent.com/973709/48417578-ff341680-e74a-11e8-8881-017709e912bc.png" /> </li> <li><p class="first">Autofocus on search menu box when opening the drawer</p> <img alt="https://user-images.githubusercontent.com/973709/48417213-17576600-e74a-11e8-846a-57691e82636b.gif" src="https://user-images.githubusercontent.com/973709/48417213-17576600-e74a-11e8-846a-57691e82636b.gif" /> </li> <li><p class="first">Set chatter on the side of the screen, optional per user</p> <img alt="https://user-images.githubusercontent.com/973709/48417270-41108d00-e74a-11e8-9172-cba825d027ed.gif" src="https://user-images.githubusercontent.com/973709/48417270-41108d00-e74a-11e8-9172-cba825d027ed.gif" /> </li> <li><p class="first">Full width form sheets</p> <img alt="https://user-images.githubusercontent.com/973709/48417428-ac5a5f00-e74a-11e8-8839-5bc538c54c1d.png" src="https://user-images.githubusercontent.com/973709/48417428-ac5a5f00-e74a-11e8-8839-5bc538c54c1d.png" /> </li> <li><p class="first">Sticky chatter topbar</p> <img alt="https://raw.githubusercontent.com/OCA/web/14.0/web_responsive/static/img/chatter_topbar.gif" src="https://raw.githubusercontent.com/OCA/web/14.0/web_responsive/static/img/chatter_topbar.gif" /> </li> <li><p class="first">AppMenu waits for action finished to show the view</p> <img alt="https://raw.githubusercontent.com/OCA/web/14.0/web_responsive/static/img/appmenu.gif" src="https://raw.githubusercontent.com/OCA/web/14.0/web_responsive/static/img/appmenu.gif" /> </li> <li><p class="first">Sticky header &amp; footer in list view</p> <img alt="https://raw.githubusercontent.com/OCA/web/14.0/web_responsive/static/img/listview.gif" src="https://raw.githubusercontent.com/OCA/web/14.0/web_responsive/static/img/listview.gif" /> </li> <li><p class="first">Sticky statusbar in form view</p> <img alt="https://raw.githubusercontent.com/OCA/web/14.0/web_responsive/static/img/formview.gif" src="https://raw.githubusercontent.com/OCA/web/14.0/web_responsive/static/img/formview.gif" /> </li> <li><p class="first">Followers and send button is displayed on mobile. Avatar is hidden.</p> <img alt="https://raw.githubusercontent.com/OCA/web/14.0/web_responsive/static/img/chatter.gif" src="https://raw.githubusercontent.com/OCA/web/14.0/web_responsive/static/img/chatter.gif" /> </li> <li><p class="first">When the chatter is configured on the side part, the document viewer fills that part for side-by-side reading instead of full screen. You can still put it on full width preview clicking on the new maximize button.</p> <img alt="https://raw.githubusercontent.com/OCA/web/14.0/web_responsive/static/img/document_viewer.gif" src="https://raw.githubusercontent.com/OCA/web/14.0/web_responsive/static/img/document_viewer.gif" /> </li> <li><p class="first">Bigger checkboxes in list view</p> <img alt="https://raw.githubusercontent.com/OCA/web/14.0/web_responsive/static/img/big_checkboxes.gif" src="https://raw.githubusercontent.com/OCA/web/14.0/web_responsive/static/img/big_checkboxes.gif" /> </li> <li><p class="first">Scrollable dropdowns</p> <img alt="https://raw.githubusercontent.com/OCA/web/14.0/web_responsive/static/img/dropdown_scroll.gif" src="https://raw.githubusercontent.com/OCA/web/14.0/web_responsive/static/img/dropdown_scroll.gif" /> </li> </ul> <p><strong>Table of contents</strong></p> <div class="contents local topic" id="contents"> <ul class="simple"> <li><a class="reference internal" href="#usage" id="id1">Usage</a></li> <li><a class="reference internal" href="#known-issues-roadmap" id="id2">Known issues / Roadmap</a></li> <li><a class="reference internal" href="#bug-tracker" id="id3">Bug Tracker</a></li> <li><a class="reference internal" href="#credits" id="id4">Credits</a><ul> <li><a class="reference internal" href="#authors" id="id5">Authors</a></li> <li><a class="reference internal" href="#contributors" id="id6">Contributors</a></li> <li><a class="reference internal" href="#maintainers" id="id7">Maintainers</a></li> </ul> </li> </ul> </div> <a name="usage"></a> <h2><a class="toc-backref" href="#id1">Usage</a></h2> <p>The following keyboard shortcuts are implemented:</p> <ul class="simple"> <li>Navigate app search results - Arrow keys</li> <li>Choose app result - <code>Enter</code></li> <li><code>Esc</code> to close app drawer</li> </ul> <a name="known-issues-roadmap"></a> <h2><a class="toc-backref" href="#id2">Known issues / Roadmap</a></h2> <ul class="simple"> <li>To view the full experience in a device, the page must be loaded with the device screen size. This means that, if you change the size of your browser, you should reload the web client to get the full experience for that new size. This is Odoo's own limitation.</li> <li>App navigation with keyboard.</li> <li>Handle long titles on forms in a better way</li> <li>Standard sticky headers seems to not work properly on iOS Safari/Chrome (see #1626).</li> </ul> <a name="bug-tracker"></a> <h2><a class="toc-backref" href="#id3">Bug Tracker</a></h2> <p>Bugs are tracked on <a class="reference external" href="https://github.com/OCA/web/issues">GitHub Issues</a>. In case of trouble, please check there if your issue has already been reported. If you spotted it first, help us smashing it by providing a detailed and welcomed <a class="reference external" href="https://github.com/OCA/web/issues/new?body=module:%20web_responsive%0Aversion:%2014.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p> <p>Do not contact contributors directly about support or help with technical issues.</p> <a name="credits"></a> <h2><a class="toc-backref" href="#id4">Credits</a></h2> <a name="authors"></a> <h3><a class="toc-backref" href="#id5">Authors</a></h3> <ul class="simple"> <li>LasLabs</li> <li>Tecnativa</li> </ul> <a name="contributors"></a> <h3><a class="toc-backref" href="#id6">Contributors</a></h3> <ul class="simple"> <li>Dave Lasley &lt;<a class="reference external" href="mailto:dave&#64;laslabs.com">dave&#64;laslabs.com</a>&gt;</li> <li>Jairo Llopis &lt;<a class="reference external" href="mailto:jairo.llopis&#64;tecnativa.com">jairo.llopis&#64;tecnativa.com</a>&gt;</li> <li>Dennis Sluijk &lt;<a class="reference external" href="mailto:d.sluijk&#64;onestein.nl">d.sluijk&#64;onestein.nl</a>&gt;</li> <li>Sergio Teruel &lt;<a class="reference external" href="mailto:sergio.teruel&#64;tecnativa.com">sergio.teruel&#64;tecnativa.com</a>&gt;</li> <li>Alexandre Díaz &lt;<a class="reference external" href="mailto:dev&#64;redneboa.es">dev&#64;redneboa.es</a>&gt;</li> <li>Mathias Markl &lt;<a class="reference external" href="mailto:mathias.markl&#64;mukit.at">mathias.markl&#64;mukit.at</a>&gt;</li> <li>Iván Todorovich &lt;<a class="reference external" href="mailto:ivan.todorovich&#64;gmail.com">ivan.todorovich&#64;gmail.com</a>&gt;</li> <li>Sergey Shebanin &lt;<a class="reference external" href="mailto:sergey&#64;shebanin.ru">sergey&#64;shebanin.ru</a>&gt;</li> </ul> <a name="maintainers"></a> <h3><a class="toc-backref" href="#id7">Maintainers</a></h3> <p>This module is maintained by the OCA.</p> <a class="reference external image-reference" href="https://odoo-community.org"><img alt="Odoo Community Association" src="https://odoo-community.org/logo.png" /></a> <p>OCA, or the Odoo Community Association, is a nonprofit organization whose mission is to support the collaborative development of Odoo features and promote its widespread use.</p> <p>Current <a class="reference external" href="https://odoo-community.org/page/maintainer-role">maintainers</a>:</p> <p><a class="reference external" href="https://github.com/Yajo"><img alt="Yajo" src="https://github.com/Yajo.png?size=40px" /></a> <a class="reference external" href="https://github.com/Tardo"><img alt="Tardo" src="https://github.com/Tardo.png?size=40px" /></a></p> <p>This module is part of the <a class="reference external" href="https://github.com/OCA/web/tree/14.0/web_responsive">OCA/web</a> project on GitHub.</p> <p>You are welcome to contribute. To learn how please visit <a class="reference external" href="https://odoo-community.org/page/Contribute">https://odoo-community.org/page/Contribute</a>.</p>