scottwillson/racing_on_rails

View on GitHub
app/assets/stylesheets/_pages.scss

Summary

Maintainability
Test Coverage
// Page-specific. Do we really need so many of these?  Probably should be separate files for pages.

// Home
.home {
  img.hero-photo {
    margin-bottom: $line-height-computed / 2;
  }

  ul li {
    list-style-type: none;
  }

  .associated {
    margin-bottom: $line-height-computed;
    text-align: center;
    vertical-align: middle;
  }

  .ad {
    padding-bottom: $line-height-computed;
    width: 100%;
  }
}

.hero-photo-caption a {
  text-decoration: none;
}

.hero-photo-caption a:hover {
  text-decoration: underline;
}

th.name {
  white-space: nowrap;
}

// Admin events
.edit_event h3.events {
  padding-top: 0;
}

.edit_event .form-group.name {
  margin-bottom: 6px;
}

.edit_event .form-group.promoter {
  margin-bottom: 6px;
}

table td.delete_all_races {
  text-align: right;
}

#promoter_links {
  margin-top: 4px;
  margin-left: 5px;
}

#promoter_links a {
  margin-right: 8px;
}

#event_notes {
  height: $line-height-computed * 4;
}

// Calendar of events
table.calendar {
  border-collapse: separate;
  padding: 0;
  margin-bottom: 36px;
}

table.calendar thead th {
  text-align: center;
}

tr.month {
  vertical-align: top;
}

.calendar td.day {
  height: 100px;
  width: 14%;
  min-width: 14%;
  background-color: $gray-lighter;
  border: 1px solid #ffffff;
  text-align: left;
}

td.day div.event {
  margin-bottom: 8px;
  line-height: 16px;
}

.day .event.beginner-friendly {
  padding-left: 16px;
  text-indent: -8px;
}

.day .event i {
  margin-left: -16px;
}

.canceled, .postponed {
  text-decoration: line-through;
}

.tentative {
  font-style: italic;
}

td.day div.number {
  font-weight: bold;
  text-align: right;
}

.table > tbody > tr > td.day_from_other_month, table.calendar tbody tr:hover td.day_from_other_month {
  background-color: lighten($warm-gray, 8);
  border: 1px solid #ffffff;
  height: 100px;
  min-width: 14%;
  padding: 4px;
  width: 14%;
}

td.day_from_other_month div.number {
  font-style: italic;
  text-align: right;
}

table.calendar td.beginner_friendly {
  text-align: right;
}

h3.month a, h3.month a:hover {
  background: none;
  background-color: none;
  color: $font-color;
}


table.calendar tbody tr:hover td, .table.calendar tbody tr:hover th {
  background-color: #eee;
}

table.calendar tbody tr:hover td.day_from_other_month {
  background: #ffffff;
}

table.calendar tbody td {
  border-bottom: 2px solid #ffffff;
}

table td.discipline {
  white-space: nowrap;
}

a.beginner_friendly {
  padding-right: 8px;
}

p.list_link, p.atra_ncs {
  margin-top: 9px;
  text-align: center;
}


// Categories
.category_root {
  float: left;
  min-height: 400px;
  width: 90%;
}

.category_root.hovering {
  border-color: $highlight-color;
  background-color: lighten($highlight-color, 33);
}

.disclosure {
  background-repeat: no-repeat;
  clear: none;
  display: inline-block;
  float: left;
  height: 16px;
  margin-right: 8px;
  margin-top: 0;
  text-align: center;
  vertical-align: middle;
  width: 16px;
}

.disclosure.glyphicon-collapse, .disclosure.glyphicon-expand {
  cursor: pointer;
  font-size: 20px;
}

.disclosure.glyphicon-refresh {
  margin-right: 10px;
}

.category .icon-list {
  margin-top: 2px;
}

.category_root .category {
  clear: both;
  float: left;
  width: 376px;
}

.category .category_name {
  clear: none;
  float: left;
  cursor: move;
  background-repeat: no-repeat;
  background-position: 0 2px;
  line-height: 24px;
  height: 24px;
  padding-right: 8px;
  white-space: nowrap;
}

.category i {
  line-height: 24px;
}

.category .children {
  clear: both;
  float: left;
  padding-left: 24px;
}

.category_root div.hovering {
  background-color: #e9f79b;
}

// Results admin
table.results .drag {
  cursor: move;
}

table.results td.place,
table.results th.points,
table.results td.points,
table.results th.age,
table.results td.age {
  text-align: right;
}
table.results td.notes {
  min-width: 120px;
}

table.results td.result .event {
  float: left;
  margin-left: 8px;
}

