reactstrap#CardImg JavaScript Examples

The following examples show how to use reactstrap#CardImg. 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: CardItem.js    From ReactJS-Projects with MIT License 6 votes vote down vote up
CardItem = ({ product, addToCart }) => {
    return (
        <Card className='mt-2 mb-1'>
            <CardImg
                top
                height="300"
                width="100%"
                src={product.mediumImage}
            />
            <CardBody className='text-center'>
                <CardTitle>Name: {product.productName}</CardTitle>
                <CardText className='secondary'>Price: $ {product.productPrice}</CardText>
                <Button color='info' onClick={() => addToCart(product)} >Add to cart</Button>
            </CardBody>
        </Card>
    )
}
Example #2
Source File: ShowCard.js    From master-en-code-g2 with MIT License 6 votes vote down vote up
ShowCard = ({ id, image, summary, name }) => {
  return (
    <div>
      <Link to={`shows/${id}`} style={{ textDecoration: 'none' }}>
        <Card style={{ width: '250px' }}>
          <CardImg top width="100%" src={ image } alt="Show Image" />
          <CardBody>
            <CardTitle tag="h5">{ name }</CardTitle>
            <CardSubtitle tag="h6" className="mb-2 text-muted">{ id }</CardSubtitle>
            <CardText>{ summary }</CardText>
          </CardBody>
        </Card>
      </Link>
    </div>
  );
}
Example #3
Source File: article.js    From web-frontend with MIT License 6 votes vote down vote up
Article = (props) => {
  return (
    <div id="article">
      <Card className="team-thumb" onClick={(e) => handleClick(e, props.url)}>
        <CardImg
          top
          width="100%"
          src={props.img}
          // width="264px"
          alt="Card image cap"
        />
        <CardBody>
          <CardTitle>
            <h3>{props.title}</h3>
          </CardTitle>
        </CardBody>
      </Card>
    </div>
  );
}
Example #4
Source File: ProductCard.js    From Merch-Dropper-fe with MIT License 5 votes vote down vote up
ProductCard = ({ product, addToCart }) => {
  const [isAdded, setIsAdded] = useState(false);
  console.log("product", product);
  const showAdded = () => {
    setIsAdded(true);
    setTimeout(() => {
      setIsAdded(false);
    }, 2000);
  };
  return (
    <Fragment>
      <Col xs="6" lg="4">
        <Card className="merchCard m-1">
          <CardImg
            top
            width="100%"
            height="auto"
            src={product.fullSizeURL}
            alt="T-shirt"
          />
          <CardBody className="product-card-padding">
            <CardTitle className="h5 text-center">{product.design}</CardTitle>
            <CardText>
              <small className="text-muted">{product.name}</small>
            </CardText>
            <CardText>${product.price}</CardText>
            <button
              className="btn-primary cardBtn"
              size="sm"
              onClick={() => {
                addToCart(product);
                showAdded();
              }}
            >
              {isAdded ? "Added" : "Add to Cart"}
            </button>
          </CardBody>
        </Card>
      </Col>
    </Fragment>
  );
}
Example #5
Source File: index.js    From DMS_React with GNU Affero General Public License v3.0 5 votes vote down vote up
CafeCard = () => {
  return (
    <Card className="shadow border-0">
      <CardImg top width="100%" src="https://via.placeholder.com/365x170" alt="Cafe Basilico"/>
      <CardBody>
        <h2 className="mb-0">Cafe Basilico</h2>
        <div className="d-flex align-items-center my-2">
          <StarRatingComponent
            className="h2 mb-0"
            name=""
            value={4.5}
            starCount={5}

            editing={false}/>
          <span className="d-inline-block text-muted h4 ml-2 mb-0"><small>4.5 (52)</small></span>
        </div>
        <h4 className="font-weight-light">
          Italian Cafe
        </h4>
        <p className="card-text text-muted">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
        </p>
        <hr/>
        <h3 className="mb-0">Tonight's availability</h3>
      </CardBody>

      <div className="card-mt-footer">
        <div>
          <Button size="small" className="jr-btn jr-btn-sm" color="default">
            <i className="zmdi zmdi-time zmdi-hc-lg"/>
            <span>Time</span>
          </Button>

          <Button size="small" className="jr-btn jr-btn-sm" color="default">
            <span>7:30 PM</span>
          </Button>

          <Button size="small" className="jr-btn jr-btn-sm" color="default">
            <span>9:00 PM</span>
          </Button>
        </div>
        <Button size="small" className="jr-btn jr-btn-sm" color="primary">
          <span>RESERVE</span>
        </Button>
      </div>
    </Card>
  );
}
Example #6
Source File: Login.js    From id.co.moonlay-eworkplace-admin-web with MIT License 5 votes vote down vote up
render() {
    return (
      <div className="app flex-row align-items-center">
        <Container>
          <Row className="justify-content-center">
            <Col md="8">
              <CardGroup>
                <Card className="p-4">
                  <CardBody>
                    <Form>
                      <h1>Login</h1>
                      <p className="text-muted">Sign In to your account</p>
                      <InputGroup className="mb-3">
                        <InputGroupAddon addonType="prepend">
                          <InputGroupText>
                            <i className="icon-user"></i>
                          </InputGroupText>
                        </InputGroupAddon>
                        <Input type="text" required onChange={this.handleUsername} placeholder="Username" autoComplete="username" />
                      </InputGroup>
                      <font color="red">{this.state.messageErrorUsername}</font>
                      <InputGroup className="mb-4">
                        <InputGroupAddon addonType="prepend">
                          <InputGroupText>
                            <i className="icon-lock"></i>
                          </InputGroupText>
                        </InputGroupAddon>
                        <Input type="password" onChange={this.handlePassword} placeholder="Password" autoComplete="current-password" />
                      </InputGroup>
                      <font color="red">{this.state.messageErrorPassword}</font>
                      <Row>
                        <Col xs="6">
                          <Button color="primary" className="px-4" onClick={this.onHandleSubmit}>Login</Button>
                        </Col>
                      </Row>
                    </Form>
                  </CardBody>
                </Card>
                <Card body className="justify-content-center" style={{ width: '44%', backgroundColor: '#1A446D', }}>
                <CardImg src={Logo} alt="Logo" style={{padding:'auto'}}  />
                </Card>
              </CardGroup>
            </Col>
          </Row>
        </Container>
      </div>
    );
  }
