NextERP/owl
2
0
Fork 0
mirror of https://github.com/odoo/owl.git synced 2025-10-06 19:59:41 +07:00
Code Issues Packages Projects Releases Wiki Activity

[IMP] pages: Simple and clean layout for the landing page

Browse Source
This commit is contained in:
Pierre Paridans
2019-06-27 12:08:28 +02:00
committed by Géry Debongnie
parent b7e377d815
commit 4b86dfb4dd
8 changed files with 1222 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+81 -26
View File
@@ -1,31 +1,86 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>OWL Framework</title>
<link rel="icon" href="data:,">
<link rel="stylesheet" href="main.css">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OWL Framework</title>
<link rel="icon" href="data:,">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
<link rel="stylesheet" href="assets/normalize.css">
<link rel="stylesheet" href="assets/milligram.css">
<link rel="stylesheet" href="assets/highlight.tomorrow.css">
<link rel="stylesheet" href="assets/main.css">
</head>
<body>
<header class="container">
<img class="homepage-logo" src="assets/owl_1f989.png" alt="OWL Logo">
<hgroup>
<h1>OWL Framework</h1>
<p>Mysterious OWL: A web framework for structured, dynamic and maintainable applications</p>
</hgroup>
</header>
<nav class="container">
<p>
<a href="https://github.com/odoo/owl" title="https://github.com/odoo/owl">Github</a>
&bull;
<a href="https://github.com/odoo/owl/blob/master/doc/readme.md">Documentation</a>
&bull;
<a href="playground/">Playground</a>
</p>
</nav>
<main>
<article class="design">
<div class="container">
<h2>Why OWL?</h2>
<div class="row">
<section class="column">
<h3>XML based</h3>
<p>Templates are based on the XML format, which allows interesting applications. For example, they could be stored in a database and modified dynamically with <tt>xpaths</tt>.</p>
</section>
<section class="column">
<h3>Templates compiled in the browser</h3>
<p>This may not be a good fit for all applications, but if you need to generate dynamically user interfaces in the browser, this is very powerful. For example, a generic form view component could generate a specific form user interface for each various models, from a XML view.</p>
</section>
<section class="column">
<h3>No toolchain required</h3>
<p>This is extremely useful for some applications, if, for various reasons (security/deployment/dynamic modules/specific assets tools), it is not ok to use standard web tools based on <tt>npm</tt>.</p>
</section>
</div>
</div>
</article>
<article class="example">
<div class="container">
<h2>Example</h2>
<div class="row">
<section class="column">
<pre><code class="javascript">class Counter extends owl.Component {
state = { value: 0 };
increment() {
this.state.value++;
}
}
</head>
<body>
<div class="title">
<h1>🦉 OWL Framework 🦉</h1>
<div>Mysterious OWL: A web framework for structured, dynamic and maintainable applications</div>
</div>
<div class="section misc">
<ul>
<li>Github project: <a href="https://github.com/odoo/owl">https://github.com/odoo/owl</a></li>
<li>Documentation: <a href="https://github.com/odoo/owl/blob/master/doc/readme.md">https://github.com/odoo/owl/blob/master/doc/readme.md</a>
<li>Online playground: <a href="playground/">playground/</a>
</ul>
</div>
<div class="footnote">
<p>
Are you a designer? Do you like CSS? Improve this page: make a PR!
</p>
</div>
</body>
const qweb = new owl.QWeb(TEMPLATES);
const counter = new Counter({ qweb });
counter.mount(document.body);</code></pre>
</section>
<section class="column">
<pre><code class="xml">&lt;templates&gt;
&lt;button t-name=&quot;Counter&quot; t-on-click=&quot;increment&quot;&gt;
Click Me! [&lt;t t-esc=&quot;state.value&quot;/&gt;]
&lt;/button&gt;
&lt;/templates&gt;</code></pre>
</section>
</div>
<p>Note that we assume here that the xml templates are available in the <tt>TEMPLATES</tt> string. More interesting examples can be found on the <a href="playground/">Playground</a> application.</p>
</div>
</article>
</main>
<footer>
<p><a href=".">OWL</a> is licensed under GPL v3.<br>Logo from <a href="https://github.com/googlefonts/noto-emoji">Google Noto Emoji Font</a>, licensed under Apache License 2.0</p>
</footer>
<script src="assets/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>