spree_backend 4.1.5 → 4.2.0.beta

data/app/assets/stylesheets/spree/backend/components/_main.scss

@@ -1,13 +1,39 @@
 #main-part {
-  padding: $spacer ($spacer * 2) 0 ($spacer * 2);
+  padding: $spacer ($spacer * 0.5) 0 ($spacer * 0.5);
   margin-top: 50px;
 }
 
-.sidebar-minimized #main-part {
-  padding: $spacer ($spacer * 2) 0 ($spacer * 5);
-}
-
 #logo {
   width: auto;
-  height: 40px;
+  height: 36px;
+}
+
+#multi-backdrop {
+  z-index: 0;
+  height: 0;
+  width: 0;
+}
+
+body.modal-open #multi-backdrop {
+  z-index: 1040;
+  width: 100vw;
+  height: 100vh;
+}
+
+.sort-handle {
+  cursor: grab;
+}
+
+.no-wrap {
+  white-space: nowrap;
+}
+
+.card-body {
+  padding: 0.75rem;
+}
+
+@include media-breakpoint-up(sm) {
+  .card-body {
+    padding: 1.25rem;
+  }
 }

data/app/assets/stylesheets/spree/backend/components/_navbar.scss

@@ -2,20 +2,28 @@
   .navbar {
     background-color: $navbar-inverse-bg;
     padding: 0;
+    height: 50px;
 
     a:hover {
       text-decoration: none;
     }
-  }
-
-  .dropdown-toggle {
-    &[aria-expanded="true"] {
-      background-color: $gray-900;
+    .btn {
+      &:hover,
+      &:focus {
+        text-decoration: none;
+        outline: 0;
+        outline: none;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+      }
     }
 
-    &:hover,
-    &:focus {
-      text-decoration: none;
+    #accountNav {
+      i {
+        font-size: 1.3em;
+        line-height: 1rem;
+      }
     }
+
   }
 }

data/app/assets/stylesheets/spree/backend/components/_sidebar.scss

@@ -1,85 +1,149 @@
-.sidebar {
+
+aside#main-sidebar {
   overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
   background-color: $gray-100;
   border-right: 1px solid $gray-200;
-  margin-top: 50px;
-  height: calc(100% - 50px);
-  z-index: 999;
+  width: 100%;
+  left: -100%;
+  margin-top: 0;
+  height: 100%;
+  transition: 0.3s ease;
+  z-index: 1041;
+}
+
+body.sidebar-open {
+  overflow-x: hidden;
+  aside#main-sidebar {
+    left:0;
+    transition: 0.3s ease;
+  }
+  .disable-when-main-menu-is-open {
+    z-index: 1040 !important;
+  }
+}
 
-  a.sidebar-submenu-item:hover {
+a.sidebar-submenu-item:hover {
     text-decoration: none;
     background-color: $gray-200;
     cursor: pointer
+}
+
+ul.active-option {
+  background-color: $gray-200;
+  .drop-menu-indicator {
+    transform: rotate(-90deg);
   }
+}
 
-  ul.nav-sidebar {
-    > li {
-      > a {
-        color: $gray-700;
+ul.nav-sidebar {
+  > li {
+    > a {
+      color: $gray-700;
 
-        &:hover,
-        &[aria-expanded="true"] {
-          text-decoration: none;
-          background-color: $gray-200;
+      &:hover,
+      &[aria-expanded="true"] {
+        text-decoration: none;
+      }
+
+      .drop-menu-indicator {
+        right: 1rem;
+      }
+
+      &[aria-expanded="true"] {
+        .drop-menu-indicator {
+          transform: rotate(-90deg);
+          transition: .3s ease-in-out;
         }
+      }
 
-        .icon-chevron-left,
-        .icon-chevron-down {
-          font-size: .5rem;
-          line-height: 2;
-          right: 1rem;
-          top: 50%;
-          margin-top: -.5rem;
+      &[aria-expanded="false"] {
+        .drop-menu-indicator {
+          transform: rotate(0deg);
+          transition: .3s ease-in-out;
         }
       }
     }
   }
 }
 
-#wrapper.sidebar-minimized #main-sidebar {
-  width: 50px;
-  overflow: visible;
+#contextualSideMenu {
+  max-height: 85vh;
+  overflow-x: auto;
+  background-color: white;
+  position: fixed;
+  left:0;
+  top: -100%;
+  z-index: 1041;
+  transition: .3s ease-in-out;
+  .page-actions__close {
+    margin: -1.5rem -1.5rem 1.5rem;
+  }
+}
 
-  li {
-    &:hover, &.menu-active {
-      background-color: $gray-100;
-    }
+#contextual-menu-toggle {
+  & svg {
+    transform:rotate(0deg);
+    transition: transform .3s ease-in-out;
   }
+}
 
-  .icon-link, [data-toggle="collapse"] {
-    text-align: center;
+#sidebar a svg {
+  margin-bottom: 3px;
+}
 
-    .icon {
-      padding: 0;
-    }
+body.contextualSideMenu-open #contextualSideMenu {
+  top: 0;
+  transition: .3s ease-in-out;
+}
 
-    .text, .icon-chevron-left, .icon-chevron-down {
-      display: none;
-    }
+body.contextualSideMenu-open #contextual-menu-toggle {
+  svg {
+    transform:rotate(180deg);
+    transition: transform .3s ease-in-out;
   }
+}
 
-  ul.collapse.in {
-    display: none;
+.contextual-title {
+  font-size:1.25rem;
+}
+
+@include media-breakpoint-up(sm) {
+  aside#main-sidebar {
+    width: 50%;
   }
+}
 
-  .submenu-active {
-    display: block !important;
-    height: auto !important;
-    position: fixed;
-    top: 50px;
-    bottom: 0;
-    left: 0;
-    padding: 0;
+@include media-breakpoint-up(md) {
+  aside#main-sidebar {
+    width: 30%;
+  }
+}
+
+@include media-breakpoint-up(lg) {
+
+  #contextualSideMenu {
+    border: none;
+    height: max-content;
     z-index: 1000;
-    display: block;
-    overflow-x: hidden;
-    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
-    left: 50px;
-    min-width: 180px;
-    visibility: visible;
-    background-color: $gray-100;
-    border-top: none;
-    border-right: 1px solid $gray-200;
-    padding-top: 5px;
+    position: sticky;
+    top: 75px;
+    transition: none;
+  }
+  aside#main-sidebar {
+    left: 0;
+    z-index: 999;
+    margin-top: 50px;
+    height: calc(100% - 50px);
+    transition: none;
+    body.sidebar-open {
+      aside#main-sidebar {
+        left:0;
+        transition: none;
+      }
+    }
+  }
+
+  .contextual-title {
+    font-size:1.5rem;
   }
 }

