diff --git a/page/index.css b/page/index.css index 980c07dd..33e61157 100644 --- a/page/index.css +++ b/page/index.css @@ -67,6 +67,8 @@ div.output td.project { background-color:#435f8c8c; } div.output td.project div.project { min-width:88px; max-width:360px; } div.output td.project div.project div.item { padding:2px 10px; } div.output td.project div.project div.list { margin-left:10px; } +div.output td.project div.project div.switch { color:#0d1bc2; width:12px; float:left; transform: rotate(90deg) translate(2px, 0px); } +div.output td.project div.project div.switch.open { transform: rotate(180deg) translate(-4px, 1px); } div.output td.profile { background-color:#71909c91; } div.status>div.item { padding:4px; height:18px; } @@ -192,14 +194,6 @@ body.mobile fieldset.draw.trend div.action { display:none; } body.mobile.landscape fieldset.draw.spide div.action { display:block; } body.mobile.landscape fieldset.draw.trend div.action { display:block; } -body.mobile fieldset.plugin.inner div.action { display:none; } -body.mobile.landscape fieldset.plugin.inner div.action { display:contents; } -body.mobile.landscape fieldset.plugin.inner form.option input[type=button] { display:none; } -/* body.mobile.landscape fieldset.panel.Action.cmd fieldset.plugin.inner form.option input[type=button] { display:block; } */ - -/* body.mobile fieldset.panel.Action.cmd fieldset.plugin.inner td.project div.project { display:none; } */ -/* body.mobile.landscape fieldset.panel.Action.cmd fieldset.plugin.inner td.project div.project { display:block; } */ - /* font */ * { tab-size:4; } textarea { tab-size:2; } @@ -249,24 +243,12 @@ body.white table.content tr:hover { background-color:#4682b46b; } body.white div.item.select, body.white div.item:hover { background-color:steelblue; } body.white fieldset.float table { color:white; } -div.output.card div.item { - /* background-color:#48959a66; */ - padding:10px; margin:10px; height:120px; float:left; - position:relative; - border:solid 1px #e7e7e7; -} -div.output.card div.item>div.title { - font-size:1.2rem; font-weight:bold; - padding:10px; - border-bottom: solid 1px #e7e7e7; -} -div.output.card div.item>div.content { - padding:10px; -} -div.output.card div.item>div.operate { - position:absolute; - bottom:10px; -} +body.mobile div.output div.code { font-size:12px; } +body.mobile div.output.card div.item { height:160px; float:none; } +body.mobile.landscape div.output.card div.item { width:auto; float:left; } +div.output.card div.item { padding:10px; border:solid 1px #e7e7e7; margin:10px; height:120px; float:left; position:relative; } +div.output.card div.item>div.title { font-size:1.2rem; font-weight:bold; padding:10px; border-bottom: solid 1px #e7e7e7; } +div.output.card div.item>div.content { padding:10px; } body.simple { background-color:white; } body.simple fieldset.Header { border-bottom:solid 1px #e7e7e7; height:60px; display:block; } @@ -283,68 +265,23 @@ body.simple fieldset.Action { background-color:white; } body.simple fieldset.Action>div.action { background:white; padding:10px; border-bottom: solid 1px red; height:38px; width:600px; } body.simple fieldset.Action>div.action div.tabs { padding:10px; margin:10px; } body.simple fieldset.Action.tabs>div.output { margin-top:58px; } -body.simple fieldset.Action>div.output>fieldset.plugin { box-shadow:none; } -body.simple fieldset.Action>div.output>fieldset.plugin>legend { display:none; } -body.simple fieldset.Action>div.output>fieldset.plugin>form.option { display:none; } -body.simple fieldset.Action>div.output>fieldset.plugin>div.action { display:none; } -body.simple fieldset.Action>div.output>fieldset.plugin>div.status { display:none; } +body.simple fieldset.Action>div.output>fieldset.plugin.inner { box-shadow:none; } +body.simple fieldset.Action>div.output>fieldset.plugin.inner>legend { display:none; } +body.simple fieldset.Action>div.output>fieldset.plugin.inner>form.option { display:none; } +body.simple fieldset.Action>div.output>fieldset.plugin.inner>div.action { display:none; } +body.simple fieldset.Action>div.output>fieldset.plugin.inner>div.status { display:none; } body.simple div.output.card div.item { min-width:240px; border-radius:5px; box-shadow:2px 2px 6px 1px gray; } body.simple div.output.card div.item:hover { background-color:white; box-shadow:5px 5px 10px 5px gray; } body.simple div.output.card div.item>div.title { border-bottom:solid 1px #e7e7e7; } body.white.simple div.output.card input[type=button]:hover { box-shadow:2px 2px 8px 2px gray; } -body.white.simple div.output.card input[type=button] { box-shadow:2px 2px 6px 1px gray; } -body.white.simple div.output.card input[type=button] { background-color:#0152d9; font-size:0.8rem; font-weight:100; padding:5px 10px; border:none; border-radius:5px; } +body.white.simple div.output.card input[type=button] { box-shadow:2px 2px 6px 1px gray; color:white; } +body.white.simple div.output.card input[type=button] { background-color:#0152d9; font-size:0.8rem; padding:5px 10px; border:none; border-radius:5px; } +body.mobile.simple div.output.card div.item { width:-webkit-fill-available; } +body.mobile.landscape.simple div.output.card div.item { width:auto; float:left; } body.white.simple>div.carte { background-color:white; color:black; border:solid 1px #e7e7e7; } body.white.simple>div.carte div.item { font-size:1rem; } body.white.simple>div.carte div.item:hover { background-color:#0152d9; color:white; } - body.white.simple input[type=button] { background-color:#0152d9; border:none; border-radius:5px; height:31px; box-shadow:2px 2px 6px 1px gray; } -body.white.simple fieldset.panel.cmd>div.output>fieldset.plugin>legend { background-color:white; color:black; border-radius:0px; } - -div.switch { color:#0d1bc2; width:12px; float:left; transform: rotate(90deg) translate(2px, 0px); } -div.switch.open { transform: rotate(180deg) translate(-4px, 1px); } - -body fieldset.inner>div.output td.content>div.tabs { display:none; } -body fieldset.inner>div.output td.content>div.path { display:none; } - -body.simple fieldset.inner>div.output td.content>div.tabs { background:#546E7A; padding:0px; height:38px; overflow:auto; display:block; } -body.simple fieldset.inner>div.output td.content>div.tabs div.tabs { background:#B0BEC5; color:white; font-size:1rem; padding:10px; float:left; } -body.simple fieldset.inner>div.output td.content>div.tabs div.tabs.select { background:#455A64; box-shadow:0px 0px 5px 1px grey; } -body.simple fieldset.inner>div.output td.content>div.path { - background:#455A64; color:white; padding:4px 10px; - margin-bottom:4px; box-shadow:0px 0px 5px 1px #90A4AE; - clear:both; display:block; -} - -body.simple fieldset.inner>div.output td.project div.project { width:240px; } -body.simple fieldset.inner>div.output td.project div.project div.kind { color: white; font-size: 1.2rem; font-family: monospace; height:18px; } -body.simple fieldset.inner>div.output td.project div.project div.kind:first-child { position:sticky; top:0 } -body.simple fieldset.inner>div.output div.content { background-color:#263238; font-size:16px; } -body.simple fieldset.inner>div.output div.toggle { display:none; } - -body.white.simple fieldset.inner>div.output div.project div.action div.item { float:left; width:auto; padding:unset; } -body.white.simple fieldset.inner>div.output div.project { background:lightyellow; } -body.white.simple fieldset.inner>div.output div.project div.item { color:black; font-size:16px; width:-webkit-fill-available; } -body.white.simple fieldset.inner>div.output div.project div.item:hover { background:#e3e6f1; } -body.white.simple fieldset.inner>div.output div.content { background-color:white; font-size:16px; } -body.white.simple fieldset.inner>div.output div.content tr.select { background-color:white; } -body.white.simple fieldset.inner>div.output div.content tr.select td.line { background-color:white; color:black; border:none; } -body.white.simple fieldset.inner>div.output div.content tr.select td.text { border:solid 1px #e7e7e7; } -body.white.simple fieldset.inner>div.output div.content td.line { background-color:white; color:#237893; padding-top:4px; border-right:none; } -body.white.simple fieldset.inner>div.output div.content td.text { color:black; padding-top:2px; border:solid 1px white; } -body.white.simple fieldset.inner>div.output div.content td.text span.string { color:#a31515; } -body.white.simple fieldset.inner>div.output div.content td.text span.function { color:#795e26; } -body.white.simple fieldset.inner>div.output div.content td.text span.keyword { color:blue; } -body.white.simple td.content>div.content { background: white; box-shadow:0px 0px 5px 1px grey; } -body.white.simple div.status { color:black; } - -body.white fieldset.inner>div.output td.content>div.tabs { background:#f3f3f3; } -body.white fieldset.inner>div.output td.content>div.tabs div.tabs { background:#ececec; color:black; font-size:1rem; padding:10px; float:left; } -body.white fieldset.inner>div.output td.content>div.tabs div.tabs.select { background: white; box-shadow:0px 0px 5px 1px grey; } -body.white fieldset.inner>div.output td.content>div.path { background:white; color:black; box-shadow:0px 0px 5px 1px grey; } -body.white.simple fieldset.plugin div.output.json div.item span { color:black; } -body.white.simple fieldset.plugin div.output.json div.item span.key { color:blue; } -body.simple fieldset.plugin div.output.json div.item span.string { color:magenta; } diff --git a/panel/action.js b/panel/action.js index 141879d1..cca0058c 100644 --- a/panel/action.js +++ b/panel/action.js @@ -93,7 +93,7 @@ Volcanos("onaction", {help: "交互操作", list: [], _init: function(can, cb, t can.Conf(html.MARGIN_Y, 4*html.PLUGIN_MARGIN+2*html.ACTION_HEIGHT+html.ACTION_MARGIN) can.Conf(html.MARGIN_X, 4*html.PLUGIN_MARGIN) - if (can.user.mod.isPod && !can.user.isMobile) { + if (can.user.mod.isPod || can.user.isMobile) { var gt = "❯", lt = "❮"; function toggle(view) { return !can.setRiver("display") } can.page.Append(can, target, [{view: [[html.TOGGLE, chat.PROJECT]], list: [{text: [gt, html.DIV]}], onclick: function(event) { event.target.innerHTML = toggle()? gt: lt diff --git a/panel/river.js b/panel/river.js index 16e7d2e5..972fb5bd 100644 --- a/panel/river.js +++ b/panel/river.js @@ -22,7 +22,7 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, }, _menu: function(can, msg) { if (can.user.mod.isPod) { return } - var list = []; if (can.user.isMobile) { list.push("river") } + var list = [] can.setHeaderMenu(list.concat(can.base.Obj(msg.Option(chat.MENUS), can.Conf(chat.MENUS)||can.ondetail._menus)), function(event, button) { can.core.CallFunc([can.ondetail, button], [event, can, button, can.Conf(chat.RIVER), can.Conf(chat.STORM)]) }) diff --git a/plugin/local/code/inner.css b/plugin/local/code/inner.css index fe5a2421..b462c634 100644 --- a/plugin/local/code/inner.css +++ b/plugin/local/code/inner.css @@ -7,7 +7,7 @@ fieldset.inner>div.action>div.tabs.select { background-color:#013b675c; border-b fieldset.inner>div.output { color:white; } fieldset.inner>div.output td.project div.project { width:180px; } -fieldset.inner>div.output div.project div.kind { background-color:cornflowerblue; color:black; text-align:center; padding:10px; clear:both; } +fieldset.inner>div.output div.project div.kind { background-color:cornflowerblue; color:white; font-family:monospace; font-size:1.1rem; text-align:center; padding:5px; clear:both; } fieldset.inner>div.output div.project div.item div.name { padding:0 16px; } fieldset.inner>div.output div.content { color:white; font-size:1.1rem; font-family:monospace; position:relative; } fieldset.inner>div.output div.content tr.select { background-color:#0000ff6b; } @@ -37,7 +37,6 @@ fieldset.inner>div.status legend { background:#0d969f8a; font-size:1.1rem; paddi fieldset.inner>div.status legend.select { background:green; } fieldset.inner>div.status legend:hover { background:green; } -fieldset.inner.output.simple>legend { display:block; } fieldset.inner.float legend { height:30px; } fieldset.inner.float div.output { background-color:#332f1ecf; } fieldset.inner.float div.status { color:white; } @@ -54,6 +53,12 @@ body.white fieldset.inner>div.output div.project { color:#a2dad2; } body.white fieldset.inner>div.output div.content { background-color:#013b675c; } body.white fieldset.inner>div.output div.content td.text span.string { color:#a703a7; } +body.mobile fieldset.inner.float legend { height:42px; } +body.mobile fieldset.inner>form.option input[name=file] { width:90px; } +body.mobile fieldset.plugin.inner div.action { display:none; } +body.mobile.landscape fieldset.plugin.inner div.action { display:contents; } +body.mobile.landscape fieldset.plugin.inner form.option input[type=button] { display:none; } + .unselectable { -webkit-touch-callout:none; -webkit-user-select:none; @@ -64,5 +69,55 @@ body.white fieldset.inner>div.output div.content td.text span.string { color:#a7 user-select:none; } -body.mobile fieldset.inner.float legend { height:42px; } -body.mobile fieldset.inner>form.option input[name=file] { width:90px; } +fieldset.inner>div.output td.content>div.tabs { display:none; } +fieldset.inner>div.output td.content>div.path { display:none; } + +body.simple fieldset.inner>div.output td.content>div.tabs { background:#546E7A; padding:0px; height:38px; overflow:auto; display:block; } +body.simple fieldset.inner>div.output td.content>div.tabs div.tabs { background:#B0BEC5; color:white; font-size:1rem; padding:10px; float:left; } +body.simple fieldset.inner>div.output td.content>div.tabs div.tabs.select { background:#455A64; box-shadow:0px 0px 5px 1px grey; } +body.simple fieldset.inner>div.output td.content>div.path { + background:#455A64; color:white; padding:4px 10px; + margin-bottom:4px; box-shadow:0px 0px 5px 1px #90A4AE; + clear:both; display:block; +} + +body.white fieldset.inner>div.output td.content>div.tabs { background:#f3f3f3; } +body.white fieldset.inner>div.output td.content>div.tabs div.tabs { background:#ececec; color:black; font-size:1rem; padding:10px; float:left; } +body.white fieldset.inner>div.output td.content>div.tabs div.tabs.select { background: white; box-shadow:0px 0px 5px 1px grey; } +body.white fieldset.inner>div.output td.content>div.path { background:white; color:black; box-shadow:0px 0px 5px 1px grey; } + +body.simple fieldset.inner>div.output td.project div.project { width:240px; } +body.simple fieldset.inner>div.output td.project div.project div.kind { padding:10px; } +body.simple fieldset.inner>div.output td.project div.project div.kind { color: white; font-size: 1.2rem; font-family: monospace; height:18px; } +body.simple fieldset.inner>div.output td.project div.project div.kind:first-child { position:sticky; top:0 } +body.simple fieldset.inner>div.output div.content { background-color:#263238; font-size:16px; } +body.simple fieldset.inner>div.output div.toggle { display:none; } + +body.white.simple fieldset.inner>div.output div.project div.action div.item { float:left; width:auto; padding:unset; } +body.white.simple fieldset.inner>div.output div.project { background:lightyellow; } +body.white.simple fieldset.inner>div.output div.project div.item { color:black; font-size:16px; width:-webkit-fill-available; } +body.white.simple fieldset.inner>div.output div.project div.item:hover { background:#e3e6f1; } +body.white.simple fieldset.inner>div.output div.content { background-color:white; font-size:16px; } +body.white.simple fieldset.inner>div.output div.content tr.select { background-color:white; } +body.white.simple fieldset.inner>div.output div.content tr.select td.line { background-color:white; color:black; border:none; } +body.white.simple fieldset.inner>div.output div.content tr.select td.text { border:solid 1px #e7e7e7; } +body.white.simple fieldset.inner>div.output div.content td.line { background-color:white; color:#237893; padding-top:4px; border-right:none; } +body.white.simple fieldset.inner>div.output div.content td.text { color:black; padding-top:2px; border:solid 1px white; } +body.white.simple fieldset.inner>div.output div.content td.text span.string { color:#a31515; } +body.white.simple fieldset.inner>div.output div.content td.text span.function { color:#795e26; } +body.white.simple fieldset.inner>div.output div.content td.text span.keyword { color:blue; } +body.white.simple td.content>div.content { background: white; box-shadow:0px 0px 5px 1px grey; } +body.white.simple div.status { color:black; } + +body.white.simple fieldset.plugin div.output.json div.item span { color:black; } +body.white.simple fieldset.plugin div.output.json div.item span.key { color:blue; } +body.simple fieldset.plugin div.output.json div.item span.string { color:magenta; } + +body.mobile.simple fieldset.inner>div.output div.toggle { display:block; } +body.mobile.simple input[type=button] { height:45px; } +body.mobile.simple fieldset.inner>div.output div.content legend { height:45px; } +body.mobile.simple fieldset.inner>div.output div.toggle { background-color:lightblue; width:30px; } +body.mobile.simple fieldset.inner>div.output div.toggle.display { background-color:lightblue; margin-top:-33px; height:30px; width:100px; } +body.mobile fieldset.Action div.output fieldset.Full>legend { float:none; } + +body.mobile fieldset.inner>div.output div.content legend { height:45px; } diff --git a/plugin/local/code/inner.js b/plugin/local/code/inner.js index 93742f10..955f9f99 100644 --- a/plugin/local/code/inner.js +++ b/plugin/local/code/inner.js @@ -260,14 +260,14 @@ Volcanos("onimport", {help: "导入数据", _init: function(can, msg, cb, target var height = can.ConfHeight()-(can.user.isMobile && can.user.mod.isCmd? (can.user.isLandscape()? 14: 54): 0)-(can.user.isWindows? 20: 0) if (!height || height > window.innerHeight) { height = window.innerHeight - 200 } - if (can.user.isMobile && can.user.isLandscape() && height < 200) { height = 200 } + if (can.user.isMobile && can.user.isLandscape() && height < 200) { height = 400 } var rest = can.ui.display.offsetHeight+can.ui._path.offsetHeight+can.ui._tabs.offsetHeight+5 if (can.user.mod.isCmd) { can.page.styleHeight(can, can.ui.project, height+2*html.ACTION_HEIGHT) can.page.styleHeight(can, can.ui.content, (can.ui.project.offsetHeight||height)-rest) can.page.styleHeight(can, can.ui.profile_output, can.ui.project.offsetHeight-html.ACTION_HEIGHT-2) } else { - can.page.style(can, can.ui.content, can.user.mod.isCmd? html.HEIGHT: html.MAX_HEIGHT, height) + can.page.style(can, can.ui.content, can.user.mod.isCmd || can.user.isMobile? html.HEIGHT: html.MAX_HEIGHT, height) can.page.styleHeight(can, can.ui.project, can.ui.content.offsetHeight+rest) if (can.page.ClassList.has(can, can._fields, "full")) { can.page.styleHeight(can, can.ui.profile_output, can.ui.content.offsetHeight) diff --git a/plugin/state.js b/plugin/state.js index 2eb3f7c2..30a6b92b 100644 --- a/plugin/state.js +++ b/plugin/state.js @@ -93,6 +93,7 @@ Volcanos("onaction", {help: "交互操作", list: [ if (can.page.ClassList.neg(can, can._target, "Full")) { sub._height_bak = sub.ConfHeight(), sub._width_bak = sub.ConfWidth() var height = window.innerHeight-(can._status.innerText? 2: 1)*html.ACTION_HEIGHT + can.user.isMobile && (height -= 2*html.ACTION_HEIGHT) can.page.style(can, can._output, "height", sub.ConfHeight(height), "min-width", sub.ConfWidth(window.innerWidth)) can.core.CallFunc([sub, "onimport.layout"], {can: sub}) } else {