_includes/batch-conversion.html in appscms-tools-theme-3.9.6 vs _includes/batch-conversion.html in appscms-tools-theme-3.9.7
- old
+ new
@@ -1,66 +1,141 @@
-{%- assign boxColor = site.data[page.folderName][page.lang][page.fileName].color -%}
+{%- assign boxColor = site.data[page.folderName][page.lang][page.fileName].color
+-%}
<div class="options-panel">
- <div class="title">
- Options
+ <div class="title">Options</div>
+ <div id="controls" class="text-left">
+ <label>Amount</label>
+ <div class="d-flex">
+ {%- if page.effect == "blur" -%}
+ <input
+ class="w-100"
+ type="range"
+ min="0"
+ max="50"
+ value="25"
+ step="0.5"
+ id="applyFilter"
+ data-filter="{{page.effect}}"
+ data-scale="px"
+ />
+ <div class="d-flex align-items-center" id="counter"></div>
+ {%- elsif page.effect == "opacity" -%}
+ <input
+ class="w-100"
+ id="applyFilter"
+ type="range"
+ min="0"
+ max="1"
+ step="0.1"
+ value="0.5"
+ data-filter="{{page.effect}}"
+ />
+ <div class="d-flex align-items-center" id="counter"></div>
+ {%- elsif page.effect == "saturate" -%}
+ <input
+ class="w-100"
+ type="range"
+ min="0"
+ max="200"
+ value="100"
+ step="1"
+ id="applyFilter"
+ data-filter="{{page.effect}}"
+ data-scale=""
+ />
+ <div class="d-flex align-items-center" id="counter"></div>
+ {%- elsif page.effect == "hue-rotate" -%}
+ <input
+ class="w-100"
+ type="range"
+ min="0"
+ max="360"
+ value="180"
+ step="1"
+ id="applyFilter"
+ data-filter="{{page.effect}}"
+ data-scale="deg"
+ />
+ <div class="d-flex align-items-center" id="counter"></div>
+ {%- elsif page.effect == "grayscale" -%}
+ <input
+ class="w-100"
+ type="range"
+ min="0"
+ max="100"
+ value="50"
+ step="1"
+ id="applyFilter"
+ data-filter="{{page.effect}}"
+ data-scale="%"
+ />
+ <div class="d-flex align-items-center" id="counter"></div>
+ {%- elsif page.effect == "sepia" -%}
+ <input
+ class="w-100"
+ type="range"
+ min="0"
+ max="100"
+ value="50"
+ step="1"
+ id="applyFilter"
+ data-filter="{{page.effect}}"
+ data-scale="%"
+ />
+ <div class="d-flex align-items-center" id="counter"></div>
+ {%- elsif page.effect == "gamma" -%}
+ <input
+ class="w-100"
+ type="range"
+ min="0"
+ max="10"
+ value="5"
+ step="1"
+ id="applyFilter"
+ data-filter="{{page.effect}}"
+ />
+ {%- elsif page.panelTitle == "exposure" -%}
+ <input
+ class="w-100"
+ type="range"
+ min="-100"
+ max="100"
+ value="0"
+ step="1"
+ id="applyFilter"
+ data-filter="{{page.effect}}"
+ />
+ {%- else -%}
+ <input
+ class="w-100"
+ type="range"
+ min="0"
+ max="200"
+ value="100"
+ step="1"
+ id="applyFilter"
+ data-filter="{{page.effect}}"
+ data-scale="%"
+ />
+ <div class="d-flex align-items-center" id="counter"></div>
+ {%- endif -%}
+ <br />
</div>
- <div id="controls" class="text-left">
- <label>Amount</label>
- <div class="d-flex">
- {%- if page.effect == "blur" -%}
- <input class="w-100" type="range" min="0" max="50" value="25" step="0.5" id="applyFilter"
- data-filter="{{page.effect}}" data-scale="px">
- <div class="d-flex align-items-center" id="counter"></div>
- {%- elsif page.effect == "opacity" -%}
- <input class="w-100" id="applyFilter" type="range" min="0" max="1" step="0.1" value="0.5"
- data-filter="{{page.effect}}" />
- <div class="d-flex align-items-center" id="counter"></div>
- {%- elsif page.effect == "saturate" -%}
- <input class="w-100" type="range" min="0" max="200" value="100" step="1" id="applyFilter"
- data-filter="{{page.effect}}" data-scale="">
- <div class="d-flex align-items-center" id="counter"></div>
- {%- elsif page.effect == "hue-rotate" -%}
- <input class="w-100" type="range" min="0" max="360" value="180" step="1" id="applyFilter"
- data-filter="{{page.effect}}" data-scale="deg">
- <div class="d-flex align-items-center" id="counter"></div>
- {%- elsif page.effect == "grayscale" -%}
- <input class="w-100" type="range" min="0" max="100" value="50" step="1" id="applyFilter"
- data-filter="{{page.effect}}" data-scale="%">
- <div class="d-flex align-items-center" id="counter"></div>
- {%- elsif page.effect == "sepia" -%}
- <input class="w-100" type="range" min="0" max="100" value="50" step="1" id="applyFilter"
- data-filter="{{page.effect}}" data-scale="%">
- <div class="d-flex align-items-center" id="counter"></div>
- {%- elsif page.effect == "gamma" -%}
- <input class="w-100" type="range" min="0" max="10" value="5" step="1" id="applyFilter"
- data-filter="{{page.effect}}">
- {%- elsif page.panelTitle == "exposure" -%}
- <input class="w-100" type="range" min="-100" max="100" value="0" step="1" id="applyFilter"
- data-filter="{{page.effect}}">
- {%- else -%}
- <input class="w-100" type="range" min="0" max="200" value="100" step="1" id="applyFilter"
- data-filter="{{page.effect}}" data-scale="%">
- <div class="d-flex align-items-center" id="counter"></div>
- {%- endif -%}
- <br>
- </div>
- </div>
+ </div>
+ <div class="download-format d-none">
+ <span class="select-format-title">image's format</span>
+ <select name="image-format" id="image-format">
+ <option value="png">png</option>
+ <option value="jpg">jpg</option>
+ <option value="jpeg">jpeg</option>
+ <option value="webp">webp</option>
+ </select>
+ </div>
- <div class="download-format d-none">
- <span class="select-format-title">image's format</span>
- <select name="image-format" id="image-format">
- <option value="png">png</option>
- <option value="jpg">jpg</option>
- <option value="jpeg">jpeg</option>
- <option value="webp">webp</option>
-
- </select>
- </div>
-
- <div class="convertBtn-container">
- <button style="background-color:{{boxColor}};" class="btn" id="submit-button">
- Convert
- <img src="/assets/images/convert.svg" width="20px" alt="convert-files">
- </button>
- </div>
-</div>
\ No newline at end of file
+ <div class="convertBtn-container">
+ <button style="background:{{boxColor}};" class="btn" id="submit-button">
+ Convert
+ <img src="/assets/images/convert.svg" width="20px" alt="convert-files" />
+ </button>
+ </div>
+</div>