crowdai_admin 1.0.0

data/app/assets/stylesheets/crowdai_admin/components/_inputs.scss

@@ -0,0 +1,109 @@
+input[type="text"], input[type="email"], input[type="password"],
+input[type="tel"], input[type="date"], input[type="datetime-local"],
+input[type="month"], input[type="range"], input[type="search"],
+input[type="time"], input[type="url"], input[type="week"],
+input[type="number"], textarea {
+  @include appearance();
+  @include box-shadow(none);
+
+  display: block;
+  width: 100%;
+  height: 36px;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.57142857;
+  color: $text-color;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid $border-color;
+  outline: 0;
+  border-radius: $border-radius;
+  @include transition(border-color ease-in-out .15s);
+
+  &:focus {
+    border-color: $primary-color;
+    @include appearance();
+    @include transition(border .25s linear,color .25s linear,background-color .25s linear);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+  }
+
+  &:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus {
+    -webkit-box-shadow: 0 0 0px 1000px white inset;
+    -webkit-text-fill-color: $text-color;
+  }
+}
+
+input[type="submit"] {
+  @include appearance();
+  @include primary-button($primary-color, white);
+  width: 100%;
+  padding: 0 12px;
+  font-size: 15px;
+  font-weight: 500;
+  @include box-shadow(0 1px 0 rgba(0,0,0,.05));
+  border: none;
+  cursor: pointer;
+}
+
+input[type="checkbox"] {
+  height: 15px;
+  width: 15px;
+  -webkit-appearance: none!important;
+  background-color: #fff;
+  border: 1px solid #e6e6e6;
+  border-radius: $border-radius;
+  box-sizing: border-box;
+  @include outline();
+  @include transition-button();
+  cursor: pointer;
+
+  &:checked {
+    border-color: $primary-color;
+    background-color: $primary-color;
+  }
+}
+
+input[type="radio"] {
+  @include appearance();
+  border: 2px solid $primary-color;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  margin: 1px 5px 1px 1px;
+  display: inline-flex;
+  @include outline();
+  @include transition-button();
+
+  &:checked {
+    background-color: $primary-color;
+  }
+}
+
+select {
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid $border-color;
+  outline: 0;
+  border-radius: $border-radius;
+  font-size: 14px;
+  color: #5a5a5a;
+  @include transition(border-color ease-in-out .15s);
+
+  &:focus {
+    border-color: $primary-color;
+    @include box-shadow(none);
+    @include transition(border .25s linear,color .25s linear,background-color .25s linear);
+  }
+
+  &:-webkit-autofill {
+    -webkit-box-shadow: 0 0 0px 1000px white inset;
+  }
+}
+
+textarea {
+  height: 80px;
+  padding: 5px 10px;
+}

data/app/assets/stylesheets/crowdai_admin/components/_pagination.scss

@@ -0,0 +1,25 @@
+.pagination {
+  font-size: 13px;
+  margin-bottom: 10px;
+
+  .page {
+    text-align: center;
+  }
+
+  .page a, .next a, .last a, .first a, .prev a {
+    padding: .3rem .4rem;
+    color: $text-color;
+    @include transition-button();
+
+    &:hover {
+      color: $primary-color;
+    }
+  }
+  .page.current {
+    background-color: $primary-color;
+    color: #fff;
+    border-radius: $border-radius;
+    padding: .3rem .4rem;
+    cursor: normal;
+  }
+}

data/app/assets/stylesheets/crowdai_admin/components/_panel_contents.scss

@@ -0,0 +1,14 @@
+.panel_contents {
+  .paginated_collection {
+    #index_footer {
+      margin: 10px;
+      text-align: right;
+      font-size: 12px;
+    }
+  }
+
+  th {
+    text-align: left;
+    padding: 8px;
+  }
+}

data/app/assets/stylesheets/crowdai_admin/components/_status_tag.scss

@@ -0,0 +1,17 @@
+.status_tag {
+  background: $status-tag-background-color;
+  color: $status-tag-text-color;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  padding: 3px 5px 2px 5px;
+  font-size: 0.8em;
+  border-radius: $border-radius;
+}
+
+.status_tag.ok, .status_tag.published, .status_tag.complete, .status_tag.completed, .status_tag.green {
+  background-color: $status-tag-background-valid-color;
+}
+
+.status_tag.cancel, .status_tag.red {
+  background-color: $status-tag-background-error-color;
+}

