AnObj Manager dlg responsive

adim_app/static/_src/less/adim.css

@@ -593,7 +593,7 @@ input[type=number]::-webkit-outer-spin-button {
   text-decoration: none;
 }
 #login-mode .local-login-head a:hover {
-  text-decoration: underline;
+  color: #60a4df;
 }
 #login-mode #login-local-panel {
   background-color: #333;
@@ -1029,6 +1029,7 @@ canvas {
 #tool-colorselect .color-menu > li > a:hover,
 #tool-colorselect .color-menu > li > a:focus {
   background-color: #333330;
+  background-image: none;
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.33) inset, 0 0 0 3px rgba(255, 255, 255, 0.9);
   border-color: transparent;
 }
@@ -1036,26 +1037,44 @@ canvas {
 #tool-colorselect .color-menu > li > a.c1:hover {
   background-color: #fff700;
 }
+#tool-colorselect .color-menu > li > a.c1:hover {
+  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.66) inset, 0 0 1px 3px rgba(255, 247, 0, 0.9);
+}
 #tool-colorselect .color-menu > li > a.c2,
 #tool-colorselect .color-menu > li > a.c2:hover {
   background-color: #ff8017;
 }
+#tool-colorselect .color-menu > li > a.c2:hover {
+  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.66) inset, 0 0 1px 3px rgba(255, 128, 23, 0.9);
+}
 #tool-colorselect .color-menu > li > a.c3,
 #tool-colorselect .color-menu > li > a.c3:hover {
   background-color: #00d400;
 }
+#tool-colorselect .color-menu > li > a.c3:hover {
+  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.66) inset, 0 0 1px 3px rgba(0, 212, 0, 0.9);
+}
 #tool-colorselect .color-menu > li > a.c4,
 #tool-colorselect .color-menu > li > a.c4:hover {
   background-color: #1977ff;
 }
+#tool-colorselect .color-menu > li > a.c4:hover {
+  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.66) inset, 0 0 1px 3px rgba(25, 119, 255, 0.9);
+}
 #tool-colorselect .color-menu > li > a.c5,
 #tool-colorselect .color-menu > li > a.c5:hover {
   background-color: #fc6ca2;
 }
+#tool-colorselect .color-menu > li > a.c5:hover {
+  box-shadow: 0 1px 4px -1px rgba(23, 0, 9, 0.66) inset, 0 0 1px 3px rgba(252, 108, 162, 0.9);
+}
 #tool-colorselect .color-menu > li > a.c6,
 #tool-colorselect .color-menu > li > a.c6:hover {
   background-color: #fa0000;
 }
+#tool-colorselect .color-menu > li > a.c6:hover {
+  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.66) inset, 0 0 1px 3px rgba(250, 0, 0, 0.9);
+}
 #tool-colorselect .color-menu > li > a.cx {
   background-image: url(../img/adim/alpha.png);
   width: 52px;
@@ -1447,8 +1466,59 @@ fieldset[disabled] .btn-cimaf-layer.active {
 #aom-modal .modal-body {
   padding: 0;
 }
-#aom-modal #aom-list-container {
-  height: 444px;
+@media (min-height: 370px) {
+  #aom-modal #aom-list-container {
+    max-height: 220px;
+    height: auto;
+  }
+}
+@media (min-height: 590px) {
+  #aom-modal #aom-list-container {
+    max-height: 440px;
+    height: auto;
+  }
+}
+@media (min-height: 810px) {
+  #aom-modal #aom-list-container {
+    max-height: 660px;
+    height: auto;
+  }
+}
+@media (min-height: 1030px) {
+  #aom-modal #aom-list-container {
+    max-height: 880px;
+    height: auto;
+  }
+}
+@media (min-width: 540px) {
+  #aom-modal .modal-dialog {
+    width: 460px;
+    transition: width 0.3s ease 0s;
+  }
+}
+@media (min-width: 760px) {
+  #aom-modal .modal-dialog {
+    width: 680px;
+    transition: width 0.3s ease 0s;
+  }
+}
+@media (min-width: 980px) {
+  #aom-modal .modal-dialog {
+    width: 900px;
+    transition: width 0.3s ease 0s;
+  }
+}
+@media (min-width: 1200px) {
+  #aom-modal .modal-dialog {
+    width: 1120px;
+    transition: width 0.3s ease 0s;
+  }
+}
+@media (min-width: 1420px) {
+  #aom-modal .modal-dialog {
+    width: 1340px;
+    transition: width 0.3s ease 0s;
+  }
 }
 #aom-list-container {
   overflow-y: scroll;

