[IMP] website: improve snippets' design
- Feature grid snippet: enable copy and move of inner containers
- Accordion snippet:
- add the ability to change box headers & background colors
- improve the text contents
- Comparison snippet:
- add ability to change header colors
- prevent unwanted text color changes
This commit is contained in:
Dharmraj Jhala
@@ -53,9 +53,33 @@ table.table_desc tr td {
|
||||
}
|
||||
|
||||
// Other snippet styles
|
||||
// To prevent paragraph text coming below the feature grid icon / image
|
||||
.s_feature_grid p {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.s_comparisons .panel .list-group-item:not(.active) {
|
||||
color: #666;
|
||||
}
|
||||
.s_comparisons {
|
||||
.panel small {
|
||||
color: inherit;
|
||||
}
|
||||
.text-muted {
|
||||
color: @text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.s_faq_collapse .container .panel {
|
||||
background-color: inherit;
|
||||
border : 1px solid rgba(0, 0, 0, 0.15);
|
||||
.panel-body {
|
||||
border-top: none;
|
||||
border-bottom-left-radius: (@panel-border-radius - 1);
|
||||
border-bottom-right-radius: (@panel-border-radius - 1);
|
||||
}
|
||||
}
|
||||
|
||||
.s_references .img-thumbnail {
|
||||
border: none;
|
||||
}
|
||||
|
||||
@@ -291,14 +291,14 @@
|
||||
<h2 class="text-center">Our Offers</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-xs-12">
|
||||
<div class="panel panel-info">
|
||||
<div class="panel-heading text-center">
|
||||
<div class="panel bg-gray-light">
|
||||
<div class="panel-heading text-center" style="background-color: rgba(255, 255, 255, 0.1)">
|
||||
<h3 style="margin: 0">Beginner</h3>
|
||||
<p style="margin: 0" class="text-muted">
|
||||
<p style="margin: 0">
|
||||
Starter package
|
||||
</p>
|
||||
</div>
|
||||
<div class="panel-body text-center text-muted" style="background-color: rgba(0,0,0,0.1)">
|
||||
<div class="panel-body text-center">
|
||||
<h3 style="margin: 0"><span>$</span><b style="font-size: 60px">35</b><small>.00</small></h3>
|
||||
<div>user / month (billed annually)</div>
|
||||
</div>
|
||||
@@ -317,12 +317,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-xs-12">
|
||||
<div class="panel panel-primary">
|
||||
<div class="panel-heading text-center">
|
||||
<div class="panel bg-beta">
|
||||
<div class="panel-heading text-center" style="background-color: rgba(255, 255, 255, 0.1)">
|
||||
<h3 style="margin: 0">Professional</h3>
|
||||
<p style="margin: 0">Enterprise package</p>
|
||||
</div>
|
||||
<div class="panel-body text-center text-muted" style="background-color: rgba(0,0,0,0.1)">
|
||||
<div class="panel-body text-center">
|
||||
<h3 style="margin: 0"><span>$</span><b style="font-size: 60px">65</b><small>.00</small></h3>
|
||||
<div>user / month (billed annually)</div>
|
||||
</div>
|
||||
@@ -339,12 +339,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-xs-12">
|
||||
<div class="panel panel-info">
|
||||
<div class="panel-heading text-center">
|
||||
<div class="panel bg-gray-light">
|
||||
<div class="panel-heading text-center" style="background-color: rgba(255, 255, 255, 0.1)">
|
||||
<h3 style="margin: 0">Expert</h3>
|
||||
<p style="margin: 0" class="text-muted">Ultimate package</p>
|
||||
<p style="margin: 0">Ultimate package</p>
|
||||
</div>
|
||||
<div class="panel-body text-center text-muted" style="background-color: rgba(0,0,0,0.1)">
|
||||
<div class="panel-body text-center">
|
||||
<h3 style="margin: 0"><span>$</span><b style="font-size: 60px">125</b><small>.00</small></h3>
|
||||
<div>user / month (billed annually)</div>
|
||||
</div>
|
||||
@@ -462,57 +462,59 @@
|
||||
<template id="s_faq_collapse" name="Accordion">
|
||||
<section class="s_faq_collapse">
|
||||
<div class="container">
|
||||
<h2 class="page-header">Point of Sale Questions <small>v7</small></h2>
|
||||
<h2 class="page-header"> General Terms and Conditions / Service Policies </h2>
|
||||
<div class="panel-group" role="tablist">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" role="tab" data-toggle="collapse">
|
||||
<div class="panel">
|
||||
<div class="panel-heading bg-gray-lighter" role="tab" data-toggle="collapse">
|
||||
<h4 class="panel-title">
|
||||
Which hardware does Odoo POS support?
|
||||
Terms of service
|
||||
</h4>
|
||||
</div>
|
||||
<div class="panel-collapse collapse" role="tabpanel">
|
||||
<div class="panel-body">
|
||||
<div class="panel-body bg-white-50">
|
||||
<p>
|
||||
Odoo's POS is a web application that can run on any device that
|
||||
can display websites with little to no setup required.
|
||||
These terms of service ("Terms", "Agreement") are an agreement between the website
|
||||
("Website operator", "us", "we" or "our") and you ("User", "you" or "your").
|
||||
</p>
|
||||
<p>
|
||||
The Point of Sale works perfectly on any kind of touch enabled
|
||||
device, whether it's multi-touch tablets like an iPad or
|
||||
keyboardless resistive touchscreen terminals.
|
||||
This Agreement sets forth the general terms and conditions of your use of this website
|
||||
and any of its products or services (collectively, "Website" or "Services").
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" role="tab" data-toggle="collapse">
|
||||
<div class="panel">
|
||||
<div class="panel-heading bg-gray-lighter" role="tab" data-toggle="collapse">
|
||||
<h4 class="panel-title">
|
||||
Does it works offline?
|
||||
Links to other websites
|
||||
</h4>
|
||||
</div>
|
||||
<div class="panel-collapse collapse" role="tabpanel">
|
||||
<div class="panel-body">
|
||||
<div class="panel-body bg-white-50">
|
||||
<p>
|
||||
Deploy new stores with just an internet connection: no
|
||||
installation, no specific hardware required. It works with any
|
||||
iPad, Tablet PC, laptop or industrial POS machine.
|
||||
Although this Website may be linked to other websites, we are not, directly or
|
||||
indirectly, implying any approval, association, sponsorship, endorsement, or
|
||||
affiliation with any linked website, unless specifically stated herein.
|
||||
</p>
|
||||
<p>
|
||||
While an internet connection is required to start the Point of
|
||||
Sale, it will stay operational even after a complete disconnection.
|
||||
You should carefully review the legal statements and other conditions of use of
|
||||
any website which you access through a link from this Website. Your linking to
|
||||
any other off-site pages or other websites is at your own risk.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading" role="tab" data-toggle="collapse">
|
||||
<div class="panel">
|
||||
<div class="panel-heading bg-gray-lighter" role="tab" data-toggle="collapse">
|
||||
<h4 class="panel-title">
|
||||
Can I use it to manage projects based on agile methodologies?
|
||||
Use Of Cookies
|
||||
</h4>
|
||||
</div>
|
||||
<div class="panel-collapse collapse" role="tabpanel">
|
||||
<div class="panel-body">
|
||||
<p>Yes</p>
|
||||
<div class="panel-body bg-white-50">
|
||||
<p>Website may use cookies to personalize and facilitate maximum navigation of the
|
||||
User by this site. The User may configure his / her browser to notify and
|
||||
reject the installation of the cookies sent by us.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -553,45 +555,49 @@
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-5 col-md-offset-1">
|
||||
<div class="col-md-12 mt16 mb16">
|
||||
<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-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-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-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 class="row">
|
||||
<div class="col-md-12 mt16 mb16">
|
||||
<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-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-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-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>
|
||||
<div class="col-md-5">
|
||||
<div class="col-md-12 mt16 mb16">
|
||||
<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-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-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-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 class="row">
|
||||
<div class="col-md-12 mt16 mb16">
|
||||
<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-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-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-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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -759,7 +765,7 @@
|
||||
</div>
|
||||
|
||||
<div data-js="colorpicker"
|
||||
data-selector="section:not(.parallax), :not(.o_gallery > .container) > .carousel">
|
||||
data-selector="section:not(.parallax), :not(.o_gallery > .container) > .carousel, .s_comparisons .panel, .s_faq_collapse .panel-body, .s_faq_collapse .panel-heading">
|
||||
<li class="dropdown-submenu">
|
||||
<a tabindex="-1" href="#"><i class="fa fa-eyedropper"/>Background Color</a>
|
||||
<ul class="dropdown-menu">
|
||||
|
||||
Reference in New Issue
Block a user