react-bootstrap#Row JavaScript Examples

The following examples show how to use react-bootstrap#Row. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Footer.js    From mern_library_nginx with MIT License 6 votes vote down vote up
Footer = () => {
   return (
      <footer>
         <Container>
            <Row>
               <Col className="text-center py-3">
                  Copyright &copy; Library {new Date().getFullYear()}
               </Col>
            </Row>
         </Container>
      </footer>
   );
}
Example #2
Source File: TextArea.jsx    From ashteki with GNU Affero General Public License v3.0 6 votes vote down vote up
render() {
        return (
            <Form.Group as={Row}>
                <Form.Label column sm='3' htmlFor={this.props.name}>
                    {this.props.label}
                </Form.Label>
                <Col className={this.props.fieldClass}>
                    <textarea
                        ref={this.props.name}
                        rows={this.props.rows}
                        className='form-control'
                        id={this.props.name}
                        placeholder={this.props.placeholder}
                        value={this.props.value}
                        onChange={this.props.onChange}
                        onBlur={this.props.onBlur}
                    />
                    {this.props.validationMessage ? (
                        <span className='help-block'>{this.props.validationMessage} </span>
                    ) : null}
                </Col>
                {this.props.children}
            </Form.Group>
        );
    }
Example #3
Source File: App.js    From real-time-web-samples with MIT License 6 votes vote down vote up
function App() {
  return (
    <Router>
      <Switch>
        <Route path="/admin">
          <NoticeForm />
        </Route>
        <Route path="/">
          <Container fluid="true" className="mt-5 pt-2">
            <Row>
              <Col md="8" className="mb-3">
                  <VideoPart />
              </Col>
              <Col md="4">
                  <ChartPart />
              </Col>
            </Row>
          </Container>
        </Route>
      </Switch>
    </Router>
  );
}
Example #4
Source File: EnrollerAnalytics.js    From SaraAlert with Apache License 2.0 6 votes vote down vote up
render() {
    return (
      <React.Fragment>
        <div className="mx-2">
          <Row className="pt-4">
            <Col md="12">
              <SystemStatistics stats={this.props.stats} />
            </Col>
            <Col md="12">
              <YourStatistics stats={this.props.stats} />
            </Col>
          </Row>
        </div>
      </React.Fragment>
    );
  }
Example #5
Source File: Page404.js    From create-sas-app with Apache License 2.0 6 votes vote down vote up
render() {
		return (
			<div className="app flex-row align-items-center">
				<Card>
					<Row className="justify-content-center">
						<Col md="6">
							<div className="clearfix">
								<h1 className="float-left display-3 mr-4">404</h1>
								<h4 className="pt-3">Oops! You're lost.</h4>
								<p className="text-muted float-left">The page you are looking for was not found.</p>
								<Button className={'mb-4'} color="info" onClick={() => {
									this.props.history.push('/')
								}}>Get back on the right path</Button>
							</div>

						</Col>
					</Row>
				</Card>
			</div>
		);
	}
Example #6
Source File: AppContainer.js    From Otto with MIT License 6 votes vote down vote up
function App() {
  return (
    <Container className={"vh-100"} fluid>
      <StateProvider>
        <NNStateProvider>
          <ModelStateProvider>
            <Row className={"headerContainer"}>
              <HeaderContainer />
            </Row>
            <Row className={"contentContainer"}>
              <ContentContainer />
            </Row>
            <WidgetContainer />
          </ModelStateProvider>
        </NNStateProvider>
      </StateProvider>
    </Container>
  );
}
Example #7
Source File: FooterComponenet.js    From aws-workshop-colony with Apache License 2.0 6 votes vote down vote up
render() {
        let uiBuildNumber = process.env.REACT_APP_BUILD_NUMBER || 'dev';
        
        let apiBuildNumber = this.props.version ? this.props.version.apiBuildNumber : '';
        let apiBuildNumberLabel = null;
        if(apiBuildNumber) {
            apiBuildNumberLabel = <div>API Build Number: <b>{apiBuildNumber}</b></div>;
        }

        let releaseNumber = this.props.version ? this.props.version.releaseNumber : '';
        let releaseNumberLabel = null;
        if(releaseNumber) {
            releaseNumberLabel = <div>Realease Number: <b>{releaseNumber}</b></div>;
        }

        return(
            <div>
                <Grid fluid={true} style={footerGridStyle}>
                    <Row>
                        <Col md={8} mdOffset={2} style={mainColStyle}>
                            <div>UI Build Number: <b>{uiBuildNumber}</b></div>
                            {apiBuildNumberLabel}
                            {releaseNumberLabel}
                        </Col>
                    </Row>
                </Grid>    
            </div>
        );
    }
Example #8
Source File: githubissueslist.js    From RC4Community with Apache License 2.0 6 votes vote down vote up
GithubIssue = ({ issue }) => {
  return (
    <Col className={`${styles.column} py-2 px-3 m-2 rounded`}>
      <Row className={`${styles.item_container}`}>
        <NavLink href={issue.html_url}>{issue.title}</NavLink>
      </Row>
      <Row className="d-flex align-items-center">
        <Col xs="auto" className={`${styles.numbers}`}>
          <span className="me-2">
            <IssueIcon />
          </span>
          {issue.state}
        </Col>
        <Col xs="auto" className={`${styles.numbers}`}>#{issue.number}</Col>
        <Col xs="auto" className={`me-3 ${styles.numbers}`}>
          <span className="me-2">
            <LikeIcon />
          </span>
          {issue.reactions['+1']}
        </Col>
        <Col xs="auto" className={`me-2 ${styles.numbers}`}>
          <span className="me-2">
            <CommentIcon />
          </span>
          {issue.comments}
        </Col>
      </Row>
    </Col>
  );
}
Example #9
Source File: LeftAuth.jsx    From hiring-channel-frontend with MIT License 6 votes vote down vote up
LeftAuth = () => {
  return (
    <>
      <div className="component-logo">
        <Container>
          <Row className="no-gutters">
            <Col md={12} className="logo-arka">
              <img src={logoArka} alt="logo-arka" />
            </Col>
            <Col md={12} className="logo-human-report">
              <img src={humanReport} alt="logo-human-report" />
            </Col>
            <Col md={12} className="title-hire">
              <Row className="no-gutters">
                <Col md={2}></Col>
                <Col md={8}>
                  <p className="hire">
                    Hire Expert freelancers for any job, online
                  </p>
                  <p className="hire-small">
                    Millions of small businesses use Freelancer to turn their
                    ideas into reality.
                  </p>
                </Col>
                <Col md={2}></Col>
              </Row>
            </Col>
          </Row>
        </Container>
      </div>
    </>
  );
}
Example #10
Source File: showHistories.js    From ErgoAuctionHouse with MIT License 6 votes vote down vote up
render() {
        return (
            <Fragment>
                <Row>
                    {this.state.boxes.map((box) => {
                        return <HistoryBox box={box}/>;
                    })}
                </Row>
            </Fragment>
        );
    }
Example #11
Source File: contact_done.js    From LearningJAMStack_Gatsby with MIT License 6 votes vote down vote up
ContactDone = () => (
    <Layout>
      <SEO title="お問い合わせ送信完了" />
      <Container fluid="md" style={{width:`80%`}}>
        <Row>
        <Col className="space"></Col>
        </Row>
        <h1 style={{fontSize:`1.2rem`}}>お問い合わせ送信完了</h1>
          <p>お問い合わせありがとうございます。弊社担当者より2~3営業日中にご連絡致します。</p>
        <h2 style={{fontSize:`1.2rem`}}>Message sent Success!</h2>
          <p>Thank you your inquiry. We will contact you by within 2~3 business days.</p>
        <Row>
        <Col className="space"></Col>
        </Row>
      </Container>
    </Layout>
)
Example #12
Source File: categoryTopicsContainer.js    From community-forum-frontend with GNU General Public License v3.0 6 votes vote down vote up
function CategoryTopicsContainer(props) {
  const topics = useSelector((state) => state.topic.get.topics);
  const dispatch = useDispatch();
  const prevCurrentCategoryRef = useRef();
  useEffect(() => {
    if (prevCurrentCategoryRef.current?.id || (prevCurrentCategoryRef.current?._id !== props.currentCategory._id)) {
      dispatch(getCategoryTopics({_id: props.currentCategory._id}));
    }
    prevCurrentCategoryRef.current = props.currentCategory;
  });
  const currentCategory = props.currentCategory._id;
  if (topics[currentCategory] !== undefined) {
    return (
      <Row>
        {topics[currentCategory].map((topic) => (
          <Col key={topic._id} md={props.columnValue}>
            <CategoryTopicCard
              entityType="topic"
              category={props.currentCategory}
              topic={topic}
            />
          </Col>
        ))}
      </Row>
    );
  } else {
    return null;
  }
}
Example #13
Source File: ChangeWorker.js    From stake-nucypher with GNU Affero General Public License v3.0 6 votes vote down vote up
function ChangeWorker(props) {
  const onSubmit = (stakeValues) => {
    if (props.onChangeWorker) {
      props.onChangeWorker(stakeValues);
    }
  };
  return <Formik onSubmit={onSubmit} initialValues={{ workerAddress: props.worker ? props.worker : '' }} validationSchema={validationSchema}>
    {({
      handleSubmit,
      handleChange,
      handleBlur,
      values,
      touched,
      isValid,
      errors,
    }) => (
      <Form onSubmit={handleSubmit}>
        <Form.Group as={Row}>
          <Form.Label column sm={2} htmlFor="worker-address">
            Worker
          </Form.Label>
          <Col sm={10}>
            <Form.Control id="worker-address" type="text" name="workerAddress" onChange={handleChange} value={values.workerAddress} />
            <Form.Control.Feedback type="invalid" style={{ display: errors.workerAddress ? 'inline' : 'none' }}>{errors.workerAddress}</Form.Control.Feedback>
          </Col>
        </Form.Group>
        <div className="d-flex justify-content-center">
          <Button type="submit"  disabled={!isValid}>Set worker</Button>
        </div>
      </Form>
    )}
  </Formik>;
}
Example #14
Source File: index.js    From Devhipster with MIT License 6 votes vote down vote up
render() {
        const { vagas, loading } = this.state;
        return (
            <>
            { loading ? <Loader /> : (
                <Container>
                    <div className='p-5'></div>
                    <h3 className="text-white">Vagas Front end</h3>
                    <Row>
                        {vagas.map(vaga => (
                            <Col md={4} key={vaga.id}>
                                <div className='p-3'></div>
                                <Card className="dark shadow-lg" style={{ minHeight: '186px', maxHeight: '224px' }}>
                                    <Card.Text className="text-success">{vaga.state ? 'ABERTA' : 'FECHADA'}</Card.Text>
                                    <Card.Link href="#">
                                        <Card.Title className="text-white">{vaga.title}</Card.Title>
                                    </Card.Link>
                                    <div className="y">{vaga.labels.map(label => (
                                        <Card.Title key={label.name} style={{float:'left'}}>
                                            <div> #{label.name} </div>
                                        </Card.Title>
                                    ))}</div>
                                </Card>
                            </Col>
                        ))}
                    </Row>
                </Container>
            ) }
            </>
        )
    }
Example #15
Source File: ChartSelector.js    From indeplot with GNU General Public License v3.0 6 votes vote down vote up
render() {
        const { selected, color, colorPickerOn } = this.state;
        const { data, labels } = this.props;
        return (
            <Container>
                <Form inline className="justify-content-center mb-3">
                    <Form.Label className="mr-2">
                        Select Chart Type
                    </Form.Label>
                    <DropdownButton className="chart-type-selector" title={selected} variant="outline-dark" onSelect={this.handleSelect}>
                        {chartTypes.map((item, i) =>
                            <Dropdown.Item key={i} eventKey={item} >{chartTypeIcons[item]}{item}</Dropdown.Item>
                        )}
                    </DropdownButton>
                    <span>&nbsp;</span>
                    <Button as="input" type="button" value="Color Picker" variant="outline-dark" onClick={this.handleColorPicker} />
                    <Button type="button" variant="outline-dark" onClick={this.refreshData} className="ml-1">Refresh</Button>
                    <Modal show={colorPickerOn} onHide={this.handleModalClose}>
                        <Modal.Header closeButton>
                            Color Picker
                        </Modal.Header>
                        <Modal.Body>
                            <SketchPicker
                                width="95%"
                                color={this.state.color}
                                onChangeComplete={this.handleColor}
                            />
                        </Modal.Body>
                    </Modal>
                </Form>
                <Row>
                    <Col>
                        <Charts chartType={selected} chartColor={color} labels={labels} title="Sample" data={data} options={{}} />
                    </Col>
                </Row>
            </Container>
        )
    }
Example #16
Source File: CoreView.js    From Rover-Mission-Control with MIT License 6 votes vote down vote up
render() {
    return (
      <div className="drawArea" ref="drawArea" >
        <Col className="Container">
        <ReactGridLayout
          layout={this.generateLayout()}
          onLayoutChange={this.onLayoutChange}
          {...this.props}
        >
          <div key={'status'} style={ styles.gridCard }>
            <StatusCard latestData={this.state.data} />
          </div>

          {this.renderGraph('g0', 'Gyro', ['gyroX', 'gyroY', 'gyroZ'])}
          <div key={'g1'} style={ styles.gridCard }>
            <ImageCard isConnected={this.state.wsOpen} />
          </div>
          {this.renderGraph('g2', 'Acc', ['accX', 'accY', 'accZ'])}
          {this.renderGraph('g3', 'Angle', ['angleX', 'angleY', 'angleZ'])}
          {this.renderGraph('g4', 'GyroAngle', ['gyroAngleX', 'gyroAngleY', 'gyroAngleZ'])}
          {this.renderGraph('g5', 'Temperature', ['temp'])}
        </ReactGridLayout>
          <Row xs={2}>
            <Toolbar
              defaultIpAddress={this.ip}
              isConnected={this.state.wsOpen}
              isConnecting={this.state.wsConnecting}
              onConnectDisconnect={this.connectDisconnectClicked}
              />
          </Row>
        </Col>
      </div>
    );
  }
Example #17
Source File: Room.js    From talk4free with MIT License 6 votes vote down vote up
render() {
    if (this.state.showModal) {
      return (
        <JoinRoomModal
          show={this.state.showModal}
          handleClose={this.showJoinRoomModal}
          lang={this.props.room.lang}
          level={this.props.room.lvl}
          sessionId={this.props.room.session_id}
          email={this.props.email}
          username={this.props.username}
          img={this.props.img}
          onUpdate={this.props.onUpdate}
        />
      );
    } else {
      return (
        <Col className="text-center room-box">
          <Row className="room-box-header">
            <p>
              <Badge variant="warning">{this.props.room.lang}</Badge>
              {this.props.room.lvl}
            </p>
          </Row>
          <Row className="room-box-body">
            <ParticipantsList participants={this.props.users} />
          </Row>
          <Row className="room-box-footer">
            <Button variant="primary" onClick={this.showJoinRoomModal}>
              <i className="material-icons">perm_phone_msg</i>Join now!
            </Button>
          </Row>
        </Col>
      );
    }
  }
Example #18
Source File: Settings.js    From serverless-media-portal with MIT License 6 votes vote down vote up
export default function Settings() {
	return (
		<Row className="mx-1 mt-4">
			<Col md={12} lg={8}>
				<ManageUsersTable />
			</Col>
			<Col md={12} lg={4}>
				<ManageTagsTable />
			</Col>
		</Row>
	);
}
Example #19
Source File: Navbar.js    From tclone with MIT License 6 votes vote down vote up
render() {
        return (
            <Navbar bg="white" sticky="top" className="py-1 border" style={{ zIndex: 10000 }}>
                <Container>
                    <Navbar.Brand as={Link} className="btn btn-naked-primary rounded-circle text-primary" to="/">
                        <img className="rounded-circle" height="45" width="45" src="/android-chrome-192x192.png" alt="logo" />
                        {/* <FontAwesomeIcon size="lg" icon={faTwitter} /> */}
                    </Navbar.Brand>
                    <Search className="form-inline w-100" />
                    <Row className="ml-auto d-none d-lg-flex justify-content-end w-50">
                        <Link to="/login" className="btn btn-outline-primary rounded-pill px-3 py-2 font-weight-bold">Log in</Link>
                        <Link to="/signup" className="btn btn-primary rounded-pill px-3 py-2 font-weight-bold ml-2">Sign up</Link>
                    </Row>
                </Container>
            </Navbar>
        )
    }
Example #20
Source File: ExploreTokensToolbar.js    From katanapools with GNU General Public License v2.0 6 votes vote down vote up
render() {
        const {isAdvancedActive, isBasicActive} = this.state;
        return (
            <div>
              <Row className="toolbar-row">
                <Col lg={4} xs={4}>
                  <div className="h5 page-header left-align-text">Explore and Swap Tokens</div>
                </Col>
                <Col lg={8} xs={8}>
                 <ButtonGroup className={`explore-tokens-toolbar-btngroup`}>
                  <Button className={`explore-toolbar-btn ${isAdvancedActive}`} onClick={this.advancedViewSelected}>
                    Advanced
                  </Button>
                  <Button className={`explore-toolbar-btn ${isBasicActive}`} onClick={this.basicViewSelected}>
                    Basic
                  </Button>
                 </ButtonGroup>
                </Col>
              </Row>
            </div>
            )
    }
Example #21
Source File: Achievements.js    From Website2020 with MIT License 5 votes vote down vote up
function Posts() {
    return (
        <>
            <div className="section landing-section ">
                <Container>
                    <Row className="d-flex justify-content-center">
                        <Col lg="4" md="12" className="text-center mb-3">
                            <Card className="achievement-card">
                                <Card.Img src={atwork} className="card-img" />
                                <Card.Body>
                                    <Card.Title>Undergraduate Roboticists</Card.Title>
                                    <p className="card-info">
                                        Selected after a comprehensive recruitment, sharing our love for
                                        robotics, we build low-cost robust AUV systems.
                                    </p>
                                </Card.Body>
                            </Card>
                        </Col>
                        <Col lg="4" md="12" className="text-center mb-3">
                            <Card className="achievement-card">
                                <Card.Img variant="top" src={desbot} className="card-img" />
                                <Card.Body>
                                    <Card.Title>Ingenious Design & Creativity</Card.Title>
                                    <p className="card-info">
                                        The designing process behind our latest vehicle, Anahita, has
                                        been appreciated at the international level.
                                    </p>
                                </Card.Body>
                            </Card>
                        </Col>
                        <Col lg="4" md="12" className="text-center mb-3">
                            <Card className="achievement-card">
                                <Card.Img variant="top" src={niotwin} className="card-img" />
                                <Card.Body>
                                    <Card.Title>National Competition Winner</Card.Title>
                                    <p className="card-info">
                                        Twice Runners’ Up (2017 & 2019) at the NIOT SAVe, organised by
                                        the National Insitute Of Ocean Technology, Chennai.
                                    </p>
                                </Card.Body>
                            </Card>
                        </Col>

                    </Row>

                </Container>
            </div>

        </>
    )
}
Example #22
Source File: index.js    From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 5 votes vote down vote up
function ActivityCreate(props) {
  const organization = useSelector((state) => state.organization);
  const { teamPermission } = useSelector((state) => state.team);
  const { selectedPlaylist } = useSelector((state) => state.playlist);
  const { permission } = organization;
  const { match } = props;
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(loadPlaylistAction(match.params.projectId, match.params.playlistId));
  }, []);
  useEffect(() => {
    if (Object.keys(teamPermission).length === 0 && selectedPlaylist?.project?.team?.id && organization?.currentOrganization?.id) {
      dispatch(getTeamPermission(organization?.currentOrganization?.id, selectedPlaylist?.project?.team?.id));
    }
  }, [teamPermission, selectedPlaylist, organization?.currentOrganization?.id]);
  return (
    <>
      <div>
        <div className="content-wrapper create-activity">
          <div className="content">
            {/* header */}
            <div className="intro-header">
              <div className="title-line">
                <h2>Edit Resource</h2>
                <div className="line" />
              </div>
              <Link to={`/org/${organization.currentOrganization?.domain}/project/${match.params.projectId}`}>
                <div className="back-playlist">
                  <FontAwesomeIcon icon="arrow-left" />
                  Back to Playlist
                </div>
              </Link>
            </div>
            {/* Tabs */}
            {(Object.keys(teamPermission).length ? teamPermission?.Team?.includes('team:edit-activity') : permission?.Activity?.includes('activity:edit')) ? (
              <Tab.Container id="left-tabs-example" defaultActiveKey="edit">
                <Row>
                  <Col sm={3}>
                    <Nav variant="pills" className="flex-column">
                      <Nav.Item>
                        <Nav.Link eventKey="edit">
                          <FontAwesomeIcon icon="edit" />
                          Edit Activity
                        </Nav.Link>
                      </Nav.Item>
                    </Nav>
                  </Col>
                  <Col sm={9}>
                    <Tab.Content>
                      <Tab.Pane eventKey="edit">
                        <ActivityWizard />
                      </Tab.Pane>
                    </Tab.Content>
                  </Col>
                </Row>
              </Tab.Container>
            ) : <Alert variant="danger" alt="">You are not authorized to edit this activity.</Alert>}
          </div>
        </div>
      </div>
    </>
  );
}
Example #23
Source File: ProfileBackground.jsx    From ashteki with GNU Affero General Public License v3.0 5 votes vote down vote up
ProfileBackground = ({
    backgrounds,
    selectedBackground,
    customBackground,
    onBackgroundSelected
}) => {
    const { t } = useTranslation();
    const uploadRef = useRef();
    const [localCustomBg, setCustomBg] = useState(
        customBackground ? `/img/bgs/${customBackground}.png` : null
    );
    const [fileError, setFileError] = useState(null);

    return (
        <Panel title={t('Game Board Background')}>
            <Row>
                {backgrounds.map((background) => (
                    <Col
                        sm={4}
                        onClick={() => onBackgroundSelected(background.name, null)}
                        key={background.name}
                    >
                        <img
                            className={classNames('img-fluid', {
                                selected: selectedBackground === background.name
                            })}
                            src={background.imageUrl}
                        />
                        <span className='bg-label'>{background.label}</span>
                    </Col>
                ))}
                <Col sm={4}>
                    <img
                        className={classNames('img-fluid custom-bg', {
                            selected: selectedBackground === 'custom'
                        })}
                        src={localCustomBg}
                        onClick={() => uploadRef.current?.click()}
                    />
                    <Form.Control
                        name='avatar'
                        type='file'
                        accept='image/*'
                        hidden
                        onChange={(event) => {
                            if (
                                !event.currentTarget ||
                                !event.currentTarget.files ||
                                event.currentTarget.files.length === 0
                            ) {
                                return;
                            }

                            const file = event.currentTarget.files[0];

                            if (file.type !== 'image/png' && file.type !== 'image/jpeg') {
                                setFileError('File must be an image');
                                setCustomBg(null);
                            } else if (file.size / 1024 / 1024 > 5) {
                                setFileError('File must be less than 5MB');
                                setCustomBg(null);
                            } else {
                                setCustomBg(URL.createObjectURL(file));
                                onBackgroundSelected('custom', file);
                                setFileError(false);
                            }
                        }}
                        ref={uploadRef}
                    ></Form.Control>
                    {fileError && <span className='text-danger bg-error'>{fileError}</span>}
                    <span className='bg-label'>Custom</span>
                </Col>
            </Row>
        </Panel>
    );
}
Example #24
Source File: MonitoreeFlow.js    From SaraAlert with Apache License 2.0 5 votes vote down vote up
render() {
    return (
      <React.Fragment>
        <Card className="card-square text-center">
          <Card.Header as="h5" className="text-left">
            Monitoree Flow Over Time
          </Card.Header>
          <Card.Body className="card-body">
            <Row className="mx-md-5 mx-lg-0">
              {/* Any height: 0px <tr>s are to ensure proper Bootstrap striping. */}
              <Table striped borderless>
                <thead>
                  <tr>
                    <th className="py-0"></th>
                    <th className="py-0"> Last 24 Hours </th>
                    <th className="py-0"> Last 14 Days </th>
                    <th className="py-0"> Total </th>
                  </tr>
                </thead>
                <tbody>
                  <tr style={{ height: '0px' }}></tr>
                  <tr>
                    <td className="py-1 font-weight-bold text-left">
                      <u>INCOMING</u>{' '}
                    </td>
                  </tr>
                  <tr>
                    <td className="text-right">NEW ENROLLMENTS</td>
                    <td>{this.data_last_24_hours.new_enrollments}</td>
                    <td>{this.data_last_14_days.new_enrollments}</td>
                    <td>{this.data_total.new_enrollments}</td>
                  </tr>
                  <tr>
                    <td className="text-right">TRANSFERRED IN</td>
                    <td>{this.data_last_24_hours.transferred_in}</td>
                    <td>{this.data_last_14_days.transferred_in}</td>
                    <td>{this.data_total.transferred_in}</td>
                  </tr>
                  <tr style={{ height: '0px' }}></tr>
                  <tr>
                    <td className="py-1 font-weight-bold text-left">
                      <u>OUTGOING</u>{' '}
                    </td>
                  </tr>
                  <tr className="pt-5">
                    <td className="text-right">CLOSED</td>
                    <td>{this.data_last_24_hours.closed}</td>
                    <td>{this.data_last_14_days.closed}</td>
                    <td>{this.data_total.closed}</td>
                  </tr>
                  <tr>
                    <td className="text-right">TRANSFERRED OUT</td>
                    <td>{this.data_last_24_hours.transferred_out}</td>
                    <td>{this.data_last_14_days.transferred_out}</td>
                    <td>{this.data_total.transferred_out}</td>
                  </tr>
                </tbody>
              </Table>
            </Row>
          </Card.Body>
        </Card>
      </React.Fragment>
    );
  }
Example #25
Source File: Login.js    From create-sas-app with Apache License 2.0 5 votes vote down vote up
render() {
		return (
			<div className="login">
				<div className="flex justify-content-center align-items-center">
					<Card className={'w100 mb0'}>
						<Row className="loginForm">
							<Col md={12}>
								<Form noValidate validated={this.state.validated}>
									<h1>Login</h1>
									<p className="text-muted">Sign In to your account</p>
									<FormGroup>
										<InputGroup>
											<InputGroup.Prepend><i className={'fas fa-user'}/></InputGroup.Prepend>
											<Form.Control
												name={'username'}
												className={`textInput`}
												placeholder={'Username'}
												value={this.state.username}
												onChange={this.onInputChange}
												required
											/>
										</InputGroup>
									</FormGroup>
									<FormGroup>
										<InputGroup>
											<InputGroup.Prepend><i className={'fas fa-lock'}/></InputGroup.Prepend>
											<Form.Control
												name={'password'}
												placeholder={'Password'}
												type={'password'}
												value={this.state.password}
												onChange={this.onInputChange}
												required
											/>
										</InputGroup>
									</FormGroup>
									<Row>
										<Col md={12}>
											<Button
												onClick={this.login}
												bsstyle={'primary'}
												disabled={this.validateEmail() === 'error' || this.validatePassword() === 'error' || !this.state.username || !this.state.password}
												className={'pull-right'}
											>Login</Button>
											{this.state.error && <div className={'text-danger'}>{this.state.error}</div>}
										</Col>
									</Row>
								</Form>
							</Col>
						</Row>
					</Card>
				</div>
			</div>
		);
	}
