Better behaviour of the settings dialog on low-width devices
Navigation and content also now scroll independently from each other. Compare #823.
This commit is contained in:
Gina Häußge
parent
dd3455d598
commit
41c10a759a
7 changed files with 93 additions and 54 deletions
|
|
@ -113,6 +113,8 @@
|
|||
attempting to connect to their printer on their Raspberry Pis, on which ``/dev/ttyAMA0`` is the OS's serial console
|
||||
by default). Added configuration of additional ports to the Serial Connection section in the Settings to make it easier
|
||||
for those people who do indeed have their printer connected to ``/dev/ttyAMA0``.
|
||||
* Better behaviour of the settings dialog on low-width devices, navigation and content also now scroll independently
|
||||
from each other (see also [#823](https://github.com/foosel/OctoPrint/pull/823))
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -160,11 +160,12 @@ $(function() {
|
|||
|
||||
self.show = function() {
|
||||
// show settings, ensure centered position
|
||||
self.settingsDialog.modal()
|
||||
.css({
|
||||
width: 'auto',
|
||||
'margin-left': function() { return -($(this).width() /2); }
|
||||
});
|
||||
self.settingsDialog.modal({
|
||||
minHeight: function() { return Math.max($.fn.modal.defaults.maxHeight() - 80, 250); }
|
||||
}).css({
|
||||
width: 'auto',
|
||||
'margin-left': function() { return -($(this).width() /2); }
|
||||
});
|
||||
|
||||
return false;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -102,7 +102,8 @@
|
|||
|
||||
layout: function () {
|
||||
var prop = this.options.height ? 'height' : 'max-height',
|
||||
value = this.options.height || this.options.maxHeight;
|
||||
value = this.options.height || this.options.maxHeight,
|
||||
minHeight = this.options.minHeight;
|
||||
|
||||
if (this.options.width){
|
||||
this.$element.css('width', this.options.width);
|
||||
|
|
@ -122,7 +123,8 @@
|
|||
|
||||
this.$element.find('.modal-body')
|
||||
.css('overflow', '')
|
||||
.css(prop, '');
|
||||
.css(prop, '')
|
||||
.css('min-height', '');
|
||||
|
||||
var modalOverflow = $(window).height() - 10 < this.$element.height();
|
||||
|
||||
|
|
@ -132,6 +134,11 @@
|
|||
.css(prop, value);
|
||||
}
|
||||
|
||||
if (minHeight) {
|
||||
this.$element.find('.modal-body')
|
||||
.css('min-height', minHeight);
|
||||
}
|
||||
|
||||
if (modalOverflow || this.options.modalOverflow) {
|
||||
this.$element
|
||||
.css('margin-top', 0)
|
||||
|
|
@ -339,6 +346,7 @@
|
|||
width: null,
|
||||
height: null,
|
||||
maxHeight: null,
|
||||
minHeight: null,
|
||||
modalOverflow: false,
|
||||
consumeTab: true,
|
||||
focusOn: null,
|
||||
|
|
|
|||
|
|
@ -660,6 +660,11 @@ ul.dropdown-menu li a {
|
|||
|
||||
/** Settings dialog */
|
||||
#settings_dialog {
|
||||
.modal-body {
|
||||
#settings_dialog_menu {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** Footer */
|
||||
|
|
@ -906,11 +911,31 @@ textarea.block {
|
|||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
.span4 {
|
||||
width: 25%;
|
||||
.modal.large {
|
||||
width: 975px;
|
||||
margin-left: -487px;
|
||||
}
|
||||
|
||||
.full-sized-box {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
padding: 15px;
|
||||
|
||||
.row-fluid {
|
||||
height: 100%;
|
||||
}
|
||||
.span8 {
|
||||
width: 65%;
|
||||
|
||||
@media (max-width: 979px) {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
.scrollable {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
|
@ -1,46 +1,49 @@
|
|||
<div id="settings_dialog" class="modal hide fade container" tabindex="-1" role="dialog" aria-labelledby="settings_dialog_label" aria-hidden="true">
|
||||
<div id="settings_dialog" class="modal hide fade large" tabindex="-1" role="dialog" aria-labelledby="settings_dialog_label" aria-hidden="true">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||||
<h3 id="settings_dialog_label">{{ _('OctoPrint Settings') }}</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="tabbable">
|
||||
<ul class="nav nav-list span4" id="settingsTabs">
|
||||
{% set mark_active = True %}
|
||||
{% for key in templates.settings.order %}
|
||||
{% set entry, data = templates.settings.entries[key] %}
|
||||
{% if data is none %}
|
||||
<li class="nav-header">{{ entry }}</li>
|
||||
{% else %}
|
||||
{% if "custom_bindings" not in data or data["custom_bindings"] %}<!-- ko allowBindings: false -->{% endif %}
|
||||
<li id="{{ data._div }}_link"
|
||||
{% if "data_bind" in data %}data-bind="{{ data.data_bind }}"{% endif %}
|
||||
class="{% if mark_active %}active{% set mark_active = False %}{% endif %} {% if "classes_link" in data %}{{ data.classes_link|join(' ') }}{% elif "classes" in data %}{{ data.classes|join(' ') }}{% endif %}"
|
||||
{% if "styles_link" in data %} style="{{ data.styles_link|join(', ') }}" {% elif "styles" in data %} style="{{ data.styles|join(', ') }}" {% endif %}
|
||||
>
|
||||
<a href="#{{ data._div }}" data-toggle="tab">{{ entry }}</a>
|
||||
</li>
|
||||
{% if "custom_bindings" not in data or data["custom_bindings"] %}<!-- /ko -->{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<div class="tab-content span8">
|
||||
{% set mark_active = True %}
|
||||
{% for key in templates.settings.order %}
|
||||
{% set entry, data = templates.settings.entries[key] %}
|
||||
{% if data is not none %}
|
||||
{% if "custom_bindings" not in data or data["custom_bindings"] %}<!-- ko allowBindings: false -->{% endif %}
|
||||
<div id="{{ data._div }}"
|
||||
{% if "data_bind" in data %}data-bind="{{ data.data_bind }}"{% endif %}
|
||||
class="tab-pane {% if mark_active %}active{% set mark_active = False %}{% endif %} {% if classes_content in data %}{{ data.classes_content|join(' ') }}{% elif classes in data %}{{ data.classes|join(' ') }}{% endif %}"
|
||||
{% if "styles_content" in data %} style="{{ data.styles_content|join(', ') }}" {% elif styles in data %} style="{{ data.styles|join(', ') }}" {% endif %}
|
||||
>
|
||||
{% include data.template ignore missing %}
|
||||
</div>
|
||||
{% if "custom_bindings" not in data or data["custom_bindings"] %}<!-- /ko -->{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<div class="full-sized-box">
|
||||
<div class="tabbable row-fluid">
|
||||
<div class="span3 scrollable" id="settings_dialog_menu">
|
||||
<ul class="nav nav-list" id="settingsTabs">
|
||||
{% set mark_active = True %}
|
||||
{% for key in templates.settings.order %}
|
||||
{% set entry, data = templates.settings.entries[key] %}
|
||||
{% if data is none %}
|
||||
<li class="nav-header">{{ entry }}</li>
|
||||
{% else %}
|
||||
{% if "custom_bindings" not in data or data["custom_bindings"] %}<!-- ko allowBindings: false -->{% endif %}
|
||||
<li id="{{ data._div }}_link"
|
||||
{% if "data_bind" in data %}data-bind="{{ data.data_bind }}"{% endif %}
|
||||
class="{% if mark_active %}active{% set mark_active = False %}{% endif %} {% if "classes_link" in data %}{{ data.classes_link|join(' ') }}{% elif "classes" in data %}{{ data.classes|join(' ') }}{% endif %}"
|
||||
{% if "styles_link" in data %} style="{{ data.styles_link|join(', ') }}" {% elif "styles" in data %} style="{{ data.styles|join(', ') }}" {% endif %}
|
||||
>
|
||||
<a href="#{{ data._div }}" data-toggle="tab">{{ entry }}</a>
|
||||
</li>
|
||||
{% if "custom_bindings" not in data or data["custom_bindings"] %}<!-- /ko -->{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="tab-content span9 scrollable" id="settings_dialog_content">
|
||||
{% set mark_active = True %}
|
||||
{% for key in templates.settings.order %}
|
||||
{% set entry, data = templates.settings.entries[key] %}
|
||||
{% if data is not none %}
|
||||
{% if "custom_bindings" not in data or data["custom_bindings"] %}<!-- ko allowBindings: false -->{% endif %}
|
||||
<div id="{{ data._div }}"
|
||||
{% if "data_bind" in data %}data-bind="{{ data.data_bind }}"{% endif %}
|
||||
class="tab-pane {% if mark_active %}active{% set mark_active = False %}{% endif %} {% if classes_content in data %}{{ data.classes_content|join(' ') }}{% elif classes in data %}{{ data.classes|join(' ') }}{% endif %}"
|
||||
{% if "styles_content" in data %} style="{{ data.styles_content|join(', ') }}" {% elif styles in data %} style="{{ data.styles|join(', ') }}" {% endif %}
|
||||
>
|
||||
{% include data.template ignore missing %}
|
||||
</div>
|
||||
{% if "custom_bindings" not in data or data["custom_bindings"] %}<!-- /ko -->{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<form class="form-horizontal">
|
||||
<div class="row-fluid">
|
||||
<div class="offset3 span3"><h4>{{ _('Extruder') }}</h4></div>
|
||||
<div class="offset4 span3"><h4>{{ _('Extruder') }}</h4></div>
|
||||
<div class="span3"><h4>{{ _('Bed') }}</h4></div>
|
||||
</div>
|
||||
<div data-bind="foreach: temperature_profiles">
|
||||
<div class="row-fluid" style="margin-bottom: 5px">
|
||||
<div class="span3">
|
||||
<div class="span4">
|
||||
<input type="text" class="span12 text-right" data-bind="value: name">
|
||||
</div>
|
||||
<div class="input-append span3">
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="offset9 span2">
|
||||
<div class="offset10 span2">
|
||||
<a title="Add Profile" class="btn btn-primary" data-bind="click: addTemperatureProfile"><i class="icon-plus"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue