Mobile theme:

- Add popupMainDiv a class to be able to use the same styling for semi-popups
- Fix color for edit icon
- Try to use .popupMainDiv class instead of ID
This commit is contained in:
Hadi Nategh 2016-03-14 08:38:30 +00:00
parent c5523c649c
commit 3ec1847b34
6 changed files with 67 additions and 51 deletions

View File

@ -325,7 +325,7 @@ class etemplate extends boetemplate
else
{
echo $GLOBALS['egw']->framework->header();
echo '<div id="popupMainDiv">'."\n";
echo '<div id="popupMainDiv" class="popupMainDiv">'."\n";
if ($GLOBALS['egw_info']['user']['apps']['manual']) // adding a manual icon to every popup
{
$manual = new etemplate('etemplate.popup.manual');

View File

@ -263,7 +263,7 @@ class etemplate_new extends etemplate_widget_template
}
else // mark popups as such, by enclosing everything in div#popupMainDiv
{
echo '<div id="popupMainDiv">'."\n";
echo '<div id="popupMainDiv" class="popupMainDiv">'."\n";
}
// Send any accumulated json responses - after flush to avoid sending the buffer as a response
if(egw_json_response::isJSONResponse())

View File

@ -401,9 +401,9 @@ var AppJS = (function(){ "use strict"; return Class.extend(
var rowID = '';
// content to feed to etemplate2
var content = {};
var self = this;
if (id){
var parts = id.split('::');
rowID = parts[1];
@ -445,6 +445,7 @@ var AppJS = (function(){ "use strict"; return Class.extend(
overflow:'auto',
"padding":'60px 0 10px 0'})
.attr('id','popupMainDiv')
.addClass('popupMainDiv')
.appendTo('body');
// close button
@ -468,19 +469,19 @@ var AppJS = (function(){ "use strict"; return Class.extend(
.attr('id', this.appname+'-view')
.addClass('et2_mobile-view-container')
.appendTo(this.viewContainer);
var templateName = _action.data.mobileViewTemplate || 'edit';
var templateURL = egw.webserverUrl+ '/' + this.appname + '/templates/mobile/'+templateName+'.xet'+'?1';
var data = {content:content, readonlys:{'__ALL__':true,'link_to':false}, currentapp:this.appname};
// etemplate2 object for view
this.et2_view = new etemplate2 (this.viewTemplate[0], false);
if(templateName)
{
this.et2_view.load(this.appname+'.'+templateName,templateURL, data, typeof et2_callback == 'function'?et2_callback:function(){}, app);
}
// define a global close function for view template
// in order to be able to destroy view on action
app[this.appname]['close'] = destroy;

View File

@ -5,7 +5,7 @@
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
<g>
<g>
<path fill="none" stroke="#62686A" stroke-miterlimit="10" d="M5.492,19.1l6.897,6.894l12.853-12.846l-6.897-6.894L5.492,19.1z
<path fill="#696969" stroke="#E6E6E6" stroke-miterlimit="10" d="M5.492,19.1l6.897,6.894l12.853-12.846l-6.897-6.894L5.492,19.1z
M1,30.485l9.655-2.757l-6.896-6.895L1,30.485z M29.994,5.81l-4.311-4.308c-0.713-0.714-1.911-0.675-2.673,0.085l-2.842,2.841
l6.896,6.894l2.843-2.841C30.671,7.719,30.709,6.524,29.994,5.81z"/>
</g>

Before

Width:  |  Height:  |  Size: 825 B

After

Width:  |  Height:  |  Size: 828 B

View File

@ -6976,6 +6976,8 @@ form[id^="tracker-"] .dialogHeadbar {
/*Tablets landscape mode*/
/*Tablets Portrait*/
/*Smartphones*/
/*Smartphones portrait*/
/*Smartphones landscape*/
.white-svg {
-webkit-filter: brightness(0) invert(1) !important;
filter: brightness(0) invert(1) !important;
@ -7302,6 +7304,10 @@ form[id^="tracker-"] .dialogHeadbar {
body button.plus_button:active {
background-color: #0c5da5;
}
body .et2_nextmatch .nextmatch_sortheader {
padding-right: 0px;
margin-right: 0px;
}
body .et2_nextmatch .nextmatch_header_row,
body .et2_nextmatch .nextmatch_header {
background-color: background-color-egw-dark;
@ -7693,27 +7699,28 @@ form[id^="tracker-"] .dialogHeadbar {
body .et2_button_icon {
height: 32px;
}
body #popupMainDiv {
body .popupMainDiv {
padding-top: 60px !important;
/* Exceptional cases to not get the general left padding*/
}
body #popupMainDiv * {
body .popupMainDiv * {
font-size: 10pt;
font-family: Verdana, "Lucida Grande", Helvetica, Sans-Serif;
}
body #popupMainDiv .et2_textbox,
body #popupMainDiv .et2_date,
body #popupMainDiv .et2_dropdown,
body #popupMainDiv .et2_link,
body #popupMainDiv .et2_label,
body #popupMainDiv input,
body #popupMainDiv select,
body #popupMainDiv .et2_selectbox {
body .popupMainDiv .et2_textbox,
body .popupMainDiv .et2_date,
body .popupMainDiv .et2_dropdown,
body .popupMainDiv .et2_link,
body .popupMainDiv .et2_label,
body .popupMainDiv input,
body .popupMainDiv select,
body .popupMainDiv .et2_selectbox {
height: 46px;
padding-left: 8px;
}
body #popupMainDiv input,
body #popupMainDiv select,
body #popupMainDiv .et2_selectbox {
body .popupMainDiv input,
body .popupMainDiv select,
body .popupMainDiv .et2_selectbox {
padding: 0;
padding-left: 0;
border-left: 0;
@ -7721,70 +7728,73 @@ form[id^="tracker-"] .dialogHeadbar {
border-right: 0;
border-radius: 0;
}
body #popupMainDiv .et2_label .et2_selectbox {
body .popupMainDiv .et2_label .et2_selectbox {
padding-left: 8px;
}
body #popupMainDiv ul.et2_selectbox li {
body .popupMainDiv ul.et2_selectbox li {
padding-top: 13px;
}
body #popupMainDiv .et2_taglist input[type="text"] {
body .popupMainDiv .et2_taglist input[type="text"] {
height: 36px;
}
body #popupMainDiv .et2_taglist .ms-sel-item {
body .popupMainDiv .et2_taglist .ms-sel-item {
margin-left: 3px;
line-height: 36px;
margin-top: 0;
margin-bottom: 0;
}
body #popupMainDiv .et2_label .et2_date_ro.et2_label {
body .popupMainDiv .et2_label .et2_date_ro.et2_label {
padding-left: 0;
}
body #popupMainDiv .et2_button_with_image {
body .popupMainDiv .et2_button_with_image {
background-color: transparent;
border: none;
box-shadow: none;
color: #1e1e1e;
}
body #popupMainDiv .et2_date {
body .popupMainDiv .et2_date {
min-width: 100px;
padding-left: 0;
}
body #popupMainDiv .et2_button_with_image,
body #popupMainDiv .et2_button_text {
body .popupMainDiv .et2_button_with_image,
body .popupMainDiv .et2_button_text {
height: 46px;
margin: 1px;
margin-left: 3px;
}
body #popupMainDiv form {
body .popupMainDiv form {
margin-top: 50px;
}
body #popupMainDiv .et2_details.et2_details_expanded {
body .popupMainDiv .et2_details.et2_details_expanded {
background-color: transparent;
height: 100%;
}
body #popupMainDiv .et2_details.et2_details_expanded .et2_details_title {
body .popupMainDiv .et2_details.et2_details_expanded .et2_details_title {
display: inline-block;
background-color: #F0F0F0;
width: 100%;
padding-top: 6px;
height: 32px;
}
body #popupMainDiv .et2_details {
body .popupMainDiv .et2_details {
position: relative;
background-color: #F0F0F0;
height: 32px;
}
body #popupMainDiv .et2_details .et2_details_toggle {
body .popupMainDiv .et2_details .et2_details_toggle {
position: absolute;
right: 2px;
top: 0px;
margin: 0px;
}
body #popupMainDiv .et2_details .et2_details_title {
body .popupMainDiv .et2_details .et2_details_title {
padding-top: 6px;
margin-top: 0;
}
body #popupMainDiv .dialogHeadbar button[class*="et2_button_with_image"]:not([class*="et2_toolbar_hasCaption"]) {
body .popupMainDiv .et2_taglist > div {
min-height: auto;
}
body .dialogHeadbar button[class*="et2_button_with_image"]:not([class*="et2_toolbar_hasCaption"]) {
-webkit-filter: brightness(0) invert(1) !important;
filter: brightness(0) invert(1) !important;
background-color: transparent !important;
@ -7792,9 +7802,6 @@ form[id^="tracker-"] .dialogHeadbar {
border: none;
padding-right: 15px;
}
body #popupMainDiv .et2_taglist > div {
min-height: auto;
}
body .rowHeader {
font-size: 12pt;
}

View File

@ -30,12 +30,15 @@
/*All devices landscape mode*/
@handheld-landscape: ~"only screen and (max-device-width : @{tablet-max}) and (orientation : landscape)";
/*Tablets landscape mode*/
@tablet-portrait: ~"only screen and (max-device-width : @{tablet-max}) and (min-width: @{smartphone-max}) and (orientation : landscape)";
@tablet-landscape: ~"only screen and (max-device-width : @{tablet-max}) and (min-width: @{smartphone-max}) and (orientation : landscape)";
/*Tablets Portrait*/
@tablet-portrait: ~"only screen and (max-device-width : @{tablet-max}) and (min-width: @{smartphone-max}) and (orientation : portrait)";
/*Smartphones*/
@smartphones: ~"only screen and (max-device-width: @{smartphone-max}) and (min-width: @{smartphone-min})";
/*Smartphones portrait*/
@smartphones-portrait: ~"only screen and (max-device-width: @{smartphone-max}) and (min-width: @{smartphone-min}) and (oriantation:portrait)";
/*Smartphones landscape*/
@smartphones-landscape: ~"only screen and (max-device-width: @{smartphone-max}) and (min-width: @{smartphone-min}) and (oriantation:landscape)";
.white-svg {
-webkit-filter: brightness(0) invert(1) !important;
filter: brightness(0) invert(1) !important;
@ -46,7 +49,6 @@
@media @handheld
{
#egw_fw_print {
display:none;
}
@ -398,6 +400,10 @@
}
}
.et2_nextmatch {
.nextmatch_sortheader {
padding-right: 0px;
margin-right: 0px;
}
.nextmatch_header_row, .nextmatch_header
{
div.header_row_right {
@ -796,7 +802,8 @@
}
.et2_taglist_category span[class*="cat_"] {height: 42px;}
.et2_button_icon {height:32px;}
#popupMainDiv {
.popupMainDiv {
padding-top: 60px !important;
* {
.mob-fontsize-n;
font-family: Verdana, "Lucida Grande", Helvetica, Sans-Serif;
@ -871,14 +878,15 @@
margin-top:0;
}
}
.dialogHeadbar {
button[class*="et2_button_with_image"]:not([class*="et2_toolbar_hasCaption"]) {
.white-svg;
padding-right: 15px;
}
}
.et2_taglist>div{min-height: auto;}
}
.dialogHeadbar {
button[class*="et2_button_with_image"]:not([class*="et2_toolbar_hasCaption"]) {
.white-svg;
padding-right: 15px;
}
}
.rowHeader {
.mob-fontsize-l;
}