minor UI adjustments to sidmenu
parent
5dbeb8c5e5
commit
38a6915b4a
|
@ -5,15 +5,15 @@
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.side-menu .monitor_block{padding:0;position:relative}
|
||||
.side-menu .monitor_block img{width:100%;height:75px;cursor:pointer;border: 0.5px inset #263238;}
|
||||
.side-menu .monitor_block{padding:2px;position:relative}
|
||||
.side-menu .monitor_block img{width:100%;height:75px;cursor:pointer;border: 0.5px solid #003d71;border-radius:4px;}
|
||||
@media screen and (max-width:1025px){
|
||||
.side-menu .monitor_block img{height:175px;}
|
||||
}
|
||||
.side-menu .monitor_block:hover .icons{opacity:1}
|
||||
.side-menu .monitor_block:hover .title{opacity:1}
|
||||
.side-menu .monitor_block .icons,.side-menu .monitor_block .title{opacity:0;width:100%;bottom:0;left:0;background:rgba(0,0,0,0.6);position:absolute;padding:2.5px;z-index:11;cursor:move}
|
||||
.side-menu .monitor_block .title{bottom:auto;top:0;color:#fff}
|
||||
.side-menu .monitor_block .icons,.side-menu .monitor_block .title{opacity:0;width:calc(100% - 4px);bottom:2px;left:2px;background:rgba(0,0,0,0.6);position:absolute;padding:2.5px;z-index:11;cursor:move;border-radius:4px}
|
||||
.side-menu .monitor_block .title{bottom:auto;top:2px;color:#fff}
|
||||
.nav-xs.side-menu .monitor_block{width:100%}
|
||||
.side-menu .monitor_block .list-data{display:none}
|
||||
.output_data:empty{display:none}
|
||||
|
|
|
@ -33,7 +33,7 @@ $.ccio.tm=function(x,d,z,user){
|
|||
})
|
||||
break;
|
||||
case 1://monitor icon
|
||||
d.src=placeholder.getData(placeholder.plcimg({bgcolor:'#b57d00',text:'...'}));
|
||||
d.src=placeholder.getData(placeholder.plcimg({bgcolor:'#1d88e2',text:'...'}));
|
||||
tmp+='<div auth="'+user.auth_token+'" mid="'+d.mid+'" ke="'+d.ke+'" title="'+d.mid+' : '+d.name+'" class="monitor_block glM'+d.mid+user.auth_token+' col-md-4"><img monitor="watch" class="snapshot" src="'+d.src+'"><div class="box"><div class="title monitor_name truncate">'+d.name+'</div><div class="list-data"><div class="monitor_mid">'+d.mid+'</div><div><b>'+lang['Save as']+' :</b> <span class="monitor_ext">'+d.ext+'</span></div><div><b>Status :</b> <span class="monitor_status">'+d.status+'</span></div></div><div class="icons text-center">'
|
||||
tmp+='<div class="btn-group btn-group-xs">'
|
||||
var buttons = {
|
||||
|
|
|
@ -223,7 +223,7 @@ $.ccio.globalWebsocket=function(d,user){
|
|||
var snapElement = $('[mid="'+d.mid+'"][ke="'+d.ke+'"][auth="'+user.auth_token+'"] .snapshot')
|
||||
switch(d.snapshot_format){
|
||||
case'plc':
|
||||
snapElement.attr('src',placeholder.getData(placeholder.plcimg(d.snapshot)))
|
||||
snapElement.attr('src',placeholder.getData(placeholder.plcimg({text:d.snapshot.toUpperCase().split('').join(' '), fsize: 25, bgcolor:'#1462a5'})))
|
||||
break;
|
||||
case'ab':
|
||||
d.reader = new FileReader();
|
||||
|
|
|
@ -1,2 +1,6 @@
|
|||
// placeholder.js : https://www.cssscript.com/generating-custom-image-placeholders-with-pure-javascript-placeholder-js/
|
||||
// author : hustcc
|
||||
// license : MIT
|
||||
// revision : : December 18, 2015
|
||||
(function($){!function(t,e){"object"==typeof module&&module.exports?module.exports=e(t):t.placeholder=e(t)}("undefined"!=typeof window?window:this,function(){function t(t){c&&u||(c=document.createElement("canvas"),u=c.getContext("2d"));var e=parseInt(t.a[0]),n=parseInt(t.a[1]);c.width=e,c.height=n,u.clearRect(0,0,e,n),u.fillStyle=t.c,u.fillRect(0,0,e,n),u.fillStyle=t.d,u.font=t.e+" normal "+t.f+" "+(t.g||100)+"px "+t.h;var r=1;if(""===t.g){var o=.7*e,l=.7*n,i=u.measureText(t.b).width,a=100;r=Math.min(o/i,l/a)}return u.translate(e/2,n/2),u.scale(r,r),u.textAlign="center",u.textBaseline="middle",u.fillText(t.b,0,0),c}function e(){return"#"+("00000"+(16777216*Math.random()<<0).toString(16)).slice(-6)}function n(t){t=t||{};var n=t.size||"128x128",r=t.text||n,o=t.bgcolor||e(),l=t.color||e(),i=t.fstyle||"normal",a=t.fweight||"bold",c=t.fsize||"",u=t.ffamily||"consolas",f={};return n=n.split("x"),2!==n.length&&(n=[128,128]),f.a=n,f.b=r,f.c=o,f.d=l,f.e=i,f.f=a,f.g=c,f.h=u,t=null,f}function r(e){return e=n(e),t(e)}function o(t){return r(t).toDataURL()}function l(t,e,n){return t.getAttribute(e)||n}function i(t){var e,n={},r=t.split("&");for(var o in r){e=r[o].split("=");try{n[e[0]]=decodeURIComponent(e[1])}catch(l){n[e[0]]=e[1]}}return n}function a(t){for(var e,n,r=document.querySelectorAll("img.placeholder"),a=0;a<r.length;a++)e=r[a],!t&&l(e,f,"")||(n=i(l(e,"options","")),e.setAttribute("src",o(n)),e.setAttribute(f,"1"))}var c,u,f="placeholder-rendered";return a(),{getData:o,getCanvas:r,render:a}});})(jQuery)
|
||||
placeholder.plcimg=function(k,o){o={size:'200x200',bgcolor:'#630303',color:'#fff',text:'CC',fsize:'40',ffamily:'Segoe UI'};if(typeof k==='string'){o.text=k;};if(typeof k==='object'){$.each(k,function(n,v){o[n]=v;})};return o;};
|
||||
placeholder.plcimg=function(k,o){o={size:'200x200',bgcolor:'#d9534f',color:'#fff',text:'CC',fsize:'40',ffamily:'Helvetica Neue',fweight:'normal'};if(typeof k==='string'){o.text=k;};if(typeof k==='object'){$.each(k,function(n,v){o[n]=v;})};return o;};
|
||||
|
|
|
@ -54,7 +54,7 @@
|
|||
<header id="main_header" class="demo-header mdl-layout__header">
|
||||
<div class="mdl-layout__header-row">
|
||||
<ul class="nav navbar-nav">
|
||||
<li title="<%-lang['Toggle Sidebar']%>" class_toggle="hide-side" data-target=".mdl-js-layout"><a> <i class="fa fa-bars"></i> </a></li>
|
||||
<li title="<%-lang['Toggle Sidebar']%>" class_toggle="hide-side" data-target=".mdl-js-layout"><a> <i class="fa fa-align-right"></i> </a></li>
|
||||
<li title="<%-lang['Add Monitor']%>" mid="" ke="" class="hidden-xs permission_monitor_create"><a monitor="edit"> <i class="fa fa-plus"></i> </a></li>
|
||||
<li title="<%-lang['Power Video Viewer']%>" class="hidden-xs" data-toggle="modal" data-target="#powerVideo"><a> <i class="fa fa-map-marker"></i> </a></li>
|
||||
<li>
|
||||
|
|
Loading…
Reference in New Issue