porkchopclub/porkchop

View on GitHub
app/assets/stylesheets/players/_show.scss

Summary

Maintainability
Test Coverage
.player-summary {
  position: relative;
  @include clearfix;
}

.player-summary-content {
  @include desktop {
    @include calc(margin-left, "100px + 1em"); // avatar + gutter
  }

  ul {
    list-style: none;
    padding: 0;

    strong {
      margin-right: 5px;
    }
  }
}

.player-edit-link {
  position: absolute;
  top: 1em;
  right: 1em;
}

.player-stats {
  width: 100%;

  thead {
    @include mobile {
      display: none;
    }
  }

  th,
  td {
    padding: 0 10px;

    @include desktop {
      &:not(:first-child) {
        text-align: center;
      }
    }

    @include mobile {
      display: block;

      &:before {
        content: attr(data-label);
        font-weight: bold;
        margin-right: 10px;
      }
    }
  }
}

.player-win-percentages,
.player-match-history {
  @include desktop {
    width: 50%;
    float: left;
    padding-top: modular-scale(0);

    &:first-child {
      padding-right: modular-scale(2);
    }

    &:last-child {
      padding-left: modular-scale(2);
    }
  }
}

.player-win-percentage-list {
  width: 100%;
}

.player-summary-avatar {
  height: 100px;

  @include desktop {
    float: left;
  }
}

.player-elo-chart {
  @include user-select(none);

  float: left;
  width: 100%;
}