A Pen by Adam

Thumbnail
This awesome code was written by emrts, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright emrts ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Adam</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="wrapper"><div class="md-virtual-repeat-offsetter" role="presentation">
      <!-- mdVirtualRepeat: accommodation in $ctrl.accommodations --><div md-virtual-repeat="accommodation in $ctrl.accommodations" style="opacity: 1; order: 1;" class="ng-scope">
        <div>
          <div layout="column" class="layout-column">
            <p class="ng-binding">acc1, start: 1, end: 15
              <small>
                <!-- ngIf: !!accommodation.single_beds --><span ng-if="!!accommodation.single_beds" class="ng-binding ng-scope" style="">1 single beds</span><!-- end ngIf: !!accommodation.single_beds -->
                <!-- ngIf: !!accommodation.single_beds && !!accommodation.twin_beds --><span ng-if="!!accommodation.single_beds &amp;&amp; !!accommodation.twin_beds" class="ng-scope" style=""> &amp; </span><!-- end ngIf: !!accommodation.single_beds && !!accommodation.twin_beds -->
                <!-- ngIf: !!accommodation.twin_beds --><span ng-if="!!accommodation.twin_beds" class="ng-binding ng-scope">1 twin beds</span><!-- end ngIf: !!accommodation.twin_beds -->
                <span class="ng-binding">(max 3 people)</span>
              </small>
            </p>
            <div>
              <div>
              </div>
              <!-- ngRepeat: days in accommodation.timeline --><div ng-repeat="days in accommodation.timeline" layout="row" class="ng-scope layout-row" style="">
                <!-- ngRepeat: day in accommodation.before -->
                <!-- ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">1</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">2</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">3</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: red;" class="ng-binding ng-scope">4</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: red;" class="ng-binding ng-scope">5</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">6</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">7</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">8</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">9</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">10</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: red;" class="ng-binding ng-scope">11</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: red;" class="ng-binding ng-scope">12</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: red;" class="ng-binding ng-scope">13</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">14</small><!-- end ngRepeat: day in days -->
                <!-- ngRepeat: day in accommodation.after --><small ng-repeat="day in accommodation.after" style="padding: 5px; background: gray;" class="ng-binding ng-scope">15</small><!-- end ngRepeat: day in accommodation.after --><small ng-repeat="day in accommodation.after" style="padding: 5px; background: gray;" class="ng-binding ng-scope">16</small><!-- end ngRepeat: day in accommodation.after --><small ng-repeat="day in accommodation.after" style="padding: 5px; background: gray;" class="ng-binding ng-scope">17</small><!-- end ngRepeat: day in accommodation.after --><small ng-repeat="day in accommodation.after" style="padding: 5px; background: gray;" class="ng-binding ng-scope">18</small><!-- end ngRepeat: day in accommodation.after --><small ng-repeat="day in accommodation.after" style="padding: 5px; background: gray;" class="ng-binding ng-scope">19</small><!-- end ngRepeat: day in accommodation.after -->
              </div><!-- end ngRepeat: days in accommodation.timeline --><div ng-repeat="days in accommodation.timeline" layout="row" class="ng-scope layout-row">
                <!-- ngRepeat: day in accommodation.before -->
                <!-- ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">1</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">2</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">3</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: red;" class="ng-binding ng-scope">4</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: red;" class="ng-binding ng-scope">5</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">6</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">7</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">8</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">9</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">10</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: red;" class="ng-binding ng-scope">11</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: red;" class="ng-binding ng-scope">12</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: red;" class="ng-binding ng-scope">13</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">14</small><!-- end ngRepeat: day in days -->
                <!-- ngRepeat: day in accommodation.after --><small ng-repeat="day in accommodation.after" style="padding: 5px; background: gray;" class="ng-binding ng-scope">15</small><!-- end ngRepeat: day in accommodation.after --><small ng-repeat="day in accommodation.after" style="padding: 5px; background: gray;" class="ng-binding ng-scope">16</small><!-- end ngRepeat: day in accommodation.after --><small ng-repeat="day in accommodation.after" style="padding: 5px; background: gray;" class="ng-binding ng-scope">17</small><!-- end ngRepeat: day in accommodation.after --><small ng-repeat="day in accommodation.after" style="padding: 5px; background: gray;" class="ng-binding ng-scope">18</small><!-- end ngRepeat: day in accommodation.after --><small ng-repeat="day in accommodation.after" style="padding: 5px; background: gray;" class="ng-binding ng-scope">19</small><!-- end ngRepeat: day in accommodation.after -->
              </div><!-- end ngRepeat: days in accommodation.timeline -->
              <!-- {{$ctrl.getTimeline(accommodation)}} -->
            </div>
          </div>
          <!-- <md-button class="md-icon-button" ng-click="$ctrl.root.openDialog({ method: 'edit', type: 'accommodation', id: accommodation._id })">
            <md-icon>edit</md-icon>
          </md-button> -->
          <!-- <md-button class="md-icon-button" ng-click="$ctrl.selectAccommodation(accommodation)">
            <md-icon ng-if="$ctrl.selectedAccommodation !== accommodation._id">person_add</md-icon>
            <md-icon ng-if="$ctrl.selectedAccommodation === accommodation._id">cancel</md-icon>
          </md-button> -->
        </div>
        <md-divider class="md-bright-theme"></md-divider>
      </div><div md-virtual-repeat="accommodation in $ctrl.accommodations" style="opacity: 1; order: 1;" class="ng-scope">
        <div>
          <div layout="column" class="layout-column">
            <p class="ng-binding">acc2, start: 3, end: 14
              <small>
                <!-- ngIf: !!accommodation.single_beds --><span ng-if="!!accommodation.single_beds" class="ng-binding ng-scope" style="">1 single beds</span><!-- end ngIf: !!accommodation.single_beds -->
                <!-- ngIf: !!accommodation.single_beds && !!accommodation.twin_beds --><span ng-if="!!accommodation.single_beds &amp;&amp; !!accommodation.twin_beds" class="ng-scope" style=""> &amp; </span><!-- end ngIf: !!accommodation.single_beds && !!accommodation.twin_beds -->
                <!-- ngIf: !!accommodation.twin_beds --><span ng-if="!!accommodation.twin_beds" class="ng-binding ng-scope">1 twin beds</span><!-- end ngIf: !!accommodation.twin_beds -->
                <span class="ng-binding">(max 3 people)</span>
              </small>
            </p>
            <div>
              <div>
              </div>
              <!-- ngRepeat: days in accommodation.timeline --><div ng-repeat="days in accommodation.timeline" layout="row" class="ng-scope layout-row" style="">
                <!-- ngRepeat: day in accommodation.before --><small ng-repeat="day in accommodation.before" style="padding: 5px; background: gray;" class="ng-binding ng-scope">1</small><!-- end ngRepeat: day in accommodation.before --><small ng-repeat="day in accommodation.before" style="padding: 5px; background: gray;" class="ng-binding ng-scope">2</small><!-- end ngRepeat: day in accommodation.before -->
                <!-- ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: red;" class="ng-binding ng-scope">3</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">4</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">5</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">6</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">7</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">8</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: red;" class="ng-binding ng-scope">9</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: red;" class="ng-binding ng-scope">10</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: red;" class="ng-binding ng-scope">11</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">12</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">13</small><!-- end ngRepeat: day in days -->
                <!-- ngRepeat: day in accommodation.after --><small ng-repeat="day in accommodation.after" style="padding: 5px; background: gray;" class="ng-binding ng-scope">14</small><!-- end ngRepeat: day in accommodation.after --><small ng-repeat="day in accommodation.after" style="padding: 5px; background: gray;" class="ng-binding ng-scope">15</small><!-- end ngRepeat: day in accommodation.after --><small ng-repeat="day in accommodation.after" style="padding: 5px; background: gray;" class="ng-binding ng-scope">16</small><!-- end ngRepeat: day in accommodation.after --><small ng-repeat="day in accommodation.after" style="padding: 5px; background: gray;" class="ng-binding ng-scope">17</small><!-- end ngRepeat: day in accommodation.after --><small ng-repeat="day in accommodation.after" style="padding: 5px; background: gray;" class="ng-binding ng-scope">18</small><!-- end ngRepeat: day in accommodation.after --><small ng-repeat="day in accommodation.after" style="padding: 5px; background: gray;" class="ng-binding ng-scope">19</small><!-- end ngRepeat: day in accommodation.after -->
              </div><!-- end ngRepeat: days in accommodation.timeline -->
              <!-- {{$ctrl.getTimeline(accommodation)}} -->
            </div>
          </div>
          <!-- <md-button class="md-icon-button" ng-click="$ctrl.root.openDialog({ method: 'edit', type: 'accommodation', id: accommodation._id })">
            <md-icon>edit</md-icon>
          </md-button> -->
          <!-- <md-button class="md-icon-button" ng-click="$ctrl.selectAccommodation(accommodation)">
            <md-icon ng-if="$ctrl.selectedAccommodation !== accommodation._id">person_add</md-icon>
            <md-icon ng-if="$ctrl.selectedAccommodation === accommodation._id">cancel</md-icon>
          </md-button> -->
        </div>
        <md-divider class="md-bright-theme"></md-divider>
      </div><div md-virtual-repeat="accommodation in $ctrl.accommodations" style="opacity: 1; order: 1;" class="ng-scope">
        <div>
          <div layout="column" class="layout-column">
            <p class="ng-binding">acc3, start: 1, end: 20
              <small>
                <!-- ngIf: !!accommodation.single_beds --><span ng-if="!!accommodation.single_beds" class="ng-binding ng-scope" style="">1 single beds</span><!-- end ngIf: !!accommodation.single_beds -->
                <!-- ngIf: !!accommodation.single_beds && !!accommodation.twin_beds --><span ng-if="!!accommodation.single_beds &amp;&amp; !!accommodation.twin_beds" class="ng-scope" style=""> &amp; </span><!-- end ngIf: !!accommodation.single_beds && !!accommodation.twin_beds -->
                <!-- ngIf: !!accommodation.twin_beds --><span ng-if="!!accommodation.twin_beds" class="ng-binding ng-scope">1 twin beds</span><!-- end ngIf: !!accommodation.twin_beds -->
                <span class="ng-binding">(max 3 people)</span>
              </small>
            </p>
            <div>
              <div>
              </div>
              <!-- ngRepeat: days in accommodation.timeline --><div ng-repeat="days in accommodation.timeline" layout="row" class="ng-scope layout-row" style="">
                <!-- ngRepeat: day in accommodation.before -->
                <!-- ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: red;" class="ng-binding ng-scope">1</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: red;" class="ng-binding ng-scope">2</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: red;" class="ng-binding ng-scope">3</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">4</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">5</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">6</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">7</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">8</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">9</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">10</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: red;" class="ng-binding ng-scope">11</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: red;" class="ng-binding ng-scope">12</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: red;" class="ng-binding ng-scope">13</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: red;" class="ng-binding ng-scope">14</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">15</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">16</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">17</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">18</small><!-- end ngRepeat: day in days --><small ng-repeat="day in days" style="padding: 5px; background: green;" class="ng-binding ng-scope">19</small><!-- end ngRepeat: day in days -->
                <!-- ngRepeat: day in accommodation.after -->
              </div><!-- end ngRepeat: days in accommodation.timeline -->
              <!-- {{$ctrl.getTimeline(accommodation)}} -->
            </div>
          </div>
          <!-- <md-button class="md-icon-button" ng-click="$ctrl.root.openDialog({ method: 'edit', type: 'accommodation', id: accommodation._id })">
            <md-icon>edit</md-icon>
          </md-button> -->
          <!-- <md-button class="md-icon-button" ng-click="$ctrl.selectAccommodation(accommodation)">
            <md-icon ng-if="$ctrl.selectedAccommodation !== accommodation._id">person_add</md-icon>
            <md-icon ng-if="$ctrl.selectedAccommodation === accommodation._id">cancel</md-icon>
          </md-button> -->
        </div>
        <md-divider class="md-bright-theme"></md-divider>
      </div>
  </div></div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/emrts/a-pen-by-adam-QOvYdq */
.md-virtual-repeat-offsetter {
  margin-left: 100px;
}
.ng-binding small {
  position: fixed;
  left: 0;
  max-width: 100px;
}

.wrapper {
  max-height: 200px;
}

Comments