poutine

infoz.html.erb

<style type="text/css">  
  
  /* Import Font */
  @font-face {  
    font-family: "Oakes Regular";
    src: url(/assets/Oakes-Regular.otf) format("truetype");
    font-weight: normal;
    font-style: normal;
  }
  
  /* Add Oakes Font */
  body{
    margin: initial;
    font-family: "Oakes Regular";
  }
  
    /* Remove Default Padding */
  p, h1, h2, h3, h4, h5, input, button, span, div {
    font-family: Oakes Regular;
    font-size: initial;
    /*margin: 0;*/
    padding-bottom: 0;
  }

  /* Remove Margin from <p></p> */
  p {
    font-family:Oakes Regular;
    text-align: left;
    margin: auto;
  }
  
  /* Anything that ends with 'z' is for text specifically */
  .centerz {
    text-align: center;
  }

  .rightz {
    text-align: right;
  }

  .whitez{
    color: #ffffff;
  }

  .charcoalz{
    color: #5b6d79;
  }
  
  /* Anything that ends with 'd' is for container/divs */
  .centerd {
    margin: 0 auto;
  }

  /* ie. Plant List (page title) */
  .main-text{
    font-size: 17px;
    color: #3D5A6C;
  }
  
  /* ie. "Details" or "No" button */
  .sub-text-primary {
    font-size: 15px;
    color: #3D5A6C;
  }
  
  /* ie. "This plant is easy..."(grey details) */
  .sub-text-secondary {
    font-size: 15px;
    color: #86939b;
  }
  
  /* ie. "Grow Time: 170 days" */
  .sub-text-tertiary {
    font-size: 15px;
    color: #95989A;
  }
  
  /* Plant List (plant titles) */
  .title-lg {
    font-size: 20px;
    text-align: center;
  }


  
  /* Each card slit (centered, grey, with 5px border radius) */
  .card{
    background: #f4f7f8;
    border-radius: 5px;
    display:flex;
    align-items: center;
  }
  
  /* Basic shadow on .card */
  .shadow{
    box-shadow: 0 2px 4px #d5e9f0;
  }
  


  /* Every button*/
  .btn {
    text-align: center;
    font-family: Oakes Regular;
    background: #F4F7F8;
  }

  .btn-primary-col {
    background: #A5D55D;
  }


  .btn-secondary-col {
    background: #d5e9f0;
  }
  
  /* */
  .btn-prompt {
    font-size: 15px;
    color: #86939b;
  }

  .btn-primary {
    background-color: 
  }

  .btn-detail{
    /*background: #F4F7F8*/
    font-size: 16px;
    color: #3D5A6C;
  }

  .btn-detail.whitez{
    font-size: 16px;
    color: #ffffff;
  }

  /* Advanced Data */
  .btn-advance {
    letter-spacing: 1px;
    font-size: 15px;
  }
  
  .btn-main {
    font-size: 16px;
    color: #ffffff;
  }

  .icon-sm {
    height: 12px;
  }

  .inline-icon {
    margin-left: 10px;
    margin-bottom: 5px;
  }

  .mtop30 {
    margin-top: 30px;
  }

  .mtop15 {
    margin-top: 15px;
  }

  .mleft30 {
    margin-left: 30px;
  }





  .plant-img {
    background-image: url("http://www.trulylovelycupcakes.com/images/tlcc%20flower.png");
    background-size: contain;
  }

  @media (max-width: 480px) {
    .plant-img {
      width: 102px;
      height: 107px;
    }
  }

  @media (max-width: 840px) and (min-width: 480px) {
    .plant-img {
      width: 204px;
      height: 214px;
    }
  }

  @media (min-width: 840px) {
    .plant-img {
      width: 204px;
      height: 214px;
    }
  }

  @media (min-width: 744px) {
    .container-static-width {
      box-sizing: border-box;
      /*border: 2px dashed teal;*/
      padding-right: 24px;
      padding-left: 24px;
      max-width: 696px;
    }
  }

  .details-container {
    padding: 15px 0 15px 0;
    border-top: 1px solid #F4F7F8;
    border-bottom: 1px solid #F4F7F8;
  }

  .review-info {
    font-size: 13px;
    color: #c5ced3;
    margin: 0;
    line-height: 16px;
    margin-left: 20px;
  }

  .review-row-user {
    height: 35px;
    display: inline-flex;
  } 

  .review-row-user-icon {
    height: 35px;
    width: 35px;
    border-radius: 35px;
    background: yellow;
  }

  /* TEMPORARY CSS*/
  .temporary-css {
    border: 1px solid teal;
    height: 100px;
    line-height: 50px;
    text-align: center;
    margin: 0 auto;
    font-weight: 800;
  }

  .temporary-css-2 {
    float: left;
    border: 1px dashed orange;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin: 0 auto;
    font-weight: 800;
  }

  .temporary-css-3 {
    float: right;
    border: 1px dashed purple;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin: 0 auto;
    font-weight: 800;
  }

  .temporary-css-4 {
    border: 1px dashed pink;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin: 0 auto;
    font-weight: 800;
  }
  
  /* DELETE ABOVE LATER ON MUHAHAHA */
  
  .review-breakdown {
    display: flex;
  }
  
  .review-breakdown-single-left {
    float: left;
    height: 10px;
  }


  .review-breakdown-single-right {
    float: right;
    height: 10px;
  }