Example #26
Source File: UserStaff.js    From GB-GCGC with MIT License 5 votes vote down vote up
render(){
	    return (
	    	<div style={{backgroundColor:'#C7CCDB'}}>
	        	<Container>
	            	<Row>
	            		<Col align="left">
				        	<NavLink tag={Redirect} to={"/userstaffAdd"}>
				            	<Button	style={{backgroundColor: "#2A324B",color: "white",borderColor: "#2A324B"}}>
					            	Add Staff
					        	</Button>
			            	</NavLink>
			            </Col>
	            	</Row>
		            {/*<Row className="pt-3 pb-3">
		            	<Col md="6"style={{"text-align":"initial"}}>
							Show
							<span style={{"padding":"10px"}}>
								<select value={this.state.show} onChange={this.onChangeshow}>
										<option value="0">All</option>
										<option value="5">5</option>
										<option value="10">10</option>
										<option value="25">25</option>
										<option value="50">50</option>
										<option value="75">75</option>
										<option value="100">100</option>
									</select>
							</span>
		                	Entities
		                </Col>
		            </Row>*/}
		           	<Row >
		           		<Col align="left" className="pt-1">
                			<div>
                				<ReactHTMLTableToExcel  
                    				className="btn btn-secondary"  
                    				table="Data"  
                    				filename="Filtered Students"  
                    				sheet="Sheet1"  
                    				buttonText="EXCEL"
                    				style={{backgroundColor:"#2A324B",color:"white",borderColor:"#2A324B"}} 
                    			/>
                    		</div>
                    	</Col>
                    	<Col>
        					<div align="right">Search:<input type="text" name="search" onChange={this.onChangesearch}/></div>
        				</Col>
	            	</Row>
	            	<br/>
		            <Row>
			            <Table id="Data" responsive striped style={{backgroundColor:'white'}}>
				            <thead style={{backgroundColor:'#2A324B',color:'white'}}>
				                <tr>
				        		    <th>Emp_Id</th>
				                    <th>Emp_Name</th>
				                    <th>Email</th>
				                    <th>Campus</th>
				                    <th>Department</th>
				                    <th>Mobile</th>
				                    <th>Action</th>
				                </tr>
				            </thead>
				            <tbody>
				              	{this.StaffList()}
			                </tbody>
			            </Table>
	            	</Row>
	            </Container>
	        </div>
	    )
	}
Example #27
Source File: colaboraInfo.jsx    From frenalacurvamx with MIT License 5 votes vote down vote up
ColaboraInfo = () => {
  return (
    <Container>
      <Row>
        <Col md={8}>
          <div style={{ marginBottom: '38px', marginTop: '125px' }}>
            <h2
              style={{ fontFamily: "'Raleway', sans-serif", textAlign: 'start', fontSize: '50px', fontWeight: 'bold' }}
            >
              Comunidad
            </h2>
            <p style={{ fontSize: '22px', textAlign: 'start', marginTop: '5px', color: '#FF3047', fontWeight: '600' }}>
              Colabora + Comparte + Comunica
            </p>
          </div>
          <div style={{ fontSize: '18px', textAlign: 'start', marginBottom: '23px' }}>
            <h4>
              ¿Quieres dar una clase online?, ¿compartir el directorio de negocios locales?, ¿formar parte de un grupo
              creativo para enfrentar la contingencia? Aquí las personas publican recursos, ideas y proyectos para tejer
              una red ciudadana.
            </h4>
            <h4>
              <div>
                Somos <span style={{ color: 'red', fontWeight: 'bold' }}>432</span> personas que hemos subido{' '}
                <span style={{ color: 'red', fontWeight: 'bold' }}>302</span> publicaciones.{' '}
              </div>
            </h4>
          </div>
          <a href="https://frenalacurvamx.typeform.com/to/gYdVBR" target="blank">
            <button
              style={{ textAlign: 'start', paddingLeft: '40px', fontSize: '16px', height: '44px' }}
              className=" column button cta is-rounded primary-btn raised"
            >
              Comparte Contenido
            </button>
          </a>
        </Col>
        <Col>
          <img style={{ marginTop: '100px', marginLeft: '70px' }} src={ForoComunidad} />
        </Col>
      </Row>
    </Container>
  )
}
Example #28
Source File: Chat.js    From React-Messenger-App with MIT License 5 votes vote down vote up
render() {
    // Renders the chat messages
    const messages = this.state.messages;
    const message = messages.map(item => {
        return (
            <Grid>
                {message}
                <Row className="show-grid">
                    <Col xs={12}>
                        <div className="chatmessage-container">
                            <div key={item.id} className="message-box">
                                <p><strong>{item.username}</strong></p>
                                <p>{item.message}</p>
                                </div>
                                </div>
                            </Col>
                        </Row>
                    </Grid>
                )
            })
            // Renders the input form where the message to be sent is typed.
            return (
                <Grid>
                    <Row className="show-grid">
                        <Col xs={12}>
                        {message}
                        <div className="chat-container">
                            <form onSubmit={this.sendMessage}>
                                <Col xs={5} xsOffset={3}>
                                    <FormControl
                                        type="text"
                                        value={this.state.value}
                                        placeholder="Enter message here"
                                        onChange={this.handleChange}
                                    />
                                </Col>
                                <Col xs={4}>
                                    <input className="btn btn-primary" value="Send" type="submit" />
                                    </Col>
                                    </form>
                                    <h4 className="text-center">Welcome, {this.state.username}</h4>
                                    <h5 className="text-center">Begin chatting here.</h5>
                                </div>
                            </Col>
                        </Row>
                    </Grid>
                )
            }
Example #29
Source File: Stats.js    From plenty-interface with GNU General Public License v3.0 5 votes vote down vote up
Stats = (props) => {
  const loading = useMemo(() => {
    return (
      props.valueLocked == null || props.plentyInWallet == null || props.plentyToHarvest == null
    );
  }, [props.plentyInWallet, props.plentyToHarvest, props.valueLocked]);

  return (
    <div className={clsx('p-3', 'bg-themed', styles.container)}>
      <Row className="p-1">
        <Col xs={12}>
          <span className="d-flex font-weight-bold m-0 py-3">
            Your Stats
            <Image className="ml-2" src={greenBullet} />
          </span>
          <hr />
        </Col>
      </Row>

      <Row className="p-1">
        <Col xs={6}>
          <Label
            text={
              loading ? null : (
                <NumericLabel params={currencyOptionsWithSymbol}>
                  {props.valueLocked.toFixed(0)}
                </NumericLabel>
              )
            }
            subText={'Total value locked'}
            icon={dollar}
            iconClass={'mt-1'}
            className={'pt-1'}
          />
        </Col>
        <Col xs={6}>
          <Label
            text={loading ? null : `${props.plentyToHarvest?.toFixed(5)}`}
            subText={'PLENTY to harvest'}
            icon={plentyToHarvest}
            iconClass={'mt-1'}
          />
        </Col>
      </Row>

      <hr className="mt-0" />
      <Row className="p-1">
        <Col xs={6}>
          <Label
            text={loading ? null : `${props.plentyInWallet?.toFixed(5)}`}
            subText={'PLENTY in wallet'}
            icon={plentyInWallet}
            iconClass={'mt-1'}
          />
        </Col>
        <Col xs={6}>
          <Label
            text={loading ? null : `${props.xplentyBalance?.toFixed(5)}`}
            subText={'xPLENTY in wallet'}
            icon={xplentyIcon}
            iconClass={'mt-1'}
          />
        </Col>
      </Row>
      <Row className="p-1 mt-1">
        <Col>
          <Button
            onClick={props.harvestAll}
            color={'primary'}
            className={'w-100'}
            disabled={false}
            loading={props.harvestAllOperations.loading}
          >
            Harvest all
          </Button>
        </Col>
      </Row>
    </div>
  );
}