Map view

by nettaB

HTML

<div class='main'>
  <div class='title'> Agenda </div>
  <div class='list_item'>
    <div class='name cell'>סופר</div>
    <div class='place cell'>רחוב ההגנה</div>
    <div class='hour cell'>10:00</div>
    <div class='priority cell'>1</div>
    <input type='checkbox'> </div>
  <div class='list_item'>
    <div class='name cell'>לאסוף מהגן</div>
    <div class='place cell'>שדרות ההשכלה</div>
    <div class='hour cell'>14:00</div>
    <div class='priority cell'>1</div>
    <input type='checkbox'> </div>
  <div class='title button'> View geo agenda </div>  
  <div class='title'> Virtual Tasks </div>
  <div class='list_item'>
    <div class='expand cell'>+</div>
    <div class='place cell'>טלפונים</div>
  </div>
  <div class='list_item'>
    <div class='expand cell'>+</div>
    <div class='place cell'>מיילים</div>
  </div>
  <div class='list_item'>
    <div class='expand cell'>+</div>
    <div class='place cell'>קניות אונליין</div>
  </div>
  <div class='list_item'>
    <div class='expand cell'>+</div>
    <div class='place cell'>TODO</div>
  </div>
</div>

CSS

.main {
  width: 360px;
  height: 640px;
  border: 1px solid;
}

.title,
.list_item {
  width: 300px;
  height: 30px;
  border: 1px solid;
  margin: 20px;
  //display: inline-block;
}

.title {
  height: 25px;
}

.cell {
  display: inline-block;
  direction: rtl;
  margin: 2px 5px;
}

.list_item {
  direction: rtl;
}
.button {
  cursor: crosshair;
}