crowdai_admin 1.0.0

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

@@ -0,0 +1,8 @@
+#wrapper {
+  display: flex;
+  flex-direction: column;
+
+  .flashes {
+    order: -1;
+  }
+}

data/app/assets/stylesheets/crowdai_admin/mixins/_buttons_mixins.scss

@@ -0,0 +1,120 @@
+@mixin button() {
+  border-radius: $border-radius;
+  display: inline-block;
+  @include transition-button();
+  cursor: pointer;
+
+  &:active, &:focus {
+    outline: 0;
+  }
+
+  &.disabled, &:disabled {
+    opacity: 0.6;
+    cursor: no-drop;
+  }
+}
+
+@mixin primary-button($background-color, $color) {
+  background-color: $background-color;
+  color: $color;
+  border: none;
+  @include button();
+
+  &:hover {
+    background-color: lighten($background-color, 10%);
+  }
+
+  &:active, &:focus {
+    background-color: darken($background-color, 10%);
+  }
+
+  &:disabled {
+    background-color: $background-color;
+  }
+}
+
+@mixin secondary-button($color) {
+  background-color: #fff;
+  color: $color;
+  border: 1px solid $color;
+  @include button();
+
+  &:hover {
+    color: #fff;
+    background-color: $color;
+  }
+
+  &:active, &:focus {
+    background-color: darken($color, 10%);
+    color: #fff;
+  }
+}
+
+@mixin secondary-dropdown($color) {
+  @include secondary-button($color);
+  padding: 6px 25px 6px 10px;
+  position: relative;
+
+  &:after {
+    @include icon("\f0dd");
+    position: absolute;
+    right: 8px;
+  }
+
+  &:active, &:focus {
+    background-color: darken($color, 10%);
+    color: #fff;
+  }
+
+  &.disabled, &:disabled {
+    color: $grey;
+    background-color: #f3f7f9;
+    border-color: #f3f7f9;
+    @include box-shadow(none);
+    opacity: .65;
+  }
+}
+
+@mixin group-button($color) {
+  a {
+    display: inline-block;
+    color: $color;
+    border-top: 1px solid $color;
+    border-bottom: 1px solid $color;
+    float: left;
+    padding: 6px 10px;
+    border-right: 1px solid $color;
+    @include transition-button();
+  }
+
+  &:first-child a {
+    border-left: 1px solid $color;
+    border-top-left-radius: $border-radius;
+    border-bottom-left-radius: $border-radius;
+  }
+
+  &:last-child a {
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+  }
+
+  &:hover {
+    a {
+      background-color: lighten($color, 10%);
+      border-color: lighten($color, 10%);
+      color: #fff;
+    }
+  }
+
+  &:active, &:focus, &.selected {
+    a {
+      background-color: darken($color, 10%);
+      border-color: darken($color, 10%);
+      color: #fff;
+    }
+  }
+}
+
+@mixin little-button() {
+  padding: 6px 12px;
+}

data/app/assets/stylesheets/crowdai_admin/mixins/_mixins.scss

@@ -0,0 +1,3 @@
+@import "prefix_mixins";
+@import "buttons_mixins";
+@import "sidebar_mixins";

data/app/assets/stylesheets/crowdai_admin/mixins/_prefix_mixins.scss

@@ -0,0 +1,63 @@
+@mixin transform($var) {
+  -webkit-transform: $var;
+     -moz-transform: $var;
+      -ms-transform: $var;
+       -o-transform: $var;
+          transform: $var;
+}
+
+@mixin appearance($effect:none) {
+  -webkit-appearance: $effect;
+     -moz-appearance: $effect;
+      -ms-appearance: $effect;
+       -o-appearance: $effect;
+          appearance: $effect;
+}
+
+@mixin transition($args...) {
+  -webkit-transition: $args;
+  -o-transition: $args;
+  transition: $args;
+}
+
+@mixin transition-button() {
+  @include transition(border .2s linear,color .2s linear,width .2s linear,background-color .2s linear);
+}
+
+@mixin box-shadow($args...) {
+  -webkit-box-shadow: $args;
+  -moz-box-shadow: $args;
+  box-shadow: $args;
+}
+
+@mixin disable-user-select() {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+@mixin clear-fix() {
+  &:after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+}
+
+@mixin outline() {
+  &:focus {
+    outline: 0;
+  }
+}
+
+@mixin icon($code-icon) {
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font: normal normal normal 14px/1 FontAwesome;
+  content: $code-icon;
+}

data/app/assets/stylesheets/crowdai_admin/mixins/_sidebar_mixins.scss

@@ -0,0 +1,24 @@
+@mixin sidebar-container() {
+  #active_admin_content.with_sidebar {
+    #main_content_wrapper {
+      width: $screen-filter-width;
+
+      @media screen and (min-width: $sm-width) {
+        padding-right: 10px;
+      }
+
+      @media screen and (min-width: $lg-width) {
+        padding-right: 0;
+        width: $lg-screen-filter-width;
+      }
+    }
+
+    #sidebar {
+      display: inline-block;
+
+      tr:hover {
+        background: rgba(243, 247, 249, 0.3);
+      }
+    }
+  }
+}

data/app/assets/stylesheets/crowdai_admin/pages/_form.scss

@@ -0,0 +1,116 @@
+body.logged_in {
+  &.new, &.edit, &.create, &.update {
+    @include sidebar-container();
+
+    .formtastic legend {
+      font-weight: normal;
+    }
+
+    fieldset.inputs {
+      margin-bottom: 20px;
+    }
+
+    .input {
+      .label {
+        padding-bottom: 5px;
+        text-align: left;
+        margin: auto 0;
+        padding-top: 8px;
+        text-align: right;
+        font-size: 14px;
+
+        @media screen and (min-width: $sm-width) {
+          padding-bottom: 0;
+          height: 25px;
+          width: 25%;
+          float: left;
+          padding-right: 20px;
+        }
+      }
+      input, textarea {
+        @media screen and (min-width: $sm-width) {
+          width: 50%;
+        }
+
+        &[type='radio'] {
+          width: 15px;
+          float: left;
+          margin-top: 3px;
+        }
+
+        &[type='checkbox'] {
+          width: 15px;
+          margin: 0 5px -2px 0;
+        }
+      }
+
+      .select2-container {
+        @media screen and (min-width: $sm-width) {
+          width: 50% !important;
+        }
+
+        a {
+          height: 30px;
+          line-height: 30px;
+        }
+      }
+
+      select {
+        min-width: 50%;
+        height: 30px;
+      }
+
+      .fragment {
+        margin-right: 10px;
+
+        label {
+          padding-right: 5px;
+        }
+
+        select {
+          min-width: auto;
+        }
+      }
+
+      &.boolean {
+        margin-left: 25%;
+        @include disable-user-select();
+
+        input {
+          width: auto;
+        }
+
+        label {
+          font-size: 14px;
+          cursor: pointer;
+          padding: 5px 5px 5px 0;
+        }
+
+        input[type='checkbox'] {
+          width: 15px;
+          margin: 0 5px -2px 0;
+        }
+      }
+
+      li.fragment {
+        display: inline;
+      }
+
+      li.choice {
+        margin-left: 25%;
+        
+        .field_with_errors {
+          float: left;
+        }
+      }
+
+      .inline-errors {
+        padding-left: 25%;
+      }
+    }
+
+    .actions {
+      padding-left: 25%;
+    }
+  }
+}

data/app/assets/stylesheets/crowdai_admin/pages/_index.scss

@@ -0,0 +1,116 @@
+body.index {
+
+  .resource_selection_toggle_cell, .resource_selection_cell {
+    display: flex;
+  }
+
+  .table_tools {
+    margin-bottom: 20px;
+    font-size: 14px;
+
+    &:after {
+      content: '';
+      display: block;
+      clear: both;
+    }
+
+    input[type='checkbox'] {
+      display: flex;
+    }
+
+    .collection_selection_toggle_all {
+      display: flex !important;
+    }
+
+    .batch_actions_selector {
+      display: inline-block;
+    }
+
+    .dropdown_menu_button{
+      @include secondary-dropdown($primary-color);
+    }
+
+    .dropdown_menu_list {
+      background-color: #fff;
+      padding: 10px 15px;
+      border-radius: $border-radius;
+      @include box-shadow($box-shadow);
+      display: inline-block;
+      position: absolute;
+      z-index: 1;
+    }
+  }
+
+  .paginated_collection_contents {
+    margin-bottom: 20px;
+    overflow-x: auto;
+  }
+
+  #index_footer {
+    font-size: 14px;
+  }
+
+  .sortable {
+    position: relative;
+
+    &:after {
+      @include icon("\f0dc");
+      font-size: 12px;
+      position: absolute;
+      top: 50%;
+      right: 5px;
+      @include transform(translateY(-50%));
+
+      @media screen and (min-width: $md-width) {
+        font-size: 14px/1;
+      }
+    }
+
+    &.sorted-desc:after {
+      content: "\f0dd";
+    }
+
+    &.sorted-asc:after {
+      content: "\f0de";
+    }
+  }
+
+  .table_actions {
+    .member_link {
+      @include primary-button($primary-color, white);
+      padding: 2px 9px;
+      margin-right: 4px;
+    }
+  }
+  
+  .scopes {
+    .scope {
+      @include group-button($primary-color);
+    }
+  }
+
+  #sidebar {
+    position: fixed;
+    right: - $filter-width;
+
+    @media screen and (min-width: $x-lg-width) {
+      right: - $lg-filter-width;
+    }
+
+    &:before {
+      cursor: pointer;
+      position: absolute;
+      top: 30px;
+      left: -40px;
+      width: 40px;
+      height: 50px;
+      background-color: #fff;
+      @include box-shadow(-1px 0 4px 0 rgba(0,0,0,.04));
+      border-top-left-radius: $border-radius;
+      border-bottom-left-radius: $border-radius;
+      @include icon("\f0b0");
+      font-size: 20px;
+      padding: 15px 10px;
+    }
+  }
+}

data/app/assets/stylesheets/crowdai_admin/pages/_login.scss

@@ -0,0 +1,65 @@
+body.logged_out {
+  .flash {
+    position: fixed;
+  }
+
+  #active_admin_content {
+    height: 100vh;
+    width: 100%;
+    display: flex;
+    align-items: center;
+  }
+}
+
+#login {
+  width: 100%;
+  margin: auto;
+  background-color: white;
+  border-top: $border-radius solid $primary-color;
+  @include box-shadow($box-shadow);
+  color: $text-color;
+  padding: 20px;
+
+  @media screen and (min-width: 400px) {
+    border-radius: $border-radius;
+    width: 400px;
+    padding: 30px;
+  }
+
+  h2 {
+    text-align: center;
+  }
+
+  .label {
+    display: inline-block;
+    max-width: 100%;
+    margin-bottom: 5px;
+  }
+
+  .input.boolean {
+    @include disable-user-select();
+    label {
+      font-size: 15px;
+      cursor: pointer;
+      padding: 5px 5px 5px 0;
+    }
+
+    input[type='checkbox'] {
+      width: 15px;
+      margin: 0 5px -2px 0;
+    }
+  }
+
+  a {
+    margin-top: 10px;
+    display: inline-block;
+  }
+
+  .input_action {
+    min-width: 50%;
+  }
+
+  input[type="submit"] {
+    line-height: 43px;
+  }
+}

data/app/assets/stylesheets/crowdai_admin/pages/_show.scss

@@ -0,0 +1,3 @@
+body.show {
+  @include sidebar-container();
+}

data/app/assets/stylesheets/crowdai_admin/variables/_colors.scss

@@ -0,0 +1,49 @@
+// BASIC COLOR
+$red: #f0524d;
+$green: #00897B;
+$blue: #4bacfe;
+$black: #36393D;
+$grey: #76838f;
+
+// flash
+$error: #dc4747 !default;
+$warning: #f2a654 !default;
+$success: #46be8a !default;
+$info: #57c7d4 !default;
+$flash-text-color: #fff !default;
+$flash-background-color: $grey !default;
+
+// status_tag
+$status-tag-text-color: #fff !default;
+$status-tag-background-color: #cacaca !default;
+$status-tag-background-valid-color: $success !default;
+$status-tag-background-error-color: $error !default;
+
+$border-color: #e4eaec;
+
+
+// body
+$body-background: #eee !default;
+
+// header
+$header-border-color: #e6e6e6 !default;
+$header-background: #fff !default;
+
+// nav action
+$header-nav-action-hover-background: #f5f5f5 !default;
+$header-nav-action-active-background: #f0f0f0 !default;
+
+//sidebar
+$sidebar-border-color: $header-border-color !default;
+$sidebar-background: #f5f5f5 !default;
+
+$sidebar-item-hover-background: #f0f0f0 !default;
+$sidebar-nested-item-hover-background: #e7e7e7 !default;
+
+// text
+$text-color: #5a5a5a !default;
+$text-color-important: #526069 !default;
+
+$box-shadow: 0 0 4px 0 rgba(0,0,0,0.1) !default;
+
+$primary-color: $red !default;

