mirror of
https://github.com/Karaka-Management/cssOMS.git
synced 2026-01-11 11:18:39 +00:00
fix test and some styles
This commit is contained in:
parent
9f43593219
commit
678cbb6fea
|
|
@ -1,8 +1,6 @@
|
|||
|
||||
|
||||
.ac-container {
|
||||
margin: 1rem auto 1rem auto;
|
||||
text-align: left;
|
||||
border: 1px solid #c9c9c9;
|
||||
|
||||
> input {
|
||||
display: none;
|
||||
|
|
@ -14,6 +12,10 @@
|
|||
+ section {
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--button-colored-background-hover);
|
||||
}
|
||||
}
|
||||
|
||||
+ label + section {
|
||||
|
|
@ -28,12 +30,12 @@
|
|||
z-index: 20;
|
||||
margin-top: -1px;
|
||||
cursor: pointer;
|
||||
color: var(--text-on-background-color-2);
|
||||
color: #000;
|
||||
font-size: 1rem;
|
||||
border: 1rem solid var(--box-border);
|
||||
background: var(--box-border);
|
||||
|
||||
&:hover {
|
||||
color: var(--text-on-background-color-2);
|
||||
background: var(--button-colored-background-hover);
|
||||
}
|
||||
}
|
||||
|
|
@ -44,8 +46,6 @@
|
|||
height: auto;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
border-left: 1px solid var(--box-border);
|
||||
border-right: 1px solid var(--box-border);
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ article {
|
|||
line-height: 2rem;
|
||||
white-space: normal;
|
||||
|
||||
del, ins {
|
||||
del, ins, mark {
|
||||
padding: 3px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -24,6 +24,10 @@ article {
|
|||
background: #b0f3b0;
|
||||
}
|
||||
|
||||
mark {
|
||||
background: #f9ffa1;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 500;
|
||||
//padding-bottom: 1rem;
|
||||
|
|
|
|||
26
button.scss
26
button.scss
|
|
@ -31,10 +31,19 @@ button, input[type="submit"], input[type="button"], label.button, a.button {
|
|||
&:hover, &:focus {
|
||||
background: var(--button-colored-background-hover);
|
||||
}
|
||||
|
||||
i {
|
||||
margin: 0 .5rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
button.save, .button.save {
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
background: #8fff79;
|
||||
|
||||
&:hover, &:focus {
|
||||
background: #a1ffa1;
|
||||
}
|
||||
}
|
||||
|
||||
button.cancel, .button.cancel {
|
||||
|
|
@ -45,10 +54,21 @@ button.cancel, .button.cancel {
|
|||
}
|
||||
}
|
||||
|
||||
button.delete, .button.delete {
|
||||
button.close, .button.close {
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
background: #f1ff70;
|
||||
|
||||
&:hover, &:focus {
|
||||
background: #faffa1;
|
||||
}
|
||||
}
|
||||
|
||||
button.ok, .button.ok {
|
||||
button.disabled, .button.disabled {
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
background: #e1e1e1;
|
||||
cursor: not-allowed;
|
||||
|
||||
}
|
||||
&:hover, &:focus {
|
||||
background: #e1e1e1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -62,6 +62,10 @@ form {
|
|||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
* + .form-group {
|
||||
|
|
|
|||
143
image.scss
143
image.scss
|
|
@ -16,14 +16,6 @@ img {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
&.frame-3 {
|
||||
padding: 1rem;
|
||||
background: #fff;
|
||||
border: 1px solid var(--box-border);
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.rounded {
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
|
|
@ -32,139 +24,4 @@ img {
|
|||
&.bordered {
|
||||
border: 1px solid var(--box-border);;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slidy {
|
||||
0% { left: 0%; }
|
||||
20% { left: 0%; }
|
||||
25% { left: -100%; }
|
||||
45% { left: -100%; }
|
||||
50% { left: -200%; }
|
||||
70% { left: -200%; }
|
||||
75% { left: -300%; }
|
||||
95% { left: -300%; }
|
||||
100% { left: -400%; }
|
||||
}
|
||||
|
||||
div.slider-1 {
|
||||
overflow: hidden;
|
||||
|
||||
figure {
|
||||
position: relative;
|
||||
width: 500%;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
text-align: left;
|
||||
font-size: 0;
|
||||
animation: 30s slidy infinite;
|
||||
|
||||
img {
|
||||
width: 20%; float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slider-2 {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0; top: 0;
|
||||
transition: all 0.5s;
|
||||
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
|
||||
&:checked+label {
|
||||
border-color: #666;
|
||||
opacity: 1;
|
||||
|
||||
+img {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
~ img {
|
||||
opacity: 0;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-top: calc(50% + 15px);
|
||||
margin-left: 15px;
|
||||
border: 3px solid #999;
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
|
||||
img{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slider-3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
.icon-cards {
|
||||
position: relative;
|
||||
width: 60vw;
|
||||
height: 40vw;
|
||||
max-width: 380px;
|
||||
max-height: 250px;
|
||||
margin: 0;
|
||||
perspective: 1000px;
|
||||
|
||||
&-content {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform-style: preserve-3d;
|
||||
transform: translateZ(-30vw) rotateY(0);
|
||||
animation: carousel 30s infinite cubic-bezier(0.77, 0, 0.175, 1) forwards;
|
||||
}
|
||||
|
||||
&-item {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 60vw;
|
||||
height: 40vw;
|
||||
max-width: 380px;
|
||||
max-height: 250px;
|
||||
|
||||
&:nth-child(1) {
|
||||
transform: rotateY(0) translateZ(35vw);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
transform: rotateY(120deg) translateZ(35vw);
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
transform: rotateY(240deg) translateZ(35vw);
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes carousel {
|
||||
0%, 17.5% { transform: translateZ(-35vw) rotateY(0); }
|
||||
27.5%, 45% { transform: translateZ(-35vw) rotateY(-120deg); }
|
||||
55%, 72.5% { transform: translateZ(-35vw) rotateY(-240deg); }
|
||||
82.5%, 100% { transform: translateZ(-35vw) rotateY(-360deg); }
|
||||
}
|
||||
21
input.scss
21
input.scss
|
|
@ -46,10 +46,8 @@ input[type="datetime-local"] {
|
|||
color: var(--input-color);
|
||||
background: var(--input-background);
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
min-width: 70px;
|
||||
max-width: 100%;
|
||||
padding: 7px;
|
||||
font-size: 1rem;
|
||||
border: 1px solid var(--input-border);
|
||||
transition: background 0.3s, border 0.3s;
|
||||
|
|
@ -61,10 +59,25 @@ input[type="datetime-local"] {
|
|||
}
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
background: #efefef;
|
||||
}
|
||||
}
|
||||
|
||||
.textarea,
|
||||
.tag-input,
|
||||
textarea,
|
||||
select:not([multiple]),
|
||||
input[type="password"],
|
||||
input[type="text"],
|
||||
input[type="datetime"],
|
||||
input[type="email"],
|
||||
input[type="date"],
|
||||
input[type="number"],
|
||||
input[type="datetime-local"] {
|
||||
height: 2rem;
|
||||
}
|
||||
|
||||
.inputWrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -214,8 +227,10 @@ input[type="datetime-local"] {
|
|||
a {
|
||||
display: block;
|
||||
|
||||
/*
|
||||
&:hover, &:focus {
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -225,7 +240,7 @@ input[type="datetime-local"] {
|
|||
}
|
||||
}
|
||||
|
||||
input + .popup {
|
||||
input ~ .popup {
|
||||
position: absolute; /* All other options e.g. static, relative resize the container which is bad */
|
||||
display: none;
|
||||
z-index: 3;
|
||||
|
|
|
|||
14
menu.scss
Normal file
14
menu.scss
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
.context-menu {
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
border: 1px solid #ccc;
|
||||
z-index: 1000; // Table headers are sticky which has a z-index of 999. The menu should be above
|
||||
|
||||
label {
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
label:hover {
|
||||
background: var(--table-row-background-hover);
|
||||
}
|
||||
}
|
||||
|
|
@ -173,7 +173,7 @@
|
|||
.timeline label {
|
||||
font-size: 1.3em;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
z-index: 90;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
|
|
|
|||
132
slider.scss
132
slider.scss
|
|
@ -5,4 +5,136 @@
|
|||
ul {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slidy {
|
||||
0% { left: 0%; }
|
||||
20% { left: 0%; }
|
||||
25% { left: -100%; }
|
||||
45% { left: -100%; }
|
||||
50% { left: -200%; }
|
||||
70% { left: -200%; }
|
||||
75% { left: -300%; }
|
||||
95% { left: -300%; }
|
||||
100% { left: -400%; }
|
||||
}
|
||||
|
||||
div.slider-1 {
|
||||
overflow: hidden;
|
||||
|
||||
figure {
|
||||
position: relative;
|
||||
width: 500%;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
text-align: left;
|
||||
font-size: 0;
|
||||
animation: 30s slidy infinite;
|
||||
|
||||
img {
|
||||
width: 20%; float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slider-2 {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0; top: 0;
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
input {
|
||||
display: none;
|
||||
|
||||
&:checked+label {
|
||||
border-color: #666;
|
||||
opacity: 1;
|
||||
|
||||
+img {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
~ img {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-top: calc(50% + 15px);
|
||||
margin-left: 15px;
|
||||
border: 3px solid #999;
|
||||
cursor: pointer;
|
||||
opacity: 0.6;
|
||||
|
||||
img{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slider-3 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
.icon-cards {
|
||||
position: relative;
|
||||
width: 60vw;
|
||||
height: 40vw;
|
||||
max-width: 380px;
|
||||
max-height: 250px;
|
||||
margin: 0;
|
||||
perspective: 1000px;
|
||||
|
||||
&-content {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform-style: preserve-3d;
|
||||
transform: translateZ(-30vw) rotateY(0);
|
||||
animation: carousel 30s infinite cubic-bezier(0.77, 0, 0.175, 1) forwards;
|
||||
}
|
||||
|
||||
&-item {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
max-width: 380px;
|
||||
max-height: 250px;
|
||||
|
||||
&:nth-child(1) {
|
||||
transform: rotateY(0) translateZ(35vw);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
transform: rotateY(120deg) translateZ(35vw);
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
transform: rotateY(240deg) translateZ(35vw);
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes carousel {
|
||||
0%, 17.5% { transform: translateZ(-35vw) rotateY(0); }
|
||||
27.5%, 45% { transform: translateZ(-35vw) rotateY(-120deg); }
|
||||
55%, 72.5% { transform: translateZ(-35vw) rotateY(-240deg); }
|
||||
82.5%, 100% { transform: translateZ(-35vw) rotateY(-360deg); }
|
||||
}
|
||||
687
styles.css
687
styles.css
File diff suppressed because it is too large
Load Diff
|
|
@ -1,4 +1,4 @@
|
|||
@import "clean", "default", "size", "transformation", "alignment", "visibility", "animate", "grid";
|
||||
@import "article", "layout", "draggable", "text", "tooltip", "spinner", "canvas", "form", "icon", "image", "input", "accordion", "alert", "badge", "slider", "blockquote", "breadcrumb", "button", "link", "list", "nav", "note", "pagination", "popup", "progress", "section", "tab", "table", "tag";
|
||||
@import "media";
|
||||
@import "portlet";
|
||||
@import "portlet", "menu";
|
||||
60
tab.scss
60
tab.scss
|
|
@ -7,11 +7,13 @@
|
|||
font-size: 0.9em;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--button-colored-background-hover);
|
||||
border: 1px solid var(--button-colored-background);
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: var(--text-on-background-color-2);
|
||||
background: var(--button-colored-background-hover);
|
||||
border: 1px solid var(--button-colored-background-hover);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -19,11 +21,14 @@
|
|||
.active label:hover, .active label:focus {
|
||||
color: var(--text-on-background-color-2);
|
||||
background: var(--button-colored-background-hover);
|
||||
border: 1px solid var(--button-colored-background-hover);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.active a {
|
||||
cursor: default;
|
||||
.active {
|
||||
label {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
|
|
@ -48,25 +53,25 @@
|
|||
|
||||
.tab-1 {
|
||||
.tab-links {
|
||||
margin: 0;
|
||||
border-bottom: 1px solid var(--box-border);
|
||||
margin: 0 0 10px 1px;
|
||||
|
||||
label {
|
||||
padding: 5px 10px 1px 10px;
|
||||
padding: 5px;
|
||||
background: none;
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.active, .active label {
|
||||
color: var(--text-on-background-color-2);
|
||||
background: var(--button-colored-background);
|
||||
border-bottom: 1px solid var(--button-colored-background);
|
||||
}
|
||||
|
||||
/*
|
||||
.active label {
|
||||
border-top: 1px solid var(--box-border);
|
||||
border-left: 1px solid var(--box-border);
|
||||
border-right: 1px solid var(--box-border);
|
||||
border: 1px solid var(--box-border);
|
||||
}
|
||||
*/
|
||||
|
||||
li {
|
||||
margin: 0 5px 0 0;
|
||||
|
|
@ -75,10 +80,8 @@
|
|||
|
||||
.tab-content {
|
||||
box-sizing: border-box;
|
||||
background: var(--button-colored-background);
|
||||
border-left: 1px solid var(--box-border);
|
||||
border-right: 1px solid var(--box-border);
|
||||
border-bottom: 1px solid var(--box-border);
|
||||
border: 1px solid var(--button-colored-background);
|
||||
background: #fff;
|
||||
|
||||
padding: 10px;
|
||||
}
|
||||
|
|
@ -95,18 +98,13 @@
|
|||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
label {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.active label {
|
||||
border-bottom: 1px solid var(--box-border);
|
||||
border: 1px solid var(--box-border);
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
width: 100%;
|
||||
border-top: 1px solid var(--box-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -126,4 +124,26 @@
|
|||
background: var(--button-colored-background)
|
||||
}
|
||||
}
|
||||
|
||||
&.left {
|
||||
display: flex;
|
||||
|
||||
.tab-links {
|
||||
margin: 0;
|
||||
border: none;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.active label {
|
||||
border: 1px solid var(--box-border);
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
11
table.scss
11
table.scss
|
|
@ -1,9 +1,11 @@
|
|||
|
||||
|
||||
table.fixed {
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
table.default tbody tr.drag-placeholder td {
|
||||
border: 2px dashed rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
|
||||
table:not([id]) > thead .sort-asc, table:not([id]) > thead .sort-desc {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -26,6 +28,11 @@ table input[type=radio]:checked + i {
|
|||
color: var(--button-colored-background);
|
||||
}
|
||||
|
||||
// @todo: check!!!!
|
||||
table input[type=checkbox]:checked + label i {
|
||||
color: var(--button-colored-background);
|
||||
}
|
||||
|
||||
table .sort-asc, table .sort-desc, table .filter {
|
||||
padding: 0 2px 0 2px;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -1,873 +0,0 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<base href="http://127.0.0.1/cssOMS/tests/">
|
||||
<title>Style Test</title>
|
||||
<link rel="stylesheet" type="text/css" href="/Resources/fontawesome/css/font-awesome.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="/cssOMS/styles.css">
|
||||
<script src="../../jsOMS/Utils/oLib.js"></script>
|
||||
<script src="../../jsOMS/Asset/AssetManager.js"></script>
|
||||
<script src="../../jsOMS/Autoloader.js"></script>
|
||||
<script src="../../jsOMS/Account/AccountType.js"></script>
|
||||
<script src="../../jsOMS/Account/AccountManager.js"></script>
|
||||
<script src="../../jsOMS/Uri/Http.js"></script>
|
||||
<script src="../../jsOMS/Uri/UriFactory.js"></script>
|
||||
<script src="../../jsOMS/DataStorage/CacheManager.js"></script>
|
||||
<script src="../../jsOMS/DataStorage/LocalStorage.js"></script>
|
||||
<script src="../../jsOMS/DataStorage/StorageManager.js"></script>
|
||||
<script src="../../jsOMS/Event/EventManager.js"></script>
|
||||
<script src="../../jsOMS/Message/Request/BrowserType.js"></script>
|
||||
<script src="../../jsOMS/Message/Request/OSType.js"></script>
|
||||
<script src="../../jsOMS/Message/Request/RequestMethod.js"></script>
|
||||
<script src="../../jsOMS/Message/Request/RequestType.js"></script>
|
||||
<script src="../../jsOMS/Message/Request/Request.js"></script>
|
||||
<script src="../../jsOMS/UI/ActionManager.js"></script>
|
||||
<script src="../../jsOMS/Message/Response/ResponseType.js"></script>
|
||||
<script src="../../jsOMS/Message/Response/ResponseManager.js"></script>
|
||||
<script src="../../jsOMS/Message/Response/Response.js"></script>
|
||||
<script src="../../jsOMS/Message/Notification/App/AppNotification.js"></script>
|
||||
<script src="../../jsOMS/Message/Notification/Browser/BrowserNotification.js"></script>
|
||||
<script src="../../jsOMS/Message/Notification/NotificationType.js"></script>
|
||||
<script src="../../jsOMS/Message/Notification/NotificationLevel.js"></script>
|
||||
<script src="../../jsOMS/Message/Notification/NotificationManager.js"></script>
|
||||
<script src="../../jsOMS/Message/Notification/NotificationMessage.js"></script>
|
||||
<script src="../../jsOMS/Module/ModuleFactory.js"></script>
|
||||
<script src="../../jsOMS/Module/ModuleManager.js"></script>
|
||||
<script src="../../jsOMS/Dispatcher/Dispatcher.js"></script>
|
||||
<script src="../../jsOMS/Log/Logger.js"></script>
|
||||
<script src="../../jsOMS/Log/LogLevel.js"></script>
|
||||
<script src="../../jsOMS/UI/Component/Form.js"></script>
|
||||
<script src="../../jsOMS/UI/Component/Table.js"></script>
|
||||
<script src="../../jsOMS/UI/Input/InputManager.js"></script>
|
||||
<script src="../../jsOMS/UI/Input/Keyboard/KeyboardManager.js"></script>
|
||||
<script src="../../jsOMS/UI/Input/Mouse/ClickType.js"></script>
|
||||
<script src="../../jsOMS/UI/Input/Mouse/EventType.js"></script>
|
||||
<script src="../../jsOMS/UI/Input/Mouse/MouseManager.js"></script>
|
||||
<script src="../../jsOMS/UI/Input/Touch/TouchManager.js"></script>
|
||||
<script src="../../jsOMS/UI/Input/Voice/VoiceManager.js"></script>
|
||||
<script src="../../jsOMS/UI/Input/Voice/ReadManager.js"></script>
|
||||
<script src="../../jsOMS/UI/Input/Voice/SpeechManager.js"></script>
|
||||
<script src="../../jsOMS/UI/Component/Tab.js"></script>
|
||||
<script src="../../jsOMS/UI/Loader.js"></script>
|
||||
<script src="../../jsOMS/UI/DragNDrop.js"></script>
|
||||
<script src="../../jsOMS/UI/GeneralUI.js"></script>
|
||||
<script src="../../jsOMS/UI/UIManager.js"></script>
|
||||
<script src="../../jsOMS/Views/FormView.js"></script>
|
||||
<script src="../../jsOMS/Views/TableView.js"></script>
|
||||
<script src="../../jsOMS/Utils/Parser/Markdown.js"></script>
|
||||
<script src="../../jsOMS/Model/Message/DomActionType.js"></script>
|
||||
<script src="../../jsOMS/Model/Message/DomAction.js"></script>
|
||||
<script src="../../jsOMS/Model/Message/FormValidation.js"></script>
|
||||
<script src="../../jsOMS/Model/Message/NotifyType.js"></script>
|
||||
<script src="../../jsOMS/Model/Message/Notify.js"></script>
|
||||
<script src="../../jsOMS/Model/Message/Redirect.js"></script>
|
||||
<script src="../../jsOMS/Model/Message/Reload.js"></script>
|
||||
<script src="../../jsOMS/Model/Action/Message/Request.js"></script>
|
||||
<script src="../../jsOMS/Model/Action/Message/Log.js"></script>
|
||||
<script src="../../jsOMS/Model/Action/Dom/Popup.js"></script>
|
||||
<script src="../../jsOMS/Model/Action/Dom/Remove.js"></script>
|
||||
<script src="../../jsOMS/Model/Action/Dom/Show.js"></script>
|
||||
<script src="../../jsOMS/Model/Action/Dom/Hide.js"></script>
|
||||
<script src="../../jsOMS/Model/Action/Dom/Focus.js"></script>
|
||||
<script src="../../jsOMS/Model/Action/Dom/Datalist/Clear.js"></script>
|
||||
<script src="../../jsOMS/Model/Action/Dom/Datalist/Append.js"></script>
|
||||
<script src="../../jsOMS/Model/Action/Dom/Table/Clear.js"></script>
|
||||
<script src="../../jsOMS/Model/Action/Dom/Table/Append.js"></script>
|
||||
<script src="../../jsOMS/Model/Action/Utils/Timer.js"></script>
|
||||
<script src="../../jsOMS/Model/Action/Validate/Keypress.js"></script>
|
||||
<script src="../../jsOMS/Model/Action/Dom/SetValue.js"></script>
|
||||
<script src="../../jsOMS/Model/Action/Dom/RemoveValue.js"></script>
|
||||
<script src="../../jsOMS/Model/Action/Dom/GetValue.js"></script>
|
||||
<script src="../../Web/Backend/js/config.js"></script>
|
||||
<script src="../../Web/Backend/js/global/ActionEvents.js"></script>
|
||||
<script src="../../Web/Backend/js/global/KeyboardEvents.js"></script>
|
||||
<script src="../../Web/Backend/js/global/MouseEvents.js"></script>
|
||||
<script src="../../Web/Backend/js/global/ResponseEvents.js"></script>
|
||||
<script src="../../Web/Backend/js/global/TouchEvents.js"></script>
|
||||
<script src="../../Web/Backend/js/global/VoiceEvents.js"></script>
|
||||
<script src="load.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div style="width: 900px; padding: 20px; border: 1px solid #ff000000;" class="center">
|
||||
<h1>Boxes</h1>
|
||||
<h2>Simple</h2>
|
||||
<section class="box center">This is some test text.</section>
|
||||
<section class="box center"><div class="inner">This is some text in a inner box</div></section>
|
||||
<section class="box center"><h1>Headline</h1><div class="inner">This is some text in a inner box</div></section>
|
||||
<section class="box center"><header><h1>Header1</h1></header><div class="inner">This is some text in a inner box</div></section>
|
||||
|
||||
<h2>Colored</h2>
|
||||
<section class="box center red"><header><h1>Header1</h1></header><div class="inner">This is some text in a inner box</div></section>
|
||||
<section class="box center green"><header><h1>Header1</h1></header><div class="inner">This is some text in a inner box</div></section>
|
||||
<section class="box center blue"><header><h1>Header1</h1></header><div class="inner">This is some text in a inner box</div></section>
|
||||
<section class="box center purple"><header><h1>Header1</h1></header><div class="inner">This is some text in a inner box</div></section>
|
||||
<section class="box center orange"><header><h1>Header1</h1></header><div class="inner">This is some text in a inner box</div></section>
|
||||
<section class="box center darkblue"><header><h1>Header1</h1></header><div class="inner">This is some text in a inner box</div></section>
|
||||
|
||||
<h2>Article</h2>
|
||||
<section class="box center">
|
||||
<article>
|
||||
<h1>Headline1</h1>
|
||||
<h2>Headline2</h2>
|
||||
<h3>Headline3</h3>
|
||||
<h4>Headline4</h4>
|
||||
<h5>Headline5</h5>
|
||||
<h6>Headline6</h6>
|
||||
<h7>Headline7</h7>
|
||||
<p><span class="tooltip">Tooltip<i>My Tooltip asd a sd <br>asdfsdf adf asd</i></span> ipsum dolor sit amet,
|
||||
consectetur adipiscing elit. Duis posuere, nulla eu condimentum eleifend, nulla magna viverra risus, ut
|
||||
faucibus libero libero nec est. Nunc quis rhoncus est, ac sodales lorem. Suspendisse convallis, massa eu
|
||||
<a href="#">volutpat</a> posuere, justo dolor porta dui, a ullamcorper ex ipsum eget arcu. Cras quis
|
||||
ante placerat, tempus orci vitae, semper nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
|
||||
cubilia Curae; Duis at sodales sapien. Morbi dolor risus, finibus ut ipsum non, pellentesque varius ex. Etiam
|
||||
pretium tempus diam at eleifend. Quisque a tortor et nisi commodo pretium ac at erat. Nam non iaculis
|
||||
ipsum, ultrices tempus nisl. Pellentesque ornare tellus vehicula sapien fringilla cursus. Duis sed tellus
|
||||
sagittis elit accumsan placerat et nec ex. In sit amet blandit nunc, a pulvinar nunc. Phasellus vulputate
|
||||
facilisis lorem eget aliquet. Curabitur odio ante, lobortis vitae est at, consequat posuere elit.</p>
|
||||
|
||||
<p><span class="tooltip">Lorem<i>My Tooltip asd a sd asdfsdf adf asd</i></span> sed nulla et ante
|
||||
consectetur dictum. Nunc molestie ligula eget felis tincidunt suscipit. Fusce scelerisque diam lectus, non faucibus
|
||||
ligula sagittis eu. Sed id porttitor purus. Donec in dolor scelerisque, suscipit metus in, molestie sem.
|
||||
Nulla facilisi. Nunc eu lobortis tellus.</p>
|
||||
<blockquote>This is a blockquote</blockquote>
|
||||
|
||||
<table>
|
||||
<caption>Table Title</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Col1 Title</td>
|
||||
<td>Col2 Title</td>
|
||||
<td>Col3 Title</td>
|
||||
<td>Col4 Title</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="200">
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<h1>Buttons</h1>
|
||||
<h2>Normal</h2>
|
||||
<section class="box-container center">
|
||||
<button>Test Button</button>
|
||||
<button><i class="fa fa-lightbulb-o"></i> Test Button</button>
|
||||
<button class="red">Test Button</button>
|
||||
<button class="red"><i class="fa fa-lightbulb-o"></i> Test Button</button>
|
||||
<button class="green">Test Button</button>
|
||||
<button class="green"><i class="fa fa-lightbulb-o"></i> Test Button</button>
|
||||
<button class="blue">Test Button</button>
|
||||
<button class="blue"><i class="fa fa-lightbulb-o"></i> Test Button</button>
|
||||
</section>
|
||||
|
||||
<h2>Connected</h2>
|
||||
<section class="box-container">
|
||||
<ul class="btns">
|
||||
<li><a href="">One</a>
|
||||
<li><a href="" class="active">Two</a>
|
||||
<li><a href="">Three</a>
|
||||
<li><a href="">Four</a>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<h1>Tags</h1>
|
||||
<section class="box-container center">
|
||||
<span class="tag green">Test Tag</span>
|
||||
<span class="tag red">Test Tag</span>
|
||||
<span class="tag blue">Test Tag</span>
|
||||
<span class="tag orange">Test Tag</span>
|
||||
<span class="tag lightblue">Test Tag</span>
|
||||
<span class="tag yellow">Test Tag</span>
|
||||
<span class="tag purple">Test Tag</span>
|
||||
<span class="tag pink">Test Tag</span>
|
||||
<span class="tag grey">Test Tag</span>
|
||||
<span class="tag darkred">Test Tag</span>
|
||||
<span class="tag darkgreen">Test Tag</span>
|
||||
<span class="tag darkblue">Test Tag</span>
|
||||
</section>
|
||||
|
||||
<h1>Tooltips</h1>
|
||||
<section class="box center wf-100"><span class="tooltip">Tooltip<i>My Tooltip asd a sd <br>asdfsdf adf asd</i></span></section>
|
||||
|
||||
<h1>Widths</h1>
|
||||
<section class="box wf-100 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-50 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-50 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-33 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-33 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-33 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-75 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-66 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-33 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-50 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<div class="clear"></div>
|
||||
|
||||
<h1>Icons</h1>
|
||||
<section class="center">
|
||||
<i class="fa fa-lg infoIcon fa-envelope">
|
||||
<span class="badge">777</span>
|
||||
</i>
|
||||
<i class="fa fa-lg infoIcon fa-bolt">
|
||||
<span class="badge">5</span>
|
||||
</i>
|
||||
<i class="fa fa-lg infoIcon fa-comment">
|
||||
<span class="badge">999</span>
|
||||
</i>
|
||||
<i class="fa fa-lg infoIcon fa-lightbulb-o">
|
||||
<span class="badge">123</span>
|
||||
</i>
|
||||
<i class="fa fa-lg infoIcon fa-calendar">
|
||||
<span class="badge">33</span>
|
||||
</i>
|
||||
</section>
|
||||
|
||||
<h1>Form</h1>
|
||||
<h2>Default</h2>
|
||||
<section class="box wf-100">
|
||||
<section class="inner center">
|
||||
<form>
|
||||
<table class="layout wf-100">
|
||||
<tr>
|
||||
<td colspan="2"><label>Placeholder</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><input type="text" placeholder=" User">
|
||||
<tr>
|
||||
<td colspan="2"><label>Password</label></td>
|
||||
<tr>
|
||||
<td><input type="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}" placeholder=" Pa55w0rd?">
|
||||
<td>
|
||||
<button>Add</button>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<table class="list">
|
||||
<tr>
|
||||
<td><i class="btn fa fa-times warning"></i><i class="btn fa fa-chevron-up order-up"></i><i
|
||||
class="btn fa fa-chevron-down order-down"></i></td>
|
||||
<td>Value to change</td>
|
||||
<td>Value to change2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="btn fa fa-times warning"></i><i class="btn fa fa-chevron-up order-up"></i><i
|
||||
class="btn fa fa-chevron-down order-down"></i></td>
|
||||
<td>Value to change</td>
|
||||
<td>Value to change2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="btn fa fa-times warning"></i><i class="btn fa fa-chevron-up order-up"></i><i
|
||||
class="btn fa fa-chevron-down order-down"></i></td>
|
||||
<td>Value to change</td>
|
||||
<td>Value to change2</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><label>Datalist</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><input list="test" type="text">
|
||||
<datalist id="test">
|
||||
<option>Chrome</option>
|
||||
<option>IE</option>
|
||||
<option>Opera</option>
|
||||
<option>Safari</option>
|
||||
<option>Firefox</option>
|
||||
</datalist>
|
||||
</td>
|
||||
<tr>
|
||||
<tr>
|
||||
<td colspan="2"><label>Special</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><span class="input"><button><i class="fa fa-pencil"></i></button><input type="text"></span></td>
|
||||
|
||||
<tr>
|
||||
<td colspan="2"><label>Number</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><input type="number" step="any" min="0"></td>
|
||||
<tr>
|
||||
<td><label>Label1</label></td>
|
||||
<td><label>Label2</label>
|
||||
<tr>
|
||||
<td><input type="text"></td>
|
||||
<td><input type="text" pattern="[a-zA-Z]" required>
|
||||
<tr>
|
||||
<td colspan="2"><label>Localtime</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><input type="datetime-local">
|
||||
<tr>
|
||||
<td><label>Label1</label></td>
|
||||
<td><label>Label2</label>
|
||||
<tr>
|
||||
<td><input type="datetime-local"></td>
|
||||
<td><input type="datetime-local">
|
||||
<tr>
|
||||
<td><label>Checkbox</label></td>
|
||||
<td><label>Radio</label></td>
|
||||
<tr>
|
||||
<td><span class="check"><input type="checkbox">Check</span>
|
||||
<td><span class="radio"><input type="radio" name="test">Radio</span>
|
||||
<tr>
|
||||
<td><span class="check"><input type="checkbox">Check</span>
|
||||
<td><span class="radio"><input type="radio" name="test">Radio</span>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><span class="radio"><input type="radio" name="test">Radio</span>
|
||||
<tr>
|
||||
<td><label>Option</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><select>
|
||||
<option>Option1</option>
|
||||
<option>Option2</option>
|
||||
<option>Option3</option>
|
||||
</select>
|
||||
<tr>
|
||||
<td><label>Label1</label></td>
|
||||
<td><label>Label2</label>
|
||||
<tr>
|
||||
<td><select>
|
||||
<option>Option1</option>
|
||||
<option>Option2</option>
|
||||
<option>Option3</option>
|
||||
</select></td>
|
||||
<td>
|
||||
<select>
|
||||
<option>Option1</option>
|
||||
<option>Option2</option>
|
||||
<option>Option3</option>
|
||||
</select>
|
||||
<tr>
|
||||
<td colspan="2"><label>Textarea</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><textarea></textarea>
|
||||
<tr>
|
||||
<td colspan="2"><input type="submit" value="Submit"> <input type="submit" value="Cancel"> <button type="submit">SButton</button>
|
||||
</table>
|
||||
</form>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<h2>Input</h2>
|
||||
<section class="box wf-100">
|
||||
<section class="inner center">
|
||||
<form>
|
||||
<table class="layout wf-100">
|
||||
<tr>
|
||||
<td colspan="2"><label>Input+Autocomplete+Dropdown+Badge</label></td>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div class="advancedInput" id="input1">
|
||||
<div class="inputOuter">
|
||||
<div class="inputbackground">
|
||||
<input autocomplete="off" class="inputClass" id="inputId" type="text" emptyAfterSelect="true" data-src="http://127.0.0.1/en/api/admin/find/account?search={!#inputId}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown" data-active="true">
|
||||
<table>
|
||||
<tbody>
|
||||
<template id="rowElement" class="rowTemplate">
|
||||
<tr tabindex="-1">
|
||||
<td data-tpl-value="/id" data-tpl-name="/id" data-value="">s</td>
|
||||
<td data-tpl-value="/name/0" data-tpl-name="/name/0"></td>
|
||||
<td data-tpl-value="/email" data-tpl-name="/eamil"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="tags" data-active="true">
|
||||
<template id="tagElement" class="tagTemplate">
|
||||
<span data-tpl-value="/name/0" class="badge">
|
||||
<i data-tpl-name="/name/0"></i>
|
||||
<i data-tpl-name="/email"></i>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<tr>
|
||||
<td colspan="2"><label>Input+Autocomplete+Dropdown</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><label>Input+Autocomplete</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><label>Input+Autocomplete+Badge</label></td>
|
||||
</table>
|
||||
</form>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<h2>To List</h2>
|
||||
<section class="box wf-100">
|
||||
<section class="inner center">
|
||||
<form>
|
||||
<table class="layout wf-100">
|
||||
<tr>
|
||||
<td colspan="2"><label>Input+Autocomplete+Dropdown+Badge</label></td>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div class="advancedInput">
|
||||
<div class="inputOuter">
|
||||
<div class="inputbackground">
|
||||
<input type="text" emptyAfterSelect=true>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown" isActive=true>
|
||||
<template id="rowElement"></template>
|
||||
</div>
|
||||
<div class="tags" isActive=true>
|
||||
<template id="tagElement"></template>
|
||||
</div>
|
||||
</div>
|
||||
<tr>
|
||||
<td colspan="2"><label>Input+Autocomplete+Dropdown</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><label>Input+Autocomplete</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><label>Input+Autocomplete+Badge</label></td>
|
||||
</table>
|
||||
</form>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<h2>Dropdown</h2>
|
||||
<section class="box wf-100">
|
||||
<section class="inner center">
|
||||
<form>
|
||||
<table class="layout wf-100">
|
||||
<tr>
|
||||
<td colspan="2"><label>Input+Autocomplete+Dropdown+Badge</label></td>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div class="advancedInput">
|
||||
<div class="inputOuter">
|
||||
<div class="inputbackground">
|
||||
<input type="text" emptyAfterSelect=true>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dropdown" isActive=true>
|
||||
<template id="rowElement"></template>
|
||||
</div>
|
||||
<div class="tags" isActive=true>
|
||||
<template id="tagElement"></template>
|
||||
</div>
|
||||
</div>
|
||||
<tr>
|
||||
<td colspan="2"><label>Input+Autocomplete+Dropdown</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><label>Input+Autocomplete</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><label>Input+Autocomplete+Badge</label></td>
|
||||
</table>
|
||||
</form>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<h1>Navigation</h1>
|
||||
<h2>Content</h2>
|
||||
<section class="wf-100">
|
||||
<ul class="nav-top">
|
||||
<li><a>About</a></li>
|
||||
<li>
|
||||
<a>Portfolio</a>
|
||||
<ul>
|
||||
<li><a>Web Design</a></li>
|
||||
<li><a>Web Development</a></li>
|
||||
<li><a>Illustrations</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a>Blog</a></li>
|
||||
<li><a>Contact</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<h1>Tables</h1>
|
||||
<h2>Neutral</h2>
|
||||
<section class="box-container wf-100">
|
||||
<table class="table">
|
||||
<caption>Table Title</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Col1 Title</td>
|
||||
<td>Col2 Title</td>
|
||||
<td>Col3 Title</td>
|
||||
<td>Col4 Title</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<label>Results: 4</label>
|
||||
<select>
|
||||
<option>25</option>
|
||||
<option>50</option>
|
||||
<option>100</option>
|
||||
<option>500</option>
|
||||
</select>
|
||||
<ul class="pagination">
|
||||
<li><a href="#" class="active">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li>...</li>
|
||||
<li><a href="#">20</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<h1>Tabs</h1>
|
||||
<h2>With Container</h2>
|
||||
<section class="box-container wf-100">
|
||||
<div class="tabview tab-1">
|
||||
<ul class="tab-links">
|
||||
<li><label for="c-tab-1">TAAAB</label></li>
|
||||
<li class="active"><label for="c-tab-2">TAAAB</label></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<input type="radio" id="c-tab-1" name="tabular-1" checked>
|
||||
<div class="tab">
|
||||
Test content
|
||||
</div>
|
||||
<input type="radio" id="c-tab-2" name="tabular-1">
|
||||
<div class="tab">
|
||||
<p>Test content 2</p><p>asdf</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<h2>Without Container</h2>
|
||||
<section class="box-container wf-100">
|
||||
<div class="tabview tab-2">
|
||||
<ul class="tab-links">
|
||||
<li><label for="c-tab2-1">TAAAB</label></li>
|
||||
<li class="active"><label for="c-tab2-2">TAAAB</label></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<input type="radio" id="c-tab2-1" name="tabular-2" checked>
|
||||
<div class="tab">
|
||||
Test content
|
||||
</div>
|
||||
<input type="radio" id="c-tab2-2" name="tabular-2">
|
||||
<div class="tab">
|
||||
<p>Test content 2</p><p>asdf</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<h2>Accordion</h2>
|
||||
<section class="box-container ac-container">
|
||||
<input type="checkbox" name="About us" id="ac-1">
|
||||
<label for="ac-1">About us</label>
|
||||
<section>
|
||||
<p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show
|
||||
that show to the people who make shows, and on the strength of that one show they decide if
|
||||
they're going to make more shows.</p>
|
||||
</section>
|
||||
<input type="checkbox" name="About us" id="ac-2">
|
||||
<label for="ac-2">How we work</label>
|
||||
<section>
|
||||
<p>Like you, I used to think the world was this great place where everybody lived by the same
|
||||
standards I did, then some kid with a nail showed me I was living in his world, a world where
|
||||
chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if
|
||||
you're not willing to play by his rules, then you're gonna have to pay the price. </p>
|
||||
</section>
|
||||
<input type="checkbox" name="About us" id="ac-3" checked>
|
||||
<label for="ac-3">References</label>
|
||||
<section>
|
||||
<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it
|
||||
killed the world once and got a taste for murder. After the avalanche, it took us a week to
|
||||
climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us
|
||||
survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We
|
||||
said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it
|
||||
doesn't hold a candle to man. </p>
|
||||
|
||||
<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it
|
||||
killed the world once and got a taste for murder. After the avalanche, it took us a week to
|
||||
climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us
|
||||
survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We
|
||||
said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it
|
||||
doesn't hold a candle to man. </p>
|
||||
</section>
|
||||
<input type="checkbox" name="About us" id="ac-4">
|
||||
<label for="ac-4">Contact us</label>
|
||||
<section>
|
||||
<p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell
|
||||
everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in
|
||||
the future when the spacecraft encounters a black hole does the computer call it an 'unknown
|
||||
entry event'? Why don't they know? If they don't know, that means we never told anyone. And if
|
||||
we never told anyone it means we never made it back. Hence we die down here. Just as a matter of
|
||||
deductive logic. </p>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<h1>Breadcrumbs</h1>
|
||||
<section class="box-container wf-50 floatLeft">
|
||||
<ul class="crumbs-1">
|
||||
<li><a>One</a></li>
|
||||
<li><a>Two</a></li>
|
||||
<li class="active"><a>Three</a></li>
|
||||
<li><a>Four</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="box-container wf-50 floatLeft">
|
||||
<ul class="crumbs-1">
|
||||
<li><a>One</a></li>
|
||||
<li><a>Two</a></li>
|
||||
<li><a>Three</a></li>
|
||||
<li><a>Four</a></li>
|
||||
<li class="last active"><a>Five</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
<div class="clear"></div>
|
||||
|
||||
<h1>Alerts</h1>
|
||||
<section class="box-container wf-100">
|
||||
<div class="log-msg log-msg-status-ok"><i class="fa fa-check"></i>This is ok</div>
|
||||
</section>
|
||||
<section class="box-container wf-100">
|
||||
<div class="log-msg log-msg-status-info"><i class="fa fa-bell"></i>This is a info</div>
|
||||
</section>
|
||||
<section class="box-container wf-100">
|
||||
<div class="log-msg log-msg-status-warning"><i class="fa fa-exclamation-triangle"></i>This is a warning</div>
|
||||
</section>
|
||||
<section class="box-container wf-100">
|
||||
<div class="log-msg log-msg-status-error"><i class="fa fa-times"></i>This is an error</div>
|
||||
</section>
|
||||
|
||||
<h1>Images</h1>
|
||||
<section class="box-container wf-25 floatLeft">
|
||||
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" class="frame-1" width="200">
|
||||
</section>
|
||||
<section class="box-container wf-25 floatLeft">
|
||||
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" class="frame-2" width="200">
|
||||
</section>
|
||||
<section class="box-container wf-25 floatLeft">
|
||||
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" class="frame-3" width="200">
|
||||
</section>
|
||||
<div class="clear"></div>
|
||||
|
||||
<h1>Ranges</h1>
|
||||
<section class="box">
|
||||
<section class="inner center">
|
||||
<input type="range">
|
||||
</section>
|
||||
</section>
|
||||
<section class="box">
|
||||
<section class="inner center">
|
||||
<progress value="33" max="100"></progress>
|
||||
</section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center">
|
||||
<div class="meter">
|
||||
<span style="width: 25%"></span>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center">
|
||||
<div class="meter blue">
|
||||
<span style="width: 50%"></span>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center">
|
||||
<div class="meter orange">
|
||||
<span style="width: 75%"></span>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center">
|
||||
<div class="meter red">
|
||||
<span style="width: 100%"></span>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<div class="clear"></div>
|
||||
|
||||
<h1>Spinner</h1>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center">
|
||||
<div class="spinner-1"></div>
|
||||
</section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center">
|
||||
<div class="meter blue">
|
||||
<div class="spinner-2">
|
||||
<div class="bounce1"></div>
|
||||
<div class="bounce2"></div>
|
||||
<div class="bounce3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center">
|
||||
<div class="spinner-3">
|
||||
<div class="sk-circle1 sk-circle"></div>
|
||||
<div class="sk-circle2 sk-circle"></div>
|
||||
<div class="sk-circle3 sk-circle"></div>
|
||||
<div class="sk-circle4 sk-circle"></div>
|
||||
<div class="sk-circle5 sk-circle"></div>
|
||||
<div class="sk-circle6 sk-circle"></div>
|
||||
<div class="sk-circle7 sk-circle"></div>
|
||||
<div class="sk-circle8 sk-circle"></div>
|
||||
<div class="sk-circle9 sk-circle"></div>
|
||||
<div class="sk-circle10 sk-circle"></div>
|
||||
<div class="sk-circle11 sk-circle"></div>
|
||||
<div class="sk-circle12 sk-circle"></div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center">
|
||||
<div class="spinner-4"></div>
|
||||
</section>
|
||||
</section>
|
||||
<div class="clear"></div>
|
||||
|
||||
<h1>Slider</h1>
|
||||
<h2>Automatic</h2>
|
||||
<section class="box">
|
||||
<div class="slider-1">
|
||||
<figure>
|
||||
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" alt="">
|
||||
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" alt="">
|
||||
<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" alt="">
|
||||
<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" alt="">
|
||||
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" alt="">
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<h2>Clickable</h2>
|
||||
<section>
|
||||
<div class="slider-2">
|
||||
<input type="radio" name="slide_switch" id="id1"/>
|
||||
<label for="id1">
|
||||
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
|
||||
</label>
|
||||
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/>
|
||||
|
||||
<!--Lets show the second image by default on page load-->
|
||||
<input type="radio" name="slide_switch" id="id2" checked="checked"/>
|
||||
<label for="id2">
|
||||
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
|
||||
</label>
|
||||
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"/>
|
||||
|
||||
<input type="radio" name="slide_switch" id="id3"/>
|
||||
<label for="id3">
|
||||
<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
|
||||
</label>
|
||||
<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"/>
|
||||
|
||||
<input type="radio" name="slide_switch" id="id4"/>
|
||||
<label for="id4">
|
||||
<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
|
||||
</label>
|
||||
<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
9
tests/app/alerts.php
Normal file
9
tests/app/alerts.php
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<div class="log-msg log-msg-status-ok"><i class="fa fa-check"></i>This is ok</div>
|
||||
<div class="log-msg log-msg-status-info"><i class="fa fa-bell"></i>This is a info</div>
|
||||
<div class="log-msg log-msg-status-warning"><i class="fa fa-exclamation-triangle"></i>This is a warning</div>
|
||||
<div class="log-msg log-msg-status-error"><i class="fa fa-times"></i>This is an error</div>
|
||||
|
||||
<div class="log-msg log-msg-status-ok">
|
||||
<h1 class="log-msg-title">This is a Title</h1><i class="close fa fa-times"></i>
|
||||
<div class="log-msg-content">This is a message</div>
|
||||
</div>
|
||||
|
|
@ -1,104 +1,102 @@
|
|||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<section class="box">
|
||||
<article>
|
||||
<h1>Ordered List</h1>
|
||||
<ol>
|
||||
<li>one</li>
|
||||
<li>two</li>
|
||||
</ol>
|
||||
<p>repeating numbers:</p>
|
||||
<ol>
|
||||
<li>one</li>
|
||||
<li>two</li>
|
||||
</ol>
|
||||
<p>large numbers:</p>
|
||||
<ol start="123">
|
||||
<li>one</li>
|
||||
</ol>
|
||||
<h2>Unordered List</h2>
|
||||
<ul>
|
||||
<li>li</li>
|
||||
<li>li</li>
|
||||
</ul>
|
||||
<p>mixed markers:</p>
|
||||
<ul>
|
||||
<li>li</li>
|
||||
<li>li</li>
|
||||
<li>li</li>
|
||||
</ul>
|
||||
<h3>Code</h3>
|
||||
<p>a <code>code span</code></p>
|
||||
<p><code>this is also a codespan</code> trailing text</p>
|
||||
<p><code>and look at this one!</code></p>
|
||||
<p>single backtick in a code span: <code>`</code></p>
|
||||
<p>backtick-delimited string in a code span: <code>`foo`</code></p>
|
||||
<p><code>sth `` sth</code></p>
|
||||
<h4>Code</h4>
|
||||
<pre><code><?php
|
||||
<section class="portlet">
|
||||
<div class="portlet-body">
|
||||
<article>
|
||||
<h1>Text</h1>
|
||||
<p><span class="tooltip">Tooltip<i>My Tooltip asd a sd <br>asdfsdf adf asd</i></span> ipsum dolor sit amet,
|
||||
consectetur adipiscing elit. Duis posuere, nulla eu condimentum eleifend, nulla magna viverra risus, ut
|
||||
faucibus libero libero nec est. Nunc quis rhoncus est, ac sodales lorem. Suspendisse convallis, massa eu
|
||||
<a href="#">volutpat</a> posuere, justo dolor porta dui, a ullamcorper ex ipsum eget arcu. Cras quis
|
||||
ante placerat, tempus orci vitae, semper nunc. Vestibulum <del>ante ipsum primis in</del> faucibus orci luctus et ultrices posuere
|
||||
cubilia Curae; Duis at sodales sapien. Morbi dolor <mark>risus, finibus ut ipsum</mark> non, pellentesque varius ex. Etiam
|
||||
pretium tempus diam at eleifend. Quisque a <strong>tortor et nisi commodo</strong> pretium ac at erat. Nam non iaculis
|
||||
ipsum, ultrices tempus nisl. Pellentesque <em>ornare tellus vehicula sapien</em> fringilla cursus. Duis sed tellus
|
||||
sagittis elit accumsan placerat et nec ex. In sit amet blandit nunc, a pulvinar nunc. Phasellus vulputate
|
||||
facilisis lorem eget aliquet. Curabitur odio ante, <ins>lobortis vitae est at</ins>, consequat posuere elit.</p>
|
||||
|
||||
$message = 'fenced code block';
|
||||
echo $message;</code></pre>
|
||||
<pre><code>tilde</code></pre>
|
||||
<pre><code class="language-php">echo 'language identifier';</code></pre>
|
||||
<h5>Table</h5>
|
||||
<table>
|
||||
<caption>Table Title</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Col1 Title</td>
|
||||
<td>Col2 Title</td>
|
||||
<td>Col3 Title</td>
|
||||
<td>Col4 Title</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h6>Headline6</h6>
|
||||
<p><span class="tooltip">Tooltip<i>My Tooltip asd a sd <br>asdfsdf adf asd</i></span> ipsum dolor sit amet,
|
||||
consectetur adipiscing elit. Duis posuere, nulla eu condimentum eleifend, nulla magna viverra risus, ut
|
||||
faucibus libero libero nec est. Nunc quis rhoncus est, ac sodales lorem. Suspendisse convallis, massa eu
|
||||
<a href="#">volutpat</a> posuere, justo dolor porta dui, a ullamcorper ex ipsum eget arcu. Cras quis
|
||||
ante placerat, tempus orci vitae, semper nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
|
||||
cubilia Curae; Duis at sodales sapien. Morbi dolor risus, finibus ut ipsum non, pellentesque varius ex. Etiam
|
||||
pretium tempus diam at eleifend. Quisque a tortor et nisi commodo pretium ac at erat. Nam non iaculis
|
||||
ipsum, ultrices tempus nisl. Pellentesque ornare tellus vehicula sapien fringilla cursus. Duis sed tellus
|
||||
sagittis elit accumsan placerat et nec ex. In sit amet blandit nunc, a pulvinar nunc. Phasellus vulputate
|
||||
facilisis lorem eget aliquet. Curabitur odio ante, lobortis vitae est at, consequat posuere elit.</p>
|
||||
|
||||
<p><span class="tooltip">Lorem<i>My Tooltip asd a sd asdfsdf adf asd</i></span> sed nulla et ante
|
||||
consectetur dictum. Nunc molestie ligula eget felis tincidunt suscipit. Fusce scelerisque diam lectus, non faucibus
|
||||
ligula sagittis eu. Sed id porttitor purus. Donec in dolor scelerisque, suscipit metus in, molestie sem.
|
||||
Nulla facilisi. Nunc eu lobortis tellus.</p>
|
||||
<blockquote>This is a blockquote</blockquote>
|
||||
<p><span class="tooltip">Lorem<i>My Tooltip asd a sd asdfsdf adf asd</i></span> sed nulla et ante
|
||||
consectetur dictum. Nunc molestie ligula eget felis tincidunt suscipit. Fusce scelerisque diam lectus, non faucibus
|
||||
ligula sagittis eu. Sed id porttitor purus. Donec in dolor scelerisque, suscipit metus in, molestie sem.
|
||||
Nulla facilisi. Nunc eu lobortis tellus.</p>
|
||||
<blockquote>This is a blockquote</blockquote>
|
||||
|
||||
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="200">
|
||||
</article>
|
||||
|
||||
<h2>Ordered List</h2>
|
||||
<ol>
|
||||
<li>one</li>
|
||||
<li>two</li>
|
||||
</ol>
|
||||
<p>repeating numbers:</p>
|
||||
<ol>
|
||||
<li>one</li>
|
||||
<li>two</li>
|
||||
</ol>
|
||||
<p>large numbers:</p>
|
||||
<ol start="123">
|
||||
<li>one</li>
|
||||
</ol>
|
||||
|
||||
<h3>Unordered List</h3>
|
||||
<ul>
|
||||
<li>first element</li>
|
||||
<li>second element</li>
|
||||
<ul>
|
||||
<li>next level</li>
|
||||
</ul>
|
||||
</ul>
|
||||
|
||||
<h4>Code</h4>
|
||||
<p>This is a <code>inline codespan</code> with text in front and at the end.</p>
|
||||
|
||||
<h5>Code</h5>
|
||||
<pre><code><?php
|
||||
|
||||
$message = 'fenced code block';
|
||||
echo $message;</code></pre>
|
||||
<pre><code class="language-php">echo 'language identifier';</code></pre>
|
||||
<h6>Table</h6>
|
||||
<table>
|
||||
<caption>Table Title</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Col1 Title</td>
|
||||
<td>Col2 Title</td>
|
||||
<td>Col3 Title</td>
|
||||
<td>Col4 Title</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,43 +1,32 @@
|
|||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="box">
|
||||
<ul class="btns">
|
||||
<li><a href="">One</a>
|
||||
<li><a href="" class="active">Two</a>
|
||||
<li><a href="">Three</a>
|
||||
<li><a href="">Four</a>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="box">
|
||||
<button>Test Button</button>
|
||||
<button><i class="fa fa-lightbulb-o"></i> Test Button</button>
|
||||
<button class="red">Test Button</button>
|
||||
<button class="red"><i class="fa fa-lightbulb-o"></i> Test Button</button>
|
||||
<button class="green">Test Button</button>
|
||||
<button class="green"><i class="fa fa-lightbulb-o"></i> Test Button</button>
|
||||
<button class="blue">Test Button</button>
|
||||
<button class="blue"><i class="fa fa-lightbulb-o"></i> Test Button</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<section class="box wf-100">
|
||||
<div class="inner">
|
||||
<button>Test Button</button>
|
||||
<button><i class="fa fa-lightbulb-o"></i> Test Button</button>
|
||||
<button class="red">Test Button</button>
|
||||
<button class="red"><i class="fa fa-lightbulb-o"></i> Test Button</button>
|
||||
<button class="green">Test Button</button>
|
||||
<button class="green"><i class="fa fa-lightbulb-o"></i> Test Button</button>
|
||||
<button class="blue">Test Button</button>
|
||||
<button class="blue"><i class="fa fa-lightbulb-o"></i> Test Button</button>
|
||||
<div class="col-xs-12 col-sm-6">
|
||||
<section class="portlet">
|
||||
<div class="portlet-body">
|
||||
<div>
|
||||
Normal:
|
||||
<button>Test Button</button>
|
||||
<button><i class="fa fa-lightbulb-o"></i> Test Button</button>
|
||||
</div>
|
||||
<div>
|
||||
Cancel:
|
||||
<button class="cancel">Test Button</button>
|
||||
<button class="cancel"><i class="fa fa-lightbulb-o"></i> Test Button</button>
|
||||
</div>
|
||||
<div>
|
||||
Save:
|
||||
<button class="save">Test Button</button>
|
||||
<button class="save"><i class="fa fa-lightbulb-o"></i> Test Button</button>
|
||||
</div>
|
||||
<div>
|
||||
Close:
|
||||
<button class="close">Test Button</button>
|
||||
<button class="close"><i class="fa fa-lightbulb-o"></i> Test Button</button>
|
||||
</div>
|
||||
<div>
|
||||
Disabled:
|
||||
<button class="disabled">Test Button</button>
|
||||
<button class="disabled"><i class="fa fa-lightbulb-o"></i> Test Button</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
1
tests/app/data/account.json
Normal file
1
tests/app/data/account.json
Normal file
|
|
@ -0,0 +1 @@
|
|||
[[{"id":1,"name":["admin","",""],"email":"admin@oms.com","login":"admin","groups":[],"permissions":[],"type":0,"status":1,"type_prefix":"a","type_name":"Account"},{"id":3,"name":["admin"],"description":"","permissions":[],"members":[],"email":"---","type_prefix":"g","type_name":"Group"}]]
|
||||
|
|
@ -1,119 +1,170 @@
|
|||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<section class="box wf-100">
|
||||
<header><h1>Default</h1></header>
|
||||
<div class="inner">
|
||||
<form>
|
||||
<table class="layout wf-100">
|
||||
<tr>
|
||||
<td colspan="2"><label>Placeholder</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><input type="text" placeholder=" User">
|
||||
<tr>
|
||||
<td colspan="2"><label>Input+Button+Required</label></td>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div class="col-xs-12">
|
||||
<section class="portlet">
|
||||
<form>
|
||||
<div class="portlet-head">Default</div>
|
||||
<div class="portlet-body">
|
||||
<div class="form-group">
|
||||
<label>Placeholder</label>
|
||||
<input type="text" placeholder=" User">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Disabled</label>
|
||||
<input type="text" value="Some value" disabled>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Input+Button+Required</label>
|
||||
<div class="ipt-wrap">
|
||||
<div class="ipt-first"><input type="text" required></div>
|
||||
<div class="ipt-second"><input type="submit" value="Text"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Password</label>
|
||||
<input type="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Datalist</label>
|
||||
<input list="test" type="text">
|
||||
<datalist id="test">
|
||||
<option>Chrome</option>
|
||||
<option>IE</option>
|
||||
<option>Opera</option>
|
||||
<option>Safari</option>
|
||||
<option>Firefox</option>
|
||||
</datalist>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="input-control">
|
||||
<label>Special</label>
|
||||
<div>
|
||||
<div class="ipt-wrap">
|
||||
<div class="ipt-first"><input type="text" required></div>
|
||||
<div class="ipt-second"><input type="submit" value="Text"></div>
|
||||
<div class="ipt-first">
|
||||
<span class="input"><button type="button"><i class="fa fa-pencil"></i></button>
|
||||
<input type="text"></span>
|
||||
</div>
|
||||
</div>
|
||||
<tr>
|
||||
<td colspan="2"><label>Password</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><input type="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}" placeholder=" Pa55w0rd?">
|
||||
<tr>
|
||||
<td colspan="2"><label>Datalist</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><input list="test" type="text">
|
||||
<datalist id="test">
|
||||
<option>Chrome</option>
|
||||
<option>IE</option>
|
||||
<option>Opera</option>
|
||||
<option>Safari</option>
|
||||
<option>Firefox</option>
|
||||
</datalist>
|
||||
</td>
|
||||
<tr>
|
||||
<tr>
|
||||
<td colspan="2"><label>Special</label></td>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<span class="input"><button type="button"><i class="fa fa-pencil"></i></button><input type="text"></span></td>
|
||||
<tr>
|
||||
<td colspan="2"><label>Number</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><input type="number" step="any" min="0"></td>
|
||||
<tr>
|
||||
<td><label>Label1</label></td>
|
||||
<td><label>Pattern Validation</label>
|
||||
<tr>
|
||||
<td><input type="text"></td>
|
||||
<td><input type="text" pattern="[a-zA-Z]" required>
|
||||
<tr>
|
||||
<td colspan="2"><label>Localtime</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><input type="datetime-local">
|
||||
<tr>
|
||||
<td><label>Localtime</label></td>
|
||||
<td><label>Localtime</label>
|
||||
<tr>
|
||||
<td><input type="datetime-local"></td>
|
||||
<td><input type="datetime-local">
|
||||
<tr>
|
||||
<td><label>Checkbox</label></td>
|
||||
<td><label>Radio</label></td>
|
||||
<tr>
|
||||
<td><span class="check"><input type="checkbox" checked>Check</span>
|
||||
<td><span class="radio"><input type="radio" name="test">Radio</span>
|
||||
<tr>
|
||||
<td><span class="check"><input type="checkbox">Check</span>
|
||||
<td><span class="radio"><input type="radio" name="test" checked>Radio</span>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td><span class="radio"><input type="radio" name="test">Radio</span>
|
||||
<tr>
|
||||
<td><label>Option</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-control">
|
||||
<label>Number</label>
|
||||
<input type="number" step="any" min="0">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="input-control">
|
||||
<label>Label1</label>
|
||||
<input type="text">
|
||||
</div>
|
||||
|
||||
<div class="input-control">
|
||||
<label>Pattern Validation</label>
|
||||
<input type="text" pattern="[a-zA-Z]" required>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="input-control">
|
||||
<label>Datetime</label>
|
||||
<input type="datetime">
|
||||
</div>
|
||||
|
||||
<div class="input-control">
|
||||
<label>Localtime</label>
|
||||
<input type="datetime-local">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="input-control">
|
||||
<label>Checkbox</label>
|
||||
<div>
|
||||
<label class="checkbox" for="checkbox1">
|
||||
<input id="checkbox1" type="checkbox" name="name1" value="1">
|
||||
<span class="checkmark"></span>
|
||||
Check1
|
||||
</label>
|
||||
|
||||
<label class="checkbox" for="checkbox2">
|
||||
<input id="checkbox2" type="checkbox" name="name2" value="2">
|
||||
<span class="checkmark"></span>
|
||||
Check2
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input-control">
|
||||
<label>Radio</label>
|
||||
<div>
|
||||
<label class="radio" for="radio1">
|
||||
<input id="radio1" type="radio" name="radioName" value="1">
|
||||
<span class="checkmark"></span>
|
||||
Radio1
|
||||
</label>
|
||||
|
||||
<label class="radio" for="radio2">
|
||||
<input id="radio2" type="radio" name="radioName" value="2">
|
||||
<span class="checkmark"></span>
|
||||
Radio2
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Option</label>
|
||||
<select>
|
||||
<option>Option1</option>
|
||||
<option>Option2</option>
|
||||
<option>Option3</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Multiselect</label>
|
||||
<select multiple>
|
||||
<option>Option1</option>
|
||||
<option>Option2</option>
|
||||
<option>Option3</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="input-control">
|
||||
<label>Option Default</label>
|
||||
<select>
|
||||
<option disabled selected>Select something</option>
|
||||
<option>Option1</option>
|
||||
<option>Option2</option>
|
||||
<option>Option3</option>
|
||||
</select>
|
||||
<tr>
|
||||
<td><label multiple>Multiselect</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><select multiple>
|
||||
</div>
|
||||
|
||||
<div class="input-control">
|
||||
<label>Select Selected</label>
|
||||
<select>
|
||||
<option>Option1</option>
|
||||
<option>Option2</option>
|
||||
<option selected>Option2</option>
|
||||
<option>Option3</option>
|
||||
</select>
|
||||
<tr>
|
||||
<td><label>Option Default</label></td>
|
||||
<td><label>Select Selected</label>
|
||||
<tr>
|
||||
<td>
|
||||
<select>
|
||||
<option disabled selected>Select something</option>
|
||||
<option>Option1</option>
|
||||
<option>Option2</option>
|
||||
<option>Option3</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<select>
|
||||
<option>Option1</option>
|
||||
<option selected>Option2</option>
|
||||
<option>Option3</option>
|
||||
</select>
|
||||
<tr>
|
||||
<td colspan="2"><label>Textarea</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><textarea></textarea>
|
||||
<tr>
|
||||
<td colspan="2"><input type="submit" value="Submit"> <input type="submit" value="Cancel"> <button type="submit">SButton</button>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Textarea</label>
|
||||
<textarea></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="portlet-foot">
|
||||
<input type="submit" value="Submit"> <input type="submit" value="Cancel"> <button type="submit">SButton</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
468
tests/app/forms_data_selection.php
Normal file
468
tests/app/forms_data_selection.php
Normal file
|
|
@ -0,0 +1,468 @@
|
|||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<section class="portlet">
|
||||
<div class="portlet-head">Input+Autocomplete+Dropdown+Remote</div>
|
||||
<div class="portlet-body">
|
||||
<form>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<section class="portlet">
|
||||
<div class="portlet-head">Input+Autocomplete+Dropdown+Local</div>
|
||||
<div class="portlet-body">
|
||||
<form>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<section class="portlet">
|
||||
<div class="portlet-head">Input+Autocomplete+Dropdown+Badge+Remote</div>
|
||||
<div class="portlet-body">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label>Default</label>
|
||||
<div>
|
||||
<div class="ipt-wrap wf-100">
|
||||
<div class="ipt-first">
|
||||
<span class="input">
|
||||
<button type="button" id="input5-book-button" data-action='[
|
||||
{
|
||||
"key": 1, "listener": "click", "action": [
|
||||
{"key": 1, "type": "dom.popup", "selector": "#acc-grp-tpl", "aniIn": "fadeIn", "id": "input5"},
|
||||
{"key": 2, "type": "message.request", "uri": "http://127.0.0.1/cssOMS/tests/app/data/account.json?filter=some&limit=10", "method": "GET", "request_type": "json"},
|
||||
{"key": 3, "type": "dom.table.append", "id": "acc-table", "aniIn": "fadeIn", "data": [], "bindings": {"id": "id", "name": "name/0"}, "position": -1},
|
||||
{"key": 4, "type": "message.request", "uri": "http://127.0.0.1/cssOMS/tests/app/data/account.json?filter=some&limit=10", "method": "GET", "request_type": "json"},
|
||||
{"key": 5, "type": "dom.table.append", "id": "grp-table", "aniIn": "fadeIn", "data": [], "bindings": {"id": "id", "name": "name/0"}, "position": -1}
|
||||
]
|
||||
}
|
||||
]' formaction=""><i class="fa fa-book"></i></button>
|
||||
<div class="advancedInput wf-100" id="input5">
|
||||
<input autocomplete="off" spellcheck="false" class="input" type="text" id="input5"
|
||||
data-emptyAfter="true"
|
||||
data-autocomplete="off"
|
||||
data-src="http://127.0.0.1/cssOMS/tests/app/data/account.json?filter=some&limit=10">
|
||||
<!-- Normally you put a search string here e.g. api/admin/find/accgrp?search={!#input5} -->
|
||||
<div id="input5-popup" class="popup" data-active="true">
|
||||
<table class="default">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Type<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<tbody>
|
||||
<template id="input5-rowElement" class="rowTemplate">
|
||||
<tr tabindex="-1">
|
||||
<td data-tpl-text="/type_name" data-tpl-value="/type_prefix" data-value="">
|
||||
<td data-tpl-text="/id" data-tpl-value="/id" data-value=""></td>
|
||||
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
|
||||
<td data-tpl-text="/email" data-tpl-value="/email" data-value=""></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="ipt-second"><button>Select</button></div>
|
||||
</div>
|
||||
<div class="box" id="input5-tags" data-limit="0" data-active="true">
|
||||
<template id="input5-tagTemplate">
|
||||
<span class="tag red" data-tpl-value="/id" data-value="" data-uuid="" data-name="input5-tagname">
|
||||
<i class="fa fa-times"></i>
|
||||
<span style="display: none;" data-name="type_prefix" data-tpl-value="/type_prefix" data-value=""></span>
|
||||
<span data-tpl-text="/id" data-name="id" data-tpl-value="/id" data-value=""></span>
|
||||
<span data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></span>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>With starting values</label>
|
||||
<div>
|
||||
<div class="ipt-wrap wf-100">
|
||||
<div class="ipt-first">
|
||||
<span class="input">
|
||||
<button type="button" id="input6-book-button" data-action='[
|
||||
{
|
||||
"key": 1, "listener": "click", "action": [
|
||||
{"key": 1, "type": "dom.popup", "selector": "#acc-grp-tpl", "aniIn": "fadeIn", "id": "input6"},
|
||||
{"key": 2, "type": "message.request", "uri": "http://127.0.0.1/cssOMS/tests/app/data/account.json?filter=some&limit=10", "method": "GET", "request_type": "json"},
|
||||
{"key": 3, "type": "dom.table.append", "id": "acc-table", "aniIn": "fadeIn", "data": [], "bindings": {"id": "id", "name": "name/0"}, "position": -1},
|
||||
{"key": 4, "type": "message.request", "uri": "http://127.0.0.1/cssOMS/tests/app/data/account.json?filter=some&limit=10", "method": "GET", "request_type": "json"},
|
||||
{"key": 5, "type": "dom.table.append", "id": "grp-table", "aniIn": "fadeIn", "data": [], "bindings": {"id": "id", "name": "name/0"}, "position": -1}
|
||||
]
|
||||
}
|
||||
]' formaction=""><i class="fa fa-book"></i></button>
|
||||
<div class="advancedInput wf-100" id="input6">
|
||||
<input autocomplete="off" spellcheck="false" class="input" type="text" id="input6"
|
||||
data-emptyAfter="true"
|
||||
data-autocomplete="off"
|
||||
data-src="http://127.0.0.1/cssOMS/tests/app/data/account.json?filter=some&limit=10">
|
||||
<!-- Normally you put a search string here e.g. api/admin/find/accgrp?search={!#input6} -->
|
||||
<div id="input6-popup" class="popup" data-active="true">
|
||||
<table class="default">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Type<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<tbody>
|
||||
<template id="input6-rowElement" class="rowTemplate">
|
||||
<tr tabindex="-1">
|
||||
<td data-tpl-text="/type_name" data-tpl-value="/type_prefix" data-value="">
|
||||
<td data-tpl-text="/id" data-tpl-value="/id" data-value=""></td>
|
||||
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
|
||||
<td data-tpl-text="/email" data-tpl-value="/email" data-value=""></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="ipt-second"><button>Select</button></div>
|
||||
</div>
|
||||
<div class="box" id="input6-tags" data-limit="0" data-active="true">
|
||||
<template id="input6-tagTemplate">
|
||||
<span class="tag red" data-tpl-value="/id" data-value="" data-uuid="" data-name="input6-tagname">
|
||||
<i class="fa fa-times"></i>
|
||||
<span style="display: none;" data-name="type_prefix" data-tpl-value="/type_prefix" data-value=""></span>
|
||||
<span data-tpl-text="/id" data-name="id" data-tpl-value="/id" data-value=""></span>
|
||||
<span data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></span>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>With mandatory values</label>
|
||||
<div>
|
||||
<div class="ipt-wrap wf-100">
|
||||
<div class="ipt-first">
|
||||
<span class="input">
|
||||
<button type="button" id="input7-book-button" data-action='[
|
||||
{
|
||||
"key": 1, "listener": "click", "action": [
|
||||
{"key": 1, "type": "dom.popup", "selector": "#acc-grp-tpl", "aniIn": "fadeIn", "id": "input7"},
|
||||
{"key": 2, "type": "message.request", "uri": "http://127.0.0.1/cssOMS/tests/app/data/account.json?filter=some&limit=10", "method": "GET", "request_type": "json"},
|
||||
{"key": 3, "type": "dom.table.append", "id": "acc-table", "aniIn": "fadeIn", "data": [], "bindings": {"id": "id", "name": "name/0"}, "position": -1},
|
||||
{"key": 4, "type": "message.request", "uri": "http://127.0.0.1/cssOMS/tests/app/data/account.json?filter=some&limit=10", "method": "GET", "request_type": "json"},
|
||||
{"key": 5, "type": "dom.table.append", "id": "grp-table", "aniIn": "fadeIn", "data": [], "bindings": {"id": "id", "name": "name/0"}, "position": -1}
|
||||
]
|
||||
}
|
||||
]' formaction=""><i class="fa fa-book"></i></button>
|
||||
<div class="advancedInput wf-100" id="input7">
|
||||
<input autocomplete="off" spellcheck="false" class="input" type="text" id="input7"
|
||||
data-emptyAfter="true"
|
||||
data-autocomplete="off"
|
||||
data-src="http://127.0.0.1/cssOMS/tests/app/data/account.json?filter=some&limit=10">
|
||||
<!-- Normally you put a search string here e.g. api/admin/find/accgrp?search={!#input7} -->
|
||||
<div id="input7-popup" class="popup" data-active="true">
|
||||
<table class="default">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Type<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<tbody>
|
||||
<template id="input7-rowElement" class="rowTemplate">
|
||||
<tr tabindex="-1">
|
||||
<td data-tpl-text="/type_name" data-tpl-value="/type_prefix" data-value="">
|
||||
<td data-tpl-text="/id" data-tpl-value="/id" data-value=""></td>
|
||||
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
|
||||
<td data-tpl-text="/email" data-tpl-value="/email" data-value=""></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="ipt-second"><button>Select</button></div>
|
||||
</div>
|
||||
<div class="box" id="input7-tags" data-limit="0" data-active="true">
|
||||
<template id="input7-tagTemplate">
|
||||
<span class="tag red" data-tpl-value="/id" data-value="" data-uuid="" data-name="input7-tagname">
|
||||
<i class="fa fa-times"></i>
|
||||
<span style="display: none;" data-name="type_prefix" data-tpl-value="/type_prefix" data-value=""></span>
|
||||
<span data-tpl-text="/id" data-name="id" data-tpl-value="/id" data-value=""></span>
|
||||
<span data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></span>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<section class="portlet">
|
||||
<div class="portlet-head">Input+Autocomplete+Dropdown+Badge+Local</div>
|
||||
<div class="portlet-body">
|
||||
<form>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<section class="portlet">
|
||||
<div class="portlet-head">Input+Autocomplete+Dropdown+Table+Remote</div>
|
||||
<div class="portlet-body">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label>Default</label>
|
||||
<div>
|
||||
<div class="ipt-wrap wf-100">
|
||||
<div class="ipt-first">
|
||||
<span class="input">
|
||||
<button type="button" id="input11-book-button" data-action='[
|
||||
{
|
||||
"key": 1, "listener": "click", "action": [
|
||||
{"key": 1, "type": "dom.popup", "selector": "#acc-grp-tpl", "aniIn": "fadeIn", "id": "input11"},
|
||||
{"key": 2, "type": "message.request", "uri": "http://127.0.0.1/cssOMS/tests/app/data/account.json?filter=some&limit=10", "method": "GET", "request_type": "json"},
|
||||
{"key": 3, "type": "dom.table.append", "id": "acc-table", "aniIn": "fadeIn", "data": [], "bindings": {"id": "id", "name": "name/0"}, "position": -1},
|
||||
{"key": 4, "type": "message.request", "uri": "http://127.0.0.1/cssOMS/tests/app/data/account.json?filter=some&limit=10", "method": "GET", "request_type": "json"},
|
||||
{"key": 5, "type": "dom.table.append", "id": "grp-table", "aniIn": "fadeIn", "data": [], "bindings": {"id": "id", "name": "name/0"}, "position": -1}
|
||||
]
|
||||
}
|
||||
]' formaction=""><i class="fa fa-book"></i></button>
|
||||
<div class="advancedInput wf-100" id="input11">
|
||||
<input autocomplete="off" spellcheck="false" class="input" type="text" id="input11"
|
||||
data-emptyAfter="true"
|
||||
data-autocomplete="off"
|
||||
data-src="http://127.0.0.1/cssOMS/tests/app/data/account.json?filter=some&limit=10">
|
||||
<!-- Normally you put a search string here e.g. api/admin/find/accgrp?search={!#input11} -->
|
||||
<div id="input11-popup" class="popup" data-active="true">
|
||||
<table class="default">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Type<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<tbody>
|
||||
<template id="input11-rowElement" class="rowTemplate">
|
||||
<tr tabindex="-1">
|
||||
<td data-tpl-text="/type_name" data-tpl-value="/type_prefix" data-value="">
|
||||
<td data-tpl-text="/id" data-tpl-value="/id" data-value=""></td>
|
||||
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
|
||||
<td data-tpl-text="/email" data-tpl-value="/email" data-value=""></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="ipt-second"><button>Select</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="default">
|
||||
<thead>
|
||||
<tr><td>
|
||||
<td>Type
|
||||
<td>ID
|
||||
<td>Name
|
||||
<td>Email
|
||||
</thead>
|
||||
<tbody id="input11-tags" data-limit="0" data-active="true">
|
||||
<template id="input11-tagTemplate">
|
||||
<tr data-tpl-value="/id" data-value="" data-uuid="" data-name="input11-tagname">
|
||||
<td><i class="fa fa-times"></i>
|
||||
<td><span data-tpl-text="/type_name" data-name="type_prefix" data-tpl-value="/type_prefix" data-value=""></span>
|
||||
<td><span data-tpl-text="/id" data-name="id" data-tpl-value="/id" data-value=""></span>
|
||||
<td><span data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></span>
|
||||
<td data-tpl-text="/email" data-tpl-value="/email" data-value="">
|
||||
</span>
|
||||
</template>
|
||||
</table>
|
||||
|
||||
<div class="form-group">
|
||||
<label>With starting values</label>
|
||||
<div>
|
||||
<div class="ipt-wrap wf-100">
|
||||
<div class="ipt-first">
|
||||
<span class="input">
|
||||
<button type="button" id="input12-book-button" data-action='[
|
||||
{
|
||||
"key": 1, "listener": "click", "action": [
|
||||
{"key": 1, "type": "dom.popup", "selector": "#acc-grp-tpl", "aniIn": "fadeIn", "id": "input12"},
|
||||
{"key": 2, "type": "message.request", "uri": "http://127.0.0.1/cssOMS/tests/app/data/account.json?filter=some&limit=10", "method": "GET", "request_type": "json"},
|
||||
{"key": 3, "type": "dom.table.append", "id": "acc-table", "aniIn": "fadeIn", "data": [], "bindings": {"id": "id", "name": "name/0"}, "position": -1},
|
||||
{"key": 4, "type": "message.request", "uri": "http://127.0.0.1/cssOMS/tests/app/data/account.json?filter=some&limit=10", "method": "GET", "request_type": "json"},
|
||||
{"key": 5, "type": "dom.table.append", "id": "grp-table", "aniIn": "fadeIn", "data": [], "bindings": {"id": "id", "name": "name/0"}, "position": -1}
|
||||
]
|
||||
}
|
||||
]' formaction=""><i class="fa fa-book"></i></button>
|
||||
<div class="advancedInput wf-100" id="input12">
|
||||
<input autocomplete="off" spellcheck="false" class="input" type="text" id="input12"
|
||||
data-emptyAfter="true"
|
||||
data-autocomplete="off"
|
||||
data-src="http://127.0.0.1/cssOMS/tests/app/data/account.json?filter=some&limit=10">
|
||||
<!-- Normally you put a search string here e.g. api/admin/find/accgrp?search={!#input12} -->
|
||||
<div id="input12-popup" class="popup" data-active="true">
|
||||
<table class="default">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Type<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<tbody>
|
||||
<template id="input12-rowElement" class="rowTemplate">
|
||||
<tr tabindex="-1">
|
||||
<td data-tpl-text="/type_name" data-tpl-value="/type_prefix" data-value="">
|
||||
<td data-tpl-text="/id" data-tpl-value="/id" data-value=""></td>
|
||||
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
|
||||
<td data-tpl-text="/email" data-tpl-value="/email" data-value=""></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="ipt-second"><button>Select</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="default">
|
||||
<thead>
|
||||
<tr><td>
|
||||
<td>Type
|
||||
<td>ID
|
||||
<td>Name
|
||||
<td>Email
|
||||
</thead>
|
||||
<tbody id="input12-tags" data-limit="0" data-active="true">
|
||||
<template id="input12-tagTemplate">
|
||||
<tr data-tpl-value="/id" data-value="" data-uuid="" data-name="input12-tagname">
|
||||
<td><i class="fa fa-times"></i>
|
||||
<td><span data-tpl-text="/type_name" data-name="type_prefix" data-tpl-value="/type_prefix" data-value=""></span>
|
||||
<td><span data-tpl-text="/id" data-name="id" data-tpl-value="/id" data-value=""></span>
|
||||
<td><span data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></span>
|
||||
<td data-tpl-text="/email" data-tpl-value="/email" data-value="">
|
||||
</span>
|
||||
</template>
|
||||
</table>
|
||||
|
||||
<div class="form-group">
|
||||
<label>With mandatory values</label>
|
||||
<div>
|
||||
<div class="ipt-wrap wf-100">
|
||||
<div class="ipt-first">
|
||||
<span class="input">
|
||||
<button type="button" id="input13-book-button" data-action='[
|
||||
{
|
||||
"key": 1, "listener": "click", "action": [
|
||||
{"key": 1, "type": "dom.popup", "selector": "#acc-grp-tpl", "aniIn": "fadeIn", "id": "input13"},
|
||||
{"key": 2, "type": "message.request", "uri": "http://127.0.0.1/cssOMS/tests/app/data/account.json?filter=some&limit=10", "method": "GET", "request_type": "json"},
|
||||
{"key": 3, "type": "dom.table.append", "id": "acc-table", "aniIn": "fadeIn", "data": [], "bindings": {"id": "id", "name": "name/0"}, "position": -1},
|
||||
{"key": 4, "type": "message.request", "uri": "http://127.0.0.1/cssOMS/tests/app/data/account.json?filter=some&limit=10", "method": "GET", "request_type": "json"},
|
||||
{"key": 5, "type": "dom.table.append", "id": "grp-table", "aniIn": "fadeIn", "data": [], "bindings": {"id": "id", "name": "name/0"}, "position": -1}
|
||||
]
|
||||
}
|
||||
]' formaction=""><i class="fa fa-book"></i></button>
|
||||
<div class="advancedInput wf-100" id="input13">
|
||||
<input autocomplete="off" spellcheck="false" class="input" type="text" id="input13"
|
||||
data-emptyAfter="true"
|
||||
data-autocomplete="off"
|
||||
data-src="http://127.0.0.1/cssOMS/tests/app/data/account.json?filter=some&limit=10">
|
||||
<!-- Normally you put a search string here e.g. api/admin/find/accgrp?search={!#input13} -->
|
||||
<div id="input13-popup" class="popup" data-active="true">
|
||||
<table class="default">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Type<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<tbody>
|
||||
<template id="input13-rowElement" class="rowTemplate">
|
||||
<tr tabindex="-1">
|
||||
<td data-tpl-text="/type_name" data-tpl-value="/type_prefix" data-value="">
|
||||
<td data-tpl-text="/id" data-tpl-value="/id" data-value=""></td>
|
||||
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
|
||||
<td data-tpl-text="/email" data-tpl-value="/email" data-value=""></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="ipt-second"><button>Select</button></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="default">
|
||||
<thead>
|
||||
<tr><td>
|
||||
<td>Type
|
||||
<td>ID
|
||||
<td>Name
|
||||
<td>Email
|
||||
</thead>
|
||||
<tbody id="input13-tags" data-limit="0" data-active="true">
|
||||
<template id="input13-tagTemplate">
|
||||
<tr data-tpl-value="/id" data-value="" data-uuid="" data-name="input13-tagname">
|
||||
<td><i class="fa fa-times"></i>
|
||||
<td><span data-tpl-text="/type_name" data-name="type_prefix" data-tpl-value="/type_prefix" data-value=""></span>
|
||||
<td><span data-tpl-text="/id" data-name="id" data-tpl-value="/id" data-value=""></span>
|
||||
<td><span data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></span>
|
||||
<td data-tpl-text="/email" data-tpl-value="/email" data-value="">
|
||||
</span>
|
||||
</template>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<section class="portlet">
|
||||
<div class="portlet-head">Input+Autocomplete+Dropdown+Table+Local</div>
|
||||
<div class="portlet-body">
|
||||
<form>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import { Request } from "../../../jsOMS/Message/Request/Request.js";
|
||||
|
||||
const loginRequest = new Request('http://127.0.0.1/en/api/login', 'POST', 'json');
|
||||
loginRequest.setData({user: 'admin', pass: 'orange'});
|
||||
loginRequest.send();
|
||||
</script>
|
||||
|
|
@ -1,189 +1,60 @@
|
|||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<section class="box wf-100">
|
||||
<header><h1>Custom</h1></header>
|
||||
<div class="inner">
|
||||
<section class="portlet">
|
||||
<div class="portlet-head">Dropdown</div>
|
||||
<div class="portlet-body">
|
||||
<form>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<section class="portlet">
|
||||
<div class="portlet-head">Multiple Data Dropdown</div>
|
||||
<div class="portlet-body">
|
||||
<form>
|
||||
<table class="layout wf-100">
|
||||
<tr>
|
||||
<td colspan="2"><label>Input+Autocomplete+Dropdown+Badge+Remote</label></td>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div class="advancedInput" id="input1">
|
||||
<div class="inputOuter">
|
||||
<div class="inputbackground">
|
||||
<input autocomplete="off" class="input" id="inputId" type="text" emptyAfterSelect="true" data-autocomplete="true" data-value="/name/0" data-src="http://127.0.0.1/en/api/admin/find/account?search={!#inputId}">
|
||||
<div id="input1-dropdown" class="dropdown" data-active="true">
|
||||
<table id="a1" class="default">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<tbody>
|
||||
<template id="input1-rowElement" class="rowTemplate">
|
||||
<tr tabindex="-1">
|
||||
<td data-tpl-text="/id" data-tpl-value="/id" data-value="">s</td>
|
||||
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
|
||||
<td data-tpl-text="/email"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="input1-tags" class="tags" data-limit="1" data-active="true">
|
||||
<template id="input1-tagTemplate">
|
||||
<span data-tpl-value="/id" data-value="" data-uuid="" class="tag red">
|
||||
<i class="fa fa-times" data-remove=""></i>
|
||||
<i data-tpl-text="/name/0"></i>,
|
||||
<i data-tpl-text="/email"></i>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<tr>
|
||||
<td colspan="2"><label>Input+Autocomplete+Dropdown+Badge+Local</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><label>Input+Autocomplete+Dropdown+Table+Remote</label></td>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div class="advancedInput" id="input2">
|
||||
<div class="inputOuter">
|
||||
<div class="inputbackground">
|
||||
<input autocomplete="off" class="input" id="inputId2" type="text" emptyAfterSelect="true" data-autocomplete="true" data-value="/name/0" data-src="http://127.0.0.1/en/api/admin/find/account?search={!#inputId2}">
|
||||
<div id="input2-dropdown" class="dropdown" data-active="true">
|
||||
<table id="a1" class="default">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<tbody>
|
||||
<template id="input2-rowElement" class="rowTemplate">
|
||||
<tr tabindex="-1">
|
||||
<td data-tpl-text="/id" data-tpl-value="/id" data-value="">s</td>
|
||||
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
|
||||
<td data-tpl-text="/email"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<table class="default">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<tbody id="input2-tags" class="tags" data-limit="0" data-active="true">
|
||||
<template id="input2-tagTemplate">
|
||||
<tr data-tpl-value="/id" data-value="" data-uuid="">
|
||||
<td data-tpl-text="/id" data-tpl-value="/id" data-value=""></td>
|
||||
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
|
||||
<td data-tpl-text="/email"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</table>
|
||||
</div>
|
||||
<tr>
|
||||
<td colspan="2"><label>Input+Autocomplete+Dropdown</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><label>Multiple Input+Autocomplete+External Table</label></td>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div class="advancedInput" id="input4">
|
||||
<div class="inputOuter">
|
||||
<div class="inputbackground">
|
||||
<input autocomplete="off" class="input" id="inputId" type="text" emptyAfterSelect="true" data-autocomplete="true" data-value="/name/0" data-src="http://127.0.0.1/en/api/admin/find/account?search={!#inputId}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="input4-dropdown" class="dropdown" data-active="true">
|
||||
<table id="a1" class="default">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<tbody>
|
||||
<template id="input4-rowElement" class="rowTemplate">
|
||||
<tr tabindex="-1">
|
||||
<td data-tpl-text="/id" data-tpl-value="/id" data-value="">s</td>
|
||||
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
|
||||
<td data-tpl-text="/email"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<table class="default">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<tbody id="input4-tags" class="tags" data-limit="0" data-active="true">
|
||||
<template id="input4-tagTemplate">
|
||||
<tr data-tpl-value="/id" data-value="" data-uuid="">
|
||||
<td data-tpl-text="/id" data-tpl-value="/id" data-value=""></td>
|
||||
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
|
||||
<td data-tpl-text="/email"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</table>
|
||||
<tr>
|
||||
<td colspan="2"><label>Simple remote autocomplete</label></td>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div class="advancedInput" id="input3">
|
||||
<div class="inputOuter">
|
||||
<div class="inputbackground">
|
||||
<input autocomplete="off" class="input" id="inputId" type="text" emptyAfterSelect="true" data-autocomplete="true" data-value="/name/0" data-src="http://127.0.0.1/en/api/admin/find/account?search={!#inputId}">
|
||||
<div id="input3-dropdown" class="dropdown" data-active="true">
|
||||
<table id="a1" class="default">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<tbody>
|
||||
<template id="input3-rowElement" class="rowTemplate">
|
||||
<tr tabindex="-1">
|
||||
<td data-tpl-text="/id" data-tpl-value="/id" data-value="">s</td>
|
||||
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
|
||||
<td data-tpl-text="/email"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="input3-tags" class="tags" data-limit="1" data-active="false"></div>
|
||||
</div>
|
||||
<tr>
|
||||
<td colspan="2"><label>Fancy Dropdown</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><label>Fancy Multiple Dropdown</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><label>Fancy Calendar</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><label>Fancy Time</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><label>Fancy Range Start/End</label></td>
|
||||
<tr>
|
||||
<td colspan="2"><label>Fancy Range End</label></td>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<section class="portlet">
|
||||
<div class="portlet-head">Calendar</div>
|
||||
<div class="portlet-body">
|
||||
<form>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<section class="portlet">
|
||||
<div class="portlet-head">Slider Start/End</div>
|
||||
<div class="portlet-body">
|
||||
<form>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<section class="portlet">
|
||||
<div class="portlet-head">Slider</div>
|
||||
<div class="portlet-body">
|
||||
<form>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="module">
|
||||
import { Request } from "../../../jsOMS/Message/Request/Request.js";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,140 +1,207 @@
|
|||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="box wf-100">
|
||||
<table class="default" id="table1"
|
||||
data-update-content="tbody"
|
||||
data-update-element="tr"
|
||||
data-tag="form"
|
||||
data-update-form="fSample">
|
||||
<caption>Form Add</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>
|
||||
<td>
|
||||
<td>Input<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Select<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Textarea<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Date<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Radio<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Checkbox<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template>
|
||||
<div class="portlet">
|
||||
<div class="portlet-head">
|
||||
External Edit
|
||||
<?php include __DIR__ . '/helper/additional-functions.tpl.php'; ?>
|
||||
<?php include __DIR__ . '/helper/export-data.tpl.php'; ?>
|
||||
</div>
|
||||
<div class="slider">
|
||||
<table class="default sticky" id="table1"
|
||||
data-update-content="tbody"
|
||||
data-update-element="tr"
|
||||
data-tag="form"
|
||||
data-update-form="fSample"><?php $tableId = 'table1'; ?>
|
||||
<thead>
|
||||
<tr>
|
||||
<td><i class="fa fa-times btn remove"></i>
|
||||
<td><i class="fa fa-cogs btn update"></i>
|
||||
<td data-tpl-text="/input" data-tpl-value="/input" data-value=""></td>
|
||||
<td data-tpl-text="/select" data-tpl-value="/select" data-value=""></td>
|
||||
<td data-tpl-text="/text" data-tpl-value="/text" data-value=""></td>
|
||||
<td data-tpl-text="/date" data-tpl-value="/date" data-value=""></td>
|
||||
<td data-tpl-text="/radio" data-tpl-value="/radio" data-value=""></td>
|
||||
<td>
|
||||
<span data-tpl-text="/checkbox/c" data-tpl-value="/checkbox/c" data-value=""><span>
|
||||
<span data-tpl-text="/checkbox/r" data-tpl-value="/checkbox/r" data-value=""><span>
|
||||
<span data-tpl-text="/checkbox/u" data-tpl-value="/checkbox/u" data-value=""><span>
|
||||
<td><?php include __DIR__ . '/helper/checkbox.tpl.php'; ?>
|
||||
<td>Input
|
||||
<?php include __DIR__ . '/helper/sort.tpl.php'; ?>
|
||||
<?php include __DIR__ . '/helper/filter.tpl.php'; ?>
|
||||
</td>
|
||||
<td>Select
|
||||
<?php include __DIR__ . '/helper/sort.tpl.php'; ?>
|
||||
<?php include __DIR__ . '/helper/filter.tpl.php'; ?>
|
||||
</td>
|
||||
<td>Textarea
|
||||
<?php include __DIR__ . '/helper/sort.tpl.php'; ?>
|
||||
<?php include __DIR__ . '/helper/filter.tpl.php'; ?>
|
||||
</td>
|
||||
<td>Date
|
||||
<?php include __DIR__ . '/helper/sort.tpl.php'; ?>
|
||||
<?php include __DIR__ . '/helper/filter.tpl.php'; ?>
|
||||
</td>
|
||||
<td>Radio
|
||||
<?php include __DIR__ . '/helper/sort.tpl.php'; ?>
|
||||
<?php include __DIR__ . '/helper/filter.tpl.php'; ?>
|
||||
</td>
|
||||
<td>Checkbox
|
||||
<?php include __DIR__ . '/helper/sort.tpl.php'; ?>
|
||||
<?php include __DIR__ . '/helper/filter.tpl.php'; ?>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<tr>
|
||||
<td><i class="fa fa-times btn remove"></i>
|
||||
<td><i class="fa fa-cogs btn update"></i>
|
||||
<td data-tpl-text="/input" data-tpl-value="/input" data-value="">Input1</td>
|
||||
<td data-tpl-text="/select" data-tpl-value="/select" data-value="o1">Option1</td>
|
||||
<td data-tpl-text="/text" data-tpl-value="/text" data-value="">Text1</td>
|
||||
<td data-tpl-text="/date" data-tpl-value="/date" data-value="">Col3</td>
|
||||
<td data-tpl-text="/radio" data-tpl-value="/radio" data-value="">Col5</td>
|
||||
<td data-tpl-text="/checkbox/c" data-tpl-value="/checkbox/c" data-value="">Col6</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="fa fa-times btn remove"></i>
|
||||
<td><i class="fa fa-cogs btn update"></i>
|
||||
<td data-tpl-text="/input" data-tpl-value="/input" data-value="">Input2</td>
|
||||
<td data-tpl-text="/select" data-tpl-value="/select" data-value="o2">Option2</td>
|
||||
<td data-tpl-text="/text" data-tpl-value="/text" data-value="">Text2</td>
|
||||
<td data-tpl-text="/date" data-tpl-value="/date" data-value="">Col3</td>
|
||||
<td data-tpl-text="/radio" data-tpl-value="/radio" data-value="">Col5</td>
|
||||
<td data-tpl-text="/checkbox/c" data-tpl-value="/checkbox/c" data-value="">Col6</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="fa fa-times btn remove"></i>
|
||||
<td><i class="fa fa-cogs btn update"></i>
|
||||
<td data-tpl-text="/input" data-tpl-value="/input" data-value="">Input3</td>
|
||||
<td data-tpl-text="/select" data-tpl-value="/select" data-value="o3">Option3</td>
|
||||
<td data-tpl-text="/text" data-tpl-value="/text" data-value="">Text3</td>
|
||||
<td data-tpl-text="/date" data-tpl-value="/date" data-value="">Col4</td>
|
||||
<td data-tpl-text="/radio" data-tpl-value="/radio" data-value="">Col5</td>
|
||||
<td data-tpl-text="/checkbox/c" data-tpl-value="/checkbox/c" data-value="">Col6</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<label>Results: 4</label>
|
||||
<select>
|
||||
<option>25</option>
|
||||
<option>50</option>
|
||||
<option>100</option>
|
||||
<option>500</option>
|
||||
</select>
|
||||
<ul class="pagination">
|
||||
<li><a href="#" class="active">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li>...</li>
|
||||
<li><a href="#">20</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template>
|
||||
<tr>
|
||||
<td><i class="fa fa-times btn remove"></i>
|
||||
<i class="fa fa-cogs btn update"></i>
|
||||
<td><label class="checkbox" for="itable1--">
|
||||
<input type="checkbox" id="itable1--" name="itable1-select">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<td data-tpl-text="/input" data-tpl-value="/input" data-value=""></td>
|
||||
<td data-tpl-text="/select" data-tpl-value="/select" data-value=""></td>
|
||||
<td data-tpl-text="/text" data-tpl-value="/text" data-value=""></td>
|
||||
<td data-tpl-text="/date" data-tpl-value="/date" data-value=""></td>
|
||||
<td data-tpl-text="/radio" data-tpl-value="/radio" data-value=""></td>
|
||||
<td>
|
||||
<span data-tpl-text="/checkbox" data-tpl-value="/checkbox" data-value=""><span>
|
||||
<span data-tpl-text="/checkbox" data-tpl-value="/checkbox" data-value=""><span>
|
||||
<span data-tpl-text="/checkbox" data-tpl-value="/checkbox" data-value=""><span>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<tr draggable="true">
|
||||
<td><i class="fa fa-times btn remove"></i>
|
||||
<i class="fa fa-cogs btn update"></i>
|
||||
<i class="fa fa-chevron-up order-up"></i>
|
||||
<i class="fa fa-chevron-down order-down"></i>
|
||||
<td><?php include __DIR__ . '/helper/checkbox.tpl.php'; ?>
|
||||
<td data-tpl-text="/input" data-tpl-value="/input" data-value="">Input1</td>
|
||||
<td data-tpl-text="/select" data-tpl-value="/select" data-value="o1">Option1</td>
|
||||
<td data-tpl-text="/text" data-tpl-value="/text" data-value="">Text1</td>
|
||||
<td data-tpl-text="/date" data-tpl-value="/date" data-value="">2020-10-13</td>
|
||||
<td data-tpl-text="/radio" data-tpl-value="/radio" data-value="r1">R1</td>
|
||||
<td data-tpl-text="/checkbox" data-tpl-value="/checkbox" data-value="CREATE">Create</td>
|
||||
</tr>
|
||||
<tr draggable="true">
|
||||
<td><i class="fa fa-times btn remove"></i>
|
||||
<i class="fa fa-cogs btn update"></i>
|
||||
<i class="fa fa-chevron-up order-up"></i>
|
||||
<i class="fa fa-chevron-down order-down"></i>
|
||||
<td><?php include __DIR__ . '/helper/checkbox.tpl.php'; ?>
|
||||
<td data-tpl-text="/input" data-tpl-value="/input" data-value="Hidden Input">Input2</td>
|
||||
<td data-tpl-text="/select" data-tpl-value="/select" data-value="o2">Option2</td>
|
||||
<td data-tpl-text="/text" data-tpl-value="/text" data-value="Hidden Text">Text2</td>
|
||||
<td data-tpl-text="/date" data-tpl-value="/date" data-value="1999-02-03">2021-12-22</td>
|
||||
<td data-tpl-text="/radio" data-tpl-value="/radio" data-value="r2">R2</td>
|
||||
<td data-tpl-text="/checkbox" data-tpl-value="/checkbox" data-value="READ">Read</td>
|
||||
</tr>
|
||||
<tr draggable="true">
|
||||
<td><i class="fa fa-times btn remove"></i>
|
||||
<i class="fa fa-cogs btn update"></i>
|
||||
<i class="fa fa-chevron-up order-up"></i>
|
||||
<i class="fa fa-chevron-down order-down"></i>
|
||||
<td><?php include __DIR__ . '/helper/checkbox.tpl.php'; ?>
|
||||
<td data-tpl-text="/input" data-tpl-value="/input" data-value="">Input3</td>
|
||||
<td data-tpl-text="/select" data-tpl-value="/select" data-value="o3">Option3</td>
|
||||
<td data-tpl-text="/text" data-tpl-value="/text" data-value="">Text3</td>
|
||||
<td data-tpl-text="/date" data-tpl-value="/date" data-value="">1989-04-28</td>
|
||||
<td data-tpl-text="/radio" data-tpl-value="/radio" data-value="r3">R3</td>
|
||||
<td data-tpl-text="/checkbox" data-tpl-value="/checkbox" data-value="MODIFY">Modify</td>
|
||||
</tr>
|
||||
<tr draggable="true">
|
||||
<td><i class="fa fa-times btn remove"></i>
|
||||
<i class="fa fa-cogs btn update"></i>
|
||||
<i class="fa fa-chevron-up order-up"></i>
|
||||
<i class="fa fa-chevron-down order-down"></i>
|
||||
<td><?php include __DIR__ . '/helper/checkbox.tpl.php'; ?>
|
||||
<td data-tpl-text="/input" data-tpl-value="/input" data-value="">Input4</td>
|
||||
<td data-tpl-text="/select" data-tpl-value="/select" data-value="o2">Option2</td>
|
||||
<td data-tpl-text="/text" data-tpl-value="/text" data-value="">Text4</td>
|
||||
<td data-tpl-text="/date" data-tpl-value="/date" data-value="">2025-07-04</td>
|
||||
<td data-tpl-text="/radio" data-tpl-value="/radio" data-value="r2">R2</td>
|
||||
<td data-tpl-text="/checkbox" data-tpl-value="/checkbox" data-value="CREATE,MODIFY">Create,Modify</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<section class="box wf-100">
|
||||
<div class="inner">
|
||||
<form id="fSample" action="api/test" method="put">
|
||||
<table class="layout wf-100">
|
||||
<tbody>
|
||||
<tr><td><label for="iInput">Input</label>
|
||||
<tr><td><input id="iInput" name="input" type="text" data-tpl-text="/input" data-tpl-value="/input">
|
||||
<tr><td><label for="iSelect">Select</label>
|
||||
<tr><td><select id="iSelect" name="select" type="text" data-tpl-text="/select" data-tpl-value="/select">
|
||||
<option value="o1">Options1</option>
|
||||
<option value="o2">Options2</option>
|
||||
<option value="o3">Options3</option>
|
||||
</select>
|
||||
<tr><td><label for="iText">Text</label>
|
||||
<tr><td><textarea id="iText" name="text" type="text" data-tpl-text="/text" data-tpl-value="/text"></textarea>
|
||||
<tr><td><label for="iDate">Date</label>
|
||||
<tr><td><input id="iDate" name="date" type="date" data-tpl-text="/date" data-tpl-value="/date">
|
||||
<tr><td><label for="iRadio">Radio</label>
|
||||
<tr><td>
|
||||
<input type="radio" id="iRadio1" name="radio" value="r1" data-tpl-text="/radio" data-tpl-value="/radio"><label for="iRadio1">Radio1</label>
|
||||
<input type="radio" id="iRadio2" name="radio" value="r2" data-tpl-text="/radio" data-tpl-value="/radio"><label for="iRadio2">Radio2</label>
|
||||
<input type="radio" id="iRadio3" name="radio" value="r3" data-tpl-text="/radio" data-tpl-value="/radio"><label for="iRadio3">Radio3</label>
|
||||
<tr><td><label>Checkbox</label>
|
||||
<tr><td>
|
||||
<span class="checkbox">
|
||||
<input id="iPermissionCreate" name="permissioncreate" type="checkbox" value="CREATE" data-tpl-text="/checkbox/c" data-tpl-value="/checkbox/c">
|
||||
<label for="iPermissionCreate">Create</label>
|
||||
</span>
|
||||
<span class="checkbox">
|
||||
<input id="iPermissionRead" name="permissionread" type="checkbox" value="READ" data-tpl-text="/checkbox/r" data-tpl-value="/checkbox/r">
|
||||
<label for="iPermissionRead">Read</label>
|
||||
</span>
|
||||
<span class="checkbox">
|
||||
<input id="iPermissionUpdate" name="permissionupdate" type="checkbox" value="MODIFY" data-tpl-text="/checkbox/u" data-tpl-value="/checkbox/u">
|
||||
<label for="iPermissionUpdate">Update</label>
|
||||
</span>
|
||||
<tr><td>
|
||||
<input type="submit" value="Add">
|
||||
</table>
|
||||
</form>
|
||||
<section class="portlet">
|
||||
<form id="fSample" action="api/test" method="put">
|
||||
<div class="portlet-body">
|
||||
<div class="form-group">
|
||||
<label for="iInput">Input</label>
|
||||
<input id="iInput" name="input" type="text" data-tpl-text="/input" data-tpl-value="/input">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="iSelect">Select</label>
|
||||
<select id="iSelect" name="select" type="text" data-tpl-text="/select" data-tpl-value="/select">
|
||||
<option value="o1">Options1</option>
|
||||
<option value="o2">Options2</option>
|
||||
<option value="o3">Options3</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="iText">Text</label>
|
||||
<textarea id="iText" name="text" type="text" data-tpl-text="/text" data-tpl-value="/text"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="iDate">Date</label>
|
||||
<input id="iDate" name="date" type="date" data-tpl-text="/date" data-tpl-value="/date">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="input-control">
|
||||
<label for="iRadio">Radio</label>
|
||||
<div>
|
||||
<label class="radio" for="iRadio1">
|
||||
<input type="radio" id="iRadio1" name="radio" value="r1" data-tpl-text="/radio" data-tpl-value="/radio">
|
||||
<span class="checkmark"></span>
|
||||
Radio1
|
||||
</label>
|
||||
|
||||
<label class="radio" for="iRadio2">
|
||||
<input type="radio" id="iRadio2" name="radio" value="r2" data-tpl-text="/radio" data-tpl-value="/radio">
|
||||
<span class="checkmark"></span>
|
||||
Radio2
|
||||
</label>
|
||||
|
||||
<label class="radio" for="iRadio3">
|
||||
<input type="radio" id="iRadio3" name="radio" value="r3" data-tpl-text="/radio" data-tpl-value="/radio">
|
||||
<span class="checkmark"></span>
|
||||
Radio3
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="input-control">
|
||||
<label for="iCheckbox">Checkbox</label>
|
||||
<div>
|
||||
<label class="checkbox" for="checkbox1">
|
||||
<input id="checkbox1" name="permissioncreate" type="checkbox" value="CREATE" data-tpl-text="/checkbox" data-tpl-value="/checkbox">
|
||||
<span class="checkmark"></span>
|
||||
Create
|
||||
</label>
|
||||
|
||||
<label class="checkbox" for="checkbox2">
|
||||
<input id="checkbox2" name="permissionread" type="checkbox" value="READ" data-tpl-text="/checkbox" data-tpl-value="/checkbox">
|
||||
<span class="checkmark"></span>
|
||||
Read
|
||||
</label>
|
||||
|
||||
<label class="checkbox" for="checkbox3">
|
||||
<input id="checkbox3" name="permissionupdate" type="checkbox" value="MODIFY" data-tpl-text="/checkbox" data-tpl-value="/checkbox">
|
||||
<span class="checkmark"></span>
|
||||
Update
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="portlet-foot">
|
||||
<input type="submit" value="Add">
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -142,130 +209,143 @@
|
|||
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="box wf-100">
|
||||
<table class="default" id="table2" data-ui-content="tbody" data-ui-element="tr" data-tag="form">
|
||||
<caption>Inline Add</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>
|
||||
<td>
|
||||
<td>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col5 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col6 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template>
|
||||
<div class="portlet">
|
||||
<div class="portlet-head">
|
||||
Inline Eddit
|
||||
<?php include __DIR__ . '/helper/additional-functions.tpl.php'; ?>
|
||||
<?php include __DIR__ . '/helper/export-data.tpl.php'; ?>
|
||||
</div>
|
||||
<div class="slider">
|
||||
<table class="default" id="table2" data-ui-content="tbody" data-ui-element="tr" data-tag="form">
|
||||
<?php $tableId = 'table2'; $tableCheckboxCounter = 0; $tableSortCounter = 0; ?>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>
|
||||
<td><?php include __DIR__ . '/helper/checkbox.tpl.php'; ?>
|
||||
<td>Col1 Title
|
||||
<?php include __DIR__ . '/helper/sort.tpl.php'; ?>
|
||||
<?php include __DIR__ . '/helper/filter.tpl.php'; ?>
|
||||
<td>Col2 Title
|
||||
<?php include __DIR__ . '/helper/sort.tpl.php'; ?>
|
||||
<?php include __DIR__ . '/helper/filter.tpl.php'; ?>
|
||||
<td>Col3 Title
|
||||
<?php include __DIR__ . '/helper/sort.tpl.php'; ?>
|
||||
<?php include __DIR__ . '/helper/filter.tpl.php'; ?>
|
||||
<td>Col4 Title
|
||||
<?php include __DIR__ . '/helper/sort.tpl.php'; ?>
|
||||
<?php include __DIR__ . '/helper/filter.tpl.php'; ?>
|
||||
<td>Col5 Title
|
||||
<?php include __DIR__ . '/helper/sort.tpl.php'; ?>
|
||||
<?php include __DIR__ . '/helper/filter.tpl.php'; ?>
|
||||
<td>Col6 Title
|
||||
<?php include __DIR__ . '/helper/sort.tpl.php'; ?>
|
||||
<?php include __DIR__ . '/helper/filter.tpl.php'; ?>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<template>
|
||||
<tr>
|
||||
<td><i class="fa fa-times btn remove"></i>
|
||||
<i class="fa fa-cogs btn update"></i>
|
||||
<td><label class="checkbox" for="itable2--">
|
||||
<input type="checkbox" id="itable2--" name="itable2-select">
|
||||
<span class="checkmark"></span>
|
||||
<td data-tpl-text="/input" data-tpl-value="/input" data-value=""></td>
|
||||
<td data-tpl-text="/select" data-tpl-value="/select" data-value=""></td>
|
||||
<td data-tpl-text="/text" data-tpl-value="/text" data-value=""></td>
|
||||
<td data-tpl-text="/date" data-tpl-value="/date" data-value=""></td>
|
||||
<td data-tpl-text="/radio" data-tpl-value="/radio" data-value=""></td>
|
||||
<td>
|
||||
<span data-tpl-text="/checkbox" data-tpl-value="/checkbox" data-value=""><span>
|
||||
<span data-tpl-text="/checkbox" data-tpl-value="/checkbox" data-value=""><span>
|
||||
<span data-tpl-text="/checkbox" data-tpl-value="/checkbox" data-value=""><span>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template>
|
||||
<tr>
|
||||
<td><i class="fa fa-times btn remove"></i>
|
||||
<i class="fa fa-cogs btn update"></i>
|
||||
<td><label class="checkbox" for="itable2--">
|
||||
<input type="checkbox" id="itable2--" name="itable2-select">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<td><input data-form="fInside" data-tpl-text="/input" data-tpl-value="/input" data-value="" type="text"></td>
|
||||
<td>
|
||||
<select data-form="fInside" data-tpl-text="/select" data-tpl-value="/select" data-value="">
|
||||
<option value="o1">Option1</option>
|
||||
<option value="o2">Option2</option>
|
||||
<option value="o3">Option3</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<textarea data-form="fInside" data-tpl-text="/text" data-tpl-value="/text" data-value=""></textarea>
|
||||
</td>
|
||||
<td><input data-form="fInside" type="date" data-tpl-text="/date" data-tpl-value="/date" data-value=""></td>
|
||||
<td>
|
||||
<input data-form="fInside" type="radio" id="iRadio1" name="radio" value="r1" data-tpl-text="/radio" data-tpl-value="/radio"><label for="iRadio1">Radio1</label>
|
||||
<input data-form="fInside" type="radio" id="iRadio2" name="radio" value="r2" data-tpl-text="/radio" data-tpl-value="/radio"><label for="iRadio2">Radio2</label>
|
||||
<input data-form="fInside" type="radio" id="iRadio3" name="radio" value="r3" data-tpl-text="/radio" data-tpl-value="/radio"><label for="iRadio3">Radio3</label>
|
||||
</td>
|
||||
<td>
|
||||
<span class="checkbox">
|
||||
<input data-form="fInside" id="iPermissionCreate" name="permissioncreate" type="checkbox" value="CREATE" data-tpl-text="/checkbox" data-tpl-value="/checkbox">
|
||||
<label for="iPermissionCreate">Create</label>
|
||||
</span>
|
||||
<span class="checkbox">
|
||||
<input data-form="fInside" id="iPermissionRead" name="permissionread" type="checkbox" value="READ" data-tpl-text="/checkbox" data-tpl-value="/checkbox">
|
||||
<label for="iPermissionRead">Read</label>
|
||||
</span>
|
||||
<span class="checkbox">
|
||||
<input data-form="fInside" id="iPermissionUpdate" name="permissionupdate" type="checkbox" value="MODIFY" data-tpl-text="/checkbox" data-tpl-value="/checkbox">
|
||||
<label for="iPermissionUpdate">Update</label>
|
||||
</span>
|
||||
<form id="fInside" action="api/test" method="post"><input id="addRowInline" type="submit" value="Add"></form>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
<tr>
|
||||
<td><i class="fa fa-times btn remove"></i>
|
||||
<td><i class="fa fa-cogs btn update"></i>
|
||||
<td data-tpl-text="/input" data-tpl-value="/input" data-value=""></td>
|
||||
<td data-tpl-text="/select" data-tpl-value="/select" data-value=""></td>
|
||||
<td data-tpl-text="/text" data-tpl-value="/text" data-value=""></td>
|
||||
<td data-tpl-text="/date" data-tpl-value="/date" data-value=""></td>
|
||||
<td data-tpl-text="/radio" data-tpl-value="/radio" data-value=""></td>
|
||||
<td>
|
||||
<span data-tpl-text="/checkbox/c" data-tpl-value="/checkbox/c" data-value=""><span>
|
||||
<span data-tpl-text="/checkbox/r" data-tpl-value="/checkbox/r" data-value=""><span>
|
||||
<span data-tpl-text="/checkbox/u" data-tpl-value="/checkbox/u" data-value=""><span>
|
||||
</td>
|
||||
<i class="fa fa-cogs btn update"></i>
|
||||
<i class="fa fa-chevron-up order-up"></i>
|
||||
<i class="fa fa-chevron-down order-down"></i>
|
||||
<td><?php include __DIR__ . '/helper/checkbox.tpl.php'; ?>
|
||||
<td data-tpl-text="/input" data-tpl-value="/input" data-value="">Col2</td>
|
||||
<td data-tpl-text="/select" data-tpl-value="/select" data-value="">Col1</td>
|
||||
<td data-tpl-text="/text" data-tpl-value="/text" data-value="">Col4</td>
|
||||
<td data-tpl-text="/date" data-tpl-value="/date" data-value="">Col3</td>
|
||||
<td data-tpl-text="/radio" data-tpl-value="/radio" data-value="">Col5</td>
|
||||
<td data-tpl-text="/checkbox" data-tpl-value="/checkbox" data-value="">Col6</td>
|
||||
</tr>
|
||||
</template>
|
||||
<template>
|
||||
<tr>
|
||||
<td><i class="fa fa-times btn remove"></i>
|
||||
<td><i class="fa fa-cogs btn update"></i>
|
||||
<td><input data-form="fInside" data-tpl-text="/input" data-tpl-value="/input" data-value="" type="text"></td>
|
||||
<td>
|
||||
<select data-form="fInside" data-tpl-text="/select" data-tpl-value="/select" data-value="">
|
||||
<option value="o1">Option1</option>
|
||||
<option value="o2">Option2</option>
|
||||
<option value="o3">Option3</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<textarea data-form="fInside" data-tpl-text="/text" data-tpl-value="/text" data-value=""></textarea>
|
||||
</td>
|
||||
<td><input data-form="fInside" type="date" data-tpl-text="/date" data-tpl-value="/date" data-value=""></td>
|
||||
<td>
|
||||
<input data-form="fInside" type="radio" id="iRadio1" name="radio" value="r1" data-tpl-text="/radio" data-tpl-value="/radio"><label for="iRadio1">Radio1</label>
|
||||
<input data-form="fInside" type="radio" id="iRadio2" name="radio" value="r2" data-tpl-text="/radio" data-tpl-value="/radio"><label for="iRadio2">Radio2</label>
|
||||
<input data-form="fInside" type="radio" id="iRadio3" name="radio" value="r3" data-tpl-text="/radio" data-tpl-value="/radio"><label for="iRadio3">Radio3</label>
|
||||
</td>
|
||||
<td>
|
||||
<span class="checkbox">
|
||||
<input data-form="fInside" id="iPermissionCreate" name="permissioncreate" type="checkbox" value="CREATE" data-tpl-text="/checkbox/c" data-tpl-value="/checkbox/c">
|
||||
<label for="iPermissionCreate">Create</label>
|
||||
</span>
|
||||
<span class="checkbox">
|
||||
<input data-form="fInside" id="iPermissionRead" name="permissionread" type="checkbox" value="READ" data-tpl-text="/checkbox/r" data-tpl-value="/checkbox/r">
|
||||
<label for="iPermissionRead">Read</label>
|
||||
</span>
|
||||
<span class="checkbox">
|
||||
<input data-form="fInside" id="iPermissionUpdate" name="permissionupdate" type="checkbox" value="MODIFY" data-tpl-text="/checkbox/u" data-tpl-value="/checkbox/u">
|
||||
<label for="iPermissionUpdate">Update</label>
|
||||
</span>
|
||||
<form id="fInside" action="api/test" method="post"><input id="addRowInline" type="submit" value="Add"></form>
|
||||
</td>
|
||||
<i class="fa fa-cogs btn update"></i>
|
||||
<i class="fa fa-chevron-up order-up"></i>
|
||||
<i class="fa fa-chevron-down order-down"></i>
|
||||
<td><?php include __DIR__ . '/helper/checkbox.tpl.php'; ?>
|
||||
<td data-tpl-text="/input" data-tpl-value="/input" data-value="">Col4</td>
|
||||
<td data-tpl-text="/select" data-tpl-value="/select" data-value="">Col1</td>
|
||||
<td data-tpl-text="/text" data-tpl-value="/text" data-value="">Col2</td>
|
||||
<td data-tpl-text="/date" data-tpl-value="/date" data-value="">Col3</td>
|
||||
<td data-tpl-text="/radio" data-tpl-value="/radio" data-value="">Col5</td>
|
||||
<td data-tpl-text="/checkbox" data-tpl-value="/checkbox" data-value="">Col6</td>
|
||||
</tr>
|
||||
</template>
|
||||
<tr>
|
||||
<td><i class="fa fa-times btn remove"></i>
|
||||
<td><i class="fa fa-cogs btn update"></i>
|
||||
<td data-tpl-text="/input" data-tpl-value="/input" data-value="">Col2</td>
|
||||
<td data-tpl-text="/select" data-tpl-value="/select" data-value="">Col1</td>
|
||||
<td data-tpl-text="/text" data-tpl-value="/text" data-value="">Col4</td>
|
||||
<td data-tpl-text="/date" data-tpl-value="/date" data-value="">Col3</td>
|
||||
<td data-tpl-text="/radio" data-tpl-value="/radio" data-value="">Col5</td>
|
||||
<td data-tpl-text="/checkbox/c" data-tpl-value="/checkbox/c" data-value="">Col6</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="fa fa-times btn remove"></i>
|
||||
<td><i class="fa fa-cogs btn update"></i>
|
||||
<td data-tpl-text="/input" data-tpl-value="/input" data-value="">Col4</td>
|
||||
<td data-tpl-text="/select" data-tpl-value="/select" data-value="">Col1</td>
|
||||
<td data-tpl-text="/text" data-tpl-value="/text" data-value="">Col2</td>
|
||||
<td data-tpl-text="/date" data-tpl-value="/date" data-value="">Col3</td>
|
||||
<td data-tpl-text="/radio" data-tpl-value="/radio" data-value="">Col5</td>
|
||||
<td data-tpl-text="/checkbox/c" data-tpl-value="/checkbox/c" data-value="">Col6</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="fa fa-times btn remove"></i>
|
||||
<td><i class="fa fa-cogs btn update"></i>
|
||||
<td data-tpl-text="/input" data-tpl-value="/input" data-value="">Col1</td>
|
||||
<td data-tpl-text="/select" data-tpl-value="/select" data-value="">Col2</td>
|
||||
<td data-tpl-text="/text" data-tpl-value="/text" data-value="">Col3</td>
|
||||
<td data-tpl-text="/date" data-tpl-value="/date" data-value="">Col4</td>
|
||||
<td data-tpl-text="/radio" data-tpl-value="/radio" data-value="">Col5</td>
|
||||
<td data-tpl-text="/checkbox/c" data-tpl-value="/checkbox/c" data-value="">Col6</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<label>Results: 4</label>
|
||||
<select>
|
||||
<option>25</option>
|
||||
<option>50</option>
|
||||
<option>100</option>
|
||||
<option>500</option>
|
||||
</select>
|
||||
<ul class="pagination">
|
||||
<li><a href="#" class="active">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li>...</li>
|
||||
<li><a href="#">20</a></li>
|
||||
</ul>
|
||||
<button id="addButton" class="add">Add</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<tr>
|
||||
<td><i class="fa fa-times btn remove"></i>
|
||||
<i class="fa fa-cogs btn update"></i>
|
||||
<i class="fa fa-chevron-up order-up"></i>
|
||||
<i class="fa fa-chevron-down order-down"></i>
|
||||
<td><?php include __DIR__ . '/helper/checkbox.tpl.php'; ?>
|
||||
<td data-tpl-text="/input" data-tpl-value="/input" data-value="">Col1</td>
|
||||
<td data-tpl-text="/select" data-tpl-value="/select" data-value="">Col2</td>
|
||||
<td data-tpl-text="/text" data-tpl-value="/text" data-value="">Col3</td>
|
||||
<td data-tpl-text="/date" data-tpl-value="/date" data-value="">Col4</td>
|
||||
<td data-tpl-text="/radio" data-tpl-value="/radio" data-value="">Col5</td>
|
||||
<td data-tpl-text="/checkbox" data-tpl-value="/checkbox" data-value="">Col6</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -273,7 +353,7 @@
|
|||
<script type="module">
|
||||
import { Request } from '../../../jsOMS/Message/Request/Request.js';
|
||||
|
||||
const loginRequest = new HttpRequest('http://127.0.0.1/en/api/login', 'POST', 'json');
|
||||
const loginRequest = new Request('http://127.0.0.1/en/api/login', 'POST', 'json');
|
||||
loginRequest.setData({user: 'admin', pass: 'orange'});
|
||||
loginRequest.send();
|
||||
</script>
|
||||
21
tests/app/globalTemplates.tpl.php
Normal file
21
tests/app/globalTemplates.tpl.php
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<template id="table-context-menu-tpl">
|
||||
<div id="table-context-menu" class="context-menu">
|
||||
<ul>
|
||||
<li class="context-line">
|
||||
<label class="checkbox" for="itable1-visibile-">
|
||||
<input type="checkbox" id="itable1-visibile-" name="itable1-visible" checked>
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div id="app-message-container">
|
||||
<template id="app-message-tpl">
|
||||
<div class="log-msg">
|
||||
<h1 class="log-msg-title"></h1><i class="close fa fa-times"></i>
|
||||
<div class="log-msg-content"></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
39
tests/app/helper/additional-functions.tpl.php
Normal file
39
tests/app/helper/additional-functions.tpl.php
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<span class="clickPopup floatRight">
|
||||
<input id="functionDropdown" name="functionDropdown" type="checkbox">
|
||||
<label for="functionDropdown"><i class="fa more-functions fa-ellipsis-v btn"></i></label>
|
||||
<div class="popup">
|
||||
<ul>
|
||||
<li>
|
||||
<input id="id1" type="checkbox">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="id1">
|
||||
<a href="" class="button">Print</a>
|
||||
<span></span>
|
||||
<i class="fa fa-chevron-right expand"></i>
|
||||
</label>
|
||||
<li>Template1
|
||||
<li>Template2 is a long name
|
||||
<li>Template3
|
||||
</ul>
|
||||
<li><a href="" class="button">PDF</a>
|
||||
<li><a href="" class="button">Word</a>
|
||||
<li>
|
||||
<input id="id2" type="checkbox">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="id2">
|
||||
<a href="" class="button">Excel</a>
|
||||
<span></span>
|
||||
<i class="fa fa-chevron-right expand"></i>
|
||||
</label>
|
||||
<li>Template2
|
||||
<li>Template3
|
||||
</ul>
|
||||
<li><a href="" class="button">Csv</a>
|
||||
<li><a href="" class="button">E-Mail</a>
|
||||
<li><a href="" class="button">Download</a>
|
||||
<li><label class="button cancel" for="functionDropdown">Cancel</label>
|
||||
</ul>
|
||||
</div>
|
||||
</span>
|
||||
5
tests/app/helper/checkbox.tpl.php
Normal file
5
tests/app/helper/checkbox.tpl.php
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<?php $tableCheckboxCounter = !isset($tableCheckboxCounter) ? 0 : $tableCheckboxCounter; ?>
|
||||
<label class="checkbox" for="<?= $tableId ?>-check-<?= $tableCheckboxCounter ?>">
|
||||
<input type="checkbox" id="<?= $tableId ?>-check-<?= $tableCheckboxCounter ?>" name="<?= $tableId ?>-check">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
0
tests/app/helper/drag-drop-inline.tpl.php
Normal file
0
tests/app/helper/drag-drop-inline.tpl.php
Normal file
39
tests/app/helper/export-data.tpl.php
Normal file
39
tests/app/helper/export-data.tpl.php
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<span class="clickPopup floatRight">
|
||||
<input id="exportDropdown" name="exportDropdown" type="checkbox">
|
||||
<label for="exportDropdown"><i class="fa fa-download download btn"></i></label>
|
||||
<div class="popup">
|
||||
<ul>
|
||||
<li>
|
||||
<input id="id1" type="checkbox">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="id1">
|
||||
<a href="" class="button">Print</a>
|
||||
<span></span>
|
||||
<i class="fa fa-chevron-right expand"></i>
|
||||
</label>
|
||||
<li>Template1
|
||||
<li>Template2 is a long name
|
||||
<li>Template3
|
||||
</ul>
|
||||
<li><a href="" class="button">PDF</a>
|
||||
<li><a href="" class="button">Word</a>
|
||||
<li>
|
||||
<input id="id2" type="checkbox">
|
||||
<ul>
|
||||
<li>
|
||||
<label for="id2">
|
||||
<a href="" class="button">Excel</a>
|
||||
<span></span>
|
||||
<i class="fa fa-chevron-right expand"></i>
|
||||
</label>
|
||||
<li>Template2
|
||||
<li>Template3
|
||||
</ul>
|
||||
<li><a href="" class="button">Csv</a>
|
||||
<li><a href="" class="button">E-Mail</a>
|
||||
<li><a href="" class="button">Download</a>
|
||||
<li><label class="button cancel" for="exportDropdown">Cancel</label>
|
||||
</ul>
|
||||
</div>
|
||||
</span>
|
||||
35
tests/app/helper/filter.tpl.php
Normal file
35
tests/app/helper/filter.tpl.php
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<!-- @todo: define a id and a counter before, which is then used in here. This way we don't need a view which is too heavy. -->
|
||||
<!-- The variable names must be semi unique so that they are not used in normal templates e.g.: $tableFilterId and $tableFilterCounter. The problem with that is that it is very html heavy since every include imports all of the html below! -->
|
||||
<!-- Alternatively: somehow work with templates (create it once and then let JS create a filter based on that template. The problem here is that different columns might need different filtering option (e.g. datetime, numbers, options, names, ...) -->
|
||||
<span class="clickPopup">
|
||||
<input id="filterDropdown" name="filterDropdown" type="checkbox">
|
||||
<label for="filterDropdown"><i class="filter fa fa-filter btn"></i></label>
|
||||
<div class="popup">
|
||||
<input type="text" name="filterText">
|
||||
|
||||
<select name="valueList">
|
||||
<option>greater
|
||||
<option>greater equals
|
||||
<option>smaller equals
|
||||
<option>smaller
|
||||
</select>
|
||||
|
||||
<label class="button cancel" for="filterDropdown">Cancel</label>
|
||||
<label class="button cancel" for="filterDropdown">Filter</label>
|
||||
<label class="button cancel" for="filterDropdown">Reset</label>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<!--
|
||||
>10 & <12
|
||||
>10 | <12
|
||||
|
||||
>10 and <12
|
||||
>10 or <12
|
||||
|
||||
=11
|
||||
|
||||
11 // finds also 111
|
||||
|
||||
also handle date, numerics, text, tags,
|
||||
-->
|
||||
9
tests/app/helper/sort.tpl.php
Normal file
9
tests/app/helper/sort.tpl.php
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<?php $tableSortCounter = !isset($tableSortCounter) ? 0 : $tableSortCounter; ?>
|
||||
<label for="<?= $tableId ?>-sort-<?= ++$tableSortCounter ?>">
|
||||
<input type="radio" name="<?= $tableId ?>-sort" id="<?= $tableId ?>-sort-<?= $tableSortCounter ?>">
|
||||
<i class="sort-asc fa fa-chevron-up"></i>
|
||||
</label>
|
||||
<label for="<?= $tableId ?>-sort-<?= ++$tableSortCounter ?>">
|
||||
<input type="radio" name="<?= $tableId ?>-sort" id="<?= $tableId ?>-sort-<?= $tableSortCounter ?>">
|
||||
<i class="sort-desc fa fa-chevron-down"></i>
|
||||
</label>
|
||||
|
|
@ -18,10 +18,4 @@
|
|||
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" class="frame-2">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="box wf-100">
|
||||
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" class="frame-3">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -5,186 +5,186 @@
|
|||
<base href="http://127.0.0.1/cssOMS/tests/app/">
|
||||
<title>Style Test</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../styles.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../Web/Backend/css/backend-small.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../Install/Application/Backend/Themes/Default/css/backend-small.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../../Resources/fontawesome/css/font-awesome.min.css">
|
||||
<script src="../../../jsOMS/Utils/oLib.js"></script>
|
||||
<script src="../load.js" type="module"></script>
|
||||
<script src="load.js" type="module"></script>
|
||||
</head>
|
||||
<body>
|
||||
<input type="checkbox" id="nav-trigger" name="nav-hamburger" class="nav-trigger">
|
||||
<nav>
|
||||
<nav id="nav-side">
|
||||
<span id="u-box">
|
||||
<a href="">
|
||||
<img alt="" loading="lazy" src="../../../Web/Backend/img/user_default_6.png">
|
||||
<a href="#">
|
||||
<img alt="User Image" loading="lazy" src="../../../Web/Backend/img/user_default_6.png">
|
||||
</a>
|
||||
<span id="logo">
|
||||
<span>AccountName</span>
|
||||
</span>
|
||||
</span>
|
||||
<span id="logo" itemscope itemtype="http://schema.org/Organization">
|
||||
<div> </div>
|
||||
<select
|
||||
class="plain" id="unit-selector" name="unit"
|
||||
data-action='[{"listener": "change", "action": [{"key": 1, "type": "redirect", "uri": "{%}&u={!#unit-selector}", "target": "self"}]}]'
|
||||
title="Unit selector">
|
||||
<option value="1">Main Unit</option>
|
||||
<option value="2">Secondary Unit</option>
|
||||
</select>
|
||||
<div id="nav-side-settings">
|
||||
<input id="audio-output" type="checkbox">
|
||||
<label for="audio-output"><i class="fa fa-volume-up"></i><i class="fa fa-volume-down"></i></label>
|
||||
|
||||
<ul id="nav-side" class="nav" role="navigation">
|
||||
<li><input id="nav-help" type="checkbox" checked>
|
||||
<ul>
|
||||
<li><label for="nav-Help">
|
||||
<span class="centerText">
|
||||
<i class="fa fa-question-circle"></i>
|
||||
</span>
|
||||
Forms
|
||||
<i class="fa fa-chevron-down min"></i>
|
||||
<i class="fa fa-chevron-up max"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li><a href="?page=forms">Form</a></li>
|
||||
<li><a href="?page=forms_input">Input</a></li>
|
||||
<li><a href="?page=forms_table">Table</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><input id="nav-help" type="checkbox" checked>
|
||||
<ul>
|
||||
<li><label for="nav-Help">
|
||||
<span class="centerText">
|
||||
<i class="fa fa-question-circle"></i>
|
||||
</span>
|
||||
UI Elements
|
||||
<i class="fa fa-chevron-down min"></i>
|
||||
<i class="fa fa-chevron-up max"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li><a href="?page=article">Articles</a></li>
|
||||
<li><a href="?page=buttons">Buttons</a></li>
|
||||
<li><a href="?page=tags">Tags</a></li>
|
||||
<li><a href="?page=panels">Panels</a></li>
|
||||
<li><a href="?page=loaders">Loaders</a></li>
|
||||
<li><a href="?page=tabs">Tabs</a></li>
|
||||
<li><a href="?page=breadcrumbs">Breadcrumbs</a></li>
|
||||
<li><a href="?page=progress">Progress</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><input id="nav-help" type="checkbox" checked>
|
||||
<ul>
|
||||
<li><label for="nav-Help">
|
||||
<span class="centerText">
|
||||
<i class="fa fa-question-circle"></i>
|
||||
</span>
|
||||
Images
|
||||
<i class="fa fa-chevron-down min"></i>
|
||||
<i class="fa fa-chevron-up max"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li><a href="?page=images">Images</a></li>
|
||||
<li><a href="?page=sliders">Sliders</a></li>
|
||||
<li><a href="?page=lazyload">Lazyload</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><input id="nav-help" type="checkbox" checked>
|
||||
<ul>
|
||||
<li><label for="nav-Help">
|
||||
<span class="centerText">
|
||||
<i class="fa fa-question-circle"></i>
|
||||
</span>
|
||||
Tables & Lists
|
||||
<i class="fa fa-chevron-down min"></i>
|
||||
<i class="fa fa-chevron-up max"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li><a href="?page=tables">Tables</a></li>
|
||||
<li><a href="?page=lists">Lists</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><input id="nav-help" type="checkbox" checked>
|
||||
<ul>
|
||||
<li><label for="nav-Help">
|
||||
<span class="centerText">
|
||||
<i class="fa fa-question-circle"></i>
|
||||
</span>
|
||||
Layout
|
||||
<i class="fa fa-chevron-down min"></i>
|
||||
<i class="fa fa-chevron-up max"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li><a href="?page=grid">Grid</a></li>
|
||||
<li><a href="?page=sizes">Sizes</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><input id="nav-help" type="checkbox" checked>
|
||||
<ul>
|
||||
<li><label for="nav-Help">
|
||||
<span class="centerText">
|
||||
<i class="fa fa-question-circle"></i>
|
||||
</span>
|
||||
Interaction
|
||||
<i class="fa fa-chevron-down min"></i>
|
||||
<i class="fa fa-chevron-up max"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li><a href="?page=popups">Popups</a></li>
|
||||
<li><a href="?page=notifications">Notifications</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><input id="nav-help" type="checkbox" checked>
|
||||
<ul>
|
||||
<li><label for="nav-Help">
|
||||
<span class="centerText">
|
||||
<i class="fa fa-question-circle"></i>
|
||||
</span>
|
||||
Views
|
||||
<i class="fa fa-chevron-down min"></i>
|
||||
<i class="fa fa-chevron-up max"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li><a href="?page=editor">Editor</a></li>
|
||||
<li><a href="?page=calendar">Calendar</a></li>
|
||||
<li><a href="?page=navigations">Navigations</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><input id="nav-help" type="checkbox" checked>
|
||||
<ul>
|
||||
<li><label for="nav-Help">
|
||||
<span class="centerText">
|
||||
<i class="fa fa-question-circle"></i>
|
||||
</span>
|
||||
JS Tests
|
||||
<i class="fa fa-chevron-down min"></i>
|
||||
<i class="fa fa-chevron-up max"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li><a href="?page=3d">3D</a></li>
|
||||
<li><a href="?page=actions">Actions</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><input id="nav-help" type="checkbox" checked>
|
||||
<ul>
|
||||
<li><label for="nav-Help">
|
||||
<span class="centerText">
|
||||
<i class="fa fa-question-circle"></i>
|
||||
</span>
|
||||
Charts
|
||||
<i class="fa fa-chevron-down min"></i>
|
||||
<i class="fa fa-chevron-up max"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li><a href="?page=chart_line">Line Chart</a></li>
|
||||
<li><a href="?page=chart_area">Area Chart</a></li>
|
||||
<li><a href="?page=chart_bar">Bar Chart</a></li>
|
||||
<li><a href="?page=chart_column">Column Chart</a></li>
|
||||
<li><a href="?page=chart_waterfall">Waterfall Chart</a></li>
|
||||
<li><a href="?page=chart_pie">Pie Chart</a></li>
|
||||
<li><a href="?page=chart_radar">Radar Chart</a></li>
|
||||
<li><a href="?page=chart_pyramid">Pyramid Chart</a></li>
|
||||
<li><a href="?page=chart_gouge">Gouge Chart</a></li>
|
||||
<li><a href="?page=chart_scatterplot">Scatterplot Chart</a></li>
|
||||
<li><a href="?page=chart_boxplot">Boxplot Chart</a></li>
|
||||
<li><a href="?page=chart_candlestick">Candlestick Chart</a></li>
|
||||
<li><a href="?page=chart_ohlc">OHLC Chart</a></li>
|
||||
<li><a href="?page=chart_calendar">Calendar Chart</a></li>
|
||||
<li><a href="?page=chart_gantt">Gantt Chart</a></li>
|
||||
<li><a href="?page=chart_bubblemap">Bubblemap</a></li>
|
||||
<li><a href="?page=chart_tree">Tree Chart</a></li>
|
||||
<li><a href="?page=chart_bcg">BCG Chart</a></li>
|
||||
<li><a href="?page=chart_map">Map Chart</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<input id="speech-recognition" type="checkbox">
|
||||
<label for="speech-recognition"><i class="fa fa-microphone"></i>
|
||||
</div>
|
||||
</span>
|
||||
<label class="ham-trigger" for="nav-trigger"><i class="fa fa-bars p"></i></label>
|
||||
</span>
|
||||
<div id="nav-side-outer">
|
||||
<ul id="nav-side-inner" class="nav" role="navigation">
|
||||
<li><input id="nav-help" type="checkbox" checked>
|
||||
<ul>
|
||||
<li><label for="nav-Help">
|
||||
<i class="fa fa-question-circle"></i>
|
||||
<span>Forms</span>
|
||||
<i class="fa fa-chevron-down min"></i>
|
||||
<i class="fa fa-chevron-up max"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li><a href="?page=forms">Form</a></li>
|
||||
<li><a href="?page=forms_input">Input</a></li>
|
||||
<li><a href="?page=forms_data_selection">Data Selection</a></li>
|
||||
<li><a href="?page=forms_table">Table</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><input id="nav-help" type="checkbox" checked>
|
||||
<ul>
|
||||
<li><label for="nav-Help">
|
||||
<i class="fa fa-question-circle"></i>
|
||||
<span>UI Elements</span>
|
||||
<i class="fa fa-chevron-down min"></i>
|
||||
<i class="fa fa-chevron-up max"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li><a href="?page=alerts">Alerts</a></li>
|
||||
<li><a href="?page=article">Articles</a></li>
|
||||
<li><a href="?page=buttons">Buttons</a></li>
|
||||
<li><a href="?page=tags">Tags</a></li>
|
||||
<li><a href="?page=panels">Panels</a></li>
|
||||
<li><a href="?page=loaders">Loaders</a></li>
|
||||
<li><a href="?page=tabs">Tabs</a></li>
|
||||
<li><a href="?page=breadcrumbs">Breadcrumbs</a></li>
|
||||
<li><a href="?page=progress">Progress</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><input id="nav-help" type="checkbox" checked>
|
||||
<ul>
|
||||
<li><label for="nav-Help">
|
||||
<i class="fa fa-question-circle"></i>
|
||||
<span>Images</span>
|
||||
<i class="fa fa-chevron-down min"></i>
|
||||
<i class="fa fa-chevron-up max"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li><a href="?page=images">Images</a></li>
|
||||
<li><a href="?page=sliders">Sliders</a></li>
|
||||
<li><a href="?page=lazyload">Lazyload</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><input id="nav-help" type="checkbox" checked>
|
||||
<ul>
|
||||
<li><label for="nav-Help">
|
||||
<i class="fa fa-question-circle"></i>
|
||||
<span>Tables & Lists</span>
|
||||
<i class="fa fa-chevron-down min"></i>
|
||||
<i class="fa fa-chevron-up max"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li><a href="?page=tables">Tables</a></li>
|
||||
<li><a href="?page=lists">Lists</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><input id="nav-help" type="checkbox" checked>
|
||||
<ul>
|
||||
<li><label for="nav-Help">
|
||||
<i class="fa fa-question-circle"></i>
|
||||
<span>Layout</span>
|
||||
<i class="fa fa-chevron-down min"></i>
|
||||
<i class="fa fa-chevron-up max"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li><a href="?page=grid">Grid</a></li>
|
||||
<li><a href="?page=sizes">Sizes</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><input id="nav-help" type="checkbox" checked>
|
||||
<ul>
|
||||
<li><label for="nav-Help">
|
||||
<i class="fa fa-question-circle"></i>
|
||||
<span>Interaction</span>
|
||||
<i class="fa fa-chevron-down min"></i>
|
||||
<i class="fa fa-chevron-up max"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li><a href="?page=popups">Popups</a></li>
|
||||
<li><a href="?page=notifications">Notifications</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><input id="nav-help" type="checkbox" checked>
|
||||
<ul>
|
||||
<li><label for="nav-Help">
|
||||
<i class="fa fa-question-circle"></i>
|
||||
<span>Views</span>
|
||||
<i class="fa fa-chevron-down min"></i>
|
||||
<i class="fa fa-chevron-up max"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li><a href="?page=editor">Editor</a></li>
|
||||
<li><a href="?page=calendar">Calendar</a></li>
|
||||
<li><a href="?page=navigations">Navigations</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><input id="nav-help" type="checkbox" checked>
|
||||
<ul>
|
||||
<li><label for="nav-Help">
|
||||
<i class="fa fa-question-circle"></i>
|
||||
<span>JS Tests</span>
|
||||
<i class="fa fa-chevron-down min"></i>
|
||||
<i class="fa fa-chevron-up max"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li><a href="?page=3d">3D</a></li>
|
||||
<li><a href="?page=actions">Actions</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><input id="nav-help" type="checkbox">
|
||||
<ul>
|
||||
<li><label for="nav-Help">
|
||||
<i class="fa fa-question-circle"></i>
|
||||
<span>Charts (disabled)</span>
|
||||
<i class="fa fa-chevron-down min"></i>
|
||||
<i class="fa fa-chevron-up max"></i>
|
||||
</label>
|
||||
</li>
|
||||
<li><a href="?page=chart_line">Line Chart</a></li>
|
||||
<li><a href="?page=chart_area">Area Chart</a></li>
|
||||
<li><a href="?page=chart_bar">Bar Chart</a></li>
|
||||
<li><a href="?page=chart_column">Column Chart</a></li>
|
||||
<li><a href="?page=chart_waterfall">Waterfall Chart</a></li>
|
||||
<li><a href="?page=chart_pie">Pie Chart</a></li>
|
||||
<li><a href="?page=chart_radar">Radar Chart</a></li>
|
||||
<li><a href="?page=chart_pyramid">Pyramid Chart</a></li>
|
||||
<li><a href="?page=chart_gouge">Gouge Chart</a></li>
|
||||
<li><a href="?page=chart_scatterplot">Scatterplot Chart</a></li>
|
||||
<li><a href="?page=chart_boxplot">Boxplot Chart</a></li>
|
||||
<li><a href="?page=chart_candlestick">Candlestick Chart</a></li>
|
||||
<li><a href="?page=chart_ohlc">OHLC Chart</a></li>
|
||||
<li><a href="?page=chart_calendar">Calendar Chart</a></li>
|
||||
<li><a href="?page=chart_gantt">Gantt Chart</a></li>
|
||||
<li><a href="?page=chart_bubblemap">Bubblemap</a></li>
|
||||
<li><a href="?page=chart_tree">Tree Chart</a></li>
|
||||
<li><a href="?page=chart_bcg">BCG Chart</a></li>
|
||||
<li><a href="?page=chart_map">Map Chart</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<main>
|
||||
<header>
|
||||
|
|
@ -220,6 +220,8 @@
|
|||
<div id="content" class="container-fluid" role="main">
|
||||
<?php include __DIR__ . '/' . \str_replace('.', '', ($_GET['page'] ?? 'welcome')) . '.php'; ?>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<?php include __DIR__ . '/globalTemplates.tpl.php'; ?>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -55,5 +55,3 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -1,26 +1,25 @@
|
|||
import { AssetManager } from '../../jsOMS/Asset/AssetManager.js';
|
||||
import { Logger } from '../../jsOMS/Log/Logger.js';
|
||||
import { CacheManager } from '../../jsOMS/DataStorage/CacheManager.js';
|
||||
import { StorageManager } from '../../jsOMS/DataStorage/StorageManager.js';
|
||||
import { EventManager } from '../../jsOMS/Event/EventManager.js';
|
||||
import { ResponseManager } from '../../jsOMS/Message/Response/ResponseManager.js';
|
||||
import { Dispatcher } from '../../jsOMS/Dispatcher/Dispatcher.js';
|
||||
import { AccountManager } from '../../jsOMS/Account/AccountManager.js';
|
||||
import { UIManager } from '../../jsOMS/UI/UIManager.js';
|
||||
import { InputManager } from '../../jsOMS/UI/Input/InputManager.js';
|
||||
import { ModuleManager } from '../../jsOMS/Module/ModuleManager.js';
|
||||
import { ReadManager } from '../../jsOMS/UI/Input/Voice/ReadManager.js';
|
||||
import { VoiceManager } from '../../jsOMS/UI/Input/Voice/VoiceManager.js';
|
||||
import { NotificationManager } from '../../jsOMS/Message/Notification/NotificationManager.js';
|
||||
import { HttpUri } from '../../jsOMS/Uri/HttpUri.js';
|
||||
import { UriFactory } from '../../jsOMS/Uri/UriFactory.js';
|
||||
|
||||
import { ACTION_EVENTS } from '../../Web/Backend/js/global/ActionEvents.js';
|
||||
import { KEYBOARD_EVENTS } from '../../Web/Backend/js/global/KeyboardEvents.js';
|
||||
import { MOUSE_EVENTS } from '../../Web/Backend/js/global/MouseEvents.js';
|
||||
import { RESPONSE_EVENTS } from '../../Web/Backend/js/global/ResponseEvents.js';
|
||||
import { TOUCH_EVENTS } from '../../Web/Backend/js/global/TouchEvents.js';
|
||||
import { VOICE_EVENTS } from '../../Web/Backend/js/global/VoiceEvents.js';
|
||||
import { AssetManager } from '../../../jsOMS/Asset/AssetManager.js';
|
||||
import { Logger } from '../../../jsOMS/Log/Logger.js';
|
||||
import { CacheManager } from '../../../jsOMS/DataStorage/CacheManager.js';
|
||||
import { StorageManager } from '../../../jsOMS/DataStorage/StorageManager.js';
|
||||
import { EventManager } from '../../../jsOMS/Event/EventManager.js';
|
||||
import { ResponseManager } from '../../../jsOMS/Message/Response/ResponseManager.js';
|
||||
import { Dispatcher } from '../../../jsOMS/Dispatcher/Dispatcher.js';
|
||||
import { AccountManager } from '../../../jsOMS/Account/AccountManager.js';
|
||||
import { UIManager } from '../../../jsOMS/UI/UIManager.js';
|
||||
import { InputManager } from '../../../jsOMS/UI/Input/InputManager.js';
|
||||
import { ModuleManager } from '../../../jsOMS/Module/ModuleManager.js';
|
||||
import { ReadManager } from '../../../jsOMS/UI/Input/Voice/ReadManager.js';
|
||||
import { VoiceManager } from '../../../jsOMS/UI/Input/Voice/VoiceManager.js';
|
||||
import { NotificationManager } from '../../../jsOMS/Message/Notification/NotificationManager.js';
|
||||
import { HttpUri } from '../../../jsOMS/Uri/HttpUri.js';
|
||||
import { UriFactory } from '../../../jsOMS/Uri/UriFactory.js';
|
||||
import { ACTION_EVENTS } from '../../../Web/Backend/js/global/ActionEvents.js';
|
||||
import { KEYBOARD_EVENTS } from '../../../Web/Backend/js/global/KeyboardEvents.js';
|
||||
import { MOUSE_EVENTS } from '../../../Web/Backend/js/global/MouseEvents.js';
|
||||
import { RESPONSE_EVENTS } from '../../../Web/Backend/js/global/ResponseEvents.js';
|
||||
import { TOUCH_EVENTS } from '../../../Web/Backend/js/global/TouchEvents.js';
|
||||
import { VOICE_EVENTS } from '../../../Web/Backend/js/global/VoiceEvents.js';
|
||||
|
||||
export class Application {
|
||||
constructor ()
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<section class="box wf-100">
|
||||
<header><h1>App Notifications</h1></header>
|
||||
<div class="inner">
|
||||
<section class="portlet">
|
||||
<div class="portlet-head">App Notifications</div>
|
||||
<div class="portlet-body">
|
||||
<button id="okButton">OK Message</button>
|
||||
<button id="infoButton">Info Message</button>
|
||||
<button id="warningButton">Warning Message</button>
|
||||
|
|
@ -12,16 +12,22 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="app-message-container" style="position: absolute; margin: 0 auto; right: 1%; top: 1%;">
|
||||
<template id="app-message-tpl">
|
||||
<div class="log-msg" style="z-index: 11; position: relative; margin: 0 auto; right: 0; top: 0; margin-bottom: 10px;">
|
||||
<h1 class="log-msg-title"></h1>
|
||||
<div class="log-msg-content"></div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<section class="portlet">
|
||||
<div class="portlet-head">Special</div>
|
||||
<div class="portlet-body">
|
||||
<button id="vibrateButton">Vibrate Message</button>
|
||||
<button id="stickyButton">Sticky Message</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import { } from '';
|
||||
import { NotificationMessage } from '../../../jsOMS/Message/Notification/NotificationMessage.js';
|
||||
import { NotificationType } from '../../../jsOMS/Message/Notification/NotificationType.js';
|
||||
|
||||
document.getElementById('okButton').addEventListener('click', function() {
|
||||
window.omsApp.notifyManager.send(
|
||||
new NotificationMessage(
|
||||
|
|
@ -61,4 +67,27 @@
|
|||
), NotificationType.APP_NOTIFICATION
|
||||
);
|
||||
});
|
||||
|
||||
document.getElementById('vibrateButton').addEventListener('click', function() {
|
||||
window.omsApp.notifyManager.send(
|
||||
new NotificationMessage(
|
||||
'ok',
|
||||
'Vibrate',
|
||||
'This is a message content.',
|
||||
500
|
||||
), NotificationType.APP_NOTIFICATION
|
||||
);
|
||||
});
|
||||
|
||||
document.getElementById('stickyButton').addEventListener('click', function() {
|
||||
window.omsApp.notifyManager.send(
|
||||
new NotificationMessage(
|
||||
'ok',
|
||||
'Sticky',
|
||||
'This is a message content.',
|
||||
false,
|
||||
true
|
||||
), NotificationType.APP_NOTIFICATION
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,117 +1,18 @@
|
|||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<section class="box red wf-100">
|
||||
<header><h1>Header</h1></header>
|
||||
<div class="inner">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6">
|
||||
<section class="box blue wf-100">
|
||||
<header><h1>Header</h1></header>
|
||||
<div class="inner">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<section class="box green wf-100">
|
||||
<header><h1>Header</h1></header>
|
||||
<div class="inner">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6">
|
||||
<section class="box darkblue wf-100">
|
||||
<header><h1>Header</h1></header>
|
||||
<div class="inner">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<section class="box orange wf-100">
|
||||
<header><h1>Header</h1></header>
|
||||
<div class="inner">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6">
|
||||
<section class="box purple wf-100">
|
||||
<header><h1>Header</h1></header>
|
||||
<div class="inner">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<section class="box lightblue wf-100">
|
||||
<header><h1>Header</h1></header>
|
||||
<div class="inner">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6">
|
||||
<section class="box yellow wf-100">
|
||||
<header><h1>Header</h1></header>
|
||||
<div class="inner">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<section class="box darkred wf-100">
|
||||
<header><h1>Header</h1></header>
|
||||
<div class="inner">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6">
|
||||
<section class="box darkgreen wf-100">
|
||||
<header><h1>Header</h1></header>
|
||||
<div class="inner">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<section class="box wf-100">
|
||||
<header><h1>Header</h1></header>
|
||||
<div class="inner">
|
||||
|
||||
<section class="portlet">
|
||||
<div class="portlet-head">Header</div>
|
||||
<div class="portlet-body">
|
||||
Duis posuere, nulla eu condimentum eleifend, nulla magna viverra risus, ut faucibus libero libero nec est. Nunc quis rhoncus est, ac sodales lorem. Suspendisse convallis, massa eu volutpat posuere, justo dolor porta dui, a ullamcorper ex ipsum eget arcu. Cras quis ante placerat, tempus orci vitae, semper nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis at sodales sapien. Morbi dolor risus, finibus ut ipsum non, pellentesque varius ex.
|
||||
</div>
|
||||
<div class="portlet-foot">Footer</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-6">
|
||||
<section class="box wf-100">
|
||||
<div class="inner">
|
||||
|
||||
Duis posuere, nulla eu condimentum eleifend, nulla magna viverra risus, ut faucibus libero libero nec est. Nunc quis rhoncus est, ac sodales lorem. Suspendisse convallis, massa eu volutpat posuere, justo dolor porta dui, a ullamcorper ex ipsum eget arcu. Cras quis ante placerat, tempus orci vitae, semper nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis at sodales sapien. Morbi dolor risus, finibus ut ipsum non, pellentesque varius ex.;
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,51 +1,53 @@
|
|||
<section class="box wf-100 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-50 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-50 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-33 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-33 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-33 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-75 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-66 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-33 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-50 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<div><!-- The parent element is display: flex; therefore we need to trick the content this way in order to allow floating! -->
|
||||
<section class="box wf-100 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-50 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-50 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-33 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-33 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-33 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-75 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-66 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-33 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-50 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
<section class="box wf-25 floatLeft">
|
||||
<section class="inner center"> </section>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<section class="box">
|
||||
<div class="col-xs-12">
|
||||
<div class="box">
|
||||
<div class="slider-1">
|
||||
<figure>
|
||||
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" alt="">
|
||||
|
|
@ -10,11 +10,13 @@
|
|||
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" alt="">
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<section class="box wf-100">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="box wf-100">
|
||||
<div class="slider-2">
|
||||
<input type="radio" name="slide_switch" id="id1"/>
|
||||
<label for="id1">
|
||||
|
|
@ -41,13 +43,13 @@
|
|||
</label>
|
||||
<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<section class="box">
|
||||
<div class="box">
|
||||
<div class="slider-3">
|
||||
<figure class="icon-cards">
|
||||
<div class="icon-cards-content">
|
||||
|
|
@ -63,6 +65,6 @@
|
|||
</div>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,479 +1,200 @@
|
|||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="box wf-100">
|
||||
<table class="default" id="table1">
|
||||
<caption>Table Title</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td><i class="filter fa fa-filter" data-filter=""></i>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td><i class="filter fa fa-filter"></i>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td><i class="filter fa fa-filter"></i>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td><i class="filter fa fa-filter"></i>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Col2</td>
|
||||
<td>Col1</td>
|
||||
<td>Col4</td>
|
||||
<td>Col3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col4</td>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col2</td>
|
||||
<td>Col1</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<label>Results: 4</label>
|
||||
<select>
|
||||
<option>25</option>
|
||||
<option>50</option>
|
||||
<option>100</option>
|
||||
<option>500</option>
|
||||
</select>
|
||||
<ul class="pagination">
|
||||
<li><a href="#" class="active">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li>...</li>
|
||||
<li><a href="#">20</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="box wf-100">
|
||||
<table class="default" id="table2">
|
||||
<caption>Table Title</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
<td>Col2</td>
|
||||
<td>Col1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col4</td>
|
||||
<td>Col3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col4</td>
|
||||
<td>Col2</td>
|
||||
<td>Col1</td>
|
||||
<td>Col3</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<label>Results: 4</label>
|
||||
<select>
|
||||
<option>25</option>
|
||||
<option>50</option>
|
||||
<option>100</option>
|
||||
<option>500</option>
|
||||
</select>
|
||||
<ul class="pagination">
|
||||
<li><a href="#" class="active">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li>...</li>
|
||||
<li><a href="#">20</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="box wf-100">
|
||||
<table id="tRemovable" class="default" data-ui-element="tr" data-tag="form">
|
||||
<caption>Table Title</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Col1 Title</td>
|
||||
<td>Col2 Title</td>
|
||||
<td>Col3 Title</td>
|
||||
<td>Col4 Title</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><i class="fa fa-times btn remove"></i>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="fa fa-times btn remove"></i>
|
||||
<td>Col2</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="fa fa-times btn remove"></i>
|
||||
<td>Col3</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="fa fa-times btn remove"></i>
|
||||
<td>Col4</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<label>Results: 4</label>
|
||||
<select>
|
||||
<option>25</option>
|
||||
<option>50</option>
|
||||
<option>100</option>
|
||||
<option>500</option>
|
||||
</select>
|
||||
<ul class="pagination">
|
||||
<li><a href="#" class="active">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li>...</li>
|
||||
<li><a href="#">20</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="box wf-100">
|
||||
<table class="default" id="table3" data-src="http://127.0.0.1/en/api/admin/find/account?search=do" data-ui-element="tr">
|
||||
<caption>Remote Data</caption>
|
||||
<thead>
|
||||
<div class="portlet">
|
||||
<div class="portlet-head">
|
||||
Table Title
|
||||
<?php include __DIR__ . '/helper/additional-functions.tpl.php'; ?>
|
||||
<?php include __DIR__ . '/helper/export-data.tpl.php'; ?>
|
||||
</div>
|
||||
<div class="slider">
|
||||
<table class="default" id="table1">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>
|
||||
<td data-name=""><i class="filter fa fa-filter"></i>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td data-name=""><i class="filter fa fa-filter"></i>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td data-name=""><i class="filter fa fa-filter"></i>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<tbody>
|
||||
<template id="input2-rowElement" class="rowTemplate">
|
||||
<tr tabindex="-1">
|
||||
<td><i class="fa fa-times btn remove"></i>
|
||||
<td data-tpl-text="/id" data-tpl-value="/id" data-value="">s</td>
|
||||
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
|
||||
<td data-tpl-text="/email"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
<td><i class="filter fa fa-filter" data-filter=""></i>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td><i class="filter fa fa-filter"></i>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td><i class="filter fa fa-filter"></i>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td><i class="filter fa fa-filter"></i>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Col2</td>
|
||||
<td>Col1</td>
|
||||
<td>Col4</td>
|
||||
<td>Col3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col4</td>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col2</td>
|
||||
<td>Col1</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="portlet-foot">
|
||||
<a class="button" href="#">Previous</a>
|
||||
<a class="button" href="#">Next</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="portlet">
|
||||
<div class="portlet-head">
|
||||
Table Title
|
||||
<?php include __DIR__ . '/helper/additional-functions.tpl.php'; ?>
|
||||
<?php include __DIR__ . '/helper/export-data.tpl.php'; ?>
|
||||
</div>
|
||||
<div class="slider">
|
||||
<table class="default" id="table2">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
<td>Col2</td>
|
||||
<td>Col1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col4</td>
|
||||
<td>Col3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col4</td>
|
||||
<td>Col2</td>
|
||||
<td>Col1</td>
|
||||
<td>Col3</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="box wf-100">
|
||||
<table class="default" id="table5">
|
||||
<caption>Table Title</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Col2</td>
|
||||
<td>Col1</td>
|
||||
<td>Col4</td>
|
||||
<td>Col3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col4</td>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col2</td>
|
||||
<td>Col1</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<label>Results: 4</label>
|
||||
<select>
|
||||
<option>25</option>
|
||||
<option>50</option>
|
||||
<option>100</option>
|
||||
<option>500</option>
|
||||
</select>
|
||||
<ul class="pagination">
|
||||
<li><a href="#" class="active">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li>...</li>
|
||||
<li><a href="#">20</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="box wf-100">
|
||||
<table class="default" id="table6">
|
||||
<caption>Table Title</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
<td>Col2</td>
|
||||
<td>Col1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col4</td>
|
||||
<td>Col3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col4</td>
|
||||
<td>Col2</td>
|
||||
<td>Col1</td>
|
||||
<td>Col3</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<label>Results: 4</label>
|
||||
<select>
|
||||
<option>25</option>
|
||||
<option>50</option>
|
||||
<option>100</option>
|
||||
<option>500</option>
|
||||
</select>
|
||||
<ul class="pagination">
|
||||
<li><a href="#" class="active">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li>...</li>
|
||||
<li><a href="#">20</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<div class="col-xs-12">
|
||||
<div class="portlet">
|
||||
<div class="portlet-head">
|
||||
Table Title
|
||||
<?php include __DIR__ . '/helper/additional-functions.tpl.php'; ?>
|
||||
<?php include __DIR__ . '/helper/export-data.tpl.php'; ?>
|
||||
</div>
|
||||
<div class="slider">
|
||||
<table id="tRemovable" class="default" data-ui-element="tr" data-tag="form">
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Col1 Title</td>
|
||||
<td>Col2 Title</td>
|
||||
<td>Col3 Title</td>
|
||||
<td>Col4 Title</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><i class="fa fa-times btn remove"></i>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="fa fa-times btn remove"></i>
|
||||
<td>Col2</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="fa fa-times btn remove"></i>
|
||||
<td>Col3</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><i class="fa fa-times btn remove"></i>
|
||||
<td>Col4</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<select>
|
||||
<option>25</option>
|
||||
<option>50</option>
|
||||
<option>100</option>
|
||||
<option>500</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="box wf-100">
|
||||
<table class="default" id="table7">
|
||||
<caption>Table Title</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Col2</td>
|
||||
<td>Col1</td>
|
||||
<td>Col4</td>
|
||||
<td>Col3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col4</td>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col2</td>
|
||||
<td>Col1</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<label>Results: 4</label>
|
||||
<select>
|
||||
<option>25</option>
|
||||
<option>50</option>
|
||||
<option>100</option>
|
||||
<option>500</option>
|
||||
</select>
|
||||
<ul class="pagination">
|
||||
<li><a href="#" class="active">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li>...</li>
|
||||
<li><a href="#">20</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-md-6">
|
||||
<div class="box wf-100">
|
||||
<table class="default" id="table8">
|
||||
<caption>Table Title</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
<td>Col2</td>
|
||||
<td>Col1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col4</td>
|
||||
<td>Col3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col1</td>
|
||||
<td>Col2</td>
|
||||
<td>Col3</td>
|
||||
<td>Col4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Col4</td>
|
||||
<td>Col2</td>
|
||||
<td>Col1</td>
|
||||
<td>Col3</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<label>Results: 4</label>
|
||||
<select>
|
||||
<option>25</option>
|
||||
<option>50</option>
|
||||
<option>100</option>
|
||||
<option>500</option>
|
||||
</select>
|
||||
<ul class="pagination">
|
||||
<li><a href="#" class="active">1</a></li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li>...</li>
|
||||
<li><a href="#">20</a></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<div class="col-xs-12">
|
||||
<div class="portlet">
|
||||
<div class="portlet-head">
|
||||
Remote Data
|
||||
<?php include __DIR__ . '/helper/additional-functions.tpl.php'; ?>
|
||||
<?php include __DIR__ . '/helper/export-data.tpl.php'; ?>
|
||||
</div>
|
||||
<div class="slider">
|
||||
<table class="default" id="table3" data-src="http://127.0.0.1/en/api/admin/find/account?search=do" data-ui-element="tr">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>
|
||||
<td data-name=""><i class="filter fa fa-filter"></i>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td data-name=""><i class="filter fa fa-filter"></i>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<td data-name=""><i class="filter fa fa-filter"></i>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||
<tbody>
|
||||
<template id="input2-rowElement" class="rowTemplate">
|
||||
<tr tabindex="-1">
|
||||
<td><i class="fa fa-times btn remove"></i>
|
||||
<td data-tpl-text="/id" data-tpl-value="/id" data-value="">s</td>
|
||||
<td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
|
||||
<td data-tpl-text="/email"></td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="box wf-100">
|
||||
<h1>Horizontal tabs</h1>
|
||||
<div class="tabview tab-1">
|
||||
<ul class="tab-links">
|
||||
<li class="active"><label for="c-tab-1">TAAAB</label></li>
|
||||
<li><label for="c-tab-2">TAAAB</label></li>
|
||||
<li class="active"><label for="c-tab-1">Tab 1</label></li>
|
||||
<li><label for="c-tab-2">Tab 2</label></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<input type="radio" id="c-tab-1" name="tabular-1" checked>
|
||||
|
|
@ -22,12 +23,13 @@
|
|||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div class="col-xs-12">
|
||||
<div class="box wf-100">
|
||||
<h1>Vertical tabs</h1>
|
||||
<div class="tabview tab-1 left">
|
||||
<ul class="tab-links">
|
||||
<li class="active"><label for="c-tab-1-2">TAAAB</label></li>
|
||||
<li><label for="c-tab-2-3">TAAAB</label></li>
|
||||
<li class="active"><label for="c-tab-1-2">Tab 1</label></li>
|
||||
<li><label for="c-tab-2-3">Tab 2</label></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<input type="radio" id="c-tab-1-2" name="tabular-3" checked>
|
||||
|
|
@ -47,10 +49,11 @@
|
|||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="box wf-100">
|
||||
<h1>Horizontal tabs2</h1>
|
||||
<div class="tabview tab-2">
|
||||
<ul class="tab-links">
|
||||
<li><label for="c-tab2-1">TAAAB</label></li>
|
||||
<li class="active"><label for="c-tab2-2">TAAAB</label></li>
|
||||
<li><label for="c-tab2-1">Tab 1</label></li>
|
||||
<li class="active"><label for="c-tab2-2">Tab 2</label></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<input type="radio" id="c-tab2-1" name="tabular-2" checked>
|
||||
|
|
@ -69,6 +72,31 @@
|
|||
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="box wf-100">
|
||||
<h1>Vertical tabs 2</h1>
|
||||
<div class="tabview tab-2 left">
|
||||
<ul class="tab-links">
|
||||
<li class="active"><label for="c-tab-4-2">Tab 1</label></li>
|
||||
<li><label for="c-tab-4-3">Tab 2</label></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<input type="radio" id="c-tab-4-2" name="tabular-4" checked>
|
||||
<div class="tab">
|
||||
Test content
|
||||
</div>
|
||||
<input type="radio" id="c-tab-4-3" name="tabular-4">
|
||||
<div class="tab">
|
||||
<p>Test content 2</p><p>asdf</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<h1>Accordion</h1>
|
||||
<div class="box ac-container wf-100">
|
||||
<input type="checkbox" name="About us" id="ac-1">
|
||||
<label for="ac-1">About us</label>
|
||||
|
|
@ -114,4 +142,29 @@
|
|||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="portlet">
|
||||
<div class="portlet-head">More/detail area</div>
|
||||
<div class="portlet-body">
|
||||
<div class="more-container">
|
||||
<input id="more-customer-region" type="checkbox">
|
||||
<label for="more-customer-region">
|
||||
<span>Click here!</span>
|
||||
<i class="fa fa-chevron-right expand"></i>
|
||||
</label>
|
||||
<div>
|
||||
<p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell
|
||||
everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in
|
||||
the future when the spacecraft encounters a black hole does the computer call it an 'unknown
|
||||
entry event'? Why don't they know? If they don't know, that means we never told anyone. And if
|
||||
we never told anyone it means we never made it back. Hence we die down here. Just as a matter of
|
||||
deductive logic. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,38 +1,10 @@
|
|||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<div class="box">
|
||||
<span class="tag green">Test Tag</span>
|
||||
<span class="tag red">Test Tag</span>
|
||||
<span class="tag blue">Test Tag</span>
|
||||
<span class="tag orange">Test Tag</span>
|
||||
<span class="tag lightblue">Test Tag</span>
|
||||
<span class="tag yellow">Test Tag</span>
|
||||
<span class="tag purple">Test Tag</span>
|
||||
<span class="tag pink">Test Tag</span>
|
||||
<span class="tag grey">Test Tag</span>
|
||||
<span class="tag darkred">Test Tag</span>
|
||||
<span class="tag darkgreen">Test Tag</span>
|
||||
<span class="tag darkblue">Test Tag</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<section class="box wf-100">
|
||||
<div class="inner">
|
||||
<span class="tag green">Test Tag</span>
|
||||
<span class="tag red">Test Tag</span>
|
||||
<span class="tag blue">Test Tag</span>
|
||||
<span class="tag orange">Test Tag</span>
|
||||
<span class="tag lightblue">Test Tag</span>
|
||||
<span class="tag yellow">Test Tag</span>
|
||||
<span class="tag purple">Test Tag</span>
|
||||
<span class="tag pink">Test Tag</span>
|
||||
<span class="tag grey">Test Tag</span>
|
||||
<span class="tag darkred">Test Tag</span>
|
||||
<span class="tag darkgreen">Test Tag</span>
|
||||
<span class="tag darkblue">Test Tag</span>
|
||||
<section class="portlet">
|
||||
<div class="portlet-body">
|
||||
<span class="tag">Test Tag</span>
|
||||
<span class="tag"><i class="fa fa-lightbulb-o"></i>Test Tag</span>
|
||||
<span class="tag"><i class="fa fa-times"></i><i class="fa fa-lightbulb-o"></i>Test Tag</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
Test welcome page
|
||||
<div class="emptyPage"></div>
|
||||
Loading…
Reference in New Issue
Block a user