Example #7
Source File: SlickSlider.js    From Blogs with MIT License 5 votes vote down vote up
SlickSlider = () => {

  // const data = useStaticQuery(graphql`
  //   query categorySliderQuery {
  //     allMarkdownRemark {
  //       edges {
  //         node {
  //           frontmatter {
  //             tags
  //             templateKey
  //           }
  //         }
  //       }
  //     }
  //   }
  // `);

  // let tagsArray = [];
  // data.allMarkdownRemark.edges.forEach((edge) => {
  //   if (edge.node.frontmatter.templateKey === "blog-post")
  //     edge.node.frontmatter.tags.forEach((tag) => tagsArray.push(tag));
  // });

  // var finalTagsArray = _.uniq(tagsArray);
  
  var finalTagsArray = TagsYAML.tagslist

  const renderFallbackImg = (e) => {
    // Will replace broken image
    e.target.src = "https://via.placeholder.com/200?text=."
  }

  return (
    <Fragment>
      <div className="categoryHeader">Categories</div>
      <div className="underline"></div>
      <div className="slider-category">
        <div className="slider-equalizer">
          <Slider {...settings}>
            {finalTagsArray.map((tag) => (
              <div className="category">
                <Link to={"/categories/" + _.kebabCase(tag.name)}>
                  <div className="overlay">{_.startCase(tag.name)}</div>
                </Link>
                <CardImg
                  width="100%"
                  src={tag.icon}
                  alt={tag.name}
                  className="categoryImg"
                  onError={renderFallbackImg}
                ></CardImg>
              </div>
            ))}
          </Slider>
        </div>
      </div>
    </Fragment>
  );
}
Example #8
Source File: Landing.jsx    From nodejs-rest-api-boilerplate with MIT License 4 votes vote down vote up
render() {
    return (
      <>
        <DemoNavbar />
        <main ref="main">
          <div className="position-relative">
            {/* shape Hero */}
            <section className="section section-lg section-shaped pb-250">
              <div className="shape shape-style-1 shape-default">
                <span />
                <span />
                <span />
                <span />
                <span />
                <span />
                <span />
                <span />
                <span />
              </div>
              <Container className="py-lg-md d-flex">
                <div className="col px-0">
                  <Row>
                    <Col lg="6">
                      <h1 className="display-3 text-white">
                        A beautiful Design System{" "}
                        <span>completed with examples</span>
                      </h1>
                      <p className="lead text-white">
                        The design system comes with four pre-built pages to
                        help you get started faster. You can change the text and
                        images and you're good to go.
                      </p>
                      <div className="btn-wrapper">
                        <Button
                          className="btn-icon mb-3 mb-sm-0"
                          color="info"
                          href="https://demos.creative-tim.com/argon-design-system-react/#/documentation/alerts?ref=adsr-landing-page"
                        >
                          <span className="btn-inner--icon mr-1">
                            <i className="fa fa-code" />
                          </span>
                          <span className="btn-inner--text">Components</span>
                        </Button>
                        <Button
                          className="btn-white btn-icon mb-3 mb-sm-0 ml-1"
                          color="default"
                          href="https://www.creative-tim.com/product/argon-design-system-react?ref=adsr-landing-page"
                        >
                          <span className="btn-inner--icon mr-1">
                            <i className="ni ni-cloud-download-95" />
                          </span>
                          <span className="btn-inner--text">
                            Download React
                          </span>
                        </Button>
                      </div>
                    </Col>
                  </Row>
                </div>
              </Container>
              {/* SVG separator */}
              <div className="separator separator-bottom separator-skew">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  preserveAspectRatio="none"
                  version="1.1"
                  viewBox="0 0 2560 100"
                  x="0"
                  y="0"
                >
                  <polygon
                    className="fill-white"
                    points="2560 0 2560 100 0 100"
                  />
                </svg>
              </div>
            </section>
            {/* 1st Hero Variation */}
          </div>
          <section className="section section-lg pt-lg-0 mt--200">
            <Container>
              <Row className="justify-content-center">
                <Col lg="12">
                  <Row className="row-grid">
                    <Col lg="4">
                      <Card className="card-lift--hover shadow border-0">
                        <CardBody className="py-5">
                          <div className="icon icon-shape icon-shape-primary rounded-circle mb-4">
                            <i className="ni ni-check-bold" />
                          </div>
                          <h6 className="text-primary text-uppercase">
                            Download Argon
                          </h6>
                          <p className="description mt-3">
                            Argon is a great free UI package based on Bootstrap
                            4 that includes the most important components and
                            features.
                          </p>
                          <div>
                            <Badge color="primary" pill className="mr-1">
                              design
                            </Badge>
                            <Badge color="primary" pill className="mr-1">
                              system
                            </Badge>
                            <Badge color="primary" pill className="mr-1">
                              creative
                            </Badge>
                          </div>
                          <Button
                            className="mt-4"
                            color="primary"
                            href="#pablo"
                            onClick={e => e.preventDefault()}
                          >
                            Learn more
                          </Button>
                        </CardBody>
                      </Card>
                    </Col>
                    <Col lg="4">
                      <Card className="card-lift--hover shadow border-0">
                        <CardBody className="py-5">
                          <div className="icon icon-shape icon-shape-success rounded-circle mb-4">
                            <i className="ni ni-istanbul" />
                          </div>
                          <h6 className="text-success text-uppercase">
                            Build Something
                          </h6>
                          <p className="description mt-3">
                            Argon is a great free UI package based on Bootstrap
                            4 that includes the most important components and
                            features.
                          </p>
                          <div>
                            <Badge color="success" pill className="mr-1">
                              business
                            </Badge>
                            <Badge color="success" pill className="mr-1">
                              vision
                            </Badge>
                            <Badge color="success" pill className="mr-1">
                              success
                            </Badge>
                          </div>
                          <Button
                            className="mt-4"
                            color="success"
                            href="#pablo"
                            onClick={e => e.preventDefault()}
                          >
                            Learn more
                          </Button>
                        </CardBody>
                      </Card>
                    </Col>
                    <Col lg="4">
                      <Card className="card-lift--hover shadow border-0">
                        <CardBody className="py-5">
                          <div className="icon icon-shape icon-shape-warning rounded-circle mb-4">
                            <i className="ni ni-planet" />
                          </div>
                          <h6 className="text-warning text-uppercase">
                            Prepare Launch
                          </h6>
                          <p className="description mt-3">
                            Argon is a great free UI package based on Bootstrap
                            4 that includes the most important components and
                            features.
                          </p>
                          <div>
                            <Badge color="warning" pill className="mr-1">
                              marketing
                            </Badge>
                            <Badge color="warning" pill className="mr-1">
                              product
                            </Badge>
                            <Badge color="warning" pill className="mr-1">
                              launch
                            </Badge>
                          </div>
                          <Button
                            className="mt-4"
                            color="warning"
                            href="#pablo"
                            onClick={e => e.preventDefault()}
                          >
                            Learn more
                          </Button>
                        </CardBody>
                      </Card>
                    </Col>
                  </Row>
                </Col>
              </Row>
            </Container>
          </section>
          <section className="section section-lg">
            <Container>
              <Row className="row-grid align-items-center">
                <Col className="order-md-2" md="6">
                  <img
                    alt="..."
                    className="img-fluid floating"
                    src={require("../../assets/img/theme/promo-1.png")}
                  />
                </Col>
                <Col className="order-md-1" md="6">
                  <div className="pr-md-5">
                    <div className="icon icon-lg icon-shape icon-shape-success shadow rounded-circle mb-5">
                      <i className="ni ni-settings-gear-65" />
                    </div>
                    <h3>Awesome features</h3>
                    <p>
                      The kit comes with three pre-built pages to help you get
                      started faster. You can change the text and images and
                      you're good to go.
                    </p>
                    <ul className="list-unstyled mt-5">
                      <li className="py-2">
                        <div className="d-flex align-items-center">
                          <div>
                            <Badge
                              className="badge-circle mr-3"
                              color="success"
                            >
                              <i className="ni ni-settings-gear-65" />
                            </Badge>
                          </div>
                          <div>
                            <h6 className="mb-0">
                              Carefully crafted components
                            </h6>
                          </div>
                        </div>
                      </li>
                      <li className="py-2">
                        <div className="d-flex align-items-center">
                          <div>
                            <Badge
                              className="badge-circle mr-3"
                              color="success"
                            >
                              <i className="ni ni-html5" />
                            </Badge>
                          </div>
                          <div>
                            <h6 className="mb-0">Amazing page examples</h6>
                          </div>
                        </div>
                      </li>
                      <li className="py-2">
                        <div className="d-flex align-items-center">
                          <div>
                            <Badge
                              className="badge-circle mr-3"
                              color="success"
                            >
                              <i className="ni ni-satisfied" />
                            </Badge>
                          </div>
                          <div>
                            <h6 className="mb-0">
                              Super friendly support team
                            </h6>
                          </div>
                        </div>
                      </li>
                    </ul>
                  </div>
                </Col>
              </Row>
            </Container>
          </section>
          <section className="section bg-secondary">
            <Container>
              <Row className="row-grid align-items-center">
                <Col md="6">
                  <Card className="bg-default shadow border-0">
                    <CardImg
                      alt="..."
                      src={require("../../assets/img/theme/img-1-1200x1000.jpg")}
                      top
                    />
                    <blockquote className="card-blockquote">
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        className="svg-bg"
                        preserveAspectRatio="none"
                        viewBox="0 0 583 95"
                      >
                        <polygon
                          className="fill-default"
                          points="0,52 583,95 0,95"
                        />
                        <polygon
                          className="fill-default"
                          opacity=".2"
                          points="0,42 583,95 683,0 0,95"
                        />
                      </svg>
                      <h4 className="display-3 font-weight-bold text-white">
                        Design System
                      </h4>
                      <p className="lead text-italic text-white">
                        The Arctic Ocean freezes every winter and much of the
                        sea-ice then thaws every summer, and that process will
                        continue whatever happens.
                      </p>
                    </blockquote>
                  </Card>
                </Col>
                <Col md="6">
                  <div className="pl-md-5">
                    <div className="icon icon-lg icon-shape icon-shape-warning shadow rounded-circle mb-5">
                      <i className="ni ni-settings" />
                    </div>
                    <h3>Our customers</h3>
                    <p className="lead">
                      Don't let your uses guess by attaching tooltips and
                      popoves to any element. Just make sure you enable them
                      first via JavaScript.
                    </p>
                    <p>
                      The kit comes with three pre-built pages to help you get
                      started faster. You can change the text and images and
                      you're good to go.
                    </p>
                    <p>
                      The kit comes with three pre-built pages to help you get
                      started faster. You can change the text and images and
                      you're good to go.
                    </p>
                    <a
                      className="font-weight-bold text-warning mt-5"
                      href="#pablo"
                      onClick={e => e.preventDefault()}
                    >
                      A beautiful UI Kit for impactful websites
                    </a>
                  </div>
                </Col>
              </Row>
            </Container>
          </section>
          <section className="section pb-0 bg-gradient-warning">
            <Container>
              <Row className="row-grid align-items-center">
                <Col className="order-lg-2 ml-lg-auto" md="6">
                  <div className="position-relative pl-md-5">
                    <img
                      alt="..."
                      className="img-center img-fluid"
                      src={require("../../assets/img/ill/ill-2.svg")}
                    />
                  </div>
                </Col>
                <Col className="order-lg-1" lg="6">
                  <div className="d-flex px-3">
                    <div>
                      <div className="icon icon-lg icon-shape bg-gradient-white shadow rounded-circle text-primary">
                        <i className="ni ni-building text-primary" />
                      </div>
                    </div>
                    <div className="pl-4">
                      <h4 className="display-3 text-white">Modern Interface</h4>
                      <p className="text-white">
                        The Arctic Ocean freezes every winter and much of the
                        sea-ice then thaws every summer, and that process will
                        continue whatever.
                      </p>
                    </div>
                  </div>
                  <Card className="shadow shadow-lg--hover mt-5">
                    <CardBody>
                      <div className="d-flex px-3">
                        <div>
                          <div className="icon icon-shape bg-gradient-success rounded-circle text-white">
                            <i className="ni ni-satisfied" />
                          </div>
                        </div>
                        <div className="pl-4">
                          <h5 className="title text-success">
                            Awesome Support
                          </h5>
                          <p>
                            The Arctic Ocean freezes every winter and much of
                            the sea-ice then thaws every summer, and that
                            process will continue whatever.
                          </p>
                          <a
                            className="text-success"
                            href="#pablo"
                            onClick={e => e.preventDefault()}
                          >
                            Learn more
                          </a>
                        </div>
                      </div>
                    </CardBody>
                  </Card>
                  <Card className="shadow shadow-lg--hover mt-5">
                    <CardBody>
                      <div className="d-flex px-3">
                        <div>
                          <div className="icon icon-shape bg-gradient-warning rounded-circle text-white">
                            <i className="ni ni-active-40" />
                          </div>
                        </div>
                        <div className="pl-4">
                          <h5 className="title text-warning">
                            Modular Components
                          </h5>
                          <p>
                            The Arctic Ocean freezes every winter and much of
                            the sea-ice then thaws every summer, and that
                            process will continue whatever.
                          </p>
                          <a
                            className="text-warning"
                            href="#pablo"
                            onClick={e => e.preventDefault()}
                          >
                            Learn more
                          </a>
                        </div>
                      </div>
                    </CardBody>
                  </Card>
                </Col>
              </Row>
            </Container>
            {/* SVG separator */}
            <div className="separator separator-bottom separator-skew zindex-100">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                preserveAspectRatio="none"
                version="1.1"
                viewBox="0 0 2560 100"
                x="0"
                y="0"
              >
                <polygon
                  className="fill-white"
                  points="2560 0 2560 100 0 100"
                />
              </svg>
            </div>
          </section>
          <section className="section section-lg">
            <Container>
              <Row className="justify-content-center text-center mb-lg">
                <Col lg="8">
                  <h2 className="display-3">The amazing Team</h2>
                  <p className="lead text-muted">
                    According to the National Oceanic and Atmospheric
                    Administration, Ted, Scambos, NSIDClead scentist, puts the
                    potentially record maximum.
                  </p>
                </Col>
              </Row>
              <Row>
                <Col className="mb-5 mb-lg-0" lg="3" md="6">
                  <div className="px-4">
                    <img
                      alt="..."
                      className="rounded-circle img-center img-fluid shadow shadow-lg--hover"
                      src={require("../../assets/img/theme/team-1-800x800.jpg")}
                      style={{ width: "200px" }}
                    />
                    <div className="pt-4 text-center">
                      <h5 className="title">
                        <span className="d-block mb-1">Ryan Tompson</span>
                        <small className="h6 text-muted">Web Developer</small>
                      </h5>
                      <div className="mt-3">
                        <Button
                          className="btn-icon-only rounded-circle"
                          color="warning"
                          href="#pablo"
                          onClick={e => e.preventDefault()}
                        >
                          <i className="fa fa-twitter" />
                        </Button>
                        <Button
                          className="btn-icon-only rounded-circle ml-1"
                          color="warning"
                          href="#pablo"
                          onClick={e => e.preventDefault()}
                        >
                          <i className="fa fa-facebook" />
                        </Button>
                        <Button
                          className="btn-icon-only rounded-circle ml-1"
                          color="warning"
                          href="#pablo"
                          onClick={e => e.preventDefault()}
                        >
                          <i className="fa fa-dribbble" />
                        </Button>
                      </div>
                    </div>
                  </div>
                </Col>
                <Col className="mb-5 mb-lg-0" lg="3" md="6">
                  <div className="px-4">
                    <img
                      alt="..."
                      className="rounded-circle img-center img-fluid shadow shadow-lg--hover"
                      src={require("../../assets/img/theme/team-2-800x800.jpg")}
                      style={{ width: "200px" }}
                    />
                    <div className="pt-4 text-center">
                      <h5 className="title">
                        <span className="d-block mb-1">Romina Hadid</span>
                        <small className="h6 text-muted">
                          Marketing Strategist
                        </small>
                      </h5>
                      <div className="mt-3">
                        <Button
                          className="btn-icon-only rounded-circle"
                          color="primary"
                          href="#pablo"
                          onClick={e => e.preventDefault()}
                        >
                          <i className="fa fa-twitter" />
                        </Button>
                        <Button
                          className="btn-icon-only rounded-circle ml-1"
                          color="primary"
                          href="#pablo"
                          onClick={e => e.preventDefault()}
                        >
                          <i className="fa fa-facebook" />
                        </Button>
                        <Button
                          className="btn-icon-only rounded-circle ml-1"
                          color="primary"
                          href="#pablo"
                          onClick={e => e.preventDefault()}
                        >
                          <i className="fa fa-dribbble" />
                        </Button>
                      </div>
                    </div>
                  </div>
                </Col>
                <Col className="mb-5 mb-lg-0" lg="3" md="6">
                  <div className="px-4">
                    <img
                      alt="..."
                      className="rounded-circle img-center img-fluid shadow shadow-lg--hover"
                      src={require("../../assets/img/theme/team-3-800x800.jpg")}
                      style={{ width: "200px" }}
                    />
                    <div className="pt-4 text-center">
                      <h5 className="title">
                        <span className="d-block mb-1">Alexander Smith</span>
                        <small className="h6 text-muted">UI/UX Designer</small>
                      </h5>
                      <div className="mt-3">
                        <Button
                          className="btn-icon-only rounded-circle"
                          color="info"
                          href="#pablo"
                          onClick={e => e.preventDefault()}
                        >
                          <i className="fa fa-twitter" />
                        </Button>
                        <Button
                          className="btn-icon-only rounded-circle ml-1"
                          color="info"
                          href="#pablo"
                          onClick={e => e.preventDefault()}
                        >
                          <i className="fa fa-facebook" />
                        </Button>
                        <Button
                          className="btn-icon-only rounded-circle ml-1"
                          color="info"
                          href="#pablo"
                          onClick={e => e.preventDefault()}
                        >
                          <i className="fa fa-dribbble" />
                        </Button>
                      </div>
                    </div>
                  </div>
                </Col>
                <Col className="mb-5 mb-lg-0" lg="3" md="6">
                  <div className="px-4">
                    <img
                      alt="..."
                      className="rounded-circle img-center img-fluid shadow shadow-lg--hover"
                      src={require("../../assets/img/theme/team-4-800x800.jpg")}
                      style={{ width: "200px" }}
                    />
                    <div className="pt-4 text-center">
                      <h5 className="title">
                        <span className="d-block mb-1">John Doe</span>
                        <small className="h6 text-muted">Founder and CEO</small>
                      </h5>
                      <div className="mt-3">
                        <Button
                          className="btn-icon-only rounded-circle"
                          color="success"
                          href="#pablo"
                          onClick={e => e.preventDefault()}
                        >
                          <i className="fa fa-twitter" />
                        </Button>
                        <Button
                          className="btn-icon-only rounded-circle ml-1"
                          color="success"
                          href="#pablo"
                          onClick={e => e.preventDefault()}
                        >
                          <i className="fa fa-facebook" />
                        </Button>
                        <Button
                          className="btn-icon-only rounded-circle ml-1"
                          color="success"
                          href="#pablo"
                          onClick={e => e.preventDefault()}
                        >
                          <i className="fa fa-dribbble" />
                        </Button>
                      </div>
                    </div>
                  </div>
                </Col>
              </Row>
            </Container>
          </section>
          <section className="section section-lg pt-0">
            <Container>
              <Card className="bg-gradient-warning shadow-lg border-0">
                <div className="p-5">
                  <Row className="align-items-center">
                    <Col lg="8">
                      <h3 className="text-white">
                        We made website building easier for you.
                      </h3>
                      <p className="lead text-white mt-3">
                        I will be the leader of a company that ends up being
                        worth billions of dollars, because I got the answers. I
                        understand culture.
                      </p>
                    </Col>
                    <Col className="ml-lg-auto" lg="3">
                      <Button
                        block
                        className="btn-white"
                        color="default"
                        href="https://www.creative-tim.com/product/argon-design-system-react?ref=adsr-landing-page"
                        size="lg"
                      >
                        Download React
                      </Button>
                    </Col>
                  </Row>
                </div>
              </Card>
            </Container>
          </section>
          <section className="section section-lg bg-gradient-default">
            <Container className="pt-lg pb-300">
              <Row className="text-center justify-content-center">
                <Col lg="10">
                  <h2 className="display-3 text-white">Build something</h2>
                  <p className="lead text-white">
                    According to the National Oceanic and Atmospheric
                    Administration, Ted, Scambos, NSIDClead scentist, puts the
                    potentially record low maximum sea ice extent tihs year down
                    to low ice.
                  </p>
                </Col>
              </Row>
              <Row className="row-grid mt-5">
                <Col lg="4">
                  <div className="icon icon-lg icon-shape bg-gradient-white shadow rounded-circle text-primary">
                    <i className="ni ni-settings text-primary" />
                  </div>
                  <h5 className="text-white mt-3">Building tools</h5>
                  <p className="text-white mt-3">
                    Some quick example text to build on the card title and make
                    up the bulk of the card's content.
                  </p>
                </Col>
                <Col lg="4">
                  <div className="icon icon-lg icon-shape bg-gradient-white shadow rounded-circle text-primary">
                    <i className="ni ni-ruler-pencil text-primary" />
                  </div>
                  <h5 className="text-white mt-3">Grow your market</h5>
                  <p className="text-white mt-3">
                    Some quick example text to build on the card title and make
                    up the bulk of the card's content.
                  </p>
                </Col>
                <Col lg="4">
                  <div className="icon icon-lg icon-shape bg-gradient-white shadow rounded-circle text-primary">
                    <i className="ni ni-atom text-primary" />
                  </div>
                  <h5 className="text-white mt-3">Launch time</h5>
                  <p className="text-white mt-3">
                    Some quick example text to build on the card title and make
                    up the bulk of the card's content.
                  </p>
                </Col>
              </Row>
            </Container>
            {/* SVG separator */}
            <div className="separator separator-bottom separator-skew zindex-100">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                preserveAspectRatio="none"
                version="1.1"
                viewBox="0 0 2560 100"
                x="0"
                y="0"
              >
                <polygon
                  className="fill-white"
                  points="2560 0 2560 100 0 100"
                />
              </svg>
            </div>
          </section>
          <section className="section section-lg pt-lg-0 section-contact-us">
            <Container>
              <Row className="justify-content-center mt--300">
                <Col lg="8">
                  <Card className="bg-gradient-secondary shadow">
                    <CardBody className="p-lg-5">
                      <h4 className="mb-1">Want to work with us?</h4>
                      <p className="mt-0">
                        Your project is very important to us.
                      </p>
                      <FormGroup
                        className={classnames("mt-5", {
                          focused: this.state.nameFocused
                        })}
                      >
                        <InputGroup className="input-group-alternative">
                          <InputGroupAddon addonType="prepend">
                            <InputGroupText>
                              <i className="ni ni-user-run" />
                            </InputGroupText>
                          </InputGroupAddon>
                          <Input
                            placeholder="Your name"
                            type="text"
                            onFocus={e => this.setState({ nameFocused: true })}
                            onBlur={e => this.setState({ nameFocused: false })}
                          />
                        </InputGroup>
                      </FormGroup>
                      <FormGroup
                        className={classnames({
                          focused: this.state.emailFocused
                        })}
                      >
                        <InputGroup className="input-group-alternative">
                          <InputGroupAddon addonType="prepend">
                            <InputGroupText>
                              <i className="ni ni-email-83" />
                            </InputGroupText>
                          </InputGroupAddon>
                          <Input
                            placeholder="Email address"
                            type="email"
                            onFocus={e => this.setState({ emailFocused: true })}
                            onBlur={e => this.setState({ emailFocused: false })}
                          />
                        </InputGroup>
                      </FormGroup>
                      <FormGroup className="mb-4">
                        <Input
                          className="form-control-alternative"
                          cols="80"
                          name="name"
                          placeholder="Type a message..."
                          rows="4"
                          type="textarea"
                        />
                      </FormGroup>
                      <div>
                        <Button
                          block
                          className="btn-round"
                          color="default"
                          size="lg"
                          type="button"
                        >
                          Send Message
                        </Button>
                      </div>
                    </CardBody>
                  </Card>
                </Col>
              </Row>
            </Container>
          </section>
          <Download />
        </main>
        <CardsFooter />
      </>
    );
  }
