Skip to content

Commit 15405f4

Browse files
Bogdan-LyashenkoBogdan-Lyashenko
committed
Fix layout
1 parent 0d01584 commit 15405f4

9 files changed

Lines changed: 49 additions & 25 deletions

File tree

‎src/public/dist/bundle.js‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7525,7 +7525,7 @@ exports = module.exports = __webpack_require__(/*! ../../../node_modules/css-loa
75257525

75267526

75277527
// module
7528-
exports.push([module.i, ".App-container {\n padding: 10px;\n}\n\n.App-footer {\n position: absolute;\n bottom: 10px;\n right: 10px;\n font-size: 10px;\n}", ""]);
7528+
exports.push([module.i, ".App-container {\n padding: 10px;\n height: 100%;\n display: flex;\n flex-direction: column;\n}\n\n.App-body {\n position: relative;\n height: 100%;\n}\n\n.App-footer {\n position: absolute;\n bottom: 10px;\n right: 10px;\n font-size: 10px;\n}\n", ""]);
75297529

75307530
// exports
75317531

@@ -7544,7 +7544,7 @@ exports = module.exports = __webpack_require__(/*! ../../../../../../../node_mod
75447544

75457545

75467546
// module
7547-
exports.push([module.i, ".ViewSwitchList-container {\n border-bottom: 1px solid #BFBFBF;\n}", ""]);
7547+
exports.push([module.i, ".ViewSwitchList-container {\n border-bottom: 1px solid #ebedf0;\n}", ""]);
75487548

75497549
// exports
75507550

@@ -7563,7 +7563,7 @@ exports = module.exports = __webpack_require__(/*! ../../../../../../node_module
75637563

75647564

75657565
// module
7566-
exports.push([module.i, ".SideBar-container {\n position: absolute;\n right: 0px;\n top: 60px;\n height: calc(100% - 70px);\n width: 500px;\n z-index: 2;\n background-color: white;\n border-left: 1px solid #bfbfbf;\n padding: 0 16px;\n}\n\n.SideBar-header {\n width: 100%;\n display: flex;\n justify-content: space-between;\n}\n", ""]);
7566+
exports.push([module.i, ".SideBar-container {\n position: absolute;\n right: 0px;\n top: 0px;\n height: 100%;\n width: 500px;\n z-index: 2;\n background-color: white;\n border-left: 1px solid #ebedf0;\n padding: 8px 16px;\n}\n\n.SideBar-header {\n width: 100%;\n display: flex;\n justify-content: space-between;\n}\n", ""]);
75677567

75687568
// exports
75697569

@@ -74984,10 +74984,18 @@ var App = function App() {
7498474984
return _react2.default.createElement(
7498574985
'div',
7498674986
{ className: 'App-container' },
74987-
_react2.default.createElement(_DataBusContainer2.default, null),
74988-
_react2.default.createElement(_ViewSwitchesContainer2.default, null),
74989-
_react2.default.createElement(_TreeDiagramContainer2.default, null),
74990-
_react2.default.createElement(_SideBarContainer2.default, null),
74987+
_react2.default.createElement(
74988+
'header',
74989+
{ className: 'App-header' },
74990+
_react2.default.createElement(_DataBusContainer2.default, null),
74991+
_react2.default.createElement(_ViewSwitchesContainer2.default, null)
74992+
),
74993+
_react2.default.createElement(
74994+
'div',
74995+
{ className: 'App-body' },
74996+
_react2.default.createElement(_TreeDiagramContainer2.default, null),
74997+
_react2.default.createElement(_SideBarContainer2.default, null)
74998+
),
7499174999
_react2.default.createElement(
7499275000
'footer',
7499375001
{ className: 'App-footer' },
@@ -75549,6 +75557,7 @@ var SideBarContainer = function SideBarContainer(_ref) {
7554975557

7555075558
if (!selectedFile) return null;
7555175559

75560+
//TODO: add animation slide
7555275561
return _react2.default.createElement(_SideBar2.default, {
7555375562
file: selectedFile,
7555475563
codeCrumb: selectedCodeCrumb,
@@ -75606,6 +75615,7 @@ var _hljs = __webpack_require__(/*! react-syntax-highlighter/styles/hljs */ "../
7560675615

7560775616
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
7560875617

75618+
//TODO: add select with several themes
7560975619
//TODO: scrool to/highlight crumbed lines
7561075620
//https://github.com/conorhastings/react-syntax-highlighter/blob/master/README.md
7561175621
exports.default = function (_ref) {
@@ -75616,8 +75626,8 @@ exports.default = function (_ref) {
7561675626
_reactSyntaxHighlighter2.default,
7561775627
{
7561875628
language: 'javascript',
75619-
style: _hljs.hybrid,
75620-
customStyle: { fontSize: '14px' },
75629+
style: _hljs.atomOneLight,
75630+
customStyle: { fontSize: '13px' },
7562175631
showLineNumbers: true
7562275632
},
7562375633
code

‎src/public/dist/bundle.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/public/dist/index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@
55
<title>Codecrumbs!</title>
66
</head>
77
<body>
8-
<div id="mount-node"></div>
9-
<div id="drawing"></div>
8+
<div id="mount-node" style="height: 100%"></div>
109
<script src="bundle.js" type="text/javascript"></script>
1110
</body>
1211
</html>

‎src/public/js/App.css‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,18 @@
11
.App-container {
22
padding: 10px;
3+
height: 100%;
4+
display: flex;
5+
flex-direction: column;
6+
}
7+
8+
.App-body {
9+
position: relative;
10+
height: 100%;
311
}
412

513
.App-footer {
614
position: absolute;
715
bottom: 10px;
816
right: 10px;
917
font-size: 10px;
10-
}
18+
}

‎src/public/js/App.js‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,15 @@ import './App.css';
1010
const App = () => {
1111
return (
1212
<div className="App-container">
13-
<DataBus />
14-
<ViewsSwitches />
15-
<TreeDiagram />
16-
<SideBar />
13+
<header className="App-header">
14+
<DataBus />
15+
<ViewsSwitches />
16+
</header>
17+
18+
<div className="App-body">
19+
<TreeDiagram />
20+
<SideBar />
21+
</div>
1722

1823
<footer className="App-footer">
1924
Bohdan Liashenko{' '}

‎src/public/js/components/controls/ViewSwitches/component/ViewSwitchList.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
.ViewSwitchList-container {
2-
border-bottom: 1px solid #BFBFBF;
2+
border-bottom: 1px solid #ebedf0;
33
}

‎src/public/js/components/side-bar/SideBarContainer.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { selectFile } from '../data-bus/store/actions';
66
const SideBarContainer = ({ selectedFile, selectedCodeCrumb, onClose }) => {
77
if (!selectedFile) return null;
88

9+
//TODO: add animation slide
910
return (
1011
<SideBar
1112
file={selectedFile}

‎src/public/js/components/side-bar/component/Code/Code.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import React from 'react';
22
import SyntaxHighlighter from 'react-syntax-highlighter';
3-
import { hybrid } from 'react-syntax-highlighter/styles/hljs';
3+
import { atomOneLight } from 'react-syntax-highlighter/styles/hljs';
44

5+
//TODO: add select with several themes
56
//TODO: scrool to/highlight crumbed lines
67
//https://github.com/conorhastings/react-syntax-highlighter/blob/master/README.md
78
export default ({ code, crumbedLines = [] }) => (
89
<SyntaxHighlighter
910
language="javascript"
10-
style={hybrid}
11-
customStyle={{ fontSize: '14px' }}
11+
style={atomOneLight}
12+
customStyle={{ fontSize: '13px' }}
1213
showLineNumbers={true}
1314
>
1415
{code}

‎src/public/js/components/side-bar/component/SideBar.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
.SideBar-container {
22
position: absolute;
33
right: 0px;
4-
top: 60px;
5-
height: calc(100% - 70px);
4+
top: 0px;
5+
height: 100%;
66
width: 500px;
77
z-index: 2;
88
background-color: white;
9-
border-left: 1px solid #bfbfbf;
10-
padding: 0 16px;
9+
border-left: 1px solid #ebedf0;
10+
padding: 8px 16px;
1111
}
1212

1313
.SideBar-header {

0 commit comments

Comments
 (0)