slash_admin 1.1.0 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6f76edc96c5cccb62cb921bf3b4d935ffb84106349c052b6427811ac546f8594
-  data.tar.gz: 1eef93bc838f43d509a0afc56731f0efd8cf03d997546287b9e000655391b2e4
+  metadata.gz: 3076a02b7ac9bdec780ff285197d489ee05a27f81343e5b47f09d327929f2287
+  data.tar.gz: 94e9fdabd365ad4e0d3366dcdcd9794bcc73bd1b7562f805987b6d9ebdf35575
 SHA512:
-  metadata.gz: e5c9033f6ca29cc9c28df3a0e2d75ae5a24cdc1307c4cfcd3cbaea735f41c3d243ce50df48ebdb61e53b265dd29a6cafa6debb197c8b528e848b9d5a57f6fcaa
-  data.tar.gz: e551a5c45333957db4b323fb451b1143b298a859c5e71a31a15a0ff016819accb206255f6829fb70c11a3ffee57a4bf2d65b8b75488de6c07d99bc843fb3bb8a
+  metadata.gz: 6aff6a578fdfabc8a06ba9ddf6e2eb3133d9c6e5706b7dd2cb5633e804d3ab0c40acd30bd9cf95be8020a784ce77fce21ae51dde700fa82aad5766cf022f2c32
+  data.tar.gz: 89b7b2435b230a9ed1076fc71d9acef3999ca8f149c4aa8b4fb37ab8b57fa02ca45bea41e0fb7c72b9f0c6dc2a91c07863984763f2b7aef41e0deaf47ca3b7eb

data/app/assets/stylesheets/slash_admin/application.scss

@@ -29,13 +29,19 @@
  *= require_tree .
  */
 
-@import "slash_admin/colors";
-@import "slash_admin/alert";
+@import "./colors";
+@import "./alert";
 
 $pagination-padding-y: 0.4rem !default;
 $pagination-border-width: 0 !default;
 $border-radius: 0.15rem !default;
 
+@mixin main-shadow {
+  -webkit-box-shadow: 0 10px 20px 0 rgba(46, 91, 255, 0.07);
+  -moz-box-shadow: 0 10px 20px 0 rgba(46, 91, 255, 0.07);
+  box-shadow: 0 10px 20px 0 rgba(46, 91, 255, 0.07);
+}
+
 @import "bootstrap";
 
 @import url("https://use.fontawesome.com/releases/v5.12.1/css/all.css");
@@ -61,23 +67,19 @@ h6 {
 }
 
 .turbolinks-progress-bar {
-  background-color: $pink;
+  background-color: $primary;
   height: 3px;
 }
 
 a {
   transition: all ease 0.6s;
-  color: $pink;
 
   &:hover {
-    color: darken($primary, 5%);
+    text-decoration: none;
+    color: $secondary;
   }
 }
 
-i {
-  transition: all ease 0.6s;
-}
-
 .btn {
   cursor: pointer;
 }
@@ -100,8 +102,7 @@ p[data-f-id="pbf"] {
 }
 
 #admin-dashboard {
