Difference between revisions of "Team:ICT-Mumbai/Notebook"

Line 55: Line 55:
  
  
−
<section class="timeline">
+
/* The actual timeline (the vertical ruler) */
−
  <ul>
+
.timeline {
−
    <li>
+
     position: relative;
−
      <div>
+
     max-width: 1200px;
−
        <time>Week 1</time> The first few weeks we ideated upon our problem statement and discussed ways to tackle
+
     margin: 0 auto;
−
them. After long discussions and much debate, we finally decided to work upon the issue that
+
}
−
we think is quite relevant not only in our country but also in a lot of developing and
+
−
developed countries, the real reason why public toilets are frowned upon and not used,
+
−
despite new government policies that encourage building and usage of public toilets. For our
+
−
inspiration and project summary see ‘project abstract’.
+
−
      </div>
+
−
     </li>
+
−
     <li>
+
−
      <div>
+
−
        <time>Week 2</time> During this week, we decided to approach different NGO’s and organizations that are
+
−
involved in promoting and providing better sanitation. Sulabh International is an India-based
+
−
NGO that promotes and provides better sanitation by building public pay and use toilets and
+
−
community toilets to name a few. To understand and evaluate the feasibility
+
−
of our idea and to understand the ground reality we decided to meet with the XYZ of Sulabh
+
−
Internation. A detailed transcript of our conversation with him can be found at our ‘human
+
−
practices’ tab
+
−
      </div>
+
−
     </li>
+
−
    <li>
+
−
      <div>
+
−
        <time>Week 3</time> We step into the lab
+
−
      </div>
+
−
    </li>
+
−
 
+
−
</ul>
+
−
</section>
+
  
−
*,
+
/* The actual timeline (the vertical ruler) */
−
*::before,
+
.timeline::after {
−
*::after {
+
    content: '';
−
  margin: 0;
+
    position: absolute;
−
  padding: 0;
+
    width: 6px;
−
  box-sizing: border-box;
+
    background-color: white;
 +
    top: 0;
 +
    bottom: 0;
 +
    left: 50%;
 +
    margin-left: -3px;
 
}
 
}
  
−
body {
+
body2 {
−
  font: normal 16px/1.5 "Helvetica Neue", sans-serif;
+
    background-color: #474e5d;
−
  background: #456990;
+
    font-family: Helvetica, sans-serif;
−
  color: #fff;
+
−
  overflow-x: hidden;
+
−
  padding-bottom: 50px;
+
−
}  /* INTRO SECTION
+
−
–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
−
 
+
−
.intro {
+
−
  background: #F45B69;
+
−
  padding: 100px 0;
+
 
}
 
}
  
 +
/* Container around content */
 
.container {
 
.container {
−
  width: 90%;
+
    padding: 10px 40px;
−
  max-width: 1200px;
+
    position: relative;
−
  margin: 0 auto;
+
    background-color: inherit;
−
  text-align: center;
+
    width: 50%;
 
}
 
}
  
−
h1 {
+
/* The circles on the timeline */
−
  font-size: 2.5rem;
+
.container::after {
 +
    content: '';
 +
    position: absolute;
 +
    width: 25px;
 +
    height: 25px;
 +
    right: -17px;
 +
    background-color: white;
 +
    border: 4px solid #FF9F55;
 +
    top: 15px;
 +
    border-radius: 50%;
 +
    z-index: 1;
 
}
 
}
  
−
 
+
/* Place the container to the left */
−
/* TIMELINE
+
.left {
−
–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
    left: 0;
−
 
+
−
.timeline ul {
+
−
  background: #456990;
+
−
  padding: 50px 0;
+
 
}
 
}
  
−
.timeline ul li {
+
/* Place the container to the right */
−
  list-style-type: none;
+
.right {
−
  position: relative;
+
    left: 50%;
−
  width: 6px;
+
−
  margin: 0 auto;
+
−
  padding-top: 50px;
+
−
  background: #fff;
+
 
}
 
}
  
−
.timeline ul li::after {
+
/* Add arrows to the left container (pointing right) */
−
  content: '';
+
.left::before {
−
  position: absolute;
+
    content: " ";
−
  left: 50%;
+
    height: 0;
−
  bottom: 0;
+
    position: absolute;
−
  transform: translateX(-50%);
+
    top: 22px;
−
  width: 30px;
+
    width: 0;
−
  height: 30px;
+
    z-index: 1;
−
  border-radius: 50%;
+
    right: 30px;
−
  background: inherit;
+
    border: medium solid white;
 +
    border-width: 10px 0 10px 10px;
 +
    border-color: transparent transparent transparent white;
 
}
 
}
  
−
.timeline ul li div {
+
/* Add arrows to the right container (pointing left) */
−
  position: relative;
+
.right::before {
−
  bottom: 0;
+
    content: " ";
−
  width: 400px;
+
    height: 0;
−
  padding: 15px;
+
    position: absolute;
−
  background: #F45B69;
+
    top: 22px;
 +
    width: 0;
 +
    z-index: 1;
 +
    left: 30px;
 +
    border: medium solid white;
 +
    border-width: 10px 10px 10px 0;
 +
    border-color: transparent white transparent transparent;
 
}
 
}
  
−
.timeline ul li div::before {
+
/* Fix the circle for containers on the right side */
−
  content: '';
+
.right::after {
−
  position: absolute;
+
    left: -16px;
−
  bottom: 7px;
+
−
  width: 0;
+
−
  height: 0;
+
−
  border-style: solid;
+
 
}
 
}
  
−
.timeline ul li:nth-child(odd) div {
+
/* The actual content */
−
  left: 45px;
+
.content {
 +
    padding: 20px 30px;
 +
    background-color: white;
 +
    position: relative;
 +
    border-radius: 6px;
 
}
 
}
  
