$(".events, .close").click(function() { $(document.body).toggleClass("calendar"); }); FastClick.attach(document.body); $(".event-item").click(function(){ $(this).toggleClass("expanded"); });
<meta name="viewport" content="width=device-width, user-scalable=false;"> <div class="grid clearfix"> <div class="day header"><span>S</span></div> <div class="day header"><span>M</span></div> <div class="day header"><span>T</span></div> <div class="day header"><span>W</span></div> <div class="day header"><span>T</span></div> <div class="day header"><span>F</span></div> <div class="day header"><span>S</span></div> <div class="day"><span>1</span></div> <div class="day"><span>2</span></div> <div class="day"><span>3</span></div> <div class="day"><span>4</span></div> <div class="day events"> <span>5</span> <div class="event-number">99 events</div> <div class="event-bullet">•</div> </div> <div class="day"><span>6</span></div> <div class="day"><span>7</span></div> <div class="day events"> <span>8</span> <div class="event-number">1 event</div> <div class="event-bullet">•</div> </div> <div class="day"> <span>9</span> </div> <div class="day"><span>10</span></div> <div class="day"><span>11</span></div> <div class="day"><span>12</span></div> <div class="day"><span>13</span></div> <div class="day"><span>14</span></div> <div class="day"><span>15</span></div> <div class="day events"> <span>16</span> <div class="event-number">3 events</div> <div class="event-bullet">•</div> </div> <div class="day"> <span>17</span> </div> <div class="day"><span>18</span></div> <div class="day"><span>19</span></div> <div class="day"><span>20</span></div> <div class="day"><span>21</span></div> <div class="day"><span>22</span></div> <div class="day"> <span>23</span> </div> <div class="day events"> <span>24</span> <div class="event-number">88 events</div> <div class="event-bullet">•</div> </div> <div class="day"><span>25</span></div> <div class="day"><span>26</span></div> <div class="day events"> <span>27</span> <div class="event-number">14 events</div> <div class="event-bullet">•</div> </div> <div class="day"><span>28</span></div> <div class="day"><span>29</span></div> <div class="day"><span>30</span></div> <div class="day"></div> <div class="day"></div> <div class="day"></div> <div class="day"></div> <div class="day"></div> </div> <div class="event-container"> <header> <span class="close">×</span> <h1>Monday September 16</h1> <p class="instructions">Click on an event to see more info.</p> </header> <ul> <li class="event-item clearfix"> <div class="image"> <img src="http://placekitten.com/100/100"> </div> <div class="event-body"> <h3 class="event-title">Event 1</h3> <span class="event-time">11 am</span> <span class="expand">×</span> <section class="teaser"> <p> A short description. Maybe like two or three sentences. Just a teaser of what's inside. </p> </section> <section class="full-info"> <summary class="description"> <p> A longer description of the event. We can go wild here, a paragraph or two even. Lot's of information about the event can go here. </p> <p> You should come to this event because it's going to be fun. So much fun. </p> </summary> <div class="location"> <strong>Liberty Science Center</strong>, <div>222 Jersey City Blvd.</div> <div>Jersey City</div> <div>Visit <a href="#">http://example.com/</a> for more info</div> </div> </section> </div> </li> <li class="event-item clearfix"> <div class="event-body"> <h3 class="event-title">Event 2</h3> <span class="event-time">All Day</span> <span class="expand">×</span> <section class="teaser"> <p> A second event description. Also two or three sentences. Just a teaser of what's inside. </p> </section> <section class="full-info"> <summary class="description"> <p> A longer description of the event. We can go wild here, a paragraph or two even. Lot's of information about the event can go here. </p> <p> You should come to this event because it's going to be fun. So much fun. </p> </summary> <div class="location"> <strong>Cricket Hill Brewery Co.</strong>, <div>24 Kulick Rd.</div> <div>Fairfield</div> <span>Call 973-276-9415 or visit <a href="#"> www.CricketHillBrewery.com</a></span> </div> </section> </div> </li> <li class="event-item clearfix"> <div class="image"> <img src="http://placekitten.com/g/64/64"> </div> <div class="event-body"> <h3 class="event-title">Event 1</h3> <span class="event-time">11 am</span> <span class="expand">×</span> <section class="teaser"> <p> A short description. Maybe like two or three sentences. Just a teaser of what's inside. </p> </section> <section class="full-info"> <summary class="description"> <p> A longer description of the event. We can go wild here, a paragraph or two even. Lot's of information about the event can go here. </p> <p> You should come to this event because it's going to be fun. So much fun. </p> </summary> <div class="location"> <strong>Liberty Science Center</strong>, <div>222 Jersey City Blvd.</div> <div>Jersey City</div> <div>Visit <a href="#">http://example.com/</a> for more info</div> </div> </section> </div> </li> <li class="event-item clearfix"> <div class="event-body"> <h3 class="event-title">Event 2</h3> <span class="event-time">All Day</span> <span class="expand">×</span> <section class="teaser"> <p> A second event description. Also two or three sentences. Just a teaser of what's inside. </p> </section> <section class="full-info"> <summary class="description"> <p> A longer description of the event. We can go wild here, a paragraph or two even. Lot's of information about the event can go here. </p> <p> You should come to this event because it's going to be fun. So much fun. </p> </summary> <div class="location"> <strong>Cricket Hill Brewery Co.</strong>, <div>24 Kulick Rd.</div> <div>Fairfield</div> <span>Call 973-276-9415 or visit <a href="#"> www.CricketHillBrewery.com</a></span> </div> </section> </div> </li> <li class="event-item clearfix"> <div class="image"> <img src="http://placekitten.com/64/64"> </div> <div class="event-body"> <h3 class="event-title">Event 1</h3> <span class="event-time">11 am</span> <span class="expand">×</span> <section class="teaser"> <p> A short description. Maybe like two or three sentences. Just a teaser of what's inside. </p> </section> <section class="full-info"> <summary class="description"> <p> A longer description of the event. We can go wild here, a paragraph or two even. Lot's of information about the event can go here. </p> <p> You should come to this event because it's going to be fun. So much fun.</p> </summary> <div class="location"> <strong>Liberty Science Center</strong>, <div>222 Jersey City Blvd.</div> <div>Jersey City</div> <div>Visit <a href="#">http://example.com/</a> for more info</div> </div> </section> </div> </li> </ul> </div> <script type="text/template" id="event-template"> <li class="event-item clearfix"> <div class="image"> <img src="http://placekitten.com/100/100"> </div> <div class="event-body"> <h3 class="event-title"><%= event.title %></h3> <span class="event-time">11 am</span> <section class="teaser"> <p><%= event.teaser %></p> </section> <section class="full-info"> <summary class="description"> <%= event.description %> </summary> <div class="location"> <strong><%= event.location.title %></strong>, <div><%= event.location.street_number %> <%= event.location.street_name %></div> <div><%= event.location.city %></div> </div> </section> </div> </li> </script>
* { //margin: 0; box-sizing: border-box; } body.calendar { .grid { display: block; } .event-container { display: none; } } body:not(.calendar) { .grid { display: none; } .event-container { display: block; } } body { font-family: "Helvetica Neue"; font-weight: 200; background-color: #ddd; } .grid { padding: 0.5em; max-width: 968px; min-width: 300px; //position: relative; margin: 0 auto; background-color: white; } $width = 2px; .grid .header { //width: 100%; font-weight: 400; margin-bottom: 4px; background-color: #333; color: #ddd; //outline: 2px solid white; } .grid .day:nth-child(7n) { margin-right: 0; } $day-color = #ebebeb .day { background-color: $day-color; //background-color: #e6e6e6; //display: inline-block; float: left; width: 18px; width: 13.8571%; //width: calc('14.2857% - #{$width}'); //width: calc('(100% - #{6 * $width}) / 7'); padding: 1.8em 0 2em; margin: 0 0.5% 0.5% 0; //margin-bottom: 0.5%; text-align: center; //border-bottom: 2px solid white; position: relative; //margin-right: $width; //margin-right: 0.5%; } .events { background-color: darken($day-color, 4%); //padding: 1.25em 0; //color: #278ed3; font-weight: 400; } .event-number { position: absolute; left: 0; right: 0; line-height: 0.5; } .event-bullet { display: none; position: absolute; left: 0; right: 0; line-height: 0.5; } .day.events div { //text-decoration: underline; } .grid .day:empty { border: none; background-color: rgba(0,0,0,0); //outline: none; } .clearfix{ *zoom:1; } .clearfix:before,.clearfix:after{ display:table; content:" "; //line-height:0; } .clearfix:after{ clear:both; } @media all and (max-width: 600px) { .events .event-number { display: none; } .events .event-bullet { display: block; } .days { padding: 1.8em 0; } body { //background-color: purple; } } @media all and (max-width: 480px) and (min-width: 320px) { body { //background-color: red; } .day.events, .day { padding: 1.2em 0; } } @media all and (max-width: 320px) { body { //background-color: blue; } .day.events { //padding: 0.75em 0; } .event-bullet { line-height: 0.5; } .grid .day { padding: 1em 0; } } body { font-family: "Helvetica Neue", Helvetica, sans-serif; overflow: scroll; background-color: #ddd; color: #333; } .event-container { width: 75%; max-width: 968px; min-width: 300px; margin: 0 auto; .event-title { display: inline-block; line-height: 1; margin: 0em; } .close { /*position: absolute; right: 5%; top: 5%;*/ float: right; } header { position: relative; h1 { font-size: 1.9em; margin-bottom: 0.1em; } p { margin: 0; font-size: 0.9em; } } ul { list-style: none; padding-left: 0; } .event-item { overflow: hidden; border-radius: 2px; clear: both; background-color: white; box-shadow: 3px 3px black; border: 1px solid black; padding: 0.5em; margin: 1em 0; .expand { -webkit-transform: rotate(45deg); -webkit-transition: -webkit-transform 0.5s; position: absolute; right: 0; line-height: 0.7; vertical-align: middle; } .image { float: left; margin-right: 1em; img { display: block; } } .event-body { overflow: hidden; //min-height: 64px; position: relative; } .location { margin-top: 1em; } p { margin-bottom: 0; } /*.description { -webkit-transition-property: height; -webkit-transition-duration: 2s; -webkit-transition-timing-function: ease; //transition: opacity 0.5s ease, height 1s; }*/ &.expanded { .teaser { display: none; /* visibility: hidden; height: 0; margin: 0; */ } .full-info { display: block; //opacity: 1; } .expand { -webkit-transform: rotate(0); } } &:not(.expanded) .full-info { display: none; /*height: 0; visibility: hidden; opacity: 0;*/ } } @media all and (max-width: 470px) { header h1 { font-size: 1.7em; } } }