Example #9
Source File: CardsFooter.jsx    From nodejs-rest-api-boilerplate with MIT License 4 votes vote down vote up
render() {
    return (
      <>
        <footer className="footer has-cards">
          <Container className="container-lg">
            <Row>
              <Col className="mb-5 mb-md-0" md="6">
                <Card className="card-lift--hover shadow border-0">
                  <Link to="/landing-page">
                    <CardImg
                      alt="..."
                      src={require("../../assets//img/theme/landing.jpg")}
                    />
                  </Link>
                </Card>
              </Col>
              <Col className="mb-5 mb-lg-0" md="6">
                <Card className="card-lift--hover shadow border-0">
                  <Link to="/profile-page">
                    <CardImg
                      alt="..."
                      src={require("../../assets//img/theme/profile.jpg")}
                    />
                  </Link>
                </Card>
              </Col>
            </Row>
          </Container>
          <Container>
            <Row className="row-grid align-items-center my-md">
              <Col lg="6">
                <h3 className="text-primary font-weight-light mb-2">
                  Thank you for supporting us!
                </h3>
                <h4 className="mb-0 font-weight-light">
                  Let's get in touch on any of these platforms.
                </h4>
              </Col>
              <Col className="text-lg-center btn-wrapper" lg="6">
                <Button
                  className="btn-neutral btn-icon-only btn-round"
                  color="twitter"
                  href="https://twitter.com/creativetim"
                  id="tooltip475038074"
                  size="lg"
                  target="_blank"
                >
                  <i className="fa fa-twitter" />
                </Button>
                <UncontrolledTooltip delay={0} target="tooltip475038074">
                  Follow us
                </UncontrolledTooltip>
                <Button
                  className="btn-neutral btn-icon-only btn-round ml-1"
                  color="facebook"
                  href="https://www.facebook.com/creativetim"
                  id="tooltip837440414"
                  size="lg"
                  target="_blank"
                >
                  <i className="fa fa-facebook-square" />
                </Button>
                <UncontrolledTooltip delay={0} target="tooltip837440414">
                  Like us
                </UncontrolledTooltip>
                <Button
                  className="btn-neutral btn-icon-only btn-round ml-1"
                  color="dribbble"
                  href="https://dribbble.com/creativetim"
                  id="tooltip829810202"
                  size="lg"
                  target="_blank"
                >
                  <i className="fa fa-dribbble" />
                </Button>
                <UncontrolledTooltip delay={0} target="tooltip829810202">
                  Follow us
                </UncontrolledTooltip>
                <Button
                  className="btn-neutral btn-icon-only btn-round ml-1"
                  color="github"
                  href="https://github.com/creativetimofficial"
                  id="tooltip495507257"
                  size="lg"
                  target="_blank"
                >
                  <i className="fa fa-github" />
                </Button>
                <UncontrolledTooltip delay={0} target="tooltip495507257">
                  Star on Github
                </UncontrolledTooltip>
              </Col>
            </Row>
            <hr />
            <Row className="align-items-center justify-content-md-between">
              <Col md="6">
                <div className="copyright">
                  © {new Date().getFullYear()}{" "}
                  <a
                    href="https://www.creative-tim.com?ref=adsr-footer"
                    target="_blank"
                  >
                    Creative Tim
                  </a>
                  .
                </div>
              </Col>
              <Col md="6">
                <Nav className="nav-footer justify-content-end">
                  <NavItem>
                    <NavLink
                      href="https://www.creative-tim.com?ref=adsr-footer"
                      target="_blank"
                    >
                      Creative Tim
                    </NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink
                      href="https://www.creative-tim.com/presentation?ref=adsr-footer"
                      target="_blank"
                    >
                      About Us
                    </NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink
                      href="http://blog.creative-tim.com?ref=adsr-footer"
                      target="_blank"
                    >
                      Blog
                    </NavLink>
                  </NavItem>
                  <NavItem>
                    <NavLink
                      href="https://github.com/creativetimofficial/argon-design-system-react/blob/master/LICENSE.md"
                      target="_blank"
                    >
                      MIT License
                    </NavLink>
                  </NavItem>
                </Nav>
              </Col>
            </Row>
          </Container>
        </footer>
      </>
    );
  }
Example #10
Source File: index.js    From gobench with Apache License 2.0 4 votes vote down vote up
render() {
    return (
      <div>
        <h5 className="mb-4">
          <strong>Default Cards</strong>
        </h5>
        <div>
          <Card>
            <CardImg
              top
              width="100%"
              src="https://via.placeholder.com/1300x300/f0f2f4/e4e9f0"
              alt="Card cap"
            />
            <CardBody>
              <CardTitle>Card title</CardTitle>
              <CardSubtitle>Card subtitle</CardSubtitle>
              <CardText>
                Some quick example text to build on the card title and make up the bulk of the cards
                content.
              </CardText>
              <Button color="primary">Button</Button>
            </CardBody>
          </Card>
        </div>
        <div className="mb-5">
          <Card>
            <CardBody>
              <CardTitle>Card title</CardTitle>
              <CardSubtitle>Card subtitle</CardSubtitle>
            </CardBody>
            <CardImg
              top
              width="100%"
              src="https://via.placeholder.com/1300x300/f0f2f4/e4e9f0"
              alt="Card cap"
            />
            <CardBody>
              <CardText>
                Some quick example text to build on the card title and make up the bulk of the cards
                content.
              </CardText>
              <CardLink>Card Link</CardLink>
              <CardLink>Another Link</CardLink>
            </CardBody>
          </Card>
        </div>
        <h5 className="mb-4">
          <strong>Colorful Cards</strong>
        </h5>
        <div className="row">
          <div className="col-lg-6">
            <Card body inverse style={{ backgroundColor: '#333', borderColor: '#333' }}>
              <CardTitle>Special Title Treatment</CardTitle>
              <CardText>
                With supporting text below as a natural lead-in to additional content.
              </CardText>
              <Button>Button</Button>
            </Card>
          </div>
          <div className="col-lg-6">
            <Card body inverse color="primary">
              <CardTitle>Special Title Treatment</CardTitle>
              <CardText>
                With supporting text below as a natural lead-in to additional content.
              </CardText>
              <Button color="light">Button</Button>
            </Card>
          </div>
          <div className="col-lg-6">
            <Card body inverse color="success">
              <CardTitle>Special Title Treatment</CardTitle>
              <CardText>
                With supporting text below as a natural lead-in to additional content.
              </CardText>
              <Button color="light">Button</Button>
            </Card>
          </div>
          <div className="col-lg-6">
            <Card body inverse color="info">
              <CardTitle>Special Title Treatment</CardTitle>
              <CardText>
                With supporting text below as a natural lead-in to additional content.
              </CardText>
              <Button color="light">Button</Button>
            </Card>
          </div>
          <div className="col-lg-6">
            <Card body inverse color="warning">
              <CardTitle>Special Title Treatment</CardTitle>
              <CardText>
                With supporting text below as a natural lead-in to additional content.
              </CardText>
              <Button color="light">Button</Button>
            </Card>
          </div>
          <div className="col-lg-6">
            <Card body inverse color="danger">
              <CardTitle>Special Title Treatment</CardTitle>
              <CardText>
                With supporting text below as a natural lead-in to additional content.
              </CardText>
              <Button color="light">Button</Button>
            </Card>
          </div>
        </div>
      </div>
    )
  }
Example #11
Source File: UiImages.js    From gedge-platform with Apache License 2.0 4 votes vote down vote up
render() {
        return (
            <React.Fragment>
                <div className="page-content">
                    <Container fluid>


                    <Breadcrumbs title="Images" breadcrumbItems={this.state.breadcrumbItems} />

                        <Row>
                            <Col xl={6}>
                                <Card>
                                    <CardBody>
                                        <h4 className="card-title">Image Rounded & Circle</h4>
                                         <p className="card-title-desc">Use classNames <code>.rounded</code> and <code>.rounded-circle</code>.</p>
                                        <Row>
                                            <Col md={6}>
                                                <img className="rounded mr-2" alt="Nazox" width="200" src={img4} />
                                            </Col>
                                            <Col md={6}>
                                                <div className="mt-4 mt-md-0">
                                                    <img className="rounded-circle avatar-xl" alt="Nazox" src={avatar4} />
                                                </div>
                                            </Col>
                                        </Row>
                                    </CardBody>
                                </Card>
                                <Card>
                                    <CardBody>
                                        <h4 className="card-title">Image thumbnails</h4>
                                         <p className="card-title-desc">In addition to our border-radius utilities, you can use <code className="highlighter-rouge">.img-thumbnail</code> to give an image a rounded 1px border appearance.</p>
                                        <Row>
                                            <Col md={6}>
                                                <img className="img-thumbnail" alt="Nazox" width="200" src={img3} />
                                            </Col>
                                            <Col md={6}>
                                                <div className="mt-4 mt-md-0">
                                                    <img className="img-thumbnail rounded-circle avatar-xl" alt="Nazox" src={avatar3} />
                                                </div>
                                            </Col>
                                        </Row>
                                    </CardBody>
                                </Card>
                            </Col>

                            <Col xl={6}>
                                <Card>
                                    <CardBody>
                                        <h4 className="card-title">Responsive images</h4>
                                         <p className="card-title-desc">Images in Bootstrap are made responsive with <code className="highlighter-rouge">.img-fluid</code>. <code className="highlighter-rouge">max-width: 100%;</code> and <code className="highlighter-rouge">height: auto;</code> are applied to the image so that it scales with the parent element.</p>
                                        <CardImg className="img-fluid" src={img2} alt="Nazox" />
                                    </CardBody>
                                </Card>
                            </Col>

                        </Row>

                        <Row>
                            <Col lg={12}>
                                <Card>
                                    <CardBody>
                                        <h4 className="card-title mb-4">Image Sizes</h4>
                                        <Row>
                                            <Col md={6}>
                                                <Row>
                                                    <Col lg={4}>
                                                        <CardImg src={avatar3} alt="nazox" className="rounded avatar-sm" />
                                                        <CardText className="mt-2 mb-lg-0"><code>.avatar-sm</code></CardText>
                                                    </Col>
                                                    <Col lg={4}>
                                                        <CardImg src={avatar4} alt="Nazox" className="rounded avatar-md" />
                                                        <CardText className="mt-2  mb-lg-0"><code>.avatar-md</code></CardText>
                                                    </Col>
                                                    <Col lg={4}>
                                                        <CardImg src={avatar5} alt="Nazox" className="rounded avatar-lg" />
                                                        <CardText className="mt-2 mb-lg-0"><code>.avatar-lg</code></CardText>
                                                    </Col>
                                                </Row>
                                            </Col>
                                            <Col md={6}>
                                                <Row>
                                                    <Col lg={4}>
                                                        <CardImg src={avatar3} alt="Nazox" className="rounded-circle avatar-sm" />
                                                        <CardText className="mt-2 mb-lg-0"><code>.avatar-sm</code></CardText>
                                                    </Col>
                                                    <Col lg={4}>
                                                        <CardImg src={avatar4} alt="Nazox" className="rounded-circle avatar-md" />
                                                        <CardText className="mt-2  mb-lg-0"><code>.avatar-md</code></CardText>
                                                    </Col>
                                                    <Col lg={4}>
                                                        <CardImg src={avatar5} alt="Nazox" className="rounded-circle avatar-lg" />
                                                        <CardText className="mt-2 mb-lg-0"><code>.avatar-lg</code></CardText>
                                                    </Col>
                                                </Row>
                                            </Col>
                                        </Row>
                                    </CardBody>
                                </Card>
                            </Col>
                        </Row>

                        <Row>
                            <Col xs={12}>
                                <Card>
                                    <CardBody>
                                        <h4 className="card-title">Default media object</h4>
                                        <p className="card-title-desc">The default media displays a media
                                            object (images, video, audio) to the left or right of a content
                                            block.</p>
        
                                        <Media className="mb-4">
                                            <img className="avatar-sm mr-3 rounded-circle" src={avatar6} alt="Nazox"/>
                                            <Media body>
                                                <h5 className="mt-0 font-size-14">Media heading</h5>
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                            </Media>
                                        </Media>
        
                                        <Media className="mb-4">
                                            <img className="avatar-sm mr-3 rounded-circle" src={avatar2} alt="Nazox"/>
                                            <Media body>
                                                <h5 className="mt-0 font-size-14">Media heading</h5>
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        
                                                <Media className="mt-3">
                                                    <Link className="pr-3" to="#">
                                                        <img src={avatar3} alt="Nazox" className="avatar-sm rounded-circle"/>
                                                    </Link>
                                                    <Media body>
                                                        <h5 className="mt-0 font-size-14">Media heading</h5>
                                                        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                                    </Media>
                                                </Media>
                                            </Media>
                                        </Media>
        
                                        <Media>
                                            <Media body>
                                                <h5 className="mt-0 mb-1 font-size-14">Media object</h5>
                                                Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
                                            </Media>
                                            <img className="avatar-sm ml-3 rounded-circle" src={avatar4} alt="Nazox"/>
                                        </Media>
        
                                    </CardBody>
                                </Card>
                            </Col>
        
                        </Row>
        
        
                        <Row>
                            <Col xs={12}>
                                <Card>
                                    <CardBody>
        
                                        <h4 className="card-title">Media alignment</h4>
                                        <p className="card-title-desc">The images or other media can be
                                            aligned top, middle, or bottom. The default is top aligned.</p>
        
                                        <Media className="mb-4">
                                            <img className="avatar-sm align-self-start rounded mr-3" src={avatar3} alt="Nazox"/>
                                            <Media body>
                                                <h5 className="mt-0 font-size-14">Top-aligned media</h5>
                                                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                                                <p className="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                                            </Media>
                                        </Media>
        
                                        <Media className="mb-4">
                                            <img className="avatar-sm align-self-center rounded mr-3" src={avatar5} alt="Nazox"/>
                                            <Media body>
                                                <h5 className="mt-0 font-size-14">Center-aligned media</h5>
                                                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                                                <p className="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                                            </Media>
                                        </Media>
        
                                        <Media>
                                            <img className="avatar-sm align-self-end rounded mr-3" src={avatar1} alt="Nazox"/>
                                            <Media body>
                                                <h5 className="mt-0 font-size-14">Bottom-aligned media</h5>
                                                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                                                <p className="mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                                            </Media>
                                        </Media>
        
                                    </CardBody>
                                </Card>
                            </Col>
                        </Row>


                    </Container>
                </div>
            </React.Fragment>
        );
    }
