ada/code_examples_server
0
0
Fork 0
mirror of https://github.com/AdaCore/code_examples_server.git synced 2026-02-12 12:45:18 -08:00
Code Issues Packages Projects Releases Wiki Activity

Style using twitter bootstrap v3

Browse Source 
And put editors in nice tabs.
This commit is contained in:
Nicolas Setton
2017-09-03 13:57:20 -04:00
parent 26ec72a624
commit c8d2811f29
2 changed files with 43 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
compile_server/app/static/common.css
View File

@@ -1,5 +1,5 @@
.editor_container{
width: 60%;
div.editor_container{
height: 30em;
border: 1px solid #ddd;
border-top: 0px;
}

50
compile_server/app/templates/code_page.html
View File

@@ -6,14 +6,17 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Editor</title>
<link rel="stylesheet" href="{% static "common.css" %}" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="editor_area">
<div id="editor_area" class="container">
</div>
<script src="{% static "ace-builds/src/ace.js" %}" type="text/javascript" charset="utf-8"></script>
<script src="{% static "jquery-3.2.1.min.js" %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$( document ).ready(function() {
@@ -27,16 +30,46 @@
})
.done(function( json ) {
// On success, create editors for each of the resources
json.resources.forEach(function(resource){
// a title
$( "<h1>" ).text(resource.basename).appendTo($("#editor_area"));
// a container for an ACE editor
$( '<div class="editor_container" id="' + resource.basename + '"></div>'
).appendTo($("#editor_area"));
var ul = $( '<ul class="nav nav-tabs" role="tablist">' )
ul.appendTo($("#editor_area"));
var counter = 0;
json.resources.forEach(function(resource){
counter++;
var li = $( '<li role="presentation" class="'
+ (counter == 1 ? 'active' : '')
+ '">' ).appendTo(ul);
$('<a href="#tab_' + counter + '" aria-controls="tab_'
+ counter + '" '
+ 'id="tab_' + counter + '-tab"'
+ 'role="tab" data-toggle="tab">'
+ resource.basename + '</a>').appendTo(li)
})
var content = $( '<div class="tab-content">' )
content.appendTo($("#editor_area"));
counter = 0;
json.resources.forEach(function(resource){
counter++;
// a title
var div = $('<div role="tabpanel" class="tab-pane'
+ (counter == 1 ? ' active' : '')
+ '" id="tab_' + counter + '">');
var editordiv = $('<div class="editor_container" id="' + resource.basename + '_editor">');
editordiv.appendTo(div)
div.appendTo(content);
$('#' + "tab_" + counter + "-tab" + ' a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
// ACE editors...
var editor = ace.edit(resource.basename);
var editor = ace.edit(resource.basename + '_editor');
editor.session.setMode("ace/mode/ada");
// ... and their contents
@@ -44,7 +77,6 @@
// TODO: place the cursor at 1,1
})
})
.fail(function( xhr, status, errorThrown ) {
//