recurring todo form trunked at the top

this is difficult to fix for 2.2. For 3.0 I'm redoing the gui and will try to support smaller viewports.

In the mean time, perhaps you could decrease font size? Ctrl-[minus] ?

Decreasing font is getting worse, :(

What's make it difficult to fix?
Is it not just CSS stuff?

recurring todo form trunked, with reduced font size.

The content of the dialog needs the current size. To make it smaller, we need to redesign the dialog. I tried to reduce the vertical size as much as possible.

I'm sure changing the CSS will make it better for you, but others will complain because of lack of white space

If you know your way around CSS, you could try to reduce the size of the main bar and use smaller font?

what if we set the overlay div to have this css which scrolls the CSS? The styling is coming inline from the html so we would have to figure out where it was coming from... It is not perfect, but would be better for laptops.

element.style {
position: absolute;
height: auto;
width: 750px;
top: 75px;
left: 296.5px;
display: block;
bottom: 0;
overflow: scroll;
}

I'll try it. Is the overflow attribute the essential change here or do are other attributes changes on purpose?

A scroll will be fine to reach the top of the form, for me.

html element modified:

DIV.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-front.ui-dialog-buttons.ui-draggable.ui-resizable

uniq selector:
div.ui-dialog:nth-child(5)

with the modified css copied for the css editor:

style="position: absolute; height: auto; width: 756.367px; top: 75px; left: 247px; display: block;"

changing a 75px from top (top: 75px; ) gave the expected result…

Interestingly now that I've access to the top, it's a movable form.

css edited top:75px; instead of top: 0px

LOL, ironic isn't it :-)

could you or Tim make a pull request? For 2.2 and master?

LOL, ironic isn't it :-)

could you or Tim make a pull request? For 2.2 and master?

sure, I don't known to do that, but I can try… :)

I've modified the css, a bit by luke, with firefox css editor.

now I've to grep the code to find the source file…
Could be made. :) but not right now, if you are faster than me, no problem, go for it.

I may try it during the week end.

The problem I saw was some of the CSS was coming inline with the HTML so if we just put it in the stylesheet, I think the inline will trump it. I suppose if we did an !important that would override it, but that doesn't seem like a good long term solution. I looked briefly but could not find what was generating it. Does it really need to be in an overlay? It seems like they end up being more of a pain than they are worth. Certainly not very responsive.

Not sure it is generated or not, but I've found:

sylvain@xubuntu-laptop:~/code/tracks-2.2.2$ grep -nr "ui-dialog" app/
app/assets/javascripts/tracks.js:984: click: function() { submit_with_ajax_and_block_element('form#recurring-todo-form-new-action', $(this).parents(".ui-dialog")); },
app/assets/javascripts/tracks.js:1017: click: function() { submit_with_ajax_and_block_element('form#recurring-todo-form-edit-action', $(this).parents(".ui-dialog")); }


and on lines:

./app/assets/javascripts/tracks.js:
975 /* setup dialog for new repeating action */
976 $( "#new-recurring-todo" ).dialog({
977 autoOpen: false,
978 height: 690,
979 width: 750,
980 modal: true,
981 buttons: {
982 create: {
983 text: i18n['common.create'],
984 click: function() { submit_with_ajax_and_block_element('form#re curring-todo-form-new-action', $(this).parents(".ui-dialog")); },
985 },
986 cancel: {
987 text: i18n['common.cancel'],
988 click: function() { $( this ).dialog( "close" ); }
989 }
990 },

it also repeats at line 1008, I don't know why…

RAILS_ENV=production bundle exec rake assets:precompile

does no change.

tracks-2.2.2$ grep -nr "new-recurring" app/
app/assets/javascripts/tracks.js:971: $(document).on("click","#add-new-recurring-todo", function(){
app/assets/javascripts/tracks.js:972: $( "#new-recurring-todo" ).dialog( "open" );
app/assets/javascripts/tracks.js:976: $( "#new-recurring-todo" ).dialog({
app/views/recurring_todos/index.html.erb:25: <a href='#' id="add-new-recurring-todo"><%= image_tag("add.png", {:alt => "[ADD]"})-%><%= t('todos.add_new_recurring') %></a>
app/views/recurring_todos/index.html.erb:29:<div id="new-recurring-todo" class="new-form" title="<%= t('todos.add_new_recurring') %>">
app/views/recurring_todos/create.js.erb:5: $( "#new-recurring-todo" ).dialog( "close" );

may I forgot caching or something but it doesn't move the form…

The inline styles are coming from the jqueryui dialog widget which is called from app/assets/javascripts/tracks.js starting on line 1011. The code here sets up the overlay dialog. I played with the height and width values and noticed that a big part of the problem was the black topbar menu z-index value being higher than the overlay's z-index. I think the jqueryui thinks it is supposed to be above everything so it is not accounting for the topbar correctly.

When I add to app/assets/stylesheets/tracks.css.scss :

.ui-front {
  z-index:502;
}

It fixes the issue on my laptop. I also think the height in the javascript could be lowered to 610 without being too small for the content in the box.

I can submit a pull request tomorrow with these changes, but would like someone else to test my changes. Don't forget to recompile your assets after you change either of these files.

This is the view I get with the z-index put above the topbar and the height lowered to 610.

Yes, seems to do the trick.

Scroll OK, movable ui OK, not a lot in the bottom direction, but seems not to block any behavior.

Does this css change impact some other widget?

Good question. Probably best to limit the CSS to this page by:

.recurring_todos .ui-front {
  z-index:502;
}

When I looked on my desktop, now it has scroll bars where I didn't before. Since it works for me on my laptop with just the CSS change, maybe we should leave the jqueryui dialog at a height of 690. Can you try it with just the CSS and see if it renders the overlay correctly?

I submitted a pull request with the CSS change: https://github.com/TracksApp/tracks/pull/214