Example #12
Source File: UiCards.js    From gedge-platform with Apache License 2.0 4 votes vote down vote up
render() {
        return (
            <React.Fragment>
                <div className="page-content">
                    <Container fluid>

                    <Breadcrumbs title="Cards" breadcrumbItems={this.state.breadcrumbItems} />

                        <Row>
                            <Col mg={6} xl={3}>
                                <Card>
                                    <CardImg top className="img-fluid" src={img1} alt="Skote" />
                                    <CardBody>
                                        <CardTitle className="mt-0">Card title</CardTitle>
                                        <CardText>Some quick example text to build on the card title and make
                                            up the bulk of the card's content.</CardText>
                                        <Link to="#" className="btn btn-primary waves-effect waves-light">Button</Link>
                                    </CardBody>
                                </Card>
                            </Col>
                            <Col mg={6} xl={3}>
                                <Card>
                                    <CardImg top className="img-fluid" src={img2} alt="Skote" />
                                    <CardBody>
                                        <CardTitle className="mt-0">Card title</CardTitle>
                                        <CardText>Some quick example text to build on the card title and make
                                            up the bulk of the card's content.</CardText>
                                    </CardBody>
                                    <ul className="list-group list-group-flush">
                                        <li className="list-group-item">Cras justo odio</li>
                                        <li className="list-group-item">Dapibus ac facilisis in</li>
                                    </ul>
                                    <CardBody>
                                        <Link to="#" className="card-link">Card link</Link>
                                        <Link to="#" className="card-link">Another link</Link>
                                    </CardBody>
                                </Card>

                            </Col>

                            <Col mg={6} xl={3}>

                                <Card>
                                    <CardImg top className="img-fluid" src={img3} alt="Skote" />
                                    <CardBody>
                                        <CardText>Some quick example text to build on the card title and make
                                            up the bulk of the card's content.</CardText>
                                    </CardBody>
                                </Card>
                            </Col>
                            <Col md={6} xl={3}>
                                <Card>
                                    <CardBody>
                                        <CardTitle className="mt-0">Card title</CardTitle>
                                        <CardSubtitle className="font-14 text-muted">Support card subtitle</CardSubtitle>
                                    </CardBody>
                                    <CardImg className="img-fluid" src={img4} alt="Skote" />
                                    <CardBody>
                                        <CardText>Some quick example text to build on the card title and make
                                            up the bulk of the card's content.</CardText>
                                        <Link to="#" className="card-link">Card link</Link>
                                        <Link to="#" className="card-link">Another link</Link>
                                    </CardBody>
                                </Card>
                            </Col>
                        </Row>

                        <Row>
                            <Col md={6}>
                                <Card body>
                                    <CardTitle className="mt-0">Special title treatment</CardTitle>
                                    <CardText>With supporting text below as a natural lead-in to additional
                                        content.</CardText>
                                    <Link to="#" className="btn btn-primary waves-effect waves-light">Go somewhere</Link>
                                </Card>
                            </Col>
                            <Col md={6}>
                                <Card body>
                                        <CardTitle className="mt-0">Special title treatment</CardTitle>
                                        <CardText>With supporting text below as a natural lead-in to additional
                                        content.</CardText>
                                        <Link to="#" className="btn btn-primary waves-effect waves-light">Go somewhere</Link>
                                </Card>
                            </Col>
                        </Row>

                        <Row>
                            <Col lg={4}>
                                <Card body>
                                        <CardTitle className="mt-0">Special title treatment</CardTitle>
                                        <CardText>With supporting text below as a natural lead-in to additional
                                        content.</CardText>
                                        <Link to="#" className="btn btn-primary waves-effect waves-light">Go somewhere</Link>
                                </Card>
                            </Col>

                            <Col lg={4}>
                                    <Card body className="text-center">
                                        <CardTitle className="mt-0">Special title treatment</CardTitle>
                                        <CardText>With supporting text below as a natural lead-in to additional
                                        content.</CardText>
                                        <Link to="#" className="btn btn-primary waves-effect waves-light">Go somewhere</Link>
                                    </Card>
                            </Col>

                            <Col lg={4}>
                                    <Card body className="text-right">
                                        <CardTitle className="mt-0">Special title treatment</CardTitle>
                                        <CardText>With supporting text below as a natural lead-in to additional
                                        content.</CardText>
                                        <Link to="#" className="btn btn-primary waves-effect waves-light">Go somewhere</Link>
                                    </Card>
                            </Col>
                        </Row>


                        <Row>
                            <Col lg={4}>
                                <Card>
                                    <CardHeader className="mt-0">Featured</CardHeader>
                                    <CardBody>
                                        <CardTitle className="mt-0">Special title treatment</CardTitle>
                                        <CardText>With supporting text below as a natural lead-in to
                                            additional content.</CardText>
                                        <Link to="#" className="btn btn-primary">Go somewhere</Link>
                                    </CardBody>
                                </Card>
                            </Col>

                            <Col lg={4}>
                                <Card>
                                    <CardHeader>
                                        Quote
                                    </CardHeader>
                                    <CardBody>
                                        <blockquote className="card-blockquote mb-0">
                                            <CardText>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
                                                erat a ante.</CardText>
                                            <footer className="blockquote-footer font-size-12">
                                                Someone famous in <cite title="Source Title">Source Title</cite>
                                            </footer>
                                        </blockquote>
                                    </CardBody>
                                </Card>
                            </Col>

                            <Col lg={4}>
                                <Card>
                                    <CardHeader>Featured</CardHeader>
                                    <CardBody>
                                        <CardTitle className="mt-0">Special title treatment</CardTitle>
                                        <CardText>With supporting text below as a natural lead-in to
                                            additional content.</CardText>
                                        <Link to="#" className="btn btn-primary waves-effect waves-light">Go somewhere</Link>
                                    </CardBody>
                                    <CardFooter className="text-muted">
                                        2 days ago
                                    </CardFooter>
                                </Card>
                            </Col>
                        </Row>

                        <Row>
                            <Col lg={4}>
                                <Card>
                                    <CardImg top className="img-fluid" src={img5} alt="Skote" />
                                    <CardBody>
                                        <CardTitle className="mt-0">Card title</CardTitle>
                                        <CardText>This is a wider card with supporting text below as a
                                        natural lead-in to additional content. This content is a little bit
                                            longer.</CardText>
                                        <CardText>
                                            <small className="text-muted">Last updated 3 mins ago</small>
                                        </CardText>
                                    </CardBody>
                                </Card>
                            </Col>

                            <Col lg={4}>
                                <Card>
                                    <CardBody>
                                        <CardTitle className="mt-0">Card title</CardTitle>
                                        <CardText>This is a wider card with supporting text below as a
                                        natural lead-in to additional content. This content is a little bit
                                            longer.</CardText>
                                        <CardText>
                                            <small className="text-muted">Last updated 3 mins ago</small>
                                        </CardText>
                                    </CardBody>
                                    <CardImg bottom className="img-fluid" src={img7} alt="Skote" />
                                </Card>
                            </Col>

                            <Col lg={4}>
                                <Card>
                                    <CardImg className="img-fluid" src={img6} alt="Skote" />
                                    <CardImgOverlay>
                                        <CardTitle className="text-white mt-0">Card title</CardTitle>
                                        <CardText className="text-light">This is a wider card with supporting text below as a
                                        natural lead-in to additional content. This content is a little bit
                                            longer.</CardText>
                                        <CardText>
                                            <small className="text-white">Last updated 3 mins ago</small>
                                        </CardText>
                                    </CardImgOverlay>
                                </Card>
                            </Col>

                        </Row>

                        <Row>
                            <Col lg={6}>
                                <Card>
                                    <Row className="no-gutters align-items-center">
                                        <Col md={4}>
                                            <CardImg className="img-fluid" src={img2} alt="Skote" />
                                        </Col>
                                        <Col md={8}>
                                            <CardBody>
                                                <CardTitle>Card title</CardTitle>
                                                <CardText>This is a wider card with supporting text below as a natural lead-in to additional content.</CardText>
                                                <CardText><small className="text-muted">Last updated 3 mins ago</small></CardText>
                                            </CardBody>
                                        </Col>
                                    </Row>
                                </Card>
                            </Col>
                            <Col lg={6}>
                                <Card>
                                    <Row className="no-gutters align-items-center">
                                        <Col md={8}>
                                            <CardBody>
                                                <CardTitle>Card title</CardTitle>
                                                <CardText>This is a wider card with supporting text below as a natural lead-in to additional content.</CardText>
                                                <CardText><small className="text-muted">Last updated 3 mins ago</small></CardText>
                                            </CardBody>
                                        </Col>
                                        <Col md={4}>
                                            <CardImg className="img-fluid" src={img3} alt="Skote" />
                                        </Col>
                                    </Row>
                                </Card>
                            </Col>
                        </Row>

                        <Row>
                            <Col lg={4}>
                                <Card color="primary" className="text-white-50">
                                    <CardBody>
                                        <CardTitle className="mb-4 text-white"><i className="mdi mdi-bullseye-arrow mr-3"></i> Primary Card</CardTitle>
                                        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                                    </CardBody>
                                </Card>
                            </Col>

                            <Col lg={4}>
                                <Card color="success" className="text-white-50">
                                    <CardBody>
                                        <CardTitle className="mb-4 text-white"><i className="mdi mdi-check-all mr-3"></i> Success Card</CardTitle>
                                        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                                    </CardBody>
                                </Card>
                            </Col>

                            <Col lg={4}>
                                <Card color="info" className="text-white-50">
                                    <CardBody>
                                        <CardTitle className="mb-4 text-white"><i className="mdi mdi-alert-circle-outline mr-3"></i>Info Card</CardTitle>
                                        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                                    </CardBody>
                                </Card>
                            </Col>
                        </Row>

                        <Row>
                            <Col lg={4}>
                                <Card color="warning" className="text-white-50">
                                    <CardBody>
                                        <CardTitle className="mb-4 text-white"><i className="mdi mdi-alert-outline mr-3"></i>Warning Card</CardTitle>
                                        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                                    </CardBody>
                                </Card>
                            </Col>

                            <Col lg={4}>
                                <Card color="danger" className="text-white-50">
                                    <CardBody>
                                        <CardTitle className="mb-4 text-white"><i className="mdi mdi-block-helper mr-3"></i>Danger Card</CardTitle>
                                        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                                    </CardBody>
                                </Card>
                            </Col>

                            <Col lg={4}>
                                <Card color="dark" className="text-light">
                                    <CardBody>
                                        <CardTitle className="mb-4 text-white"><i className="mdi mdi-alert-circle-outline mr-3"></i>Dark Card</CardTitle>
                                        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                                    </CardBody>
                                </Card>
                            </Col>
                        </Row>

                        <Row>
                            <Col lg={4}>
                                <Card outline color="primary" className="border">
                                    <CardHeader className="bg-transparent">
                                        <h5 className="my-0 text-primary"><i className="mdi mdi-bullseye-arrow mr-3"></i>Primary outline Card</h5>
                                    </CardHeader>
                                    <CardBody>
                                        <CardTitle className="mt-0">card title</CardTitle>
                                        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                                    </CardBody>
                                </Card>
                            </Col>

                            <Col lg={4}>
                                <Card outline color="danger" className="border">
                                    <CardHeader className="bg-transparent">
                                        <h5 className="my-0 text-danger"><i className="mdi mdi-block-helper mr-3"></i>Danger outline Card</h5>
                                    </CardHeader>
                                    <CardBody>
                                        <CardTitle className="mt-0">card title</CardTitle>
                                        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                                    </CardBody>
                                </Card>
                            </Col>

                            <Col lg={4}>
                                <Card outline color="success" className="border">
                                    <CardHeader className="bg-transparent">
                                        <h5 className="my-0 text-success"><i className="mdi mdi-check-all mr-3"></i>Success Card</h5>
                                    </CardHeader>
                                    <CardBody>
                                        <CardTitle className="mt-0">card title</CardTitle>
                                        <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
                                    </CardBody>
                                </Card>
                            </Col>
                        </Row>


                        <Row>
                            <Col xs={12} className="mb-4">
                                <h4 className="my-3">Decks</h4>
                                <CardDeck>
                                    <Card>
                                        <CardImg top className="img-fluid" src={img4} alt="Skote" />
                                        <CardBody>
                                            <CardTitle className="mt-0">Card title</CardTitle>
                                            <CardText>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
                                            <CardText>
                                                <small className="text-muted">Last updated 3 mins ago</small>
                                            </CardText>
                                        </CardBody>
                                    </Card>
                                    <Card>
                                        <CardImg top className="img-fluid" src={img5} alt="Skote" />
                                        <CardBody>
                                            <CardTitle className="mt-0">Card title</CardTitle>
                                            <CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
                                            <CardText>
                                                <small className="text-muted">Last updated 3 mins ago</small>
                                            </CardText>
                                        </CardBody>
                                    </Card>
                                    <Card>
                                        <CardImg top className="img-fluid" src={img6} alt="Skote" />
                                        <CardBody>
                                            <CardTitle className="mt-0">Card title</CardTitle>
                                            <CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</CardText>
                                            <CardText>
                                                <small className="text-muted">Last updated 3 mins ago</small>
                                            </CardText>
                                        </CardBody>
                                    </Card>
                                </CardDeck>
                            </Col>
                        </Row>

                        <Row>
                            <Col sm={12}>
                                <h4 className="my-3">Cards Columns</h4>
                                <CardColumns>
                                    <Card>
                                        <CardImg top src={img3} alt="Skote" />
                                        <CardBody>
                                            <CardTitle>Card title that wraps to a new line</CardTitle>
                                            <CardText>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
                                        </CardBody>
                                    </Card>
                                    <Card>
                                        <CardBody>
                                            <blockquote className="card-blockquote mb-0">
                                                <CardText>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</CardText>
                                                <footer className="blockquote-footer font-size-12">
                                                    Someone famous in <cite title="Source Title">Source Title</cite>
                                                </footer>
                                            </blockquote>
                                        </CardBody>
                                    </Card>
                                    <Card>
                                        <CardImg top src={img5} alt="Skote" />
                                        <CardBody>
                                            <CardTitle>Card title</CardTitle>
                                            <CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
                                            <CardText><small className="text-muted">Last updated 3 mins ago</small></CardText>
                                        </CardBody>
                                    </Card>
                                    <Card color="primary" className="text-white text-center p-3">
                                        <blockquote className="card-blockquote mb-0">
                                            <CardText>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</CardText>
                                            <footer className="blockquote-footer text-white font-size-12">Someone famous in <cite title="Source Title">Source Title</cite>
                                            </footer>
                                        </blockquote>
                                    </Card>
                                    <Card className="text-center">
                                        <CardBody>
                                            <CardTitle>Card title</CardTitle>
                                            <CardText>This card has a regular title and short paragraphy of text below it.</CardText>
                                            <CardText><small className="text-muted">Last updated 3 mins ago</small></CardText>
                                        </CardBody>
                                    </Card>
                                    <Card>
                                        <CardImg top src={img7} alt="Skote" />
                                    </Card>
                                    <Card className="p-3 text-right">
                                        <blockquote className="blockquote mb-0">
                                            <CardText>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</CardText>
                                            <footer className="blockquote-footer">
                                                <small className="text-muted">
                                                    Someone famous in <cite title="Source Title">Source Title</cite>
                                                </small>
                                            </footer>
                                        </blockquote>
                                    </Card>
                                    <Card>
                                        <CardBody>
                                            <CardTitle>Card title</CardTitle>
                                            <CardText>This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</CardText>
                                            <CardText><small className="text-muted">Last updated 3 mins ago</small></CardText>
                                        </CardBody>
                                    </Card>
                                </CardColumns>
                            </Col>
                        </Row>
                    </Container>
                </div>
            </React.Fragment>
        );
    }