.find-progress {
  text-align: right;
  i {
    margin-top: 5px;
    margin-right: -18px;
  }
}

// Pages
#page_body {
  width: 100%;
  height: 340px;
  font-size: 10px;
  font-family: 'Open Sans', sans-serif;
}

#page_parent_id {
  width: 270px;
}

table.base td img.cancel {
  width: 16px;
  height: 16px;
  margin-left: -6px;
}

table.base td.name a.cancel {
  border: none;
  text-decoration: none;
  background-color: transparent;
}

// public teams page
table.base#teams_table td.club_name {
  width: 30%;
}

table.base#teams_table td.contact {
  white-space: nowrap;
}

// admin teams
.teams td.name {
  width: 200px;
}

table.base a.preliminary {
  font-style: italic;
}

.form-inline input.city {
  min-width: 32px;
  width: 55%;
}

.form-inline input.state {
  min-width: 32px;
  width: 10%;
}

.form-inline input.state_no_zip {
  width: 10%;
}

.form-inline input.zip {
  min-width: 56px;
  width: 25%;
}

.current, .renewed {
  padding-right: 20px;
}

// Event
table.event_nav td.category {
  padding-left: 30px;
}

table.event_nav td.delete {
  width: 16px;
}

// Mailing lists
.posts .pagination {
  margin-top: 0;
}

.posts .btn.new {
  margin-bottom: 8px;
}

.post div.reply {
  text-align: right;
}

// Results
table.base td.total_points span.total
{
  font-size: 8pt;
  font-weight: bold;
  text-align: right;
  padding-right: 12px;
}

table.base td.total_points {
  font-weight: bold;
  text-align: right;
  padding-right: 8px;
}

.event_info {
  padding-bottom: $line-height-computed;
  text-align: center;
}

.event_info p:last-child {
  margin-bottom: 0;
}

.event_races {
  display: inline-table;
}

.event_races .race {
  text-align: left;
  white-space: nowrap;
}

.event_races .race:first-child {
  padding-right: $line-height-computed;
}

.race.rejected a {
  font-style: italic;
}

table.child_single_day_events, .source_events {
  display: inline-table;
}

table.child_single_day_events td {
  font-weight: bold;
  padding-top: 12px;
}

table.child_single_day_events td, table.source_events td {
  padding-left: 8px;
  padding-right: 8px;
}

table.child_single_day_events td.date, table.source_events td.date {
  text-align: right;
  white-space: nowrap;
}

table.child_single_day_events td.event, table.source_events td.event {
  text-align: left;
}

table.child_single_day_events td.child {
  padding-top: 2px;
  text-align: left;
}

table.child_single_day_events td.child a {
  font-weight: normal;
}

.event_notes {
  text-align: center;
  a {
    text-decoration: underline;
  }
}

.event_notes.large {
  text-align: left;

  @media (min-width: 767px) {
    margin-left: 25%;
    width: 50%;
  }
}

@media (max-width: 767px) {
  .results th, .results td {
    display: none !important;
  }

  .results.individual {
    .event,
    .event_full_name,
    .name,
    .place,
    .points,
    .time {
      display: table-cell !important;
    }
  }

  .results.team {
    .event,
    .event_full_name,
    .place,
    .points,
    .team_name {
      display: table-cell !important;
    }
  }

  .results {
    .event,
    .place,
    .points {
      display: table-cell !important;
    }
  }
}

// Event first aid providers
table.first_aid_providers td.date {
  white-space: nowrap;
}

table.first_aid_providers td.name {
  width: 200px;
}

.link_spacer {
  padding-left: 8px;
  padding-right: 8px;
}

table.results {
  margin-bottom: $line-height-computed * 2;
}

table.results td.laps,
table.results td.number,
table.results td.place,
table.results td.points,
table.results td.points_bonus,
table.results td.points_from_place,
table.results td.points_penalty,
table.results td.points_total,
table.results td.time,
table.results td.time_bonus_penalty,
table.results td.time_down,
table.results td.time_gap_to_leader,
table.results td.time_gap_to_winner,
table.results td.time_total,
table.results th.laps,
table.results th.number,
table.results th.place,
table.results th.points,
table.results th.points_bonus,
table.results th.points_from_place,
table.results th.points_penalty,
table.results th.points_total,
table.results th.time,
table.results th.time_bonus_penalty,
table.results th.time_down,
table.results th.time_gap_to_leader,
table.results th.time_gap_to_winner,
table.results th.time_total
{
  text-align: right;
}

table.results th.place,
table.results th.place,
table.results th.laps,
table.results th.state,
table.results th.age {
  width: 40px;
}

