pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[REF] website: snippets layout/style improvements

Browse Source 
* s_banner
    - Remove text-container hardcoded style (user will be able to use the
        new transparent color palette instead)
    - Improve indicators visibility on both dark or light bg
    - Cursor: pointer for navigation buttons
* s_cover
* s_quote: remove the whole snippet
* s_three_columns
* s_reference
    - Remove Quotes
    - Add new logo demo images
* s_button: rename from "Button" to "Call to Action" + some design
* s_feature_grid
This commit is contained in:
stefanorigano
2016-08-31 16:37:20 +02:00
committed by qsm-odoo
parent 8c035a7a41
commit 0cdfbc0fbe
9 changed files with 101 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/data/website_data.xml
+49 -1
View File
@@ -332,7 +332,7 @@
<field name="name">Cover Snippet - Default Image</field>
<field name="datas_fname">s_cover_default_image.jpg</field>
<field name="type">url</field>
<field name="url">/web/image/website.s_background_image_01</field>
<field name="url">/web/image/website.s_background_image_03</field>
</record>
<record id="website.s_parallax_slider_default_image" model="ir.attachment">
@@ -383,5 +383,53 @@
<field name="url">/website/static/src/img/snippets_demo/s_big_picture.png</field>
</record>
<record id="website.s_reference_demo_image_1" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">Reference Snippet - Demo Image 1</field>
<field name="datas_fname">s_reference_demo_image_1.png</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_references_1.png</field>
</record>
<record id="website.s_reference_demo_image_2" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">Reference Snippet - Demo Image 2</field>
<field name="datas_fname">s_reference_demo_image_2.png</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_references_2.png</field>
</record>
<record id="website.s_reference_demo_image_3" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">Reference Snippet - Demo Image 3</field>
<field name="datas_fname">s_reference_demo_image_3.png</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_references_3.png</field>
</record>
<record id="website.s_reference_demo_image_4" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">Reference Snippet - Demo Image 4</field>
<field name="datas_fname">s_reference_demo_image_4.png</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_references_4.png</field>
</record>
<record id="website.s_reference_demo_image_5" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">Reference Snippet - Demo Image 5</field>
<field name="datas_fname">s_reference_demo_image_5.png</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_references_5.png</field>
</record>
<record id="website.s_reference_demo_image_6" model="ir.attachment">
<field name="public" eval="True"/>
<field name="name">Reference Snippet - Demo Image 6</field>
<field name="datas_fname">s_reference_demo_image_6.png</field>
<field name="type">url</field>
<field name="url">/website/static/src/img/snippets_demo/s_references_6.png</field>
</record>
</data>
</odoo>
addons/website/static/src/img/snippets_demo/s_references_1.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

addons/website/static/src/img/snippets_demo/s_references_2.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

addons/website/static/src/img/snippets_demo/s_references_3.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

addons/website/static/src/img/snippets_demo/s_references_4.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

addons/website/static/src/img/snippets_demo/s_references_5.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

addons/website/static/src/img/snippets_demo/s_references_6.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

