Commit bb6ba754 authored by Vladimir Kiryakov's avatar Vladimir Kiryakov
Browse files

make responsive, moved toasts to top

parent 55893b96
......@@ -52,19 +52,19 @@ const SubscribeToTopic = ({
<form>
<div className="form-row form-group">
<div className="col-10">
<div className="col-12 col-md-10">
<label className="font-weight-bold">Subscription url</label>
<Field name="url" component="input" type="text" className="form-control"
placeholder="protocol://host:port/"/>
</div>
</div>
<div className="form-row">
<div className="col-7">
<div className="form-row d-flex flex-column flex-sm-row">
<div className="col-12 col-md-7">
<label className="font-weight-bold">Subscription topic</label>
<Field name="topic" component="input" type="text" className="form-control"
placeholder="Specify a topic to subscribe to, e.g. myTopic/1"/>
</div>
<div className="form-group col-3">
<div className="form-group col-12 col-md-3">
<label className="font-weight-bold">Max message capture</label>
<Field name="maxMessageCapture" component="input" type="number"
className="form-control"/>
......@@ -72,7 +72,7 @@ const SubscribeToTopic = ({
Configure how many messages are kept for each topic subscription.
</small>
</div>
<div className="col-2">
<div className="col-12 col-md-2">
<button onClick={() => {
startListeningTopic(url, topic)
}}
......@@ -117,13 +117,12 @@ export default styled(reduxForm({
margin-bottom: 15px;
> button {
padding: 0;
}
form {
>.form-row {
>.col-2 {
> div {
>.btn {
margin-top: 32px;
}
......
......@@ -10,6 +10,10 @@ const MessageContent = styled.div`
width: 100%;
padding: 5px 10px 5px 10px;
overflow-y: auto;
white-space: pre;
min-height: 60px;
display: flex;
align-items: center;
`;
const Message = styled.div`
border: 1px solid #ccc;
......
......@@ -2,7 +2,6 @@ import React from 'react';
import {connect} from 'react-redux';
import _ from 'lodash';
import {connect as mqttConnect, toggleMqttForm} from '../../../../actions/mqtt';
import SubscribeToTopicView from '../../components/SubscribeForm';
const mapStateToProps = ({mqtt, form}) => {
......
......@@ -14,7 +14,7 @@ class Main extends React.Component {
return (
<div className={classNames('UIKit-Main container-fluid', this.props.className)}>
<ToastContainer hideProgressBar newestOnTop closeButton={false} toastClassName="UIKit-Toast" bodyClassName="UIKit-Toast-Body" position="bottom-right"/>
<ToastContainer hideProgressBar newestOnTop closeButton={false} toastClassName="UIKit-Toast" bodyClassName="UIKit-Toast-Body" position="top-right"/>
<div className="row">
<Header/>
</div>
......
......@@ -55,7 +55,8 @@ export default (state = {
return {
...state,
isConnected: true,
isConnectInProcess: false
isConnectInProcess: false,
displayForm: false
};
case MQTT_DISCONNECTED:
return {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment