Commit e573c379 authored by ROBERT PATRICK CAREY III's avatar ROBERT PATRICK CAREY III 🗿

Refactoring

parent e31e804d
{# extends user-preferences.html.twig #}
<div aria-hidden="true" aria-labelledby="preferencesPanelTitle" class="modal fade" id="userPreferences" role="dialog"
tabindex="-1">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="h5 modal-title" id="preferencesPanelTitle">User Preferences</h3>
<button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group m-2"><label class="col-form-label text-muted" for="fontSize"
aria-label="Font sizing options">Font size</label>
<div class="btn-toolbar" role="toolbar">
<input name="fontSize" class="fontSlider form-control" type="range" min="0.75" max="1.5" value="1.1"
step="0.05" aria-label="Font sizing control">
</div>
</div>
<div class="form-group m-2"><label class="col-form-label text-muted" for="fontFamily"
aria-label="Font family options">Font family</label>
<div class="btn-toolbar" role="toolbar" name="fontFamily">
<div class="btn-group btn-group-toggle" data-toggle="buttons" role="group">
<button class="btn btn-secondary toggle-font-dyslexic font-dyslexic" data-toggle="tooltip"
aria-label="Open Dyslexic" data-tippy-content="Open Dyslexic" type="button">A
</button>
<button class="btn btn-secondary toggle-font-sans" data-toggle="tooltip" aria-label="Sans Serif"
data-tippy-content="Sans Serif" type="button">A
</button>
<button class="btn btn-secondary toggle-font-serif" data-toggle="tooltip" aria-label="Serif"
data-tippy-content="Serif" type="button"><i class="fas fa-fw fa-font" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="form-group m-2"><label for="screenMode" aria-label="Screen mode options"
class="col-form-label text-muted">Mode</label>
<div aria-label="Screen viewing modes" class="btn-toolbar" role="toolbar" name="screenMode">
<div aria-label="Third group" class="btn-group btn-group-toggle" data-toggle="buttons" id="viewMode"
role="group">
<button class="btn btn-secondary toggle-dark-mode" data-toggle="tooltip" data-tippy-content="Dark"
type="button" aria-label="Dark mode"><i class="fas fa-moon" aria-hidden="true"></i>
</button>
<button class="btn btn-secondary toggle-light-mode" data-toggle="tooltip" data-tippy-content="Light"
type="button" aria-label="Light mode"><i class="fas fa-sun" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="form-group m-2"><label aria-label="Screen mode options" class="col-form-label text-muted"
for="viewMode">Cards</label>
<div aria-label="Screen viewing modes" class="btn-toolbar" role="toolbar" name="viewMode">
<div aria-label="Third group" class="btn-group btn-group-toggle" data-toggle="buttons" id="viewMode"
role="group">
<button class="btn btn-secondary disable-cards" data-toggle="tooltip"
data-tippy-content="Disable cards" type="button" aria-label="Disable card display"><i
class="fas fa-fw fa-times" aria-hidden="true"></i>
</button>
<button class="btn btn-secondary enable-cards" data-toggle="tooltip" data-tippy-content="Enable cards"
type="button" aria-label="Enable card display"><i class="fas fa-fw fa-check" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="form-group m-2"><label class="col-form-label text-muted" for="resetPreferences">Reset</label>
<div aria-label="Reset" class="btn-group mr-2" id="default-settings" role="group" name="resetPreferences">
<button class="btn btn-outline-secondary reset-mode" aria-label="Reset user preferences"
data-toggle="tooltip" data-tippy-content="Reset to default" type="button"><i
class="fas fa-fw fa-undo-alt" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</form>
<div class="jumbotron p-3 mt-2 mb-3" aria-hidden="true">
<h1 class="display-4">Content Preview
</h1>
<p class="lead">Arcu felis bibendum ut tristique et egestas quis:
</p>
<hr class="my-4" />
<ul>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</li>
<li>Duis aute irure dolor in reprehenderit in voluptate</li>
<li>Excepteur sint occaecat cupidatat non proident</li>
</ul>
</div>
<div class="card">
<div class="card-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit molestiae mollitia
laudantium assumenda nam eaque, excepturi, soluta, perspiciatis cupiditate sapiente, adipisci quaerat odio
voluptates consectetur nulla eveniet iure vitae quibusdam? Excepturi aliquam in iure, repellat, fugiat illum
voluptate repellendus blanditiis veritatis ducimus ad ipsa quisquam, commodi vel necessitatibus, harum quos
a dignissimos.
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal" type="button">Close
</button>
<button class="btn btn-primary save-user-preferences" type="button">Save changes
</button>
</div>
</div>
</div>
</div>
<div aria-hidden="true" aria-labelledby="keyboardShortcutsTitle" class="modal fade" id="keyboardShortcuts" role="dialog"
tabindex="-1">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="h5 modal-title" id="keyboardShortcutsTitle">Keyboard Shortcuts
</h3>
<button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<dl>
<dt>Help</dt>
<dd>
<kbd data-tippy-content="F1 (fn F1)" data-toggle="tooltip">F1</kbd> or
<kbd data-tippy-content="Question Mark" data-toggle="tooltip">?</kbd>
</dd>
<dt>Previous Page</dt>
<dd>
<kbd data-tippy-content="Arrow Left" data-toggle="tooltip">&larr;</kbd> +
<kbd data-tippy-content="Control" data-toggle="tooltip">CTRL</kbd> (Windows)
</dd>
<dd>
<kbd data-tippy-content="Arrow Left" data-toggle="tooltip">&larr;</kbd> +
<kbd data-tippy-content="Command" data-toggle="tooltip">&#8984;</kbd> (Mac)
</dd>
<dt>Next Page</dt>
<dd>
<kbd data-tippy-content="Arrow Right" data-toggle="tooltip">&rarr;</kbd> +
<kbd data-tippy-content="Control" data-toggle="tooltip">CTRL</kbd> (Windows)
</dd>
<dd>
<kbd data-tippy-content="Arrow Right" data-toggle="tooltip">&rarr;</kbd> +
<kbd data-tippy-content="Command" data-toggle="tooltip">&#8984;</kbd> (Mac)
</dd>
<dt>Search Site</dt>
<dd>
<kbd data-tippy-content="Control" data-toggle="tooltip">CTRL</kbd> +
<kbd data-tippy-content="Shift" data-toggle="tooltip">SHIFT</kbd> +
<kbd data-tippy-content="F (f)" data-toggle="tooltip">F</kbd> (Windows)
</dd>
<dd>
<kbd data-tippy-content="Command" data-toggle="tooltip">&#8984;</kbd> +
<kbd data-tippy-content="Shift" data-toggle="tooltip">&#x21E7;</kbd> +
<kbd data-tippy-content="F (f)" data-toggle="tooltip">F</kbd> (Mac)
</dd>
<dt>Close Message</dt>
<dd>
<kbd data-tippy-content="Escape" data-toggle="tooltip">ESC</kbd>
</dd>
</dl>
</div>
</div>
</div>
</div>
\ No newline at end of file
......@@ -69,3 +69,164 @@
</nav>
</div>
</div>
{# Preferences Modal #}
<div aria-hidden="true" aria-labelledby="preferencesPanelTitle" class="modal fade" id="userPreferences" role="dialog"
tabindex="-1">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="h5 modal-title" id="preferencesPanelTitle">User Preferences</h3>
<button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group m-2"><label class="col-form-label text-muted" for="fontSize"
aria-label="Font sizing options">Font size</label>
<div class="btn-toolbar" role="toolbar">
<input name="fontSize" class="fontSlider form-control" type="range" min="0.75" max="1.5" value="1.1"
step="0.05" aria-label="Font sizing control">
</div>
</div>
<div class="form-group m-2"><label class="col-form-label text-muted" for="fontFamily"
aria-label="Font family options">Font family</label>
<div class="btn-toolbar" role="toolbar" name="fontFamily">
<div class="btn-group btn-group-toggle" data-toggle="buttons" role="group">
<button class="btn btn-secondary toggle-font-dyslexic font-dyslexic" data-toggle="tooltip"
aria-label="Open Dyslexic" data-tippy-content="Open Dyslexic" type="button">A
</button>
<button class="btn btn-secondary toggle-font-sans" data-toggle="tooltip" aria-label="Sans Serif"
data-tippy-content="Sans Serif" type="button">A
</button>
<button class="btn btn-secondary toggle-font-serif" data-toggle="tooltip" aria-label="Serif"
data-tippy-content="Serif" type="button"><i class="fas fa-fw fa-font" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="form-group m-2"><label for="screenMode" aria-label="Screen mode options"
class="col-form-label text-muted">Mode</label>
<div aria-label="Screen viewing modes" class="btn-toolbar" role="toolbar" name="screenMode">
<div aria-label="Third group" class="btn-group btn-group-toggle" data-toggle="buttons" id="viewMode"
role="group">
<button class="btn btn-secondary toggle-dark-mode" data-toggle="tooltip" data-tippy-content="Dark"
type="button" aria-label="Dark mode"><i class="fas fa-moon" aria-hidden="true"></i>
</button>
<button class="btn btn-secondary toggle-light-mode" data-toggle="tooltip" data-tippy-content="Light"
type="button" aria-label="Light mode"><i class="fas fa-sun" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="form-group m-2"><label aria-label="Screen mode options" class="col-form-label text-muted"
for="viewMode">Cards</label>
<div aria-label="Screen viewing modes" class="btn-toolbar" role="toolbar" name="viewMode">
<div aria-label="Third group" class="btn-group btn-group-toggle" data-toggle="buttons" id="viewMode"
role="group">
<button class="btn btn-secondary disable-cards" data-toggle="tooltip"
data-tippy-content="Disable cards" type="button" aria-label="Disable card display"><i
class="fas fa-fw fa-times" aria-hidden="true"></i>
</button>
<button class="btn btn-secondary enable-cards" data-toggle="tooltip" data-tippy-content="Enable cards"
type="button" aria-label="Enable card display"><i class="fas fa-fw fa-check" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="form-group m-2"><label class="col-form-label text-muted" for="resetPreferences">Reset</label>
<div aria-label="Reset" class="btn-group mr-2" id="default-settings" role="group" name="resetPreferences">
<button class="btn btn-outline-secondary reset-mode" aria-label="Reset user preferences"
data-toggle="tooltip" data-tippy-content="Reset to default" type="button"><i
class="fas fa-fw fa-undo-alt" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</form>
<div class="jumbotron p-3 mt-2 mb-3" aria-hidden="true">
<h1 class="display-4">Content Preview
</h1>
<p class="lead">Arcu felis bibendum ut tristique et egestas quis:
</p>
<hr class="my-4" />
<ul>
<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</li>
<li>Duis aute irure dolor in reprehenderit in voluptate</li>
<li>Excepteur sint occaecat cupidatat non proident</li>
</ul>
</div>
<div class="card">
<div class="card-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit molestiae mollitia
laudantium assumenda nam eaque, excepturi, soluta, perspiciatis cupiditate sapiente, adipisci quaerat odio
voluptates consectetur nulla eveniet iure vitae quibusdam? Excepturi aliquam in iure, repellat, fugiat illum
voluptate repellendus blanditiis veritatis ducimus ad ipsa quisquam, commodi vel necessitatibus, harum quos
a dignissimos.
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal" type="button">Close
</button>
<button class="btn btn-primary save-user-preferences" type="button">Save changes
</button>
</div>
</div>
</div>
</div>
<div aria-hidden="true" aria-labelledby="keyboardShortcutsTitle" class="modal fade" id="keyboardShortcuts" role="dialog"
tabindex="-1">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="h5 modal-title" id="keyboardShortcutsTitle">Keyboard Shortcuts
</h3>
<button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<dl>
<dt>Help</dt>
<dd>
<kbd data-tippy-content="F1 (fn F1)" data-toggle="tooltip">F1</kbd> or
<kbd data-tippy-content="Question Mark" data-toggle="tooltip">?</kbd>
</dd>
<dt>Previous Page</dt>
<dd>
<kbd data-tippy-content="Arrow Left" data-toggle="tooltip">&larr;</kbd> +
<kbd data-tippy-content="Control" data-toggle="tooltip">CTRL</kbd> (Windows)
</dd>
<dd>
<kbd data-tippy-content="Arrow Left" data-toggle="tooltip">&larr;</kbd> +
<kbd data-tippy-content="Command" data-toggle="tooltip">&#8984;</kbd> (Mac)
</dd>
<dt>Next Page</dt>
<dd>
<kbd data-tippy-content="Arrow Right" data-toggle="tooltip">&rarr;</kbd> +
<kbd data-tippy-content="Control" data-toggle="tooltip">CTRL</kbd> (Windows)
</dd>
<dd>
<kbd data-tippy-content="Arrow Right" data-toggle="tooltip">&rarr;</kbd> +
<kbd data-tippy-content="Command" data-toggle="tooltip">&#8984;</kbd> (Mac)
</dd>
<dt>Search Site</dt>
<dd>
<kbd data-tippy-content="Control" data-toggle="tooltip">CTRL</kbd> +
<kbd data-tippy-content="Shift" data-toggle="tooltip">SHIFT</kbd> +
<kbd data-tippy-content="F (f)" data-toggle="tooltip">F</kbd> (Windows)
</dd>
<dd>
<kbd data-tippy-content="Command" data-toggle="tooltip">&#8984;</kbd> +
<kbd data-tippy-content="Shift" data-toggle="tooltip">&#x21E7;</kbd> +
<kbd data-tippy-content="F (f)" data-toggle="tooltip">F</kbd> (Mac)
</dd>
<dt>Close Message</dt>
<dd>
<kbd data-tippy-content="Escape" data-toggle="tooltip">ESC</kbd>
</dd>
</dl>
</div>
</div>
</div>
</div>
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment