updates to tutorials, header, text editor

This commit is contained in:
Scott O'Hara 2013-07-13 22:54:40 -04:00
parent 3413b0b593
commit 55f33ab940
3 changed files with 127 additions and 109 deletions

View file

@ -1,7 +1,7 @@
<header class="header-Base"> <header class="header-Base">
<nav class="header-Nav clearfix" role="navigation"> <nav class="header-Nav clearfix" role="navigation">
<a href="#!" title="show small screen nav" class="small-Nav"> <a href="#!" title="show small screen nav" class="small-Nav">
<img src="assets/img/nav-Icon.png" alt="navigation icon" /> <img src="/assets/img/nav-Icon.png" alt="navigation icon" />
</a> </a>
<ul class="h-Nav constant-Nav"> <ul class="h-Nav constant-Nav">
<li> <li>

View file

@ -6,116 +6,121 @@ css:
bottom: 0; bottom: 0;
left: 0; left: 0;
} }
.theme-Code{
float:right;
margin-top:20px;
}
.row .page
.span6 .content-Base
font style="font-size: 27pt" Editing #{params[:filename]}
.span6 h2 Editing #{params[:filename]}
span.pull-right
div.theme-Code
| Theme: | Theme:
select id="theme" size="1" onchange="setTheme();" onkeyup="setTheme();" select id="theme" size="1" onchange="setTheme();" onkeyup="setTheme();"
optgroup label="Bright" optgroup label="Bright"
option value="ace/theme/chrome" Chrome option value="ace/theme/chrome" Chrome
option value="ace/theme/clouds" Clouds option value="ace/theme/clouds" Clouds
option value="ace/theme/crimson_editor" Crimson Editor option value="ace/theme/crimson_editor" Crimson Editor
option value="ace/theme/dawn" Dawn option value="ace/theme/dawn" Dawn
option value="ace/theme/dreamweaver" Dreamweaver option value="ace/theme/dreamweaver" Dreamweaver
option value="ace/theme/eclipse" Eclipse option value="ace/theme/eclipse" Eclipse
option value="ace/theme/github" GitHub option value="ace/theme/github" GitHub
option value="ace/theme/solarized_light" Solarized Light option value="ace/theme/solarized_light" Solarized Light
option value="ace/theme/textmate" TextMate option value="ace/theme/textmate" TextMate
option value="ace/theme/tomorrow" Tomorrow option value="ace/theme/tomorrow" Tomorrow
option value="ace/theme/xcode" XCode option value="ace/theme/xcode" XCode
optgroup label="Dark" optgroup label="Dark"
option value="ace/theme/ambiance" Ambiance option value="ace/theme/ambiance" Ambiance
option value="ace/theme/chaos" Chaos option value="ace/theme/chaos" Chaos
option value="ace/theme/clouds_midnight" Clouds Midnight option value="ace/theme/clouds_midnight" Clouds Midnight
option value="ace/theme/cobalt" Cobalt option value="ace/theme/cobalt" Cobalt
option value="ace/theme/idle_fingers" idleFingers option value="ace/theme/idle_fingers" idleFingers
option value="ace/theme/kr_theme" krTheme option value="ace/theme/kr_theme" krTheme
option value="ace/theme/merbivore" Merbivore option value="ace/theme/merbivore" Merbivore
option value="ace/theme/merbivore_soft" Merbivore Soft option value="ace/theme/merbivore_soft" Merbivore Soft
option value="ace/theme/mono_industrial" Mono Industrial option value="ace/theme/mono_industrial" Mono Industrial
option value="ace/theme/monokai" Monokai option value="ace/theme/monokai" Monokai
option value="ace/theme/pastel_on_dark" Pastel on dark option value="ace/theme/pastel_on_dark" Pastel on dark
option value="ace/theme/solarized_dark" selected="selected" Solarized Dark option value="ace/theme/solarized_dark" selected="selected" Solarized Dark
option value="ace/theme/terminal" Terminal option value="ace/theme/terminal" Terminal
option value="ace/theme/tomorrow_night" Tomorrow Night option value="ace/theme/tomorrow_night" Tomorrow Night
option value="ace/theme/tomorrow_night_blue" Tomorrow Night Blue option value="ace/theme/tomorrow_night_blue" Tomorrow Night Blue
option value="ace/theme/tomorrow_night_bright" Tomorrow Night Bright option value="ace/theme/tomorrow_night_bright" Tomorrow Night Bright
option value="ace/theme/tomorrow_night_eighties" Tomorrow Night 80s option value="ace/theme/tomorrow_night_eighties" Tomorrow Night 80s
option value="ace/theme/twilight" Twilight option value="ace/theme/twilight" Twilight
option value="ace/theme/vibrant_ink" Vibrant Ink option value="ace/theme/vibrant_ink" Vibrant Ink
.row .row
.span12 .span12
div id="editor" style="width: 100%; height: 600px; position: relative;" div id="editor" style="width: 100%; height: 600px; position: relative;"
#{@file_data} #{@file_data}
.row .row
.col.col-33.txt-Center .col.col-33.txt-Center
a.btn-Action href="/dashboard" <i class="icon-remove"></i>&nbsp;&nbsp;Finish Without Saving a.btn-Action href="/dashboard" <i class="icon-remove"></i>&nbsp;&nbsp;Finish Without Saving
.col.col-33.txt-Center .col.col-33.txt-Center
a.btn-Action href="#" onclick="saveTextFile(false); return false" <i class="icon-save"></i>&nbsp;&nbsp;Save Changes a.btn-Action href="#" onclick="saveTextFile(false); return false" <i class="icon-save"></i>&nbsp;&nbsp;Save Changes
.col.col-33.txt-Center .col.col-33.txt-Center
a.btn-Action href="#" onclick="saveTextFile(true); return false" <i class="icon-save"></i>&nbsp;&nbsp;Save and Finish a.btn-Action href="#" onclick="saveTextFile(true); return false" <i class="icon-save"></i>&nbsp;&nbsp;Save and Finish
.row style="margin-top: 20px" .row style="margin-top: 20px"
.span6.offset3.text-center .span6.offset3.text-center
div id="editorUpdates" class="alert alert-success hidden" div id="editorUpdates" class="alert alert-success hidden"
span span
script src="/js/ace/ace.js" type="text/javascript" charset="utf-8" script src="/js/ace/ace.js" type="text/javascript" charset="utf-8"
javascript: javascript:
function setTheme(name) { function setTheme(name) {
editor.setTheme($('#theme').val()); editor.setTheme($('#theme').val());
}
function saveTextFile(quit) {
/*
$.post('/site_files/save/#{params[:filename]}', editor.getValue(), function(resp) {
if(resp == 'ok') {
$('#editorUpdates span').text('Your file has been saved.');
$('#editorUpdates').removeClass('hidden');
} }
});
*/
$.ajax({ function saveTextFile(quit) {
url: '/site_files/save/#{params[:filename]}', /*
data: editor.getValue(), $.post('/site_files/save/#{params[:filename]}', editor.getValue(), function(resp) {
processData: false, if(resp == 'ok') {
contentType: false, $('#editorUpdates span').text('Your file has been saved.');
type: 'POST', $('#editorUpdates').removeClass('hidden');
success: function(response){
if(response == 'ok') {
if(quit === true) {
window.location = '/dashboard';
} }
$('#editorUpdates span').html('<i class="icon-save icon-2x"></i>&nbsp;&nbsp;<font style="font-size: 14pt">Your file has been saved.</font>'); });
setTimeout(function() { */
$('#editorUpdates').fadeOut(); //.addClass('hidden');
}, 2000);
} else { $.ajax({
$('#editorUpdates span').text(response); url: '/site_files/save/#{params[:filename]}',
} data: editor.getValue(),
$('#editorUpdates').fadeIn(); processData: false,
$('#editorUpdates').removeClass('hidden'); contentType: false,
type: 'POST',
success: function(response){
if(response == 'ok') {
if(quit === true) {
window.location = '/dashboard';
}
$('#editorUpdates span').html('<i class="icon-save icon-2x"></i>&nbsp;&nbsp;<font style="font-size: 14pt">Your file has been saved.</font>');
setTimeout(function() {
$('#editorUpdates').fadeOut(); //.addClass('hidden');
}, 2000);
} else {
$('#editorUpdates span').text(response);
}
$('#editorUpdates').fadeIn();
$('#editorUpdates').removeClass('hidden');
}
});
} }
});
}
var editor = {}; var editor = {};
$(document).ready(function() { $(document).ready(function() {
editor = ace.edit("editor"); editor = ace.edit("editor");
setTheme(); setTheme();
editor.getSession().setMode("ace/mode/html"); editor.getSession().setMode("ace/mode/html");
editor.getSession().setTabSize(2); editor.getSession().setTabSize(2);
editor.setFontSize(14); editor.setFontSize(14);
editor.setShowPrintMargin(false); editor.setShowPrintMargin(false);
}); });

View file

@ -27,4 +27,17 @@
</li> </li>
</ul> </ul>
<h3>CSS Frameworks</h3>
<ul>
<li>
<a href="https://github.com/bleachedgraphics/Brass-Tacks" title="Brass Tacks (currently in Alpha. More updates to come)" target="_blank">Brass Tacks</a>
</li>
<li>
<a href="http://twitter.github.io/bootstrap/" title="Boot Straps" target="_blank">Twitter Bootstraps</a>
</li>
<li>
<a href="http://purecss.io/" title="Yahoo!'s Pure CSS">Pure</a>
</li>
</ul>
</div> <!-- end .content --> </div> <!-- end .content -->