diff --git a/app/assets/dash_v1.css b/app/assets/dash_v1.css index a5d0afb..cc3f026 100644 --- a/app/assets/dash_v1.css +++ b/app/assets/dash_v1.css @@ -61,14 +61,27 @@ pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; } /*margin-right: 15px;*/ } +#editor-parent { + background: lightgray; + position: absolute; + width: 100%; + left: 0; + /*top: 0;*/ + margin: 0; + padding: 0; + height: 100%; +} + #editor { position: relative; top: 0; right: 0; bottom: 0; left: 0; - height: 50%; - min-height: 500px; + margin: 0; + padding: 0; + height: 100%; + /*min-height: 500px;*/ z-index: 0; } @@ -97,6 +110,13 @@ body { font-weight: bold; } +#title-header-content-sm { + padding: 5px; + padding-left: 14px; + font-size: 12pt; + font-weight: bold; +} + #pre-header-content { padding: 7px; padding-left: 14px; @@ -109,6 +129,7 @@ body { top: 0; left: 0; margin: 0; + z-index: 100; } #navbar a { @@ -121,6 +142,12 @@ body { transition: all 0.5s ease; } +.ifooter #navbar a { + padding: 3px; + padding-left: 14px; + padding-right: 14px; +} + #navbar { list-style-type: none; margin: 0; @@ -148,4 +175,27 @@ body { .sticky + .content { padding-top: 60px; +} + +.isection { + display: flex; + flex-flow: column; + /*height: 300px;*/ + height: 100%; +} + +.iheader { + background: tomato; + /* no flex rules, it will grow */ +} + +.idiv { + flex: 1; /* 1 and it will fill whole space left if no flex value are set to other children*/ + background: gold; + overflow: auto; +} + +.ifooter { + background: lightgreen; + /*min-height: 60px; min-height has its purpose :) , unless you meant height*/ } \ No newline at end of file diff --git a/app/views/dash_v1/editor_template.pug b/app/views/dash_v1/editor_template.pug new file mode 100644 index 0000000..9141bbc --- /dev/null +++ b/app/views/dash_v1/editor_template.pug @@ -0,0 +1,28 @@ +html + head + title #{(title ? title+' | DevBug' : 'DevBug Dashboard')} + link(rel='stylesheet' href='/assets/dash_v1.css') + block head + body + .editor-content + .isection + .iheader + #pre-header + - var e_project = (user && project && devbug.permission.project.sync_edit(project, user)) + #pre-header-content DevBug | v#{devbug.version} #{(user ? " | User: "+user.username : "")} #{(e_project ? " | Project: "+project.name+" | API: "+project.uuid : "")} #{((_flitter.config('server.environment') === 'development') ? " | Development" : "" )} | Editor Mode + #title-header + #title-header-content-sm #{title ? title : 'DevBug Dashboard'} + .idiv + block content + .ifooter + ul#navbar + li + a#navbar-home(href='/dash/v1') Home + li + a#navbar-usage(href='/dash/v1/using_devbug/main') Using DevBug + li.navbar-right + a#navbar-logout(href='/auth/logout') Logout + if show_back + li + a#navbar-back(href='javascript:window.history.back()') Back + block scripts \ No newline at end of file diff --git a/app/views/dash_v1/out.pug b/app/views/dash_v1/out.pug index 382b1d9..bfee98a 100644 --- a/app/views/dash_v1/out.pug +++ b/app/views/dash_v1/out.pug @@ -1,7 +1,6 @@ -extends ./template +extends ./editor_template block content - pre#editor(style="height: 75%;") #{prettyd} - script(src='/assets/dash_v1.js') + pre#editor #{prettyd} block scripts script(src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.5/ace.js")