Example #13
Source File: help.js    From hivemind with Apache License 2.0 4 votes vote down vote up
Page = () => (
  <Row>
    <Col
      xs="auto"
      md={3}
      tabIndex="1"
      style={{ height: '90vh', overflowY: 'scroll' }}
    >
      <h3>Navigation</h3>
      <Nav vertical id={'nav'} className={'navbar-light bg-light'}>
        <NavLink href="#intro">Introduction</NavLink>
        <NavLink href="#at-a-glance">At a Glance</NavLink>
        <Nav vertical>
          <NavLink href="#key-points" className={'ml-3'}>
            Key Points
          </NavLink>
        </Nav>
        <NavLink href="#quick-start">Quick Start</NavLink>
        <Nav vertical>
          <NavLink href="#logging-in" className={'ml-3'}>
            Logging In
          </NavLink>
          <NavLink href="#create-mind-map" className={'ml-3'}>
            Creating a mind map
          </NavLink>
          <NavLink href="#create-child-node" className={'ml-3'}>
            Creating a (child) node
          </NavLink>
          <NavLink href="#delete-node" className={'ml-3'}>
            Deleting a node
          </NavLink>
          <NavLink href="#edit-node" className={'ml-3'}>
            Editing a node
          </NavLink>
          <NavLink href="#view-node" className={'ml-3'}>
            Viewing a node
          </NavLink>
          <NavLink href="#hide-node" className={'ml-3'}>
            Hiding a node
          </NavLink>
          <NavLink href="#reveal-node" className={'ml-3'}>
            Revealing (Un-hiding) a node (sub-tree)
          </NavLink>
          <NavLink href="#time-travel" className={'ml-3'}>
            Time travel
          </NavLink>
          <Nav vertical>
            <NavLink href="#timeline" className={'ml-5'}>
              Using the Timeline
            </NavLink>
            <NavLink href="#playback" className={'ml-5'}>
              Using the Playback Buttons
            </NavLink>
          </Nav>
          <NavLink href="#search" className={'ml-3'}>
            Searching
          </NavLink>
          <NavLink href="#rename" className={'ml-3'}>
            Renaming a mind map
          </NavLink>
          <NavLink href="#fit" className={'ml-3'}>
            Fit on canvas
          </NavLink>
          <NavLink href="#show-all" className={'ml-3'}>
            Show All
          </NavLink>
        </Nav>
      </Nav>
    </Col>
    <Col
      xs="auto"
      md={9}
      tabIndex="0"
      style={{ height: '90vh', overflowY: 'scroll' }}
    >
      <Jumbotron>
        <h1 id={'intro'}>Introduction</h1>
        <p>
          Hivemind is a free tool that lets you create mind maps in your
          browser. It supports time-travel (through the change history of the
          mind map), tagging specific time points (
          <Badge color="secondary">Planned</Badge>) and collaborative editing (
          <Badge color="secondary">Planned</Badge>).
        </p>

        <h1 id={'at-a-glance'}>At a Glance</h1>
        <p>
          Each mind map is modelled as a tree, ie. it has a single root node,
          and all other nodes are descendants of this root node through a single
          hierarchy. There are no cases of multiple parents, cycles, loops
          (self-joining edges), parallel edges or orphaned nodes.
        </p>

        <CollapsibleExample>
          <Card className={'mb-4'}>
            <CardImg
              top
              width="100%"
              src="/img/help/Screenshot_2021-03-28 Hivemind.png"
              alt="Example Mind Map"
            />
            <CardBody>
              <CardTitle tag="h5">An example mind map</CardTitle>
              <CardSubtitle tag="h6" className="mb-2 text-muted">
                Tree structure with a single root node.
              </CardSubtitle>
              <CardText>
                This tree is 3 levels deep. Each node can have one or more
                children, but exactly one parent (except the root node, which
                has none). The timeline at the bottom shows at what points this
                mind map was modified.
              </CardText>
            </CardBody>
          </Card>
        </CollapsibleExample>

        <p>
          Each node in the mindmap is a container for information. There is a
          title, a summary and a content field. This node is connected to
          exactly one parent by an edge (except when it is the root node), and
          can optionally have one or mode child nodes. The edges themselves do
          not carry any information at present, other than which nodes they
          connect.
        </p>

        <CollapsibleExample>
          <Card className={'mb-4'}>
            <CardImg
              top
              width="100%"
              src="/img/help/Screenshot_2021-03-28-1 Hivemind.png"
              alt="Node Details"
            />
            <CardBody>
              <CardTitle tag="h5">Expanded view of a node</CardTitle>
              <CardSubtitle tag="h6" className="mb-2 text-muted">
                Accessed by a context menu upon clicking the node.
              </CardSubtitle>
              <CardText>
                Apart from the title, summary and content, a few other bits of
                information are displayed, like who created/last updated the
                node, and where the node sits in the overall hierarchy.
              </CardText>
            </CardBody>
          </Card>
        </CollapsibleExample>

        <h2 id={'key-points'}>Key Points</h2>
        <p>
          Every write operation that is performed on a node
          (create/update/delete) is recorded permanently in a time-travelling
          database, allowing for point-in-time lookups of any historic version
          of a single node or the graph as a whole.
        </p>

        <ol>
          <li>
            The root node is special - it cannot be deleted, and is the only
            node without a parent.
          </li>
          <li className={'text-danger'}>
            Whenever a node is deleted, the entire subtree under it is also
            deleted in order to ensure there are no orphaned nodes.
          </li>
          <li>
            Only users with edit or admin access can perform write operations on
            the tree.
          </li>
          <li>
            <Badge color="secondary">Planned</Badge> A user with admin access
            can additionally share the mindmap with other users (by
            granting/revoking read/write/admin access) or make it publicly
            (in)visible (read-only).
          </li>
          <li>
            <Badge color="secondary">Planned</Badge> Only an admin user can
            delete a mind map.
          </li>
          <li className={'text-danger'}>
            Access control is <strong>NOT</strong> modelled temporally, ie. if
            your access to a mind map is revoked, you lose access to ALL its
            history, not just from the time of revocation. Conversely, if you
            are granted access to a mind map, you gain access to its{' '}
            <strong>ENTIRE</strong> history, not just from now onwards.
          </li>
        </ol>

        <h1 id={'quick-start'}>Quick Start</h1>
        <h2 id={'logging-in'}>Logging in</h2>
        <CollapsibleExample>
          <Card className={'mb-4'}>
            <CardImg
              top
              width="100%"
              src="/img/help/Screenshot_2021-03-28-2 Hivemind.png"
              alt="Login Prompt"
            />
            <CardBody>
              <CardTitle tag="h5">Login Prompt</CardTitle>
              <CardSubtitle tag="h6" className="mb-2 text-muted">
                Login via email or an external authentication provider.
              </CardSubtitle>
              <CardText>
                Anonymous users must first login to start creating mind maps.
              </CardText>
            </CardBody>
          </Card>
        </CollapsibleExample>

        <ul>
          <li>
            Go the the Hivemind{' '}
            <Link href={'/'}>
              <a>home</a>
            </Link>{' '}
            page.
          </li>
          <li>
            If you&apos;re not logged in, you&apos;ll see a login prompt as shown in the
            example above.
          </li>
          <li>
            Use an email (that you own) or one of the other providers (currently
            Google, GitHub) to sign in.
          </li>
          <li>
            If you&apos;re signing in for the first time, you&apos;ll have to perform a
            few extra steps, either to set your password, or to authorize
            Hivemind with the external provider.
          </li>
          <li>
            Once you&apos;ve signed in, you&apos;ll be redirected to the list of mind maps
            that you own.
          </li>
        </ul>

        <h2 id={'create-mind-map'}>Creating a mind map</h2>
        <CollapsibleExample>
          <Card className={'mb-4'}>
            <CardImg
              top
              width="100%"
              src="/img/help/Screenshot_2021-03-28-3 Hivemind.png"
              alt="Login Prompt"
            />
            <CardBody>
              <CardTitle tag="h5">Create a Mind Map</CardTitle>
              <CardSubtitle tag="h6" className="mb-2 text-muted">
                Accessed from the mind maps{' '}
                <Link href={'/mmaps'}>
                  <a>list</a>
                </Link>{' '}
                page.
              </CardSubtitle>
              <CardText>
                Click on the{' '}
                <Button color="success" size="sm" id="create">
                  <Plus /> Create
                </Button>{' '}
                button. Then just type a name and hit ⏎.
              </CardText>
            </CardBody>
          </Card>
        </CollapsibleExample>

        <ul>
          <li>
            Go to the mind maps{' '}
            <Link href={'/mmaps'}>
              <a>list</a>
            </Link>{' '}
            page.
          </li>
          <li>
            Click on the{' '}
            <Button color="success" size="sm" id="create">
              <Plus /> Create
            </Button>{' '}
            button.
          </li>
          <li>Type a name and hit ⏎ (&lt;Enter&gt;).</li>
          <li>
            <strong>
              The first node in the mind map will inherit its title from the
              mind map&apos;s name.
            </strong>
          </li>
        </ul>

        <h2 id={'create-child-node'}>Creating a (child) node</h2>
        <p>
          Each node (except the root node) is a child of exactly one other node.
          While the root node is automatically created for you when you create
          the mind map, every other node must be created as a descendant of the
          root node by accessing a context menu within the mind map canvas (the
          black area). This context menu is available on all nodes, but its
          contents could vary depending on a number of factors. The &lsquo;create
          child&rsquo; option is available, provided:
        </p>

        <ol>
          <li>The user has &lsquo;admin&rsquo; or &lsquo;write&rsquo; access to the mind map, and</li>
          <li>
            The mind map is being viewed in &lsquo;write&rsquo; mode (i.e., not in &lsquo;lookback
            mode&rsquo; - to be discussed later).
          </li>
        </ol>

        <CollapsibleExample>
          <CreateChildCarousel />
        </CollapsibleExample>

        <ul>
          <li>Click on the node under which you wish to create the child.</li>
          <li>
            Select the &lsquo;<Plus /> Child&rsquo; option.
          </li>
          <li>Type a name and hit ⏎ (&lt;Enter&gt;).</li>
          <li>The new node will show up under the node selected above.</li>
        </ul>

        <h2 id={'delete-node'}>Deleting a node</h2>
        <p>
          All nodes (except the root node) can be deleted. Upon deletion, the
          entire sub-tree under the deleted node is also deleted. The &lsquo;delete
          node&rsquo; option is available, provided:
        </p>

        <ol>
          <li>The user has &lsquo;admin&rsquo; or &lsquo;write&rsquo; access to the mind map,</li>
          <li>
            The mind map is being viewed in &lsquo;write&rsquo; mode (i.e., not in &lsquo;lookback
            mode&rsquo; - to be discussed later), and
          </li>
          <li>The node is not the root node.</li>
        </ol>

        <CollapsibleExample>
          <Card className={'mb-4'}>
            <CardImg
              top
              width="100%"
              src="/img/help/Screenshot_2021-03-28-6 Hivemind.png"
              alt="Delete a node"
            />
            <CardBody>
              <CardTitle tag="h5">Delete a Node</CardTitle>
              <CardSubtitle tag="h6" className="mb-2 text-muted">
                Accessed by clicking on the &lsquo;<Trash2 /> Del&rsquo; option from the
                context menu.
              </CardSubtitle>
              <CardText>
                Confirm delete operation to get rid of the node (and all of its
                descendants, if present).
              </CardText>
            </CardBody>
          </Card>
        </CollapsibleExample>
        <ul>
          <li>Click on the node that you would like to remove.</li>
          <li>
            Select the &lsquo;<Trash2 /> Del&rsquo; option.
          </li>
          <li>
            Confirm that you want to delete the node by clicking the{' '}
            <Button size="sm" color="danger">
              <Trash2 /> Delete
            </Button>{' '}
            button.
          </li>
        </ul>

        <h2 id={'edit-node'}>Editing a node</h2>
        <p>
          All nodes can be edited. The &lsquo;edit node&rsquo; option is available,
          provided:
        </p>

        <ol>
          <li>The user has &lsquo;admin&rsquo; or &lsquo;write&rsquo; access to the mind map, and</li>
          <li>
            The mind map is being viewed in &lsquo;write&rsquo; mode (i.e., not in &lsquo;lookback
            mode&rsquo; - to be discussed later).
          </li>
        </ol>

        <CollapsibleExample>
          <Card className={'mb-4'}>
            <CardImg
              top
              width="100%"
              src="/img/help/Screenshot_2021-03-28-7 Hivemind.png"
              alt="Edit a node"
            />
            <CardBody>
              <CardTitle tag="h5">Edit a Node</CardTitle>
              <CardSubtitle tag="h6" className="mb-2 text-muted">
                Accessed by clicking on the &lsquo;<Edit3 /> Edit&rsquo; option from the
                context menu.
              </CardSubtitle>
              <CardText>
                Edit one or more of the &lsquo;title&rsquo;, &lsquo;summary&rsquo; and &lsquo;content&rsquo; fields,
                and click the{' '}
                <Button color="primary" size="sm">
                  <Save /> Save
                </Button>{' '}
                button.
              </CardText>
            </CardBody>
          </Card>
        </CollapsibleExample>
        <ul>
          <li>Click on the node that you would like to edit.</li>
          <li>
            Select the &lsquo;<Edit3 /> Edit&rsquo; option.
          </li>
          <li>
            The popup screen will appear with a title, summary and content of
            the node.
          </li>
          <li>
            Modify one or more of the attributes as required as click on&nbsp;
            <Button color="primary" size="sm">
              <Save /> Save
            </Button>
            .
          </li>
        </ul>

        <h2 id={'view-node'}>Viewing a node</h2>
        <CollapsibleExample>
          <Card className={'mb-4'}>
            <CardImg
              top
              width="100%"
              src="/img/help/Screenshot_2021-03-28-1 Hivemind.png"
              alt="View a node"
            />
            <CardBody>
              <CardTitle tag="h5">View a Node</CardTitle>
              <CardSubtitle tag="h6" className="mb-2 text-muted">
                Accessed by clicking on the &lsquo;<Eye /> View&rsquo; option from the
                context menu.
              </CardSubtitle>
              <CardText>
                View the title, summary and content of the node. Also shows its
                position in the hierarchy and who created/last updated it.
              </CardText>
            </CardBody>
          </Card>
        </CollapsibleExample>
        <ul>
          <li>Click on the node that you would like to view.</li>
          <li>
            Select the &lsquo;<Eye /> View&rsquo; option.
          </li>
          <li>
            The popup screen will appear with a title, summary and content of
            the node.
          </li>
        </ul>

        <h2 id={'hide-node'}>Hiding a node</h2>
        <p>
          Each node (except the root node) has an option to be hidden from
          display on the canvas. This can be useful to temporarily remove
          clutter when a large number of nodes are on display. Upon hiding, the
          entire sub-tree under the node is also hidden. To indicate that a node
          was hidden, its parent is marked in a grey/black shaded background.
          The hidden node (and all its descendants) can be revealed using a menu
          option under its parent.
        </p>

        <CollapsibleExample>
          <HideCarousel />
        </CollapsibleExample>

        <ul>
          <li>Click on the node which you wish to hide.</li>
          <li>
            Select the &lsquo;<EyeOff /> Hide&rsquo; option.
          </li>
          <li>
            Hides the entire sub-tree under this node (as well as the node
            itself).
          </li>
          <li>Shades the parent to indicate hidden children.</li>
        </ul>

        <h2 id={'reveal-node'}>Revealing (Un-hiding) a node (sub-tree)</h2>
        <p>
          A hidden node (and its descendants) is indicated by a shaded
          background on its parent. To reveal its sub-tree and render them back
          onto the canvas, a menu option is added to the parent (only for
          parents with hidden children). Clicking on this reveals (un-hides) the{' '}
          <strong>entire sub-tree under the parent</strong>.
        </p>

        <CollapsibleExample>
          <RevealCarousel />
        </CollapsibleExample>

        <ul>
          <li>Click on the (shaded) node whose children you wish to reveal.</li>
          <li>
            Select the &lsquo;<Eye /><ArrowDownRight /> Reveal&rsquo; option.
          </li>
          <li>
            Reveals the <strong>entire sub-tree under this node</strong>.
          </li>
          <li>Un-shades the node to indicate no hidden children.</li>
        </ul>

        <h2 id={'time-travel'}>Time travel</h2>
        <p>
          Hivemind can <strong>time-travel</strong>. What this means is, as you
          keep changing the mindmap through create/edit/delete operations,
          Hivemind keeps track of all these changes and retains a history of all
          the revisions of the mind map as a whole. This gives users of Hivemind
          the unique ability to rewind back to any point in time through the
          history of the mind map, and view it as it was at that time. This is
          achieved either by using the timeline component (below the canvas) or
          the playback buttons (in the menu bar above the canvas). See the image
          below.
        </p>

        <CollapsibleExample>
          <Card className={'mb-4'}>
            <CardImg
              top
              width="100%"
              src="/img/help/Screenshot_2021-03-28-10 Hivemind.png"
              alt="Time Travel Controls"
            />
            <CardBody>
              <CardTitle tag="h5">Time Travel</CardTitle>
              <CardSubtitle tag="h6" className="mb-2 text-muted">
                Use the playback buttons or the timeline.
              </CardSubtitle>
              <CardText>
                Travel back/forth through the history of changes to the mind
                map, and view it as it was at any point in time through its
                lifecycle.
              </CardText>
            </CardBody>
          </Card>
        </CollapsibleExample>

        <p>
          Whenever the user travels through time to look back at a historical
          version of the mind map, it is said to be in{' '}
          <strong>&lsquo;lookback mode&rsquo;</strong>, and all modifications are disabled
          (since its history is treated as immutable). This is indicated in
          three ways:
        </p>

        <ol>
          <li>
            A <code>timestamp</code> query parameter in the URL, which also
            serves as a permalink to this point-in-time version of the mind map,
          </li>
          <li>
            A button at the top right of the menu bar, which shows a{' '}
            <span className={'text-secondary'}>
              <Lock />
            </span>{' '}
            symbol (otherwise showing a{' '}
            <span className={'text-danger'}>
              <Unlock />
            </span>{' '}
            symbol when in &lsquo;write mode&rsquo;),
          </li>
          <li>
            A grey border around the canvas (which is otherwise red in &lsquo;write
            mode&rsquo;).
          </li>
        </ol>

        <p>
          <strong>
            While the mind map is in &lsquo;lookback mode&rsquo;, it cannot be edited.
          </strong>
        </p>

        <h3 id={'timeline'}>Using the Timeline</h3>
        <p>
          The timeline is the component displayed at the bottom of the mind map
          canvas, that shows a time series of write events that took place on
          the mind map, in chronological order. It has the following properties:
        </p>
        <ol>
          <li>
            The timeline can zoom in and out. This is manually achieved by
            scrolling while the cursor is on the timeline (or using pinch zoom
            on a touchscreen).
          </li>
          <li>
            When fully zoomed out, the timeline fits all events of the mind map.
            It cannot be zoomed out beyond the boundaries defined by the first
            and the last events of the mind map.
          </li>
          <li>When fully zoomed in, it has a resolution of 1 minute.</li>
          <li>
            Events are color-coded to depict their type. A &lsquo;create&rsquo; event is{' '}
            <span className={'text-success'}>green</span>, an &lsquo;update&rsquo; event is{' '}
            <span className={'text-primary'}>blue</span> and a &lsquo;delete&rsquo; event is{' '}
            <span className={'text-danger'}>red</span>.
          </li>
          <li>
            When two or more events get too close together on the timeline to be
            clearly rendered (ie. they start overlapping), they are clubbed
            together in a &lsquo;cluster&rsquo;, with a number showing the number of events
            in that cluster.
          </li>
          <li>
            A cluster can be expanded to fill the timeline by double-clicking on
            it.
          </li>
          <li>
            Double-clicking an empty portion of the timeline will cause it to
            zoom out fully.
          </li>
        </ol>

        <p>
          Open the example below for a step-by-step guide how to use the
          timeline.
        </p>

        <p>
          <strong>
            Any jump triggered on the timeline automatically puts the mind map
            in &lsquo;lookback mode&rsquo;.
          </strong>
          It can be put back into &lsquo;write mode&rsquo; by clicking on the{' '}
          <Button outline color="secondary" size={'sm'}>
            <Lock />
          </Button>{' '}
          button at the top right in the menu bar.
        </p>

        <CollapsibleExample>
          <TimelineCarousel />
        </CollapsibleExample>

        <h3 id={'playback'}>Using the Playback Buttons</h3>
        <p>
          The playback buttons at the top menu bar should be fairly easy to
          understand and use. They look and work similar to an audio player -
          only that in this case, the buttons are used to jump between events on
          the timeline, rather than between items in a playlist.
        </p>
        <ol>
          <li>
            The{' '}
            <Button outline color="secondary" size={'sm'}>
              <SkipBack />
            </Button>{' '}
            button takes you directly to the first event of the timeline.
          </li>
          <li>
            The{' '}
            <Button outline color="secondary" size={'sm'}>
              <Rewind />
            </Button>{' '}
            button takes you to the previous event from the current event on the
            timeline. If you are currently in &lsquo;write mode&rsquo; then this takes you
            to the last event.
          </li>
          <li>
            The{' '}
            <Button outline color="secondary" size={'sm'}>
              <FastForward />
            </Button>{' '}
            button takes you to the next event from the current event on the
            timeline. If you are currently in &lsquo;write mode&rsquo; then this takes you
            to the last event.
          </li>
          <li>
            The{' '}
            <Button outline color="secondary" size={'sm'}>
              <SkipForward />
            </Button>{' '}
            button takes you directly to the last event of the timeline.
          </li>
        </ol>

        <p>
          <strong>
            Any action on the playback buttons automatically puts the mind map
            in &lsquo;lookback mode&rsquo;.
          </strong>
          It can be put back into &lsquo;write mode&rsquo; by clicking on the{' '}
          <Button outline color="secondary" size={'sm'}>
            <Lock />
          </Button>{' '}
          button at the top right in the menu bar.
        </p>

        <h2 id={'search'}>Searching</h2>
        <CollapsibleExample>
          <Card className={'mb-4'}>
            <CardImg
              top
              width="100%"
              src="/img/help/Screenshot_2021-03-28-16 Hivemind.png"
              alt="Search"
            />
            <CardBody>
              <CardTitle tag="h5">Search</CardTitle>
              <CardSubtitle tag="h6" className="mb-2 text-muted">
                Search for nodes on canvas.
              </CardSubtitle>
              <CardText>
                Use one or more filters/sort to locate a particular node of your
                interest. Clicking on a row will make the canvas zoom in one the
                node corresponding to that row.
              </CardText>
            </CardBody>
          </Card>
        </CollapsibleExample>

        <ul>
          <li>
            Click on the{' '}
            <Button outline color="secondary" size={'sm'}>
              <Search />
            </Button>{' '}
            button in the top menu bar.
          </li>
          <li>
            Enter your filter criteria or sort the columns in
            ascending/descending order.
          </li>
          <li>
            If a node that matches all filter critera exists, you should see it
            in the list.
          </li>
          <li>
            Click on the node if you would like to navigate to it in the canvas.
          </li>
        </ul>

        <h2 id={'rename'}>Renaming a mind map</h2>
        <p>
          The mind map can be renamed when in &lsquo;write mode&rsquo;. This is true when:
        </p>

        <ol>
          <li>The user has &lsquo;admin&rsquo; or &lsquo;write&rsquo; access to the mind map, and</li>
          <li>
            The mind map is being viewed in &lsquo;write&rsquo; mode (i.e., not in &lsquo;lookback
            mode&rsquo; - as discussed earlier).
          </li>
        </ol>
        <CollapsibleExample>
          <Card className={'mb-4'}>
            <CardImg
              top
              width="100%"
              src="/img/help/Screenshot_2021-03-28-17 Hivemind.png"
              alt="Rename"
            />
            <CardBody>
              <CardTitle tag="h5">Rename</CardTitle>
              <CardSubtitle tag="h6" className="mb-2 text-muted">
                Rename the mind map.
              </CardSubtitle>
              <CardText>
                Click on the{' '}
                <Button outline color="primary" size={'sm'}>
                  <Edit3 />
                </Button>{' '}
                button. Enter the new name and hit{' '}
                <Button color="primary" size="sm">
                  <Save /> Save
                </Button>
                .
              </CardText>
            </CardBody>
          </Card>
        </CollapsibleExample>

        <ul>
          <li>
            Click on the{' '}
            <Button outline color="primary" size={'sm'}>
              <Edit3 />
            </Button>{' '}
            button.
          </li>
          <li>This button can be found in the menu bar.</li>
          <li>Modify the name as required and hit ⏎ (&lt;Enter&gt;).</li>
        </ul>

        <h2 id={'fit'}>Fit on canvas</h2>
        <p>
          If the mind map does not optimally fit in the canvas, either because
          you played around with the canvas zoom or moved a few nodes around, or
          just hid/revealed a bunch of nodes, you can force them to optimally
          fit by clicking on the{' '}
          <Button outline color="secondary" size={'sm'}>
            <Maximize />
          </Button>{' '}
          button in the top menu bar.
        </p>

        <CollapsibleExample>
          <FitCarousel />
        </CollapsibleExample>

        <h2 id={'show-all'}>Show All</h2>
        <p>
          If several sub-trees were hidden on the canvas, it can get tedious to
          reveal them all by navigating to their parents one-by-one. For such
          cases a quick shortcut is to click on the{' '}
          <Button outline color="secondary" size={'sm'}>
            <Eye />
          </Button>{' '}
          button in the top menu bar. This causes the canvas to immediately
          reveal all hidden sub-trees and also re-run the layout if necessary.
        </p>

        <CollapsibleExample>
          <ShowCarousel />
        </CollapsibleExample>
      </Jumbotron>
    </Col>
  </Row>
)
Example #14
Source File: help.js    From hivemind with Apache License 2.0 4 votes vote down vote up
ShowCarousel = () => {
  const [activeIndex, setActiveIndex] = useState(0)
  const [animating, setAnimating] = useState(false)

  const items = [
    {
      contents: (
        <Card className={'mb-4'}>
          <CardImg
            top
            width="100%"
            src="/img/help/Screenshot_2021-03-28-18 Hivemind.png"
            alt="Hidden Nodes"
          />
          <CardBody>
            <CardTitle tag="h5">Canvas with Hidden Nodes</CardTitle>
            <CardSubtitle tag="h6" className="mb-2 text-muted">
              Some nodes/sub-trees on the canvas have been hidden.
            </CardSubtitle>
            <CardText>
              After hiding, the canvas was told to rerun its layout to optimally
              fit the now visible nodes.
            </CardText>
          </CardBody>
        </Card>
      ),
      caption: 'Hidden Nodes',
    },
    {
      contents: (
        <Card className={'mb-4'}>
          <CardImg
            top
            width="100%"
            src="/img/help/Screenshot_2021-03-28-19 Hivemind.png"
            alt="All Nodes Revealed"
          />
          <CardBody>
            <CardTitle tag="h5">All Nodes Revealed</CardTitle>
            <CardSubtitle tag="h6" className="mb-2 text-muted">
              All hidden nodes/sub-trees are revealed.
            </CardSubtitle>
            <CardText>
              This reveals any hidden nodes/sub-trees on canvas, and also reruns
              the layout to optimally fit the now fully visible mind map.
            </CardText>
          </CardBody>
        </Card>
      ),
      caption: 'Layout Fixed',
    },
  ]

  const next = () => {
    if (animating) {
      return
    }

    const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1
    setActiveIndex(nextIndex)
  }

  const previous = () => {
    if (animating) {
      return
    }

    const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1
    setActiveIndex(nextIndex)
  }

  const slides = items.map((item, idx) => {
    return (
      <CarouselItem
        onExiting={() => setAnimating(true)}
        onExited={() => setAnimating(false)}
        key={idx}
      >
        {item.contents}
      </CarouselItem>
    )
  })

  return (
    <Carousel
      activeIndex={activeIndex}
      next={next}
      previous={previous}
      interval={false}
    >
      {slides}
      <CarouselControl
        direction="prev"
        directionText="Previous"
        onClickHandler={previous}
      />
      <CarouselControl
        direction="next"
        directionText="Next"
        onClickHandler={next}
      />
    </Carousel>
  )
}
Example #15
Source File: help.js    From hivemind with Apache License 2.0 4 votes vote down vote up
FitCarousel = () => {
  const [activeIndex, setActiveIndex] = useState(0)
  const [animating, setAnimating] = useState(false)

  const items = [
    {
      contents: (
        <Card className={'mb-4'}>
          <CardImg
            top
            width="100%"
            src="/img/help/Screenshot_2021-03-28-20 Hivemind.png"
            alt="Messed-Up Layout"
          />
          <CardBody>
            <CardTitle tag="h5">Messed-Up Layout</CardTitle>
            <CardSubtitle tag="h6" className="mb-2 text-muted">
              Nodes on the canvas have been manually dragged around.
            </CardSubtitle>
            <CardText>
              Use{' '}
              <Button outline color="primary" size={'sm'}>
                <Maximize />
              </Button>{' '}
              to re-run the layout and achieve optimal fit.
            </CardText>
          </CardBody>
        </Card>
      ),
      caption: 'A Messed-Up Layout',
    },
    {
      contents: (
        <Card className={'mb-4'}>
          <CardImg
            top
            width="100%"
            src="/img/help/Screenshot_2021-03-28-15 Hivemind.png"
            alt="Layout Fixed"
          />
          <CardBody>
            <CardTitle tag="h5">Layout Fixed</CardTitle>
            <CardSubtitle tag="h6" className="mb-2 text-muted">
              Optimal fit achieved.
            </CardSubtitle>
            <CardText>
              This resets any movement on canvas, and also refits nodes after a
              hide/reveal.
            </CardText>
          </CardBody>
        </Card>
      ),
      caption: 'Layout Fixed',
    },
  ]

  const next = () => {
    if (animating) {
      return
    }

    const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1
    setActiveIndex(nextIndex)
  }

  const previous = () => {
    if (animating) {
      return
    }

    const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1
    setActiveIndex(nextIndex)
  }

  const slides = items.map((item, idx) => {
    return (
      <CarouselItem
        onExiting={() => setAnimating(true)}
        onExited={() => setAnimating(false)}
        key={idx}
      >
        {item.contents}
      </CarouselItem>
    )
  })

  return (
    <Carousel
      activeIndex={activeIndex}
      next={next}
      previous={previous}
      interval={false}
    >
      {slides}
      <CarouselControl
        direction="prev"
        directionText="Previous"
        onClickHandler={previous}
      />
      <CarouselControl
        direction="next"
        directionText="Next"
        onClickHandler={next}
      />
    </Carousel>
  )
}
Example #16
Source File: help.js    From hivemind with Apache License 2.0 4 votes vote down vote up
TimelineCarousel = () => {
  const [activeIndex, setActiveIndex] = useState(0)
  const [animating, setAnimating] = useState(false)

  const items = [
    {
      contents: (
        <Card className={'mb-4'}>
          <CardImg
            top
            width="100%"
            src="/img/help/Screenshot_2021-03-28-11 Hivemind.png"
            alt="Event Detail"
          />
          <CardBody>
            <CardTitle tag="h5">Event Detail</CardTitle>
            <CardSubtitle tag="h6" className="mb-2 text-muted">
              Shows the delta associated with an event (update, in this
              instance).
            </CardSubtitle>
            <CardText>
              Accessed by clicking on an event on the timeline. Fields that were
              changed are marked in colour. The event time is displayed. If the
              title was changed, both the old and new title are shown in the
              header section of the detail popup. Clicking on the{' '}
              <Button outline color="secondary" size={'sm'}>
                <MapPin /> Jump
              </Button>{' '}
              button makes the mind map jump to a point in time just after this
              event had occured. This updates the canvas and also focuses the
              timeline on this event.
            </CardText>
          </CardBody>
        </Card>
      ),
      caption: 'Event Detail',
    },
    {
      contents: (
        <Card className={'mb-4'}>
          <CardImg
            top
            width="100%"
            src="/img/help/Screenshot_2021-03-28-12 Hivemind.png"
            alt="Timeline Jump"
          />
          <CardBody>
            <CardTitle tag="h5">Timeline Jump</CardTitle>
            <CardSubtitle tag="h6" className="mb-2 text-muted">
              Accessed by clicking on the{' '}
              <Button outline color="secondary" size={'sm'}>
                <MapPin /> Jump
              </Button>{' '}
              button from the event detail popup.
            </CardSubtitle>
            <CardText>
              The mind map has jumped to the point in time at which this event
              had occured. The state of the canvas reflects the mind map was in
              just after this event had occurred. The affected node is
              higlighted with a blue border. The timeline focusses on the event
              in question.
            </CardText>
          </CardBody>
        </Card>
      ),
      caption: 'Timeline Jump',
    },
    {
      contents: (
        <Card className={'mb-4'}>
          <CardImg
            top
            width="100%"
            src="/img/help/Screenshot_2021-03-28-13 Hivemind.png"
            alt="Event Detail"
          />
          <CardBody>
            <CardTitle tag="h5">Event Detail (Focussed)</CardTitle>
            <CardSubtitle tag="h6" className="mb-2 text-muted">
              Shows the delta associated with an event (update, in this
              instance).
            </CardSubtitle>
            <CardText>
              Accessed by clicking on an (focussed) event on the timeline. The{' '}
              <Button outline color="secondary" size={'sm'}>
                <MapPin /> Jump
              </Button>{' '}
              button is now replaced with a{' '}
              <Button outline color="secondary" size={'sm'}>
                <Search /> Find
              </Button>{' '}
              button. This can be used to zoom in on the affected node on the
              canvas.
            </CardText>
          </CardBody>
        </Card>
      ),
      caption: 'Focussing on an Event Detail',
    },
    {
      contents: (
        <Card className={'mb-4'}>
          <CardImg
            top
            width="100%"
            src="/img/help/Screenshot_2021-03-28-14 Hivemind.png"
            alt="Find Node"
          />
          <CardBody>
            <CardTitle tag="h5">Find Node</CardTitle>
            <CardSubtitle tag="h6" className="mb-2 text-muted">
              Accessed by clicking on the{' '}
              <Button outline color="secondary" size={'sm'}>
                <Search /> Find
              </Button>{' '}
              button from the event detail popup.
            </CardSubtitle>
            <CardText>
              The canvas zooms in on the node affected by the event.
            </CardText>
          </CardBody>
        </Card>
      ),
      caption: 'Find Node',
    },
  ]

  const next = () => {
    if (animating) {
      return
    }

    const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1
    setActiveIndex(nextIndex)
  }

  const previous = () => {
    if (animating) {
      return
    }

    const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1
    setActiveIndex(nextIndex)
  }

  const slides = items.map((item, idx) => {
    return (
      <CarouselItem
        onExiting={() => setAnimating(true)}
        onExited={() => setAnimating(false)}
        key={idx}
        interval={false}
      >
        {item.contents}
      </CarouselItem>
    )
  })

  return (
    <Carousel activeIndex={activeIndex} next={next} previous={previous}>
      {slides}
      <CarouselControl
        direction="prev"
        directionText="Previous"
        onClickHandler={previous}
      />
      <CarouselControl
        direction="next"
        directionText="Next"
        onClickHandler={next}
      />
    </Carousel>
  )
}
Example #17
Source File: help.js    From hivemind with Apache License 2.0 4 votes vote down vote up
RevealCarousel = () => {
  const [activeIndex, setActiveIndex] = useState(0)
  const [animating, setAnimating] = useState(false)

  const items = [
    {
      contents: (
        <Card className={'mb-4'}>
          <CardImg
            top
            width="100%"
            src="/img/help/Screenshot_2021-03-28-9 Hivemind.png"
            alt="Context Menu"
          />
          <CardBody>
            <CardTitle tag="h5">Open the Context Menu</CardTitle>
            <CardSubtitle tag="h6" className="mb-2 text-muted">
              The &lsquo;<Eye /><ArrowDownRight /> Reveal&rsquo; option is accessible from any node that
              has hidden children.
            </CardSubtitle>
            <CardText>
              Used to reveal (un-hide) the entire sub-tree under the node.
            </CardText>
          </CardBody>
        </Card>
      ),
      caption: 'Open the Context Menu',
    },
    {
      contents: (
        <Card className={'mb-4'}>
          <CardImg
            top
            width="100%"
            src="/img/help/Screenshot_2021-03-28-15 Hivemind.png"
            alt="Reveal Node"
          />
          <CardBody>
            <CardTitle tag="h5">Reveal a Node</CardTitle>
            <CardSubtitle tag="h6" className="mb-2 text-muted">
              Accessed by clicking on the &lsquo;<Eye /><ArrowDownRight /> Reveal&rsquo; option from the context menu.
            </CardSubtitle>
            <CardText>
              Reveals the entire sub-tree under this node. Un-shades the node to
              indicate no hidden children.
            </CardText>
          </CardBody>
        </Card>
      ),
      caption: 'Reveal a Node',
    },
  ]

  const next = () => {
    if (animating) {
      return
    }

    const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1
    setActiveIndex(nextIndex)
  }

  const previous = () => {
    if (animating) {
      return
    }

    const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1
    setActiveIndex(nextIndex)
  }

  const slides = items.map((item, idx) => {
    return (
      <CarouselItem
        onExiting={() => setAnimating(true)}
        onExited={() => setAnimating(false)}
        key={idx}
      >
        {item.contents}
      </CarouselItem>
    )
  })

  return (
    <Carousel
      activeIndex={activeIndex}
      next={next}
      previous={previous}
      interval={false}
    >
      {slides}
      <CarouselControl
        direction="prev"
        directionText="Previous"
        onClickHandler={previous}
      />
      <CarouselControl
        direction="next"
        directionText="Next"
        onClickHandler={next}
      />
    </Carousel>
  )
}
Example #18
Source File: help.js    From hivemind with Apache License 2.0 4 votes vote down vote up
HideCarousel = () => {
  const [activeIndex, setActiveIndex] = useState(0)
  const [animating, setAnimating] = useState(false)

  const items = [
    {
      contents: (
        <Card className={'mb-4'}>
          <CardImg
            top
            width="100%"
            src="/img/help/Screenshot_2021-03-28-4 Hivemind.png"
            alt="Context Menu"
          />
          <CardBody>
            <CardTitle tag="h5">Open the Context Menu</CardTitle>
            <CardSubtitle tag="h6" className="mb-2 text-muted">
              The &lsquo;<EyeOff /> Hide&rsquo; option is accessible from any node on the
              canvas (except root).
            </CardSubtitle>
            <CardText>Useful for reducing clutter on the canvas.</CardText>
          </CardBody>
        </Card>
      ),
      caption: 'Open the Context Menu',
    },
    {
      contents: (
        <Card className={'mb-4'}>
          <CardImg
            top
            width="100%"
            src="/img/help/Screenshot_2021-03-28-8 Hivemind.png"
            alt="Hide Node"
          />
          <CardBody>
            <CardTitle tag="h5">Hide a Node</CardTitle>
            <CardSubtitle tag="h6" className="mb-2 text-muted">
              Accessed by clicking on the &lsquo;<EyeOff /> Hide&rsquo; option from the
              context menu.
            </CardSubtitle>
            <CardText>
              Hides the entire sub-tree under this node (as well as the node
              itself). Shades the parent to indicate hidden children.
            </CardText>
          </CardBody>
        </Card>
      ),
      caption: 'Hide a Child Node',
    },
  ]

  const next = () => {
    if (animating) {
      return
    }

    const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1
    setActiveIndex(nextIndex)
  }

  const previous = () => {
    if (animating) {
      return
    }

    const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1
    setActiveIndex(nextIndex)
  }

  const slides = items.map((item, idx) => {
    return (
      <CarouselItem
        onExiting={() => setAnimating(true)}
        onExited={() => setAnimating(false)}
        key={idx}
      >
        {item.contents}
      </CarouselItem>
    )
  })

  return (
    <Carousel
      activeIndex={activeIndex}
      next={next}
      previous={previous}
      interval={false}
    >
      {slides}
      <CarouselControl
        direction="prev"
        directionText="Previous"
        onClickHandler={previous}
      />
      <CarouselControl
        direction="next"
        directionText="Next"
        onClickHandler={next}
      />
    </Carousel>
  )
}
Example #19
Source File: help.js    From hivemind with Apache License 2.0 4 votes vote down vote up
CreateChildCarousel = () => {
  const [activeIndex, setActiveIndex] = useState(0)
  const [animating, setAnimating] = useState(false)

  const items = [
    {
      contents: (
        <Card className={'mb-4'}>
          <CardImg
            top
            width="100%"
            src="/img/help/Screenshot_2021-03-28-4 Hivemind.png"
            alt="Context Menu"
          />
          <CardBody>
            <CardTitle tag="h5">Open the Context Menu</CardTitle>
            <CardSubtitle tag="h6" className="mb-2 text-muted">
              Accessible from any node on the canvas.
            </CardSubtitle>
            <CardText>
              Contents may vary depending on state of mindmap and node.
            </CardText>
          </CardBody>
        </Card>
      ),
      caption: 'Open the Context Menu',
    },
    {
      contents: (
        <Card className={'mb-4'}>
          <CardImg
            top
            width="100%"
            src="/img/help/Screenshot_2021-03-28-5 Hivemind.png"
            alt="Child Node"
          />
          <CardBody>
            <CardTitle tag="h5">Create a Child Node</CardTitle>
            <CardSubtitle tag="h6" className="mb-2 text-muted">
              Accessed by clicking on the &lsquo;<Plus /> Child&rsquo; option from the
              context menu.
            </CardSubtitle>
            <CardText>
              Type a name and hit ⏎. The newly created child node will show up
              under the node from which the context menu was opened.
            </CardText>
          </CardBody>
        </Card>
      ),
      caption: 'Create a Child Node',
    },
  ]

  const next = () => {
    if (animating) {
      return
    }

    const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1
    setActiveIndex(nextIndex)
  }

  const previous = () => {
    if (animating) {
      return
    }

    const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1
    setActiveIndex(nextIndex)
  }

  const slides = items.map((item, idx) => {
    return (
      <CarouselItem
        onExiting={() => setAnimating(true)}
        onExited={() => setAnimating(false)}
        key={idx}
        interval={false}
      >
        {item.contents}
      </CarouselItem>
    )
  })

  return (
    <Carousel activeIndex={activeIndex} next={next} previous={previous}>
      {slides}
      <CarouselControl
        direction="prev"
        directionText="Previous"
        onClickHandler={previous}
      />
      <CarouselControl
        direction="next"
        directionText="Next"
        onClickHandler={next}
      />
    </Carousel>
  )
}
Example #20
Source File: App.js    From RT7-example with MIT License 4 votes vote down vote up
App = () => {
  const [data, setData] = useState([]);
  useEffect(() => {
    const doFetch = async () => {
      const response = await fetch('https://randomuser.me/api/?results=100');
      const body = await response.json();
      const contacts = body.results;
      console.log(contacts);
      setData(contacts);
    };
    doFetch();
  }, []);

  const renderRowSubComponent = (row) => {
    const {
      name: { first, last },
      location: { city, street, postcode },
      picture,
      cell,
    } = row.original;
    return (
      <Card style={{ width: '18rem', margin: '0 auto' }}>
        <CardImg top src={picture.large} alt='Card image cap' />
        <CardBody>
          <CardTitle>
            <strong>{`${first} ${last}`} </strong>
          </CardTitle>
          <CardText>
            <strong>Phone</strong>: {cell} <br />
            <strong>Address:</strong>{' '}
            {`${street.name} ${street.number} - ${postcode} - ${city}`}
          </CardText>
        </CardBody>
      </Card>
    );
  };

  const columns = useMemo(
    () => [
      {
        Header: () => null,
        id: 'expander', // 'id' is required
        Cell: ({ row }) => (
          <span {...row.getToggleRowExpandedProps()}>
            {row.isExpanded ? '?' : '?'}
          </span>
        ),
      },
      {
        Header: 'Title',
        accessor: 'name.title',
        disableSortBy: true,
        Filter: SelectColumnFilter,
        filter: 'equals',
      },
      {
        Header: 'First Name',
        accessor: 'name.first',
      },
      {
        Header: 'Last Name',
        accessor: 'name.last',
      },
      {
        Header: 'Email',
        accessor: 'email',
      },
      {
        Header: 'City',
        accessor: 'location.city',
      },
      {
        Header: 'Hemisphere',
        accessor: (values) => {
          const { latitude, longitude } = values.location.coordinates;
          const first = Number(latitude) > 0 ? 'N' : 'S';
          const second = Number(longitude) > 0 ? 'E' : 'W';
          return first + '/' + second;
        },
        disableSortBy: true,
        Filter: SelectColumnFilter,
        filter: 'equals',
        Cell: ({ cell }) => {
          const { value } = cell;

          const pickEmoji = (value) => {
            let first = value[0]; // N or S
            let second = value[2]; // E or W
            const options = ['⇖', '⇗', '⇙', '⇘'];
            let num = first === 'N' ? 0 : 2;
            num = second === 'E' ? num + 1 : num;
            return options[num];
          };

          return (
            <div style={{ textAlign: 'center', fontSize: 18 }}>
              {pickEmoji(value)}
            </div>
          );
        },
      },
    ],
    []
  );

  return (
    <Container style={{ marginTop: 100 }}>
      <TableContainer
        columns={columns}
        data={data}
        renderRowSubComponent={renderRowSubComponent}
      />
    </Container>
  );
}
Example #21
Source File: myBlog.component.js    From blogApp with MIT License 4 votes vote down vote up
render() {
        const blog = this.props.blog;
        return (
            <div
                className='col-12 col-md-6 col-lg-4 col-xl-3 mb-5'
                key={blog._id}>
                <Card className='p-1 m-1' id='cards'>
                    <Card>
                        <CardImg
                            top
                            width='100%'
                            src={blog.image}
                            alt='Card image cap'
                            className='img-fluid'
                        />
                        <CardImgOverlay>
                            <h3>
                                <FontAwesomeIcon
                                    className='text-danger'
                                    icon={faHeart}
                                />{" "}
                                {blog.likes.length}
                            </h3>
                        </CardImgOverlay>
                    </Card>

                    <CardBody>
                        <CardTitle className='text-primary'>
                            <h5>
                                {blog.title}
                                {this.state.liked ? (
                                    <span
                                        className='float-right '
                                        style={{ cursor: "pointer" }}
                                        onClick={this.toggleLike}
                                    />
                                ) : (
                                    <span
                                        className='float-right '
                                        onClick={this.toggleLike}>
                                        {/* <FontAwesomeIcon
                                            style={{
                                                color: "rgba(0,0,0,0.2)",
                                                cursor: "pointer",
                                            }}
                                            icon={faHeart}
                                            className=''
                                        /> */}
                                    </span>
                                )}
                            </h5>
                        </CardTitle>
                        <CardSubtitle>
                            {"-"}
                            <em>@{blog.author.username}</em>
                        </CardSubtitle>
                        <br />
                        <CardText className=''>
                            {blog.body.substring(0, 50)}
                            {" ..."}
                        </CardText>
                        <div className='row justify-content-center'>
                            <Button
                                className='btn btn-sm col-5 mr-1'
                                color='success'>
                                <Link
                                    to={{
                                        pathname: `/blog/${blog._id}`,
                                        blog: { blog },
                                    }}
                                    className='text-decoration-none text-white'>
                                    Read More
                                </Link>
                            </Button>
                            <Button
                                className='col-5 btn btn-sm ml-1'
                                color='danger'
                                onClick={this.showLikes}>
                                Likes
                            </Button>
                        </div>
                    </CardBody>
                    {blog.date && (
                        <CardFooter className='small '>
                            <FontAwesomeIcon
                                icon={faCalendar}
                                className='mr-2'
                            />
                            {new Intl.DateTimeFormat("en-US", {
                                month: "long",
                                day: "numeric",
                                year: "numeric",
                                hour: "numeric",
                                minute: "numeric",
                            }).format(Date.parse(blog.date))}
                            {/* {blog.date} */}
                            {this.state.isOpen && (
                                <div className='likes m-3'>
                                    <h6>
                                        <FontAwesomeIcon
                                            className='text-danger'
                                            icon={faHeart}
                                        />{" "}
                                        {this.state.likes.length} Likes
                                    </h6>
                                    <ul className='list-group list-group-flush'>
                                        {this.state.likes.map((user) => (
                                            <li className='list-group-item py-2 pl-0'>
                                                <FontAwesomeIcon
                                                    icon={faUserCircle}
                                                    // className='text-danger'
                                                />
                                                {"  "}
                                                {user.username}
                                            </li>
                                        ))}
                                    </ul>
                                </div>
                            )}
                        </CardFooter>
                    )}
                </Card>
            </div>
        );
    }
