Skip to content

Commit ef625c7

Browse files
vivekweb2013vivekweb2013
committed
Apply responsive css
1 parent 48505a3 commit ef625c7

File tree

6 files changed

+65
-25
lines changed

6 files changed

+65
-25
lines changed

‎frontend/src/api/API.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,4 +83,4 @@ export const updateUserCommand = (userCommand) => fetch(`${API_URL}/user/user-co
8383
export const deleteUserCommand = (userCommand) => fetch(`${API_URL}/user/user-command/${userCommand.id}`, {
8484
method: 'DELETE',
8585
headers: getHeaders()
86-
}).then(handleErrors).then(res => res.json()).catch(catchError);
86+
}).then(handleErrors).then(res => res.text()).catch(catchError);

‎frontend/src/components/Builder.scss

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,25 +66,31 @@ $form-bottom-button-spacing: 15px;
6666

6767
.dynamic-text-ip-wrapper {
6868
display: inline-flex;
69+
width: 100%;
6970

7071
input[type="button"] {
7172
border: 1px solid #767676;
7273
border-radius: 2px;
7374
background-color: #efefef;
7475
outline: none;
76+
margin: 0; // required for safari
7577
}
7678
}
7779

7880
.permission-ip-wrapper {
81+
.permission-container {
82+
display: table;
83+
}
7984
font-size: smaller;
8085
input[type="checkbox"] + label {
8186
height: 20px;
8287
width: 20px;
8388
border-width: 2px;
8489
}
8590
.assignee {
86-
float: left;
91+
vertical-align: middle;
8792
font-weight: 500;
93+
text-transform: uppercase;
8894
}
8995
.permissions {
9096
float: right;
@@ -95,6 +101,7 @@ $form-bottom-button-spacing: 15px;
95101
}
96102
.permission-type {
97103
margin-left: 8px;
104+
vertical-align: middle;
98105
}
99106
}
100107

@@ -114,6 +121,7 @@ $form-bottom-button-spacing: 15px;
114121
font-size: 1.4rem;
115122
background-color: lighten($color-primary, 66%);
116123
outline: none;
124+
margin: 0; // required for safari
117125
}
118126

119127
input[type="checkbox"] {
@@ -142,6 +150,7 @@ $form-bottom-button-spacing: 15px;
142150
cursor: pointer;
143151
transition: all 0.2s ease;
144152
vertical-align: middle;
153+
margin-left: 2px;
145154

146155
&:active {
147156
transform: scale(1.05);
@@ -201,7 +210,7 @@ $form-bottom-button-spacing: 15px;
201210
}
202211

203212
.input-col {
204-
width: 40%;
213+
width: 43%;
205214
}
206215
}
207216
.form-buttons {
@@ -258,6 +267,9 @@ $form-bottom-button-spacing: 15px;
258267
width: 100%;
259268
margin: 10px 0 0 0;
260269
}
270+
.permission-type .lg {
271+
display: none;
272+
}
261273
}
262274
}
263275
}

‎frontend/src/components/Finder.scss

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,17 @@ $table-row-hover-bg-color: lighten($color-primary, 60%);
6262
th.syntax-column {
6363
width: 30%;
6464
}
65+
66+
/* Responsive layout - when the screen is less than 800px wide,
67+
hide the syntax-column and make name-column a fixed width */
68+
@media screen and (max-width: 800px) {
69+
th.syntax-column {
70+
width: 0;
71+
}
72+
th.name-column {
73+
width: 160px;
74+
}
75+
}
6576
}
6677

6778
.no-data-msg {

‎frontend/src/components/UserCommands.scss

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,5 +106,20 @@ $search-field-font-size: ($search-input-height/30px * 1rem);
106106
th.actions-column {
107107
width: 175px;
108108
}
109+
th.date-column {
110+
width: 135px;
111+
}
112+
113+
/* Responsive layout - when the screen is less than 600px wide,
114+
make the two columns stack on top of each other instead of next to each other */
115+
@media screen and (max-width: 600px) {
116+
th.date-column {
117+
width: 0;
118+
}
119+
th,
120+
type-column {
121+
width: 0;
122+
}
123+
}
109124
}
110125
}

‎frontend/src/components/common/Modal.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,18 +34,18 @@ class Modal extends Component {
3434
// Use a portal to render the children into the element
3535
return createPortal(
3636
// Any valid React child: JSX, strings, arrays, etc.
37-
<div class="modal">
38-
<div class="modal-content">
39-
<span class="top-close-btn" onClick={e => onClose()}>&#x2715;</span>
40-
<div class={`modal-header ${type}`}>
37+
<div className="modal">
38+
<div className="modal-content">
39+
<span className="top-close-btn" onClick={e => onClose()}>&#x2715;</span>
40+
<div className={`modal-header ${type}`}>
4141
{title}
4242
</div>
43-
<div class="modal-body">
43+
<div className="modal-body">
4444
{children}
4545
</div>
46-
<div class="modal-footer">
47-
{type === 'confirm' && <button class="footer-btn confirm" onClick={e => onConfirm()}>OKAY</button>}
48-
<button class="footer-btn" onClick={e => onClose()}>{type === 'confirm' ? 'CANCEL' : 'CLOSE'}</button>
46+
<div className="modal-footer">
47+
{type === 'confirm' && <button className="footer-btn confirm" onClick={e => onConfirm()}>OKAY</button>}
48+
<button className="footer-btn" onClick={e => onClose()}>{type === 'confirm' ? 'CANCEL' : 'CLOSE'}</button>
4949
</div>
5050
</div>
5151
</div>,

‎frontend/src/components/common/PermissionInput.js

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -36,20 +36,22 @@ class PermissionInput extends Component {
3636
onChange={this.handleTextChange.bind(this)} required={required} disabled={disabled} />
3737
{!disabled && <input type="button" disabled={disabled} onClick={e => this.toggle(e)} className="small" value={valArray.length === 0 ? ' ＋ ' : ' － '} />}
3838
</span>
39-
40-
{valArray.map((v, i) => <div key={i} className="permission-row">
41-
<span className="assignee">{i === 0 ? 'User' : (i === 1 ? 'Group' : 'Other')}</span>
42-
<span className="permissions">
43-
{['Read', 'Write', 'Execute'].map((p, j) =>
44-
<span key={`${id}_${i}_${j}`}><span className="permission-type">{p} </span><input id={`${id}_${i}_${j}`} type="checkbox" name={name}
45-
onChange={(e) => this.handleChange(e, i, j)}
46-
disabled={disabled} checked={(v | binaryPermissions[j]) === v} />
47-
<label htmlFor={`${id}_${i}_${j}`}>
48-
<svg viewBox="0,0,50,50"><path d="M5 30 L 20 45 L 45 5"></path></svg>
49-
</label>
50-
</span>)}
51-
</span>
52-
</div>)}
39+
<div className="permission-container">
40+
{valArray.map((v, i) => <div key={i} className="permission-row">
41+
<span className="assignee">{i === 0 ? 'Owner' : (i === 1 ? 'Group' : 'Others')}</span>
42+
<span className="permissions">
43+
{['Read', 'Write', 'Execute'].map((p, j) =>
44+
<span key={`${id}_${i}_${j}`}><span className="permission-type">{p.charAt(0)}<span className="lg">{p.substring(1)}</span></span>
45+
<input id={`${id}_${i}_${j}`} type="checkbox" name={name}
46+
onChange={(e) => this.handleChange(e, i, j)}
47+
disabled={disabled} checked={(v | binaryPermissions[j]) === v} />
48+
<label htmlFor={`${id}_${i}_${j}`}>
49+
<svg viewBox="0,0,50,50"><path d="M5 30 L 20 45 L 45 5"></path></svg>
50+
</label>
51+
</span>)}
52+
</span>
53+
</div>)}
54+
</div>
5355
</div>);
5456
}
5557

0 commit comments

Comments
 (0)