Changeset 7218

Timestamp:

10/21/18 17:47:48 (6 years ago)

Author:

Leif-Jöran

Message:

Update adv.css to make GQB look more modern

File:

• SRUAggregator/trunk/src/main/resources/assets/adv.css (modified) (7 diffs)

SRUAggregator/trunk/src/main/resources/assets/adv.css

@@ -21 +21 @@
         cursor: move;
 }
-
+.corpusview-corpora {
+    /*
+    max-height: 70%;
+    overflow-y: scroll;
+    */
+}
+
+#ADVtokenMenu {
+    flex: 1;
+}
+
+#ADVtokenMenu > * {
+    float:right;
+}
+#unavailable-corpora-message{
+    font-size: smaller;
+}
 .query_token {
         background-color: #e1e1e1;
@@ -37 +53 @@
 }
 
-#adv_query_input_group {
-        overflow: auto;
-        white-space: nowrap;
+
+#adv-tokens {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+}
+
+#adv-tokens > div:first-child {
+    display:contents; /* the react TransitionGroup creates a div that we dont really want. */
 }
 
@@ -144 +166 @@
 }
 
+.adv-query-preview {
+    margin-bottom: unset;
+}
+
 /* .query_token .token_footer button i { */
 /*      position: relative; */
@@ -151 +177 @@
 /* } */
 
-.query_token .token_footer button.insert_arg {
+/*.query_token .token_footer button.insert_arg {
     float: left;
 }
-
-.query_token .token_footer button {
-//      width: 20px;
-//      height: 20px;
-        float: right;
+*/
+.query_token .token_footer > button {
+    /*vertical-align: top;*/ /* flex layout overrides */
 }
 
 .query_token .token_footer {
         font-size: .8em;
+        display: flex;
+    align-items: start;
 }
 
@@ -184 +210 @@
 /* } */
 
-.query_token select, input {
+.or-containter select, .or-containter input {
     border: 1px dashed #ccc;
     outline: medium none;
@@ -191 +217 @@
 
 .query_token .repeat {
-        float: right;
         margin-right: 25px;
 }
@@ -234 +259 @@
 .token-enter {
   opacity: 0.01;
-  margin-left: -50%;
-}
-.token-enter.token-enter-active {
+  /*margin-left: -50%;*/ /*margin makes dom reflow and makes laggy animation*/
+  transform: translateX(-50%);
+}
+.token-enter-active {
   opacity: 1;
-  margin-left: 0;
+  /*margin-left: 0;*/
+  transform: translateX(0);
   transition: all 250ms linear;
 }
-.token-leave {
-  opacity: 1;
-  margin-left: 0;
-}
-.token-leave.token-leave-active {
+.token-exit {
+}
+.token-exit-active {
   opacity: 0.01;
-  margin-left: 50%;
+  /*margin-left: 50%;*/
+  /*transform: translateX(50%);*/
   transition: all 250ms linear;
 }