first commit

helix/scss/array_visualization.scss

@@ -0,0 +1,285 @@
+@import 'variables';
+
+.array_information {
+  margin: 0 $form-section-margin;
+  display: flex;
+  flex-direction: column;
+  width: calc(100% - 50px);
+  border: 1px solid $array-visualization-background;
+
+  .item_title {
+    font-weight: bold;
+  }
+
+  .item_body {
+    color: $medium-blue;
+    font-weight: $semi-bold;
+  }
+
+  .array_summary {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding: 10px;
+    justify-content: flex-start;
+
+    .summary_item {
+      width: calc(50% - 50px);
+      margin: 10px 20px;
+    }
+  }
+
+  .subarray_summary {
+    h4 {
+      padding: 0 25px;
+      margin-bottom: 0;
+    }
+
+    #seismic_save {
+      color: white;
+      height: 50px;
+      font-weight: 400;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 20px;
+
+      .left_container {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+
+        .seismic_save_message {
+          padding-left: 10px;
+        }
+      }
+
+      .circle {
+        border: 2px solid white;
+        border-radius: 50%;
+        height: 25px;
+        width: 25px;
+        font-weight: 500;
+        text-align: center;
+        line-height: 25px;
+      }
+
+      .dismiss_button {
+        height: 20px;
+      }
+
+      &.seismic_error {
+        background: $error-color;
+      }
+
+      &.seismic_success {
+        background: $success-color;
+      }
+    }
+  }
+}
+
+.system_data_upload {
+  display: flex;
+
+  &.initial_array_upload {
+    color: $circle-color;
+    width: 100%;
+    flex-direction: column;
+    border: 1px solid $light-border-color;
+    background: $off-white;
+    padding: 30px;
+    margin: 0 40px 50px;
+  }
+
+  &.change_array_form {
+    display: flex;
+    width: 100%;
+    border-bottom: 1px solid $array-visualization-background;
+    align-items: flex-end;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+
+    .form_row {
+      flex-grow: 2;
+      padding: 0;
+
+      label {
+        font-weight: $semi-bold;
+      }
+    }
+
+    .button {
+      flex-grow: 1;
+      width: calc(50% - 100px);
+      margin: 20px;
+    }
+  }
+
+  .system_data_title {
+    align-self: center;
+    font-size: 20px;
+    font-weight: 500;
+    margin-bottom: 30px;
+  }
+
+  .upload_field {
+    align-self: center;
+    margin-top: 30px;
+    cursor: pointer;
+    text-align: center;
+
+    position: relative;
+    overflow: hidden;
+    width: auto;
+
+    .upload_field_text i {
+      margin-right: 10px;
+    }
+
+    .system_upload {
+      position: absolute;
+      top: 0;
+      right: 0;
+      margin: 0;
+      padding: 0;
+      font-size: 20px;
+      cursor: pointer;
+      opacity: 0;
+      filter: alpha(opacity=0);
+      height: 100%;
+      width: 100%;
+    }
+  }
+}
+
+.grey_line {
+  border: 1px solid $light-border-color;
+  width: calc(100% - 50px);
+  margin: 0 25px;
+  height: 0;
+}
+
+.array_visualization_header {
+  margin: 10px $form-section-margin 0;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  font-weight: 600;
+  padding-bottom: 10px;
+  align-items: center;
+
+  #zoom_level {
+    margin-right: 10px;
+  }
+
+  .seismic_anchor_control {
+    display: flex;
+
+    .seismic_control {
+      padding: 5px 10px;
+    }
+
+    a {
+      text-decoration: none;
+      width: auto;
+    }
+
+    .cancel_button {
+      color: $grey-text;
+      background: white;
+      font-size: 20px;
+    }
+
+    #add_seismic {
+      .icon-seismic-anchor {
+        color: $add-color;
+        border: 1px solid $add-color;
+        border-radius: 50%;
+      }
+    }
+
+    #remove_seismic {
+      .icon-seismic-anchor {
+        color: $remove-color;
+        border: 1px solid $remove-color;
+        border-radius: 50%;
+      }
+    }
+  }
+
+  .overlay_toggle {
+    border: 1px solid $array-visualization-blue;
+    padding: 5px 10px;
+    margin: 0 10px;
+
+    &.overlay_active {
+      border: 3px solid $array-visualization-blue;
+    }
+  }
+
+  .header_action {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    text-align: center;
+    color: $array-visualization-blue;
+
+    .zoom_indicator {
+      background: $zoom-indicator-color;
+      width: 8px;
+      margin: 3px;
+      height: 20px;
+
+      &.zoom_active {
+        background: $array-visualization-blue;
+      }
+    }
+
+    .zoom_button {
+      $circle_size: 30px;
+
+      -webkit-border-radius: 7px;
+      -moz-border-radius: 7px;
+      border-radius: 50%;
+      border: 1px solid $array-visualization-blue;
+      width: $circle_size;
+      height: $circle_size;
+      font-size: 20px;
+      display: flex;
+      margin: 3px;
+      justify-content: center;
+      line-height: $circle_size;
+    }
+  }
+}
+
+#legend_container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: $form-section-margin;
+}
+
+.legend {
+  width: 50%;
+}
+
+.anchor_colors_legend {
+  padding: 15px;
+}
+
+canvas {
+  margin: 0 $form-section-margin;
+  border: 1px solid $array-visualization-background;
+}
+
+.array_summary_warning {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    width: 100%;
+    background-color: $warning-color;
+    border: 1px solid $circle-highlighted;
+    padding: 7px;
+}

