cm-admin 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f72a2d04ff945602246fef73d1d261915da0aa6ad1f7948fccac7ccbc9d5405b
-  data.tar.gz: 3b4c483d404aca09b19fae04979afb1a0e13522a67624e8513c86d9f231e63c6
+  metadata.gz: 208e7113a6556a94cdba5289db7d672f6ba3443189c49789fc4f3c95d6a14dc2
+  data.tar.gz: b9201bb6da693871e2a3708bb8ac76ba352ee68b92c58413bd17038225b39ca9
 SHA512:
-  metadata.gz: 643aeabbb0a12109c48dd69fdc93c746939b89d75efa5bc44b7cbe9aa110d5e41676659ee53c7b752449a2ccca5a82a870efe029b1c7eed86f75469cb0dfb540
-  data.tar.gz: a0cc12c6c5b664e7cd9fdc14cc084708a6b6f1bd5692bd7f8202d7b26d7f6a46b95fc6cee0b84f91d1c7b493e31450eeae335650d99782fbac8fe8a82daf7ac5
+  metadata.gz: 8b6937bc74d0aebd0220271d096b914e70183af91fa5ec2908d3d16b32afebb97d5a1fad1f049d2234f308b27e9a843a1b4a5df649290897c20dc4635217d870
+  data.tar.gz: 65146543054360dec133299268ae94e8579403d4a962c031835d449199dd7009271b85c31d59c8b46a42507e1ed41ad85d19dae953135789a9f10f5a488f5e28

data/README.md

@@ -43,10 +43,20 @@ For generating the show page views
 
     $ rails g cm_admin:view products show title description
 
-For generating the index page views
-
+For generating the form page views
+    $ rails g cm_admin:view products form column_name:field_type
     $ rails g cm_admin:view products form title:string description:string
 
+Following field types are acceted
+
+* input-integer
+* input-string
+* single-select
+* multi-select
+* checkbox
+* radio
+
+
 ## Development
 
 After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.

data/lib/cm_admin/version.rb

@@ -1,3 +1,3 @@
 module CmAdmin
-  VERSION = "0.1.0"
+  VERSION = "0.2.0"
 end

data/lib/generators/cm_admin/install_generator.rb

@@ -12,6 +12,14 @@ module CmAdmin
 
     DESC
 
+    def add_required_gems
+      gem 'slim'
+      gem 'simple_form'
+      system("yarn add bootstrap")
+      system("yarn add @fortawesome/fontawesome-free")
+      system("yarn add select2")
+    end
+
     def copy_layout_file
       copy_file "layouts/_side_navbar.html.slim", "app/views/layouts/_side_navbar.html.slim"
       copy_file "layouts/_navbar.html.slim", "app/views/layouts/_navbar.html.slim"
@@ -20,7 +28,7 @@ module CmAdmin
     end
 
     def copy_asset_file
-      copy_file "assets/images/same-logo.png", "app/assets/images/same-logo.png"
+      copy_file "assets/images/cm.png", "app/assets/images/cm.png"
       directory "assets/stylesheets/", "app/assets/stylesheets/"
       remove_file "app/assets/stylesheets/application.css"
     end

data/lib/generators/cm_admin/templates/assets/stylesheets/application.css.scss

@@ -10,21 +10,24 @@
  * files in this directory. Styles in this file should be added after the last require_* statement.
  * It is generally better to create a new file per style scope.
  *
- *= require_tree .
+ *= require 'base/table'
+ *= require 'base/main-nav'
+ *= require 'base/sidebar'
+ *= require 'base/show'
+ *= require 'base/form'
+ *= require 'base/scaffold'
+ *= require 'base/input-styles'
+ *= require 'base/auth'
  *= require_self
- *= require font-awesome
  *= require 'select2'
  *= require bootstrap/dist/css/bootstrap
+ *= require bootstrap-datepicker/dist/css/bootstrap-datepicker3
+ *= require daterangepicker
  */
 
-.error-color {
-  color: red;
-}
-
-.select2.select2-container {
-  width: 100% !important;
-}
-
-.select2-selection {
-  height: 40px !important;
-}
+ $fa-font-path: '@fortawesome/fontawesome-free/webfonts';
+ @import '@fortawesome/fontawesome-free/scss/fontawesome';
+ @import '@fortawesome/fontawesome-free/scss/solid';
+ @import '@fortawesome/fontawesome-free/scss/regular';
+ @import '@fortawesome/fontawesome-free/scss/brands';
+ @import '@fortawesome/fontawesome-free/scss/v4-shims';

