Added basic "publish" block logic.
This commit is contained in:
roman committed
1 parent
6b3ed38e04
commit
760825be2d
16 files changed
+961
-106
No files matched your search
+5
-1
@@ -11,7 +11,11 @@
|
||||
|
||||
{{> (include_partial "layouts/partials/toolbar") }}
|
||||
|
||||
<script>window.previewFrameUrl = 'http://localhost:{{ port }}/view/{{ baseView }}';</script>
|
||||
<script>
|
||||
window.devTool = {
|
||||
previewFrameUrl: 'http://localhost:{{ port }}/view/{{ baseView }}',
|
||||
};
|
||||
</script>
|
||||
<iframe id="preview_frame" src="http://localhost:{{ port }}/view/{{ baseView }}" class="breakpoint"></iframe>
|
||||
|
||||
<script src="/scripts/dist/index.min.js"></script>
|
||||
|
||||
@@ -1,17 +1,22 @@
|
||||
<header class="page_toolbar">
|
||||
|
||||
<div class="page_toolbar__data_options">
|
||||
<label for="data-options">Data Options: </label>
|
||||
<div class="page_toolbar__left">#</div>
|
||||
|
||||
<div class="page_toolbar__middle">
|
||||
<div class="page_toolbar__data_options">
|
||||
<label for="data-options">Data Options: </label>
|
||||
|
||||
<select name="data" id="data-options">
|
||||
{{#each config.dataFiles }}
|
||||
<option value="{{ name }}" {{#if active }}selected="selected"{{/if}}>{{ name }}</option>
|
||||
{{/each}}
|
||||
</select>
|
||||
<select name="data" id="data-options">
|
||||
{{#each config.dataFiles }}
|
||||
<option value="{{ name }}" {{#if active }}selected="selected"{{/if}}>{{ name }}</option>
|
||||
{{/each}}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Sizes: <b>1rem = {{ config.remToPx }}px</b>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Sizes: <b>1rem = {{ config.remToPx }}px</b>
|
||||
</div>
|
||||
<div class="page_toolbar__right"></div>
|
||||
</header>
|
||||
Vendored
+60
-3
@@ -11314,7 +11314,7 @@ function Responsive(props = {}) {
|
||||
function setupResponsiveness(rootAttributes) {
|
||||
// INIT
|
||||
const wrapper = document.createElement('div');
|
||||
document.querySelector('.page_toolbar').prepend(wrapper);
|
||||
document.querySelector('.page_toolbar__middle').prepend(wrapper);
|
||||
const root = createRoot(wrapper);
|
||||
const html = /*#__PURE__*/React.createElement(Responsive, {
|
||||
rootAttributes: rootAttributes
|
||||
@@ -11322,10 +11322,67 @@ function setupResponsiveness(rootAttributes) {
|
||||
root.render(html);
|
||||
}
|
||||
|
||||
function Publish(props = {}) {
|
||||
const [state, setState] = react.exports.useState({
|
||||
loading: false
|
||||
});
|
||||
|
||||
const updateState = update => setState(Object.assign({}, state, update));
|
||||
|
||||
return /*#__PURE__*/React.createElement("div", null, state.loading && /*#__PURE__*/React.createElement("div", {
|
||||
className: "overlay overlay--loading"
|
||||
}, "Loading, Please wait..."), /*#__PURE__*/React.createElement("button", {
|
||||
onClick: submit,
|
||||
disabled: state.loading,
|
||||
className: "btn btn--primary"
|
||||
}, "Publish"));
|
||||
|
||||
async function submit() {
|
||||
const ready = confirm('Are you ready to submit the code?');
|
||||
|
||||
if (!ready) {
|
||||
return;
|
||||
}
|
||||
|
||||
updateState({
|
||||
loading: true
|
||||
});
|
||||
|
||||
try {
|
||||
const response = await fetch(`/publish`);
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
alert('Your code is successfully sent to project manager! Thank you!');
|
||||
} else {
|
||||
alert('Can\'t send your code, please try again or contact project manager.');
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Something went wrong, please try again or contact project manager.');
|
||||
}
|
||||
|
||||
updateState({
|
||||
loading: false
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function setupPublish(rootAttributes) {
|
||||
// INIT
|
||||
const wrapper = document.createElement('div');
|
||||
document.querySelector('.page_toolbar__right').prepend(wrapper);
|
||||
const root = createRoot(wrapper);
|
||||
const html = /*#__PURE__*/React.createElement(Publish, {
|
||||
rootAttributes: rootAttributes
|
||||
});
|
||||
root.render(html);
|
||||
}
|
||||
|
||||
const rootAttributes = {
|
||||
previewFrame: document.getElementById('preview_frame')
|
||||
};
|
||||
setupResponsiveness(rootAttributes); // const responsiveness = connectResponsiveness(rootAttributes);
|
||||
setupResponsiveness(rootAttributes);
|
||||
setupPublish(rootAttributes); // const responsiveness = connectResponsiveness(rootAttributes);
|
||||
// setTimeout(() => responsiveness.selectMode('tablet'), 5000)
|
||||
// setTimeout(() => responsiveness.selectMode('mobile'), 10000)
|
||||
|
||||
@@ -11343,7 +11400,7 @@ function initDataOptions() {
|
||||
}
|
||||
|
||||
dataOptionsSelect.addEventListener('change', function () {
|
||||
previewFrame.src = window.previewFrameUrl + '?data=' + this.value;
|
||||
previewFrame.src = window.devTool.previewFrameUrl + '?data=' + this.value;
|
||||
});
|
||||
}
|
||||
//# sourceMappingURL=index.min.js.map
|
||||
+1
-1
@@ -1 +1 @@
|
||||
{"version":3,"file":"index.min.js","sources":["../../../node_modules/react/cjs/react.production.min.js","../../../node_modules/react/index.js","../../../node_modules/scheduler/cjs/scheduler.production.min.js","../../../node_modules/scheduler/index.js","../../../node_modules/react-dom/cjs/react-dom.production.min.js","../../../node_modules/react-dom/index.js","../../../node_modules/react-dom/client.js","../../../node_modules/react-is/cjs/react-is.production.min.js","../../../node_modules/react-is/index.js","../../../node_modules/@emotion/stylis/dist/stylis.esm.js","../../../node_modules/@emotion/unitless/dist/unitless.esm.js","../../../node_modules/@emotion/memoize/dist/emotion-memoize.esm.js","../../../node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.esm.js","../../../node_modules/hoist-non-react-statics/node_modules/react-is/cjs/react-is.production.min.js","../../../node_modules/hoist-non-react-statics/node_modules/react-is/index.js","../../../node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js","../toolbar/responsive.style.js","../toolbar/responsive-button/responsive-button.style.js","../toolbar/responsive-button/ResponsiveButton.jsx","../toolbar/responsive.jsx","../index.js"],"sourcesContent":["/**\n * @license React\n * react.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';var l=Symbol.for(\"react.element\"),n=Symbol.for(\"react.portal\"),p=Symbol.for(\"react.fragment\"),q=Symbol.for(\"react.strict_mode\"),r=Symbol.for(\"react.profiler\"),t=Symbol.for(\"react.provider\"),u=Symbol.for(\"react.context\"),v=Symbol.for(\"react.forward_ref\"),w=Symbol.for(\"react.suspense\"),x=Symbol.for(\"react.memo\"),y=Symbol.for(\"react.lazy\"),z=Symbol.iterator;function A(a){if(null===a||\"object\"!==typeof a)return null;a=z&&a[z]||a[\"@@iterator\"];return\"function\"===typeof a?a:null}\nvar B={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},C=Object.assign,D={};function E(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B}E.prototype.isReactComponent={};\nE.prototype.setState=function(a,b){if(\"object\"!==typeof a&&\"function\"!==typeof a&&null!=a)throw Error(\"setState(...): takes an object of state variables to update or a function which returns an object of state variables.\");this.updater.enqueueSetState(this,a,b,\"setState\")};E.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,a,\"forceUpdate\")};function F(){}F.prototype=E.prototype;function G(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B}var H=G.prototype=new F;\nH.constructor=G;C(H,E.prototype);H.isPureReactComponent=!0;var I=Array.isArray,J=Object.prototype.hasOwnProperty,K={current:null},L={key:!0,ref:!0,__self:!0,__source:!0};\nfunction M(a,b,e){var d,c={},k=null,h=null;if(null!=b)for(d in void 0!==b.ref&&(h=b.ref),void 0!==b.key&&(k=\"\"+b.key),b)J.call(b,d)&&!L.hasOwnProperty(d)&&(c[d]=b[d]);var g=arguments.length-2;if(1===g)c.children=e;else if(1<g){for(var f=Array(g),m=0;m<g;m++)f[m]=arguments[m+2];c.children=f}if(a&&a.defaultProps)for(d in g=a.defaultProps,g)void 0===c[d]&&(c[d]=g[d]);return{$$typeof:l,type:a,key:k,ref:h,props:c,_owner:K.current}}\nfunction N(a,b){return{$$typeof:l,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}}function O(a){return\"object\"===typeof a&&null!==a&&a.$$typeof===l}function escape(a){var b={\"=\":\"=0\",\":\":\"=2\"};return\"$\"+a.replace(/[=:]/g,function(a){return b[a]})}var P=/\\/+/g;function Q(a,b){return\"object\"===typeof a&&null!==a&&null!=a.key?escape(\"\"+a.key):b.toString(36)}\nfunction R(a,b,e,d,c){var k=typeof a;if(\"undefined\"===k||\"boolean\"===k)a=null;var h=!1;if(null===a)h=!0;else switch(k){case \"string\":case \"number\":h=!0;break;case \"object\":switch(a.$$typeof){case l:case n:h=!0}}if(h)return h=a,c=c(h),a=\"\"===d?\".\"+Q(h,0):d,I(c)?(e=\"\",null!=a&&(e=a.replace(P,\"$&/\")+\"/\"),R(c,b,e,\"\",function(a){return a})):null!=c&&(O(c)&&(c=N(c,e+(!c.key||h&&h.key===c.key?\"\":(\"\"+c.key).replace(P,\"$&/\")+\"/\")+a)),b.push(c)),1;h=0;d=\"\"===d?\".\":d+\":\";if(I(a))for(var g=0;g<a.length;g++){k=\na[g];var f=d+Q(k,g);h+=R(k,b,e,f,c)}else if(f=A(a),\"function\"===typeof f)for(a=f.call(a),g=0;!(k=a.next()).done;)k=k.value,f=d+Q(k,g++),h+=R(k,b,e,f,c);else if(\"object\"===k)throw b=String(a),Error(\"Objects are not valid as a React child (found: \"+(\"[object Object]\"===b?\"object with keys {\"+Object.keys(a).join(\", \")+\"}\":b)+\"). If you meant to render a collection of children, use an array instead.\");return h}\nfunction S(a,b,e){if(null==a)return a;var d=[],c=0;R(a,d,\"\",\"\",function(a){return b.call(e,a,c++)});return d}function T(a){if(-1===a._status){var b=a._result;b=b();b.then(function(b){if(0===a._status||-1===a._status)a._status=1,a._resuLine truncated
|
||||
{"version":3,"file":"index.min.js","sources":["../../../node_modules/react/cjs/react.production.min.js","../../../node_modules/react/index.js","../../../node_modules/scheduler/cjs/scheduler.production.min.js","../../../node_modules/scheduler/index.js","../../../node_modules/react-dom/cjs/react-dom.production.min.js","../../../node_modules/react-dom/index.js","../../../node_modules/react-dom/client.js","../../../node_modules/react-is/cjs/react-is.production.min.js","../../../node_modules/react-is/index.js","../../../node_modules/@emotion/stylis/dist/stylis.esm.js","../../../node_modules/@emotion/unitless/dist/unitless.esm.js","../../../node_modules/@emotion/memoize/dist/emotion-memoize.esm.js","../../../node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.esm.js","../../../node_modules/hoist-non-react-statics/node_modules/react-is/cjs/react-is.production.min.js","../../../node_modules/hoist-non-react-statics/node_modules/react-is/index.js","../../../node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js","../toolbar/responsive.style.js","../toolbar/responsive-button/responsive-button.style.js","../toolbar/responsive-button/ResponsiveButton.jsx","../toolbar/responsive.jsx","../toolbar/publish.jsx","../index.js"],"sourcesContent":["/**\n * @license React\n * react.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';var l=Symbol.for(\"react.element\"),n=Symbol.for(\"react.portal\"),p=Symbol.for(\"react.fragment\"),q=Symbol.for(\"react.strict_mode\"),r=Symbol.for(\"react.profiler\"),t=Symbol.for(\"react.provider\"),u=Symbol.for(\"react.context\"),v=Symbol.for(\"react.forward_ref\"),w=Symbol.for(\"react.suspense\"),x=Symbol.for(\"react.memo\"),y=Symbol.for(\"react.lazy\"),z=Symbol.iterator;function A(a){if(null===a||\"object\"!==typeof a)return null;a=z&&a[z]||a[\"@@iterator\"];return\"function\"===typeof a?a:null}\nvar B={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},C=Object.assign,D={};function E(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B}E.prototype.isReactComponent={};\nE.prototype.setState=function(a,b){if(\"object\"!==typeof a&&\"function\"!==typeof a&&null!=a)throw Error(\"setState(...): takes an object of state variables to update or a function which returns an object of state variables.\");this.updater.enqueueSetState(this,a,b,\"setState\")};E.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,a,\"forceUpdate\")};function F(){}F.prototype=E.prototype;function G(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B}var H=G.prototype=new F;\nH.constructor=G;C(H,E.prototype);H.isPureReactComponent=!0;var I=Array.isArray,J=Object.prototype.hasOwnProperty,K={current:null},L={key:!0,ref:!0,__self:!0,__source:!0};\nfunction M(a,b,e){var d,c={},k=null,h=null;if(null!=b)for(d in void 0!==b.ref&&(h=b.ref),void 0!==b.key&&(k=\"\"+b.key),b)J.call(b,d)&&!L.hasOwnProperty(d)&&(c[d]=b[d]);var g=arguments.length-2;if(1===g)c.children=e;else if(1<g){for(var f=Array(g),m=0;m<g;m++)f[m]=arguments[m+2];c.children=f}if(a&&a.defaultProps)for(d in g=a.defaultProps,g)void 0===c[d]&&(c[d]=g[d]);return{$$typeof:l,type:a,key:k,ref:h,props:c,_owner:K.current}}\nfunction N(a,b){return{$$typeof:l,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}}function O(a){return\"object\"===typeof a&&null!==a&&a.$$typeof===l}function escape(a){var b={\"=\":\"=0\",\":\":\"=2\"};return\"$\"+a.replace(/[=:]/g,function(a){return b[a]})}var P=/\\/+/g;function Q(a,b){return\"object\"===typeof a&&null!==a&&null!=a.key?escape(\"\"+a.key):b.toString(36)}\nfunction R(a,b,e,d,c){var k=typeof a;if(\"undefined\"===k||\"boolean\"===k)a=null;var h=!1;if(null===a)h=!0;else switch(k){case \"string\":case \"number\":h=!0;break;case \"object\":switch(a.$$typeof){case l:case n:h=!0}}if(h)return h=a,c=c(h),a=\"\"===d?\".\"+Q(h,0):d,I(c)?(e=\"\",null!=a&&(e=a.replace(P,\"$&/\")+\"/\"),R(c,b,e,\"\",function(a){return a})):null!=c&&(O(c)&&(c=N(c,e+(!c.key||h&&h.key===c.key?\"\":(\"\"+c.key).replace(P,\"$&/\")+\"/\")+a)),b.push(c)),1;h=0;d=\"\"===d?\".\":d+\":\";if(I(a))for(var g=0;g<a.length;g++){k=\na[g];var f=d+Q(k,g);h+=R(k,b,e,f,c)}else if(f=A(a),\"function\"===typeof f)for(a=f.call(a),g=0;!(k=a.next()).done;)k=k.value,f=d+Q(k,g++),h+=R(k,b,e,f,c);else if(\"object\"===k)throw b=String(a),Error(\"Objects are not valid as a React child (found: \"+(\"[object Object]\"===b?\"object with keys {\"+Object.keys(a).join(\", \")+\"}\":b)+\"). If you meant to render a collection of children, use an array instead.\");return h}\nfunction S(a,b,e){if(null==a)return a;var d=[],c=0;R(a,d,\"\",\"\",function(a){return b.call(e,a,c++)});return d}function T(a){if(-1===a._status){var b=a._result;b=b();b.then(function(b){if(0===a._status||-1===a._sLine truncated
|
||||
@@ -1,12 +1,14 @@
|
||||
'use strict';
|
||||
|
||||
import {setupResponsiveness} from './toolbar/responsive.jsx';
|
||||
import {setupPublish} from "./toolbar/publish.jsx";
|
||||
|
||||
const rootAttributes = {
|
||||
previewFrame: document.getElementById('preview_frame'),
|
||||
}
|
||||
|
||||
setupResponsiveness(rootAttributes);
|
||||
setupPublish(rootAttributes)
|
||||
|
||||
// const responsiveness = connectResponsiveness(rootAttributes);
|
||||
// setTimeout(() => responsiveness.selectMode('tablet'), 5000)
|
||||
@@ -26,6 +28,6 @@ function initDataOptions() {
|
||||
}
|
||||
|
||||
dataOptionsSelect.addEventListener('change', function () {
|
||||
previewFrame.src = window.previewFrameUrl + '?data=' + this.value;
|
||||
previewFrame.src = window.devTool.previewFrameUrl + '?data=' + this.value;
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import React, {useEffect, useState} from 'react';
|
||||
import * as ReactDOM from 'react-dom/client';
|
||||
|
||||
function Publish(props = {}) {
|
||||
const [state, setState] = useState({loading: false});
|
||||
const updateState = (update) => setState(Object.assign({}, state, update));
|
||||
|
||||
return <div>
|
||||
{state.loading &&
|
||||
<div className="overlay overlay--loading">Loading, Please wait...</div>
|
||||
}
|
||||
<button onClick={submit} disabled={state.loading} className="btn btn--primary">Publish</button>
|
||||
</div>;
|
||||
|
||||
async function submit() {
|
||||
const ready = confirm('Are you ready to submit the code?');
|
||||
if (!ready) {
|
||||
return;
|
||||
}
|
||||
|
||||
updateState({loading: true});
|
||||
|
||||
try {
|
||||
const response = await fetch(`/publish`);
|
||||
const data = await response.json();
|
||||
if (data.success) {
|
||||
alert('Your code is successfully sent to project manager! Thank you!');
|
||||
} else {
|
||||
alert('Can\'t send your code, please try again or contact project manager.');
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Something went wrong, please try again or contact project manager.');
|
||||
}
|
||||
|
||||
updateState({loading: false});
|
||||
}
|
||||
}
|
||||
|
||||
export function setupPublish(rootAttributes) {
|
||||
// INIT
|
||||
const wrapper = document.createElement('div');
|
||||
document.querySelector('.page_toolbar__right').prepend(wrapper)
|
||||
|
||||
const root = ReactDOM.createRoot(wrapper);
|
||||
const html = (<Publish rootAttributes={rootAttributes}/>);
|
||||
root.render(html);
|
||||
}
|
||||
@@ -73,7 +73,7 @@ function Responsive(props = {}) {
|
||||
export function setupResponsiveness(rootAttributes) {
|
||||
// INIT
|
||||
const wrapper = document.createElement('div');
|
||||
document.querySelector('.page_toolbar').prepend(wrapper)
|
||||
document.querySelector('.page_toolbar__middle').prepend(wrapper)
|
||||
|
||||
const root = ReactDOM.createRoot(wrapper);
|
||||
const html = (<Responsive rootAttributes={rootAttributes}/>);
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
.btn {
|
||||
--btn-color: #333;
|
||||
--btn-background-color: white;
|
||||
display: inline-block;
|
||||
padding: calc(0.375rem - 2px) 0.75rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: var(--btn-color);
|
||||
border-radius: 0.25rem;
|
||||
border: 1px solid var(--btn-background-color);
|
||||
background-color: var(--btn-background-color);
|
||||
cursor: pointer;
|
||||
|
||||
&:disabled {
|
||||
opacity: 0.75;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&--primary {
|
||||
--btn-color: white;
|
||||
--btn-background-color: #333;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
@@ -3,7 +3,6 @@
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
|
||||
--top_panel_height: 53.5px;
|
||||
--top_spacing: 0px;
|
||||
--breakpoint_top_spacing: 30px;
|
||||
|
||||
|
||||
@@ -1,29 +1,77 @@
|
||||
:root {
|
||||
--top_panel_vertical_height: 0.5rem;
|
||||
--top_panel_height: calc(36px + var(--top_panel_vertical_height) * 2);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
background-color: #F7FAFC;
|
||||
}
|
||||
|
||||
.btn {
|
||||
--btn-color: #333;
|
||||
--btn-background-color: white;
|
||||
display: inline-block;
|
||||
padding: calc(0.375rem - 2px) 0.75rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: var(--btn-color);
|
||||
border-radius: 0.25rem;
|
||||
border: 1px solid var(--btn-background-color);
|
||||
background-color: var(--btn-background-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn:disabled {
|
||||
opacity: 0.75;
|
||||
cursor: default;
|
||||
}
|
||||
.btn--primary {
|
||||
--btn-color: white;
|
||||
--btn-background-color: #333;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.page_toolbar {
|
||||
--gap: 2.5rem;
|
||||
font-size: 14px;
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #EDF2F7;
|
||||
padding: 1em;
|
||||
padding: var(--top_panel_vertical_height) 1rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.page_toolbar .page_toolbar__middle {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: var(--gap);
|
||||
align-items: center;
|
||||
}
|
||||
.page_toolbar > div {
|
||||
.page_toolbar .page_toolbar__middle > div {
|
||||
position: relative;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.page_toolbar > div {
|
||||
.page_toolbar .page_toolbar__middle > div {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.page_toolbar > div:not(:first-child):after {
|
||||
.page_toolbar .page_toolbar__middle > div:not(:first-child):after {
|
||||
content: "|";
|
||||
position: absolute;
|
||||
left: calc(var(--gap) / 2 * -1);
|
||||
@@ -32,7 +80,7 @@ body {
|
||||
line-height: 1;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.page_toolbar > div select {
|
||||
.page_toolbar .page_toolbar__middle > div select {
|
||||
font-size: 0.85em;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
@@ -42,7 +90,7 @@ body {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.page_toolbar__data_options {
|
||||
.page_toolbar .page_toolbar__middle__data_options {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -51,7 +99,6 @@ body {
|
||||
display: block;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
--top_panel_height: 53.5px;
|
||||
--top_spacing: 0px;
|
||||
--breakpoint_top_spacing: 30px;
|
||||
margin-top: var(--top_spacing);
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":["page--main.scss","_page--breakpoints.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EAEA;;;AAGF;EACE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAGA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EADF;IAEI;;;;ACnDN;EACE;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA","file":"page--main.css"}
|
||||
{"version":3,"sourceRoot":"","sources":["page--main.scss","_buttons.scss","_overlay.scss","_page--breakpoints.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;AAGF;EACE;EACA;EAEA;;;ACTF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;ACtBJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AFIF;EACE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EAHF;IAII;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKF;EADF;IAEI;;;;AG/DR;EACE;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA","file":"page--main.css"}
|
||||
@@ -1,3 +1,8 @@
|
||||
:root {
|
||||
--top_panel_vertical_height: 0.5rem;
|
||||
--top_panel_height: calc(36px + var(--top_panel_vertical_height) * 2);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
@@ -5,51 +10,59 @@ body {
|
||||
background-color: #F7FAFC;
|
||||
}
|
||||
|
||||
@import "buttons";
|
||||
@import "overlay";
|
||||
|
||||
.page_toolbar {
|
||||
--gap: 2.5rem;
|
||||
font-size: 14px;
|
||||
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #EDF2F7;
|
||||
padding: 1em;
|
||||
padding: var(--top_panel_vertical_height) 1rem;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: var(--gap);
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
//margin-bottom: 2em;
|
||||
|
||||
> div {
|
||||
position: relative;
|
||||
.page_toolbar__middle {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: var(--gap);
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
> div {
|
||||
position: relative;
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:not(:first-child):after {
|
||||
content: '|';
|
||||
position: absolute;
|
||||
left: calc(var(--gap) / 2 * -1);
|
||||
top: 40%;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
select {
|
||||
font-size: 0.85em;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
border-radius: initial;
|
||||
min-width: initial;
|
||||
width: initial !important;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child):after {
|
||||
content: '|';
|
||||
position: absolute;
|
||||
left: calc(var(--gap) / 2 * -1);
|
||||
top: 40%;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
select {
|
||||
font-size: 0.85em;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
border-radius: initial;
|
||||
min-width: initial;
|
||||
width: initial !important;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&__data_options {
|
||||
@media (max-width: 1024px) {
|
||||
display: block;
|
||||
&__data_options {
|
||||
@media (max-width: 1024px) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user