helix/scss/ebom.scss

@@ -0,0 +1,244 @@
+@import 'variables';
+
+.ebom_section_content {
+  width: 100%;
+}
+
+.ebom_form {
+  margin: 25px 50px;
+  border: 1px solid $light-border-color;
+
+  &.hidden {
+    display: none;
+  }
+}
+
+.ebom_subsection {
+  width: 100%;
+  border-top: 1px solid $light-border-color;
+
+  &.submit {
+    text-align: left;
+    padding: 25px;
+    display: flex;
+
+    .button {
+      width: 100px;
+      height: 45px;
+      box-sizing: border-box;
+      padding: 0;
+      text-align: center;
+      line-height: 45px;
+    }
+
+    .cancel_button {
+      border: 2px solid $light-border-color;
+      color: $grey-text;
+      background: white;
+      margin-left: 10px;
+    }
+
+    .delete_button {
+      color: white;
+      background: #CE0B24;
+    }
+
+    a.button {
+      display: inline-block;
+      text-decoration: none;
+      margin-left: 10px;
+
+      &.hidden {
+        display: none;
+      }
+    }
+  }
+}
+
+.inverter_form_row {
+  .bold_header {
+    font-weight: $semi-bold;
+    font-size: 18px;
+    margin-left: 25px;
+  }
+
+  .form_row {
+    margin-top: 0;
+  }
+}
+
+#standalone_inverter_form .inverter_form_row {
+  margin-top: 20px;
+  width: 100%;
+}
+
+.inverter_inputs_container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  margin: 0 20px;
+
+  .form_row {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  input, select {
+    font-size: 16px;
+    letter-spacing: 0;
+  }
+}
+
+.required_inverter_fields {
+  display: flex;
+  width: 68%;
+
+  .inverter_strings {
+    width: 28%;
+  }
+
+  .inverter_model {
+    width: calc(100% - 20px);
+    flex-grow: 1;
+  }
+
+  .quantity {
+    width: 65px;
+  }
+}
+
+.optional_inverter_fields {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 5px;
+
+  .checkbox_form_row {
+    width: 100%;
+    margin-top: 0;
+    text-align: center;
+  }
+}
+
+.checkbox_form_row {
+  input {
+    width: auto;
+  }
+}
+
+#aux_plug_row.checkbox_form_row {
+  align-self: center;
+}
+
+.checkbox_row {
+  display: flex;
+  width: 100%;
+}
+
+.add_button {
+  font-size: 18px;
+  font-weight: normal;
+
+  &.disabled {
+    color: $disabled-text-color;
+
+    .icon-plus {
+      color: #D6EBF6;
+    }
+  }
+}
+
+.power_station_table, .standalone_inverter_table, .supervisor_monitor_table {
+  margin: 50px;
+  font-size: 14px;
+  width: calc(100% - 100px);
+  border-spacing: 0;
+
+  td {
+    padding-left: 15px;
+    padding-right: 20px;
+
+    &.narrow_line {
+      line-height: 90%;
+    }
+
+    &.centered {
+      text-align: center;
+    }
+  }
+
+  th {
+    text-align: left;
+    font-weight: 500;
+    color: $medium-blue;
+    padding-left: 15px;
+    padding-bottom: 5px;
+    border-bottom: 2px solid $medium-blue;
+  }
+
+  .alternating_row_color:nth-child(odd) {
+    background-color: $table-alternate-row-color;
+  }
+
+  tr.alternating_row_color.selected {
+    background: $default-button-color;
+    color: white;
+  }
+
+  i {
+    color: $grey-text;
+    font-size: 20px;
+  }
+
+  i.icon-ok {
+    color: #0075C2;
+  }
+
+  .trash_can_link {
+    display: inline-block;
+    text-decoration: none;
+  }
+}
+
+.standalone_inverter_table, .supervisor_monitor_table {
+  td {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+}
+
+.icon-plus {
+  font-size: 25px;
+  font-weight: bold;
+  color: #0075C2;
+}
+
+.empty_state {
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: $off-white;
+  font-weight: 500;
+  color: $grey-text;
+  font-size: 18px;
+}
+
+.ebom_section_header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-left: 50px;
+  margin-right: 50px;
+  font-size: 20px;
+  font-weight: $semi-bold;
+}
+
+.monitoring_tag {
+  background: #FBE7C8;
+  color: #BA842C;
+  border: 1px solid #F0D09D;
+  border-radius: 3px;
+  padding: 0 5px;
+}