data/app/assets/stylesheets/crowdai_admin/components/_tables.scss

@@ -0,0 +1,65 @@
+table {
+  width: 100%;
+  border-collapse: collapse;
+
+  &:not(.index_table) {
+    border-radius: $border-radius;
+    margin-bottom: 10px;
+  }
+}
+
+thead tr {
+  border: 1px solid $border-color;
+  background-color: $border-color;
+}
+
+thead th {
+  font-size: 12px;
+  text-align: left;
+
+  a {
+    color: $text-color-important;
+    font-weight: normal;
+    width: 100%;
+    display: inline-block;
+    padding: 4px 20px 4px 4px;
+
+    @media screen and (min-width: $md-width) {
+      padding: 8px 20px 8px 8px;
+    }
+  }
+
+  &.col-selectable {
+    padding-left: 4px;
+
+    @media screen and (min-width: $md-width) {
+      padding-left: 8px;
+    }
+  }
+}
+
+tbody tr {
+  border: 1px solid $border-color;
+
+  &:hover {
+    background-color: rgba(228, 234, 236, 0.3);
+  }
+
+  th {
+    font-size: 14px;
+  }
+
+  td {
+    padding: 4px;
+    vertical-align: middle;
+    color: $text-color;
+    font-size: 12px;
+    &.col-actions {
+      padding: 6px 8px;
+    }
+
+    @media screen and (min-width: $md-width) {
+      padding: 8px;
+    }
+  }
+}

data/app/assets/stylesheets/crowdai_admin/components/_tabs.scss

@@ -0,0 +1,33 @@
+.tabs.ui-tabs {
+  border: 1px solid $border-color;
+
+  .nav {
+    text-align: center;
+    border-bottom: 1px solid $border-color;
+    
+    li {
+      display: inline-block;
+      @include outline();
+
+      a {
+        color: $text-color;
+        display: inline-block;
+        padding: 15px 25px;
+        @include outline();
+        @include transition-button();
+      }
+      
+      &.ui-tabs-active {
+        border-bottom: 2px solid $primary-color;
+
+        a {
+          color: $primary-color;
+        }
+      }
+    }
+  }
+
+  .tab-content {
+    padding: 10px 20px;
+  }
+}

data/app/assets/stylesheets/crowdai_admin/layouts/_filter.scss

@@ -0,0 +1,64 @@
+#sidebar {
+  width: $filter-width;
+  background-color: #fff;
+  border-radius: $border-radius;
+  @include box-shadow(0 0 4px 0 rgba(0,0,0,.04));
+  margin-bottom: 30px;
+
+  @media screen and (min-width: $x-lg-width) {
+    width: $lg-filter-width;
+  }
+
+  .sidebar_section {
+    padding: 15px 20px;
+
+    h3 {
+      margin: 0 0 10px 0;
+    }
+
+    .label {
+      display: block;
+      text-align: left;
+    }
+
+    .input {
+      margin-bottom: 15px;
+
+      input, select {
+        height: 30px;
+        padding: 3px 5px;
+        font-size: 12px;
+      }
+    }
+
+    .select_and_search {
+      input, select {
+        width: 45%;
+        display: inline-block;  
+      }
+
+      input {
+        float: right;
+      }
+    }
+
+    .filter_select select {
+      width: 100%;
+    }
+
+    .filter_date_range input {
+      width: 45%;
+      display: inline-block;
+    }
+
+    input[type="submit"] {
+      width: auto;
+      line-height: 31px;
+      margin-right: 10px;
+    }
+  }
+
+  #search-status-_sidebar_section {
+    font-size: 14px;
+  }
+}

data/app/assets/stylesheets/crowdai_admin/layouts/_footer.scss

@@ -0,0 +1,4 @@
+.footer {
+  display: inline-block;
+  padding: 0 15px;
+}

data/app/assets/stylesheets/crowdai_admin/layouts/_header.scss

@@ -0,0 +1,237 @@
+body.active_admin.logged_in {
+  padding-top: 50px;
+
+  @media screen and (min-width: $sm-width) {
+    padding-top: 60px;
+  }
+
+  @media screen and (min-width: $lg-width) {
+    padding-left: $header-width;
+  }
+
+  @media screen and (min-width: $x-lg-width) {
+    padding-left: $lg-header-width;
+  }
+
+  #active_admin_content {
+    padding: 30px 0;
+    @include clear-fix();
+
+    @media screen and (min-width: $lg-width) {
+      padding: 30px 25px;
+    }
+  }
+}
+
+.header {
+  .site_title {
+    width: 160px;
+    height: 50px;
+    font-size: 16px;
+    line-height: 50px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: $header-background;
+    border-bottom: 1px solid $header-border-color;
+    margin: 0;
+    padding-left: 20px;
+
+    @media screen and (min-width: $sm-width) {
+      width: $header-width;
+      height: 60px;
+      font-size: 20px;
+      line-height: 60px;
+    }
+
+    @media screen and (min-width: $x-lg-width) {
+      width: $lg-header-width;
+    }
+
+    #site_title_image {
+      height: 100%;
+      padding: 6px 0;
+    }
+  }
+
+  #utility_nav {
+    height: 50px;
+    width: calc(100% - 160px);
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 3;
+    text-align: right;
+    background-color: $header-background;
+    border-bottom: 1px solid $header-border-color;
+
+    &:before {
+      @include icon("\f0c9");
+
+      display: inline;
+      visibility: visible;
+      cursor: pointer;
+      position: absolute;
+      top: 0;
+      left: 0;
+      color: $text-color;
+      padding: 15px 0;
+      text-align: center;
+      width: 40px;
+      font-size: 20px;
+    }
+
+    @media screen and (min-width: $sm-width) {
+      height: 60px;
+      width: $screen-header-width;
+
+      &:before {
+        padding: 20px 0;
+      }
+    }
+
+    @media screen and (min-width: $lg-width) {
+      &:before {
+        display: none;
+      }
+    }
+
+    @media screen and (min-width: $x-lg-width) {
+      width: $lg-screen-header-width;
+    }
+
+    li {
+      display: inline-block;
+      @include transition-button();
+
+      &:hover {
+        background-color: $header-nav-action-hover-background;
+      }
+
+      &:active {
+        background-color: $header-nav-action-active-background;
+      }
+    }
+
+    #current_user {
+      a {
+        visibility: hidden;
+        position: relative;
+        width: 50px;
+        height: 49px;
+        display: inline-block;
+
+        &:before {
+          @include icon("\f007");
+
+          display: inline;
+          visibility: visible;
+          cursor: pointer;
+          position: absolute;
+          top: 0;
+          right: 0;
+          color: $text-color;
+          padding: 15px 0;
+          text-align: center;
+          width: 50px;
+          font-size: 20px;
+        }
+
+        @media screen and (min-width: $sm-width) {
+          width: 60px;
+          height: 59px;
+
+          &:before {
+            padding: 20px 0;
+            width: 60px;
+          }
+        }
+      }
+    }
+
+    #logout {
+      min-width: 50px;
+      min-height: 49px;
+      float: right;
+
+      a {
+        visibility: hidden;
+        position: relative;
+        width: 50px;
+        display: block;
+
+        &:before {
+          @include icon("\f011");
+
+          display: inline;
+          visibility: visible;
+          cursor: pointer;
+          position: absolute;
+          top: 0;
+          right: 0;
+          color: $text-color;
+          padding: 15px 0;
+          text-align: center;
+          width: 50px;
+          font-size: 20px;
+        }
+
+      }
+
+      @media screen and (min-width: $sm-width) {
+        min-width: 60px;
+        min-height: 59px;
+
+        a {
+          width: 60px;
+          height: 59px;
+
+          &:before {
+            padding: 20px 0;
+            width: 60px;
+          }
+        }
+      }
+    }
+  }
+}
+
+#title_bar {
+  background-color: #fff;
+  @include box-shadow($box-shadow);
+  margin: 15px 0 0 0;
+  padding: 8px 10px;
+  @include clear-fix();
+
+  @media screen and (min-width: $lg-width) {
+    padding: 8px 20px;
+    border-radius: $border-radius;
+    margin: 15px 25px 0 25px;
+  }
+
+  #titlebar_left {
+    display: inline-block;
+    float: left;
+    line-height: 29px;
+
+    h2 {
+      display: inline-block;
+      font-size: 16px;
+    }
+  }
+
+  #titlebar_right {
+    display: inline-block;
+    float: right;
+
+    .action_item a {
+      @include primary-button($primary-color, #fff);
+      padding: 5px 8px;
+    }
+  }
+
+  #page_title {
+    font-weight: normal;
+    margin: 0;
+  }
+}

