Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
dream
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
1
Issues
1
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
nexedi
dream
Commits
8d4c31ed
Commit
8d4c31ed
authored
Nov 18, 2013
by
Kazuhiko Shiozaki
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
responsive layout in UI.
parent
379a0081
Changes
6
Hide whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
628 additions
and
52 deletions
+628
-52
dream/platform/static/css/base.css
dream/platform/static/css/base.css
+269
-0
dream/platform/static/css/demo-new.css
dream/platform/static/css/demo-new.css
+24
-28
dream/platform/static/css/images/ui-bg_glass_65_ffffff_1x400.png
...latform/static/css/images/ui-bg_glass_65_ffffff_1x400.png
+0
-0
dream/platform/static/css/layout.css
dream/platform/static/css/layout.css
+58
-0
dream/platform/static/css/skeleton.css
dream/platform/static/css/skeleton.css
+242
-0
dream/platform/static/index.html
dream/platform/static/index.html
+35
-24
No files found.
dream/platform/static/css/base.css
0 → 100644
View file @
8d4c31ed
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/
/* Table of Content
==================================================
#Reset & Basics
#Basic Styles
#Site Styles
#Typography
#Links
#Lists
#Images
#Buttons
#Forms
#Misc */
/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
html
,
body
,
div
,
span
,
applet
,
object
,
iframe
,
h1
,
h2
,
h3
,
h4
,
h5
,
h6
,
p
,
blockquote
,
pre
,
a
,
abbr
,
acronym
,
address
,
big
,
cite
,
code
,
del
,
dfn
,
em
,
img
,
ins
,
kbd
,
q
,
s
,
samp
,
small
,
strike
,
strong
,
sub
,
sup
,
tt
,
var
,
b
,
u
,
i
,
center
,
dl
,
dt
,
dd
,
ol
,
ul
,
li
,
fieldset
,
form
,
label
,
legend
,
table
,
caption
,
tbody
,
tfoot
,
thead
,
tr
,
th
,
td
,
article
,
aside
,
canvas
,
details
,
embed
,
figure
,
figcaption
,
footer
,
header
,
hgroup
,
menu
,
nav
,
output
,
ruby
,
section
,
summary
,
time
,
mark
,
audio
,
video
{
margin
:
0
;
padding
:
0
;
border
:
0
;
font-size
:
100%
;
font
:
inherit
;
vertical-align
:
baseline
;
}
article
,
aside
,
details
,
figcaption
,
figure
,
footer
,
header
,
hgroup
,
menu
,
nav
,
section
{
display
:
block
;
}
body
{
line-height
:
1
;
}
ol
,
ul
{
list-style
:
none
;
}
blockquote
,
q
{
quotes
:
none
;
}
blockquote
:before
,
blockquote
:after
,
q
:before
,
q
:after
{
content
:
''
;
content
:
none
;
}
table
{
border-collapse
:
collapse
;
border-spacing
:
0
;
}
/* #Basic Styles
================================================== */
body
{
background
:
#fff
;
font
:
14px
/
21px
"HelveticaNeue"
,
"Helvetica Neue"
,
Helvetica
,
Arial
,
sans-serif
;
color
:
#444
;
-webkit-font-smoothing
:
antialiased
;
/* Fix for webkit rendering */
-webkit-text-size-adjust
:
100%
;
}
/* #Typography
================================================== */
h1
,
h2
,
h3
,
h4
,
h5
,
h6
{
color
:
#181818
;
font-family
:
"Georgia"
,
"Times New Roman"
,
serif
;
font-weight
:
normal
;
}
h1
a
,
h2
a
,
h3
a
,
h4
a
,
h5
a
,
h6
a
{
font-weight
:
inherit
;
}
h1
{
font-size
:
46px
;
line-height
:
50px
;
margin-bottom
:
14px
;}
h2
{
font-size
:
35px
;
line-height
:
40px
;
margin-bottom
:
10px
;
}
h3
{
font-size
:
28px
;
line-height
:
34px
;
margin-bottom
:
8px
;
}
h4
{
font-size
:
21px
;
line-height
:
30px
;
margin-bottom
:
4px
;
}
h5
{
font-size
:
17px
;
line-height
:
24px
;
}
h6
{
font-size
:
14px
;
line-height
:
21px
;
}
.subheader
{
color
:
#777
;
}
p
{
margin
:
0
0
20px
0
;
}
p
img
{
margin
:
0
;
}
p
.lead
{
font-size
:
21px
;
line-height
:
27px
;
color
:
#777
;
}
em
{
font-style
:
italic
;
}
strong
{
font-weight
:
bold
;
color
:
#333
;
}
small
{
font-size
:
80%
;
}
/* Blockquotes */
blockquote
,
blockquote
p
{
font-size
:
17px
;
line-height
:
24px
;
color
:
#777
;
font-style
:
italic
;
}
blockquote
{
margin
:
0
0
20px
;
padding
:
9px
20px
0
19px
;
border-left
:
1px
solid
#ddd
;
}
blockquote
cite
{
display
:
block
;
font-size
:
12px
;
color
:
#555
;
}
blockquote
cite
:before
{
content
:
"\2014 \0020"
;
}
blockquote
cite
a
,
blockquote
cite
a
:visited
,
blockquote
cite
a
:visited
{
color
:
#555
;
}
hr
{
border
:
solid
#ddd
;
border-width
:
1px
0
0
;
clear
:
both
;
margin
:
10px
0
30px
;
height
:
0
;
}
/* #Links
================================================== */
a
,
a
:visited
{
color
:
#333
;
text-decoration
:
underline
;
outline
:
0
;
}
a
:hover
,
a
:focus
{
color
:
#000
;
}
p
a
,
p
a
:visited
{
line-height
:
inherit
;
}
/* #Lists
================================================== */
ul
,
ol
{
margin-bottom
:
20px
;
}
ul
{
list-style
:
none
outside
;
}
ol
{
list-style
:
decimal
;
}
ol
,
ul
.square
,
ul
.circle
,
ul
.disc
{
margin-left
:
30px
;
}
ul
.square
{
list-style
:
square
outside
;
}
ul
.circle
{
list-style
:
circle
outside
;
}
ul
.disc
{
list-style
:
disc
outside
;
}
ul
ul
,
ul
ol
,
ol
ol
,
ol
ul
{
margin
:
4px
0
5px
30px
;
font-size
:
90%
;
}
ul
ul
li
,
ul
ol
li
,
ol
ol
li
,
ol
ul
li
{
margin-bottom
:
6px
;
}
li
{
line-height
:
18px
;
margin-bottom
:
12px
;
}
ul
.large
li
{
line-height
:
21px
;
}
li
p
{
line-height
:
21px
;
}
/* #Images
================================================== */
img
.scale-with-grid
{
max-width
:
100%
;
height
:
auto
;
}
/* #Buttons
================================================== */
.button
,
button
,
input
[
type
=
"submit"
],
input
[
type
=
"reset"
],
input
[
type
=
"button"
]
{
background
:
#eee
;
/* Old browsers */
background
:
#eee
-moz-linear-gradient
(
top
,
rgba
(
255
,
255
,
255
,
.2
)
0%
,
rgba
(
0
,
0
,
0
,
.2
)
100%
);
/* FF3.6+ */
background
:
#eee
-webkit-gradient
(
linear
,
left
top
,
left
bottom
,
color-stop
(
0%
,
rgba
(
255
,
255
,
255
,
.2
)),
color-stop
(
100%
,
rgba
(
0
,
0
,
0
,
.2
)));
/* Chrome,Safari4+ */
background
:
#eee
-webkit-linear-gradient
(
top
,
rgba
(
255
,
255
,
255
,
.2
)
0%
,
rgba
(
0
,
0
,
0
,
.2
)
100%
);
/* Chrome10+,Safari5.1+ */
background
:
#eee
-o-linear-gradient
(
top
,
rgba
(
255
,
255
,
255
,
.2
)
0%
,
rgba
(
0
,
0
,
0
,
.2
)
100%
);
/* Opera11.10+ */
background
:
#eee
-ms-linear-gradient
(
top
,
rgba
(
255
,
255
,
255
,
.2
)
0%
,
rgba
(
0
,
0
,
0
,
.2
)
100%
);
/* IE10+ */
background
:
#eee
linear-gradient
(
top
,
rgba
(
255
,
255
,
255
,
.2
)
0%
,
rgba
(
0
,
0
,
0
,
.2
)
100%
);
/* W3C */
border
:
1px
solid
#aaa
;
border-top
:
1px
solid
#ccc
;
border-left
:
1px
solid
#ccc
;
-moz-border-radius
:
3px
;
-webkit-border-radius
:
3px
;
border-radius
:
3px
;
color
:
#444
;
display
:
inline-block
;
font-size
:
11px
;
font-weight
:
bold
;
text-decoration
:
none
;
text-shadow
:
0
1px
rgba
(
255
,
255
,
255
,
.75
);
cursor
:
pointer
;
margin-bottom
:
20px
;
line-height
:
normal
;
padding
:
8px
10px
;
font-family
:
"HelveticaNeue"
,
"Helvetica Neue"
,
Helvetica
,
Arial
,
sans-serif
;
}
.button
:hover
,
button
:hover
,
input
[
type
=
"submit"
]
:hover
,
input
[
type
=
"reset"
]
:hover
,
input
[
type
=
"button"
]
:hover
{
color
:
#222
;
background
:
#ddd
;
/* Old browsers */
background
:
#ddd
-moz-linear-gradient
(
top
,
rgba
(
255
,
255
,
255
,
.3
)
0%
,
rgba
(
0
,
0
,
0
,
.3
)
100%
);
/* FF3.6+ */
background
:
#ddd
-webkit-gradient
(
linear
,
left
top
,
left
bottom
,
color-stop
(
0%
,
rgba
(
255
,
255
,
255
,
.3
)),
color-stop
(
100%
,
rgba
(
0
,
0
,
0
,
.3
)));
/* Chrome,Safari4+ */
background
:
#ddd
-webkit-linear-gradient
(
top
,
rgba
(
255
,
255
,
255
,
.3
)
0%
,
rgba
(
0
,
0
,
0
,
.3
)
100%
);
/* Chrome10+,Safari5.1+ */
background
:
#ddd
-o-linear-gradient
(
top
,
rgba
(
255
,
255
,
255
,
.3
)
0%
,
rgba
(
0
,
0
,
0
,
.3
)
100%
);
/* Opera11.10+ */
background
:
#ddd
-ms-linear-gradient
(
top
,
rgba
(
255
,
255
,
255
,
.3
)
0%
,
rgba
(
0
,
0
,
0
,
.3
)
100%
);
/* IE10+ */
background
:
#ddd
linear-gradient
(
top
,
rgba
(
255
,
255
,
255
,
.3
)
0%
,
rgba
(
0
,
0
,
0
,
.3
)
100%
);
/* W3C */
border
:
1px
solid
#888
;
border-top
:
1px
solid
#aaa
;
border-left
:
1px
solid
#aaa
;
}
.button
:active
,
button
:active
,
input
[
type
=
"submit"
]
:active
,
input
[
type
=
"reset"
]
:active
,
input
[
type
=
"button"
]
:active
{
border
:
1px
solid
#666
;
background
:
#ccc
;
/* Old browsers */
background
:
#ccc
-moz-linear-gradient
(
top
,
rgba
(
255
,
255
,
255
,
.35
)
0%
,
rgba
(
10
,
10
,
10
,
.4
)
100%
);
/* FF3.6+ */
background
:
#ccc
-webkit-gradient
(
linear
,
left
top
,
left
bottom
,
color-stop
(
0%
,
rgba
(
255
,
255
,
255
,
.35
)),
color-stop
(
100%
,
rgba
(
10
,
10
,
10
,
.4
)));
/* Chrome,Safari4+ */
background
:
#ccc
-webkit-linear-gradient
(
top
,
rgba
(
255
,
255
,
255
,
.35
)
0%
,
rgba
(
10
,
10
,
10
,
.4
)
100%
);
/* Chrome10+,Safari5.1+ */
background
:
#ccc
-o-linear-gradient
(
top
,
rgba
(
255
,
255
,
255
,
.35
)
0%
,
rgba
(
10
,
10
,
10
,
.4
)
100%
);
/* Opera11.10+ */
background
:
#ccc
-ms-linear-gradient
(
top
,
rgba
(
255
,
255
,
255
,
.35
)
0%
,
rgba
(
10
,
10
,
10
,
.4
)
100%
);
/* IE10+ */
background
:
#ccc
linear-gradient
(
top
,
rgba
(
255
,
255
,
255
,
.35
)
0%
,
rgba
(
10
,
10
,
10
,
.4
)
100%
);
/* W3C */
}
.button.full-width
,
button
.full-width
,
input
[
type
=
"submit"
]
.full-width
,
input
[
type
=
"reset"
]
.full-width
,
input
[
type
=
"button"
]
.full-width
{
width
:
100%
;
padding-left
:
0
!important
;
padding-right
:
0
!important
;
text-align
:
center
;
}
/* Fix for odd Mozilla border & padding issues */
button
::-moz-focus-inner
,
input
::-moz-focus-inner
{
border
:
0
;
padding
:
0
;
}
/* #Forms
================================================== */
form
{
margin-bottom
:
20px
;
}
fieldset
{
margin-bottom
:
20px
;
}
input
[
type
=
"text"
],
input
[
type
=
"password"
],
input
[
type
=
"email"
],
textarea
,
select
{
border
:
1px
solid
#ccc
;
padding
:
6px
4px
;
outline
:
none
;
-moz-border-radius
:
2px
;
-webkit-border-radius
:
2px
;
border-radius
:
2px
;
font
:
13px
"HelveticaNeue"
,
"Helvetica Neue"
,
Helvetica
,
Arial
,
sans-serif
;
color
:
#777
;
margin
:
0
;
width
:
210px
;
max-width
:
100%
;
display
:
block
;
margin-bottom
:
20px
;
background
:
#fff
;
}
select
{
padding
:
0
;
}
input
[
type
=
"text"
]
:focus
,
input
[
type
=
"password"
]
:focus
,
input
[
type
=
"email"
]
:focus
,
textarea
:focus
{
border
:
1px
solid
#aaa
;
color
:
#444
;
-moz-box-shadow
:
0
0
3px
rgba
(
0
,
0
,
0
,
.2
);
-webkit-box-shadow
:
0
0
3px
rgba
(
0
,
0
,
0
,
.2
);
box-shadow
:
0
0
3px
rgba
(
0
,
0
,
0
,
.2
);
}
textarea
{
min-height
:
60px
;
}
label
,
legend
{
display
:
block
;
font-weight
:
bold
;
font-size
:
13px
;
}
select
{
width
:
220px
;
}
input
[
type
=
"checkbox"
]
{
display
:
inline
;
}
label
span
,
legend
span
{
font-weight
:
normal
;
font-size
:
13px
;
color
:
#444
;
}
/* #Misc
================================================== */
.remove-bottom
{
margin-bottom
:
0
!important
;
}
.half-bottom
{
margin-bottom
:
10px
!important
;
}
.add-bottom
{
margin-bottom
:
20px
!important
;
}
dream/platform/static/css/demo-new.css
View file @
8d4c31ed
...
...
@@ -7,6 +7,7 @@ body {
text-align
:
center
;
}
#headerWrapper
{
display
:
none
;
width
:
100%
;
background-color
:
black
;
position
:
fixed
;
...
...
@@ -19,7 +20,7 @@ body {
-o-box-shadow
:
0px
2px
19px
#aaa
;
-webkit-box-shadow
:
0px
2px
19px
#aaa
;
-moz-box-shadow
:
0px
2px
19px
#aaa
;
opacity
:
0.8
;
}
...
...
@@ -31,26 +32,21 @@ body {
#main
{
/* these two margins settings are here just to ensure that jsPlumb handles
margins properly.*/
margin-top
:
44px
;
margin-left
:
auto
;
position
:
relative
;
margin
:
20px
auto
;
font-size
:
80%
;
margin-right
:
auto
;
width
:
850px
;
border-left
:
2px
solid
#456
;
border-right
:
2px
solid
#456
;
border-bottom
:
2px
solid
#456
;
border
:
1px
solid
#999
;
width
:
100%
;
height
:
600px
;
overflow
:
hidden
;
border-bottom-left-radius
:
10px
;
border-bottom-right-radius
:
10px
;
border-radius
:
10px
;
background-color
:
#eaedef
;
}
/* Setting for dialog */
label
,
input
{
display
:
block
;
}
input
.text
{
margin
-bottom
:
12px
;
width
:
95%
;
padding
:
.4em
;
}
input
.text
{
margin
:
4px
;
padding
:
0
;
}
fieldset
{
padding
:
0
;
border
:
0
;
margin-top
:
25px
;
}
h1
{
font-size
:
1.2em
;
margin
:
.6em
0
;
}
div
#users-contain
{
width
:
350px
;
margin
:
20px
0
;
}
...
...
@@ -70,9 +66,6 @@ li { margin: 3px;
width
:
120px
;
}
#sidebar
{
margin-left
:
auto
;
margin-right
:
auto
;
width
:
800px
;
font-size
:
13px
;
}
...
...
@@ -93,11 +86,7 @@ li { margin: 3px;
}
#render
{
padding-top
:
2px
;
margin-left
:
auto
;
margin-right
:
auto
;
z-index
:
5000
;
margin-top
:
0px
;
text-align
:
center
;
background-color
:
white
;
}
...
...
@@ -191,23 +180,25 @@ path, ._jsPlumb_endpoint { cursor:pointer; }
#tools
{
position
:
absolute
;
/*
position: absolute;
width: 200px;
height
:
400px
;
border
:
2px
solid
;
margin-top
:
20px
;
margin
-left
:
35px
;
height: 400px;
*/
width
:
100%
;
border
:
1px
solid
#999
;
margin
:
20px
0
;
border-radius
:
10px
;
padding-bottom
:
20px
;
}
#simulation_controls
{
position
:
absolute
;
/*
position: absolute;
width: 200px;
height: 300px;
margin-top: 550px;
margin-left: 35px;
font-size
:
13px
;
height
:
300px
;
border
:
2px
solid
;
font-size:13px;
*/
width
:
100%
;
border
:
1px
solid
#999
;
border-radius
:
10px
;
}
...
...
@@ -226,11 +217,12 @@ path, ._jsPlumb_endpoint { cursor:pointer; }
font-size
:
0.9em
;
margin-top
:
1em
;
margin-left
:
1em
;
display
:
inline-block
;
}
#graph
{
width
:
600px
;
width
:
100%
;
height
:
400px
;
text-align
:
center
;
margin-left
:
auto
;
...
...
@@ -239,3 +231,7 @@ path, ._jsPlumb_endpoint { cursor:pointer; }
margin-top
:
0px
;
}
.ui-button
{
width
:
80%
;
margin-bottom
:
4px
;
}
dream/platform/static/css/images/ui-bg_glass_65_ffffff_1x400.png
0 → 100644
View file @
8d4c31ed
105 Bytes
dream/platform/static/css/layout.css
0 → 100644
View file @
8d4c31ed
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/
/* Table of Content
==================================================
#Site Styles
#Page Styles
#Media Queries
#Font-Face */
/* #Site Styles
================================================== */
/* #Page Styles
================================================== */
/* #Media Queries
================================================== */
/* Smaller than standard 960 (devices and browsers) */
@media
only
screen
and
(
max-width
:
959px
)
{}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media
only
screen
and
(
min-width
:
768px
)
and
(
max-width
:
959px
)
{}
/* All Mobile Sizes (devices and browser) */
@media
only
screen
and
(
max-width
:
767px
)
{}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media
only
screen
and
(
min-width
:
480px
)
and
(
max-width
:
767px
)
{}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media
only
screen
and
(
max-width
:
479px
)
{}
/* #Font-Face
================================================== */
/* This is the proper syntax for an @font-face file
Just create a "fonts" folder at the root,
copy your FontName into code below and remove
comment brackets */
/* @font-face {
font-family: 'FontName';
src: url('../fonts/FontName.eot');
src: url('../fonts/FontName.eot?iefix') format('eot'),
url('../fonts/FontName.woff') format('woff'),
url('../fonts/FontName.ttf') format('truetype'),
url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
font-weight: normal;
font-style: normal; }
*/
\ No newline at end of file
dream/platform/static/css/skeleton.css
0 → 100644
View file @
8d4c31ed
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/
/* Table of Contents
==================================================
#Base 960 Grid
#Tablet (Portrait)
#Mobile (Portrait)
#Mobile (Landscape)
#Clearing */
/* #Base 960 Grid
================================================== */
.container
{
position
:
relative
;
width
:
960px
;
margin
:
0
auto
;
padding
:
0
;
}
.container
.column
,
.container
.columns
{
float
:
left
;
display
:
inline
;
margin-left
:
10px
;
margin-right
:
10px
;
}
.row
{
margin-bottom
:
20px
;
}
/* Nested Column Classes */
.column.alpha
,
.columns.alpha
{
margin-left
:
0
;
}
.column.omega
,
.columns.omega
{
margin-right
:
0
;
}
/* Base Grid */
.container
.one.column
,
.container
.one.columns
{
width
:
40px
;
}
.container
.two.columns
{
width
:
100px
;
}
.container
.three.columns
{
width
:
160px
;
}
.container
.four.columns
{
width
:
220px
;
}
.container
.five.columns
{
width
:
280px
;
}
.container
.six.columns
{
width
:
340px
;
}
.container
.seven.columns
{
width
:
400px
;
}
.container
.eight.columns
{
width
:
460px
;
}
.container
.nine.columns
{
width
:
520px
;
}
.container
.ten.columns
{
width
:
580px
;
}
.container
.eleven.columns
{
width
:
640px
;
}
.container
.twelve.columns
{
width
:
700px
;
}
.container
.thirteen.columns
{
width
:
760px
;
}
.container
.fourteen.columns
{
width
:
820px
;
}
.container
.fifteen.columns
{
width
:
880px
;
}
.container
.sixteen.columns
{
width
:
940px
;
}
.container
.one-third.column
{
width
:
300px
;
}
.container
.two-thirds.column
{
width
:
620px
;
}
/* Offsets */
.container
.offset-by-one
{
padding-left
:
60px
;
}
.container
.offset-by-two
{
padding-left
:
120px
;
}
.container
.offset-by-three
{
padding-left
:
180px
;
}
.container
.offset-by-four
{
padding-left
:
240px
;
}
.container
.offset-by-five
{
padding-left
:
300px
;
}
.container
.offset-by-six
{
padding-left
:
360px
;
}
.container
.offset-by-seven
{
padding-left
:
420px
;
}
.container
.offset-by-eight
{
padding-left
:
480px
;
}
.container
.offset-by-nine
{
padding-left
:
540px
;
}
.container
.offset-by-ten
{
padding-left
:
600px
;
}
.container
.offset-by-eleven
{
padding-left
:
660px
;
}
.container
.offset-by-twelve
{
padding-left
:
720px
;
}
.container
.offset-by-thirteen
{
padding-left
:
780px
;
}
.container
.offset-by-fourteen
{
padding-left
:
840px
;
}
.container
.offset-by-fifteen
{
padding-left
:
900px
;
}
/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
@media
only
screen
and
(
min-width
:
768px
)
and
(
max-width
:
959px
)
{
.container
{
width
:
768px
;
}
.container
.column
,
.container
.columns
{
margin-left
:
10px
;
margin-right
:
10px
;
}
.column.alpha
,
.columns.alpha
{
margin-left
:
0
;
margin-right
:
10px
;
}
.column.omega
,
.columns.omega
{
margin-right
:
0
;
margin-left
:
10px
;
}
.alpha.omega
{
margin-left
:
0
;
margin-right
:
0
;
}
.container
.one.column
,
.container
.one.columns
{
width
:
28px
;
}
.container
.two.columns
{
width
:
76px
;
}
.container
.three.columns
{
width
:
124px
;
}
.container
.four.columns
{
width
:
172px
;
}
.container
.five.columns
{
width
:
220px
;
}
.container
.six.columns
{
width
:
268px
;
}
.container
.seven.columns
{
width
:
316px
;
}
.container
.eight.columns
{
width
:
364px
;
}
.container
.nine.columns
{
width
:
412px
;
}
.container
.ten.columns
{
width
:
460px
;
}
.container
.eleven.columns
{
width
:
508px
;
}
.container
.twelve.columns
{
width
:
556px
;
}
.container
.thirteen.columns
{
width
:
604px
;
}
.container
.fourteen.columns
{
width
:
652px
;
}
.container
.fifteen.columns
{
width
:
700px
;
}
.container
.sixteen.columns
{
width
:
748px
;
}
.container
.one-third.column
{
width
:
236px
;
}
.container
.two-thirds.column
{
width
:
492px
;
}
/* Offsets */
.container
.offset-by-one
{
padding-left
:
48px
;
}
.container
.offset-by-two
{
padding-left
:
96px
;
}
.container
.offset-by-three
{
padding-left
:
144px
;
}
.container
.offset-by-four
{
padding-left
:
192px
;
}
.container
.offset-by-five
{
padding-left
:
240px
;
}
.container
.offset-by-six
{
padding-left
:
288px
;
}
.container
.offset-by-seven
{
padding-left
:
336px
;
}
.container
.offset-by-eight
{
padding-left
:
384px
;
}
.container
.offset-by-nine
{
padding-left
:
432px
;
}
.container
.offset-by-ten
{
padding-left
:
480px
;
}
.container
.offset-by-eleven
{
padding-left
:
528px
;
}
.container
.offset-by-twelve
{
padding-left
:
576px
;
}
.container
.offset-by-thirteen
{
padding-left
:
624px
;
}
.container
.offset-by-fourteen
{
padding-left
:
672px
;
}
.container
.offset-by-fifteen
{
padding-left
:
720px
;
}
}
/* #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media
only
screen
and
(
max-width
:
767px
)
{
.container
{
width
:
300px
;
}
.container
.columns
,
.container
.column
{
margin
:
0
;
}
.container
.one.column
,
.container
.one.columns
,
.container
.two.columns
,
.container
.three.columns
,
.container
.four.columns
,
.container
.five.columns
,
.container
.six.columns
,
.container
.seven.columns
,
.container
.eight.columns
,
.container
.nine.columns
,
.container
.ten.columns
,
.container
.eleven.columns
,
.container
.twelve.columns
,
.container
.thirteen.columns
,
.container
.fourteen.columns
,
.container
.fifteen.columns
,
.container
.sixteen.columns
,
.container
.one-third.column
,
.container
.two-thirds.column
{
width
:
300px
;
}
/* Offsets */
.container
.offset-by-one
,
.container
.offset-by-two
,
.container
.offset-by-three
,
.container
.offset-by-four
,
.container
.offset-by-five
,
.container
.offset-by-six
,
.container
.offset-by-seven
,
.container
.offset-by-eight
,
.container
.offset-by-nine
,
.container
.offset-by-ten
,
.container
.offset-by-eleven
,
.container
.offset-by-twelve
,
.container
.offset-by-thirteen
,
.container
.offset-by-fourteen
,
.container
.offset-by-fifteen
{
padding-left
:
0
;
}
}
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media
only
screen
and
(
min-width
:
480px
)
and
(
max-width
:
767px
)
{
.container
{
width
:
420px
;
}
.container
.columns
,
.container
.column
{
margin
:
0
;
}
.container
.one.column
,
.container
.one.columns
,
.container
.two.columns
,
.container
.three.columns
,
.container
.four.columns
,
.container
.five.columns
,
.container
.six.columns
,
.container
.seven.columns
,
.container
.eight.columns
,
.container
.nine.columns
,
.container
.ten.columns
,
.container
.eleven.columns
,
.container
.twelve.columns
,
.container
.thirteen.columns
,
.container
.fourteen.columns
,
.container
.fifteen.columns
,
.container
.sixteen.columns
,
.container
.one-third.column
,
.container
.two-thirds.column
{
width
:
420px
;
}
}
/* #Clearing
================================================== */
/* Self Clearing Goodness */
.container
:after
{
content
:
"\0020"
;
display
:
block
;
height
:
0
;
clear
:
both
;
visibility
:
hidden
;
}
/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */
.clearfix
:before
,
.clearfix
:after
,
.row
:before
,
.row
:after
{
content
:
'\0020'
;
display
:
block
;
overflow
:
hidden
;
visibility
:
hidden
;
width
:
0
;
height
:
0
;
}
.row
:after
,
.clearfix
:after
{
clear
:
both
;
}
.row
,
.clearfix
{
zoom
:
1
;
}
/* You can also use a <br class="clear" /> to clear columns */
.clear
{
clear
:
both
;
display
:
block
;
overflow
:
hidden
;
visibility
:
hidden
;
width
:
0
;
height
:
0
;
}
dream/platform/static/index.html
View file @
8d4c31ed
...
...
@@ -3,23 +3,37 @@
<head>
<title>
Dream Simulation
</title>
<link
rel=
"stylesheet"
href=
"css/base.css"
>
<link
rel=
"stylesheet"
href=
"css/skeleton.css"
>
<link
rel=
"stylesheet"
href=
"css/layout.css"
>
<link
rel=
"stylesheet"
href=
"css/demo-new.css"
>
<link
rel=
"stylesheet"
href=
"css/flowchartDemo.css"
>
<link
rel=
"stylesheet"
href=
"css/jquery-ui.css"
>
<link
rel=
"stylesheet"
href=
"css/jsoneditor.css"
>
</head>
<body
data-demo-id=
"flowchartConnectorsDemo"
data-library=
"jquery"
>
<div
class=
"container"
>
<div
id=
"headerWrapper"
>
<div
id=
"header"
></div>
</div>
<div
class=
"four columns"
>
<div
id=
"tools"
>
Tools
<h4>
Tools
</h4>
</div>
</div>
<div
class=
"twelve columns"
>
<div
id=
"main"
>
<div
id=
"render"
></div>
</div>
</div>
</div>
<div
class=
"container"
>
<div
class=
"four columns"
>
<div
id=
"simulation_controls"
>
Simulation Parameters
<h4>
Simulation Parameters
</h4>
<div
title=
"Configure"
>
<form>
<fieldset
id=
"general-fieldset"
>
...
...
@@ -29,34 +43,30 @@
</form>
</div>
</div>
<div
id=
"main"
>
<div
id=
"render"
></div>
</div>
<div
class=
"twelve columns"
>
<div
id=
"graph_zone"
>
<div>
Stations Utilization
</div>
<div
id=
"graph"
></div>
</div>
<div
id=
"sidebar"
>
<table>
<tr>
<td>
Input
</td>
<td>
Result
</td>
</tr>
<tr>
<td>
<textarea
rows=
"20"
cols=
"47"
id=
"json_output"
style=
"align:left"
>
</textarea>
</td>
<td>
<textarea
rows=
"20"
cols=
"47"
id=
"json_result"
style=
"align:right"
>
</textarea>
</td>
</table>
<div
id=
"debug"
>
<div
class=
"five columns"
>
<div>
Input
</div>
<textarea
rows=
"20"
cols=
"47"
id=
"json_output"
style=
"align:left; width:100%"
>
</textarea>
</div>
</div>
<div
class=
"five columns"
>
<div>
Result
</div>
<textarea
rows=
"20"
cols=
"47"
id=
"json_result"
style=
"align:left; width:100%"
>
</textarea>
<td></td>
</div>
</div>
</div>
</div>
<!-- DEP -->
<script
type=
"text/javascript"
src=
"lib/jquery-1.8.1-min.js"
></script>
...
...
@@ -85,6 +95,7 @@
<script
type=
"text/javascript"
src=
"src/dream.js"
></script>
<script
type=
"text/javascript"
src=
"src/jsonPlumb.js"
></script>
<script
type=
"text/javascript"
src=
"src/dream_launcher.js"
></script>
</div>
</body>
</html>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment