mirrors/insomnia
1
0
Fork 0
mirror of https://github.com/Kong/insomnia synced 2024-11-07 22:30:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed grid responsiveness

Browse Source
This commit is contained in:
Gregory Schier 2016-04-09 12:10:34 -07:00
parent 2ac94ba395
commit b30fed04c2
4 changed files with 86 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

129
app/containers/App.js
View File

@ -26,74 +26,87 @@ class App extends Component {
}
return (
<div className="grid__cell grid grid-collapse">
<section className="grid__cell grid--v section">
<div className="grid__cell grid__cell--no-flex section__header">
<RequestUrlBar
onUrlChange={url => {actions.updateRequest({id: activeRequest.id, url})}}
onMethodChange={method => {actions.updateRequest({id: activeRequest.id, method})}}
request={activeRequest}/>
</div>
<Tabs className="grid__cell grid--v section__body"
onSelect={i => actions.selectTab('request', i)}
selectedIndex={tabs.request || 0}>
<TabList className="grid grid--start">
<Tab><button className="btn btn--compact">Body</button></Tab>
<Tab><button className="btn btn--compact">Params</button></Tab>
<Tab><button className="btn btn--compact">Auth</button></Tab>
<Tab><button className="btn btn--compact">Headers</button></Tab>
</TabList>
<TabPanel className="grid__cell relative">
<RequestBodyEditor
onChange={body => {actions.updateRequest({id: activeRequest.id, body})}}
<div className="grid__cell grid grid--collapse">
<section className="grid__cell section">
<div className="grid--v wide">
<div className="grid__cell grid__cell--no-flex section__header">
<RequestUrlBar
onUrlChange={url => {actions.updateRequest({id: activeRequest.id, url})}}
onMethodChange={method => {actions.updateRequest({id: activeRequest.id, method})}}
request={activeRequest}/>
</TabPanel>
<TabPanel className="grid__cell">
<KeyValueEditor
pairs={activeRequest.params}
onChange={params => actions.updateRequest({id: activeRequest.id, params})}
/>
</TabPanel>
<TabPanel className="grid__cell pad">Basic Auth</TabPanel>
<TabPanel className="grid__cell">
<KeyValueEditor
pairs={activeRequest.headers}
onChange={headers => actions.updateRequest({id: activeRequest.id, headers})}
/>
</TabPanel>
</Tabs>
</div>
<Tabs className="grid__cell grid--v section__body"
onSelect={i => actions.selectTab('request', i)}
selectedIndex={tabs.request || 0}>
<TabList className="grid grid--start">
<Tab><button className="btn btn--compact">Body</button></Tab>
<Tab>
<button className="btn btn--compact no-wrap">
Params {activeRequest.params.length ? `(${activeRequest.params.length})` : ''}
</button>
</Tab>
<Tab><button className="btn btn--compact">Auth</button></Tab>
<Tab>
<button className="btn btn--compact no-wrap">
Headers {activeRequest.headers.length ? `(${activeRequest.headers.length})` : ''}
</button>
</Tab>
</TabList>
<TabPanel className="grid__cell relative">
<RequestBodyEditor
onChange={body => {actions.updateRequest({id: activeRequest.id, body})}}
request={activeRequest}/>
</TabPanel>
<TabPanel className="grid__cell scrollable">
<KeyValueEditor
pairs={activeRequest.params}
onChange={params => actions.updateRequest({id: activeRequest.id, params})}
/>
</TabPanel>
<TabPanel className="grid__cell pad">Basic Auth</TabPanel>
<TabPanel className="grid__cell">
<KeyValueEditor
pairs={activeRequest.headers}
onChange={headers => actions.updateRequest({id: activeRequest.id, headers})}
/>
</TabPanel>
</Tabs>
</div>
</section>
<section className="grid__cell grid--v section">
<header className="grid grid--center header text-center bg-light txt-sm section__header">
<div className="tag success"><strong>200</strong>&nbsp;SUCCESS</div>
<div className="tag">TIME&nbsp;<strong>143ms</strong></div>
</header>
<Tabs selectedIndex={0} className="grid__cell grid--v section__body">
<TabList className="grid grid--start">
<Tab><button className="btn btn--compact">Preview</button></Tab>
<Tab><button className="btn btn--compact">Raw</button></Tab>
<Tab><button className="btn btn--compact">Headers</button></Tab>
</TabList>
<TabPanel className="grid__cell">
<Editor
options={{
<section className="grid__cell section">
<div className="grid--v wide">
<header
className="grid grid--center header text-center bg-light txt-sm section__header">
<div className="tag success"><strong>200</strong>&nbsp;SUCCESS</div>
<div className="tag">TIME&nbsp;<strong>143ms</strong></div>
</header>
<Tabs selectedIndex={0} className="grid__cell grid--v section__body">
<TabList className="grid grid--start">
<Tab><button className="btn btn--compact">Preview</button></Tab>
<Tab><button className="btn btn--compact">Raw</button></Tab>
<Tab><button className="btn btn--compact">Headers</button></Tab>
</TabList>
<TabPanel className="grid__cell">
<Editor
options={{
mode: 'application/json',
readOnly: true,
placeholder: 'nothing yet...'
}}
/>
</TabPanel>
<TabPanel className="grid__cell">
<Editor
options={{
/>
</TabPanel>
<TabPanel className="grid__cell">
<Editor
options={{
mode: 'application/json',
readOnly: true,
placeholder: 'nothing yet...'
}}
/>
</TabPanel>
<TabPanel className="pad grid__cell">Headers</TabPanel>
</Tabs>
/>
</TabPanel>
<TabPanel className="pad grid__cell">Headers</TabPanel>
</Tabs>
</div>
</section>
</div>
)

25
app/css/components/grid.scss
View File

@ -36,30 +36,29 @@
.grid {
max-width: 100%;
flex-direction: row;
& > .grid__cell {
// So the cells are equal width
width: 100%;
}
}
.grid--v {
max-height: 100%;
flex-direction: column;
& > .grid__cell {
// So the cells are equal height
height: 100%;
}
}
@media (max-width: $breakpoint-md) {
.grid.grid-collapse {
display: flex;
.grid.grid--collapse {
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: flex-start;
height: 100%;
width: 100%;
box-sizing: border-box;
& > .col {
display: block;
flex: 1 1 auto;
& > .grid__cell {
height: 100%;
box-sizing: border-box;
}
}
}

2
app/css/constants/dimensions.scss
View File

@ -30,7 +30,7 @@ $radius-md: 2px;
$modal-width: 50rem;
/* Breakpoints */
$breakpoint-md: 780px;
$breakpoint-md: 790px;
$breakpoint-sm: 580px;
.pad {

5
electron.js
View File

@ -21,7 +21,7 @@ app.on('ready', function () {
width: IS_DEV ? 1600 : 1200,
height: 800,
minHeight: 500,
minWidth: 480,
minWidth: 500,
acceptFirstMouse: true
// titleBarStyle: IS_MAC ? 'hidden-inset' : 'default'
});
@ -41,5 +41,4 @@ app.on('ready', function () {
// when you should delete the corresponding element.
mainWindow = null;
});
})
;
});