Netsyms/PackageHelper
2
0
Fork 1
Code Issues 9 Pull Requests Releases 12 Wiki Activity

Settings: Center UI in middle of screen with max width (#36)

Browse Source
This commit is contained in:
Skylar Ittner 2020-04-03 13:49:40 -06:00
parent 861c669772
commit 58ff3476bb
1 changed files with 81 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
www/pages/settings.html
View File

@ -18,81 +18,93 @@
<div class="page-content"> <div class="page-content">
<div class="list media-list no-hairlines no-margin-top tablet-inset"> <div class="row justify-content-center">
<ul> <div class="col-100 medium-60 large-50 xlarge-40 elevation-tablet margin-top-tablet">
{{#each settings}} <div class="list media-list no-hairlines no-margin-top no-margin-bottom tablet-inset">
<li> <ul>
{{#if link}} {{#each settings}}
<div class="item-content item-link" data-setting="{{setting}}" onclick="{{onclick}}"> <li>
<div class="item-inner"> {{#if link}}
<div class="item-title-row"> <div class="item-content item-link" data-setting="{{setting}}" onclick="{{onclick}}">
<div class="item-title">{{title}}</div> <div class="item-inner">
</div> <div class="item-title-row">
<div class="item-text">{{text}}</div> <div class="item-title">{{title}}</div>
</div> </div>
</div> <div class="item-text">{{text}}</div>
{{else}}
{{#if toggle}}
<div class="item-content" data-setting="{{setting}}">
<div class="item-inner">
<div style="display: flex; justify-content: between;">
<div class="item-title">
{{title}}
</div>
<div class="item-after" onclick="{{onclick}}">
<label class="toggle toggle-init">
<input type="checkbox" {{#if checked}}checked{{/if}}>
<span class="toggle-icon"></span>
</label>
</div> </div>
</div> </div>
<div class="item-text">{{text}}</div> {{else}}
</div> {{#if toggle}}
</div> <div class="item-content" data-setting="{{setting}}">
{{else}} <div class="item-inner">
{{#if slider}} <div style="display: flex; justify-content: between;">
<div class="item-content" data-setting="{{setting}}"> <div class="item-title">
<div class="item-inner"> {{title}}
<div class="item-title" style="background-color: rgba(0,0,0,0);"> </div>
{{title}} <div class="item-after" onclick="{
</div> {
<div class="item-subtitle padding-horizontal padding-top"> onclick
<div class="range-slider range-slider-init padding-top margin-top" data-label="true"> }
<input type="range" min="{{min}}" max="{{max}}" step="{{step}}" value="{{value}}"> }">
<label class="toggle toggle-init">
<input type="checkbox" {{#if checked}}checked{{/if}}>
<span class="toggle-icon"></span>
</label>
</div>
</div>
<div class="item-text">{{text}}</div>
</div> </div>
</div> </div>
</div> {{else}}
</div> {{#if slider}}
{{else}} <div class="item-content" data-setting="{{setting}}">
{{#if select}} <div class="item-inner">
<a class="item-link smart-select smart-select-init" data-open-in="popover" data-setting="{{setting}}"> <div class="item-title" style="background-color: rgba(0,0,0,0);">
<select> {{title}}
{{#each options}} </div>
<option value="{{value}}"{{#if selected}} selected{{/if}}>{{label}}</option> <div class="item-subtitle padding-horizontal padding-top">
{{/each}} <div class="range-slider range-slider-init padding-top margin-top" data-label="true">
</select> <input type="range" min="{{min}}" max="{{max}}" step="{{step}}" value="{{value}}">
<div class="item-content"> </div>
<div class="item-inner"> </div>
<div class="item-title">{{title}}</div> </div>
</div> </div>
</div> {{else}}
</a> {{#if select}}
{{else}} <a class="item-link smart-select smart-select-init" data-open-in="popover" data-setting="{{setting}}">
<div class="item-content" data-setting="{{setting}}" onclick="{{onclick}}"> <select>
<div class="item-inner"> {{#each options}}
<div class="item-title-row"> <option value="{{value}}"{{#if selected}} selected{{/if}}>{{label}}</option>
<div class="item-title">{{title}}</div> {{/each}}
</select>
<div class="item-content">
<div class="item-inner">
<div class="item-title">{{title}}</div>
</div>
</div>
</a>
{{else}}
<div class="item-content" data-setting="{{setting}}" onclick="{
{
onclick
}
}">
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">{{title}}</div>
</div>
<div class="item-text">{{text}}</div>
</div>
</div> </div>
<div class="item-text">{{text}}</div> {{/if}}
</div> {{/if}}
</div> {{/if}}
{{/if}} {{/if}}
{{/if}} </li>
{{/if}} {{/each}}
{{/if}} </ul>
</li> </div>
{{/each}} </div>
</ul>
</div> </div>
</div> </div>