Skip to content

Commit 844bf48

Browse files
ksampiasksampias
authored
Merge pull request ReactPrimer#6 from ksampias/refactor-css
Refactored CSS
2 parents 8070b15 + 34cd538 commit 844bf48

File tree

5 files changed

+190
-122
lines changed

5 files changed

+190
-122
lines changed

‎assets/logo/32x32.png

1.32 KB
Loading

‎assets/logo/48x48.png

2.31 KB
Loading

‎src/App.css

+111-42
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,169 @@
1+
html, head, #root {
2+
height: 100%;
3+
}
4+
15
body {
26
font-family: 'Nunito Sans', sans-serif;
3-
margin: 0px;
4-
overflow-x: hidden;
7+
margin: 0;
8+
height: 100%;
59
-webkit-app-region: drag;
610
}
711

812
.rst__nodeContent {
913

10-
1114
}
15+
16+
/* determines height of tree drag and drop handle*/
1217
.rst__moveHandle {
1318
height: 1.8em !important;
1419
width:1.6em;
15-
/*background-color:white;*/
16-
/*background-image:url("updownarr.jpg") !important;*/
1720
}
21+
22+
/* determines height of tree component row*/
1823
.rst__rowContents {
1924
height: 1.8em !important;
2025
}
26+
2127
.rst__rowLabel {
2228
margin: 0 auto;
2329
}
30+
2431
.rst__rowToolbar {
2532

2633
}
2734

35+
/*sets the height and color of the landing pad*/
2836
.rst__rowCancelPad::before,.rst__rowLandingPad::before {
29-
height:1.8em !important;
30-
background-color:gray;
37+
height:1.8em !important;
38+
background-color:gray;
39+
opacity: .3;
3140
}
3241

3342
.rst__lineChildren::after {
3443
height:30px !important;
3544
}
3645

46+
.top-container {
47+
height: 100%;
48+
}
3749

38-
#RP {
39-
font-family: arial;
40-
font-size: 1em;
41-
padding:1.4em;
42-
margin-top:0px;
43-
text-align: center;
50+
.top-spacer {
51+
display: flex;
52+
height: 2.8em;
53+
}
54+
55+
.left-spacer {
56+
flex: 1.3;
57+
display: flex;
58+
justify-content: flex-end;
59+
align-items: center;
4460
background-color: #6D7984;
45-
}
61+
}
62+
63+
.right-spacer {
64+
flex: 3;
65+
display: flex;
66+
}
67+
68+
.filler-a {
69+
flex: 10;
70+
}
71+
72+
.filler-b {
73+
flex: 1;
74+
}
75+
76+
.container {
77+
display: flex;
78+
height: calc(100% - 2.8em);
79+
}
4680