Example #22
Source File: blogList.component.js    From blogApp with MIT License 4 votes vote down vote up
render() {
        const blog = this.props.blog;

        return (
            <div
                className='col-12 col-md-6 col-lg-4 col-xl-3 mb-5'
                key={blog._id}>
                <Card className='p-1 m-1 h-100' id='cards'>
                    <Card>
                        <CardImg
                            top
                            width='100%'
                            src={blog.image}
                            alt='Card image cap'
                            className='img-fluid'
                        />
                        <CardImgOverlay>
                            <h3>
                                <FontAwesomeIcon
                                    className='text-danger'
                                    icon={faHeart}
                                />{" "}
                                {this.state.likes}
                            </h3>
                        </CardImgOverlay>
                    </Card>

                    <CardBody className='d-flex flex-column'>
                        <CardTitle className='text-primary'>
                            <h5>
                                {blog.title}
                                {this.state.liked ? (
                                    <span
                                        className='float-right '
                                        style={{ cursor: "pointer" }}
                                        onClick={this.toggleLike}>
                                        <FontAwesomeIcon
                                            icon={faHeart}
                                            className='text-danger'
                                        />
                                    </span>
                                ) : (
                                    <span
                                        className='float-right '
                                        onClick={this.toggleLike}>
                                        <FontAwesomeIcon
                                            style={{
                                                color: "rgba(0,0,0,0.2)",
                                                cursor: "pointer",
                                            }}
                                            icon={faHeart}
                                            className=''
                                        />
                                    </span>
                                )}
                            </h5>
                        </CardTitle>
                        <CardSubtitle>
                            {"-"}
                            <em>@{blog.author.username}</em>
                        </CardSubtitle>
                        <br />
                        <CardText className=''>
                            {blog.body.substring(0, 70)}
                            {" ..."}
                        </CardText>
                        <Link
                            to={{
                                pathname: `/blog/${blog._id}`,
                                blog: { blog },
                            }}
                            className='text-decoration-none mt-auto'>
                            <Button className='btn btn-sm' color='success'>
                                Read More
                            </Button>
                        </Link>
                    </CardBody>
                    {blog.date && (
                        <CardFooter className='small '>
                            <FontAwesomeIcon
                                icon={faCalendar}
                                className='mr-2'
                            />
                            {new Intl.DateTimeFormat("en-US", {
                                month: "long",
                                day: "numeric",
                                year: "numeric",
                                hour: "numeric",
                                minute: "numeric",
                            }).format(Date.parse(blog.date))}
                            {/* {blog.date} */}
                        </CardFooter>
                    )}
                </Card>
            </div>
        );
    }