−
.timeline ul li:nth-child(odd) div::before {
+
/* Media queries - Responsive timeline on screens less than 600px wide */
−
  left: -15px;
+
@media all and (max-width: 600px) {
−
  border-width: 8px 16px 8px 0;
+
   /* Place the timelime to the left */
−
  border-color: transparent #F45B69 transparent transparent;
+
   .timeline::after {
−
}
+
     left: 31px;
−
 
+
−
.timeline ul li:nth-child(even) div {
+
−
  left: -439px;
+
−
}
+
−
 
+
−
.timeline ul li:nth-child(even) div::before {
+
−
  right: -15px;
+
−
  border-width: 8px 0 8px 16px;
+
−
  border-color: transparent transparent transparent #F45B69;
+
−
}
+
−
 
+
−
time {
+
−
   display: block;
+
−
  font-size: 1.2rem;
+
−
  font-weight: bold;
+
−
  margin-bottom: 8px;
+
−
}
+
−
 
+
−
 
+
−
/* EFFECTS
+
−
–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
−
 
+
−
.timeline ul li::after {
+
−
   transition: background .5s ease-in-out;
+
−
}
+
−
 
+
−
.timeline ul li.in-view::after {
+
−
  background: #F45B69;
+
−
}
+
−
 
+
−
.timeline ul li div {
+
−
  visibility: hidden;
+
−
  opacity: 0;
+
−
  transition: all .5s ease-in-out;
+
−
}
+
−
 
+
−
.timeline ul li:nth-child(odd) div {
+
−
  transform: translate3d(200px, 0, 0);
+
−
}
+
−
 
+
−
.timeline ul li:nth-child(even) div {
+
−
  transform: translate3d(-200px, 0, 0);
+
−
}
+
−
 
+
−
.timeline ul li.in-view div {
+
−
  transform: none;
+
−
  visibility: visible;
+
−
  opacity: 1;
+
−
}
+
−
 
+
−
 
+
−
/* GENERAL MEDIA QUERIES
+
−
–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
−
 
+
−
@media screen and (max-width: 900px) {
+
−
  .timeline ul li div {
+
−
     width: 250px;
+
 
   }
 
   }
−
   .timeline ul li:nth-child(even) div {
+
    
−
     left: -289px;
+
  /* Full-width containers */
−
     /*250+45-6*/
+
  .container {
 +
     width: 100%;
 +
    padding-left: 70px;
 +
     padding-right: 25px;
 +
  }
 +
 
 +
  /* Make sure that all arrows are pointing leftwards */
 +
  .container::before {
 +
    left: 60px;
 +
    border: medium solid white;
 +
    border-width: 10px 10px 10px 0;
 +
    border-color: transparent white transparent transparent;
 
   }
 
   }
−
}
 
  
−
@media screen and (max-width: 600px) {
+
  /* Make sure all circles are at the same spot */
−
   .timeline ul li {
+
   .left::after, .right::after {
−
     margin-left: 20px;
+
     left: 15px;
 
   }
 
   }
−
   .timeline ul li div {
+
    
−
    width: calc(100vw - 91px);
+
   /* Make all right containers behave like the left ones */
−
   }
+
   .right {
−
  .timeline ul li:nth-child(even) div {
+
     left: 0%;
−
    left: 45px;
+
−
  }
+
−
   .timeline ul li:nth-child(even) div::before {
+
−
     left: -15px;
+
−
    border-width: 8px 16px 8px 0;
+
−
    border-color: transparent #F45B69 transparent transparent;
+
 
   }
 
   }
 
}
 
}
  
−
(function() {
+
</style>
−
 
+
</body>
−
  'use strict';
+
−
 
+
−
  // define variables
+
−
  var items = document.querySelectorAll(".timeline li");
+
−
 
+
−
  // check if an element is in viewport
+
−
  // http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
+
−
  function isElementInViewport(el) {
+
−
    var rect = el.getBoundingClientRect();
+
−
    return (
+
−
      rect.top >= 0 &&
+
−
      rect.left >= 0 &&
+
−
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+
−
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+
−
    );
+
−
  }
+
−
 
+
−
  function callbackFunc() {
+
−
    for (var i = 0; i < items.length; i++) {
+
−
      if (isElementInViewport(items[i])) {
+
−
        items[i].classList.add("in-view");
+
−
      }
+
−
    }
+
−
  }
+
−
 
+
−
  // listen for events
+
−
  window.addEventListener("load", callbackFunc);
+
−
  window.addEventListener("resize", callbackFunc);
+
−
  window.addEventListener("scroll", callbackFunc);
+
−
 
+
−
})();
+
  
 
<!-- Navbar (sit on top) -->
 
<!-- Navbar (sit on top) -->

Revision as of 13:15, 10 October 2017

ICT-Mumbai 2017

Week 1: Ideation

The first few weeks we ideated upon our problem statement and discussed ways to tackle them. After long discussions and much debate, we finally decided to work upon the issue that we think is quite relevant not only in our country but also in a lot of developing and developed countries, the real reason why public toilets are frowned upon and not used, despite new government policies that encourage building and usage of public toilets. For our inspiration and project summary see ‘project abstract’.

Week 2: Ground Reality

During this week, we decided to approach different NGO’s and organizations that are involved in promoting and providing better sanitation. Sulabh International is an India-based NGO that promotes and provides better sanitation by building public pay and use toilets and community toilets to name a few. To understand and evaluate the feasibility of our idea and to understand the ground reality we decided to meet with the XYZ of Sulabh Internation. A detailed transcript of our conversation with him can be found at our ‘human practices’ tab.

Week 3: We step into the lab!