47-
.flex-container {
48-
display: flex;
49-
flex-direction: row;
50-
flex-wrap:nowrap;
51-
justify-content: flex-start;
52-
height: 100vh;
81+
.tree-container {
82+
height: 100%;
83+
flex: 3;
84+
align-self: flex-end;
85+
display: flex;
86+
background-color: white;
87+
color: #4C5259;
88+
}
89+
90+
.sortable-tree {
91+
-webkit-app-region: no-drag;
92+
flex: 10;
93+
}
94+
95+
.logo-container {
96+
flex: 1;
97+
display: flex;
98+
align-items: flex-end;
99+
justify-content: flex-end;
53100
}
54101

55-
.inputBox {
56-
/*border: 2px solid black;*/
57-
background-color: #4C5259;
58-
align-items:center stretch;
59-
flex:1.3;
60-
height: 100vh;
102+
img {
103+
padding: 0% 20% 20% 0%;
104+
height: 2em;
105+
width: 2em;
61106
}
62107

63-
.tree {
64-
margin-top: 2.2em;
65-
background-color:white;
66-
/*border: 2px solid black;*/
67-
flex: 3;
68-
color:#4C5259;
69-
-webkit-app-region: no-drag;
108+
.form-container {
109+
height: 100%;
110+
flex: 1.3;
111+
align-self: flex-end;
112+
display: grid;
113+
grid-template-rows: 1%;
114+
background-color: #4C5259;
70115
}
71116

72117
h1 {
118+
grid-row-start: 1;
119+
grid-row-end: 12;
120+
padding: 0;
121+
margin: auto;
73122
text-align: center;
74123
font-weight: 300;
75-
font-size:1em;
76-
color:#D9D9D9;
124+
font-size: 1em;
125+
color: #D9D9D9;
126+
-webkit-app-region: no-drag;
77127
}
78128

79129
.form {
130+
grid-row-start: 12;
131+
grid-row-end: 32;
80132
font-size: .8em;
133+
color: #D9D9D9;
134+
-webkit-app-region: no-drag;
135+
background-color: #4C5259;
136+
}
137+
138+
form {
139+
margin: 5%;
81140
display: flex;
82141
flex-direction: column;
83-
margin: 1em;
84-
color:#D9D9D9;
85-
-webkit-app-region: no-drag;
86142
}
87143

144+
.center-spacer {
145+
grid-row-start: 32;
146+
grid-row-end: 100;
147+
background-color: #4C5259;
148+
}
149+
150+
.button-container {
151+
grid-row-start: 100;
152+
grid-row-end: 101;
153+
-webkit-app-region: no-drag;
154+
}
88155

89156
.export {
157+
margin: 0 5% 8% 5%;
158+
width: 90%;
90159
background-color: lightgreen;
91160
border-radius: 4px;
92-
border:none;
161+
border: none;
93162
}
94163

95164
.deleteButton {
96-
background:none;
97-
border:none;
98-
font-weight:bold;
165+
background: none;
166+
border: none;
167+
font-weight: bold;
99168
cursor: pointer;
100169
}

‎src/App.js

+45-39
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@ class App extends Component {
3434
// Helper function creates an array of all component names
3535
extractCompNames(components, flattened = [], cache = {}) {
3636
components.forEach((element, index) => {
37-
let name =
38-
element.title
39-
// .toUpperCase()
37+
let name =
38+
element.title
39+
// .toUpperCase()
4040
if (!cache[name]) {
4141
cache[name] = true;
4242
flattened.push(element.title);
@@ -59,10 +59,10 @@ class App extends Component {
5959
// Formats casing and spacing, and removes file extenions from input
6060
formatName(userInput) {
6161
let result = userInput
62-
.replace(/^./g, x => x.toUpperCase())
63-
//.charAt(0).toUpperCase() + userInput.slice(1)
64-
.replace(/\ \w/g, x => x[1].toUpperCase())
65-
.replace(/\..+$/, '');
62+
.replace(/^./g, x => x.toUpperCase())
63+
//.charAt(0).toUpperCase() + userInput.slice(1)
64+
.replace(/\ \w/g, x => x[1].toUpperCase())
65+
.replace(/\..+$/, '');
6666
return result
6767
}
6868

@@ -122,10 +122,15 @@ class App extends Component {
122122
const getNodeKey = ({ treeIndex }) => treeIndex;
123123

124124
return (
125-
126-
<div className="flex-container">
127-
<div className='inputBox'>
128-
<h1 id="RP"></h1>
125+
<div className='top-container'>
126+
<div className='top-spacer'>
127+
<div className='left-spacer' />
128+
<div className='right-spacer'>
129+
<div className='filler-a' />
130+
<div className='filler-b' />
131+
</div>
132+
</div>
133+
<div className='container'>
129134
<NewCompForm
130135
newName={this.state.newName}
131136
newParent={this.state.newParent}
@@ -135,34 +140,35 @@ class App extends Component {
135140
handleSubmit={this.handleSubmit}
136141
components={this.state.treeData}
137142
exportFiles={this.exportFiles}
138-
/>
139-
<br />
140-
141-
142-
</div>
143-
<div className="tree">
144-
<SortableTree
145-
treeData={this.state.treeData}
146-
onChange={treeData => this.setState({ treeData })}
147-
// button for removing component
148-
generateNodeProps={({ node, path }) => ({
149-
buttons: [
150-
<button className="deleteButton" onClick={() => this.setState(state => ({
151-
treeData: removeNodeAtPath({
152-
treeData:
153-
state.treeData,
154-
path,
155-
getNodeKey,
156-
}),
157-
}))}
158-
>X</button>,
159-
],
160-
})}
161-
/>
143+
/>
144+
<div className='tree-container'>
145+
<SortableTree
146+
className='sortable-tree'
147+
treeData={this.state.treeData}
148+
onChange={treeData => this.setState({ treeData })}
149+
// button for removing component
150+
generateNodeProps={({ node, path }) => ({
151+
buttons: [
152+
<button className="deleteButton" onClick={() => this.setState(state => ({
153+
treeData: removeNodeAtPath({
154+
treeData:
155+
state.treeData,
156+
path,
157+
getNodeKey,
158+
}),
159+
}))}
160+
>X</button>,
161+
],
162+
})}
163+
/>
164+
<div className='logo-container'>
165+
<img className='logo' src={require('../assets/logo/48x48.png')} alt='logo'></img>
166+
</div>
167+
</div>
168+
</div>
162169
</div>
163-
</div>
164-
);
170+
);
171+
}
165172
}
166-
}
167173

168-
export default App;
174+
export default App;

0 commit comments

Comments
 (0)