[REF] github page: move page to docs folder on master branch

Currently, some of the things on the playground must be changed directly
on the master branch while other things require checking out the
gh-pages branch and making the modifications there. Even when changes
need to be made on the master branch, all changes that are not direcly
in owl itself need to be copied by hand to the gh-pages branch.

This commit moves all files that exist on the gh-pages branch to the
master branch in the docs folder, this change will require configuring
the github page to use the docs folder instead of a separate branch, but
will make maintenance of the github page and playground easier going
forward.

docs/playground/samples/responsive_app/responsive_app.css

@@ -0,0 +1,56 @@
+body {
+    margin: 0;
+}
+
+.app {
+    height: 100%;
+    flex-direction: column;
+}
+
+.app.desktop {
+    display: flex;
+}
+
+.navbar {
+    flex: 0 0 30px;
+    height: 30px;
+    background-color: cadetblue;
+    color: white;
+    line-height: 30px;
+}
+
+.controlpanel {
+    flex: 0 0 100px;
+    height: 100px;
+    background-color: #dddddd;
+    padding: 8px;
+}
+
+.content-wrapper {
+    flex: 1 1 auto;
+    position: relative;
+}
+
+.content {
+    display: flex;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.formview {
+    overflow-y: auto;
+    flex: 1 1 60%;
+    min-height: 200px;
+    padding: 8px;
+}
+
+.chatter {
+    overflow-y: auto;
+    flex: 1 1 40%;
+    background-color: #eeeeee;
+    color: #333333;
+    padding: 8px;
+}

docs/playground/samples/responsive_app/responsive_app.js

@@ -0,0 +1,118 @@
+// In this example, we show how one can design an application that is responsive:
+// its UI is different in mobile mode or in desktop mode.
+//
+// The main idea is to have a "isMobile" key in the environment, then listen
+// to resize events and update the env if needed.  Then, the whole interface
+// will be updated, creating and destroying components as needed.
+//
+// To see this in action, try resizing the window.  The application will switch
+// to mobile mode whenever it has less than 768px.
+import { Component, useState, mount, reactive, useEnv } from "@odoo/owl";
+
+//------------------------------------------------------------------------------
+// Helpers
+//------------------------------------------------------------------------------
+
+function debounce(func, wait, immediate) {
+  let timeout;
+  return function () {
+    const context = this;
+    const args = arguments;
+    function later() {
+      timeout = null;
+      if (!immediate) {
+        func.apply(context, args);
+      }
+    }
+    const callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) {
+      func.apply(context, args);
+    }
+  };
+}
+
+//------------------------------------------------------------------------------
+// Responsive hook
+//------------------------------------------------------------------------------
+
+function createUI() {
+  const getIsMobile = () => window.innerWidth <= 768;
+
+  const ui = reactive({ isMobile: getIsMobile() });
+
+    const updateEnv = debounce(() => {
+      const isMobile = getIsMobile();
+        if (ui.isMobile !== isMobile) {
+            ui.isMobile = isMobile;
+        }
+    }, 15);
+    window.addEventListener("resize", updateEnv);
+    return ui;
+}
+
+function useUI() {
+  const env = useEnv();
+  return useState(env.ui);
+}
+
+
+//------------------------------------------------------------------------------
+// Components
+//------------------------------------------------------------------------------
+class Navbar extends Component {
+  static template = "Navbar";
+}
+
+class MobileSearchView extends Component {
+  static template = "MobileSearchView";
+}
+
+class ControlPanel extends Component {
+  static template = "ControlPanel";
+  static components = { MobileSearchView };
+  setup() {
+    this.ui = useUI();
+  }
+}
+
+class AdvancedComponent extends Component {
+  static template = "AdvancedComponent";
+}
+
+class FormView extends Component {
+  static template = "FormView";
+  static components = { AdvancedComponent };
+  setup() {
+    this.ui = useUI();
+  }
+}
+
+class Chatter extends Component {
+    static template = "Chatter";
+
+    setup() {
+        this.messages = Array.from(Array(100).keys());
+    }
+}
+
+class Root extends Component {
+  static template = "Root";
+  static components = { Navbar, ControlPanel, FormView, Chatter };
+
+  setup() {
+    this.ui = useUI();
+  }
+}
+
+
+
+//------------------------------------------------------------------------------
+// Application Startup
+//------------------------------------------------------------------------------
+const env = {
+  ui: createUI()
+};
+
+mount(Root, document.body, { templates: TEMPLATES, env, dev: true });

docs/playground/samples/responsive_app/responsive_app.xml

@@ -0,0 +1,42 @@
+<templates>
+  <div t-name="Navbar" class="navbar">Navbar</div>
+
+  <div t-name="ControlPanel" class="controlpanel">
+    <h2>Control Panel</h2>
+    <MobileSearchView t-if="ui.isMobile" />
+  </div>
+
+  <div t-name="FormView" class="formview">
+    <h2>Form View</h2>
+    <AdvancedComponent t-if="!ui.isMobile" />
+  </div>
+
+  <div t-name="Chatter" class="chatter">
+    <h2>Chatter</h2>
+    <t t-foreach="messages" t-as="item" t-key="item"><div>Message <t t-esc="item"/></div></t>
+  </div>
+
+  <div t-name="MobileSearchView">Mobile searchview</div>
+
+  <div t-name="AdvancedComponent">
+    This component is only created in desktop mode.
+    <button>Button!</button>
+  </div>
+
+  <t t-name="maincontent">
+    <FormView />
+    <Chatter />
+  </t>
+  <div t-name="Root" class="app" t-att-class="{mobile: ui.isMobile, desktop: !ui.isMobile}">
+    <Navbar/>
+    <ControlPanel/>
+    <div class="content-wrapper" t-if="!ui.isMobile">
+      <div class="content">
+        <t t-call="maincontent"/>
+      </div>
+    </div>
+    <t t-else="">
+      <t t-call="maincontent"/>
+    </t>
+  </div>
+</templates>