[TIC-UI] add layout of image page

- fix the image page for responsive layout

Signed-off-by: ChangHyun Lee <leechwin.lee@samsung.com>
Change-Id: I07d4f9802c0801ada25c48359cf3623cabeb8a18

diff --git a/public/src/css/style.css b/public/src/css/style.css
index 89c7885..562d77f 100644 (file)
--- a/public/src/css/style.css
+++ b/public/src/css/style.css
@@ -4,11 +4,6 @@ body {
     height: 100%;
 }
 
-html {
-    width: 100%;
-    height: 100%;
-}
-
 @media(min-width:992px) {
     .navbar {
         -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
@@ -34,14 +29,11 @@ html {
   }
 }
 
-.panel {
-    margin-bottom: 5px;
-}
 
 /* Modal Dialog */
 .modal-dialog {
     display: inline-block;
-    text-align: left;
+    text-align: center;
     vertical-align: middle;
 }
 
@@ -58,29 +50,22 @@ html {
     font-size: 16px;
 }
 
+
+/* Package Page */
 #tic-package-section {
+    height: 100%;
     padding-top: 70px;
     background: #e1e1e1;
 }
 
-
-/* Package Page */
 #tic-package-left-col-tree-toolbar, #tic-package-left-col-tree {
     padding-top: 10px;
 }
 
 #tic-package-left-col-tree {
-    height: 30vh;
-    position: relative;
+    height: calc(100vh - 200px);
     overflow: auto;
 }
-@media (min-width: 768px) {
-    #tic-package-left-col-tree {
-        height: 80vh;
-        position: relative;
-        overflow: auto;
-    }
-}
 
 #tic-package-left-col-tree .list-group-item {
     padding: 3px 10px;
@@ -88,45 +73,19 @@ html {
 
 /* Package Toolbar filter-clear button */
 ::-ms-clear {
-  display: none;
+    display: none;
 }
 .form-control-clear {
-  z-index: 10;
-  pointer-events: auto;
-  cursor: pointer;
-}
-
-
-/* TODO: Height of Treeview, Package Information and Summary grid in Package Page */
-#tic-package-info-table {
-    height: 15vh;
-    display: inline-block;
-    position: relative;
-    overflow: auto;
-}
-@media (min-width: 992px) {
-    #tic-package-info-table {
-        height: 43vh;
-        display: inline-block;
-        position: relative;
-        overflow: auto;
-    }
+    z-index: 10;
+    pointer-events: auto;
+    cursor: pointer;
 }
 
-#tic-package-summary {
-    height: 10vh;
+#tic-package-info-table, #tic-package-summary {
+    height: calc(50vh - 183px);
     display: inline-block;
-    position: relative;
     overflow: auto;
 }
-@media (min-width: 992px) {
-    #tic-package-summary {
-        height: 20vh;
-        display: inline-block;
-        position: relative;
-        overflow: auto;
-    }
-}
 
 /* Image Page */
 #tic-image-section {
@@ -134,15 +93,20 @@ html {
     padding-top: 70px;
     background: #e1e1e1;
 }
-#tic-image-summary {
-    height: 40vh;
+
+#tic-image-summary, #tic-image-new-container {
+    height: calc(50vh - 183px);
     display: inline-block;
-    position: relative;
     overflow: auto;
 }
+
 #tic-image-list {
-    margin-top: 3px;
+    height: calc(100vh - 210px);
+    display: inline-block;
+    overflow: auto;
 }
+
+/* Image List Item */
 .image-list-name {
     font-weight: bold;
     text-overflow: ellipsis;
@@ -191,31 +155,6 @@ html {
     font-size: 14px;
 }
 
-.infoboxheader {
-    padding-left: 15px;
-    border: 1px solid #eee;
-    border-left-width: 5px;
-    border-radius: 3px;
-    margin-top: -5px;
-    height: 5vh;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    border-left-color: #337ab7;
-    vertical-align: middle;
-}
-.infoboxheader h4 {
-    color: #1b809e;
-}
-
-@media (min-width: 992px) {
-    #tic-image-summary {
-        height: 70vh;
-        display: inline-block;
-        position: relative;
-        overflow: auto;
-    }
-}
-
 
 /* Settings Page */
 #tic-settings-section {

