From 6c26ffecd5601194a4f1b8a783a1c7d14b9ad387 Mon Sep 17 00:00:00 2001
From: elhombretecla <delacruzgarciajuan@gmail.com>
Date: Sun, 26 Jun 2016 11:52:56 +0200
Subject: [PATCH] add main view layout and responsive

---
 .../styles/common/dependencies/mixin.scss     | 20 +++++-----
 resources/styles/main.scss                    |  7 ++++
 resources/styles/view.scss                    |  7 ++++
 .../styles/view/layouts/main-layout.scss      | 38 +++++++++++++++++++
 resources/view.mustache                       |  1 +
 src/uxbox/view/ui.cljs                        |  7 +++-
 6 files changed, 69 insertions(+), 11 deletions(-)

diff --git a/resources/styles/common/dependencies/mixin.scss b/resources/styles/common/dependencies/mixin.scss
index 0035317d2..8b8958776 100644
--- a/resources/styles/common/dependencies/mixin.scss
+++ b/resources/styles/common/dependencies/mixin.scss
@@ -7,21 +7,21 @@
 
 /// This mixin allows you  to add styles to a specific Media query inside the style selector specifying which Breaking Point you want to choose.
 /// @group Mixins
-/// @parameter $point - This parameter decide which one of Breaking Point you want to use: "bp-papabear" (Desktop), "bp-mamabear" (Tablet) and "bp-babybear" (Mobile).
+/// @parameter $point - This parameter decide which one of Breaking Point you want to use: "bp-desktop" (Desktop), "bp-tablet" (Tablet) and "bp-mobile" (Mobile).
 @mixin bp($point) {
 
-  $bp-babybear: "(min-width: 720px)";
-  $bp-mamabear: "(min-width: 1020px)";
-  $bp-papabear: "(min-width: 1366px)";
+  $bp-mobile: "(min-width: 720px)";
+  $bp-tablet: "(min-width: 1020px)";
+  $bp-desktop: "(min-width: 1366px)";
 
-  @if $point == papa-bear {
-    @media #{$bp-papabear} { @content; }
+  @if $point == mobile {
+    @media #{$bp-desktop} { @content; }
   }
-  @else if $point == mama-bear {
-    @media #{$bp-mamabear} { @content; }
+  @else if $point == tablet {
+    @media #{$bp-tablet} { @content; }
   }
-  @else if $point == baby-bear {
-    @media #{$bp-babybear}  { @content; }
+  @else if $point == desktop {
+    @media #{$bp-mobile}  { @content; }
   }
 
 }
diff --git a/resources/styles/main.scss b/resources/styles/main.scss
index b82acfb84..8bf7ce075 100644
--- a/resources/styles/main.scss
+++ b/resources/styles/main.scss
@@ -1,3 +1,10 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
+// Copyright (c) 2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+
 // UXBOX MAIN STYLES
 //#################################################
 //
diff --git a/resources/styles/view.scss b/resources/styles/view.scss
index afe1f00ab..c1403ff42 100644
--- a/resources/styles/view.scss
+++ b/resources/styles/view.scss
@@ -1,3 +1,10 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
+// Copyright (c) 2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+
 // UXBOX VIEW STYLES
 //#################################################
 //
diff --git a/resources/styles/view/layouts/main-layout.scss b/resources/styles/view/layouts/main-layout.scss
index e69de29bb..ad0c7052b 100644
--- a/resources/styles/view/layouts/main-layout.scss
+++ b/resources/styles/view/layouts/main-layout.scss
@@ -0,0 +1,38 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
+// Copyright (c) 2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+
+.view-content {
+  display: flex;
+  flex-direction: column-reverse;
+  height: 100vh;
+  width: 100%;
+  @include bp(tablet) {
+    flex-direction: row;
+  }
+}
+
+.view-nav {
+  background-color: $primary-ui-bg;
+  border-top: 1px solid $soft-ui-border;
+  border-right: 0;
+  display: flex;
+  flex-shrink: 0;
+  height: 55px;
+  width: 100%;
+  @include bp(tablet) {
+    border-right: 1px solid $soft-ui-border;
+    border-top: 0;
+    height: 100%;
+    width: 70px;
+  }
+}
+
+.view-canvas {
+  background-color: $secondary-ui-bg;
+  width: 100%;
+  overflow: auto;
+}
diff --git a/resources/view.mustache b/resources/view.mustache
index ca9b7dac9..d095eae42 100644
--- a/resources/view.mustache
+++ b/resources/view.mustache
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>UXBOX-view - The Open-Source prototyping tool</title>
     <link href="{{& cssfile}}" rel="stylesheet" type="text/css" />
     <link rel="icon" href="/images/favicon.png" />
diff --git a/src/uxbox/view/ui.cljs b/src/uxbox/view/ui.cljs
index 68f691152..17251bb7f 100644
--- a/src/uxbox/view/ui.cljs
+++ b/src/uxbox/view/ui.cljs
@@ -18,7 +18,12 @@
 
 (defn app-render
   [own]
-  (html [:p "hello world!!"]))
+  (html
+   [:section.view-content
+    [:div.view-nav "NAV"]
+    [:div.view-canvas "VIEW CONTENT"]
+   ]
+  ))
 
 (def app
   (mx/component