mirror of
https://github.com/fhem/fhem-mirror.git
synced 2025-01-31 12:49:34 +00:00
f18.js: patches from blecher-at, modified (Forum #82351)
git-svn-id: https://svn.fhem.de/fhem/trunk@17084 2b470e98-0d58-463d-a4d8-8e2adae1ed80
This commit is contained in:
rudolfkoenig
parent
7e83ea2dfe
commit
57e679adc3
@ -64,6 +64,9 @@ $(document).ready(function(){
|
||||
if(typeof svgCallback != "undefined")
|
||||
svgCallback.f18 = f18_svgSetCols;
|
||||
$("[data-name]").each(function(){ f18_setPos(this) });
|
||||
|
||||
f18_setWrapColumns();
|
||||
f18_setFixedInput();
|
||||
});
|
||||
|
||||
function
|
||||
@ -216,7 +219,7 @@ f18_special()
|
||||
$("tr#f18rs").append("<table id='f18ts' class='block wide'></table>");
|
||||
appendTo = "table#f18ts";
|
||||
|
||||
addHider("rightMenu", false, "MenuBtn right<br>on SmallScreen", f18_resize);
|
||||
addHider("rightMenu", false, "MenuBtn right<br>on small screen",f18_resize);
|
||||
addHider("savePinChanges", false, "Save pin changes");
|
||||
addHider("showDragger", false, "Dragging active", function(c){
|
||||
if(c) {
|
||||
@ -351,13 +354,16 @@ f18_special()
|
||||
addHider("hidePin", true, "Hide pin", function(c){
|
||||
$("div.pinHeader div.pin").css("display", c ? "none":"block");
|
||||
});
|
||||
addHider("fixedInput", true, "Fixed input", f18_setFixedInput);
|
||||
addHider("fixedInput", true, "Fixed input and menu", f18_setFixedInput);
|
||||
addHider("wrapcolumns",false,"Wrap columns<br>on small screen",
|
||||
f18_setWrapColumns);
|
||||
|
||||
$("div.f18colors").css("margin-top", "20px");
|
||||
$("tr.f18 div.fileList").each(function(e){ f18_addPinToStyleDiv(this) });
|
||||
if(f18_getAttr("showDragger"))
|
||||
$("div.fileList").each(function(){ f18_addDragger(this) });
|
||||
$("[data-name]").each(function(){ f18_setPos(this) });
|
||||
f18_setWrapColumns();
|
||||
};
|
||||
loadScript("pgm2/fhemweb_colorpicker.js", f18_drawSpecial);
|
||||
}
|
||||
@ -371,6 +377,19 @@ f18_setFixedInput()
|
||||
{ position:"absolute", overflow:"visible" });
|
||||
}
|
||||
|
||||
function
|
||||
f18_setFixedInput()
|
||||
{
|
||||
$("body").toggleClass("fixedInput", f18_getAttr("fixedInput"));
|
||||
f18_resize();
|
||||
}
|
||||
|
||||
function
|
||||
f18_setWrapColumns()
|
||||
{
|
||||
$("table.block").toggleClass("wrapcolumns", f18_getAttr("wrapcolumns"));
|
||||
}
|
||||
|
||||
function
|
||||
f18_addPinToStyleDiv(el)
|
||||
{
|
||||
@ -397,13 +416,13 @@ f18_resize()
|
||||
left += hl ? 0 : 40;
|
||||
left += pm ? 0 : 44;
|
||||
var lleft = (pm ? 10 : 52);
|
||||
$("input.maininput").css({ width:(w-left-(FW_isiOS ? 30 : 20))+'px',
|
||||
$("input.maininput").css({ width:(w-left-(FW_isiOS ? 26 : 24))+'px',
|
||||
"margin-left":(rm ? "0px" : "10px"),
|
||||
display: hi ? "none":"block"});
|
||||
$("#menu,#content").css("top", (hi && pm && hl) ? "10px" : "50px");
|
||||
$("#hdr").css({ left:(rm ? 10 : left)+'px' });
|
||||
$("#menuBtn").css({ left:(rm ? "auto":"10px"), right:(rm ? "10px":"auto") });
|
||||
$("#logo") .css({ left:(rm ? "auto":lleft ), right:(rm ? "52px":"auto") });
|
||||
f18_setFixedInput(); // Wonder, why its needed
|
||||
$("#logo") .css({ left:(rm ? "auto":lleft ), right:(rm ? "48px":"auto") });
|
||||
}
|
||||
|
||||
function
|
||||
|
||||
@ -1,23 +1,28 @@
|
||||
@import url("dashboard_style.css");
|
||||
|
||||
body,input,select,textarea { font-family:Arial, sans-serif; font-size:16px;}
|
||||
td {padding: 0;}
|
||||
textarea, .ui-dialog.ui-widget textarea { font-family:Courier; }
|
||||
input,textarea { border-style:ridge; }
|
||||
|
||||
input.maininput { margin-left:10px; }
|
||||
#logo {
|
||||
position:absolute; top:10px; left:52px; width:32px; height:32px; z-index:10;
|
||||
position:absolute; top:6.5px; left:50px; width:32px; height:32px; z-index:10;
|
||||
background-image:url(../images/default/fhemicon.png);
|
||||
background-size: contain; background-repeat: no-repeat;
|
||||
}
|
||||
#menuBtn { top:10px; left:10px; width:32px; height:32px; }
|
||||
#menuBtn { position: absolute; top:6.5px; left:10px; width:32px; height:32px; }
|
||||
#hdr { position: absolute; top:10px; left:48px; }
|
||||
#content { position:absolute; top:50px; left:10px; bottom:10px; right:10px; }
|
||||
body.small #content { left:10px; }
|
||||
#content {
|
||||
position: absolute; top:50px; left:10px; bottom:0; right: 0;
|
||||
padding-right: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
#menu {
|
||||
top:50px; bottom:10px; left:-120%;
|
||||
z-index:20;
|
||||
display:inline-block;
|
||||
padding:0 0.5em 0.5em 0;
|
||||
position: absolute;
|
||||
}
|
||||
#menu.visible { left:10px!important; }
|
||||
#console { width:100%; top:2em; bottom:0px; position:absolute; overflow-y:auto;}
|
||||
@ -26,14 +31,15 @@ body.small #content { left:10px; }
|
||||
|
||||
.devType { padding-top:20px; }
|
||||
a { color:#278727; }
|
||||
img { border-style:none; }
|
||||
img { border-style:none; vertical-align: top;}
|
||||
.wide { width:100%; }
|
||||
table.readings td:nth-child(2) { word-break: break-all; }
|
||||
|
||||
table.block { border:1px solid gray; }
|
||||
table { border-radius:8px; }
|
||||
table { border-collapse: collapse; }
|
||||
table.room { border:1px solid gray; width: 100%; }
|
||||
tr.column > td { padding:0; vertical-align:top;}
|
||||
tr.column > td { vertical-align:top;}
|
||||
|
||||
.changed a, .changed { color:red; }
|
||||
.fhemlog { color:#278727; }
|
||||
.col2 { text-align:center; }
|
||||
@ -174,7 +180,7 @@ table.room,table.block.wide,table.fileList {
|
||||
border-top:1px solid gray;
|
||||
border-bottom:1px solid gray;
|
||||
}
|
||||
table.block.wide td > div { padding:0 4px; }
|
||||
table.block.wide td > div, #menu td td { padding:2px 4px; }
|
||||
|
||||
#menuScrollArea { display:none; } /* commandref */
|
||||
body[fw_id] #menuScrollArea { display:block; } /* not commandref */
|
||||
@ -202,10 +208,46 @@ body.touch a { font-size: 20px; }
|
||||
body.touch #menu { font-size: 20px; } /* for the menuTree icon */
|
||||
body.touch div.col1, body.touch #menu table.room div { padding:0.25em 0; }
|
||||
|
||||
@media screen and (orientation: portrait) {
|
||||
body.small table.block tr td:nth-child(n+3) { width: 0px; display: none; }
|
||||
body.small #content > table { width: 100%; table-layout: fixed; }
|
||||
.SVGplot { width: 100%; overflow-x: scroll }
|
||||
|
||||
|
||||
body.fixedInput #menu,
|
||||
body.fixedInput #menuBtn,
|
||||
body.fixedInput #content,
|
||||
body.fixedInput #hdr {
|
||||
position: fixed;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) and (orientation: portrait) {
|
||||
#content > table { width: 100%; table-layout: fixed; }
|
||||
#content > table, table.block.wide { width: 100%; }
|
||||
table.block tr td:nth-child(2) { width: 0; }
|
||||
table.block tr td:nth-child(n+3) { width: 0px; display: none; }
|
||||
|
||||
.SVGplot { width: 100%; overflow-x: auto;}
|
||||
|
||||
/* flex-collapsing table */
|
||||
.wrapcolumns,
|
||||
.wrapcolumns thead,
|
||||
.wrapcolumns tbody,
|
||||
.wrapcolumns th,
|
||||
.wrapcolumns td {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wrapcolumns tr {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.wrapcolumns td {
|
||||
word-wrap: break-word;
|
||||
align-self: center;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.wrapcolumns tr td:nth-child(1) { flex-grow: 1; }
|
||||
.wrapcolumns tr td:nth-child(2) { width: auto!important; }
|
||||
}
|
||||
|
||||
body.pinnedMenu #menuBtn { display:none; }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user