data/lib/generators/cm_admin/templates/assets/stylesheets/{_variable.scss → base/_variable.scss}

@@ -1,4 +1,4 @@
-$background: #1A1D1F;
+$elephant-black: #1A1D1F;
 $nav-btn-color: #FFCB05;
 $nav-text-color: white;
 $sidebar-background: #242536;
@@ -6,6 +6,9 @@ $main-background: #F6F8FA;
 $table-background: #ffffff;
 $heading-color: rgb(224, 193, 14);
 $form-control-background: rgba(50,50,50,0.6) !important;
-$nav-active-border: 4px solid #FFCB05;
+$nav-active-border: 4px solid #0099ff;
 $active-bg: #000000;
 $paginate-btn-color: rgb(180, 149, 23);
+
+//general colors
+$white: #FFFFFF;

data/lib/generators/cm_admin/templates/assets/stylesheets/base/auth.scss

@@ -0,0 +1,75 @@
+@import "_variable.scss";
+
+.auth {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100vh;
+  background-color: #1b1d1f;
+  &__form-inner {
+    width: 450px;
+    max-width: 450px;
+    margin: 0 auto;
+    .header-log {
+      text-align: center;
+      img {
+        width: 250px;
+      }
+    }
+    .header-title {
+      margin: 30px 0;
+      letter-spacing: 2px;
+      text-align: center;
+      color: $white;
+    }
+
+    .field-50 {
+      display: flex;
+      margin-bottom: 24px;
+      &__item {
+        width: 50%;
+        &:nth-child(2) {
+          margin-left: 20px;
+        }
+      }
+    }
+
+    .field-100 {
+      width: 100%;
+      margin-bottom: 24px;
+    }
+
+    .get-start-btn {
+      width: 100%;
+    }
+
+    .forgot-password {
+      margin-bottom: 8px;
+      text-align: right;
+      a {
+        color: #20b5ff;
+        font-size: 14px;
+      }
+    }
+
+    input {
+      display: block;
+      width: 100%;
+      height: 39px;
+      padding: 6px 12px;
+      font-size: 16px;
+      color: #555555;
+      background-color: $white;
+      border: 1px solid #ccc;
+      border-radius: 2px;
+      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+      transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+      &:focus {
+        border-color: #66afe9 !important;
+        outline: 0 !important;
+        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6) !important;
+      }
+    }
+  }
+}

data/lib/generators/cm_admin/templates/assets/stylesheets/base/form.scss

@@ -0,0 +1,125 @@
+@import "_variable.scss";
+
+.form-wrapper {
+  margin-top: 60px;
+
+  &__top-bar {
+    position: fixed;
+    top: 60px;
+    left: 250px;
+    display: flex;
+    align-items: center;
+    width: calc(100% - 250px);
+    height: 60px;
+    padding: 0 20px;
+    background-color: $white;
+    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.06);
+    z-index: 9;
+    .back-btn {
+      color: #091e42;
+      font-size: 20px;
+      cursor: pointer;
+      span {
+        color: #0099ff;
+        margin-right: 8px;
+      }
+    }
+  }
+
+  &__inner {
+    margin-top: 120px;
+    padding: 20px;
+    .paper {
+      padding: 20px;
+      background-color: $white;
+      box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
+      border: 1px solid #ebecf0;
+      border-radius: 4px;
+    }
+  }
+
+  .cm-admin-form {
+    max-width: 600px;
+    .form-field {
+      margin-bottom: 20px;
+      .form-label {
+        font-weight: 600;
+        color: #172b4d;
+        font-size: 14px;
+        margin-bottom: 0.5rem;
+      }
+      .form-input {
+        label {
+          font-weight: 600;
+          color: #172b4d;
+          font-size: 14px;
+        }
+        input {
+          width: 100%;
+          padding: 5px 10px;
+          border: 1px solid #c1c7d0;
+          border-radius: 2px;
+          &:focus {
+            border-color: #66afe9 !important;
+            outline: 0 !important;
+            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6) !important;
+          }
+        }
+      }
+
+      .file-upload {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 250px;
+        height: 80px;
+        border: 2px dashed #c1c7d0;
+        border-radius: 4px;
+        cursor: pointer;
+        input[type="file"] {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          opacity: 0;
+          cursor: pointer;
+        }
+        label {
+          color: #0099ff;
+          margin: 0;
+          cursor: pointer;
+        }
+        i {
+          color: #0099ff;
+          margin-left: 8px;
+        }
+      }
+
+      .radio-label {
+        color: #172b4d;
+        font-size: 16px;
+        font-weight: 600;
+        margin-left: 8px;
+      }
+
+      .checkbox-label {
+        color: #172b4d;
+        font-size: 16px;
+        font-weight: 600;
+        margin-left: 8px;
+      }
+    }
+
+    .form-actions {
+      input {
+        padding: 5px 10px;
+        color: $white;
+        background-color: #0099ff;
+        border: none;
+        border-radius: 4px;
+      }
+    }
+  }
+}