diff --git a/public/src/index.html b/public/src/index.html
index 4659efc..e09a350 100644 (file)
--- a/public/src/index.html
+++ b/public/src/index.html
@@ -170,6 +170,17 @@
                                     </tbody>
                                 </table>
                             </div>
+                        </div>
+
+                        <div class="panel panel-primary">
+                            <div class="panel-heading">Create Image</div>
+                            <div class="panel-body">
+                                <div id="tic-image-new-container">
+                                    <div class="infobox info" id="tic-image-new">
+                                        <div id="tic-image-new-log"></div>
+                                    </div>
+                                </div>
+                            </div>
                             <div class="panel-footer">
                                 <button type="button" id="tic-image-create" class="btn btn-primary">Create Image</button>
                             </div>
@@ -182,15 +193,6 @@
                             <div class="panel-heading">Image List</div>
                             <div class="panel-body">
                                 <ul class="list-group" id="tic-image-list"></ul>
-                                <!-- Create an image -->
-                                <div id="tic-image-new-container">
-                                    <div class="infoboxheader">
-                                        <h4>Create an image</h4>
-                                    </div>
-                                    <div class="infobox info" id="tic-image-new">
-                                        <div id="tic-image-new-log"></div>
-                                    </div>
-                                </div>
                             </div>
                         </div>
                     </div><!-- /End Image List Column -->
@@ -278,10 +280,10 @@
 
         <!-- library loading -->
         <script src="/socket.io/socket.io.js"></script>
-        <script src="/lib/bootstrap/js/bootstrap.js"></script>
-        <script src="/lib/bootstrap-treeview/bootstrap-treeview.min.js"></script>
         <script src="/lib/jquery/jquery.js"></script>
         <script src="/lib/jquery-sortable/jquery-sortable.js"></script>
+        <script src="/lib/bootstrap/js/bootstrap.js"></script>
+        <script src="/lib/bootstrap-treeview/bootstrap-treeview.min.js"></script>
         <script src="/lib/lodash/lodash.js"></script>
         <script src="/js/config.js"></script>
         <script src="/lib/requirejs/require.js" data-main="js/main"></script>

diff --git a/public/src/js/page/package.js b/public/src/js/page/package.js
index 962964b..4d1464e 100644 (file)
--- a/public/src/js/page/package.js
+++ b/public/src/js/page/package.js
@@ -325,7 +325,7 @@ define([
         $('#tic-package-toolbar-input-clear').on('click', _inputClearBtnHandler);
 
         function _checkAllBtnHandler() {
-            $tree.treeview('checkAll',  { silent: true });
+            $tree.treeview('checkAll', { silent: true });
             _.forEach(packages, function(node) {
                 node.state.checked = true;
                 node.selfChecked = false;
@@ -335,7 +335,9 @@ define([
         $('#tic-package-toolbar-checkall').on('click', _checkAllBtnHandler);
 
         function _uncheckAllBtnHandler() {
-            $tree.treeview('uncheckAll',  { silent: true });
+            // FIXME: bug for state.checked = false in treeview objects
+            $tree.treeview('checkAll', { silent: true });
+            $tree.treeview('uncheckAll', { silent: true });
             _.forEach(packages, function(node) {
                 node.state.checked = false;
                 node.selfChecked = false;
@@ -354,6 +356,8 @@ define([
         }
         $('#tic-package-left-col-tree-toolbar-expand-all').on('click', _expandAll);
 
+        // Patch: Bootstrap dropdown menu not working (not dropping down when clicked)
+        $('.dropdown-toggle').dropdown();
     }
 
     init();