Initial Upload
This commit is contained in:
Matt Batchelder
753
modules/templates/stock-static.xml
Normal file
753
modules/templates/stock-static.xml
Normal file
@@ -0,0 +1,753 @@
|
||||
<!--
|
||||
~ Copyright (C) 2024 Xibo Signage Ltd
|
||||
~
|
||||
~ Xibo - Digital Signage - https://xibosignage.com
|
||||
~
|
||||
~ This file is part of Xibo.
|
||||
~
|
||||
~ Xibo is free software: you can redistribute it and/or modify
|
||||
~ it under the terms of the GNU Affero General Public License as published by
|
||||
~ the Free Software Foundation, either version 3 of the License, or
|
||||
~ any later version.
|
||||
~
|
||||
~ Xibo is distributed in the hope that it will be useful,
|
||||
~ but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
~ GNU Affero General Public License for more details.
|
||||
~
|
||||
~ You should have received a copy of the GNU Affero General Public License
|
||||
~ along with Xibo. If not, see <http://www.gnu.org/licenses/>.
|
||||
-->
|
||||
<templates>
|
||||
<template>
|
||||
<id>stocks_custom_html</id>
|
||||
<type>static</type>
|
||||
<dataType>stock</dataType>
|
||||
<showIn>none</showIn>
|
||||
<title>Stocks Custom HTML</title>
|
||||
<properties>
|
||||
<property id="effect" type="effectSelector" variant="showPaged">
|
||||
<title>Effect</title>
|
||||
<helpText>Please select the effect that will be used to transition between items.</helpText>
|
||||
<default>noTransition</default>
|
||||
</property>
|
||||
<property id="speed" type="number">
|
||||
<title>Speed</title>
|
||||
<helpText>The transition speed of the selected effect in milliseconds (normal = 1000).</helpText>
|
||||
</property>
|
||||
<property id="backgroundColor" type="color">
|
||||
<title>Background Colour</title>
|
||||
<helpText>The selected effect works best with a background colour. Optionally add one here.</helpText>
|
||||
<default></default>
|
||||
</property>
|
||||
<property id="dateFormat" type="text" variant="dateFormat">
|
||||
<title>Date Format</title>
|
||||
<helpText>The format to apply to all dates returned by the Widget.</helpText>
|
||||
<default>#DATE_FORMAT#</default>
|
||||
</property>
|
||||
<property id="itemsPerPage" type="number">
|
||||
<title>Items per Page</title>
|
||||
<helpText>This is the intended number of items on each page.</helpText>
|
||||
<default>7</default>
|
||||
</property>
|
||||
<property id="customTemplate" type="hidden">
|
||||
<default>1</default>
|
||||
</property>
|
||||
<property id="moduleType" type="hidden">
|
||||
<default>stocks</default>
|
||||
</property>
|
||||
<property id="widgetDesignWidth" type="number">
|
||||
<title>Original Width</title>
|
||||
<helpText>This is the intended width of the template and is used to scale the Widget within its region when the template is applied.</helpText>
|
||||
</property>
|
||||
<property id="widgetDesignHeight" type="number">
|
||||
<title>Original Height</title>
|
||||
<helpText>This is the intended height of the template and is used to scale the Widget within its region when the template is applied.</helpText>
|
||||
</property>
|
||||
<property id="mainTemplate" type="code" allowLibraryRefs="true" parseTranslations="true" variant="html">
|
||||
<title>Main Template</title>
|
||||
</property>
|
||||
<property id="itemTemplate" type="code" allowLibraryRefs="true" parseTranslations="true" variant="html">
|
||||
<title>Item Template</title>
|
||||
</property>
|
||||
<property id="styleSheet" type="code" allowLibraryRefs="true" variant="css">
|
||||
<title>Optional Stylesheet</title>
|
||||
</property>
|
||||
<property id="javaScript" type="code" allowLibraryRefs="true" variant="javascript">
|
||||
<title>Optional JavaScript</title>
|
||||
<helpText>Add JavaScript to be included immediately before the closing body tag. Do not use [] array notation as this is reserved for library references. Do not include script tags.</helpText>
|
||||
</property>
|
||||
</properties>
|
||||
<stencil>
|
||||
<twig><![CDATA[
|
||||
{% if javaScript %}<script type="text/javascript">{{javaScript|raw}}</script>{% endif %}
|
||||
|
||||
<div class="template-container" style="display: none;">
|
||||
{{mainTemplate|raw}}
|
||||
</div>
|
||||
|
||||
<div class="item-template" style="display: none;">
|
||||
{{itemTemplate|raw}}
|
||||
</div>
|
||||
]]></twig>
|
||||
<style><![CDATA[
|
||||
{{styleSheet|raw}}
|
||||
]]></style>
|
||||
</stencil>
|
||||
<onTemplateRender><![CDATA[
|
||||
// Template renderer options
|
||||
// id: The id of the widget
|
||||
// target: The target element to render
|
||||
// items: The items to render
|
||||
// properties: The properties for the widget
|
||||
$(target).xiboLayoutScaler(properties);
|
||||
|
||||
// Get items
|
||||
var items = $(target).find(".template-item");
|
||||
|
||||
// Get body
|
||||
var body = $(target).find(".template-container");
|
||||
|
||||
$(target).find("#content").xiboFinanceRender(properties, items, body);
|
||||
$(target).find("img").xiboImageRender(properties);
|
||||
]]></onTemplateRender>
|
||||
<onTemplateVisible><![CDATA[
|
||||
// Start effects for this template
|
||||
$(target).xiboLayoutAnimate(properties);
|
||||
]]></onTemplateVisible>
|
||||
<assets>
|
||||
<asset id="stocks1" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/stocks/stocks1.png" />
|
||||
</assets>
|
||||
</template>
|
||||
<template>
|
||||
<id>stocks1</id>
|
||||
<type>static</type>
|
||||
<dataType>stock</dataType>
|
||||
<title>Stocks 1</title>
|
||||
<thumbnail>stocks1</thumbnail>
|
||||
<startWidth>800</startWidth>
|
||||
<startHeight>450</startHeight>
|
||||
<properties>
|
||||
<property id="effect" type="effectSelector" variant="showPaged">
|
||||
<title>Effect</title>
|
||||
<helpText>Please select the effect that will be used to transition between items.</helpText>
|
||||
<default>noTransition</default>
|
||||
</property>
|
||||
<property id="speed" type="number">
|
||||
<title>Speed</title>
|
||||
<helpText>The transition speed of the selected effect in milliseconds (normal = 1000).</helpText>
|
||||
</property>
|
||||
<property id="backgroundColor" type="color">
|
||||
<title>Background Colour</title>
|
||||
<helpText>The selected effect works best with a background colour. Optionally add one here.</helpText>
|
||||
<default></default>
|
||||
</property>
|
||||
<property id="itemBackgroundColor" type="color">
|
||||
<title>Item Colour</title>
|
||||
<helpText>Background colour for each stock item.</helpText>
|
||||
<default>#e0e0e0</default>
|
||||
</property>
|
||||
<property id="itemFontColor" type="color">
|
||||
<title>Item Font Colour</title>
|
||||
<helpText>Font colour for each stock item.</helpText>
|
||||
<default>#000</default>
|
||||
</property>
|
||||
<property id="itemLabelFontColor" type="color">
|
||||
<title>Item Label Font Colour</title>
|
||||
<helpText>Font colour for each stock item label.</helpText>
|
||||
<default>gray</default>
|
||||
</property>
|
||||
<property id="borderLeftColor" type="color">
|
||||
<title>Item Border Colour</title>
|
||||
<helpText>Border colour for each stock item.</helpText>
|
||||
<default>#264a88</default>
|
||||
</property>
|
||||
<property id="upArrowColor" type="color">
|
||||
<title>Up Arrow Colour</title>
|
||||
<helpText>Colour for the up change arrow.</helpText>
|
||||
<default>green</default>
|
||||
</property>
|
||||
<property id="downArrowColor" type="color">
|
||||
<title>Down Arrow Colour</title>
|
||||
<helpText>Colour for the down change arrow.</helpText>
|
||||
<default>red</default>
|
||||
</property>
|
||||
<property id="equalArrowColor" type="color">
|
||||
<title>Equal Arrow Colour</title>
|
||||
<helpText>Colour for the equal change arrow.</helpText>
|
||||
<default>gray</default>
|
||||
</property>
|
||||
<property id="fontFamily" type="fontSelector">
|
||||
<title>Font</title>
|
||||
<helpText>Select a custom font - leave empty to use the default font.</helpText>
|
||||
</property>
|
||||
<property id="itemsPerPage" type="hidden" saveDefault="true">
|
||||
<default>7</default>
|
||||
</property>
|
||||
</properties>
|
||||
<stencil>
|
||||
<width id="width">820</width>
|
||||
<height id="height">420</height>
|
||||
<hbs><![CDATA[
|
||||
<div class="row row-finance template-item">
|
||||
<div class="stock-col col-2 value name-stock">{{SymbolTrimmed}}</div>
|
||||
<div class="stock-col col-5 value ">{{Name}}</div>
|
||||
<div class="stock-col col-2 text-right value">{{LastTradePriceOnly}} {{CurrencyUpper}}</div>
|
||||
<div class="stock-col col-2 text-right value {{ChangeStyle}}">{{ChangePercentage}}%</div>
|
||||
<div class="stock-col col-1 text-right"><div class="{{ChangeIcon}}"></div></div>
|
||||
</div>
|
||||
]]></hbs>
|
||||
<twig><![CDATA[
|
||||
<div class="container-main template-container">
|
||||
<div class="container">
|
||||
<div id="cycle-container" class="items-container">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
]]></twig>
|
||||
<style><![CDATA[
|
||||
body {
|
||||
width: 820px !important;
|
||||
height: 420px !important;
|
||||
}
|
||||
|
||||
{% if backgroundColor %}body { background-color: {{backgroundColor}} !important; }{% endif %}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.center-block {
|
||||
display: block;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
h1 {
|
||||
margin: 0.67em 0;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.container:after, .container:before, .row:after, .row:before {
|
||||
display: table;
|
||||
content: " ";
|
||||
}
|
||||
.container:after, .row:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:after,:before {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
{% if fontFamily %}
|
||||
font-family: {{fontFamily}};
|
||||
{else}
|
||||
font-family: "Helvetica", "Arial", sans-serif;
|
||||
{% endif %}
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.container-main {
|
||||
height: 420px !important;
|
||||
width: 820px !important;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 820px !important;
|
||||
height: 420px !important;
|
||||
float: left;
|
||||
padding-top: 20px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.row-finance {
|
||||
height: 40px;
|
||||
background: #e0e0e0;
|
||||
margin-bottom: 17px;
|
||||
border-left: #264a88 10px solid;
|
||||
{% if borderLeftColor %}
|
||||
border-left-color: {{borderLeftColor}};
|
||||
{% endif %}
|
||||
{% if itemBackgroundColor %}
|
||||
background: {{itemBackgroundColor}};
|
||||
{% endif %}
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#cycle-container {
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 19px;
|
||||
padding-top: 10px;
|
||||
{% if itemFontColor %}
|
||||
color: {{itemFontColor}};
|
||||
{% endif %}
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.down-arrow {
|
||||
margin: 15px 0px 0px 20px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-top: 10px solid red;
|
||||
{% if downArrowColor %}
|
||||
border-top-color: {{downArrowColor}};
|
||||
{% endif %}
|
||||
}
|
||||
|
||||
.up-arrow {
|
||||
margin: 15px 0px 0px 20px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-bottom: 10px solid green;
|
||||
{% if upArrowColor %}
|
||||
border-bottom-color: {{upArrowColor}};
|
||||
{% endif %}
|
||||
}
|
||||
|
||||
.right-arrow {
|
||||
margin: 10px 0px 0px 25px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 10px solid gray;
|
||||
border-top: 10px solid transparent;
|
||||
border-bottom: 10px solid transparent;
|
||||
{% if equalArrowColor %}
|
||||
border-left-color: {{equalArrowColor}};
|
||||
{% endif %}
|
||||
}
|
||||
|
||||
.variant {
|
||||
font-size: 20px;
|
||||
padding-top: 17px;
|
||||
}
|
||||
|
||||
.flags {
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.value-up {
|
||||
font-weight: bold
|
||||
{% if upArrowColor %}
|
||||
color: {{upArrowColor}};
|
||||
{% endif %}
|
||||
}
|
||||
|
||||
.value-down {
|
||||
{% if downArrowColor %}
|
||||
color: {{downArrowColor}};
|
||||
{% endif %}
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.value-equal {
|
||||
{% if equalArrowColor %}
|
||||
color: {{equalArrowColor}};
|
||||
{% endif %}
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.name-stock {
|
||||
{% if itemLabelFontColor %}
|
||||
color: {{itemLabelFontColor}};
|
||||
{% endif %}
|
||||
}
|
||||
|
||||
.col-1 {
|
||||
width: 8.33333333%;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
width: 16.66666667%;
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
width: 41.66666667%;
|
||||
}
|
||||
|
||||
.stock-col {
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
]]></style>
|
||||
</stencil>
|
||||
<onTemplateRender><![CDATA[
|
||||
// Template renderer options
|
||||
// id: The id of the widget
|
||||
// target: The target element to render
|
||||
// items: The items to render
|
||||
// properties: The properties for the widget
|
||||
var overrideItemPerPage = {
|
||||
itemsPerPage: 0,
|
||||
};
|
||||
$(target).xiboLayoutScaler($.extend({}, properties, overrideItemPerPage));
|
||||
|
||||
// Get items
|
||||
var items = $(target).find(".template-item");
|
||||
|
||||
// Get body
|
||||
var body = $(target).find(".template-container");
|
||||
|
||||
$(target).find("#content").xiboFinanceRender(properties, items, body);
|
||||
$(target).find("img").xiboImageRender(properties);
|
||||
]]></onTemplateRender>
|
||||
<onTemplateVisible><![CDATA[
|
||||
// Start effects for this template
|
||||
$(target).xiboLayoutAnimate(properties);
|
||||
]]></onTemplateVisible>
|
||||
<assets>
|
||||
<asset id="stocks1" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/stocks/stocks1.png" />
|
||||
</assets>
|
||||
</template>
|
||||
<template>
|
||||
<id>stocks2</id>
|
||||
<type>static</type>
|
||||
<dataType>stock</dataType>
|
||||
<title>Stocks 2</title>
|
||||
<thumbnail>stocks2</thumbnail>
|
||||
<startWidth>550</startWidth>
|
||||
<startHeight>350</startHeight>
|
||||
<properties>
|
||||
<property id="effect" type="effectSelector" variant="showPaged">
|
||||
<title>Effect</title>
|
||||
<helpText>Please select the effect that will be used to transition between items.</helpText>
|
||||
<default>noTransition</default>
|
||||
</property>
|
||||
<property id="speed" type="number">
|
||||
<title>Speed</title>
|
||||
<helpText>The transition speed of the selected effect in milliseconds (normal = 1000).</helpText>
|
||||
</property>
|
||||
<property id="backgroundColor" type="color">
|
||||
<title>Background Colour</title>
|
||||
<helpText>The selected effect works best with a background colour. Optionally add one here.</helpText>
|
||||
<default></default>
|
||||
</property>
|
||||
<property id="itemFontColor" type="color">
|
||||
<title>Item Font Colour</title>
|
||||
<helpText>Font colour for each stock item.</helpText>
|
||||
<default>#000</default>
|
||||
</property>
|
||||
<property id="itemLabelFontColor" type="color">
|
||||
<title>Item Label Font Colour</title>
|
||||
<helpText>Font colour for each stock item label.</helpText>
|
||||
<default>gray</default>
|
||||
</property>
|
||||
<property id="upArrowColor" type="color">
|
||||
<title>Up Arrow Colour</title>
|
||||
<helpText>Colour for the up change arrow.</helpText>
|
||||
<default>green</default>
|
||||
</property>
|
||||
<property id="downArrowColor" type="color">
|
||||
<title>Down Arrow Colour</title>
|
||||
<helpText>Colour for the down change arrow.</helpText>
|
||||
<default>red</default>
|
||||
</property>
|
||||
<property id="equalArrowColor" type="color">
|
||||
<title>Equal Arrow Colour</title>
|
||||
<helpText>Colour for the equal change arrow.</helpText>
|
||||
<default>gray</default>
|
||||
</property>
|
||||
<property id="fontFamily" type="fontSelector">
|
||||
<title>Font</title>
|
||||
<helpText>Select a custom font - leave empty to use the default font.</helpText>
|
||||
</property>
|
||||
<property id="itemsPerPage" type="hidden">
|
||||
<default>1</default>
|
||||
</property>
|
||||
</properties>
|
||||
<stencil>
|
||||
<width id="width">500</width>
|
||||
<height id="height">380</height>
|
||||
<hbs><![CDATA[
|
||||
<div class="row row-finance template-item">
|
||||
<div class="stock-col col-12 name">{{Name}}</div>
|
||||
<div class="stock-col col-12 subname">{{SymbolTrimmed}}</div>
|
||||
<div class="stock-col col-12 value-currency">{{LastTradePriceOnly}} {{CurrencyUpper}}</div>
|
||||
<div class="stock-col col-12 total">
|
||||
<div class="subtotal {{ChangeStyle}}">{{ChangePercentage}}%</div>
|
||||
<div class="subtotal {{ChangeIcon}}"></div>
|
||||
</div>
|
||||
</div>
|
||||
]]></hbs>
|
||||
<twig><![CDATA[
|
||||
<div class="container-main template-container">
|
||||
<div class="container">
|
||||
<div id="cycle-container" class="items-container">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
]]></twig>
|
||||
<style><![CDATA[
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 500px !important;
|
||||
height: 380px !important;
|
||||
{% if fontFamily %}
|
||||
font-family: {{fontFamily}};
|
||||
{else}
|
||||
font-family: "Helvetica", "Arial", sans-serif;
|
||||
{% endif %}
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
{% if backgroundColor %}body { background-color: {{backgroundColor}} !important; }{% endif %}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.center-block {
|
||||
display: block;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
width: 500px !important;
|
||||
height: 380px !important;
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0.67em 0;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.container:after, .container:before, .row:after, .row:before {
|
||||
display: table;
|
||||
content: " ";
|
||||
}
|
||||
|
||||
.container:after, .row:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
:after, :before {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.container-main {
|
||||
height: 380px !important;
|
||||
width: 500px !important;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 20px;
|
||||
padding-top: 10px;
|
||||
{% if itemFontColor %}
|
||||
color: {{itemFontColor}};
|
||||
{% endif %}
|
||||
}
|
||||
|
||||
.value-currency {
|
||||
font-size: 45px;
|
||||
text-align: right;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.value-up {
|
||||
font-weight: bold;
|
||||
{% if upArrowColor %}
|
||||
color: {{upArrowColor}};
|
||||
{% endif %}
|
||||
}
|
||||
|
||||
.value-down {
|
||||
font-weight: bold;
|
||||
{% if downArrowColor %}
|
||||
color: {{downArrowColor}};
|
||||
{% endif %}
|
||||
}
|
||||
|
||||
.value-equal {
|
||||
font-weight: bold;
|
||||
{% if equalArrowColor %}
|
||||
color: {{equalArrowColor}};
|
||||
{% endif %}
|
||||
}
|
||||
|
||||
.variant {
|
||||
font-size: 20px;
|
||||
padding-top: 17px;
|
||||
}
|
||||
|
||||
.flags {
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.live-title {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.time-title {
|
||||
font-size: 14px;
|
||||
padding-top: 10;
|
||||
}
|
||||
|
||||
.name-stock {
|
||||
{% if itemLabelFontColor %}
|
||||
color: {{itemLabelFontColor}};
|
||||
{% endif %}
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 40px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.subname {
|
||||
font-size: 35px;
|
||||
margin-bottom: 30px;
|
||||
{% if itemLabelFontColor %}
|
||||
color: {{itemLabelFontColor}};
|
||||
{% endif %}
|
||||
}
|
||||
|
||||
.total {
|
||||
margin-top: 30px;
|
||||
font-size: 80px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.subtotal {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.down-arrow {
|
||||
margin: 0px 0px 10px 0px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 30px solid transparent;
|
||||
border-right: 30px solid transparent;
|
||||
border-top: 30px solid red;
|
||||
{% if downArrowColor %}
|
||||
border-top-color: {{downArrowColor}};
|
||||
{% endif %}
|
||||
}
|
||||
|
||||
.up-arrow {
|
||||
margin: 0px 0px 10px 0px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 30px solid transparent;
|
||||
border-right: 30px solid transparent;
|
||||
border-bottom: 30px solid green;
|
||||
{% if upArrowColor %}
|
||||
border-bottom-color: {{upArrowColor}};
|
||||
{% endif %}
|
||||
}
|
||||
|
||||
.right-arrow {
|
||||
margin: 0px 0px 0px 10px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 30px solid gray;
|
||||
border-top: 30px solid transparent;
|
||||
border-bottom: 30px solid transparent;
|
||||
{% if equalArrowColor %}
|
||||
border-left-color: {{equalArrowColor}};
|
||||
{% endif %}
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.stock-col {
|
||||
float: left;
|
||||
position: relative;
|
||||
min-height: 1px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 40px;
|
||||
}
|
||||
]]></style>
|
||||
</stencil>
|
||||
<onTemplateRender><![CDATA[
|
||||
// Template renderer options
|
||||
// id: The id of the widget
|
||||
// target: The target element to render
|
||||
// items: The items to render
|
||||
// properties: The properties for the widget
|
||||
$(target).xiboLayoutScaler(properties);
|
||||
|
||||
// Get items
|
||||
var items = $(target).find(".template-item");
|
||||
|
||||
// Get body
|
||||
var body = $(target).find(".template-container");
|
||||
|
||||
$(target).find("#content").xiboFinanceRender(properties, items, body);
|
||||
$(target).find("img").xiboImageRender(properties);
|
||||
]]></onTemplateRender>
|
||||
<onTemplateVisible><![CDATA[
|
||||
// Start effects for this template
|
||||
$(target).xiboLayoutAnimate(properties);
|
||||
]]></onTemplateVisible>
|
||||
<assets>
|
||||
<asset id="stocks2" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/stocks/stocks2.png" />
|
||||
</assets>
|
||||
</template>
|
||||
</templates>
|
||||
Reference in New Issue
Block a user