projects / archive / 20170607 / tools / tic.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: de49603)
Setting a default layout 84/100584/2
authorChangHyun Lee <leechwin.lee@samsung.com>
Mon, 28 Nov 2016 12:17:41 +0000 (21:17 +0900)
committerChangHyun Lee <leechwin.lee@samsung.com>
Mon, 28 Nov 2016 12:58:12 +0000 (21:58 +0900)
Separate sections with 'Package', 'Image' and 'Settings'

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

public/src/css/style.css patch | blob | history
public/src/index.html patch | blob | history
public/src/js/main.js patch | blob | history

diff --git a/public/src/css/style.css b/public/src/css/style.css
index 04d8284..a033d86 100644 (file)
--- a/public/src/css/style.css
+++ b/public/src/css/style.css
@@ -1,10 +1,42 @@
-/* TODO:
-   @author: leechwin.lee@samsung.com
- */
-body {
-  padding-top: 50px;
-}
-.starter-template {
-  padding: 40px 15px;
-  text-align: center;
+ body {
+    width: 100%;
+    height: 100%;
+}
+
+html {
+    width: 100%;
+    height: 100%;
+}
+
+@media(min-width:767px) {
+    .navbar {
+        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
+        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
+        transition: background .5s ease-in-out,padding .5s ease-in-out;
+    }
+
+    .top-nav-collapse {
+        padding: 0;
+    }
+}
+
+.package-section {
+    height: 100%;
+    padding-top: 50px;
+    text-align: center;
+    background: #fff;
+}
+
+.image-section {
+    height: 100%;
+    padding-top: 50px;
+    text-align: center;
+    background: #fff;
+}
+
+.settings-section {
+    height: 100%;
+    padding-top: 50px;
+    text-align: center;
+    background: #fff;
 }
diff --git a/public/src/index.html b/public/src/index.html
index eef2b80..dfb798d 100644 (file)
--- a/public/src/index.html
+++ b/public/src/index.html
@@ -18,34 +18,69 @@
         <![endif]-->
     </head>
 
-    <body>
-        <nav class="navbar navbar-inverse navbar-fixed-top">
-          <div class="container">
-            <div class="navbar-header">
-              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
-                <span class="sr-only">Toggle navigation</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-              </button>
-              <a class="navbar-brand" href="#">Tizen Image Configurator</a>
-            </div>
-            <div id="navbar" class="collapse navbar-collapse">
-              <ul class="nav navbar-nav">
-                <li class="active"><a href="#package">Package</a></li>
-                <li><a href="#image">Image</a></li>
-                <li><a href="#contact">Contact</a></li>
-              </ul>
-            </div><!--/.nav-collapse -->
-          </div>
+    <body data-spy="scroll" data-target=".navbar-fixed-top">
+        <!-- Navigation -->
+        <nav class="navbar navbar-default navbar-fixed-top">
+            <div class="container">
+                <div class="navbar-header page-scroll">
+                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+                        <span class="sr-only">Toggle navigation</span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                        <span class="icon-bar"></span>
+                    </button>
+                    <a class="navbar-brand page-scroll" href="#package">Tizen Image Configurator</a>
+                </div>
+
+                <!-- Collect the nav links, forms, and other content for toggling -->
+                <div id="navbar" class="collapse navbar-collapse">
+                    <ul class="nav navbar-nav">
+                        <li>
+                            <a class="page-scroll" href="#package">Package</a>
+                        </li>
+                        <li>
+                            <a class="page-scroll"href="#image">Image</a>
+                        </li>
+                        <li>
+                            <a class="page-scroll"href="#settings">Settings</a>
+                        </li>
+                    </ul>
+                </div><!--/.nav-collapse -->
+            </div><!-- /.container -->
         </nav>
 
-        <div class="container">
-          <div class="starter-template">
-            <h1>Bootstrap starter template</h1>
-            <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
-          </div>
-        </div><!-- /.container -->
+        <!-- Package Section -->
+        <section id="package" class="package-section">
+            <div class="container">
+                <div class="row">
+                    <div class="col-lg-12">
+                        <h1>Package Section</h1>
+                    </div>
+                </div>
+            </div><!-- /.container -->
+        </section>
+
+        <!-- Image Section -->
+        <section id="image" class="image-section">
+            <div class="container">
+                <div class="row">
+                    <div class="col-lg-12">
+                        <h1>Image Section</h1>
+                    </div>
+                </div>
+            </div><!-- /.container -->
+        </section>
+
+        <!-- Settings Section -->
+        <section id="settings" class="settings-section">
+            <div class="container">
+                <div class="row">
+                    <div class="col-lg-12">
+                        <h1>Settings Section</h1>
+                    </div>
+                </div>
+            </div><!-- /.container -->
+        </section>
 
         <!-- library loading -->
         <script src="/socket.io/socket.io.js"></script>
diff --git a/public/src/js/main.js b/public/src/js/main.js
index 356b8ae..9cee101 100644 (file)
--- a/public/src/js/main.js
+++ b/public/src/js/main.js
@@ -4,4 +4,14 @@
     socket.on('connect', function () {
         console.log('client connect');
     });
-})();
\ No newline at end of file
+})();
+
+//page scrolling
+$(function() {
+    $('a.page-scroll').bind('click', function(event) {
+        var body = $('html, body');
+        var $anchor = $(this);
+        body.stop().animate({scrollTop: $($anchor.attr('href')).offset().top}, 300, 'swing');
+        event.preventDefault();
+    });
+});
\ No newline at end of file