-  background: $tertiary;
-  padding-top: 68px;
+  background: $background;
   margin: 0;
 
   label.form-control-label {
@@ -118,7 +119,7 @@ p[data-f-id="pbf"] {
     background: transparent;
 
     &:hover {
-      background: $lightgrey;
+      background: $textColorHover;
     }
   }
 
@@ -148,7 +149,11 @@ p[data-f-id="pbf"] {
   }
 
   .select2-results__option[aria-disabled="true"] {
-    background: $lightgrey !important;
+    background: $textColorHover !important;
+  }
+
+  .select2-container {
+    width: 100% !important;
   }
 
   .select2-container .select2-results__option--highlighted,
@@ -159,12 +164,12 @@ p[data-f-id="pbf"] {
 
   .select2-container--default.select2-container--focus .select2-selection--multiple,
   .select2-container--default.select2-container--focus .select2-selection--single {
-    border: 1px solid #c2cad8;
+    border: 1px solid $border;
   }
 
   .select2-container--default .select2-selection--multiple,
   .select2-container--default .select2-selection--single {
-    border: 1px solid #c2cad8;
+    border: 1px solid $border;
     border-radius: 0;
     height: calc(1.5em + 0.75rem + 2px);
     padding: 0.375rem 0.75rem;
@@ -173,11 +178,11 @@ p[data-f-id="pbf"] {
   .select2-container--default .select2-selection--single .select2-selection__rendered,
   .select2-container--default .select2-selection--multiple .select2-selection__rendered, {
     padding: 0;
-    line-height: 24px;
+    line-height: 21px;
   }
 
   .select2-container--default .select2-selection--single .select2-selection__arrow,
-  .select2-container--default .select2-selection--single .select2-selection__arrow{
+  .select2-container--default .select2-selection--single .select2-selection__arrow {
     height: 32px;
   }
 
@@ -298,7 +303,7 @@ p[data-f-id="pbf"] {
               }
             }
 
-            ul.sub-menu {
+            .sub-menu {
               margin-left: 58px;
             }
           }
@@ -309,10 +314,10 @@ p[data-f-id="pbf"] {
 
   .form-control {
     transition: all ease 0.6s;
-    border: 1px solid #c2cad8;
+    border: 1px solid $border;
 
     &:focus {
-      border-color: #93a1bb;
+      border-color: $primary;
     }
   }
 
@@ -384,6 +389,7 @@ p[data-f-id="pbf"] {
 
     &:hover {
       background: rgba($primary, .4);
+
       .icon-zoom-image {
         opacity: 1;
       }
@@ -435,7 +441,7 @@ p[data-f-id="pbf"] {
   }
 
   h1.page-title {
-    color: $grey;
+    color: $textColorHover;
     font-size: 1.8em;
     font-weight: 300;
 
@@ -443,7 +449,6 @@ p[data-f-id="pbf"] {
       font-size: 13px;
       letter-spacing: 0;
       font-weight: 300;
-      color: #888;
     }
   }
 
@@ -465,13 +470,9 @@ p[data-f-id="pbf"] {
     vertical-align: middle;
   }
 
-  .navbar-light {
-    background: #fff;
-  }
-
   a.menu-toggler {
-    color: $pink !important;
-    transition: all 0.6s;
+    color: $primary !important;
+    transition: all 0.6s ease;
     float: right;
     margin: 23px 0 0;
 
@@ -523,7 +524,7 @@ p[data-f-id="pbf"] {
         right: 10px;
         display: inline-block;
         border-right: 6px solid transparent;
-        border-bottom: 6px solid #fff;
+        border-bottom: 6px solid $border;
         border-left: 6px solid transparent;
         content: "";
       }
@@ -533,7 +534,6 @@ p[data-f-id="pbf"] {
   .navbar {
     padding: 0;
     margin: 0;
-    background: #fff;
     transition: all 0.6s ease;
 
     .right-nav-fix {
@@ -564,7 +564,7 @@ p[data-f-id="pbf"] {
           }
 
           &.active {
-            color: #fff;
+            color: $textColorHover;
           }
         }
       }
@@ -616,25 +616,20 @@ p[data-f-id="pbf"] {
     }
 
     .navbar-collapse {
-      background: #fff;
       width: auto;
       flex: 1;
       padding: 0 15px;
     }
 
     .navbar-brand {
-      color: #fff;
+      color: $primary;
       position: absolute;
       transform: translateY(-50%);
       top: 50%;
       font-weight: 200;
 
-      .icon-menu {
-        color: $pink;
-      }
-
       &:hover {
-        color: #fff;
+        color: $secondary;
       }
     }
 
@@ -647,14 +642,15 @@ p[data-f-id="pbf"] {
       height: 68px;
       padding-left: 20px;
       padding-right: 20px;
+      border-right: 1px solid $border;
     }
   }
 
   .dashboard-panel {
     background: #fff;
     border-radius: 10px;
-    padding: 15px 15px 30px;
-    box-shadow: 0px 1px 15px 1px rgba(69,65,78,0.08);
+    padding: 15px;
+    @include main-shadow;
   }
 
   .line-show {
@@ -662,6 +658,8 @@ p[data-f-id="pbf"] {
   }
 
   .dashboard-stat {
+    margin-bottom: 25px;
+
     .display {
       margin-bottom: 20px;
       display: block;
@@ -672,10 +670,10 @@ p[data-f-id="pbf"] {
         padding: 0;
         font-size: 30px;
         font-weight: 400;
-        color: #666d71;
+        color: $textColorHover;
 
         small {
-          color: #666d71;
+          color: $textColorHover;
         }
       }
     }
@@ -683,7 +681,7 @@ p[data-f-id="pbf"] {
     .status {
       margin-top: 5px;
       font-size: 11px;
-      color: #aab5bc;
+      color: $textColor;
       font-weight: 600;
       text-transform: uppercase;
     }
@@ -700,7 +698,7 @@ p[data-f-id="pbf"] {
       float: left;
 
       small {
-        color: #aab5bc;
+        color: $textColor;
         font-weight: 600;
         text-transform: uppercase;
       }
@@ -711,7 +709,7 @@ p[data-f-id="pbf"] {
       padding: 7px 0 0;
 
       i {
-        color: #cbd4e0;
+        color: $primary;
         font-size: 26px;
       }
     }
@@ -732,6 +730,7 @@ p[data-f-id="pbf"] {
     .page-sidebar {
       width: 195px;
       background: $sidebar;
+      border-right: 1px solid $border;
       position: relative;
       display: flex;
 
@@ -744,14 +743,9 @@ p[data-f-id="pbf"] {
           position: relative;
 
           &.active {
-            background: darken($sidebar, 8%);
-
             > a.nav-link {
-              color: #fff;
-
-              i {
-                color: $pink !important;
-              }
+              color: $textColorHover;
+              font-weight: bold;
             }
 
             &::after {
@@ -767,29 +761,21 @@ p[data-f-id="pbf"] {
               border-top: 12px double transparent;
               border-bottom: 12px double transparent;
               border-left: 0;
-              border-right: 8px solid $tertiary;
+              border-right: 8px solid $border;
             }
           }
 
           &:hover {
             a.nav-link {
-              color: #fff;
-
-              i {
-                color: $pink;
-              }
+              color: $textColorHover;
             }
 
-            > ul.sub-menu {
+            > .sub-menu {
               display: inline-block;
 
               a.nav-link {
                 &:hover {
-                  color: #fff;
-
-                  i {
-                    color: $pink;
-                  }
+                  color: $textColorHover;
                 }
               }
             }
@@ -807,7 +793,7 @@ p[data-f-id="pbf"] {
               border-top: 12px double transparent;
               border-bottom: 12px double transparent;
               border-left: 0;
-              border-right: 8px solid $pink;
+              border-right: 8px solid $border;
             }
           }
 
@@ -837,75 +823,51 @@ p[data-f-id="pbf"] {
               font-size: 24px;
               text-shadow: none;
               text-align: center;
-              color: $blueIcon;
+              color: $primary;
             }
           }
 
-          ul.sub-menu {
+          .sub-menu {
+            @include main-shadow;
             width: 195px;
             margin-left: 195px;
-            background: darken($sidebar, 8%);
+            background: $sidebar;
             top: 0;
             z-index: 9999;
             position: absolute;
-            padding: 0;
             list-style: none;
             display: none;
+            padding: 9px 15px;
 
-            li.nav-item {
-              background: none;
+            tr {
               color: $textColor;
+              transition: all .6s ease;
+              cursor: pointer;
 
-              &::after {
-                border: 0;
-              }
-
-              a.nav-link.active {
-                background: darken($sidebar, 8%);
-
-                i {
-                  color: $pink !important;
-                }
+              &.active {
+                color: $textColorHover;
+                font-weight: bold;
               }
 
               &:hover {
-                a.nav-link {
-                  background: darken($sidebar, 8%);
-                }
+                cursor: pointer;
+                color: $textColorHover;
               }
 
-              a.nav-link {
-                min-height: inherit;
-                padding: 9px 15px;
-                border: 0;
-                color: $textColor;
-
-                &.active {
-                  color: #fff;
-                }
-
-                i {
-                  margin-right: 8px;
-                  font-size: 16px;
-                  line-height: 16px;
-                  text-shadow: none;
-                  text-align: center;
-                  color: $blueIcon;
-                  float: left;
-                }
+              i {
+                color: $primary;
+              }
 
-                .badge {
-                  float: right;
-                  margin-top: 1px;
-                  margin-right: 0;
-                }
+              .badge {
+                float: right;
+                margin-top: 1px;
+                margin-right: 0;
+              }
 
-                .title {
-                  margin-top: 0;
-                  font-size: 13px;
-                  float: left;
-                  display: block;
-                }
+              .title {
+                font-size: 13px;
+                float: left;
+                display: block;
               }
             }
           }
@@ -917,15 +879,15 @@ p[data-f-id="pbf"] {
       flex: 1;
       margin-top: 0;
       min-height: 100vh;
-      padding: 25px 20px 10px;
+      padding: 0 35px;
       overflow: auto;
     }
   }
 
   .breadcrumb {
     padding: 10px 15px;
-    border: 1px solid rgba(121,133,166,0.1);
-    box-shadow: 0px 1px 15px 1px rgba(69,65,78,0.08);
+    border: 1px solid rgba(121, 133, 166, 0.1);
+    @include main-shadow;
     background-color: #fff;
     margin: 20px 0;
     border-radius: 0;
@@ -946,8 +908,8 @@ p[data-f-id="pbf"] {
   .portlet {
     background: #fff;
     margin-bottom: 25px;
-    border: 1px solid rgba(121,133,166,0.1);
-    box-shadow: 0px 1px 15px 1px rgba(69,65,78,0.08);
+    border: 1px solid rgba(121, 133, 166, 0.1);
+    @include main-shadow;
   }
 
   .btn-circle {
@@ -969,7 +931,7 @@ p[data-f-id="pbf"] {
   }
 
   .portlet-title {
-    border-bottom: 1px solid rgba(121,133,166,0.1);
+    border-bottom: 1px solid rgba(121, 133, 166, 0.1);
     padding: 10px 20px;
     margin-bottom: 10px;
     display: flex;
@@ -977,7 +939,6 @@ p[data-f-id="pbf"] {
     justify-content: space-between;
 
     .caption {
-      color: $pink;
       text-transform: uppercase;
       font-weight: bold;
       padding: 10px 0;
@@ -1020,7 +981,7 @@ p[data-f-id="pbf"] {
 
   .datepicker {
     border-radius: 0;
-    box-shadow: 5px 5px rgba(102, 102, 102, 0.1);
+    @include main-shadow;
     border: 1px solid #efefef;
 
     table {
@@ -1057,7 +1018,7 @@ p[data-f-id="pbf"] {
   }
 
   .table-data-list {
-    border-color: rgba(121,133,166,0.1) !important;
+    border-color: rgba(121, 133, 166, 0.1) !important;
     margin-top: 1rem;
     background: #fff;
     font-size: .9em;
@@ -1099,13 +1060,14 @@ p[data-f-id="pbf"] {
         height: initial;
         padding: 0 4px;
       }
+
       .select2-container--default .select2-selection--single .select2-selection__arrow,
-      .select2-container--default .select2-selection--single .select2-selection__arrow{
+      .select2-container--default .select2-selection--single .select2-selection__arrow {
         height: initial;
       }
 
       .select2-container--default .select2-selection--single .select2-selection__arrow,
-      .select2-container--default .select2-selection--single .select2-selection__arrow{
+      .select2-container--default .select2-selection--single .select2-selection__arrow {
         height: initial;
       }
 
@@ -1137,11 +1099,9 @@ p[data-f-id="pbf"] {
       .input-group-prepend {
         height: 30px;
         border-radius: 0;
-        background: #ececec;
         padding: 5px;
-        border: 1px solid #c2cad9;
+        border: 1px solid $border;
         border-left: 0;
-        color: #656971;
       }
     }
 
@@ -1180,7 +1140,7 @@ p[data-f-id="pbf"] {
       &::after {
         content: "\f0dc";
         font-family: "Font Awesome 5 Free";
-        color: $lightgrey;
+        color: $textColorHover;
         float: right;
       }
     }
@@ -1204,68 +1164,6 @@ p[data-f-id="pbf"] {
     }
   }
 
-  .pagination-panel {
-    font-size: 0.9em;
-    display: flex;
-    align-items: center;
-
-    *:not(i) {
-      margin-right: 0 !important;
-    }
-
-    .btn,
-    .input-group,
-    .input-group-btn {
-      display: inline-block;
-      width: inherit;
-    }
-
-    .btn-prev,
-    .btn-next {
-      color: #666;
-      background-color: #e1e5ec;
-      border-color: #e1e5ec;
-      padding: 5px 10px;
-      border-radius: 0;
-      cursor: pointer;
-      height: 30px;
-      line-height: 18px;
-
-      &.disabled {
-        background-color: #f7f8fa;
-        border-color: #eceef3;
-      }
-
-      &:hover,
-      &:active,
-      &:focus {
-        background-color: #c2cad8;
-        border-color: #bcc5d4;
-      }
-    }
-
-    input[type="text"] {
-      border: 1px solid #c2cad8;
-      text-align: center;
-      width: 45px;
-      outline: 0 !important;
-      height: 30px;
-      padding: 5px 10px;
-      font-size: 12px;
-      line-height: 1.5;
-    }
-
-    .form-control {
-      display: inline-block;
-      width: auto;
-      height: 30px !important;
-    }
-
-    select {
-      padding: 0;
-    }
-  }
-
   .pagination-panel-total,
   .pagination-panel-total-count {
     font-weight: bold;
@@ -1403,181 +1301,183 @@ p[data-f-id="pbf"] {
   }
 }
 
-#admin-user {
+.devise {
+  min-height: 100vh;
+  background: white;
+
+  /* Change Autocomplete styles in Chrome*/
   input:-webkit-autofill,
-  input:-webkit-autofill:active,
+  input:-webkit-autofill:hover,
   input:-webkit-autofill:focus,
-  input:-webkit-autofill:hover {
-    transition: background-color 9999999s ease-in-out 0s;
-    -webkit-text-fill-color: #fff !important;
+  textarea:-webkit-autofill,
+  textarea:-webkit-autofill:hover,
+  textarea:-webkit-autofill:focus,
+  select:-webkit-autofill,
+  select:-webkit-autofill:hover,
+  select:-webkit-autofill:focus {
+    border: 1px solid $border;
+    -webkit-box-shadow: 0 0 0 1000px white inset;
+    transition: background-color 5000s ease-in-out 0s;
+  }
+
+  .separator,
+  .section-separator {
+    width: 100%;
+    clear: both;
   }
 
-  .failed-login {
-    color: $red;
-    text-align: center;
-    display: block;
-    font-size: 0.9em;
+  .separator {
+    height: 15px;
   }
 
-  .container-fluid-admin {
-    min-height: 100vh;
+  .section-midle-separator {
+    height: 30px;
   }
 
-  .bckg-dark {
-    background: url("https://source.unsplash.com/1920x1080/?landscape") center
-      fixed;
-    background-size: cover;
+  .section-separator {
+    height: 45px;
   }
 
-  .centered {
-    left: 50%;
-    position: fixed;
-    top: 50%;
-    transform: translate(-50%, -50%);
+  .cookies-eu, .cookies-eu-button-holder, .cookies-eu-content-holder {
+    display: flex;
+    line-height: normal;
   }
 
-  .title-login {
-    font-weight: 200;
+  .btn-submit {
+    padding: 0.375rem 3rem;
   }
 
-  .login-form {
-    background: $sidebar;
-    color: #fff;
-    width: 25%;
-    margin: 0 auto 25px;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+  .form-control {
+    border: 1px solid $border;
+    background: white;
+    border-color: $border;
+    border-radius: 3px;
+  }
 
-    h2 {
-      color: #fff;
-    }
+  .row-center {
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+  }
 
-    .links-form {
-      a {
-        color: $blueIcon;
-        text-decoration: none;
+  .fix-col {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 
-        &:hover {
-          color: darken($blueIcon, 5%);
-        }
-      }
-    }
+  .cookies-eu .cookies-eu-button-holder .cookies-eu-ok {
+    padding: 6px;
+    min-width: auto;
+    background: rgba($primary, 0.83);
+    line-height: normal;
+    margin-right: 10px;
+  }
 
-    i {
-      font-size: 1.5em;
-      color: $blueIcon;
-    }
+  .cookies-eu {
+    justify-content: center;
+    align-items: center;
+    background: rgba($primary, 0.83);
+    border: 0;
+    color: white;
+    line-height: normal;
+    padding: 8px;
+  }
 
-    .form-control {
-      box-shadow: none;
-    }
+  label {
+    font-size: .85em;
+    color: $textColor;
+    text-transform: uppercase;
+    margin-bottom: 0.25rem;
+    font-weight: bold;
+  }
 
-    .input-group {
-      margin-bottom: 40px;
-    }
+  .legals-session {
+    padding-top: 10px;
+  }
 
-    .content {
-      padding: 35px;
-    }
+  a {
+    color: $textColor;
 
-    .content-login {
-      padding: inherit;
+    &:hover, &:focus, &:active {
+      color: $primary;
     }
+  }
 
-    .input-group-prepend {
-      border-radius: 0;
-      padding-bottom: 15px;
-    }
+  .cookies-eu-button-holder {
+    align-items: center;
 
-    input[type="submit"] {
-      cursor: pointer;
-      background: $pink;
+    a {
       color: #fff;
-      border-radius: 3px;
-      border: 0;
-      display: block;
-      width: 100%;
-      padding: 12px;
-      margin-top: 35px;
-
       &:hover {
-        background: darken($pink, 5%);
+        color: #fff;
       }
     }
+  }
 
-    input[type="text"],
-    input[type="email"],
-    input[type="password"] {
-      background-color: transparent;
-      border: 0;
-      border-radius: 0;
-      border-bottom: 1px solid #47566c;
-      color: #fff;
-      padding: 8px 12px 8px 35px;
-      width: 100%;
-      float: left;
-      margin-left: -20px;
-      caret-color: $primary;
-    }
+  .container-fluid-devise {
+    min-height: 100vh;
+    overflow: auto;
+  }
 
-    .input-group-prepend {
-      background-color: transparent;
-      border: 0;
-      color: #fff;
-      padding-top: 5px;
-    }
+  .main-title {
+    font-weight: 200;
+    margin: 0;
+    word-break: break-word;
   }
-}
 
-/* Small devices (tablets, 768px and up) */
-@media (max-width: 768px) {
-  #admin-user {
-    .login-form {
-      width: 80%;
-    }
+  .sub-title {
+    font-size: .9em;
+    color: $textColor;
   }
-}
 
-/* Medium devices (desktops, 992px and up) */
-@media (min-width: 992px) {
-  #admin-user {
-    .login-form {
-      width: 45%;
-    }
+  .login-form-user {
+    width: 80%;
+    margin: 0 auto;
   }
-}
 
-/* Large devices (large desktops, 1200px and up) */
-@media (min-width: 1200px) {
-  #admin-user {
-    .login-form {
-      width: 26%;
+  @media (max-width: 576px) {
+    .login-form-user {
+      width: 100%;
+      transform: initial;
+      position: relative;
+      padding: 25px;
+    }
+  }
 
-      input[type="submit"] {
-        width: 100%;
-      }
+  /* Small devices (tablets, 768px and up) */
+  @media (max-width: 825px) {
+    .login-form-user {
+      width: 80%;
+      transform: initial;
+      position: relative;
+      padding: 25px;
     }
 
-    .app-logo {
-      margin: 0 0 25px;
+    .row-center {
+      justify-items: initial;
+      align-items: initial;
     }
   }
-}
 
-@media (min-width: 1600px) {
-  #admin-user {
-    .login-form {
-      width: 20%;
+  /* Medium devices (desktops, 992px and up) */
+  @media (min-width: 992px) {
+    .login-form-user {
+      width: 80%;
+      padding: 25px;
+    }
+  }
 
-      input[type="submit"] {
-        width: 100%;
-      }
+  /* Large devices (large desktops, 1200px and up) */
+  @media (min-width: 1200px) {
+    .login-form-user {
+      width: 65%;
     }
+  }
 
-    .app-logo {
-      margin: 0 0 25px;
+  @media (min-width: 1600px) {
+    .login-form-user {
+      width: 45%;
     }
   }
 }

data/app/assets/stylesheets/slash_admin/colors.scss

@@ -1,20 +1,20 @@
 // Bootstrap override
-$blue: #6798ff !default;
+$blue: #6280ec !default;
 $yellow: #fad961 !default;
 $green: #57ca85 !default;
-$red: #F36265 !default;
-$pink: #ff3466 !default;
+$red: #ff808b !default;
 
-$info: #6798ff;
-$notice: #fad961;
-$success: #57ca85;
-$error: #F36265;
+$info: $blue;
+$notice: $yellow;
+$success: $green;
+$error: $red;
 
-$primary: #2e5bff;
-$blueIcon: #9ddbff;
-$secondary: #120731;
-$sidebar: #33375b;
-$textColor: #c5a6ee;
-$tertiary: #f8f8fd;
-$grey: #7985A6;
-$lightgrey: #e1e5ec;
+$primary: #6280ec;
+$secondary: #4e4cac;
+$background: #f6f3fc;
+
+$sidebar: #fefefe;
+$textColor: #afaec3;
+$textColorHover: #15152d;
+
+$border: rgba($textColor, .4);

data/app/views/slash_admin/base/_translatable_fields.html.erb

@@ -5,7 +5,6 @@
         <a class="nav-item nav-link <%= I18n.available_locales.first == locale ? 'active' : '' %>" id="nav-language-<%= locale %>" data-toggle="tab" href="#language-<%= locale %>" role="tab" aria-controls="language-<%= locale %>">
           <img src='<%= image_path("slash_admin/#{locale.to_s}.png") %>' style="margin-right: 5px; max-width: 25px;">
         </a>
-      </li>
     <% end %>
   </nav>
   <div class="tab-content">
@@ -15,7 +14,7 @@
           <% translatable_params.each do |a| %>
             <%= render 'slash_admin/fields/form_group', f: g, a: a %>
           <% end %>
-        <% end  %>
+        <% end %>
       </div>
     <% end %>
   </div>

data/app/views/slash_admin/security/sessions/new.html.erb

@@ -1,32 +1,33 @@
-<div class="container-fluid container-fluid-admin bckg-dark">
-  <div class="login-form">
-    <div class="row">
-      <div class="col-sm-12 content bckg-dark-light">
-        <h2 class="text-center title-login"><%= t('slash_admin.view.administration') %></h2>
-        <div align="center">
+<div class="devise">
+  <div class="row no-gutters row-center">
+    <div class="col-lg-6 col-md-8 col-sm-12 col-xs-12 fix-col">
+      <div class="login-form-user">
+        <div class="app-logo" align="center">
           <img src="<%= asset_path('slash_admin/logo.png') %>" class="img-fluid" style="max-width: 250px;"/>
         </div>
-        <%= form_for(:admin, url: '') do |f| %>
-          <span class="failed-login">
-            <%= @error_messages %>
-          </span>
-          <div class="input-group">
-            <span class="input-group-prepend">
-              <i class="fa fa-user"></i>
-            </span>
-            <%= f.text_field :login, required: false, autofocus: true, label: false, placeholder: t('slash_admin.view.username'), class: 'form-control' %>
-          </div>
-          <div class="input-group">
-            <span class="input-group-prepend">
-              <i class="fa fa-lock"></i>
-            </span>
-            <%= f.password_field :password, required: false, label: false, placeholder: t('slash_admin.view.password'), class: 'form-control' %>
-          </div>
-          <div class="form-actions">
-            <%= hidden_field_tag :authenticity_token, form_authenticity_token %>
-            <%= f.submit t('slash_admin.view.login') %>
-          </div>
+        <div class="section-separator"></div>
+        <div class="section-separator"></div>
+        <h1 class="main-title">Administration</h1>
+        <span class="sub-title"><%= I18n.t('dol.fill_login_and_password') %></span>
+        <div class="section-separator"></div>
+        <div class="content-width content-login">
+          <%= form_for(:admin, url: '') do |f| %>
+            <div class="form-group">
+              <%= f.text_field :login, required: false, autofocus: true, label: false, placeholder: t('slash_admin.view.username'), class: 'form-control' %>
+            </div>
+
+            <div class="form-group">
+              <%= f.password_field :password, required: false, label: false, placeholder: t('slash_admin.view.password'), class: 'form-control' %>
+            </div>
+
+            <%= f.submit t('slash_admin.view.login'), class: 'btn btn-block btn-primary btn-submit' %>
         <% end %>
+        </div>
+        <div class="section-separator"></div>
+      </div>
+    </div>
+    <div class="col-lg-6 col-md-4 d-none d-sm-none d-md-flex ">
+      <div class="container-fluid container-fluid-devise bckg-login" align="center" style="background: url(https://source.unsplash.com/1920x1080/?nature) no-repeat; background-size: cover;">
       </div>
     </div>
   </div>

data/app/views/slash_admin/shared/_header.html.erb

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-md fixed-top navbar-light bg-light">
+<nav class="navbar navbar-expand-md">
   <div class="page-logo">
     <a href="<%= slash_admin.dashboard_path %>" class="navbar-brand">ADMIN</a>
     <a href="<%= slash_admin.toggle_dashboard_path %>" class="menu-toggler sidebar-toggler">

data/app/views/slash_admin/shared/_menu.html.erb

@@ -19,42 +19,62 @@
             <span class="title"><%= s[:title] %></span>
           </a>
           <% if s[:sub_menu] %>
-            <ul class="sub-menu">
-              <% s[:sub_menu].each do |sub| %>
-                <% if sub[:path].present? %>
-                  <li class="nav-item">
-                    <a class="nav-link <%= request.fullpath == sub[:path] ? 'active' : '' %>"
-                       <%= sub.key?(:turbolinks) ? "data-turbolinks=" + boolean_to_string(sub[:turbolinks]) + "" : '' %>
-                       <% s[:blank].present? ? 'target="_blank"' : '' %>
-                       href="<%= sub[:path] %>">
-                    <% if sub[:icon] %>
-                      <i class="<%= sub[:icon] %>"></i>
-                    <% end %>
-                    <span class="title"><%= sub[:title] %></span>
-                    </a>
-                  </li>
-                <% else %>
-                  <% if access_model?(sub) %>
-                    <li class="nav-item">
-                      <a class="nav-link
-                              <%= controller.controller_name == sub[:model].name.split('::').last.tableize ? 'active' : '' %>"
-                         <%= sub.key?(:turbolinks) ? "data-turbolinks=" + boolean_to_string(sub[:turbolinks]) + "" : '' %>
-                         <% s[:blank].present? ? 'target="_blank"' : '' %>
-                         href="<%= polymorphic_url([:slash_admin, sub[:model]]) %>">
+            <div class="sub-menu">
+              <table class="table-sm">
+                <tbody>
+                <% s[:sub_menu].each do |sub| %>
+                  <% if sub[:path].present? %>
+                    <tr class="clickable-row <%= request.fullpath == sub[:path] ? 'active' : '' %>"
+                        data-href="<%= sub[:path] %>"
+                        data-blank="<%= s[:blank].present? ? 'true' : 'false' %>">
+                      <td>
                         <% if sub[:icon] %>
                           <i class="<%= sub[:icon] %>"></i>
                         <% end %>
-                        <span class="title"><%= sub[:model].model_name.human(count: 2) %></span>
-                        <%# <span class="badge badge-pill badge-success">1</span> %>
-                      </a>
-                    </li>
+                      </td>
+                      <td>
+                        <span class="title"><%= sub[:title] %></span>
+                      </td>
+                    </tr>
+                  <% else %>
+                    <% if access_model?(sub) %>
+                      <tr class="clickable-row <%= controller.controller_name == sub[:model].name.split('::').last.tableize ? 'active' : '' %>"
+                          data-href="<%= polymorphic_url([:slash_admin, sub[:model]]) %>"
+                          data-blank="<%= s[:blank].present? ? 'true' : 'false' %>">
+                        <td>
+                          <% if sub[:icon] %>
+                            <i class="<%= sub[:icon] %>"></i>
+                          <% end %>
+                        </td>
+                        <td>
+                          <span class="title"><%= sub[:model].model_name.human(count: 2) %></span>
+                        </td>
+                      </tr>
+                    <% end %>
                   <% end %>
                 <% end %>
-              <% end %>
-            </ul>
+                </tbody>
+              </table>
+            </div>
           <% end %>
         </li>
       <% end %>
     <% end %>
   </ul>
 </div>
+
+<script type="text/javascript">
+  $(function() {
+    $(".clickable-row").click(function() {
+      let href = $(this).data("href");
+      let blank = $(this).data("blank");
+
+      if (blank === true) {
+        window.open = href;
+      }
+      else {
+        Turbolinks.visit(href);
+      }
+    });
+  });
+</script>

data/lib/slash_admin/version.rb

@@ -1,3 +1,3 @@
 module SlashAdmin
-  VERSION = "1.1.0"
+  VERSION = "1.2.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: slash_admin
 version: !ruby/object:Gem::Version
-  version: 1.1.0
+  version: 1.2.0
 platform: ruby
 authors:
 - KOVACS Nicolas
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2020-03-19 00:00:00.000000000 Z
+date: 2020-04-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails