Browse Source

Style contacts table card

experimental
Paweł Jedwabny 3 years ago
parent
commit
cc662ea7f9
3 changed files with 129 additions and 787 deletions
  1. +6
    -673
      modules/Utils/GenericBrowser/theme/default.css
  2. +103
    -93
      modules/Utils/GenericBrowser/theme/default.tpl
  3. +20
    -21
      modules/Utils/RecordBrowser/theme/Browsing_records.tpl

+ 6
- 673
modules/Utils/GenericBrowser/theme/default.css View File

@@ -1,685 +1,18 @@
.css3_content_shadow{
/* css3 shadow border*/
-webkit-box-shadow: 0px 0px 1px black;
-moz-box-shadow: 0px 0px 1px black;
box-shadow: 0px 0px 1px black;
/* end css3 shadow border*/
padding:5px;
}

.Utils_GenericBrowser__td .direction {
width: 20px;
margin: auto;
text-align: center;
color: white;
padding: 0px 0px 2px 0px;
}

.Utils_GenericBrowser__actions {
box-sizing: content-box;
}

.GenericBrowser_letters {
background-color: white;
margin: 3px auto auto 5px;
}

#generic_browser_search{
width: 364px;
}
.Utils_GenericBrowser__quickjump {
font-weight: normal;
}

/* search */

.letters-search {
width: 100%;
padding: 5px 8px;
}

.letters-search img {
border: none;
}

.letters-search .label {
background-color: #336699;
color: white;
padding-left: 10px;
padding-right: 10px;
}

.letters-search .search-box input {
background-color: #e6ecf2;
background-color: white;
height: 28px;
padding-left: 5px;
padding-right: 2px;
vertical-align: middle;
width: 96px;
border: 1px solid #b3b3b3;

/* border radius */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
/* end border radius */
}

.letters-search input:focus {
background-color: #ffffa5;
}

.letters-search .submit input {
width: 100px;
height: 30px;
border: none;
vertical-align: middle;
color: white;
padding-bottom: 3px;
margin-left: 3px;

/*dark css3 green background gradient */
background: #226622; /* Old browsers */
background: -moz-linear-gradient(top, #709c70 0%, #4d844d 49%, #226622 51%, #649464 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#709c70), color-stop(49%,#4d844d), color-stop(51%,#226622), color-stop(100%,#649464)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #709c70 0%,#4d844d 49%,#226622 51%,#649464 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #709c70 0%,#4d844d 49%,#226622 51%,#649464 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #709c70 0%,#4d844d 49%,#226622 51%,#649464 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64B164', endColorstr='#307030',GradientType=0); /* IE6-9 */
background: linear-gradient(top, #709c70 0%,#4d844d 49%,#226622 51%,#649464 100%); /* W3C */
/* end dark css3 green background gradient */

/* border radius */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
/* end border radius */

/* css3 shadow border*/
-webkit-box-shadow: 1px 1px 3px gray;
-moz-box-shadow: 1px 1px 3px gray;
box-shadow: 1px 1px 3px gray;
/* end css3 shadow border*/
}

.letters-search .submit input:hover {
/*light css3 green background gradient */
background: #226622; /* Old browsers */
background: -moz-linear-gradient(top, #226622 0%, #71b871 1%, #58ab58 49%, #379b37 51%, #63b163 95%, #226622 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#226622), color-stop(1%,#71b871), color-stop(49%,#58ab58), color-stop(51%,#379b37), color-stop(95%,#63b163), color-stop(100%,#226622)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #226622 0%,#71b871 1%,#58ab58 49%,#379b37 51%,#63b163 95%,#226622 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #226622 0%,#71b871 1%,#58ab58 49%,#379b37 51%,#63b163 95%,#226622 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #226622 0%,#71b871 1%,#58ab58 49%,#379b37 51%,#63b163 95%,#226622 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5ada5a', endColorstr='#2d602d',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #226622 0%,#71b871 1%,#58ab58 49%,#379b37 51%,#63b163 95%,#226622 100%); /* W3C */
/* end light css3 green background gradient */
}

.letters-search .advanced {
padding-left: 6px;
}

.expand_collapse a.button,
.letters-search .advanced a.button {
height: 23px;
padding: 4px 0px 3px 0px;
width: 150px;
/*dark css3 green background gradient */
background: #226622; /* Old browsers */
background: -moz-linear-gradient(top, #709c70 0%, #4d844d 49%, #226622 51%, #649464 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#709c70), color-stop(49%,#4d844d), color-stop(51%,#226622), color-stop(100%,#649464)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #709c70 0%,#4d844d 49%,#226622 51%,#649464 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #709c70 0%,#4d844d 49%,#226622 51%,#649464 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #709c70 0%,#4d844d 49%,#226622 51%,#649464 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64B164', endColorstr='#307030',GradientType=0); /* IE6-9 */
background: linear-gradient(top, #709c70 0%,#4d844d 49%,#226622 51%,#649464 100%); /* W3C */
/* end dark css3 green background gradient */

/* border radius */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
/* end border radius */

/* css3 shadow border*/
-webkit-box-shadow: 1px 1px 3px gray;
-moz-box-shadow: 1px 1px 3px gray;
box-shadow: 1px 1px 3px gray;
/* end css3 shadow border*/
}
.expand_collapse a.button {
width:120px;
}

.letters-search .advanced a.button:hover {
/*light css3 green background gradient */
background: #226622; /* Old browsers */
background: -moz-linear-gradient(top, #226622 0%, #71b871 1%, #58ab58 49%, #379b37 51%, #63b163 95%, #226622 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#226622), color-stop(1%,#71b871), color-stop(49%,#58ab58), color-stop(51%,#379b37), color-stop(95%,#63b163), color-stop(100%,#226622)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #226622 0%,#71b871 1%,#58ab58 49%,#379b37 51%,#63b163 95%,#226622 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #226622 0%,#71b871 1%,#58ab58 49%,#379b37 51%,#63b163 95%,#226622 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #226622 0%,#71b871 1%,#58ab58 49%,#379b37 51%,#63b163 95%,#226622 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5ada5a', endColorstr='#2d602d',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #226622 0%,#71b871 1%,#58ab58 49%,#379b37 51%,#63b163 95%,#226622 100%); /* W3C */
/* end light css3 green background gradient */
}
/* */


.plus-minus,
.plus-minus:hover {
width: 8px!important;
height: 8px !important;
float: left;
margin-top: 5px;
background: none !important;
}

table.Utils_GenericBrowser > thead > tr > th input {
display: block;
width: 100%;
border: 0px;
padding: 3px;
background-color: #FFFFF9;
-webkit-box-shadow: inset 1px 1px 1px #333;
-moz-box-shadow: inset 1px 1px 1px #333;
box-shadow: inset 1px 1px 1px #333;
}

table.Utils_GenericBrowser > thead > tr > th input:focus {
background-color: #ffffa5;
}

table.Utils_GenericBrowser {
min-width:950px;
}
.applet table.Utils_GenericBrowser {
min-width:300px;
}

table.Utils_GenericBrowser > tbody {
overflow: auto;
}

.Utils_GenericBrowser__td {
text-align: left;
border-right: 1px solid #B3B3B3;
border-bottom: 1px solid #B3B3B3;
height: 14px;
padding-left: 3px;
padding-right: 3px;
padding-top: 3px;
padding-bottom: 2px;
vertical-align: top;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 14px;
}
.epesi_rtl .Utils_GenericBrowser__td {
text-align: right;
}

.Utils_GenericBrowser__td a img {
margin: 0 1px;
}

table.Utils_GenericBrowser > tbody > td img {
vertical-align: middle;
}

/* add new record browser*/
.record_browser_button,
.record_browser_add_new {
display: block;
/*width: 67px;*/
height: 18px;
color: white;
padding: 6px 10px;
/*dark css3 green background gradient */
background: #226622; /* Old browsers */
background: -moz-linear-gradient(top, #709c70 0%, #4d844d 49%, #226622 51%, #649464 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#709c70), color-stop(49%,#4d844d), color-stop(51%,#226622), color-stop(100%,#649464)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #709c70 0%,#4d844d 49%,#226622 51%,#649464 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #709c70 0%,#4d844d 49%,#226622 51%,#649464 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #709c70 0%,#4d844d 49%,#226622 51%,#649464 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64B164', endColorstr='#307030',GradientType=0); /* IE6-9 */
background: linear-gradient(top, #709c70 0%,#4d844d 49%,#226622 51%,#649464 100%); /* W3C */
/* end dark css3 green background gradient */

/* border radius */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
/* end border radius */

/* css3 shadow border*/
-webkit-box-shadow: 1px 1px 3px gray;
-moz-box-shadow: 1px 1px 3px gray;
box-shadow: 1px 1px 3px gray;
/* end css3 shadow border*/
}
.record_browser_button:hover,
.record_browser_add_new:hover {
color: white;
/*light css3 green background gradient */
background: #226622; /* Old browsers */
background: -moz-linear-gradient(top, #226622 0%, #71b871 1%, #58ab58 49%, #379b37 51%, #63b163 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#226622), color-stop(1%,#71b871), color-stop(49%,#58ab58), color-stop(51%,#379b37), color-stop(100%,#63b163)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #226622 0%,#71b871 1%,#58ab58 49%,#379b37 51%,#63b163 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #226622 0%,#71b871 1%,#58ab58 49%,#379b37 51%,#63b163 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #226622 0%,#71b871 1%,#58ab58 49%,#379b37 51%,#63b163 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5ada5a', endColorstr='#2d602d',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #226622 0%,#71b871 1%,#58ab58 49%,#379b37 51%,#63b163 100%); /* W3C */
/* end light css3 green background gradient */
}
.record_browser_button {
margin-right: 6px;
display: inline-block;
line-height: 16px;
}
.record_browser_button img{
width: 25px;
height: 25px;
margin-right: 3px;
margin-top: -3px;
}
.record_browser_add_new img {
display: block;
float: left;
margin: 2px 6px auto auto;
}
.record_browser_add_new .add_new {
margin-top:2px;
display: inline-block;
}


/* letter links */

.letters-search .letters {
text-align: left;
padding: 0px 7px 0 0px;
display: block;
}

.letters-search > tbody > tr > td {
display: inline-block;
float: left;
margin-top: 5px;
}

.letters-search .reset {
text-align: left;
}

.letter_search_icon {
padding: 0px 7px 0 0px;
color: white;
}

.letter_search_icon form {
display: inline-block;
}

.letters-search .letters .all {
width: auto;
padding: 0px 5px 2px 7px;
color: white;

/*dark css3 green background gradient */
background: #226622; /* Old browsers */
background: -moz-linear-gradient(top, #709c70 0%, #4d844d 49%, #226622 51%, #649464 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#709c70), color-stop(49%,#4d844d), color-stop(51%,#226622), color-stop(100%,#649464)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #709c70 0%,#4d844d 49%,#226622 51%,#649464 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #709c70 0%,#4d844d 49%,#226622 51%,#649464 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #709c70 0%,#4d844d 49%,#226622 51%,#649464 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64B164', endColorstr='#307030',GradientType=0); /* IE6-9 */
background: linear-gradient(top, #709c70 0%,#4d844d 49%,#226622 51%,#649464 100%); /* W3C */
/* end dark css3 green background gradient */

/* border radius */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
/* end border radius */

/* css3 shadow border*/
-webkit-box-shadow: 1px 1px 3px gray;
-moz-box-shadow: 1px 1px 3px gray;
box-shadow: 1px 1px 3px gray;
/* end css3 shadow border*/
}
.letters-search .letters .all:hover {
/*light css3 green background gradient */
background: #226622; /* Old browsers */
background: -moz-linear-gradient(top, #226622 0%, #71b871 1%, #58ab58 49%, #379b37 51%, #63b163 95%, #226622 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#226622), color-stop(1%,#71b871), color-stop(49%,#58ab58), color-stop(51%,#379b37), color-stop(95%,#63b163), color-stop(100%,#226622)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #226622 0%,#71b871 1%,#58ab58 49%,#379b37 51%,#63b163 95%,#226622 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #226622 0%,#71b871 1%,#58ab58 49%,#379b37 51%,#63b163 95%,#226622 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #226622 0%,#71b871 1%,#58ab58 49%,#379b37 51%,#63b163 95%,#226622 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5ada5a', endColorstr='#2d602d',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #226622 0%,#71b871 1%,#58ab58 49%,#379b37 51%,#63b163 95%,#226622 100%); /* W3C */
/* end light css3 green background gradient */
}
.letters-search .letters .letter {
width: 14px;
}

.letters-search .letters a,
.letters-search .letters span {
margin: 2px 3px;
display: block;
float: left;
line-height: 14px;
vertical-align: middle;
text-align: center;
color: white;
padding: 0px 1px 2px 2px;

/*dark css3 green background gradient */
background: #226622; /* Old browsers */
background: -moz-linear-gradient(top, #709c70 0%, #4d844d 49%, #226622 51%, #649464 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#709c70), color-stop(49%,#4d844d), color-stop(51%,#226622), color-stop(100%,#649464)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #709c70 0%,#4d844d 49%,#226622 51%,#649464 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #709c70 0%,#4d844d 49%,#226622 51%,#649464 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #709c70 0%,#4d844d 49%,#226622 51%,#649464 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64B164', endColorstr='#307030',GradientType=0); /* IE6-9 */
background: linear-gradient(top, #709c70 0%,#4d844d 49%,#226622 51%,#649464 100%); /* W3C */
/* end dark css3 green background gradient */

/* border radius */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
/* end border radius */

/* css3 shadow border*/
-webkit-box-shadow: 1px 1px 3px gray;
-moz-box-shadow: 1px 1px 3px gray;
box-shadow: 1px 1px 3px gray;
/* end css3 shadow border*/
}
.letters-search .letters a:hover,
.letters-search .letters span:hover {
/*light css3 green background gradient */
background: #226622; /* Old browsers */
background: -moz-linear-gradient(top, #226622 0%, #71b871 1%, #58ab58 49%, #379b37 51%, #63b163 95%, #226622 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#226622), color-stop(1%,#71b871), color-stop(49%,#58ab58), color-stop(51%,#379b37), color-stop(95%,#63b163), color-stop(100%,#226622)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #226622 0%,#71b871 1%,#58ab58 49%,#379b37 51%,#63b163 95%,#226622 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #226622 0%,#71b871 1%,#58ab58 49%,#379b37 51%,#63b163 95%,#226622 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #226622 0%,#71b871 1%,#58ab58 49%,#379b37 51%,#63b163 95%,#226622 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5ada5a', endColorstr='#2d602d',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #226622 0%,#71b871 1%,#58ab58 49%,#379b37 51%,#63b163 95%,#226622 100%); /* W3C */
/* end light css3 green background gradient */
}
/* */

.quick_jump_letters {
z-index: 1005;
position: absolute;
margin-right: 50px;
margin-left: 50px;
}

.letters-search .letters .abc {
height: 19px;
padding: 4px 0px 7px 0px;
line-height: 20px;
width: 50px;
text-align: center;
vertical-align: middle;
color: white;
cursor: pointer;
float: left;

/*dark css3 green background gradient */
background: #226622; /* Old browsers */
background: -moz-linear-gradient(top, #709c70 0%, #4d844d 49%, #226622 51%, #649464 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#709c70), color-stop(49%,#4d844d), color-stop(51%,#226622), color-stop(100%,#649464)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #709c70 0%,#4d844d 49%,#226622 51%,#649464 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #709c70 0%,#4d844d 49%,#226622 51%,#649464 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #709c70 0%,#4d844d 49%,#226622 51%,#649464 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64B164', endColorstr='#307030',GradientType=0); /* IE6-9 */
background: linear-gradient(top, #709c70 0%,#4d844d 49%,#226622 51%,#649464 100%); /* W3C */
/* end dark css3 green background gradient */

/* border radius */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
/* end border radius */

/* css3 shadow border*/
-webkit-box-shadow: 1px 1px 3px gray;
-moz-box-shadow: 1px 1px 3px gray;
box-shadow: 1px 1px 3px gray;
/* end css3 shadow border*/
}

.letters-search .letters .abc:hover {
/*light css3 green background gradient */
background: #226622; /* Old browsers */
background: -moz-linear-gradient(top, #226622 0%, #71b871 1%, #58ab58 49%, #379b37 51%, #63b163 95%, #226622 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#226622), color-stop(1%,#71b871), color-stop(49%,#58ab58), color-stop(51%,#379b37), color-stop(95%,#63b163), color-stop(100%,#226622)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #226622 0%,#71b871 1%,#58ab58 49%,#379b37 51%,#63b163 95%,#226622 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #226622 0%,#71b871 1%,#58ab58 49%,#379b37 51%,#63b163 95%,#226622 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #226622 0%,#71b871 1%,#58ab58 49%,#379b37 51%,#63b163 95%,#226622 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5ada5a', endColorstr='#2d602d',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #226622 0%,#71b871 1%,#58ab58 49%,#379b37 51%,#63b163 95%,#226622 100%); /* W3C */
/* end light css3 green background gradient */
}



.layer {
padding: 8px;
width: auto;
}

.layer .margin2px {
padding: 2px;
background-color: #FFFFFF;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

.applet .layer .margin2px {
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}

.IEfix {
_height: 0px;
}

/* bottom navigation */
#Utils_GenericBrowser__navigation {
height: 23px;
vertical-align: middle;
width:100%;
table-layout: auto;
}

.nav_pagin select,
.nav_per_page select {
font-size: 13px;
}
#Utils_GenericBrowser__navigation .nav_shadow {
/* css3 shadow border*/
-webkit-box-shadow: 1px 1px 3px black;
-moz-box-shadow: 1px 1px 3px black;
box-shadow: 1px 1px 3px black;
/* end css3 shadow border*/
}
#Utils_GenericBrowser__navigation {
color: white;
font-size: 120%;

/* gray v1 css3 background gradient */
background: #9c9c9c; /* Old browsers */
background: -moz-linear-gradient(top, #9c9c9c 0%, #858585 49%, #666666 51%, #939393 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9c9c9c), color-stop(49%,#858585), color-stop(51%,#666666), color-stop(100%,#939393)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #9c9c9c 0%,#858585 49%,#666666 51%,#939393 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #9c9c9c 0%,#858585 49%,#666666 51%,#939393 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #9c9c9c 0%,#858585 49%,#666666 51%,#939393 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9c9c', endColorstr='#666666',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #9c9c9c 0%,#858585 49%,#666666 51%,#939393 100%); /* W3C */
/* gray v1 css3 background gradient */

-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
}

#Utils_GenericBrowser__navigation td.nav_summary {
width: 160px;
text-align: center;
white-space: nowrap;
}

#Utils_GenericBrowser__navigation td.nav_button {
width: 96px;
}

#Utils_GenericBrowser__navigation .nav_button a {
display: block;
color: white;
width: 82px;
height: 19px;
padding: 4px 5px 2px 5px;
margin-right: 4px;

/*dark css3 green background gradient */
background: #226622; /* Old browsers */
background: -moz-linear-gradient(top, #709c70 0%, #4d844d 49%, #226622 51%, #649464 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#709c70), color-stop(49%,#4d844d), color-stop(51%,#226622), color-stop(100%,#649464)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #709c70 0%,#4d844d 49%,#226622 51%,#649464 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #709c70 0%,#4d844d 49%,#226622 51%,#649464 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #709c70 0%,#4d844d 49%,#226622 51%,#649464 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#64B164', endColorstr='#307030',GradientType=0); /* IE6-9 */
background: linear-gradient(top, #709c70 0%,#4d844d 49%,#226622 51%,#649464 100%); /* W3C */
/* end dark css3 green background gradient */

-webkit-box-shadow: inset 1px 1px 1px #333;
-moz-box-shadow: inset 1px 1px 1px #333;
box-shadow: inset 1px 1px 1px #333;
}

#Utils_GenericBrowser__navigation .nav_button a:hover {
/*light css3 green background gradient */
background: #226622; /* Old browsers */
background: -moz-linear-gradient(top, #226622 0%, #71b871 1%, #58ab58 49%, #379b37 51%, #63b163 95%, #226622 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#226622), color-stop(1%,#71b871), color-stop(49%,#58ab58), color-stop(51%,#379b37), color-stop(95%,#63b163), color-stop(100%,#226622)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #226622 0%,#71b871 1%,#58ab58 49%,#379b37 51%,#63b163 95%,#226622 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #226622 0%,#71b871 1%,#58ab58 49%,#379b37 51%,#63b163 95%,#226622 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #226622 0%,#71b871 1%,#58ab58 49%,#379b37 51%,#63b163 95%,#226622 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5ada5a', endColorstr='#2d602d',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #226622 0%,#71b871 1%,#58ab58 49%,#379b37 51%,#63b163 95%,#226622 100%); /* W3C */
/* end light css3 green background gradient */
}

#Utils_GenericBrowser__navigation .nav_button div {
margin: 0px 2px;
}

#Utils_GenericBrowser__navigation .nav_button .nav_left_arrow {
float: left;
margin-top: 1px;
}
#Utils_GenericBrowser__navigation .nav_button .nav_left_label {
margin-left: 20px;
}

#Utils_GenericBrowser__navigation .nav_button .nav_right_arrow {
float: right;
margin-top: 1px;
}
#Utils_GenericBrowser__navigation .nav_button .nav_right_label {
float: left;
}

#Utils_GenericBrowser__navigation .nav_button img {
border: none;
}

#Utils_GenericBrowser__navigation .nav_per_page {
padding-right: 10px;
}

.epesi_rtl #Utils_GenericBrowser__navigation img {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}



.Utils_GenericBrowser__overflow_div {
background-color: white;
border: 1px solid gray;


/* css3 shadow border*/
-webkit-box-shadow: 1px 1px 3px black;
-moz-box-shadow: 1px 1px 3px black;
box-shadow: 1px 1px 3px black;
/* end css3 shadow border*/

/* border radius */
-webkit-border-radius: 0px 6px 6px 6px;
-moz-border-radius: 0px 6px 6px 6px;
border-radius: 0px 6px 6px 6px;
/* end border radius */
}

.Utils_GenericBrowser__overflow_div_content {
padding: 3px;
word-wrap: break-word;
}

.Utils_GenericBrowser img.action_button {
width: 14px;
height: 14px;
}

.Utils_GenericBrowser__overflow_div_content img.action_button {
width: 28px;
height: 28px;
padding-right: 8px;
}

div.expandable.collapsed {
height: 18px;
height: 18px;
}
div.expandable {
}
div.expandable.collapsed.exceedsHeight {
height: 17px !important;
border-bottom: 1px dotted red;
height: 17px !important;
border-bottom: 1px dotted red;
}
div.expandable:not(.exceedsHeight) p {
margin: 0;
margin: 0;
}
div.expandable.collapsed p {
margin: 0;
margin: 0;
}
div.expandable.expanded {
white-space: normal;
}
.Utils_GenericBrowser__td_data_rows {
overflow: hidden;
}

.btn-group:hover #menu-icons {
display: block;
margin-top: 0px;
}
.dropdown-menu-container {
position: absolute;
white-space: normal;
}

+ 103
- 93
modules/Utils/GenericBrowser/theme/default.tpl View File

@@ -3,9 +3,9 @@
{/php}

<div>
{if (isset($custom_label) && $custom_label) || isset($letter_links) || isset($form_data_search) || isset($expand_collapse)}
<div class="nonselectable clearfix" style="margin-bottom: 20px">
<div class="pull-left">
{if (isset($custom_label) && $custom_label) || isset($letter_links) || isset($form_data_search) || isset($expand_collapse)}
<div class="card-header">
<div class="pull-left">
<!-- Custom label -->
{if (isset($custom_label) && $custom_label)}
<span {$custom_label_args}>
@@ -14,124 +14,134 @@
{/if}
<!-- QuickJump -->
{*{if isset($letter_links)}*}
{*<div class="letters" style="display: inline-block">*}
{*<button class="btn btn-warning" onclick="quick_jump_letters('{$id}');">ABC</button>*}
{*<div id="quick_jump_letters_{$id}" class="quick_jump_letters"*}
{*{if $quickjump_to==''}*}
{*style="display: none;"*}
{*{/if}*}
{*>*}
{*<div class="css3_content_shadow GenericBrowser_letters">*}
{*{if isset($letter_links)}*}
{*{foreach key=k item=letter from=$letter_links}*}
{*<a class="badge" {$letter.href}>{$letter.label}</a>*}
{*{/foreach}*}
{*{/if}*}
{*</div>*}
{*</div>*}
{*</div>*}
{*<div class="letters" style="display: inline-block">*}
{*<button class="btn btn-warning" onclick="quick_jump_letters('{$id}');">ABC</button>*}
{*<div id="quick_jump_letters_{$id}" class="quick_jump_letters"*}
{*{if $quickjump_to==''}*}
{*style="display: none;"*}
{*{/if}*}
<!-- Expand/Collapse -->
{*>*}
{*<div class="css3_content_shadow GenericBrowser_letters">*}
{*{if isset($letter_links)}*}
{*{foreach key=k item=letter from=$letter_links}*}
{*<a class="badge" {$letter.href}>{$letter.label}</a>*}
{*{/foreach}*}
{*{/if}*}
{*</div>*}
{*</div>*}
{*</div>*}
{*{/if}*}
<!-- Expand/Collapse -->
{*<div class="expand_collapse" style="display: inline-block">*}
{*{if isset($expand_collapse)}*}
{*<a id="{$expand_collapse.e_id}" class="btn btn-success" {$expand_collapse.e_href}><i class="fa fa-caret-square-o-down"></i> {$expand_collapse.e_label} </a>*}
{*<a id="{$expand_collapse.c_id}" class="btn btn-success" {$expand_collapse.c_href}><i class="fa fa-caret-square-o-up"></i> {$expand_collapse.c_label} </a>*}
{*{/if}*}
{*{if isset($expand_collapse)}*}
{*<a id="{$expand_collapse.e_id}" class="btn btn-success" {$expand_collapse.e_href}><i class="fa fa-caret-square-o-down"></i> {$expand_collapse.e_label} </a>*}
{*<a id="{$expand_collapse.c_id}" class="btn btn-success" {$expand_collapse.c_href}><i class="fa fa-caret-square-o-up"></i> {$expand_collapse.c_label} </a>*}
{*{/if}*}
{*</div>*}
</div>
<div class="pull-right">
</div>
<div class="pull-right">
<!-- Advanced / Simple Search -->
{if isset($form_data_search)}
<div class="form-inline">
{$form_data_search.javascript}

<form {$form_data_search.attributes}>
{$form_data_search.hidden}
{$search_fields_hidden}
{if isset($form_data_search.search)}
{$adv_search}
{$form_data_search.submit_search.html}
{$form_data_search.search.html}
{if isset($form_data_search.show_all)}
{$form_data_search.show_all.html}
{/if}
{else}
{php}
$cols = $this->get_template_vars('cols');
$search_fields = $this->get_template_vars('search_fields');
foreach($cols as $k=>$v){
if(isset($search_fields[$k]))
$cols[$k]['label'] = $cols[$k]['label'].$search_fields[$k];
}
$this->assign('cols',$cols);
{/php}
{if isset($form_data_search.submit_search)}
{$form_data_search.hidden}
{$search_fields_hidden}
{if isset($form_data_search.search)}
{$adv_search}
{$form_data_search.submit_search.html}
{$form_data_search.search.html}
{if isset($form_data_search.show_all)}
{$form_data_search.show_all.html}
{/if}
{else}
{php}
$cols = $this->get_template_vars('cols');
$search_fields = $this->get_template_vars('search_fields');
foreach($cols as $k=>$v){
if(isset($search_fields[$k]))
$cols[$k]['label'] = $cols[$k]['label'].$search_fields[$k];
}
$this->assign('cols',$cols);
{/php}
{if isset($form_data_search.submit_search)}
{$adv_search}
{$form_data_search.submit_search.html}
{if isset($form_data_search.show_all)}
{$form_data_search.show_all.html}
{/if}
{/if}
{/if}
{/if}
</form>
</div>
{/if}
</div>
</div>
</div>
{/if}
{/if}

{php}
{php}
$cols = $this->get_template_vars('cols');
foreach($cols as $k=>$v)
$cols[$k]['label'] = '<span>'.$cols[$k]['label'].'</span>';
$cols[$k]['label'] = '<span>'.$cols[$k]['label'].'</span>';
$this->assign('cols',$cols);
{/php}
{/php}

{$table_prefix}
<div class="Utils_GenericBrowser_overflow_container" id="yolo">
{capture name="table_attr"}id="{$table_id}" cols_width_id="{$cols_width_id}" class="Utils_GenericBrowser table table-bordered table-hover" cellspacing="0" cellpadding="0" style="width:100%;table-layout:fixed;text-overflow:ellipsis;"{/capture}
{html_table_epesi table_attr=$smarty.capture.table_attr loop=$data cols=$cols row_attrs=$row_attrs}
</div>
{$table_postfix}
{$table_prefix}
<div>
{capture name="table_attr"}id="{$table_id}" cols_width_id="{$cols_width_id}" class="table card-table table-vcenter text-nowrap"{/capture}
{html_table_epesi table_attr=$smarty.capture.table_attr loop=$data cols=$cols row_attrs=$row_attrs}
</div>
{$table_postfix}

{if isset($form_data_paging)}
{$form_data_paging.javascript}
{if isset($form_data_paging)}
{$form_data_paging.javascript}

<form {$form_data_paging.attributes}>
{$form_data_paging.hidden}
{/if}
{if isset($order) || $first || $prev || $summary || isset($form_data_paging.page) || isset($form_data_paging.per_page)}
<div class="well well-sm">
<div class="col-sm-2" style="text-align: left; white-space: nowrap;">
{if isset($order)}
{$order}&nbsp;&nbsp;&nbsp;<b>{$reset}</b>&nbsp;&nbsp;&nbsp;
{/if}
</div>
{if isset($__link.first.open) || isset($__link.last.open)}
{if isset($__link.first.open)}{$__link.first.open}<button class="btn btn-primary"><i class="fa fa-fast-backward"></i> {$__link.first.text}</button>{$__link.first.close}{/if}
{if isset($__link.prev.open)}{$__link.prev.open}<button class="btn btn-primary"><i class="fa fa-backward"></i> {$__link.prev.text}</button>{$__link.prev.close}{/if}
{/if}
<div class="nav_summary col-sm-6" nowrap>&nbsp;&nbsp;&nbsp;{$summary}&nbsp;&nbsp;&nbsp;</div>
{if isset($__link.first.open) || isset($__link.last.open)}
{if isset($__link.next.open)}{$__link.next.open}<button class="btn btn-primary"><i class="fa fa-forward"></i> {$__link.next.text}</button>{$__link.next.close}{/if}
{if isset($__link.last.open)}{$__link.last.open}<button class="btn btn-primary"><i class="fa fa-fast-forward"></i> {$__link.last.text}</button>{$__link.last.close}{/if}
{/if}
<div class="nav_pagin col-sm-2" nowrap style="text-align: right; white-space: nowrap;">
{if isset($form_data_paging.page)}
{$form_data_paging.page.label} {$form_data_paging.page.html}
{/if}
</div>
<div class="nav_per_page col-sm-2" nowrap style="text-align: right; white-space: nowrap;">
{if isset($form_data_paging.per_page)}
{$form_data_paging.per_page.label} {$form_data_paging.per_page.html}
{/if}
</div>
<div class="clearfix"></div>
</div>
<div class="card-footer">
<form {$form_data_paging.attributes}>
{$form_data_paging.hidden}
{/if}
{if isset($order) || $first || $prev || $summary || isset($form_data_paging.page) || isset($form_data_paging.per_page)}
<div class="col-sm-2" style="text-align: left; white-space: nowrap;">
{if isset($order)}
{$order}&nbsp;&nbsp;&nbsp;<b>{$reset}</b>&nbsp;&nbsp;&nbsp;
{/if}
</div>

{if isset($form_data_paging)}
</form>

<nav class="float-left">
<ul class="pagination">
{if isset($__link.first.open) || isset($__link.last.open)}
{if isset($__link.first.open)}<li class="page-item">{$__link.first.open}<button class="page-link" tabindex="-1"><i class="fa fa-fast-backward"></i> {$__link.first.text}</button>{$__link.first.close}</li>{/if}
{if isset($__link.prev.open)}<li class="page-item">{$__link.prev.open}<button class="page-link" tabindex="-1"><i class="fa fa-backward"></i> {$__link.prev.text}</button>{$__link.prev.close}</li>{/if}
{/if}
<li class="page-item disabled">
<button class="page-link" tabindex="-1">{$summary}</button>
</li>
{if isset($__link.first.open) || isset($__link.last.open)}
{if isset($__link.next.open)}<li class="page-item">{$__link.next.open}<button class="page-link" tabindex="-1"><i class="fa fa-forward"></i> {$__link.next.text}</button>{$__link.next.close}</li>{/if}
{if isset($__link.last.open)}<li class="page-item">{$__link.last.open}<button class="page-link" tabindex="-1"><i class="fa fa-fast-forward"></i> {$__link.last.text}</button>{$__link.last.close}</li>{/if}
{/if}

</ul>
</nav>

<div class="col-sm-2 float-right">
{if isset($form_data_paging.page)}
{$form_data_paging.page.label} {$form_data_paging.page.html}
{/if}
</div>
<div class="col-sm-2 float-right">
{if isset($form_data_paging.per_page)}
{$form_data_paging.per_page.label} {$form_data_paging.per_page.html}
{/if}
</div>
<div class="clearfix"></div>
</div>
{/if}

{if isset($form_data_paging)}
</form>
{/if}

</div>

+ 20
- 21
modules/Utils/RecordBrowser/theme/Browsing_records.tpl View File

@@ -1,27 +1,26 @@
<div class="card ">
<div class="card">
{if isset($caption)}
<div class="card-header clearfix">
<i class="fa fa-{$icon} fa-2x pull-left" style="padding-top: 7px"></i>
{*<img alt=" " class="icon pull-left" src="{$icon}" width="32" height="32" border="0">*}
<div class="pull-left form-inline" style="margin-top: 5px">
{if isset($form_data)}
{$form_open}
{/if}
<span>{$caption}</span>
{if isset($form_data)}
{$form_data.browse_mode.html}
{$form_close}
{/if}
</div>
{if $filters.controls}
{$filters.controls}
{/if}
{*<img alt=" " class="icon pull-left" src="{$icon}" width="32" height="32" border="0">*}
<div class="pull-left form-inline" style="margin-top: 5px">
{if isset($form_data)}
{$form_open}
{/if}
<span>{$caption}</span>
{if isset($form_data)}
{$form_data.browse_mode.html}
{$form_close}
{/if}
</div>
{if $filters.controls}
{$filters.controls}
{/if}
{if $filters.elements}
{$filters.elements}
{/if}
</div>
{/if}
<div class="card-body">
{if $filters.elements}
<div>{$filters.elements}</div>
{/if}
{$table}
</div>
{$table}
</div>

Loading…
Cancel
Save