update homepage layout
This commit is contained in:
Elisabeth Dickinson
parent
f6f72292b5
commit
6d6d9ec627
@ -1,121 +1,156 @@
|
||||
<div id="o_content">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<h1 class="display-4 text-white fw_bold">Odoo Documentation</h1>
|
||||
<p class="text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.</p>
|
||||
<div class="mt-5">
|
||||
<section class="o_content_fw_banner row">
|
||||
<div class="col-lg-6">
|
||||
<h2 class="text-white">Odoo Documentation</h2>
|
||||
<p class="text-white">The comprehensive guide for Odoo users. Easily find the tutorial and helpful tips that suit your needs.</p>
|
||||
<div class="mt-3">
|
||||
<a href="https://odoo.com/trial" class="btn btn-primary mb-2">Try it now!</a>
|
||||
<a href="https://odoo.com/download" class="btn btn-outline-light mb-2">Download Odoo</a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="{{ pathto('_static/img/homepage-illustration.svg', 1) }}" class="col-5 py-5 img-fluid" alt="">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-4">
|
||||
<h2 class="text-center o_title_start">Applications</h2>
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<a href="{{ pathto('applications/finance/accounting/overview/main_concepts/intro') }}" class="stretched-link">
|
||||
Introduction to Odoo Accounting
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ pathto('applications/inventory_and_mrp/inventory/overview/concepts/double-entry') }}" class="stretched-link">
|
||||
Introduction to Inventory Management
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ pathto('applications/general/base_import/import_faq') }}" class="stretched-link">Import data into Odoo
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ pathto('applications/productivity/discuss/email_servers') }}" class="stretched-link">
|
||||
Use my mail server to send and receive emails in Odoo
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<div class="row gx-lg-5 border-bottom">
|
||||
<div class="col-lg-6 order-lg-2">
|
||||
<div class="o_cat_banner pt-lg-4 ps-lg-4 mb-5 o-bg-violet-light shadow">
|
||||
<img src="{{ pathto('_static/img/banner-applications.png', 1) }}" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 order-lg-1">
|
||||
<h3>Applications</h3>
|
||||
<p>Master any app thanks to their end-user guides. Our wide array of functional workflows and processes are designed to help you unleash Odoo's potential.</p>
|
||||
<h5 class="pt-3 text-uppercase fw_semibold">Top Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<a href="{{ pathto('applications/finance/accounting/overview/main_concepts/intro') }}" class="stretched-link">
|
||||
Introduction to Odoo Accounting
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ pathto('applications/inventory_and_mrp/inventory/overview/concepts/double-entry') }}" class="stretched-link">
|
||||
Introduction to Inventory Management
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ pathto('applications/general/base_import/import_faq') }}" class="stretched-link">Import data into Odoo
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ pathto('applications/productivity/discuss/email_servers') }}" class="stretched-link">
|
||||
Use my mail server to send and receive emails in Odoo
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<h2 class="text-center o_title_install">Administration</h2>
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<a href=" {{ pathto('administration/install') }} " class="stretched-link">
|
||||
Installing Odoo
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ pathto('administration/deployment/deploy') }}" class="stretched-link">
|
||||
Deploying Odoo
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ pathto('administration/update') }}" class="stretched-link">
|
||||
Updating Odoo
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ pathto('administration/odoo_sh/overview/introduction') }}" class="stretched-link">
|
||||
Introduction to Odoo.sh
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="row gx-lg-5">
|
||||
<div class="col-lg-6 py-5 border-bottom">
|
||||
<div class="o_cat_banner mb-4 p-lg-4">
|
||||
<i class="i-doc-admin"></i>
|
||||
</div>
|
||||
<h3>Administration</h3>
|
||||
<p>Easily setup your first Odoo installation. From downloads to day-to-day database administration, the dedicated tutorials have got you covered.</p>
|
||||
<h5 class="pt-3 text-uppercase fw_semibold">Top Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<a href=" {{ pathto('administration/install') }} " class="stretched-link">
|
||||
Installing Odoo
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ pathto('administration/deployment/deploy') }}" class="stretched-link">
|
||||
Deploying Odoo
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ pathto('administration/update') }}" class="stretched-link">
|
||||
Updating Odoo
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ pathto('administration/odoo_sh/overview/introduction') }}" class="stretched-link">
|
||||
Introduction to Odoo.sh
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-6 py-5 border-bottom">
|
||||
<div class="o_cat_banner mb-4 p-lg-4 o-bg-violet-light">
|
||||
<i class="i-doc-dev"></i>
|
||||
</div>
|
||||
<h3>Developer</h3>
|
||||
<p>Learn to develop in Odoo by reading the framework references and programmer tutorials.</p>
|
||||
<h5 class="pt-3 text-uppercase fw_semibold">Top Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<a href="{{ pathto('developer/reference/orm') }}" class="stretched-link">
|
||||
ORM API
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ pathto('developer/howtos/backend') }}" class="stretched-link">
|
||||
Building a Module
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ pathto('developer/webservices/odoo') }}" class="stretched-link">
|
||||
External API
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ pathto('developer/reference/cmdline') }}" class="stretched-link">
|
||||
Command-line interface
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<h2 class="text-center o_title_developer">Developer</h2>
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<a href="{{ pathto('developer/reference/orm') }}" class="stretched-link">
|
||||
ORM API
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ pathto('developer/howtos/backend') }}" class="stretched-link">
|
||||
Building a Module
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ pathto('developer/webservices/odoo') }}" class="stretched-link">
|
||||
External API
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ pathto('developer/reference/cmdline') }}" class="stretched-link">
|
||||
Command-line interface
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="row gx-lg-5">
|
||||
{# If changelog exists add class border-bottom #}
|
||||
<div class="col-lg-6 py-5">
|
||||
<div class="o_cat_banner mb-4 p-lg-4 o-bg-violet-light">
|
||||
<i class="i-doc-services"></i>
|
||||
</div>
|
||||
<h3>Services</h3>
|
||||
<p>Find out how to open a support ticket should you need to contact a Customer Service Representative.</p>
|
||||
<h5 class="pt-3 text-uppercase fw_semibold">Top Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<a href="{{ pathto('services/support/where_can_i_get_support') }}" class="stretched-link">
|
||||
Where to find help?
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ pathto('services/support/supported_versions') }}" class="stretched-link">
|
||||
Supported versions
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ pathto('legal') }}" class="stretched-link">
|
||||
Legal
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{# If changelog exists add class border-bottom #}
|
||||
<div class="col-lg-6 py-5">
|
||||
<div class="o_cat_banner mb-4 p-lg-4">
|
||||
<i class="i-doc-contribute"></i>
|
||||
</div>
|
||||
<h3>Contributing</h3>
|
||||
<p>You want to contribute to Odoo but don't know where to start? The tutorials and guidelines are there to help you help us make Odoo even better.</p>
|
||||
<h5 class="pt-3 text-uppercase fw_semibold">Top Links</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<a href="{{ pathto('contributing/documentation/introduction_guide') }}" class="stretched-link">
|
||||
Introduction guide
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-4">
|
||||
<h2 class="text-center o_title_services">Services</h2>
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<a href="{{ pathto('services/support/where_can_i_get_support') }}" class="stretched-link">
|
||||
Where to find help?
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ pathto('services/support/supported_versions') }}" class="stretched-link">
|
||||
Supported versions
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="{{ pathto('legal') }}" class="stretched-link">
|
||||
Legal
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-md-4">
|
||||
<h2 class="text-center o_title_advanced">Contributing</h2>
|
||||
<ul class="list-unstyled">
|
||||
<li>
|
||||
<a href="{{ pathto('contributing/documentation/introduction_guide') }}" class="stretched-link">
|
||||
Introduction guide
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{# If changelog exists import it here}
|
||||
{% include "layout_templates/changelog.html" %}
|
||||
{#}
|
||||
</div>
|
||||
BIN
extensions/odoo_theme/static/img/banner-applications.png
Normal file
BIN
extensions/odoo_theme/static/img/banner-applications.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
16
extensions/odoo_theme/static/img/bg-cat.svg
Normal file
16
extensions/odoo_theme/static/img/bg-cat.svg
Normal file
@ -0,0 +1,16 @@
|
||||
<svg width="408" height="146" viewBox="0 0 408 146" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="7.4931" y="8.40134" width="13" height="3" rx="1.5" transform="rotate(-38.7743 7.4931 8.40134)" fill="#A67B9A"/>
|
||||
<rect x="29.1213" y="86.0001" width="13" height="3" rx="1.5" transform="rotate(45 29.1213 86.0001)" fill="#A67B9A"/>
|
||||
<rect x="100" y="117" width="13" height="3" rx="1.5" transform="rotate(90 100 117)" fill="#A67B9A"/>
|
||||
<rect x="105" y="125" width="13" height="3" rx="1.5" transform="rotate(-180 105 125)" fill="#A67B9A"/>
|
||||
<rect x="123" y="0.00012207" width="13" height="3" rx="1.5" transform="rotate(90 123 0.00012207)" fill="#A67B9A"/>
|
||||
<rect x="128" y="8.00012" width="13" height="3" rx="1.5" transform="rotate(-180 128 8.00012)" fill="#A67B9A"/>
|
||||
<rect x="403" y="118" width="13" height="3" rx="1.5" transform="rotate(90 403 118)" fill="#A67B9A"/>
|
||||
<rect x="408" y="126" width="13" height="3" rx="1.5" transform="rotate(-180 408 126)" fill="#A67B9A"/>
|
||||
<rect x="386.314" y="58.1214" width="13" height="3" rx="1.5" transform="rotate(135 386.314 58.1214)" fill="#A67B9A"/>
|
||||
<circle cx="65" cy="45.0001" r="5" fill="#A67B9A"/>
|
||||
<circle cx="313" cy="21.0001" r="5" fill="#A67B9A"/>
|
||||
<circle cx="5" cy="141" r="4" stroke="#A67B9A" stroke-width="2"/>
|
||||
<circle cx="337" cy="97.0001" r="4" stroke="#A67B9A" stroke-width="2"/>
|
||||
<circle cx="396" cy="10.0001" r="4" stroke="#A67B9A" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@ -68,7 +68,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin o-gradient($deg: 99deg , $startColor: $o-violet-dark, $endColor: $o-violet-darker, $startOffset: 10%, $endOffset: 90%){
|
||||
@mixin o-gradient($deg: 99deg , $startColor: $o-violet, $endColor: #62495B, $startOffset: 10%, $endOffset: 90%){
|
||||
background: mix($startColor, $endColor);
|
||||
background: -webkit-linear-gradient($deg, $startColor $startOffset, $endColor $endOffset);
|
||||
background: -moz-linear-gradient($deg, $startColor $startOffset, $endColor $endOffset);
|
||||
|
||||
@ -404,54 +404,63 @@ header.o_main_header{
|
||||
// Homepage
|
||||
|
||||
&.index {
|
||||
.row:first-of-type {
|
||||
margin: -3rem -3rem 3rem;
|
||||
padding: 0 3rem;
|
||||
.o_content_fw_banner {
|
||||
margin: -3rem -0.75rem 3rem;
|
||||
padding: 2rem 1rem;
|
||||
align-items: center;
|
||||
background: url('/_static/img/geometric_gradient.png');
|
||||
background-size: cover;
|
||||
@include o-gradient();
|
||||
@include media-breakpoint-up(lg) {
|
||||
margin: -3rem -3rem 3rem;
|
||||
padding: 2rem 3rem;
|
||||
}
|
||||
.btn-primary {
|
||||
background-color: #00A09D;
|
||||
border-color: #00A09D;
|
||||
}
|
||||
}
|
||||
|
||||
h2[class*="o_title_"] {
|
||||
color: $o-violet-dark;
|
||||
font-weight: $fw_bold;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
&:before {
|
||||
@include inline-icomoon($i-o-services , 0 1rem 0 0);
|
||||
display: block;
|
||||
@include font-size(50px);
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
&.o_title_start:before {
|
||||
content: '#{$i-o-services}';
|
||||
}
|
||||
&.o_title_install:before {
|
||||
content: '#{$i-install}';
|
||||
}
|
||||
&.o_title_basic:before {
|
||||
content: '#{$i-basics}';
|
||||
}
|
||||
&.o_title_tutorial:before {
|
||||
content: '#{$i-elearning_1}';
|
||||
}
|
||||
&.o_title_advanced:before {
|
||||
content: '#{$i-advanced}';
|
||||
}
|
||||
p, h5 {
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 1rem;
|
||||
> li {
|
||||
position: relative;
|
||||
padding-bottom: 1rem;
|
||||
a {
|
||||
display: block;
|
||||
font-weight: $fw_bold;
|
||||
padding-bottom: .5rem;
|
||||
padding-bottom: .5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:before {
|
||||
@include o-inline-icon($i-article, 0 .2rem 0 0);
|
||||
color: $gray-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
.o_cat_banner {
|
||||
background-color: $o-violet;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 90%;
|
||||
background-position: center;
|
||||
i {
|
||||
font-size: 100px;
|
||||
color: $white;
|
||||
}
|
||||
&.o-bg-violet-light {
|
||||
background-color: lighten($o-violet, 20%);
|
||||
}
|
||||
&:not(.shadow){
|
||||
background-image: url('/_static/img/bg-cat.svg');
|
||||
}
|
||||
&.shadow {
|
||||
box-shadow: 0px 2px 25px rgba(19, 28, 40, .08) !important;
|
||||
}
|
||||
}
|
||||
.o_changelog {
|
||||
.row:last-of-type > .border-bottom {
|
||||
border: none !important;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user