Browser Interface Development

Discussion in 'Wing Commander TacOps' started by Wedge009, Oct 14, 2011.

  1. Wedge009

    Wedge009 Rogue Leader

    Messages:
    10,088
    Likes Received:
    41
    Trophy Points:
    69,385
    Gender:
    Male
    Location:
    Sydney, Australia
    Progress report:
    • Limit use of Microsoft's weird filter stuff to IE8 and older and restored the rotation for the Details/Hide tab. Folks with access to IE9: can you let me know the orientation of the Details/Hide tab on the ship pop-up windows, please? I have a feeling it still might not be quite right yet.
    • Removed Gecko-specific code for curved corners - Gecko has been supporting the proper CSS3 properties since version 2.0 (Firefox 4).
    • Presto now supports linear-gradients (since version Opera 11.10)! I'm rather pleased with this one as it's quite noticeable, even if it doesn't seem as though anyone here uses Opera on a regular basis.
    • Removed the multi-column code for the Intercepted Communications tab as it's not even used and actually causes issues in Presto.
    Before I forget: the new timing report for the ships not submitted section (Intercepted Communications tab) - it looks rather ugly with all the place-holder text if the user is not logged in. Will that be tidied up at some point? I know it's trivial, but it produces a really long line of text...
     
  2. Avacar

    Avacar Vice Admiral

    Messages:
    743
    Likes Received:
    3
    Trophy Points:
    28,135
    This falls under the 'bug' category so I'll focus on it immediately. That said, I don't see it... wait I know what happened. I fixed this yesterday, so the /avacar branch doesn't show this, but it looks like I didn't commit it to the server, so I'm guessing your /Wedge branch doesn't have the fix. Committed.

    Also, I've ported your changes to the /Avacar area so everyone should see the benefit of the new CSS.
     
  3. Wedge009

    Wedge009 Rogue Leader

    Messages:
    10,088
    Likes Received:
    41
    Trophy Points:
    69,385
    Gender:
    Male
    Location:
    Sydney, Australia
    Okay, I went through the main CSS and tidied things as best I could, but I didn't see anything glaringly wrong with regards to font sizes.

    Aside from that, I think the biggest problem we have in terms of text presentation is the ships/missile pop-up windows, so I focused on those and left everything else as they are. I picked a couple of open fonts that are slim (to avoiding the issue of wide text pushing the second column of the ship pop-up window out of its box) and used those to redesign the pop-up windows. They seem to be consistent across all browsers (that support @font-face) and platforms now. Let me know if the text is too small/difficult to read. There is also a possibility that a ship with a heavy weapons load-out (multiple guns and missiles) will still have its parts list spill out of the box. In Game 5, I used Zombie as an example of a full ship window.

    Please check the results on my copy of the game and let me know of any suggestions/complaints/constructive criticism you have. I'm really tired now... time for sleep.

    Edit:
    I had the thread open already, so I didn't see your reply till after I wrote this one. Uploaded the fix to my working copy.
     
  4. Avacar

    Avacar Vice Admiral

    Messages:
    743
    Likes Received:
    3
    Trophy Points:
    28,135
    While adding the new popup-closing 'X', I may have found a hint of what is going on with the windows jumping all over. The 'X' is an anchor tag, and I set the href='#' which is a fairly standard "this link goes nowhere" command. That said, when clicked, my X's would jump the browser window to the top-left corner. I swapped '#' for 'Javascript:void()' and it now behaves more as I'd expect. I wonder if the jqueryUI buttons are suffering from the same problem, and if there is anything we could do to fix them if they are...
     
  5. Wedge009

    Wedge009 Rogue Leader

    Messages:
    10,088
    Likes Received:
    41
    Trophy Points:
    69,385
    Gender:
    Male
    Location:
    Sydney, Australia
    It's an interesting connection... I don't have a thorough understanding of how you've set up the jquery dialogues, and I don't see any hashes being used... it's a starting point, though.

    Regarding the X-close button, the rest of the pop-up behaviour remains unchanged. I suppose that's fine, though I did notice that after using the X to close the pop-up, I couldn't bring back the pop-up without reloading the page. Is this something you noticed? This happens with Trident, Gecko and WebKit, so presumably it's not browser-dependent.
     
  6. Jason_Ryock

    Jason_Ryock Vice Admiral

    Messages:
    1,385
    Likes Received:
    1
    Trophy Points:
    33,635
    Location:
    California, USA
    Are you guys calling:

    .click(function() { return false; });

    on the jQuery UI Buttons to make sure the links don't propagate? I usually set up my lines something like this:

    $( ".button" ).button();
    $( ".button" ).click(function() { return false; });

    So that I can use a CSS class to specify what I want to appear as a button and what I don't, but the second line is just as important to prevent the default behavior of the line-as-a-button.
     
  7. Humungus

    Humungus Spaceman

    Messages:
    97
    Likes Received:
    0
    Trophy Points:
    50
    Location:
    Czech Republic
    Repost from game thread:

    I think we can probably rule out the browser dependancy.
     
  8. Avacar

    Avacar Vice Admiral

    Messages:
    743
    Likes Received:
    3
    Trophy Points:
    28,135
    this was fixed just now. Humungus also posted in Game 5 thread, noticed it there first.
    Aha. An excellent question. I'll have to go through *every* button to make sure they're returning false. Many of them already do have click functions, but I will have to check what the return value is.

    edit: just tried this. The page still jumps, and the .click() function seems to overwrite the utility of the .change() function, meaning the buttons are now non-functional, and still jump the page around. (It should be noted that I was testing it on a buttonified checkbox).
     
  9. Jason_Ryock

    Jason_Ryock Vice Admiral

    Messages:
    1,385
    Likes Received:
    1
    Trophy Points:
    33,635
    Location:
    California, USA
    I'm slightly concerned about this, I'm not sure you're understanding the power of selectors and how you can make much of jQuery do the hard work for you.

    Do you mean to say that for every button on the website you have a different line of code making it a button?

    Because you should be creating a CSS class (it doesn't even have to have anything in it) and applying it to everything that you want to be a button, and then just controlling the button behavior independently in it's own script. This way when you have to make bulk changes to the button it largely takes the work away.

    Well maybe that's premature. Are you using the jQuery UI as well, or just straight up jQuery?
     
  10. Wedge009

    Wedge009 Rogue Leader

    Messages:
    10,088
    Likes Received:
    41
    Trophy Points:
    69,385
    Gender:
    Male
    Location:
    Sydney, Australia
    I think it's jqueryui and I think Avacar's using button() for everywhere that's a button. Maybe that's partly the issue: I'm okay at CSS, Av is good at scripting, but it looks like no-one is really proficient at both. I did make a button using pure CSS at one point... so it's possible we may already have a common CSS class across all buttons. If Avacar is going to review all the buttons anyway, this might be something to look through as well.

    Edit: BTW, is the Subversion repository down, Avacar?
     
  11. Avacar

    Avacar Vice Admiral

    Messages:
    743
    Likes Received:
    3
    Trophy Points:
    28,135
    I am using JQueryUI as well as JQuery. I don't have a global button class, but I'm also not just outright button-ifying everything I want to be a button. Cases where I expect similar behaviour, I'm turning it into a button using css selectors based on that behaviour. I don't think the button-to-line-of-code ratio is 1:1, but it is probably something like 1:3.... you're right, I could have just done as you suggest to do it more efficiently using a single button class, and a second class for buttonsets... although this would need to be repeated a few times for the buttons generated inside ajax-loaded sub-pages that get generated post initial page load.

    I'm sure I've not done it in the most efficient way, but at least it is functional. The problem seems to be the wide websites. Upon clicking, we're jumping all the way left. This was likely still happening with the 'normal' width versions and just not visible.

    When I added the .click() definition to the buttons this somehow invalidated the specific-to-each-button .change() function I had (in this case I had buttonified checkboxes, so 'change' was what I needed as a jquery event). Upon clicking, the actions of the change function wouldn't trigger.

    I'd be happy to give you access to the source code if you want to take a look. I just can't promise it is pretty. I've got PHP that outputs on-the-fly html, css, and jquery in some places. (Don't worry I try to keep it as statically coded as I can for most of it).
     
  12. QuailPilot

    QuailPilot Spaceman

    Messages:
    818
    Likes Received:
    2
    Trophy Points:
    50
    Gender:
    Male
    Location:
    TSGS Wolfenstien
    When I logged out I got this:


    Warning: mysql_num_rows() expects parameter 1 to be resource, boolean given in /home/agespast/www/www/avacar/phase5/widgets/logout.php on line 13
    0Logout Failed
     
  13. Wedge009

    Wedge009 Rogue Leader

    Messages:
    10,088
    Likes Received:
    41
    Trophy Points:
    69,385
    Gender:
    Male
    Location:
    Sydney, Australia
    Sounds like a database connection issue to me. Either that, or Avacar's made some changes that isn't committed to the repository yet.
     
  14. Avacar

    Avacar Vice Admiral

    Messages:
    743
    Likes Received:
    3
    Trophy Points:
    28,135
    I agree, this is database related. There are no uncommitted changes, however I did put in those cookie settings about a week ago that did involve changing some of the logout script.

    Is this repeatable? does it happen every time, or just once? Can everyone try logging in and out a few times and see if it is consistent?
     
  15. Jason_Ryock

    Jason_Ryock Vice Admiral

    Messages:
    1,385
    Likes Received:
    1
    Trophy Points:
    33,635
    Location:
    California, USA
    I wouldn't mind taking a look, I do this all day long (at work and at home, I'm a code monkey and I love it) but I don't want to step on anyones toes. Isn't Wedge already looking into the UI and CSS stuff for you?
     
  16. Wedge009

    Wedge009 Rogue Leader

    Messages:
    10,088
    Likes Received:
    41
    Trophy Points:
    69,385
    Gender:
    Male
    Location:
    Sydney, Australia
    It sounds as though you have far more experience than I do, I sort of got roped in when I pointed out things that wouldn't work very well across different layout engines. All I've really done is do multi-browser testing and keep a watch out for things that can break in CSS - my contributions have been minimal. I try to leave code comments explaining why I've changed something when I do, and we discuss what changes we've made in the threads here.

    So basically, I don't think Avacar would turn down your offer to help. Send him a private message and he can get you set-up with credentials for the Subversion repository and web server.
     
  17. Jason_Ryock

    Jason_Ryock Vice Admiral

    Messages:
    1,385
    Likes Received:
    1
    Trophy Points:
    33,635
    Location:
    California, USA
    Okay, sounds good. I do this stuff for a living (I have a good cushy job right now doing some contract work on some internal apps that's almost entirely jQuery and javascript related).

    This is a good project, I would love to give you guys some help.
     
  18. Wedge009

    Wedge009 Rogue Leader

    Messages:
    10,088
    Likes Received:
    41
    Trophy Points:
    69,385
    Gender:
    Male
    Location:
    Sydney, Australia
    Just a thought as I was looking at the capital ship game: I wonder if it's worth putting a link to the home page in the menu bar somewhere? Just a simple link under Site Navigation, or something like that, that could possibly be extended should the need arise. That way, it would be easy to go back and select another game if playing/observing multiple games being playing simultaneously.

    I couldn't find where the charging_combatweapon_dialog style class appears, but that's because we're not in a Combat Phase for that game. Everything else looks okay to me so far. Sorry if this has already been mentioned elsewhere, but I haven't been keeping up with the discussions lately.
     
  19. Avacar

    Avacar Vice Admiral

    Messages:
    743
    Likes Received:
    3
    Trophy Points:
    28,135
    Thanks for looking at it Wedge. That particular class only shows up within the combat phase firing window; I'll need to un-stick the game so that it continues for you to see its implementation. (see combat_preengine.php lines 519 and 534 as of revision 610).

    Good idea on the turn navigation; some point soon I plan to update the turn navigation widget so that you can also directly force a check of 'is the turn ready' when appropriate.
     
  20. Avacar

    Avacar Vice Admiral

    Messages:
    743
    Likes Received:
    3
    Trophy Points:
    28,135
    I'm not sure if this thread or the main coding thread was the best place for this. I've updated the stackup of primary divs. There is now an 'icon_layer' and 'popup_layer' div which act as containers for the indicators and popups, respectively. It seems to have had no effect on website functionality thus far, as I would have expected. The long-term reason for this is to allow me to 'turn off' and hide all popups/icons respectively as needed. This functionality is predicted to be needed for usage with the flak cannon firing interface and the eventual map editor.

    At the moment, there are no associated CSS changes; I can't see this mattering at all from an html point of view, but to make it happen did involve some slight restructuring of the page construction algorithms and to the indicator class and its sub-classes.
     

Share This Page