Example #23
Source File: blog.component.js    From blogApp with MIT License 4 votes vote down vote up
render() {
        return (
            <div className='pt-2 px-3'>
                <div className='row mr-auto ml-0 mb-4 mt-0'>
                    <Button
                        color='primary'
                        size='lg'
                        onClick={() => {
                            window.location.href = "/";
                        }}
                        style={{
                            width: "60px",
                            height: "60px",
                            borderRadius: "50%",
                        }}>
                        <FontAwesomeIcon icon={faArrowLeft} />
                    </Button>
                </div>
                {!this.state.loaded ? (
                    <ReactLoading
                        type={"spin"}
                        color={"orange"}
                        height={"100vh"}
                        width={"40%"}
                        className='loading'
                    />
                ) : (
                    <Card id='blog' className='p-2 col-12 singleBlog'>
                        <CardImg
                            src={this.state.image}
                            alt='Card image cap'
                            className='img-thumbnail'
                        />
                        <CardBody>
                            <CardTitle className='text-primary'>
                                <h5>
                                    {this.state.title}
                                    <span className='float-right text-secondary'>
                                        {"-"}
                                        <em>@{this.state.author.username}</em>
                                    </span>
                                </h5>
                            </CardTitle>
                            {this.state.date !== "" && (
                                <CardSubtitle className='text-dark'>
                                    <FontAwesomeIcon
                                        icon={faCalendar}
                                        className='mr-2'
                                    />
                                    {new Intl.DateTimeFormat("en-US", {
                                        month: "long",
                                        day: "numeric",
                                        year: "numeric",
                                        hour: "numeric",
                                        minute: "numeric",
                                    }).format(Date.parse(this.state.date))}
                                    <span className='float-right'>
                                        <FontAwesomeIcon
                                            className='text-danger'
                                            icon={faHeart}
                                        />{" "}
                                        {this.state.likes.length}
                                    </span>
                                </CardSubtitle>
                            )}
                            <CardText>
                                <br />
                                {this.state.body}
                            </CardText>
                        </CardBody>
                        <CardFooter>
                            {this.props.user !== null &&
                                this.props.user._id ===
                                    this.state.author.id && (
                                    <div
                                        style={{ display: "flex" }}
                                        className='p-1'>
                                        <Button
                                            className='btn btn-danger mr-1'
                                            style={{ width: "48%" }}
                                            onClick={this.deleteBlog}>
                                            Delete
                                        </Button>{" "}
                                        <Button
                                            className='btn btn-warning ml-1'
                                            style={{ width: "48%" }}
                                            onClick={this.toggleModal}>
                                            Edit
                                        </Button>
                                    </div>
                                )}
                        </CardFooter>
                    </Card>
                )}
                <Modal
                    isOpen={this.state.isModalOpen}
                    fade={false}
                    toggle={this.toggleModal}>
                    <ModalHeader toggle={this.toggleModal}>
                        Add a blog
                    </ModalHeader>
                    <Form onSubmit={this.onSubmit}>
                        <ModalBody>
                            <FormGroup>
                                <Label htmlFor='title'>title</Label>
                                <Input
                                    type='text'
                                    id='title'
                                    onChange={this.ontitleChange}
                                    value={this.state.title}
                                    name='title'
                                />
                            </FormGroup>
                            <FormGroup>
                                <Label htmlFor='imageURL'>imageURL</Label>
                                <Input
                                    type='text'
                                    id='imageURL'
                                    onChange={this.onimgChange}
                                    value={this.state.image}
                                    name='imageURL'
                                />
                            </FormGroup>
                            <FormGroup>
                                <Label htmlFor='body'>body</Label>
                                <Input
                                    type='textarea'
                                    id='body'
                                    onChange={this.onbodyChange}
                                    value={this.state.body}
                                    name='body'
                                />
                            </FormGroup>
                        </ModalBody>
                        <ModalFooter>
                            <Button
                                type='submit'
                                value='submit'
                                color='primary'>
                                UPDATE BLOG
                            </Button>
                        </ModalFooter>
                    </Form>
                </Modal>
            </div>
        );
    }