data/app/assets/stylesheets/crowdai_admin/layouts/_main_content.scss

@@ -0,0 +1,44 @@
+#main_content_wrapper {
+  float: left;
+  width: 100%;
+
+  @include clear-fix();
+}
+
+#active_admin_content.with_sidebar #main_content_wrapper {
+  width: 100%;
+
+  @media screen and (min-width: $sm-width) {
+    #main_content {
+      border-top-right-radius: $border-radius;
+      border-bottom-right-radius: $border-radius;
+    }
+  }
+
+  @media screen and (min-width: $lg-width) {
+    #main_content {
+      margin-right: 20px;
+    }
+  }
+
+  @media screen and (min-width: $lg-width) {
+    #main_content {
+      margin-right: 20px;
+    }
+  }
+}
+
+#main_content {
+  background-color: #fff;
+  @include box-shadow(0 0 4px 0 rgba(0,0,0,.04));
+  padding: 15px 10px;
+
+  @media screen and (max-width: 576px) {
+    overflow-x: scroll;
+  }
+
+  @media screen and (min-width: $lg-width) {
+    padding: 20px;
+    border-radius: $border-radius;
+  }
+}

data/app/assets/stylesheets/crowdai_admin/layouts/_sidebar.scss

@@ -0,0 +1,104 @@
+.header #tabs {
+  width: $header-width;
+  height: calc(100% - 60px);
+  position: fixed;
+  top: 50px;
+  background-color: $sidebar-background;
+  border-right: 1px solid $sidebar-border-color;
+  z-index: 1;
+  overflow: auto;
+  left: - $header-width;
+
+  @media screen and (min-width: $sm-width) {
+    top: 60px;
+  }
+
+  @media screen and (min-width: $lg-width) {
+    left: 0px !important;
+  }
+
+  @media screen and (min-width: $x-lg-width) {
+    width: $lg-header-width;
+  }
+
+  li {
+    width: 100%;
+    font-size: 14px;
+    line-height: 38px;
+    cursor: pointer;
+
+    a {
+      width: 100%;
+      height: 100%;
+      display: inline-block;
+      color: $text-color;
+      padding: 0 20px;
+
+      &:hover {
+        background-color: $sidebar-item-hover-background;
+      }
+    }
+
+    &.current {
+      a {
+        color: $primary-color;
+      }
+    }
+
+    &.has_nested {
+      & > a:nth-child(1) {
+        position: relative;
+
+        &:after {
+          @include icon("\f0d7");
+          display: inline;
+          position: absolute;
+          top: 50%;
+          right: 20px;
+          @include transform(translateY(-50%));
+          color: $text-color;
+        }
+      }
+
+      ul {
+        border-top: 1px solid $sidebar-border-color;
+        border-bottom: 1px solid $sidebar-border-color;
+        background-color: $body-background;
+        padding: 10px 0;
+        cursor: auto;
+        display: none;
+
+        a {
+          padding: 0px 15px 0px 35px;
+          color: $text-color;
+
+          &:hover {
+            background-color: $sidebar-nested-item-hover-background;
+          }
+
+          @media screen and (min-width: $x-lg-width) {
+            padding: 0px 15px 0px 40px;
+          }
+        }
+
+        .current a {
+          color: $primary-color;
+        }
+      }
+
+      &.open, &.current {
+        & > a:nth-child(1) {
+          position: relative;
+
+          &:after {
+            @include icon("\f0d8");
+          }
+        }
+
+        ul {
+          display: block;
+        }
+      }
+    }
+  }
+}