Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-23 23:18:48 -05:00
Code Issues Activity

add main view layout and responsive

Browse source
This commit is contained in:
elhombretecla 2016-06-26 11:52:56 +02:00 • committed by Andrey Antukh
parent ee3877f20c
commit 6c26ffecd5
No known key found for this signature in database
GPG key ID: 4DFEBCB8316A8B95
6 changed files with 69 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
resources/styles/common/dependencies/mixin.scss
View file

@ -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; }
}
}

7
resources/styles/main.scss
View file

@ -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
//#################################################
//

7
resources/styles/view.scss
View file

@ -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
//#################################################
//

38
resources/styles/view/layouts/main-layout.scss
View file

@ -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;
}

1
resources/view.mustache
View file

@ -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" />

7
src/uxbox/view/ui.cljs
View file

@ -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