Changeset 65010 in vbox for trunk/src/VBox/ValidationKit/testmanager/htdocs/css

Timestamp:

Dec 27, 2016 12:25:07 AM (8 years ago)

Author:

vboxsync

Message:

testmanager/webui: Shrunk the layout a little. Proper fix for scrolling main content with the arrow down and up keys.

Location:

trunk/src/VBox/ValidationKit/testmanager/htdocs/css

Files:

• common.css (modified) (6 diffs)
• details.css (modified) (1 diff)

trunk/src/VBox/ValidationKit/testmanager/htdocs/css/common.css

@@ -102 +102 @@
  */
 
+html, body {
+    height:         100%;
+}
+
+#wrap {
+    position:       relative;
+    width:          100%;
+    height:         100%;
+}
+
+#head-wrap {
+    position:       fixed;
+    top:            0;
+    left:           0;
+    height:         74px; /**< header + top-menu. */
+    width:          100%;
+    background:     #f9f9f9;
+}
+
 #logo {
-    position:       fixed;
-    width:          100%;
-    height:         92px;
+    width:          42px;
+    height:         46px;
     top:            0;
     left:           0;
     right:          0;
     bottom:         auto;
+    /* Center the image in both directions. */
+    display:        flex;
+    align-items:    center;
+    justify-content: center;
+    justify-content: flex-end;
 }
 
 #logo img {
-    height:         64px;
-    width:          64px;
+    height:         36px;
+    width:          36px;
 }
 
@@ -120 +143 @@
     position:       fixed;
     width:          100%;  /** @todo this is too wide, darn! */
-    height:         92px;
+    height:         46px;
+    left:           42px;
     top:            0;
-    left:           118px;
     right:          0;
     bottom:         auto;
+    margin-top:     0px;
+    margin-left:    0px;
+    text-align:     left;
+    /* Center the h1 child vertically: */
+    display:        flex;
+    align-items:    center;
 }
 
@@ -131 +160 @@
     top:            0;
     left:           auto;
-    right:          0;
-    right:          10px;
+    right:          2px;
+    bottom:         auto;
+    height:         auto;
+}
+
+#top-menu {
+    position:       fixed;
+    padding:        0px;
+    width:          99%;
+    height:         auto;
+    max-height:     22px;
+    top:            46px;
+    left:           0px;
+    right:          0px;
     bottom:         auto;
 }
@@ -140 +181 @@
     width:          116px;
     height:         auto;
-    top:            92px;
+    top:            46px;
     left:           0;
     right:          auto;
@@ -146 +187 @@
 }
 
-#top-menu {
-    position:       fixed;
-    width:          auto;
-    height:         auto;
-    max-height:     28px;
-    top:            92px;
-    left:           0px;
-    right:          0;
-    bottom:         auto;
-}
-
 #main {
-    position:       fixed;
-    width:          auto;
-    height:         auto;
-    top:            124px;  /**< header + top-menu + padding. */
-    right:          0;
-    bottom:         0;
-    left:           124px;
-    overflow:       auto;
-    padding-top:    16px;
-    padding-left:   10px;
-    padding-right:  10px;
-}
-
-
-/*
- * Header and logo.
- */
-#logo {
-    padding:        16px 32px 16px 32px;
-}
-
-#header {
-    margin-top:     22px;
-    margin-left:    10px;
-    text-align:     left;
+    height:         100%;
+    margin-top:     74px;  /**< header + top-menu + padding. */
+    margin-left:    124px;
+/*    overflow:       auto;*/
+    padding-left:   2px;
+    padding-right:  2px;
+    padding-top:    2px;
+    padding-bottom: 2px;
+}
+
+
+/*
+ * Header and logo specifics.
+ */
+#header h1 {
+    margin-left:    8px;
+    margin-top:     0px;
+    margin-right:   0px;
+    margin-bottom:  0px;
+    font-weight:    bold;
+    font-size:      2.2em;
+    font-family:    Times New, Times, serif;
+}
+
+#login p {
+    line-height:    100%;
 }
 
@@ -303 +334 @@
 #top-menu {
    margin:          0 auto;
-   margin-right:    10px;
-   margin-left:     10px;
 }
 

trunk/src/VBox/ValidationKit/testmanager/htdocs/css/details.css

@@ -35 +35 @@
     left:           0;
 }
+#main {
+    margin-left:    0px;
+}
 
 .tmtbl-events {