data/lib/generators/cm_admin/templates/assets/stylesheets/base/input-styles.scss

@@ -0,0 +1,72 @@
+@import "_variable.scss";
+
+//check box style
+input.cm-checkbox[type='checkbox'] {
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeSpeed;
+  width: 20px;
+  height: 20px;
+  display: inline-block;
+  float: left;
+  position: relative;
+  margin-top: 2px;
+
+  &:after {
+    content: "";
+    vertical-align: middle;
+    text-align: center;
+    position: absolute;
+    cursor: pointer;
+    height: 20px;
+    width: 20px;
+    font-size: 7px;
+    background: $white;
+    border: 1px solid #ccc;
+    border-radius: 2px;
+    line-height: 16px;
+  }
+
+  &:checked:after {
+    background: #0099ff;
+    content: "\2713";
+    font-size: 16px;
+    line-height: 18px;
+    font-weight: bold;
+    color: $white;
+    border: none;
+  }
+}
+
+//Radio button styles 
+input.cm-radio[type='radio'] {
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeSpeed;
+  width: 20px;
+  height: 16px;
+  display: inline-block;
+  position: relative;
+  margin-top: 3px;
+  &:focus {
+    outline: none;
+  }
+  &:after {
+    content: "";
+    vertical-align: middle;
+    text-align: center;
+    position: absolute;
+    height: 20px;
+    width: 20px;
+    background-color: $white;
+    border: 1px solid #D9DEE3;
+    border-radius: 50%;
+    cursor: pointer;
+  }
+  &:checked:after {
+    background-color: #0099ff;
+    content: "\25CF"; 
+    color: $white;
+    font-size: 12px;
+    line-height: 20px;
+    border: none;
+  }
+}

data/lib/generators/cm_admin/templates/assets/stylesheets/base/main-nav.scss

@@ -0,0 +1,79 @@
+@import "_variable.scss";
+
+.main-nav {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 250px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: calc(100% - 250px);
+  height: 60px;
+  padding: 0 20px;
+  background-color: $elephant-black;
+  box-shadow: 0 0 2px 0 rgba(0,0,0,0.23), 0 1px 0 0 rgba(0,0,0,0.1);
+  z-index: 99;
+  &__lhs {
+
+  }
+  &__rhs {
+    .profile-avatar {
+      position: relative;
+      width: 30px;
+      height: 30px;
+      background-color: #3ACA60;
+      text-align: center;
+      border-radius: 50%;
+      cursor: pointer;
+      span {
+        color: $white;
+        font-size: 14px;
+        vertical-align: middle;
+      }
+    }
+
+    .auth-popup {
+      display: none;
+      position: absolute;
+      top: 45px;
+      right: -10px;
+      min-width: 160px;
+      padding: 10px 0;
+      background-color: $white;
+      box-shadow: 0 6px 12px rgba(0,0,0,0.175);
+      border-radius: 4px;
+      z-index: 999;
+      &::before {
+        content: "";
+        border-bottom: 10px solid white;
+        border-right: 10px solid transparent;
+        border-left: 10px solid transparent;
+        position: absolute;
+        top: -10px;
+        right: 16px;
+        z-index: 10;
+      }
+      &::after {
+        content: "";
+        border-bottom: 12px solid #ccc;
+        border-right: 12px solid transparent;
+        border-left: 12px solid transparent;
+        position: absolute;
+        top: -12px;
+        right: 14px;
+        z-index: 9;
+      }
+      p {
+        margin: 0;
+        cursor: pointer;
+      }
+    }
+
+    .profile-avatar:hover {
+      .auth-popup {
+        display: block;
+      }
+    }
+  }
+}