|
|
<?xml version="1.0" encoding="utf-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="generator" content="Docutils 0.14: http://docutils.sourceforge.net/" /><title>Web Responsive</title><style type="text/css">
/*:Author: David Goodger (goodger@python.org):Id: $Id: html4css1.css 7952 2016-07-26 18:15:59Z milde $:Copyright: This stylesheet has been placed in the public domain.
Default cascading style sheet for the HTML output of Docutils.
See http://docutils.sf.net/docs/howto/html-stylesheets.html for how tocustomize this style sheet.*/
/* used to remove borders from tables and images */.borderless, table.borderless td, table.borderless th { border: 0 }
table.borderless td, table.borderless th { /* Override padding for "table.docutils td" with "! important". The right padding separates the table cells. */ padding: 0 0.5em 0 0 ! important }
.first { /* Override more specific margin styles with "! important". */ margin-top: 0 ! important }
.last, .with-subtitle { margin-bottom: 0 ! important }
.hidden { display: none }
.subscript { vertical-align: sub; font-size: smaller }
.superscript { vertical-align: super; font-size: smaller }
a.toc-backref { text-decoration: none ; color: black }
blockquote.epigraph { margin: 2em 5em ; }
dl.docutils dd { margin-bottom: 0.5em }
object[type="image/svg+xml"], object[type="application/x-shockwave-flash"] { overflow: hidden;}
/* Uncomment (and remove this text!) to get bold-faced definition list termsdl.docutils dt { font-weight: bold }*/
div.abstract { margin: 2em 5em }
div.abstract p.topic-title { font-weight: bold ; text-align: center }
div.admonition, div.attention, div.caution, div.danger, div.error,div.hint, div.important, div.note, div.tip, div.warning { margin: 2em ; border: medium outset ; padding: 1em }
div.admonition p.admonition-title, div.hint p.admonition-title,div.important p.admonition-title, div.note p.admonition-title,div.tip p.admonition-title { font-weight: bold ; font-family: sans-serif }
div.attention p.admonition-title, div.caution p.admonition-title,div.danger p.admonition-title, div.error p.admonition-title,div.warning p.admonition-title, .code .error { color: red ; font-weight: bold ; font-family: sans-serif }
/* Uncomment (and remove this text!) to get reduced vertical space in compound paragraphs.div.compound .compound-first, div.compound .compound-middle { margin-bottom: 0.5em }
div.compound .compound-last, div.compound .compound-middle { margin-top: 0.5em }*/
div.dedication { margin: 2em 5em ; text-align: center ; font-style: italic }
div.dedication p.topic-title { font-weight: bold ; font-style: normal }
div.figure { margin-left: 2em ; margin-right: 2em }
div.footer, div.header { clear: both; font-size: smaller }
div.line-block { display: block ; margin-top: 1em ; margin-bottom: 1em }
div.line-block div.line-block { margin-top: 0 ; margin-bottom: 0 ; margin-left: 1.5em }
div.sidebar { margin: 0 0 0.5em 1em ; border: medium outset ; padding: 1em ; background-color: #ffffee ; width: 40% ; float: right ; clear: right }
div.sidebar p.rubric { font-family: sans-serif ; font-size: medium }
div.system-messages { margin: 5em }
div.system-messages h1 { color: red }
div.system-message { border: medium outset ; padding: 1em }
div.system-message p.system-message-title { color: red ; font-weight: bold }
div.topic { margin: 2em }
h1.section-subtitle, h2.section-subtitle, h3.section-subtitle,h4.section-subtitle, h5.section-subtitle, h6.section-subtitle { margin-top: 0.4em }
h1.title { text-align: center }
h2.subtitle { text-align: center }
hr.docutils { width: 75% }
img.align-left, .figure.align-left, object.align-left, table.align-left { clear: left ; float: left ; margin-right: 1em }
img.align-right, .figure.align-right, object.align-right, table.align-right { clear: right ; float: right ; margin-left: 1em }
img.align-center, .figure.align-center, object.align-center { display: block; margin-left: auto; margin-right: auto;}
table.align-center { margin-left: auto; margin-right: auto;}
.align-left { text-align: left }
.align-center { clear: both ; text-align: center }
.align-right { text-align: right }
/* reset inner alignment in figures */div.align-right { text-align: inherit }
/* div.align-center * { *//* text-align: left } */
.align-top { vertical-align: top }
.align-middle { vertical-align: middle }
.align-bottom { vertical-align: bottom }
ol.simple, ul.simple { margin-bottom: 1em }
ol.arabic { list-style: decimal }
ol.loweralpha { list-style: lower-alpha }
ol.upperalpha { list-style: upper-alpha }
ol.lowerroman { list-style: lower-roman }
ol.upperroman { list-style: upper-roman }
p.attribution { text-align: right ; margin-left: 50% }
p.caption { font-style: italic }
p.credits { font-style: italic ; font-size: smaller }
p.label { white-space: nowrap }
p.rubric { font-weight: bold ; font-size: larger ; color: maroon ; text-align: center }
p.sidebar-title { font-family: sans-serif ; font-weight: bold ; font-size: larger }
p.sidebar-subtitle { font-family: sans-serif ; font-weight: bold }
p.topic-title { font-weight: bold }
pre.address { margin-bottom: 0 ; margin-top: 0 ; font: inherit }
pre.literal-block, pre.doctest-block, pre.math, pre.code { margin-left: 2em ; margin-right: 2em }
pre.code .ln { color: grey; } /* line numbers */pre.code, code { background-color: #eeeeee }pre.code .comment, code .comment { color: #5C6576 }pre.code .keyword, code .keyword { color: #3B0D06; font-weight: bold }pre.code .literal.string, code .literal.string { color: #0C5404 }pre.code .name.builtin, code .name.builtin { color: #352B84 }pre.code .deleted, code .deleted { background-color: #DEB0A1}pre.code .inserted, code .inserted { background-color: #A3D289}
span.classifier { font-family: sans-serif ; font-style: oblique }
span.classifier-delimiter { font-family: sans-serif ; font-weight: bold }
span.interpreted { font-family: sans-serif }
span.option { white-space: nowrap }
span.pre { white-space: pre }
span.problematic { color: red }
span.section-subtitle { /* font-size relative to parent (h1..h6 element) */ font-size: 80% }
table.citation { border-left: solid 1px gray; margin-left: 1px }
table.docinfo { margin: 2em 4em }
table.docutils { margin-top: 0.5em ; margin-bottom: 0.5em }
table.footnote { border-left: solid 1px black; margin-left: 1px }
table.docutils td, table.docutils th,table.docinfo td, table.docinfo th { padding-left: 0.5em ; padding-right: 0.5em ; vertical-align: top }
table.docutils th.field-name, table.docinfo th.docinfo-name { font-weight: bold ; text-align: left ; white-space: nowrap ; padding-left: 0 }
/* "booktabs" style (no vertical lines) */table.docutils.booktabs { border: 0px; border-top: 2px solid; border-bottom: 2px solid; border-collapse: collapse;}table.docutils.booktabs * { border: 0px;}table.docutils.booktabs th { border-bottom: thin solid; text-align: left;}
h1 tt.docutils, h2 tt.docutils, h3 tt.docutils,h4 tt.docutils, h5 tt.docutils, h6 tt.docutils { font-size: 100% }
ul.auto-toc { list-style-type: none }
</style></head><body><div class="document" id="web-responsive"><h1 class="title">Web Responsive</h1>
<!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!! This file is generated by oca-gen-addon-readme !!!! changes will be overwritten. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! --><p><a class="reference external" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.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/12.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-12-0/web-12-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/12.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“hamburger” 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 whenscrolling 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 “back arrow” 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></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 <tt class="docutils literal">Alt + [key]</tt>.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/12.0/web_responsive/static/img/chatter_topbar.gif" src="https://raw.githubusercontent.com/OCA/web/12.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/12.0/web_responsive/static/img/appmenu.gif" src="https://raw.githubusercontent.com/OCA/web/12.0/web_responsive/static/img/appmenu.gif" /></li><li><p class="first">Sticky header & footer in list view</p><img alt="https://raw.githubusercontent.com/OCA/web/12.0/web_responsive/static/img/listview.gif" src="https://raw.githubusercontent.com/OCA/web/12.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/12.0/web_responsive/static/img/formview.gif" src="https://raw.githubusercontent.com/OCA/web/12.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/12.0/web_responsive/static/img/chatter.gif" src="https://raw.githubusercontent.com/OCA/web/12.0/web_responsive/static/img/chatter.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><div class="section" id="usage"><h1><a class="toc-backref" href="#id1">Usage</a></h1><p>The following keyboard shortcuts are implemented:</p><ul class="simple"><li>Toggle app drawer - <tt class="docutils literal">Alt + Shift + H</tt></li><li>Navigate app search results - Arrow keys</li><li>Choose app result - <tt class="docutils literal">Enter</tt></li><li><tt class="docutils literal">Esc</tt> to close app drawer</li></ul></div><div class="section" id="known-issues-roadmap"><h1><a class="toc-backref" href="#id2">Known issues / Roadmap</a></h1><ul class="simple"><li>To view the full experience in a device, the page must be loaded with thedevice 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 thatnew size. This is Odoo’s own limitation.</li><li>App navigation with keyboard.</li><li>Make it more beautiful. Maybe OCA-branded?</li></ul></div><div class="section" id="bug-tracker"><h1><a class="toc-backref" href="#id3">Bug Tracker</a></h1><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:%2012.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></div><div class="section" id="credits"><h1><a class="toc-backref" href="#id4">Credits</a></h1><div class="section" id="authors"><h2><a class="toc-backref" href="#id5">Authors</a></h2><ul class="simple"><li>LasLabs</li><li>Tecnativa</li><li>Alexandre Díaz</li></ul></div><div class="section" id="contributors"><h2><a class="toc-backref" href="#id6">Contributors</a></h2><ul class="simple"><li>Dave Lasley <<a class="reference external" href="mailto:dave@laslabs.com">dave@laslabs.com</a>></li><li>Jairo Llopis <<a class="reference external" href="mailto:jairo.llopis@tecnativa.com">jairo.llopis@tecnativa.com</a>></li><li>Dennis Sluijk <<a class="reference external" href="mailto:d.sluijk@onestein.nl">d.sluijk@onestein.nl</a>></li><li>Sergio Teruel <<a class="reference external" href="mailto:sergio.teruel@tecnativa.com">sergio.teruel@tecnativa.com</a>></li><li>Alexandre Díaz <<a class="reference external" href="mailto:dev@redneboa.es">dev@redneboa.es</a>></li></ul></div><div class="section" id="maintainers"><h2><a class="toc-backref" href="#id7">Maintainers</a></h2><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 whosemission is to support the collaborative development of Odoo features andpromote its widespread use.</p><p>This module is part of the <a class="reference external" href="https://github.com/OCA/web/tree/12.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></div></div></div></body></html>
|
