[TIC-UI] fix the responsive layout

- add media query

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

diff --git a/public/src/css/style.css b/public/src/css/style.css
index f97e6f0..6888fd5 100644 (file)
--- a/public/src/css/style.css
+++ b/public/src/css/style.css
@@ -66,9 +66,16 @@ html {
 }
 
 #tic-package-left-col-tree {
-    height: 80vh;
-    position: relative;
-    overflow: auto;
+        height: 30vh;
+        position: relative;
+        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 {
@@ -77,19 +84,34 @@ html {
 
 /* TODO: Height of Treeview, Package Information and Summary grid in Package Page */
 #tic-package-info-table {
-    height: 43.7vh;
+    height: 20vh;
     display: inline-block;
     position: relative;
     overflow: auto;
 }
+@media (min-width: 768px) {
+    #tic-package-info-table {
+        height: 43.7vh;
+        display: inline-block;
+        position: relative;
+        overflow: auto;
+    }
+}
 
 #tic-package-summary {
-    height: 20vh;
+    height: 10vh;
     display: inline-block;
     position: relative;
     overflow: auto;
 }
-
+@media (min-width: 768px) {
+    #tic-package-summary {
+        height: 10vh;
+        display: inline-block;
+        position: relative;
+        overflow: auto;
+    }
+}
 
 /* Image Page */
 #tic-image-section {
@@ -99,11 +121,19 @@ html {
 }
 
 #tic-image-summary {
-    height: 70vh;
+    height: 40vh;
     display: inline-block;
     position: relative;
     overflow: auto;
 }
+@media (min-width: 768px) {
+    #tic-image-summary {
+        height: 80vh;
+        display: inline-block;
+        position: relative;
+        overflow: auto;
+    }
+}
 
 
 /* Settings Page */

diff --git a/public/src/index.html b/public/src/index.html
index 93dd080..5c61753 100644 (file)
--- a/public/src/index.html
+++ b/public/src/index.html
@@ -250,7 +250,7 @@
                         <p id="tic-alert-content"></p>
                     </div>
                     <div class="modal-footer">
-                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                 </div>
                 </div>
             </div>

diff --git a/public/src/js/main.js b/public/src/js/main.js
index 0cd6076..d0c352f 100644 (file)
--- a/public/src/js/main.js
+++ b/public/src/js/main.js
@@ -39,8 +39,9 @@ define([
             // TODO: Util.showLoadingDialog(false) after Package.updatePackageTree(data)
         })
         .catch(function (reason) {
-            console.error(reason);
+            console.log(reason);
             Util.showLoadingDialog(false);
+            Util.showAlertDialog('Failed to load package list.<br>Please check the tic-core.');
         });
 
     });

diff --git a/public/src/js/page/settings.js b/public/src/js/page/settings.js
index e1750d4..bf2abe2 100644 (file)
--- a/public/src/js/page/settings.js
+++ b/public/src/js/page/settings.js
@@ -11,6 +11,13 @@ define([
 
     var ANALYSIS_URL = '<%= protocol %>//<%= hostname %>:<%= port %>/analysis';
 
+    var repoStore = [];
+    var recipeStore = []; // TODO:
+
+    function getRepoStore() {
+        return repoStore;
+    }
+
     function getAnalysisUrl() {
         return _.template(ANALYSIS_URL)({
             protocol: location.protocol,
@@ -19,15 +26,7 @@ define([
         });
     }
 
-    function SettingsData() {
-        var self = this;
-        self.repoStore = []; // {order, url}
-        self.recipeStore = []; // TODO:
-        self.packageData = [];
-    }
-    var Data = new SettingsData();
-
-    /* FIXME: */
+    /* FIXME: sample url */
     var baseRepo = {
         order: 1,
         url: "http://download.tizen.org/snapshots/tizen/base/latest/repos/arm64/packages"
@@ -36,18 +35,8 @@ define([
         order: 2,
         url: "https://download.tizen.org/snapshots/tizen/mobile/latest/repos/arm64-wayland/packages"
     }
-    Data.repoStore.push(baseRepo);
-    Data.repoStore.push(mobileRepo);
-
-    var postBody = {
-        repos : _.map(_.orderBy(Data.repoStore, ['order']), 'url'),
-        recipes : []
-    };
-
-    function init() {
-        console.log('settings: init');
-        // TODO:
-    }
+    repoStore.push(baseRepo);
+    repoStore.push(mobileRepo);
 
     function updatePackage() {
         /* local json data loading test */
@@ -65,12 +54,16 @@ define([
         */
 
         return new Promise(function (resolve, reject) {
+             var postBody = {
+                repos : _.map(_.orderBy(repoStore, ['order']), 'url'),
+                recipes : []
+            };
+
             $.ajax({
                 contentType: 'text/plain',
                 data: JSON.stringify(postBody),
                 dataType: 'json',
                 success: function(rawData) {
-                    Data.packageData = rawData.data;
                     resolve(rawData.data);
                 },
                 error: function(err) {
@@ -83,11 +76,16 @@ define([
         });
     }
 
+    function init() {
+        console.log('settings: init');
+    }
+
     init();
 
     return {
         updatePackage: updatePackage,
-        Data: Data
+
+        getRepoStore: getRepoStore
     }
 
 });

diff --git a/public/src/js/util.js b/public/src/js/util.js
index b93fbdb..728b21f 100644 (file)
--- a/public/src/js/util.js
+++ b/public/src/js/util.js
@@ -23,7 +23,7 @@ define([
     }
 
     function showAlertDialog(content) {
-        $('#tic-alert-content').text(content);
+        $('#tic-alert-content').html(content);
         $('#tic-alert-dialog').modal('show');
     }