data/app/assets/stylesheets/crowdai_admin/variables/_media_queries.scss

@@ -0,0 +1,10 @@
+$sm-width: 576px !default;
+$md-width: 768px !default;
+$lg-width: 992px !default;
+$x-lg-width: 1400px !default;
+
+// <576px  Extra small
+// ≥576px  Small
+// ≥768px  Medium
+// ≥992px  Large
+// ≥1400px Extra large

data/app/assets/stylesheets/crowdai_admin/variables/_size.scss

@@ -0,0 +1,9 @@
+$header-width: 200px !default;
+$screen-header-width: calc(100% - 200px) !default;
+$lg-header-width: 250px !default;
+$lg-screen-header-width: calc(100% - 250px) !default;
+
+$filter-width: 230px !default;
+$screen-filter-width: calc(100% - 230px) !default;
+$lg-filter-width: 270px !default;
+$lg-screen-filter-width: calc(100% - 270px) !default;

data/app/assets/stylesheets/crowdai_admin/variables/_variables.scss

@@ -0,0 +1,5 @@
+@import "colors";
+@import "size";
+@import "media_queries";
+
+$border-radius: 2px !default;

data/lib/crowdai_admin/custom_builder.rb

@@ -0,0 +1,65 @@
+module CrowdaiAdmin
+  class CustomBuilder
+    attr_accessor :context, :model, :args, :block
+
+    def initialize(context, model, *args, &block)
+      @context = context
+      @model = model
+      @args = *args
+      @block = block
+    end
+
+    def render
+      raise NotImplementedError
+    end
+
+    def self.create_view_methods
+      builder_class = self
+      builder_name = builder_method_name
+
+      ::ActiveAdmin::Views::TableFor.class_eval do
+        define_method("#{builder_name}_column") do |*args, &block|
+          column(*args) { |model| builder_class.new(self, model, *args, &block).render }
+        end
+      end
+
+      ::ActiveAdmin::Views::AttributesTable.class_eval do
+        define_method("#{builder_name}_row") do |*args, &block|
+          row(*args) { |model| builder_class.new(self, model, *args, &block).render }
+        end
+      end
+    end
+
+    def self.builder_method_name
+      name.underscore.to_s.split("/").last.chomp("_builder")
+    end
+
+    protected
+
+    def data
+      @data ||= block ? block.call(model) : model.send(attribute)
+    end
+
+    def options
+      @options ||= has_opts? ? args.last : {}
+    end
+
+    def class_name
+      model.class.name.demodulize.underscore
+    end
+
+    def attribute
+      @attribute ||= has_label? ? args[1] : args[0]
+    end
+
+    def has_label?
+      has_opts? ? args.length == 3 : args.length == 2
+    end
+
+    def has_opts?
+      @has_opts ||= args.last.is_a?(Hash)
+    end
+
+    create_view_methods
+  end
+end

data/lib/crowdai_admin/toggle_booleans.rb

@@ -0,0 +1,41 @@
+module CrowdaiAdmin
+  class ToggleBooleans < CustomBuilder
+    def render
+      raise ArgumentError, 'Block should not be used in toggle bool columns' if block
+      return if conditional_eval_hide?
+      context.div class: 'toggle-bool-switches-container' do
+        context.span toggle
+      end
+    end
+
+    def toggle
+      toggle_classes = 'toggle-bool-switch'
+      toggle_classes += ' on' if data
+      toggle_classes += ' notify-success' if options[:success_message]
+
+      context.span(
+        '',
+        id: "toggle-#{class_name}-#{model.id}-#{attribute}",
+        class: toggle_classes,
+        'data-model' => class_name,
+        'data-object_id' => model.id,
+        'data-field' => attribute,
+        'data-value' => data,
+        'data-url' => context.auto_url_for(model),
+        'data-success_message' => options[:success_message]
+      )
+    end
+
+    def conditional_eval_hide?
+      [:if, :unless].any? do |cond|
+        if options[cond]
+          raise ArgumentError, "'#{cond}' option should be a proc" unless options[cond].is_a?(Proc)
+          result = options[cond].call(model)
+          cond == :if ? !result : result
+        end
+      end
+    end
+  end
+end
+
+CrowdaiAdmin::ToggleBooleans.create_view_methods

data/lib/crowdai_admin/version.rb

@@ -0,0 +1,3 @@
+module CrowdaiAdmin
+  VERSION = "1.0.0"
+end