table.results th.time_bonus_penalty,
table.results th.points,
table.results th.points_bonus,
table.results th.points_penalty,
table.results th.points_from_place,
table.results th.number,
table.results th.number {
  white-space: nowrap;
  width: 60px;
}

table.results th.time_total,
table.results th.time_gap_to_winner,
table.results th.time_gap_to_leader,
table.results th.time,
table.results th.points_total {
  text-align: right;
  white-space: nowrap;
  width: 80px;
}

table.results td.points_total {
  text-align: right;
  width: 80px;
}

table.results th.first_name,
table.results th.city {
  width: 100px;
}

table.results th.last_name {
  width: 120px;
}

table.results th.category_name,
table.results td.category_name {
  width: 160px;
}

table.results th.name {
  width: 220px;
}

table.results td.event {
  width: 400px;
}

table.results td.category {
  width: 200px;
}

table.results td.dates {
  width: 100px;
}

table.results.scores tr:last-child {
  font-weight: bold;
}

#person_notes {
  height: $line-height-computed * 8;
}

.table-striped th.bar,
.table-striped td.bar {
  text-align: center;
}

table.results td.name a.riera:hover {
  background: pink;
  color: red;
  font-weight: bold;
}

.promoted_events .name,
.promoted_events .link {
  white-space: nowrap;
}

.promoted_events .link {
  padding-right: 8px;
}


// People
#preview_import_table tr th.invalid {
  color: red;;
}

#import_year {
  margin-top: 0;
  padding-top: 0;
  margin-left: 8px;
}

.promoted_events .name,
.promoted_events .link {
  white-space: nowrap;
}

.promoted_events .link {
  padding-right: 8px;
}

#merge_form {
  padding-left: 24px;
  padding-top: 2px;
}

select#person_date_of_birth_2i, select#person_member_from_2i, select#person_member_to_2i {
  width: 100px;
}

select#person_date_of_birth_1i, select#person_member_from_1i, select#person_member_to_1i {
  width: 70px;
}

select#person_date_of_birth_3i, select#person_member_from_3i, select#person_member_to_3i {
  width: 50px;
}

.form-horizontal .membership .form-group {
  margin-bottom: 0;
}

.people .license, .people .racing_age {
  text-align: right;
}

table.people div.aliases {
  color: $gray;
  font-style: italic;
}

@media (min-width: 767px) {
  table.people .name {
    white-space: nowrap;
  }
}

.hovering,
.table-striped tbody tr:nth-child(even).hovering td,
.table-striped tbody tr:nth-child(odd).hovering td,
.table-striped.hovering tbody tr:nth-child(even) td,
.table-striped.hovering tbody tr:nth-child(odd) td,
.table tbody tr:nth-child(even).hovering td,
.table tbody tr:nth-child(odd).hovering td,
.table.hovering tbody tr:nth-child(even) td,
.table.hovering tbody tr:nth-child(odd) td
{
  border-color: $highlight-color;
  background-color: lighten($highlight-color, 33);
}

// Versions
.version .what,
.version .from,
.version .to {
  width: 33%;
}

// Public results
td.right, th.right {
  text-align: right;
}

.owps .logos {
  text-align: center;
}

.owps img.logo {
  height: 150px;
  width: 228px;
}

.owps img.obra-logo {
  height: 70px;
  width: 167px;
}

.owps .giant-logo {
  text-align: right;
}

.owps .giant-logo img {
  height: 70px;
  width: 239px;
}

.owps .rapha-logo {
  text-align: left;
}

.owps .rapha-logo img {
  height: 70px;
  width: 153px;
}

.owps img.lets-race-bikes-logo {
  height: 70px;
  width: 422px;
}

.owps img {
  padding: 16px;
}

.ows table.points th, table.points td {
  text-align: right;
  padding: 4px;
}

.copyright {
  color: $font-color-light;
  font-size: $font-size-smaller;
  text-align: center;
}

.questions {
  text-align: center;
}

.table.select-modal > tbody > tr > td {
  border-bottom: none;
  border-top: none;
  vertical-align: middle;
}

.select-modalselect_promoter .form-horizontal .form-group {
  margin-right: 0;
  margin-left: 0;
}

.select-modal .table-hover tr {
  cursor: pointer;
}

.none {
  font-style: italic;
}

.modal-footer .modal-pagination {
  text-align: left;
}

ul.calculations  {
  padding-left: 0;
}

ul.calculations li {
  list-style-type: none;
}

.show_source_results {
  margin-top: $line-height-computed * -1.5;
}