helix/scss/forms.scss

@@ -0,0 +1,171 @@
+@import "variables";
+
+.form_section {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+
+  h3 {
+    width: 100%;
+    margin: $form-section-margin;
+    font-weight: $semi-bold;
+    border-bottom: 2px solid $medium-blue;
+
+    span.optional {
+      color: $grey-text;
+      font-size: 12px;
+      padding-left: 10px;
+      font-weight: normal;
+    }
+  }
+}
+
+i.icon-info-circled {
+  color: $medium-blue;
+  font-size: 18px;
+}
+
+.tooltip_container {
+  display: inline-block;
+  position: relative;
+}
+
+.tooltip {
+  background: black;
+  color: white;
+  border-radius: 5px;
+  position: absolute;
+  bottom: 30px;
+  width: 200px;
+  left: -100px;
+  padding: 16px;
+
+  &:after {
+    top: 100%;
+    left: 50%;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border: 10px solid transparent;
+    border-top-color: black;
+    margin-left: -10px;
+  }
+}
+
+.form_row {
+  padding: 5px;
+  margin: 20px;
+  width: calc(50% - 50px);
+
+  label {
+    white-space: nowrap;
+    margin-bottom: 8px;
+  }
+}
+
+.error_container {
+  display: flex;
+  flex-grow: 1;
+  width: calc(50% - 20px);
+  margin: 0 10px;
+}
+
+.error_message {
+  color: red;
+  padding-left: 5px;
+  margin: 0 auto;
+}
+
+input, select {
+  width: calc(100% - 20px);
+  padding: 10px;
+  font-size: 22px;
+  background: $input-background-color;
+  border: none;
+  color: $medium-blue;
+  letter-spacing: 2px;
+}
+
+select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: $input-background-color url("https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat calc(100% - 15px);
+}
+
+.submit, .download {
+  padding: 20px;
+  text-align: center;
+  border-top: 1px solid $light-border-color;
+}
+
+.button, button {
+  background: $default-button-color;
+  color: white;
+  padding: 10px 30px;
+  width: 50%;
+  border: none;
+  border-radius: 5px;
+  font-size: 20px;
+  letter-spacing: 2px;
+}
+
+.navigation_buttons {
+  display: flex;
+  justify-content: flex-end;
+  border-top: 1px solid $light-border-color;
+  border-bottom: 1px solid $light-border-color;
+  padding: 20px;
+
+  a {
+    text-decoration: none;
+    width: auto;
+    margin: 0 20px;
+  }
+
+  .button {
+    width: auto;
+  }
+}
+
+.back {
+  border: 2px solid $default-button-color;
+  color: $default-button-color;
+  background: white;
+  margin-left: 10px;
+}
+
+a.back {
+  text-decoration: none;
+}
+
+.sample_images {
+  display: flex;
+  justify-content: flex-end;
+  border-top: 1px solid $light-border-color;
+  border-bottom: 1px solid $light-border-color;
+  padding: 15px;
+
+  a {
+    text-decoration: none;
+    width: auto;
+    margin: 0 5px;
+  }
+
+  .button {
+    width: auto;
+  }
+}
+
+.image_button, button {
+  background: $default-button-color;
+  color: white;
+  padding: 10px 30px;
+  width: 50%;
+  border: none;
+  border-radius: 5px;
+  font-size: 15px;
+  letter-spacing: 1px;
+}

