garrettmills/devbug
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

use editor_template for snippets

Browse Source
This commit is contained in:
Garrett Mills 2019-07-24 16:34:23 -05:00
parent 3e95e5beb4
commit 17793dfd7b
4 changed files with 103 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/assets/dash_v1.css
View File

@ -104,6 +104,12 @@ body {
background: #ccdddd; background: #ccdddd;
} }
.inject {
margin: 3px;
margin-left: 14px;
margin-top: 14px;
}
#title-header-content { #title-header-content {
padding: 14px; padding: 14px;
font-size: 20pt; font-size: 20pt;
@ -185,17 +191,14 @@ body {
} }
.iheader { .iheader {
background: tomato;
/* no flex rules, it will grow */ /* no flex rules, it will grow */
} }
.idiv { .idiv {
flex: 1; /* 1 and it will fill whole space left if no flex value are set to other children*/ flex: 1; /* 1 and it will fill whole space left if no flex value are set to other children*/
background: gold;
overflow: auto; overflow: auto;
} }
.ifooter { .ifooter {
background: lightgreen;
/*min-height: 60px; min-height has its purpose :) , unless you meant height*/ /*min-height: 60px; min-height has its purpose :) , unless you meant height*/
} }

4
app/views/dash_v1/editor_template.pug
View File

@ -12,8 +12,12 @@ html
#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" : "" )} | <i>Editor Mode</i> #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" : "" )} | <i>Editor Mode</i>
#title-header #title-header
#title-header-content-sm #{title ? title : 'DevBug Dashboard'} #title-header-content-sm #{title ? title : 'DevBug Dashboard'}
.iheader
block header
.idiv .idiv
block content block content
.ifooter
block footer
.ifooter .ifooter
ul#navbar ul#navbar
li li

9
app/views/dash_v1/snippet.pug
View File

@ -1,5 +1,6 @@
extends ./template extends ./editor_template
block content block header
.inject
if errors if errors
each error in errors each error in errors
p(style='color: red; font-weight: bold;') #{error} p(style='color: red; font-weight: bold;') #{error}
@ -82,10 +83,12 @@ block content
if snippet && user && is_owner && readonly if snippet && user && is_owner && readonly
a.btn(href='/dash/v1/snippet/share/'+snippet.id style='margin-left: 20px') Share Snippet a.btn(href='/dash/v1/snippet/share/'+snippet.id style='margin-left: 20px') Share Snippet
a.btn(href='/dash/v1/project/snippet/'+project.id+'/edit/'+snippet.uuid style='margin-left: 10px') Edit a.btn(href='/dash/v1/project/snippet/'+project.id+'/edit/'+snippet.uuid style='margin-left: 10px') Edit
block content
pre#editor #{ snippet ? snippet.data : '' } pre#editor #{ snippet ? snippet.data : '' }
input#preset_mode(type='hidden' value=snippet ? snippet.mode : 'ace/mode/javascript')
block footer
if (!readonly) if (!readonly)
button.btn(onclick='submitSnippet()') #{ snippet ? 'Update Snippet' : 'Create Snippet' } button.btn(onclick='submitSnippet()') #{ snippet ? 'Update Snippet' : 'Create Snippet' }
input#preset_mode(type='hidden' value=snippet ? snippet.mode : 'ace/mode/javascript')
block scripts block scripts
script(src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.5/ace.js") script(src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.5/ace.js")

6
app/views/dash_v1/use/main.pug
View File

@ -21,6 +21,12 @@ block content
a.btn(href='./api') DevBug API a.btn(href='./api') DevBug API
br br
h3 Changelog h3 Changelog
h4 v0.6.0 - UI Improvements!
ul
li New navigation theme with sticky navigation bar to make the display cleaner
li Separate "editor mode" layout for views using Ace.js
li Out viewer now uses editor mode.
h4 v0.5.1 - Use Ace.js for Outputs h4 v0.5.1 - Use Ace.js for Outputs
ul ul
li Switched over to use Ace.js to view development output. Might make this a user preference in the future. li Switched over to use Ace.js to view development output. Might make this a user preference in the future.