addons/website/static/src/less/website.snippets.less
+7 -7
View File
@@ -375,19 +375,19 @@ div.carousel .container {
// Parallax Theme
div.carousel {
.carousel-indicators {
li { border: 1px solid grey; }
.active { background-color: grey; }
.carousel-indicators li {
box-shadow: 0 0 0 1px grey;
&:hover:not(.active) {
background-color: @color-white-50;
}
}
span.carousel-img img,
div.carousel-content {
max-height: 95%;
padding: 10px;
}
div.carousel-content {
background-color: black;
color: white;
background: rgba(0, 0, 0, 0.3);
.carousel-control {
cursor: pointer;
}
}
addons/website/views/snippets.xml
+45 -78
View File
@@ -1,12 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="s_cover" name="Cover">
<section class="s_text_block_image_fw oe_img_bg" style="background-image: url(/web/image/website.s_cover_default_image); background-position: 50% 50%">
<section class="s_text_block_image_fw oe_img_bg oe_custom_bg" style="background-image: url(/web/image/website.s_cover_default_image); background-position: 50% 100%">
<div class="container">
<div class="row">
<div class="col-md-6 mt64 mb64 bg-white">
<h2>Headline</h2>
<h4 class="text-primary">With a great subtitle</h4>
<div class="col-md-6 mt64 mb64 bg-black-25">
<h2 style="font-size:62px">Headline</h2>
<h4 class="text-muted">With a great subtitle</h4>
<p>Write one or two paragraphs describing your product, services or a specific feature. To be successful your content needs to be useful to your readers.</p>
</div>
</div>
@@ -21,13 +21,13 @@
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
</ol>
<div class="carousel-inner">
<div class="item oe_img_bg active" style="background-image: url(/web/image/website.s_background_image_05); background-position: 50% 50%">
<div class="item oe_img_bg active bg-alpha">
<div class="container">
<div class="row content">
<div class="carousel-content col-md-4 col-md-offset-1 mt96 mb96">
<div class="carousel-content col-md-4 col-md-offset-1 mt128 mb96">
<h2>Your Banner Title</h2>
<h4>Click to customize this text</h4>
<p><a href="/page/website.contactus" class="btn btn-success btn-large">Contact us</a></p>
<p><a href="/page/website.contactus" class="btn btn-warning btn-large">Contact us</a></p>
</div>
<div class="carousel-img col-md-6 col-md-offset-1 hidden-sm hidden-xs mt48">
<img class="img-responsive" src="/web/image/website.s_banner_default_image" alt="Banner Odoo Image"/>
@@ -195,8 +195,8 @@
<section class="s_three_columns">
<div class="container">
<div class="row">
<div class="col-md-4 mt16">
<img class="img img-rounded img-responsive" src="/web/image/website.library_image_11" alt="Odoo - Sample 1 for three columns"/>
<div class="col-md-4 mt32 mb48">
<img class="img img-responsive" src="/web/image/website.library_image_11" alt="Odoo - Sample 1 for three columns"/>
<h4 class="mt16">Feature One</h4>
<p>
Adapt these three columns to fit you design need.
@@ -204,8 +204,8 @@
column and use the top icons to perform your action.
</p>
</div>
<div class="col-md-4 mt16">
<img class="img img-rounded img-responsive" src="/web/image/website.library_image_13" alt="Odoo - Sample 2 for three columns"/>
<div class="col-md-4 mt32 mb48">
<img class="img img-responsive" src="/web/image/website.library_image_13" alt="Odoo - Sample 2 for three columns"/>
<h4 class="mt16">Feature Two</h4>
<p>
To add a fourth column, reduce the size of these
@@ -214,8 +214,8 @@
one as a copy.
</p>
</div>
<div class="col-md-4 mt16">
<img class="img img-rounded img-responsive" src="/web/image/website.library_image_07" alt="Odoo - Sample 3 for three columns"/>
<div class="col-md-4 mt32 mb48">
<img class="img img-responsive" src="/web/image/website.library_image_07" alt="Odoo - Sample 3 for three columns"/>
<h4 class="mt16">Feature Three</h4>
<p>
Delete the above image or replace it with a picture
@@ -237,16 +237,6 @@
</div>
</template>
<template id="s_quote" name="Quote">
<blockquote class="s_quote">
<p>
Write a quote here from one of your customers. Quotes are a
great way to build confidence in your products or services.
</p>
<p><small>Author of this quote</small></p>
</blockquote>
</template>
<template id="s_panel" name="Panel">
<div class="panel panel-default o_panel s_panel">
<div class="panel-heading ">
@@ -373,11 +363,11 @@
</section>
</template>
<template id="s_button" name="Button">
<section class="jumbotron s_button">
<template id="s_button" name="Call to Action">
<section class="jumbotron s_button bg-gray-lighter">
<div class="container">
<div class="row">
<div class="col-md-9 text-muted">
<div class="col-md-9">
<p class="mb0">
<strong>50,000+ companies run Odoo to grow their businesses.</strong>
</p><p class="mb0">
@@ -386,8 +376,8 @@
</div>
<div class="col-md-3">
<a href="/page/website.contactus" class="btn btn-primary btn-lg pull-right mt8">
<i class="fa fa-arrow-right"></i>
Contact Us Now
<i class="fa fa-chevron-right"></i>
</a>
</div>
</div>
@@ -460,47 +450,25 @@
<template id="s_references" name="References">
<section class="s_references">
<div class="container">
<h1 class="text-center">Our References</h1>
<h3 class="text-center text-muted">More than 500 happy customers.</h3>
<div class="row">
<div class="col-md-4 col-xs-12 col-md-offset-1 mt16 mb32">
<blockquote>
<p>
Write a quote here from one of your customers. Quotes are a
great way to build confidence in your products or services.
</p>
<small>Author of this quote</small>
</blockquote>
</div>
<div class="col-md-4 col-xs-12 col-md-offset-2 mt16 mb32">
<blockquote>
<p>
Odoo provides essential platform for our project management.
Things are better organized and more visible with it.
</p>
<small>John Doe, CEO</small>
</blockquote>
</div>
</div>
<h2 class="text-center">Our References</h2>
<div class="row">
<div class="col-md-2 col-sm-4 col-xs-6">
<img src="/logo.png" class="img img-responsive img-thumbnail" alt="Logo"/>
<img src="/web/image/website.s_reference_demo_image_1" class="img img-responsive " alt="Demo Logo"/>
</div>
<div class="col-md-2 col-sm-4 col-xs-6">
<img src="/logo.png" class="img img-responsive img-thumbnail" alt="Logo"/>
<img src="/web/image/website.s_reference_demo_image_2" class="img img-responsive " alt="Demo Logo"/>
</div>
<div class="col-md-2 col-sm-4 col-xs-6">
<img src="/logo.png" class="img img-responsive img-thumbnail" alt="Logo"/>
<img src="/web/image/website.s_reference_demo_image_3" class="img img-responsive " alt="Demo Logo"/>
</div>
<div class="col-md-2 col-sm-4 col-xs-6">
<img src="/logo.png" class="img img-responsive img-thumbnail" alt="Logo"/>
<img src="/web/image/website.s_reference_demo_image_4" class="img img-responsive " alt="Demo Logo"/>
</div>
<div class="col-md-2 col-sm-4 col-xs-6">
<img src="/logo.png" class="img img-responsive img-thumbnail" alt="Logo"/>
<img src="/web/image/website.s_reference_demo_image_5" class="img img-responsive " alt="Demo Logo"/>
</div>
<div class="col-md-2 col-sm-4 col-xs-6">
<img src="/logo.png" class="img img-responsive img-thumbnail" alt="Logo"/>
<img src="/web/image/website.s_reference_demo_image_6" class="img img-responsive " alt="Demo Logo"/>
</div>
</div>
</div>
@@ -511,45 +479,45 @@
<section class="s_feature_grid">
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="col-md-5 col-md-offset-1">
<div class="col-md-12 mt16 mb16">
<h2>List of Features</h2>
<h4 class="text-muted">Add a great slogan</h4>
<h3 class="mb0">List of Features</h3>
<h5 class="text-muted mb16">Add a great slogan</h5>
</div>
<div class="col-md-12">
<span style="min-width: 45px" class="fa fa-3x fa-comment pull-left mb16"></span>
<h3 class="mt0 mb0">Change Icons</h3>
<p>Click on the icon to adapt it to your feature</p>
<span style="min-width: 45px" class="fa fa-2x fa-comment pull-left mb16"></span>
<h4 class="mt0 mb0">Change Icons</h4>
<p>Click on the icon to adapt it to your feature</p><br/>
</div>
<div class="col-md-12">
<span style="min-width: 45px" class="fa fa-3x fa-columns pull-left mb16"></span>
<h3 class="mt0 mb0">Duplicate</h3>
<p>Duplicate blocks to add more features.</p>
<span style="min-width: 45px" class="fa fa-2x fa-columns pull-left mb16"></span>
<h4 class="mt0 mb0">Duplicate</h4>
<p>Duplicate blocks to add more features.</p><br/>
</div>
<div class="col-md-12">
<span style="min-width: 45px" class="fa fa-3x fa-user pull-left mb16"></span>
<h3 class="mt0 mb0">Delete Blocks</h3>
<p class="text-muted">Select and delete blocks to remove some features.</p>
<span style="min-width: 45px" class="fa fa-2x fa-user pull-left mb16"></span>
<h4 class="mt0 mb0">Delete Blocks</h4>
<p>Select and delete blocks to remove some features.</p><br/>
</div>
</div>
<div class="col-md-5 col-md-offset-2">
<div class="col-md-5">
<div class="col-md-12 mt16 mb16">
<h2>Second List</h2>
<h4 class="text-muted">Add a great slogan</h4>
<h3 class="mb0">Second List</h3>
<h5 class="text-muted mb16">Add a great slogan</h5>
</div>
<div class="col-md-12">
<span style="min-width: 45px" class="fa fa-3x fa-magic pull-left mb16"></span>
<h3 class="mt0 mb0">Great Value</h3>
<span style="min-width: 45px" class="fa fa-2x fa-magic pull-left mb16"></span>
<h4 class="mt0 mb0">Great Value</h4>
<p>Tell features the visitor would like to know, not what you'd like to say.</p>
</div>
<div class="col-md-12">
<span style="min-width: 45px" class="fa fa-3x fa-bolt pull-left mb16"></span>
<h3 class="mt0 mb0">Change Background</h3>
<span style="min-width: 45px" class="fa fa-2x fa-bolt pull-left mb16"></span>
<h4 class="mt0 mb0">Change Background</h4>
<p>From the main container, you can change the background to highlight features.</p>
</div>
<div class="col-md-12">
<span style="min-width: 45px" class="fa fa-3x fa-picture-o pull-left mb16"></span>
<h3 class="mt0 mb0">Sample images</h3>
<span style="min-width: 45px" class="fa fa-2x fa-picture-o pull-left mb16"></span>
<h4 class="mt0 mb0">Sample images</h4>
<p>All these icons are licensed under creative commons so that you can use them.</p>
</div>
</div>
@@ -649,7 +617,6 @@
</div>
<div class="o_panel_body">
<t t-snippet="website.s_well" t-thumbnail="/website/static/src/img/blocks/block_well.png"/>
<t t-snippet="website.s_quote" t-thumbnail="/website/static/src/img/blocks/block_quote.png"/>
<t t-snippet="website.s_panel" t-thumbnail="/website/static/src/img/blocks/block_panel.png"/>
<t t-snippet="website.s_image_floating" t-thumbnail="/website/static/src/img/blocks/block_text_image.png"/>
<t t-snippet="website.s_share" t-thumbnail="/website/static/src/img/blocks/block_button.png"/>