helix/scss/help_page.scss

@@ -0,0 +1,40 @@
+@import 'variables';
+
+dt {
+  font-weight: 600;
+  font-size: 18px;
+  color: $medium-blue;
+}
+
+dd {
+  margin-bottom: 20px;
+}
+
+.documentation {
+  width: 100%;
+  margin: $form-section-margin;
+
+  img {
+    width: 100%;
+  }
+
+  h3 {
+    font-weight: $semi-bold;
+    border-bottom: 2px solid $medium-blue;
+
+    span.optional {
+      color: $grey-text;
+      font-size: 12px;
+      padding-left: 10px;
+      font-weight: normal;
+    }
+  }
+
+  p {
+    font-weight: 500;
+  }
+
+  a {
+    text-decoration: none;
+  }
+}

helix/scss/main.scss

@@ -0,0 +1,61 @@
+@import 'variables';
+
+body {
+  font-family: "Avenir Next", sans-serif;
+  margin: 0;
+}
+
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-top: 20px solid $medium-blue;
+  border-bottom: 2px solid $light-border-color;
+  padding: 20px;
+
+  .group {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    h1 {
+      width: 100%;
+      padding-right: 25px;
+    }
+
+    .back {
+      padding: 5px 10px;
+      font-size: 16px;
+      font-weight: 500;
+      letter-spacing: 1px;
+    }
+  }
+
+  img {
+    width: 200px;
+    height: 25px;
+  }
+}
+
+h1 {
+  margin: 0;
+  font-size: 25px;
+  font-weight: $semi-bold;
+}
+
+.content {
+  width: 900px;
+  margin: 40px auto;
+}
+
+.hidden {
+  display: none;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.spacer {
+  flex-grow: 1;
+}

helix/scss/navigation.scss

@@ -0,0 +1,59 @@
+@import 'variables';
+
+.navigation_header {
+  $circle_size: 30px;
+
+  display: flex;
+  justify-content: space-between;
+
+  .nav_step {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .step_line {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 5px;
+
+    .line {
+      flex-grow: 1;
+      height: 0;
+      border: 2px solid $medium-border-color;
+    }
+  }
+
+  .circle {
+    border: 3px solid $circle-color;
+    border-radius: 50%;
+    height: $circle_size;
+    width: $circle_size;
+  }
+
+  i.icon-ok {
+    display: none;
+    color: $grey-text;
+    text-align: center;
+    line-height: $circle_size;
+    width: $circle_size;
+  }
+
+  .completed {
+    i.icon-ok {
+      display: inline-block;
+    }
+  }
+
+  .active {
+    .circle {
+      border: 3px solid $circle-highlighted;
+    }
+
+    i.icon-ok {
+      color: $checkmark-color;
+    }
+  }
+}

helix/scss/summary_table.scss

@@ -0,0 +1,128 @@
+@import "variables";
+
+#summary_table {
+  width: calc(100% - 50px);
+}
+
+#seismic_anchor_table {
+  overflow-x: auto;
+  width: calc(100% - 50px);
+  display: inline-block;
+  margin-top: 5px;
+  th {
+    border-bottom: 3px solid #EAEAEA;
+  }
+}
+
+#seismic_anchor_table, #summary_values_table {
+  tr {
+    td:first-child {
+      border-left: none;
+    }
+
+    td:last-child {
+      border-right: none;
+    }
+
+    td {
+      padding-left: 10px;
+      padding-right: 10px;
+    }
+  }
+}
+
+.summary_table {
+  margin: 25px;
+  text-align: center;
+  border-spacing: 0;
+  border-collapse: collapse;
+
+  th {
+    background: $light-border-color;
+    padding: 10px;
+    font-weight: $semi-bold;
+    font-size: 14px;
+    border-left: 3px solid $light-border-color;
+  }
+
+  td {
+    padding: 7px;
+    font-weight: 500;
+    border: 3px solid $light-border-color
+  }
+
+  .alternating_row_color:nth-child(6n),
+  .alternating_row_color:nth-child(6n+1),
+  .alternating_row_color:nth-child(6n+2) {
+    background-color: $table-alternate-row-color;
+  }
+}
+
+.summary_warning {
+    background-color: $warning-color;
+    border: 1px solid $circle-highlighted;
+    padding: 10px;
+}
+
+td.table_horizontal_borders {
+  border: none;
+  border-bottom: 3px solid $light-border-color;
+  border-top: 3px solid $light-border-color;
+
+  &.warning {
+    background-color: $warning-color;
+  }
+}
+
+td.table_meta_headers {
+  font-weight: $semi-bold;
+  border: none;
+  font-size: 18px;
+}
+
+td.corner_border {
+  border-left: 3px solid $corner-panel-color;
+}
+
+td.north_south_border {
+  border-left: 3px solid $northsouth-panel-color;
+}
+
+td.east_west_border {
+  border-left: 3px solid $eastwest-panel-color;
+}
+
+td.middle_border {
+  border-left: 3px solid $middle-panel-color;
+}
+
+table .left_text_cell {
+  text-align: left;
+  padding-left: 10px;
+}
+
+table .right_border_cell {
+  border-left: none;
+}
+
+.image_container {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 90%;
+
+    &.side_by_side {
+      width: 50%;
+    }
+
+    &.dual_tilt_panel_types {
+      width: 65%;
+      margin-bottom: 25px;
+    }
+  }
+}

helix/scss/variables.scss

@@ -0,0 +1,30 @@
+$semi-bold: 600;
+
+$corner-panel-color: #9C63CC;
+$northsouth-panel-color: #FFBE25;
+$eastwest-panel-color: #0BB2EE;
+$middle-panel-color: #94CE57;
+
+$medium-blue: #0075C2;
+$default-button-color: #5199F5;
+$grey-text: #C7C7C7;
+$light-border-color: #EAEAEA;
+$medium-border-color: #D8D8D8;
+$input-background-color: #F4F4F4;
+$disabled-text-color: #CCCCCC;
+$zoom-indicator-color: #DDDDDD;
+$zoom-active-color: #4A4A4A;
+$array-visualization-blue: #2888CB;
+$array-visualization-background: #D1D1D1;
+$table-alternate-row-color: #ECF9FF;
+$off-white: #FDFDFD;
+$circle-color: #9B9B9B;
+$circle-highlighted: #F59234;
+$checkmark-color: #F8A33C;
+$error-color: #F06A3F;
+$success-color: #6BB24A;
+$add-color: #70B72D;
+$remove-color: #EF6C6E;
+$warning-color: lighten($northsouth-panel-color, 20%);
+
+$form-section-margin: 25px;