adim_app/static/_src/less/adim.less

@@ -196,7 +196,10 @@ input[type=number]::-webkit-outer-spin-button {
             color: @brand-primary;
             text-decoration: none;
         }
-        a:hover { text-decoration: underline; }
+        a:hover {
+            color: saturate(lighten(@brand-primary, 10%), 10%);
+//            text-decoration: underline;
+        }
     }
 
     #login-local-panel {
@@ -766,6 +769,9 @@ canvas {
     &, &:hover {
       background-color: @color;
     }
+    &:hover {
+        box-shadow: 0 1px 4px -1px fade(darken(@color, 66%), 66%) inset, 0 0 1px 3px fade(@color, 90%);
+    }
   }
 
   > button {
@@ -796,6 +802,7 @@ canvas {
 
         &:hover, &:focus {
           background-color: #333330;
+          background-image: none;
           box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.33) inset, 0 0 0 3px rgba(255, 255, 255, 0.9);
           border-color: transparent;
         }

adim_app/static/_src/less/anobj-mgr.css

 #aom-modal .modal-body {
   padding: 0;
 }
-#aom-modal #aom-list-container {
-  height: 444px;
+@media (min-height: 370px) {
+  #aom-modal #aom-list-container {
+    max-height: 220px;
+    height: auto;
+  }
+}
+@media (min-height: 590px) {
+  #aom-modal #aom-list-container {
+    max-height: 440px;
+    height: auto;
+  }
+}
+@media (min-height: 810px) {
+  #aom-modal #aom-list-container {
+    max-height: 660px;
+    height: auto;
+  }
+}
+@media (min-height: 1030px) {
+  #aom-modal #aom-list-container {
+    max-height: 880px;
+    height: auto;
+  }
+}
+@media (min-width: 540px) {
+  #aom-modal .modal-dialog {
+    width: 460px;
+    transition: width 0.3s ease 0s;
+  }
+}
+@media (min-width: 760px) {
+  #aom-modal .modal-dialog {
+    width: 680px;
+    transition: width 0.3s ease 0s;
+  }
+}
+@media (min-width: 980px) {
+  #aom-modal .modal-dialog {
+    width: 900px;
+    transition: width 0.3s ease 0s;
+  }
+}
+@media (min-width: 1200px) {
+  #aom-modal .modal-dialog {
+    width: 1120px;
+    transition: width 0.3s ease 0s;
+  }
+}
+@media (min-width: 1420px) {
+  #aom-modal .modal-dialog {
+    width: 1340px;
+    transition: width 0.3s ease 0s;
+  }
 }
 #aom-list-container {
   overflow-y: scroll;

adim_app/static/_src/less/anobj-mgr.less

 @import "../lib/bootstrap/less/mixins";
 
-@aom-list-item-width: 180px;
-@aom-list-item-height: 200px;
+@aom-thumb-width: 150px;
+@aom-thumb-height: @aom-thumb-width;
+
+@aom-list-item-width: @aom-thumb-width + 30;
+@aom-list-item-height: @aom-thumb-width + 50;
 @aom-list-item-border: rgb(164, 164, 164);
 @aom-list-item-margin-v: 10px;  // margin vertical: top and bottom (both are set)
 @aom-list-item-margin-h: 20px;  // margin horizontal: left and right (both are set)
 @aom-list-item-color: #646464;
-@aom-thumb-width: 150px;
-@aom-thumb-height: @aom-thumb-width;
+
+
+.gen-mod-width(@n, @i: 2) when (@i =< @n) {
+    @dlg-w: (((@aom-list-item-width + 40) * @i) + 20);
+    @media (min-width: (@dlg-w + 80)) {
+        width: @dlg-w;
+        transition: width 0.3s ease 0s;
+    }
+    .gen-mod-width(@n, (@i + 1));
+}
+
+.gen-lst-height(@n, @i: 2) when (@i =< @n) {
+    @lst-h: ((@aom-list-item-height + @aom-list-item-margin-v*2) * @i);
+    @media (min-height: (@lst-h + 150)) {
+        max-height: @lst-h;
+        height: auto;
+//        transition: height 0.5s ease 0s;
+    }
+    .gen-lst-height(@n, (@i + 1));
+}
 
 #aom-modal {
     .modal-body {
         padding: 0;
     }
     #aom-list-container {
-        height: 444px;
+        .gen-lst-height(4, 1);
+    }
+
+    .modal-dialog {
+        .gen-mod-width(6);
     }
 }