[REF] website: move s_rating snippet to dedicated files
This commit is contained in:
qsm-odoo
@@ -40,6 +40,7 @@
|
||||
'views/snippets/s_alert.xml',
|
||||
'views/snippets/s_card.xml',
|
||||
'views/snippets/s_share.xml',
|
||||
'views/snippets/s_rating.xml',
|
||||
'views/website_views.xml',
|
||||
'views/website_visitor_views.xml',
|
||||
'views/res_config_settings_views.xml',
|
||||
|
||||
@@ -944,62 +944,6 @@ table.table_desc tr td {
|
||||
}
|
||||
|
||||
|
||||
// Rating
|
||||
.s_rating {
|
||||
$star: "\f005";
|
||||
$star-o: "\f006";
|
||||
$circle: "\f111";
|
||||
$circle-o: "\f10c";
|
||||
$heart: "\f004";
|
||||
$heart-o: "\f08a";
|
||||
@mixin s_rating_generate_icons($off, $on) {
|
||||
.fa:before {
|
||||
content: $off;
|
||||
}
|
||||
@for $counter from 5 to 0 {
|
||||
&.s_rating_#{$counter} {
|
||||
.fa:nth-of-type(-n+#{$counter}):before {
|
||||
content: $on;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .s_rating_stars { @include s_rating_generate_icons($star-o, $star); }
|
||||
> .s_rating_squares { @include s_rating_generate_icons($circle-o, $circle); }
|
||||
> .s_rating_hearts { @include s_rating_generate_icons($heart-o, $heart); }
|
||||
> .s_rating_bar {
|
||||
.fa {
|
||||
display: none;
|
||||
}
|
||||
.s_rating_bar {
|
||||
display: flex;
|
||||
height: $progress-height;
|
||||
background-color: $gray-300;
|
||||
&:before {
|
||||
content: "";
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@include transition($progress-bar-transition);
|
||||
@include gradient-striped();
|
||||
background-size: $progress-height $progress-height;
|
||||
background-color: theme-color('primary');
|
||||
animation: progress-bar-stripes $progress-bar-animation-timing;
|
||||
}
|
||||
}
|
||||
@for $counter from 5 to 0 {
|
||||
&.s_rating_#{$counter} {
|
||||
.s_rating_bar:before {
|
||||
width: percentage($counter/5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .s_rating_1x { .fa { font-size: 1em; }; }
|
||||
> .s_rating_2x { .fa { font-size: 2em; }; }
|
||||
> .s_rating_3x { .fa { font-size: 3em; }; }
|
||||
}
|
||||
|
||||
//
|
||||
// Layout
|
||||
//
|
||||
@@ -0,0 +1,55 @@
|
||||
|
||||
.s_rating {
|
||||
$star: "\f005";
|
||||
$star-o: "\f006";
|
||||
$circle: "\f111";
|
||||
$circle-o: "\f10c";
|
||||
$heart: "\f004";
|
||||
$heart-o: "\f08a";
|
||||
@mixin s_rating_generate_icons($off, $on) {
|
||||
.fa:before {
|
||||
content: $off;
|
||||
}
|
||||
@for $counter from 5 to 0 {
|
||||
&.s_rating_#{$counter} {
|
||||
.fa:nth-of-type(-n+#{$counter}):before {
|
||||
content: $on;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .s_rating_stars { @include s_rating_generate_icons($star-o, $star); }
|
||||
> .s_rating_squares { @include s_rating_generate_icons($circle-o, $circle); }
|
||||
> .s_rating_hearts { @include s_rating_generate_icons($heart-o, $heart); }
|
||||
> .s_rating_bar {
|
||||
.fa {
|
||||
display: none;
|
||||
}
|
||||
.s_rating_bar {
|
||||
display: flex;
|
||||
height: $progress-height;
|
||||
background-color: $gray-300;
|
||||
&:before {
|
||||
content: "";
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@include transition($progress-bar-transition);
|
||||
@include gradient-striped();
|
||||
background-size: $progress-height $progress-height;
|
||||
background-color: theme-color('primary');
|
||||
animation: progress-bar-stripes $progress-bar-animation-timing;
|
||||
}
|
||||
}
|
||||
@for $counter from 5 to 0 {
|
||||
&.s_rating_#{$counter} {
|
||||
.s_rating_bar:before {
|
||||
width: percentage($counter/5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .s_rating_1x { .fa { font-size: 1em; }; }
|
||||
> .s_rating_2x { .fa { font-size: 2em; }; }
|
||||
> .s_rating_3x { .fa { font-size: 3em; }; }
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<odoo>
|
||||
|
||||
<template id="s_rating" name="Rating">
|
||||
<div class="s_rating row">
|
||||
<div class="col-lg-12 s_rating_stars s_rating_3 s_rating_1x pt16 pb16">
|
||||
<h4>Quality</h4>
|
||||
<i class="fa fa-1x"/>
|
||||
<i class="fa fa-1x"/>
|
||||
<i class="fa fa-1x"/>
|
||||
<i class="fa fa-1x"/>
|
||||
<i class="fa fa-1x"/>
|
||||
<div class="s_rating_bar"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="s_rating_options" inherit_id="website.snippet_options">
|
||||
<xpath expr="." position="inside">
|
||||
<div data-selector=".s_rating > div">
|
||||
<we-select string="Icon">
|
||||
<we-button data-select-class="s_rating_stars"><i class="fa fa-fw fa-star"/> Stars</we-button>
|
||||
<we-button data-select-class="s_rating_squares"><i class="fa fa-fw fa-square"/> Squares</we-button>
|
||||
<we-button data-select-class="s_rating_hearts"><i class="fa fa-fw fa-heart"/> Hearts</we-button>
|
||||
<we-button data-select-class="s_rating_bar"><i class="fa fa-fw fa-tasks"/> Progress Bar</we-button>
|
||||
</we-select>
|
||||
<we-select string="Value">
|
||||
<we-button data-select-class="">0</we-button>
|
||||
<we-button data-select-class="s_rating_1">1/5</we-button>
|
||||
<we-button data-select-class="s_rating_2">2/5</we-button>
|
||||
<we-button data-select-class="s_rating_3">3/5</we-button>
|
||||
<we-button data-select-class="s_rating_4">4/5</we-button>
|
||||
<we-button data-select-class="s_rating_5">5/5</we-button>
|
||||
</we-select>
|
||||
<we-select string="Size">
|
||||
<we-button data-select-class="s_rating_1x">Small</we-button>
|
||||
<we-button data-select-class="s_rating_2x">Medium</we-button>
|
||||
<we-button data-select-class="s_rating_3x">Big</we-button>
|
||||
</we-select>
|
||||
</div>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="assets_snippet_s_rating_css_000" inherit_id="website.assets_frontend">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/snippets/s_rating/000.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
</odoo>
|
||||
@@ -1,20 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<odoo>
|
||||
|
||||
<template id="s_rating" name="Rating">
|
||||
<div class="s_rating row">
|
||||
<div class="col-lg-12 s_rating_stars s_rating_3 s_rating_1x pt16 pb16">
|
||||
<h4>Quality</h4>
|
||||
<i class="fa fa-1x"/>
|
||||
<i class="fa fa-1x"/>
|
||||
<i class="fa fa-1x"/>
|
||||
<i class="fa fa-1x"/>
|
||||
<i class="fa fa-1x"/>
|
||||
<div class="s_rating_bar"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template id="s_btn" name="Button">
|
||||
<div class="s_btn text-center pt16 pb16" data-name="Buttons">
|
||||
<a href="#" class="btn btn-primary">Read more</a>
|
||||
@@ -749,29 +735,6 @@
|
||||
</we-select>
|
||||
</div>
|
||||
|
||||
<!-- STYLES | .s_rating -->
|
||||
<div data-selector=".s_rating > div">
|
||||
<we-select string="Icon">
|
||||
<we-button data-select-class="s_rating_stars"><i class="fa fa-fw fa-star"/> Stars</we-button>
|
||||
<we-button data-select-class="s_rating_squares"><i class="fa fa-fw fa-square"/> Squares</we-button>
|
||||
<we-button data-select-class="s_rating_hearts"><i class="fa fa-fw fa-heart"/> Hearts</we-button>
|
||||
<we-button data-select-class="s_rating_bar"><i class="fa fa-fw fa-tasks"/> Progress Bar</we-button>
|
||||
</we-select>
|
||||
<we-select string="Value">
|
||||
<we-button data-select-class="">0</we-button>
|
||||
<we-button data-select-class="s_rating_1">1/5</we-button>
|
||||
<we-button data-select-class="s_rating_2">2/5</we-button>
|
||||
<we-button data-select-class="s_rating_3">3/5</we-button>
|
||||
<we-button data-select-class="s_rating_4">4/5</we-button>
|
||||
<we-button data-select-class="s_rating_5">5/5</we-button>
|
||||
</we-select>
|
||||
<we-select string="Size">
|
||||
<we-button data-select-class="s_rating_1x">Small</we-button>
|
||||
<we-button data-select-class="s_rating_2x">Medium</we-button>
|
||||
<we-button data-select-class="s_rating_3x">Big</we-button>
|
||||
</we-select>
|
||||
</div>
|
||||
|
||||
<!-- STYLES | .s_hr -->
|
||||
<div data-selector=".s_hr" data-target="hr">
|
||||
<we-select string="Thickness">
|
||||
Reference in New Issue
Block a user