data/app/assets/stylesheets/spree/backend/components/_tables.scss

@@ -1,39 +1,57 @@
 table.table {
   font-size: $font-size-sm;
 
+  .move-handle {
+    cursor: grab;
+  }
+
+  th {
+    padding: 0.5rem;
+
+    &.handel-head {
+      width: 50px;
+    }
+    a.sort_link {
+      white-space: nowrap;
+    }
+  }
+
+  td {
+    padding: 0.5rem;
+  }
+
+  .badge {
+    font-size: 0.85em;
+  }
+
   thead {
     th {
       text-transform: uppercase;
       font-size: $small-font-size;
+      padding: 0.5rem;
       padding-top: 14px;
       padding-bottom: 14px;
       vertical-align: top;
       border-top: 0;
-
-      a {
-        .glyphicon {
-          padding-left: 5px;
-        }
-      }
     }
   }
 
   tbody {
     tr {
+      background: white;
       td {
         vertical-align: middle;
-
         .filterable {
-          font-size: .8em;
           margin-left: .2em;
-          color: white; // hidden, but space is reserved for the icon
           cursor: pointer;
+          width: 0.9rem;
+          height:0.9rem;
+          opacity: 0.25;
+          &:hover {
+            opacity: 1;
+          }
         }
       }
-
-      &:hover td .filterable {
-        color: #666;
-      }
     }
   }
 }
@@ -42,6 +60,18 @@ table.table {
   display: none;
   margin: -.5em 0 .9em;
 
+  .js-filter {
+    .icon {
+      cursor: pointer;
+    }
+  }
+
+  .badge-secondary {
+    .icon {
+      filter: invert(1);
+    }
+  }
+
   .badge {
     display: inline-block;
     margin-right: .5em;
@@ -50,12 +80,6 @@ table.table {
     &:hover {
       opacity: .8;
     }
-
-    span.icon {
-      margin: .3em 0 0 .6em;
-      font-size: 80%;
-      cursor: pointer;
-    }
   }
 }
 
@@ -95,3 +119,22 @@ table.table {
     border-top: 0;
 	}
 }
+
+div.table-responsive table.table-bordered {
+  border-top: 1px solid $input-border-color !important;
+}
+
+.sortable-drag-v {
+  border: 1px solid $info;
+  border-radius: 5px;
+  width:100%;
+  text-align: right;
+  opacity: 0;
+  td {
+    border-top: none;
+    opacity:0;
+    &:first-child {
+    opacity: 1;
+    }
+  }
+}

data/app/assets/stylesheets/spree/backend/components/_taxon_products_view.scss

@@ -1,72 +1,35 @@
 .taxon-products-view {
   ul.taxon {
-    list-style: none;
-    margin-left: -2%;
-    padding: 0;
-    > * {
-      margin-left: 2%;
-    }
+
     li.product {
-      position: relative;
-      float: left;
-      width: 18%;
-      margin-bottom: 2%;
-      padding: 8px 8px 5px 8px;
-      border-radius: 4px;
-      background: #f4f4f4;
-      .well {
-        padding-bottom: 12px;
-      }
-      .sort-handle {
-        position: absolute;
-        top: 14px;
-        left: 16px;
-        color: $gray-500;
-        cursor: move;
-      }
-      .btn-group {
-        display: none;
-        position: absolute;
-        top: 14px;
-        right: 16px;
-        .btn {
-          padding: 2px 7px;
-        }
-        .dropdown-menu {
-          left: auto;
-          right: 0;
-        }
-        a.delete-product {
-          color: red;
-        }
-      }
-      .image {
-	height: 191px;
-        .thumbnail {
-	  max-height: 180px;
-          margin-bottom: 8px;
-          display: inline-block;
-          width: 100%;
-        }
+      list-style: none;
+      .thumbnail {
+        width: 100%;
       }
+
       .product-info {
-        margin-bottom: 0.3em;
-        font-size: 0.9em;
-        div.name {
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          font-weight: bold;
-        }
-        div.price {
-          color: $gray-500;
-        }
-      }
-      &:hover {
-        .btn-group {
-          display: inline-block;
-        }
+        font-size: 0.8em;
       }
     }
   }
 }
+
+ul#taxon_products {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+
+  .dropdown-menu {
+    min-width: 8rem;
+  }
+
+  .products-ddb::after {
+    display: none;
+  }
+
+  li.moving-this div.card {
+    border-color: $info;
+  }
+}