amatriain/feedbunch

View on GitHub
FeedBunch-app/app/assets/stylesheets/partials/_entries.scss

Summary

Maintainability
Test Coverage
/* For screens smaller than 992px, Bootstrap v3 "md" (medium) breakpoint. */
/* I.e. for xs- and sm- screens, not for md- and lg- screens */
@media (max-width: $screen-md-min) {
  #entries-column {
    padding: {
      left: 5px;
      right:5px;
    }

    i.current-entry {
      display: none;
    }

    .entry-feed-column {
      padding: {
        left: 5px;
        right: 10px;
      }
    }

    .entry-title-column {
      padding: {
        left: 5px;
        right: 5px;
      }
    }

    .entry-published-column {
      padding: {
        left: 5px;
        right: 0;
      }
    }
  }
}

/* For screens wider than 992px, Bootstrap v3 "md" (medium) breakpoint. */
/* I.e. for md- and lg- screens, not for xs- and sm- screens */
@media (min-width: $screen-md-min) {
  #feed-entries {
    .entry {
      a[data-entry-id] {
        i.current-entry {
          display: none;
        }
      }

      a[data-entry-id].highlighted-entry {
        i.current-entry {
          display: inline;
          position: absolute;
          left: 1px;
          top: 9px;
        }
      }

      a.entry-read.highlighted-entry {
        background-color: #d6ffac;
      }

      a.entry-becoming-read.highlighted-entry {
        background-color: #d6ffac;
      }

      a.entry-unread.highlighted-entry {
        background-color: #E8E8E8;
      }

      a.entry-becoming-unread.highlighted-entry {
        background-color: #E8E8E8;
      }

      .entry-content {
        padding: 20px;
      }
    }
  }
}

#feed-entries {
  margin-bottom: 1em;

  .entry {
    margin: {
      top: -1px;
      bottom: -1px;
    }

    a.open-entry-link {
      vertical-align: middle;
      border-radius: 0;
      padding: {
        top: 5px;
        bottom: 5px;
        left: 10px;
        right: 10px;
      }
    }

    a.entry-unread{
      background-color: #F5F5F5;
    }

    a.entry-becoming-unread{
      background-color: #F5F5F5;
    }

    a.entry-read{
      background-color: #e6ffce;
    }

    a.entry-becoming-read{
      background-color: #e6ffce;
    }

    .entry-feed-title,
    .entry-title,
    .entry-published{
      display:inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      vertical-align: middle;
    }

    .entry-feed-title,
    .entry-published {
      font-family: Ubuntu-light-italic;
    }

    .entry-title {
      font-family: OpenSansBold;
    }

    .entry-published {
      text-align: right;
      padding-right: 2px;
    }

    .entry-panel.entry_open {
      padding: {
        top: 15px;
        bottom: 15px;
      }
      height: auto;
    }

    .entry-panel {
      padding: {
        top: 0;
        bottom: 0;
        left: 15px;
        right: 15px;
      }
      height: 0;
      overflow: hidden;

      .entry-toolbar {
        margin: {
          bottom: 20px;
          right: -5px;
        }

        .btn-group {
          margin-right: 5px;
        }

        .btn {
          font-family: Ubuntu;
          width: 120px;
          border-radius: 3px;
          font-size: 14px;
        }

        .dropdown-menu {
          font-size: 16px;
        }
      }

      .entry-lead {
        margin-bottom: 5px;
      }

      .entry-additional-info {
        margin-bottom: 10px;
        font-family: Ubuntu-italic;
      }

      .entry-content {

        img {
          vertical-align: baseline;
          max-width: 100%;
        }
        
        img.loading {
          opacity: 0;
          height: 0;
          visibility: hidden;
        }

        img.large-img{
          padding: {
            top: 1.5em;
            bottom: 1.5em;
          }
        }

        img.small-img {
          padding: {
            left: 1em;
            right: 1em;
          }
        }

        img[src='/images/Ajax-loader.gif']{
          margin: {
            left: 3px;
            right: 3px;
          }
        }

        table {
          table-layout: fixed;
          width: 100%;
        }
      }
    }
  }
}