metamaps--metamaps/app/assets/stylesheets/mobile.scss.erb

#mobile_header {
  display: none;
}

@media only screen and (max-width : 720px) and (min-width : 504px) {
  .sidebarSearch .tt-hint, .sidebarSearch .sidebarSearchField {
    width: 160px !important;
  }
}

@media only screen and (max-width : 390px) {
  .map .mapCard .mobileMetadata {
    width: 190px;
  }
}
@media only screen and (min-width : 390px) {
  .map .mapCard .mobileMetadata {
    width: 390px;
  }
}

/* Smartphones (portrait and landscape) ----------- the minimum space that two map cards can fit side by side */
@media only screen and (max-width : 504px) {
  .upperLeftUI, .upperRightUI, .openCheatsheet, .mapInfoIcon, .feedback-icon, .chat-box, #exploreMapsHeader {
    display: none !important;
  }

  #mobile_header {
    display: block;
  }

  .homeWrapper {
    width: 96%;
    padding: 0 2%;
  }
  .homeWrapper.homeText {
    margin-top: 80px;
  }
  .homeTitle {
    text-align: left;
  }
  .homeIntro {
    text-align: left;
  }
  .fullWidthWrapper.withVideo {
    height: auto;
  }
  .homeVideo {
    width: 100%;
    height: auto;
  }
  .fullWidthWrapper.withPartners {
    display: none;
  }
  .learnMoreCTA {
    display: none !important;
  }

  #yield {
    height: 100%;
  }

  .new_session, .new_user, .edit_user, .login, .forgotPassword {
    position: relative;
    top: auto;
    left: auto;
    width: 78%;
    padding: 16px 10%;
    margin: 50px auto 0 auto;
  }

  .centerGreyForm input[type="text"], .centerGreyForm input[type="email"], .centerGreyForm input[type="password"] {
    width: 100%;
  }

  .wrapper .mapInfoBox {
    position: fixed;
    top: 50px;
    right: 0px;
    bottom: auto;
    width: 100%;
    max-width: 360px;
  }

  #wrapper .requestInvite {
    width: 100%;
    padding: 0;
  }

  #exploreMaps > div {
    margin-top: 70px;
  }
  
  .mapper {
    width: 100%;
    margin: 0 0 30px 0;
  }

  .map.newMap {
    a {
      height: auto;
    }

    .newMapImage {
      position: relative;
      display: inline-block;
      height: 40px;
      width: 40px;
      left: auto;
      top: auto;
      margin: 0 0 0 8px;
      background-size: 40px 80px;
      vertical-align: middle;
    }

    span {
      vertical-align: middle;
      padding: 16px;
      display: inline-block;
    }
  }
  .map.newMap:hover .newMapImage {
    background-position: 0 -40px;
  }

  .map {
    width: 100%;
    margin: 0 0 30px 0;
    height: auto;

    .mapCard {
      height: auto;
      padding: 0;

      &:hover {
        .mainContent {
          filter: none;
        }
      }
      .mobileHasMapper, .mobileHasConversation {
        .mapperList {
          padding: 8px 16px;
          list-style-type: none;

          li {
            &.live {
              height: 32px;
              padding-left: 32px;
              font-size: 16px;
            }

            img {
              width: 24px;
              height: 24px;
              border-radius: 12px;
              display: inline-block;
              vertical-align: middle;
            }
            span {
              padding-left: 10px;
              font-size: 14px;
            }
          }
        }
      }
      .mobileHasMapper {
        background: url('<%= asset_path('junto.png') %>') no-repeat 12px 0;
      }
      .mobileHasConversation {
        background: url('<%= asset_path('junto.gif') %>') no-repeat 12px 0;
      }
      .mobileMetadata {
        margin: 0 auto;
      }
      .title {
        text-align: left;
        display: block;
        height: auto;
        padding: 16px;
      }
      .desc {
        padding: 0 16px;
      }
    }
  }
}

#mobile_header {
  height: 50px;
  background: #EEE;
  width: 100%;
  box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
  position: fixed;
}

#menu_icon {
  width: 50px;
  height: 50px;
  border-right: 1px solid #DDD;
  position: absolute;
  background: #EEE url('<%= asset_path('menu-alt-256.png') %>') no-repeat center center;
  background-size: 30px;
}

#header_content {
  position: absolute;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 10px 0 60px;
  font-size: 24px;
  line-height: 50px;
}

#mobile_menu {
  display: none;
  background: #EEE;
  position: fixed;
  top: 50px;
  border-top: 1px solid #DDD;
  padding: 10px;
  width: 200px;
  box-shadow: 3px 3px 3px rgba(0,0,0,0.23), 3px 3px 3px rgba(0,0,0,0.16);

  #menu_icon .unread-notifications-dot {
    top: 5px;
    left: 29px;
    width: 12px;
    height: 12px;
    border: 3px solid #eee;
  }

  li {
    padding: 10px;
    list-style: none;

    &.notifications {
      position: relative;
    }

    .unread-notifications-dot {
      top: 4px;
      right: 4px;
    }
  }


}

/*
 * the mobile menu, even if it's been opened by a user, should
 * not show up if they resize their browser back to full size
 */
@media only screen and (max-width : 504px) {
  #mobile_menu.visible {
    display: block;
  }
}

li.mobileMenuUser {
  border-bottom: 1px solid #BBB;
}

.mobileMenuUser img {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  border-radius: 16px;
}