</style>

<div class="mdl-grid">
  <h5 class="main-text mdl-cell mdl-cell--12-col mdl-cell--4-col-phone mdl-cell--8-col-tablet centerz">
    Plant list
  </h5>

  <div class="mdl-cell mdl-cell--6-col mdl-cell--2-col-phone mdl-cell--4-col-tablet centerd">
    <div class="plant-img centerd"></div>
  </div>
  
  <div class="mdl-cell mdl-cell--12-col mdl-cell-2-col-phone mdl-cell--8-col-tablet mtop30">
    <p class="main-text title-lg  centerz">
      <%= @plant.name %>
      <span class="icon-span"><img class="icon-sm inline-icon" src="/imgs/verified.svg"></span>
    </p>
    <div class="plant-info mtop30">
      <p class="centerz sub-text-tertiary">Grow time: <%= @plant.harvest_time %> days</p>
      <p class="centerz sub-text-tertiary">Wet Yield: 420 days</p>
      <p class="centerz sub-text-tertiary">Dry Yield: N/A</p>
    </div>
  </div>
  
  <div class="mdl-cell mdl-cell--6-col mdl-cell-4-col-phone mdl-cell--8-col-tablet centerd">
    <div class="">

      <div class="details-container mtop30">
        <p class="sub-text-primary">Details</p>
        <p class="sub-text-secondary">
          This plant is easy to grow; gives you about
        </p>
      </div>

      <div class="reviews-container mtop15">
        <p class="sub-text-secondary">
          Reviews (15)
          <span class="icon-span mleft30">
            <img class="icon-sm" src="/icons/star_single.svg">
            <img class="icon-sm" src="/icons/star_single.svg">
            <img class="icon-sm" src="/icons/star_single.svg">
            <img class="icon-sm" src="/icons/star_single.svg">
            <img class="icon-sm" src="/icons/star_single.svg">
          </span> 
        </p>

        <div class="review-breakdown">
          <div class="mdl-cell mdl-cell--12-col mdl-cell--4-col-phone mdl-cell--8-col-tablet">
            
            <div>
              <div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-phone mdl-cell--4-col-tablet review-breakdown-single-left">
                <p class="sub-text-secondary">
                  Accuracy
                </p>
              </div>          
              <div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-phone mdl-cell--4-col-tablet review-breakdown-single-right">
                <p>
                  <span class="icon-span">
                    <img class="icon-sm" src="/icons/star_single.svg">
                    <img class="icon-sm" src="/icons/star_single.svg">
                    <img class="icon-sm" src="/icons/star_single.svg">
                    <img class="icon-sm" src="/icons/star_single.svg">
                  </span>
                </p>
              </div>
            </div>

            <div>
              <div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-phone mdl-cell--4-col-tablet review-breakdown-single-left">
                <p class="sub-text-secondary">
                  Accuracy
                </p>
              </div>
              <div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-phone mdl-cell--4-col-tablet review-breakdown-single-right">
                <p>
                  <span class="icon-span">
                    <img class="icon-sm" src="/icons/star_single.svg">
                    <img class="icon-sm" src="/icons/star_single.svg">
                    <img class="icon-sm" src="/icons/star_single.svg">
                    <img class="icon-sm" src="/icons/star_single.svg">
                  </span>
                </p>
              </div>
            </div>

            <div>
              <div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-phone mdl-cell--4-col-tablet review-breakdown-single-left">
                <p class="sub-text-secondary">
                  Accuracy
                </p>
              </div>
              <div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-phone mdl-cell--4-col-tablet review-breakdown-single-right">
                <p>
                  <span class="icon-span">
                    <img class="icon-sm" src="/icons/star_single.svg">
                    <img class="icon-sm" src="/icons/star_single.svg">
                    <img class="icon-sm" src="/icons/star_single.svg">
                    <img class="icon-sm" src="/icons/star_single.svg">
                  </span>
                </p>
              </div>
            </div>
            
            <div>        
              <div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-phone mdl-cell--4-col-tablet review-breakdown-single-left">
                <p class="sub-text-secondary">
                  Accuracy
                </p>
              </div>
              <div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-phone mdl-cell--4-col-tablet review-breakdown-single-right">
                <p>
                  <span class="icon-span">
                    <img class="icon-sm" src="/icons/star_single.svg">
                    <img class="icon-sm" src="/icons/star_single.svg">
                    <img class="icon-sm" src="/icons/star_single.svg">
                    <img class="icon-sm" src="/icons/star_single.svg">
                  </span>
                </p>
              </div>
            </div>

          </div>
        </div>

        <div class="review-row mtop15">
          <div class="review-row-user">
            <div class="review-row-user-icon">

            </div>
            <div>
              <p class="review-info">Jot</p>
              <p class="review-info">Jan. 2017</p>
            </div>
          </div>
          <div class="review-comment mtop15">
            <p class="sub-text-secondary">This stuff got me high as heck!</p> 
          </div>
        </div>

      </div>
    </div>
  </div>
  <!-- End of container -->
</div>