mirror of
https://github.com/Karaka-Management/cssOMS.git
synced 2026-02-12 15:58:40 +00:00
fix test and some styles
This commit is contained in:
parent
9f43593219
commit
678cbb6fea
|
|
@ -1,8 +1,6 @@
|
||||||
|
|
||||||
|
|
||||||
.ac-container {
|
.ac-container {
|
||||||
margin: 1rem auto 1rem auto;
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
border: 1px solid #c9c9c9;
|
||||||
|
|
||||||
> input {
|
> input {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
@ -14,6 +12,10 @@
|
||||||
+ section {
|
+ section {
|
||||||
display: inherit;
|
display: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--button-colored-background-hover);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
+ label + section {
|
+ label + section {
|
||||||
|
|
@ -28,12 +30,12 @@
|
||||||
z-index: 20;
|
z-index: 20;
|
||||||
margin-top: -1px;
|
margin-top: -1px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: var(--text-on-background-color-2);
|
color: #000;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
border: 1rem solid var(--box-border);
|
|
||||||
background: var(--box-border);
|
background: var(--box-border);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
color: var(--text-on-background-color-2);
|
||||||
background: var(--button-colored-background-hover);
|
background: var(--button-colored-background-hover);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -44,8 +46,6 @@
|
||||||
height: auto;
|
height: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
border-left: 1px solid var(--box-border);
|
|
||||||
border-right: 1px solid var(--box-border);
|
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ article {
|
||||||
line-height: 2rem;
|
line-height: 2rem;
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
|
|
||||||
del, ins {
|
del, ins, mark {
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
@ -24,6 +24,10 @@ article {
|
||||||
background: #b0f3b0;
|
background: #b0f3b0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
mark {
|
||||||
|
background: #f9ffa1;
|
||||||
|
}
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
//padding-bottom: 1rem;
|
//padding-bottom: 1rem;
|
||||||
|
|
|
||||||
24
button.scss
24
button.scss
|
|
@ -31,10 +31,19 @@ button, input[type="submit"], input[type="button"], label.button, a.button {
|
||||||
&:hover, &:focus {
|
&:hover, &:focus {
|
||||||
background: var(--button-colored-background-hover);
|
background: var(--button-colored-background-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
margin: 0 .5rem 0 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
button.save, .button.save {
|
button.save, .button.save {
|
||||||
|
color: rgba(0, 0, 0, 0.75);
|
||||||
|
background: #8fff79;
|
||||||
|
|
||||||
|
&:hover, &:focus {
|
||||||
|
background: #a1ffa1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
button.cancel, .button.cancel {
|
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;
|
margin-left: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
height: 8rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
* + .form-group {
|
* + .form-group {
|
||||||
|
|
|
||||||
143
image.scss
143
image.scss
|
|
@ -16,14 +16,6 @@ img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.frame-3 {
|
|
||||||
padding: 1rem;
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid var(--box-border);
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.rounded {
|
&.rounded {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
@ -33,138 +25,3 @@ img {
|
||||||
border: 1px solid var(--box-border);;
|
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);
|
color: var(--input-color);
|
||||||
background: var(--input-background);
|
background: var(--input-background);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 2rem;
|
|
||||||
min-width: 70px;
|
min-width: 70px;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 7px;
|
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
border: 1px solid var(--input-border);
|
border: 1px solid var(--input-border);
|
||||||
transition: background 0.3s, border 0.3s;
|
transition: background 0.3s, border 0.3s;
|
||||||
|
|
@ -61,10 +59,25 @@ input[type="datetime-local"] {
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
background: #efefef;
|
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 {
|
.inputWrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
@ -214,8 +227,10 @@ input[type="datetime-local"] {
|
||||||
a {
|
a {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
|
/*
|
||||||
&:hover, &:focus {
|
&: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 */
|
position: absolute; /* All other options e.g. static, relative resize the container which is bad */
|
||||||
display: none;
|
display: none;
|
||||||
z-index: 3;
|
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 {
|
.timeline label {
|
||||||
font-size: 1.3em;
|
font-size: 1.3em;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 100;
|
z-index: 90;
|
||||||
top: 20px;
|
top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
132
slider.scss
132
slider.scss
|
|
@ -6,3 +6,135 @@
|
||||||
display: inline;
|
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 "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 "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 "media";
|
||||||
@import "portlet";
|
@import "portlet", "menu";
|
||||||
58
tab.scss
58
tab.scss
|
|
@ -7,11 +7,13 @@
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: 1px solid var(--button-colored-background-hover);
|
border: 1px solid var(--button-colored-background);
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
&:hover, &:focus {
|
&:hover, &:focus {
|
||||||
color: var(--text-on-background-color-2);
|
color: var(--text-on-background-color-2);
|
||||||
background: var(--button-colored-background-hover);
|
background: var(--button-colored-background-hover);
|
||||||
|
border: 1px solid var(--button-colored-background-hover);
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -19,12 +21,15 @@
|
||||||
.active label:hover, .active label:focus {
|
.active label:hover, .active label:focus {
|
||||||
color: var(--text-on-background-color-2);
|
color: var(--text-on-background-color-2);
|
||||||
background: var(--button-colored-background-hover);
|
background: var(--button-colored-background-hover);
|
||||||
|
border: 1px solid var(--button-colored-background-hover);
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.active a {
|
.active {
|
||||||
|
label {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -48,25 +53,25 @@
|
||||||
|
|
||||||
.tab-1 {
|
.tab-1 {
|
||||||
.tab-links {
|
.tab-links {
|
||||||
margin: 0;
|
margin: 0 0 10px 1px;
|
||||||
border-bottom: 1px solid var(--box-border);
|
|
||||||
|
|
||||||
label {
|
label {
|
||||||
padding: 5px 10px 1px 10px;
|
padding: 5px;
|
||||||
background: none;
|
background: none;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
background: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.active, .active label {
|
.active, .active label {
|
||||||
|
color: var(--text-on-background-color-2);
|
||||||
background: var(--button-colored-background);
|
background: var(--button-colored-background);
|
||||||
border-bottom: 1px solid var(--button-colored-background);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
.active label {
|
.active label {
|
||||||
border-top: 1px solid var(--box-border);
|
border: 1px solid var(--box-border);
|
||||||
border-left: 1px solid var(--box-border);
|
|
||||||
border-right: 1px solid var(--box-border);
|
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
li {
|
li {
|
||||||
margin: 0 5px 0 0;
|
margin: 0 5px 0 0;
|
||||||
|
|
@ -75,10 +80,8 @@
|
||||||
|
|
||||||
.tab-content {
|
.tab-content {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
background: var(--button-colored-background);
|
border: 1px solid var(--button-colored-background);
|
||||||
border-left: 1px solid var(--box-border);
|
background: #fff;
|
||||||
border-right: 1px solid var(--box-border);
|
|
||||||
border-bottom: 1px solid var(--box-border);
|
|
||||||
|
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
@ -95,18 +98,13 @@
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
|
||||||
padding-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active label {
|
.active label {
|
||||||
border-bottom: 1px solid var(--box-border);
|
border: 1px solid var(--box-border);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-content {
|
.tab-content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-top: 1px solid var(--box-border);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -126,4 +124,26 @@
|
||||||
background: var(--button-colored-background)
|
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.fixed {
|
||||||
table-layout: 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 {
|
table:not([id]) > thead .sort-asc, table:not([id]) > thead .sort-desc {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -26,6 +28,11 @@ table input[type=radio]:checked + i {
|
||||||
color: var(--button-colored-background);
|
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 {
|
table .sort-asc, table .sort-desc, table .filter {
|
||||||
padding: 0 2px 0 2px;
|
padding: 0 2px 0 2px;
|
||||||
cursor: pointer;
|
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,8 +1,29 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xs-12">
|
<div class="col-xs-12">
|
||||||
<section class="box">
|
<section class="portlet">
|
||||||
|
<div class="portlet-body">
|
||||||
<article>
|
<article>
|
||||||
<h1>Ordered List</h1>
|
<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>
|
||||||
|
|
||||||
|
<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">
|
||||||
|
|
||||||
|
<h2>Ordered List</h2>
|
||||||
<ol>
|
<ol>
|
||||||
<li>one</li>
|
<li>one</li>
|
||||||
<li>two</li>
|
<li>two</li>
|
||||||
|
|
@ -16,32 +37,26 @@
|
||||||
<ol start="123">
|
<ol start="123">
|
||||||
<li>one</li>
|
<li>one</li>
|
||||||
</ol>
|
</ol>
|
||||||
<h2>Unordered List</h2>
|
|
||||||
|
<h3>Unordered List</h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li>li</li>
|
<li>first element</li>
|
||||||
<li>li</li>
|
<li>second element</li>
|
||||||
</ul>
|
|
||||||
<p>mixed markers:</p>
|
|
||||||
<ul>
|
<ul>
|
||||||
<li>li</li>
|
<li>next level</li>
|
||||||
<li>li</li>
|
|
||||||
<li>li</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
<h3>Code</h3>
|
</ul>
|
||||||
<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>
|
<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
|
<pre><code><?php
|
||||||
|
|
||||||
$message = 'fenced code block';
|
$message = 'fenced code block';
|
||||||
echo $message;</code></pre>
|
echo $message;</code></pre>
|
||||||
<pre><code>tilde</code></pre>
|
|
||||||
<pre><code class="language-php">echo 'language identifier';</code></pre>
|
<pre><code class="language-php">echo 'language identifier';</code></pre>
|
||||||
<h5>Table</h5>
|
<h6>Table</h6>
|
||||||
<table>
|
<table>
|
||||||
<caption>Table Title</caption>
|
<caption>Table Title</caption>
|
||||||
<thead>
|
<thead>
|
||||||
|
|
@ -79,26 +94,9 @@
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</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>
|
|
||||||
|
|
||||||
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="200">
|
|
||||||
</article>
|
</article>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1,43 +1,32 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xs-12">
|
<div class="col-xs-12 col-sm-6">
|
||||||
<div class="box">
|
<section class="portlet">
|
||||||
<ul class="btns">
|
<div class="portlet-body">
|
||||||
<li><a href="">One</a>
|
<div>
|
||||||
<li><a href="" class="active">Two</a>
|
Normal:
|
||||||
<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>Test Button</button>
|
||||||
<button><i class="fa fa-lightbulb-o"></i> 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>
|
||||||
|
Cancel:
|
||||||
|
<button class="cancel">Test Button</button>
|
||||||
|
<button class="cancel"><i class="fa fa-lightbulb-o"></i> Test Button</button>
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</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,30 +1,35 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xs-12 col-md-6">
|
<div class="col-xs-12">
|
||||||
<section class="box wf-100">
|
<section class="portlet">
|
||||||
<header><h1>Default</h1></header>
|
|
||||||
<div class="inner">
|
|
||||||
<form>
|
<form>
|
||||||
<table class="layout wf-100">
|
<div class="portlet-head">Default</div>
|
||||||
<tr>
|
<div class="portlet-body">
|
||||||
<td colspan="2"><label>Placeholder</label></td>
|
<div class="form-group">
|
||||||
<tr>
|
<label>Placeholder</label>
|
||||||
<td colspan="2"><input type="text" placeholder=" User">
|
<input type="text" placeholder=" User">
|
||||||
<tr>
|
</div>
|
||||||
<td colspan="2"><label>Input+Button+Required</label></td>
|
|
||||||
<tr>
|
<div class="form-group">
|
||||||
<td colspan="2">
|
<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-wrap">
|
||||||
<div class="ipt-first"><input type="text" required></div>
|
<div class="ipt-first"><input type="text" required></div>
|
||||||
<div class="ipt-second"><input type="submit" value="Text"></div>
|
<div class="ipt-second"><input type="submit" value="Text"></div>
|
||||||
</div>
|
</div>
|
||||||
<tr>
|
</div>
|
||||||
<td colspan="2"><label>Password</label></td>
|
|
||||||
<tr>
|
<div class="form-group">
|
||||||
<td colspan="2"><input type="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}" placeholder=" Pa55w0rd?">
|
<label>Password</label>
|
||||||
<tr>
|
<input type="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}">
|
||||||
<td colspan="2"><label>Datalist</label></td>
|
</div>
|
||||||
<tr>
|
|
||||||
<td colspan="2"><input list="test" type="text">
|
<div class="form-group">
|
||||||
|
<label>Datalist</label>
|
||||||
|
<input list="test" type="text">
|
||||||
<datalist id="test">
|
<datalist id="test">
|
||||||
<option>Chrome</option>
|
<option>Chrome</option>
|
||||||
<option>IE</option>
|
<option>IE</option>
|
||||||
|
|
@ -32,88 +37,134 @@
|
||||||
<option>Safari</option>
|
<option>Safari</option>
|
||||||
<option>Firefox</option>
|
<option>Firefox</option>
|
||||||
</datalist>
|
</datalist>
|
||||||
</td>
|
</div>
|
||||||
<tr>
|
|
||||||
<tr>
|
<div class="form-group">
|
||||||
<td colspan="2"><label>Special</label></td>
|
<div class="input-control">
|
||||||
<tr>
|
<label>Special</label>
|
||||||
<td colspan="2">
|
<div>
|
||||||
<span class="input"><button type="button"><i class="fa fa-pencil"></i></button><input type="text"></span></td>
|
<div class="ipt-wrap">
|
||||||
<tr>
|
<div class="ipt-first">
|
||||||
<td colspan="2"><label>Number</label></td>
|
<span class="input"><button type="button"><i class="fa fa-pencil"></i></button>
|
||||||
<tr>
|
<input type="text"></span>
|
||||||
<td colspan="2"><input type="number" step="any" min="0"></td>
|
</div>
|
||||||
<tr>
|
</div>
|
||||||
<td><label>Label1</label></td>
|
</div>
|
||||||
<td><label>Pattern Validation</label>
|
</div>
|
||||||
<tr>
|
|
||||||
<td><input type="text"></td>
|
<div class="input-control">
|
||||||
<td><input type="text" pattern="[a-zA-Z]" required>
|
<label>Number</label>
|
||||||
<tr>
|
<input type="number" step="any" min="0">
|
||||||
<td colspan="2"><label>Localtime</label></td>
|
</div>
|
||||||
<tr>
|
</div>
|
||||||
<td colspan="2"><input type="datetime-local">
|
|
||||||
<tr>
|
<div class="form-group">
|
||||||
<td><label>Localtime</label></td>
|
<div class="input-control">
|
||||||
<td><label>Localtime</label>
|
<label>Label1</label>
|
||||||
<tr>
|
<input type="text">
|
||||||
<td><input type="datetime-local"></td>
|
</div>
|
||||||
<td><input type="datetime-local">
|
|
||||||
<tr>
|
<div class="input-control">
|
||||||
<td><label>Checkbox</label></td>
|
<label>Pattern Validation</label>
|
||||||
<td><label>Radio</label></td>
|
<input type="text" pattern="[a-zA-Z]" required>
|
||||||
<tr>
|
</div>
|
||||||
<td><span class="check"><input type="checkbox" checked>Check</span>
|
</div>
|
||||||
<td><span class="radio"><input type="radio" name="test">Radio</span>
|
|
||||||
<tr>
|
<div class="form-group">
|
||||||
<td><span class="check"><input type="checkbox">Check</span>
|
<div class="input-control">
|
||||||
<td><span class="radio"><input type="radio" name="test" checked>Radio</span>
|
<label>Datetime</label>
|
||||||
<tr>
|
<input type="datetime">
|
||||||
<td></td>
|
</div>
|
||||||
<td><span class="radio"><input type="radio" name="test">Radio</span>
|
|
||||||
<tr>
|
<div class="input-control">
|
||||||
<td><label>Option</label></td>
|
<label>Localtime</label>
|
||||||
<tr>
|
<input type="datetime-local">
|
||||||
<td colspan="2"><select>
|
</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>Option1</option>
|
||||||
<option>Option2</option>
|
<option>Option2</option>
|
||||||
<option>Option3</option>
|
<option>Option3</option>
|
||||||
</select>
|
</select>
|
||||||
<tr>
|
</div>
|
||||||
<td><label multiple>Multiselect</label></td>
|
|
||||||
<tr>
|
<div class="form-group">
|
||||||
<td colspan="2"><select multiple>
|
<label>Multiselect</label>
|
||||||
|
<select multiple>
|
||||||
<option>Option1</option>
|
<option>Option1</option>
|
||||||
<option>Option2</option>
|
<option>Option2</option>
|
||||||
<option>Option3</option>
|
<option>Option3</option>
|
||||||
</select>
|
</select>
|
||||||
<tr>
|
</div>
|
||||||
<td><label>Option Default</label></td>
|
|
||||||
<td><label>Select Selected</label>
|
<div class="form-group">
|
||||||
<tr>
|
<div class="input-control">
|
||||||
<td>
|
<label>Option Default</label>
|
||||||
<select>
|
<select>
|
||||||
<option disabled selected>Select something</option>
|
<option disabled selected>Select something</option>
|
||||||
<option>Option1</option>
|
<option>Option1</option>
|
||||||
<option>Option2</option>
|
<option>Option2</option>
|
||||||
<option>Option3</option>
|
<option>Option3</option>
|
||||||
</select>
|
</select>
|
||||||
</td>
|
</div>
|
||||||
<td>
|
|
||||||
|
<div class="input-control">
|
||||||
|
<label>Select Selected</label>
|
||||||
<select>
|
<select>
|
||||||
<option>Option1</option>
|
<option>Option1</option>
|
||||||
<option selected>Option2</option>
|
<option selected>Option2</option>
|
||||||
<option>Option3</option>
|
<option>Option3</option>
|
||||||
</select>
|
</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>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</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="row">
|
||||||
<div class="col-xs-12 col-md-6">
|
<div class="col-xs-12 col-md-6">
|
||||||
<section class="box wf-100">
|
<section class="portlet">
|
||||||
<header><h1>Custom</h1></header>
|
<div class="portlet-head">Dropdown</div>
|
||||||
<div class="inner">
|
<div class="portlet-body">
|
||||||
<form>
|
<form>
|
||||||
<table class="layout wf-100">
|
</form>
|
||||||
<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>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div id="input1-tags" class="tags" data-limit="1" data-active="true">
|
<div class="col-xs-12 col-md-6">
|
||||||
<template id="input1-tagTemplate">
|
<section class="portlet">
|
||||||
<span data-tpl-value="/id" data-value="" data-uuid="" class="tag red">
|
<div class="portlet-head">Multiple Data Dropdown</div>
|
||||||
<i class="fa fa-times" data-remove=""></i>
|
<div class="portlet-body">
|
||||||
<i data-tpl-text="/name/0"></i>,
|
<form>
|
||||||
<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>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</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">
|
<script type="module">
|
||||||
import { Request } from "../../../jsOMS/Message/Request/Request.js";
|
import { Request } from "../../../jsOMS/Message/Request/Request.js";
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,140 +1,207 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xs-12">
|
<div class="col-xs-12">
|
||||||
<div class="box wf-100">
|
<div class="portlet">
|
||||||
<table class="default" id="table1"
|
<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-content="tbody"
|
||||||
data-update-element="tr"
|
data-update-element="tr"
|
||||||
data-tag="form"
|
data-tag="form"
|
||||||
data-update-form="fSample">
|
data-update-form="fSample"><?php $tableId = 'table1'; ?>
|
||||||
<caption>Form Add</caption>
|
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<td>
|
<td><?php include __DIR__ . '/helper/checkbox.tpl.php'; ?>
|
||||||
<td>Input<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
<td>Input
|
||||||
<td>Select<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
<?php include __DIR__ . '/helper/sort.tpl.php'; ?>
|
||||||
<td>Textarea<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
<?php include __DIR__ . '/helper/filter.tpl.php'; ?>
|
||||||
<td>Date<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
</td>
|
||||||
<td>Radio<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
<td>Select
|
||||||
<td>Checkbox<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
<?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>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<template>
|
<template>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i class="fa fa-times btn remove"></i>
|
<td><i class="fa fa-times btn remove"></i>
|
||||||
<td><i class="fa fa-cogs btn update"></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="/input" data-tpl-value="/input" data-value=""></td>
|
||||||
<td data-tpl-text="/select" data-tpl-value="/select" 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="/text" data-tpl-value="/text" data-value=""></td>
|
||||||
<td data-tpl-text="/date" data-tpl-value="/date" 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 data-tpl-text="/radio" data-tpl-value="/radio" data-value=""></td>
|
||||||
<td>
|
<td>
|
||||||
<span data-tpl-text="/checkbox/c" data-tpl-value="/checkbox/c" data-value=""><span>
|
<span data-tpl-text="/checkbox" data-tpl-value="/checkbox" data-value=""><span>
|
||||||
<span data-tpl-text="/checkbox/r" data-tpl-value="/checkbox/r" data-value=""><span>
|
<span data-tpl-text="/checkbox" data-tpl-value="/checkbox" data-value=""><span>
|
||||||
<span data-tpl-text="/checkbox/u" data-tpl-value="/checkbox/u" data-value=""><span>
|
<span data-tpl-text="/checkbox" data-tpl-value="/checkbox" data-value=""><span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</template>
|
</template>
|
||||||
<tr>
|
<tr draggable="true">
|
||||||
<td><i class="fa fa-times btn remove"></i>
|
<td><i class="fa fa-times btn remove"></i>
|
||||||
<td><i class="fa fa-cogs btn update"></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="/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="/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="/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="/date" data-tpl-value="/date" data-value="">2020-10-13</td>
|
||||||
<td data-tpl-text="/radio" data-tpl-value="/radio" data-value="">Col5</td>
|
<td data-tpl-text="/radio" data-tpl-value="/radio" data-value="r1">R1</td>
|
||||||
<td data-tpl-text="/checkbox/c" data-tpl-value="/checkbox/c" data-value="">Col6</td>
|
<td data-tpl-text="/checkbox" data-tpl-value="/checkbox" data-value="CREATE">Create</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr draggable="true">
|
||||||
<td><i class="fa fa-times btn remove"></i>
|
<td><i class="fa fa-times btn remove"></i>
|
||||||
<td><i class="fa fa-cogs btn update"></i>
|
<i class="fa fa-cogs btn update"></i>
|
||||||
<td data-tpl-text="/input" data-tpl-value="/input" data-value="">Input2</td>
|
<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="/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="/text" data-tpl-value="/text" data-value="Hidden Text">Text2</td>
|
||||||
<td data-tpl-text="/date" data-tpl-value="/date" data-value="">Col3</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="">Col5</td>
|
<td data-tpl-text="/radio" data-tpl-value="/radio" data-value="r2">R2</td>
|
||||||
<td data-tpl-text="/checkbox/c" data-tpl-value="/checkbox/c" data-value="">Col6</td>
|
<td data-tpl-text="/checkbox" data-tpl-value="/checkbox" data-value="READ">Read</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr draggable="true">
|
||||||
<td><i class="fa fa-times btn remove"></i>
|
<td><i class="fa fa-times btn remove"></i>
|
||||||
<td><i class="fa fa-cogs btn update"></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="/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="/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="/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="/date" data-tpl-value="/date" data-value="">1989-04-28</td>
|
||||||
<td data-tpl-text="/radio" data-tpl-value="/radio" data-value="">Col5</td>
|
<td data-tpl-text="/radio" data-tpl-value="/radio" data-value="r3">R3</td>
|
||||||
<td data-tpl-text="/checkbox/c" data-tpl-value="/checkbox/c" data-value="">Col6</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>
|
</tr>
|
||||||
</tbody>
|
</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>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xs-12">
|
<div class="col-xs-12">
|
||||||
<section class="box wf-100">
|
<section class="portlet">
|
||||||
<div class="inner">
|
|
||||||
<form id="fSample" action="api/test" method="put">
|
<form id="fSample" action="api/test" method="put">
|
||||||
<table class="layout wf-100">
|
<div class="portlet-body">
|
||||||
<tbody>
|
<div class="form-group">
|
||||||
<tr><td><label for="iInput">Input</label>
|
<label for="iInput">Input</label>
|
||||||
<tr><td><input id="iInput" name="input" type="text" data-tpl-text="/input" data-tpl-value="/input">
|
<input id="iInput" name="input" type="text" data-tpl-text="/input" data-tpl-value="/input">
|
||||||
<tr><td><label for="iSelect">Select</label>
|
</div>
|
||||||
<tr><td><select id="iSelect" name="select" type="text" data-tpl-text="/select" data-tpl-value="/select">
|
|
||||||
|
<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="o1">Options1</option>
|
||||||
<option value="o2">Options2</option>
|
<option value="o2">Options2</option>
|
||||||
<option value="o3">Options3</option>
|
<option value="o3">Options3</option>
|
||||||
</select>
|
</select>
|
||||||
<tr><td><label for="iText">Text</label>
|
</div>
|
||||||
<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>
|
<div class="form-group">
|
||||||
<tr><td><input id="iDate" name="date" type="date" data-tpl-text="/date" data-tpl-value="/date">
|
<label for="iText">Text</label>
|
||||||
<tr><td><label for="iRadio">Radio</label>
|
<textarea id="iText" name="text" type="text" data-tpl-text="/text" data-tpl-value="/text"></textarea>
|
||||||
<tr><td>
|
</div>
|
||||||
<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>
|
<div class="form-group">
|
||||||
<input type="radio" id="iRadio3" name="radio" value="r3" data-tpl-text="/radio" data-tpl-value="/radio"><label for="iRadio3">Radio3</label>
|
<label for="iDate">Date</label>
|
||||||
<tr><td><label>Checkbox</label>
|
<input id="iDate" name="date" type="date" data-tpl-text="/date" data-tpl-value="/date">
|
||||||
<tr><td>
|
</div>
|
||||||
<span class="checkbox">
|
|
||||||
<input id="iPermissionCreate" name="permissioncreate" type="checkbox" value="CREATE" data-tpl-text="/checkbox/c" data-tpl-value="/checkbox/c">
|
<div class="form-group">
|
||||||
<label for="iPermissionCreate">Create</label>
|
<div class="input-control">
|
||||||
</span>
|
<label for="iRadio">Radio</label>
|
||||||
<span class="checkbox">
|
<div>
|
||||||
<input id="iPermissionRead" name="permissionread" type="checkbox" value="READ" data-tpl-text="/checkbox/r" data-tpl-value="/checkbox/r">
|
<label class="radio" for="iRadio1">
|
||||||
<label for="iPermissionRead">Read</label>
|
<input type="radio" id="iRadio1" name="radio" value="r1" data-tpl-text="/radio" data-tpl-value="/radio">
|
||||||
</span>
|
<span class="checkmark"></span>
|
||||||
<span class="checkbox">
|
Radio1
|
||||||
<input id="iPermissionUpdate" name="permissionupdate" type="checkbox" value="MODIFY" data-tpl-text="/checkbox/u" data-tpl-value="/checkbox/u">
|
</label>
|
||||||
<label for="iPermissionUpdate">Update</label>
|
|
||||||
</span>
|
<label class="radio" for="iRadio2">
|
||||||
<tr><td>
|
<input type="radio" id="iRadio2" name="radio" value="r2" data-tpl-text="/radio" data-tpl-value="/radio">
|
||||||
<input type="submit" value="Add">
|
<span class="checkmark"></span>
|
||||||
</table>
|
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>
|
</form>
|
||||||
|
<div class="portlet-foot">
|
||||||
|
<input type="submit" value="Add">
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -142,42 +209,67 @@
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xs-12">
|
<div class="col-xs-12">
|
||||||
<div class="box wf-100">
|
<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">
|
<table class="default" id="table2" data-ui-content="tbody" data-ui-element="tr" data-tag="form">
|
||||||
<caption>Inline Add</caption>
|
<?php $tableId = 'table2'; $tableCheckboxCounter = 0; $tableSortCounter = 0; ?>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<td>
|
<td><?php include __DIR__ . '/helper/checkbox.tpl.php'; ?>
|
||||||
<td>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
<td>Col1 Title
|
||||||
<td>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
<?php include __DIR__ . '/helper/sort.tpl.php'; ?>
|
||||||
<td>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
<?php include __DIR__ . '/helper/filter.tpl.php'; ?>
|
||||||
<td>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
<td>Col2 Title
|
||||||
<td>Col5 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
<?php include __DIR__ . '/helper/sort.tpl.php'; ?>
|
||||||
<td>Col6 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
<?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>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<template>
|
<template>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i class="fa fa-times btn remove"></i>
|
<td><i class="fa fa-times btn remove"></i>
|
||||||
<td><i class="fa fa-cogs btn update"></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="/input" data-tpl-value="/input" data-value=""></td>
|
||||||
<td data-tpl-text="/select" data-tpl-value="/select" 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="/text" data-tpl-value="/text" data-value=""></td>
|
||||||
<td data-tpl-text="/date" data-tpl-value="/date" 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 data-tpl-text="/radio" data-tpl-value="/radio" data-value=""></td>
|
||||||
<td>
|
<td>
|
||||||
<span data-tpl-text="/checkbox/c" data-tpl-value="/checkbox/c" data-value=""><span>
|
<span data-tpl-text="/checkbox" data-tpl-value="/checkbox" data-value=""><span>
|
||||||
<span data-tpl-text="/checkbox/r" data-tpl-value="/checkbox/r" data-value=""><span>
|
<span data-tpl-text="/checkbox" data-tpl-value="/checkbox" data-value=""><span>
|
||||||
<span data-tpl-text="/checkbox/u" data-tpl-value="/checkbox/u" data-value=""><span>
|
<span data-tpl-text="/checkbox" data-tpl-value="/checkbox" data-value=""><span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</template>
|
</template>
|
||||||
<template>
|
<template>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i class="fa fa-times btn remove"></i>
|
<td><i class="fa fa-times btn remove"></i>
|
||||||
<td><i class="fa fa-cogs btn update"></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><input data-form="fInside" data-tpl-text="/input" data-tpl-value="/input" data-value="" type="text"></td>
|
||||||
<td>
|
<td>
|
||||||
<select data-form="fInside" data-tpl-text="/select" data-tpl-value="/select" data-value="">
|
<select data-form="fInside" data-tpl-text="/select" data-tpl-value="/select" data-value="">
|
||||||
|
|
@ -197,15 +289,15 @@
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<span class="checkbox">
|
<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">
|
<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>
|
<label for="iPermissionCreate">Create</label>
|
||||||
</span>
|
</span>
|
||||||
<span class="checkbox">
|
<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">
|
<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>
|
<label for="iPermissionRead">Read</label>
|
||||||
</span>
|
</span>
|
||||||
<span class="checkbox">
|
<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">
|
<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>
|
<label for="iPermissionUpdate">Update</label>
|
||||||
</span>
|
</span>
|
||||||
<form id="fInside" action="api/test" method="post"><input id="addRowInline" type="submit" value="Add"></form>
|
<form id="fInside" action="api/test" method="post"><input id="addRowInline" type="submit" value="Add"></form>
|
||||||
|
|
@ -214,66 +306,54 @@
|
||||||
</template>
|
</template>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i class="fa fa-times btn remove"></i>
|
<td><i class="fa fa-times btn remove"></i>
|
||||||
<td><i class="fa fa-cogs btn update"></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="">Col2</td>
|
<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="/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="/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="/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="/radio" data-tpl-value="/radio" data-value="">Col5</td>
|
||||||
<td data-tpl-text="/checkbox/c" data-tpl-value="/checkbox/c" data-value="">Col6</td>
|
<td data-tpl-text="/checkbox" data-tpl-value="/checkbox" data-value="">Col6</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i class="fa fa-times btn remove"></i>
|
<td><i class="fa fa-times btn remove"></i>
|
||||||
<td><i class="fa fa-cogs btn update"></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="">Col4</td>
|
<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="/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="/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="/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="/radio" data-tpl-value="/radio" data-value="">Col5</td>
|
||||||
<td data-tpl-text="/checkbox/c" data-tpl-value="/checkbox/c" data-value="">Col6</td>
|
<td data-tpl-text="/checkbox" data-tpl-value="/checkbox" data-value="">Col6</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><i class="fa fa-times btn remove"></i>
|
<td><i class="fa fa-times btn remove"></i>
|
||||||
<td><i class="fa fa-cogs btn update"></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="/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="/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="/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="/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="/radio" data-tpl-value="/radio" data-value="">Col5</td>
|
||||||
<td data-tpl-text="/checkbox/c" data-tpl-value="/checkbox/c" data-value="">Col6</td>
|
<td data-tpl-text="/checkbox" data-tpl-value="/checkbox" data-value="">Col6</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</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>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script type="module">
|
<script type="module">
|
||||||
import { Request } from '../../../jsOMS/Message/Request/Request.js';
|
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.setData({user: 'admin', pass: 'orange'});
|
||||||
loginRequest.send();
|
loginRequest.send();
|
||||||
</script>
|
</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">
|
<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" class="frame-2">
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
|
|
@ -5,51 +5,64 @@
|
||||||
<base href="http://127.0.0.1/cssOMS/tests/app/">
|
<base href="http://127.0.0.1/cssOMS/tests/app/">
|
||||||
<title>Style Test</title>
|
<title>Style Test</title>
|
||||||
<link rel="stylesheet" type="text/css" href="../../styles.css">
|
<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">
|
<link rel="stylesheet" type="text/css" href="../../../Resources/fontawesome/css/font-awesome.min.css">
|
||||||
<script src="../../../jsOMS/Utils/oLib.js"></script>
|
<script src="../../../jsOMS/Utils/oLib.js"></script>
|
||||||
<script src="../load.js" type="module"></script>
|
<script src="load.js" type="module"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<input type="checkbox" id="nav-trigger" name="nav-hamburger" class="nav-trigger">
|
<input type="checkbox" id="nav-trigger" name="nav-hamburger" class="nav-trigger">
|
||||||
<nav>
|
<nav id="nav-side">
|
||||||
<span id="u-box">
|
<span id="u-box">
|
||||||
<a href="">
|
<a href="#">
|
||||||
<img alt="" loading="lazy" src="../../../Web/Backend/img/user_default_6.png">
|
<img alt="User Image" loading="lazy" src="../../../Web/Backend/img/user_default_6.png">
|
||||||
</a>
|
</a>
|
||||||
<span id="logo">
|
<span id="logo" itemscope itemtype="http://schema.org/Organization">
|
||||||
<span>AccountName</span>
|
<div> </div>
|
||||||
</span>
|
<select
|
||||||
</span>
|
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">
|
<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>
|
<li><input id="nav-help" type="checkbox" checked>
|
||||||
<ul>
|
<ul>
|
||||||
<li><label for="nav-Help">
|
<li><label for="nav-Help">
|
||||||
<span class="centerText">
|
|
||||||
<i class="fa fa-question-circle"></i>
|
<i class="fa fa-question-circle"></i>
|
||||||
</span>
|
<span>Forms</span>
|
||||||
Forms
|
|
||||||
<i class="fa fa-chevron-down min"></i>
|
<i class="fa fa-chevron-down min"></i>
|
||||||
<i class="fa fa-chevron-up max"></i>
|
<i class="fa fa-chevron-up max"></i>
|
||||||
</label>
|
</label>
|
||||||
</li>
|
</li>
|
||||||
<li><a href="?page=forms">Form</a></li>
|
<li><a href="?page=forms">Form</a></li>
|
||||||
<li><a href="?page=forms_input">Input</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>
|
<li><a href="?page=forms_table">Table</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li><input id="nav-help" type="checkbox" checked>
|
<li><input id="nav-help" type="checkbox" checked>
|
||||||
<ul>
|
<ul>
|
||||||
<li><label for="nav-Help">
|
<li><label for="nav-Help">
|
||||||
<span class="centerText">
|
|
||||||
<i class="fa fa-question-circle"></i>
|
<i class="fa fa-question-circle"></i>
|
||||||
</span>
|
<span>UI Elements</span>
|
||||||
UI Elements
|
|
||||||
<i class="fa fa-chevron-down min"></i>
|
<i class="fa fa-chevron-down min"></i>
|
||||||
<i class="fa fa-chevron-up max"></i>
|
<i class="fa fa-chevron-up max"></i>
|
||||||
</label>
|
</label>
|
||||||
</li>
|
</li>
|
||||||
|
<li><a href="?page=alerts">Alerts</a></li>
|
||||||
<li><a href="?page=article">Articles</a></li>
|
<li><a href="?page=article">Articles</a></li>
|
||||||
<li><a href="?page=buttons">Buttons</a></li>
|
<li><a href="?page=buttons">Buttons</a></li>
|
||||||
<li><a href="?page=tags">Tags</a></li>
|
<li><a href="?page=tags">Tags</a></li>
|
||||||
|
|
@ -63,10 +76,8 @@
|
||||||
<li><input id="nav-help" type="checkbox" checked>
|
<li><input id="nav-help" type="checkbox" checked>
|
||||||
<ul>
|
<ul>
|
||||||
<li><label for="nav-Help">
|
<li><label for="nav-Help">
|
||||||
<span class="centerText">
|
|
||||||
<i class="fa fa-question-circle"></i>
|
<i class="fa fa-question-circle"></i>
|
||||||
</span>
|
<span>Images</span>
|
||||||
Images
|
|
||||||
<i class="fa fa-chevron-down min"></i>
|
<i class="fa fa-chevron-down min"></i>
|
||||||
<i class="fa fa-chevron-up max"></i>
|
<i class="fa fa-chevron-up max"></i>
|
||||||
</label>
|
</label>
|
||||||
|
|
@ -79,10 +90,8 @@
|
||||||
<li><input id="nav-help" type="checkbox" checked>
|
<li><input id="nav-help" type="checkbox" checked>
|
||||||
<ul>
|
<ul>
|
||||||
<li><label for="nav-Help">
|
<li><label for="nav-Help">
|
||||||
<span class="centerText">
|
|
||||||
<i class="fa fa-question-circle"></i>
|
<i class="fa fa-question-circle"></i>
|
||||||
</span>
|
<span>Tables & Lists</span>
|
||||||
Tables & Lists
|
|
||||||
<i class="fa fa-chevron-down min"></i>
|
<i class="fa fa-chevron-down min"></i>
|
||||||
<i class="fa fa-chevron-up max"></i>
|
<i class="fa fa-chevron-up max"></i>
|
||||||
</label>
|
</label>
|
||||||
|
|
@ -94,10 +103,8 @@
|
||||||
<li><input id="nav-help" type="checkbox" checked>
|
<li><input id="nav-help" type="checkbox" checked>
|
||||||
<ul>
|
<ul>
|
||||||
<li><label for="nav-Help">
|
<li><label for="nav-Help">
|
||||||
<span class="centerText">
|
|
||||||
<i class="fa fa-question-circle"></i>
|
<i class="fa fa-question-circle"></i>
|
||||||
</span>
|
<span>Layout</span>
|
||||||
Layout
|
|
||||||
<i class="fa fa-chevron-down min"></i>
|
<i class="fa fa-chevron-down min"></i>
|
||||||
<i class="fa fa-chevron-up max"></i>
|
<i class="fa fa-chevron-up max"></i>
|
||||||
</label>
|
</label>
|
||||||
|
|
@ -109,10 +116,8 @@
|
||||||
<li><input id="nav-help" type="checkbox" checked>
|
<li><input id="nav-help" type="checkbox" checked>
|
||||||
<ul>
|
<ul>
|
||||||
<li><label for="nav-Help">
|
<li><label for="nav-Help">
|
||||||
<span class="centerText">
|
|
||||||
<i class="fa fa-question-circle"></i>
|
<i class="fa fa-question-circle"></i>
|
||||||
</span>
|
<span>Interaction</span>
|
||||||
Interaction
|
|
||||||
<i class="fa fa-chevron-down min"></i>
|
<i class="fa fa-chevron-down min"></i>
|
||||||
<i class="fa fa-chevron-up max"></i>
|
<i class="fa fa-chevron-up max"></i>
|
||||||
</label>
|
</label>
|
||||||
|
|
@ -124,10 +129,8 @@
|
||||||
<li><input id="nav-help" type="checkbox" checked>
|
<li><input id="nav-help" type="checkbox" checked>
|
||||||
<ul>
|
<ul>
|
||||||
<li><label for="nav-Help">
|
<li><label for="nav-Help">
|
||||||
<span class="centerText">
|
|
||||||
<i class="fa fa-question-circle"></i>
|
<i class="fa fa-question-circle"></i>
|
||||||
</span>
|
<span>Views</span>
|
||||||
Views
|
|
||||||
<i class="fa fa-chevron-down min"></i>
|
<i class="fa fa-chevron-down min"></i>
|
||||||
<i class="fa fa-chevron-up max"></i>
|
<i class="fa fa-chevron-up max"></i>
|
||||||
</label>
|
</label>
|
||||||
|
|
@ -140,10 +143,8 @@
|
||||||
<li><input id="nav-help" type="checkbox" checked>
|
<li><input id="nav-help" type="checkbox" checked>
|
||||||
<ul>
|
<ul>
|
||||||
<li><label for="nav-Help">
|
<li><label for="nav-Help">
|
||||||
<span class="centerText">
|
|
||||||
<i class="fa fa-question-circle"></i>
|
<i class="fa fa-question-circle"></i>
|
||||||
</span>
|
<span>JS Tests</span>
|
||||||
JS Tests
|
|
||||||
<i class="fa fa-chevron-down min"></i>
|
<i class="fa fa-chevron-down min"></i>
|
||||||
<i class="fa fa-chevron-up max"></i>
|
<i class="fa fa-chevron-up max"></i>
|
||||||
</label>
|
</label>
|
||||||
|
|
@ -152,13 +153,11 @@
|
||||||
<li><a href="?page=actions">Actions</a></li>
|
<li><a href="?page=actions">Actions</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li><input id="nav-help" type="checkbox" checked>
|
<li><input id="nav-help" type="checkbox">
|
||||||
<ul>
|
<ul>
|
||||||
<li><label for="nav-Help">
|
<li><label for="nav-Help">
|
||||||
<span class="centerText">
|
|
||||||
<i class="fa fa-question-circle"></i>
|
<i class="fa fa-question-circle"></i>
|
||||||
</span>
|
<span>Charts (disabled)</span>
|
||||||
Charts
|
|
||||||
<i class="fa fa-chevron-down min"></i>
|
<i class="fa fa-chevron-down min"></i>
|
||||||
<i class="fa fa-chevron-up max"></i>
|
<i class="fa fa-chevron-up max"></i>
|
||||||
</label>
|
</label>
|
||||||
|
|
@ -185,6 +184,7 @@
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
<main>
|
<main>
|
||||||
<header>
|
<header>
|
||||||
|
|
@ -220,6 +220,8 @@
|
||||||
<div id="content" class="container-fluid" role="main">
|
<div id="content" class="container-fluid" role="main">
|
||||||
<?php include __DIR__ . '/' . \str_replace('.', '', ($_GET['page'] ?? 'welcome')) . '.php'; ?>
|
<?php include __DIR__ . '/' . \str_replace('.', '', ($_GET['page'] ?? 'welcome')) . '.php'; ?>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
<?php include __DIR__ . '/globalTemplates.tpl.php'; ?>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -55,5 +55,3 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,26 +1,25 @@
|
||||||
import { AssetManager } from '../../jsOMS/Asset/AssetManager.js';
|
import { AssetManager } from '../../../jsOMS/Asset/AssetManager.js';
|
||||||
import { Logger } from '../../jsOMS/Log/Logger.js';
|
import { Logger } from '../../../jsOMS/Log/Logger.js';
|
||||||
import { CacheManager } from '../../jsOMS/DataStorage/CacheManager.js';
|
import { CacheManager } from '../../../jsOMS/DataStorage/CacheManager.js';
|
||||||
import { StorageManager } from '../../jsOMS/DataStorage/StorageManager.js';
|
import { StorageManager } from '../../../jsOMS/DataStorage/StorageManager.js';
|
||||||
import { EventManager } from '../../jsOMS/Event/EventManager.js';
|
import { EventManager } from '../../../jsOMS/Event/EventManager.js';
|
||||||
import { ResponseManager } from '../../jsOMS/Message/Response/ResponseManager.js';
|
import { ResponseManager } from '../../../jsOMS/Message/Response/ResponseManager.js';
|
||||||
import { Dispatcher } from '../../jsOMS/Dispatcher/Dispatcher.js';
|
import { Dispatcher } from '../../../jsOMS/Dispatcher/Dispatcher.js';
|
||||||
import { AccountManager } from '../../jsOMS/Account/AccountManager.js';
|
import { AccountManager } from '../../../jsOMS/Account/AccountManager.js';
|
||||||
import { UIManager } from '../../jsOMS/UI/UIManager.js';
|
import { UIManager } from '../../../jsOMS/UI/UIManager.js';
|
||||||
import { InputManager } from '../../jsOMS/UI/Input/InputManager.js';
|
import { InputManager } from '../../../jsOMS/UI/Input/InputManager.js';
|
||||||
import { ModuleManager } from '../../jsOMS/Module/ModuleManager.js';
|
import { ModuleManager } from '../../../jsOMS/Module/ModuleManager.js';
|
||||||
import { ReadManager } from '../../jsOMS/UI/Input/Voice/ReadManager.js';
|
import { ReadManager } from '../../../jsOMS/UI/Input/Voice/ReadManager.js';
|
||||||
import { VoiceManager } from '../../jsOMS/UI/Input/Voice/VoiceManager.js';
|
import { VoiceManager } from '../../../jsOMS/UI/Input/Voice/VoiceManager.js';
|
||||||
import { NotificationManager } from '../../jsOMS/Message/Notification/NotificationManager.js';
|
import { NotificationManager } from '../../../jsOMS/Message/Notification/NotificationManager.js';
|
||||||
import { HttpUri } from '../../jsOMS/Uri/HttpUri.js';
|
import { HttpUri } from '../../../jsOMS/Uri/HttpUri.js';
|
||||||
import { UriFactory } from '../../jsOMS/Uri/UriFactory.js';
|
import { UriFactory } from '../../../jsOMS/Uri/UriFactory.js';
|
||||||
|
import { ACTION_EVENTS } from '../../../Web/Backend/js/global/ActionEvents.js';
|
||||||
import { ACTION_EVENTS } from '../../Web/Backend/js/global/ActionEvents.js';
|
import { KEYBOARD_EVENTS } from '../../../Web/Backend/js/global/KeyboardEvents.js';
|
||||||
import { KEYBOARD_EVENTS } from '../../Web/Backend/js/global/KeyboardEvents.js';
|
import { MOUSE_EVENTS } from '../../../Web/Backend/js/global/MouseEvents.js';
|
||||||
import { MOUSE_EVENTS } from '../../Web/Backend/js/global/MouseEvents.js';
|
import { RESPONSE_EVENTS } from '../../../Web/Backend/js/global/ResponseEvents.js';
|
||||||
import { RESPONSE_EVENTS } from '../../Web/Backend/js/global/ResponseEvents.js';
|
import { TOUCH_EVENTS } from '../../../Web/Backend/js/global/TouchEvents.js';
|
||||||
import { TOUCH_EVENTS } from '../../Web/Backend/js/global/TouchEvents.js';
|
import { VOICE_EVENTS } from '../../../Web/Backend/js/global/VoiceEvents.js';
|
||||||
import { VOICE_EVENTS } from '../../Web/Backend/js/global/VoiceEvents.js';
|
|
||||||
|
|
||||||
export class Application {
|
export class Application {
|
||||||
constructor ()
|
constructor ()
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xs-12">
|
<div class="col-xs-12">
|
||||||
<section class="box wf-100">
|
<section class="portlet">
|
||||||
<header><h1>App Notifications</h1></header>
|
<div class="portlet-head">App Notifications</div>
|
||||||
<div class="inner">
|
<div class="portlet-body">
|
||||||
<button id="okButton">OK Message</button>
|
<button id="okButton">OK Message</button>
|
||||||
<button id="infoButton">Info Message</button>
|
<button id="infoButton">Info Message</button>
|
||||||
<button id="warningButton">Warning Message</button>
|
<button id="warningButton">Warning Message</button>
|
||||||
|
|
@ -12,16 +12,22 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="app-message-container" style="position: absolute; margin: 0 auto; right: 1%; top: 1%;">
|
<div class="row">
|
||||||
<template id="app-message-tpl">
|
<div class="col-xs-12">
|
||||||
<div class="log-msg" style="z-index: 11; position: relative; margin: 0 auto; right: 0; top: 0; margin-bottom: 10px;">
|
<section class="portlet">
|
||||||
<h1 class="log-msg-title"></h1>
|
<div class="portlet-head">Special</div>
|
||||||
<div class="log-msg-content"></div>
|
<div class="portlet-body">
|
||||||
|
<button id="vibrateButton">Vibrate Message</button>
|
||||||
|
<button id="stickyButton">Sticky Message</button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<script type="module">
|
<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() {
|
document.getElementById('okButton').addEventListener('click', function() {
|
||||||
window.omsApp.notifyManager.send(
|
window.omsApp.notifyManager.send(
|
||||||
new NotificationMessage(
|
new NotificationMessage(
|
||||||
|
|
@ -61,4 +67,27 @@
|
||||||
), NotificationType.APP_NOTIFICATION
|
), 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>
|
</script>
|
||||||
|
|
@ -1,117 +1,18 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xs-6">
|
<div class="col-xs-6">
|
||||||
<section class="box red wf-100">
|
<section class="portlet">
|
||||||
<header><h1>Header</h1></header>
|
<div class="portlet-head">Header</div>
|
||||||
<div class="inner">
|
<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>
|
|
||||||
</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">
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="portlet-foot">Footer</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-xs-6">
|
<div class="col-xs-6">
|
||||||
<section class="box wf-100">
|
<section class="box wf-100">
|
||||||
<div class="inner">
|
<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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,4 @@
|
||||||
|
<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="box wf-100 floatLeft">
|
||||||
<section class="inner center"> </section>
|
<section class="inner center"> </section>
|
||||||
</section>
|
</section>
|
||||||
|
|
@ -49,3 +50,4 @@
|
||||||
<section class="box wf-25 floatLeft">
|
<section class="box wf-25 floatLeft">
|
||||||
<section class="inner center"> </section>
|
<section class="inner center"> </section>
|
||||||
</section>
|
</section>
|
||||||
|
</div>
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xs-12 col-md-6">
|
<div class="col-xs-12">
|
||||||
<section class="box">
|
<div class="box">
|
||||||
<div class="slider-1">
|
<div class="slider-1">
|
||||||
<figure>
|
<figure>
|
||||||
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" alt="">
|
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" alt="">
|
||||||
|
|
@ -10,11 +10,13 @@
|
||||||
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" alt="">
|
<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" alt="">
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-xs-12 col-md-6">
|
<div class="row">
|
||||||
<section class="box wf-100">
|
<div class="col-xs-12">
|
||||||
|
<div class="box wf-100">
|
||||||
<div class="slider-2">
|
<div class="slider-2">
|
||||||
<input type="radio" name="slide_switch" id="id1"/>
|
<input type="radio" name="slide_switch" id="id1"/>
|
||||||
<label for="id1">
|
<label for="id1">
|
||||||
|
|
@ -41,13 +43,13 @@
|
||||||
</label>
|
</label>
|
||||||
<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/>
|
<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xs-12">
|
<div class="col-xs-12">
|
||||||
<section class="box">
|
<div class="box">
|
||||||
<div class="slider-3">
|
<div class="slider-3">
|
||||||
<figure class="icon-cards">
|
<figure class="icon-cards">
|
||||||
<div class="icon-cards-content">
|
<div class="icon-cards-content">
|
||||||
|
|
@ -63,6 +65,6 @@
|
||||||
</div>
|
</div>
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -1,8 +1,13 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xs-12 col-md-6">
|
<div class="col-xs-12 col-md-6">
|
||||||
<div class="box wf-100">
|
<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">
|
<table class="default" id="table1">
|
||||||
<caption>Table Title</caption>
|
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<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" data-filter=""></i>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||||
|
|
@ -37,35 +42,24 @@
|
||||||
<td>Col4</td>
|
<td>Col4</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</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>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="portlet-foot">
|
||||||
|
<a class="button" href="#">Previous</a>
|
||||||
|
<a class="button" href="#">Next</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-xs-12 col-md-6">
|
<div class="col-xs-12 col-md-6">
|
||||||
<div class="box wf-100">
|
<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">
|
<table class="default" id="table2">
|
||||||
<caption>Table Title</caption>
|
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
<td>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
|
||||||
|
|
@ -100,37 +94,22 @@
|
||||||
<td>Col3</td>
|
<td>Col3</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</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>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xs-12">
|
<div class="col-xs-12">
|
||||||
<div class="box wf-100">
|
<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">
|
<table id="tRemovable" class="default" data-ui-element="tr" data-tag="form">
|
||||||
<caption>Table Title</caption>
|
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<td></td>
|
<td></td>
|
||||||
|
|
@ -173,21 +152,12 @@
|
||||||
<tfoot>
|
<tfoot>
|
||||||
<tr>
|
<tr>
|
||||||
<td colspan="4">
|
<td colspan="4">
|
||||||
<label>Results: 4</label>
|
|
||||||
<select>
|
<select>
|
||||||
<option>25</option>
|
<option>25</option>
|
||||||
<option>50</option>
|
<option>50</option>
|
||||||
<option>100</option>
|
<option>100</option>
|
||||||
<option>500</option>
|
<option>500</option>
|
||||||
</select>
|
</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>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tfoot>
|
</tfoot>
|
||||||
|
|
@ -195,12 +165,18 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xs-12">
|
<div class="col-xs-12">
|
||||||
<div class="box wf-100">
|
<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">
|
<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>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
|
|
@ -221,261 +197,6 @@
|
||||||
</div>
|
</div>
|
||||||
</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>
|
|
||||||
</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>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<template id="table-filter-tpl">
|
<template id="table-filter-tpl">
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,11 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xs-12">
|
<div class="col-xs-12">
|
||||||
<div class="box wf-100">
|
<div class="box wf-100">
|
||||||
|
<h1>Horizontal tabs</h1>
|
||||||
<div class="tabview tab-1">
|
<div class="tabview tab-1">
|
||||||
<ul class="tab-links">
|
<ul class="tab-links">
|
||||||
<li class="active"><label for="c-tab-1">TAAAB</label></li>
|
<li class="active"><label for="c-tab-1">Tab 1</label></li>
|
||||||
<li><label for="c-tab-2">TAAAB</label></li>
|
<li><label for="c-tab-2">Tab 2</label></li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="tab-content">
|
<div class="tab-content">
|
||||||
<input type="radio" id="c-tab-1" name="tabular-1" checked>
|
<input type="radio" id="c-tab-1" name="tabular-1" checked>
|
||||||
|
|
@ -22,12 +23,13 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xs-6">
|
<div class="col-xs-12">
|
||||||
<div class="box wf-100">
|
<div class="box wf-100">
|
||||||
|
<h1>Vertical tabs</h1>
|
||||||
<div class="tabview tab-1 left">
|
<div class="tabview tab-1 left">
|
||||||
<ul class="tab-links">
|
<ul class="tab-links">
|
||||||
<li class="active"><label for="c-tab-1-2">TAAAB</label></li>
|
<li class="active"><label for="c-tab-1-2">Tab 1</label></li>
|
||||||
<li><label for="c-tab-2-3">TAAAB</label></li>
|
<li><label for="c-tab-2-3">Tab 2</label></li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="tab-content">
|
<div class="tab-content">
|
||||||
<input type="radio" id="c-tab-1-2" name="tabular-3" checked>
|
<input type="radio" id="c-tab-1-2" name="tabular-3" checked>
|
||||||
|
|
@ -47,10 +49,11 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xs-12">
|
<div class="col-xs-12">
|
||||||
<div class="box wf-100">
|
<div class="box wf-100">
|
||||||
|
<h1>Horizontal tabs2</h1>
|
||||||
<div class="tabview tab-2">
|
<div class="tabview tab-2">
|
||||||
<ul class="tab-links">
|
<ul class="tab-links">
|
||||||
<li><label for="c-tab2-1">TAAAB</label></li>
|
<li><label for="c-tab2-1">Tab 1</label></li>
|
||||||
<li class="active"><label for="c-tab2-2">TAAAB</label></li>
|
<li class="active"><label for="c-tab2-2">Tab 2</label></li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="tab-content">
|
<div class="tab-content">
|
||||||
<input type="radio" id="c-tab2-1" name="tabular-2" checked>
|
<input type="radio" id="c-tab2-1" name="tabular-2" checked>
|
||||||
|
|
@ -69,6 +72,31 @@
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-xs-12">
|
<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">
|
<div class="box ac-container wf-100">
|
||||||
<input type="checkbox" name="About us" id="ac-1">
|
<input type="checkbox" name="About us" id="ac-1">
|
||||||
<label for="ac-1">About us</label>
|
<label for="ac-1">About us</label>
|
||||||
|
|
@ -115,3 +143,28 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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="row">
|
||||||
<div class="col-xs-12">
|
<div class="col-xs-12">
|
||||||
<div class="box">
|
<section class="portlet">
|
||||||
<span class="tag green">Test Tag</span>
|
<div class="portlet-body">
|
||||||
<span class="tag red">Test Tag</span>
|
<span class="tag">Test Tag</span>
|
||||||
<span class="tag blue">Test Tag</span>
|
<span class="tag"><i class="fa fa-lightbulb-o"></i>Test Tag</span>
|
||||||
<span class="tag orange">Test Tag</span>
|
<span class="tag"><i class="fa fa-times"></i><i class="fa fa-lightbulb-o"></i>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>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1 +1 @@
|
||||||
Test welcome page
|
<div class="emptyPage"></div>
|
||||||
Loading…
Reference in New Issue
Block a user