From a73ada4c2d65970066641204221560e1ba3fc10e Mon Sep 17 00:00:00 2001 From: Lexxie9952 <32187224+Lexxie9952@users.noreply.github.com> Date: Tue, 2 Apr 2024 02:09:10 -0700 Subject: [PATCH] UI multipack update 1. Make city background tabs uniform to blend with city_tabs under it. 2. Resize worklist_control buttons under different screensizes to fit better. 3. Add tooltips to worklist_control buttons and City governor buttons 4. Remove now unnecessary "add to worklist" and "change production" buttons: Still two ways: Use modkey-click or worklist_control buttons now 5. Add more layout refinement for new non-mobile small screen size category 6. Worklist and production choices list scale better to different screen sizes and take up more available real estate. 7. Fix governor for non-mobile smaller screen sizes 8. For non-mobile smaller screen sizes, fix that the different city tab buttons were blocking out the display of the city's units. --- freeciv-web/src/main/webapp/css/civclient.css | 24 +- .../src/main/webapp/javascript/city.js | 214 +++++++++++++----- .../src/main/webapp/javascript/client_main.js | 97 ++++---- .../src/main/webapp/javascript/tracklist.js | 4 +- .../src/main/webapp/webclient/city.hbs | 2 + 5 files changed, 231 insertions(+), 110 deletions(-) diff --git a/freeciv-web/src/main/webapp/css/civclient.css b/freeciv-web/src/main/webapp/css/civclient.css index bb12914f4..d8160440c 100644 --- a/freeciv-web/src/main/webapp/css/civclient.css +++ b/freeciv-web/src/main/webapp/css/civclient.css @@ -682,10 +682,6 @@ input[type='number'] { overflow: auto; } -#city_overview_tab { - background-image: url('/images/bg-med-dark.jpg'); -} - .ui-dialog { border: 1px #432 solid; max-height: 100%; @@ -1493,9 +1489,9 @@ table.vet_level tr:nth-child(9) td { padding: 0; margin: 0; width: 80%; - height: 9%; - min-height: 1.2em; - max-height: 5em; + height: 8%; + min-height: 1.3em; + max-height: 4em; } #worklist_control .wc_spacer { @@ -1800,12 +1796,13 @@ body:not(.mobile) .ui-dialog.unit_dialog { top: -1px; } - +/* These were removed from city.hbs as they're redundant to others + and multiply layout issue complexities at different resolutions: #prod_buttons { float: right; clear: both; } - +*/ .wider-tooltip { max-width:800px; padding: 3px; @@ -2872,9 +2869,14 @@ input[type="email" i], #email { #city_foreigners { color: var(--default_text_color) !important; } -#city_production_tab { - background: url("/images/bg-med-dark.jpg"); +#city_production_tab, +#city_governor_tab, +#city_happy_tab, +#city_traderoutes_tab, +#city_overview_tab { + background: url("/images/bg-dark.jpg"); } + #city_current_worklist { width: 100%; float: left; diff --git a/freeciv-web/src/main/webapp/javascript/city.js b/freeciv-web/src/main/webapp/javascript/city.js index 86b9b8319..0b2e38356 100644 --- a/freeciv-web/src/main/webapp/javascript/city.js +++ b/freeciv-web/src/main/webapp/javascript/city.js @@ -47,6 +47,7 @@ var prod_selection_city =null; // the city_id whose current production will be var worklist_dialog_active = false; var production_selection = []; var worklist_selection = []; +var prodlists_have_been_fitted = 0; // First time prodlist is viewed, it must be custom-fitted to screensize: it won't work if not being viewed. // User definable row in city list: ***************************** var city_user_row_val = 0; @@ -276,6 +277,13 @@ function city_force_income_update() function show_city_dialog(pcity) { const playerno = pcity.owner; + const is_small = is_small_screen(); + const not_large = not_large_screen(); + const is_medium = not_large && !is_small; + const is_large = !is_small && !is_medium; + const winwidth = $(window).width(); + const winheight = $(window).height(); + //console.log("show_city_dialog() called.") //console.log(" caller is " + show_city_dialog.caller.toString().substring(0,35)); var turns_to_complete; @@ -323,7 +331,7 @@ function show_city_dialog(pcity) var dialog_buttons = {}; - if (!is_small_screen() && !touch_device) { + if (!is_small && !touch_device) { dialog_buttons = $.extend(dialog_buttons, { "Previous city" : function() { @@ -369,7 +377,7 @@ function show_city_dialog(pcity) // CREATE THE TITLE AND THE SPECIALIST CONTROL PANE IN THE TITLE (for large screens) -------------------------------------- var city_dialog_title = "
" + decodeURIComponent(pcity['name']) + " (" + pcity['size'] + ")"; - if (!is_small_screen() && !client_is_observer() && client.conn.playing.playerno == pcity['owner'] && specialists != null && Object.keys(specialists) != null) { + if (!is_small && !client_is_observer() && client.conn.playing.playerno == pcity['owner'] && specialists != null && Object.keys(specialists) != null) { // Create specialist control pane in title bar. var num_specialists = Object.keys(specialists).length; if (client_rules_flag[CRF_ASMITH_SPECIALISTS]) { @@ -407,12 +415,21 @@ function show_city_dialog(pcity) } city_dialog_title += "
"; //---------------------------------------------------------------------------------------------------------------------- + const city_dialog_height = is_large ? $(window).height() - 80 + : $(window).height() + 10; + let city_dialog_width; + if (is_large) city_dialog_width = "80%"; + else if (is_small) city_dialog_width = "99%"; + else if (winwidth<1025 && winwidth>912) city_dialog_width = "912px"; + else if (winwidth<=912) city_dialog_width = "99%"; + else city_dialog_width = "80%"; + $("#city_dialog").dialog({ bgiframe: true, titleIsHtml: true, modal: false, - width: is_small_screen() ? "99%" : "80%", - height: is_small_screen() ? $(window).height() + 10 : $(window).height() - 80, + width: city_dialog_width, + height: city_dialog_height, close : close_city_dialog, buttons: dialog_buttons }).dialogExtend({ @@ -432,44 +449,86 @@ function show_city_dialog(pcity) $("#city_dialog").dialog('widget').children().css( {"margin-top":"20px", "padding":"0px", "visibility":"hidden"} ); */ // Fine tune mobile screen elements - if (is_small_screen()) { - // Next/Buy/Exit buttons more compact for Mobile - $("#city_dialog").dialog('widget').children().children().children().css( {"padding-top":"2px", "padding-bottom":"3px", - "padding-right":"6px", "padding-left":"6px", "margin-bottom":"3px", "margin-right":"0px" } ); - // If there is another way to put unicode in these buttons, let me know! But you'd still - // get problems with iPhone 5 and narrower screens auto-sizing elements to wrong size. - // We name these buttons here, after the buttons are resized and parent height is locked. - $("#city_dialog").next().children()[0].children[0].innerHTML = "⏪Last"; - $("#city_dialog").next().children()[0].children[1].innerHTML = "Next⏩" - $("#city_dialog").next().children()[0].children[2].innerHTML = "Buy"; - $("#city_dialog").next().children()[0].children[3].innerHTML = "Name"; - // Swipeleft Swiperight go to prev/next city: - /* TODO: when jquery.mobile.min.js is installed right, this will add swipe left/swipe right - for next/prev city. Just need to know how to install. ALSO, will be important to do the - .off() function when city dialog exited. - $("#city_dialog").next().children()[0].children[0].id="prev_city_button"; // give id to buttons so we can virtual click them - $("#city_dialog").next().children()[0].children[1].id="next_city_button"; // when we swipe left/right - $(document).on("swipeleft", "html", function(e) { console.log("SWIPE LEFT!!!") } ) - $(document).on("swiperight", "html", function(e) { console.log("SWIPE RIGHT!!!") } ) - */ - // City worked tiles map canvas, tight fit positioning - $("#city_canvas_top_div").css("padding", "0px"); - $("#city_canvas_top_div").css("margin", "0px"); - $("#city_canvas_top_div").css("width", "100%"); - $("#city_canvas_top_div").css("margin-left", "-5px"); - - $("#city_panel").css("padding", "0px") - $("#city_dialog").addClass("noscrollbars"); - $("#city_dialog").css("overflow-y", "hidden"); - $("#city_dialog").css("overflow-x", "hidden"); // let children overflow if needed but not the whole dialog - $("#city_dialog_info").css("width", "100%"); - $("#city_dialog_info").addClass("noscrollbars"); - $("#city_viewport").addClass("noscrollbars"); - $("#city_tabs_0").css("padding","0px"); - $("#city_dialog").css("margin-left", "-3px"); - } else { + if (!is_large) { + if (is_small) { + // Next/Buy/Exit buttons more compact for Mobile + $("#city_dialog").dialog('widget').children().children().children().css( {"padding-top":"2px", "padding-bottom":"3px", + "padding-right":"6px", "padding-left":"6px", "margin-bottom":"3px", "margin-right":"0px" } ); + // If there is another way to put unicode in these buttons, let me know! But you'd still + // get problems with iPhone 5 and narrower screens auto-sizing elements to wrong size. + // We name these buttons here, after the buttons are resized and parent height is locked. + $("#city_dialog").next().children()[0].children[0].innerHTML = "⏪Last"; + $("#city_dialog").next().children()[0].children[1].innerHTML = "Next⏩" + $("#city_dialog").next().children()[0].children[2].innerHTML = "Buy"; + $("#city_dialog").next().children()[0].children[3].innerHTML = "Name"; + // Swipeleft Swiperight go to prev/next city: + /* TODO: when jquery.mobile.min.js is installed right, this will add swipe left/swipe right + for next/prev city. Just need to know how to install. ALSO, will be important to do the + .off() function when city dialog exited. + $("#city_dialog").next().children()[0].children[0].id="prev_city_button"; // give id to buttons so we can virtual click them + $("#city_dialog").next().children()[0].children[1].id="next_city_button"; // when we swipe left/right + $(document).on("swipeleft", "html", function(e) { console.log("SWIPE LEFT!!!") } ) + $(document).on("swiperight", "html", function(e) { console.log("SWIPE RIGHT!!!") } ) + */ + // City worked tiles map canvas, tight fit positioning + $("#city_canvas_top_div").css("padding", "0px"); + $("#city_canvas_top_div").css("margin", "0px"); + $("#city_canvas_top_div").css("width", "100%"); + $("#city_canvas_top_div").css("margin-left", "-5px"); + + $("#city_panel").css("padding", "0px") + $("#city_dialog").addClass("noscrollbars"); + $("#city_dialog").css("overflow-y", "hidden"); + $("#city_dialog").css("overflow-x", "hidden"); // let children overflow if needed but not the whole dialog + $("#city_dialog_info").css("width", "100%"); + $("#city_dialog_info").addClass("noscrollbars"); + $("#city_viewport").addClass("noscrollbars"); + $("#city_tabs-0").css("padding","0px"); + $("#city_dialog").css("margin-left", "-3px"); + $(".ui-dialog .ui-dialog-title").css("font-size","125%"); // down from 140% default + } + else { // is_medium screen: e.g. 1366x768 laptops + // Shrinks a LOT of different components within the city dialog for tighter fit: + $("#city_dialog").dialog('widget').children().children().children().css( {"padding-top":"0px", "padding-bottom":"0px", + "padding-right":"0px", "padding-left":"0px", "margin-bottom":"0px", "margin-right":"0px" } ); + + $("#city_overview_tab").css({"padding-top":"0px", "padding-bottom":"0px", + "padding-right":"0px", "padding-left":"0px", "margin-bottom":"0px", "margin-right":"0px"}) + $("#city_canvas_top_div").css("padding", "0px"); + $("#city_canvas_top_div").css("margin", "0px"); + $("#city_canvas_top_div").css("width", "100%"); + $("#city_canvas_top_div").css("margin-left", "-5px"); + $("#city_panel").css("padding", "0px") + $("#city_tabs-0").css("padding","0px"); + const pheight = $("#city_tabs").parent().parent().height(); + $("#city_tabs").css("height",pheight); + $("worklist_control").css("padding-top","0px"); + $(".wc_spacer").css("height","2%"); + $(".ui-dialog .ui-dialog-title").css("font-size","115%"); // down from default 140%: vert.space at premium + /* At this point we have shrunken Previous/Next/Rename/Buy buttons which are suitable and necessary even for 1024px screen, but + unnecessarily small and mismatched out of place on >1280horiz screens: */ + if (winwidth>1270) { + // Button container, space efficient and positioned right: + $(".ui-dialog-buttonset").last().css({"padding-top":"0px", "padding-bottom":"0px", + "padding-right":"0px", "padding-left":"0px", "margin-top":"11px", "margin-right":"-8px" }); + // Buttons themselves: + $(".ui-dialog-buttonset").last().children().css({"padding-top":"4px", "padding-bottom":"4px", + "padding-right":"13px", "padding-left":"13px", "margin-bottom":"0px", "margin-right":"0px" }) + } else { // Medium screen with compromised <1280p horizontal: + // Buttons container + $(".ui-dialog-buttonset").last().css({"padding-top":"0px", "padding-bottom":"0px", + "padding-right":"0px", "padding-left":"0px", "margin-top":"11px", "margin-right":"-15px" }); + // Reduce font size on buttons by 1px + $(".ui-dialog-buttonset").last().children().css({"font-size":"14.5px" }); + // Heighten but don't widen button + $(".ui-dialog-buttonset").last().children().css({"padding-top":"4px", "padding-bottom":"4px"}); + } + } + } else { // is_large screen + // 16:10 screens of certain size tend to need some verticality on worklist_control buttons: + if (winheight<1050 && winwidth>1600) $(".wc_spacer").css("height","6.5%"); // align "Change Production" and "Add to Worklist" buttons with the wood panel and tab selector buttons to their left. - $("#prod_buttons").css({"margin-top": "39px", "margin-right": "2px"}); + //$("#prod_buttons").css({"margin-top": "39px", "margin-right": "2px"}); // these buttons were removed. if (!touch_device) { // Highlight keyboard shortcuts for large screens with keyboards (i.e. not touch device) $("#city_dialog").next().children().children().first().html("Previous City"); $("#city_dialog").next().children().children().first().next().html("Next City"); @@ -489,7 +548,7 @@ function show_city_dialog(pcity) $("#city_dialog").parent().focus(); /* prepare city dialog for small screens. */ - if (!is_small_screen()) { + if (!is_small) { $("#city_tabs-i").hide(); // "Inside" tab for units, not needed on large screen. $(".extra_tabs_small").remove(); // class identified for "Inside" tab for units, not needed on large screen. $("#mobile_cma_checkbox").remove(); @@ -525,11 +584,20 @@ function show_city_dialog(pcity) $("#ct4").html("Happy"); $("#cti").html("Inside"); $("#ctg").html("Gov"+(pcity.cma_enabled?"🔹":"")); $("#cma_allow_disorder").remove(); + if (is_medium) { // medium size screen e.g. 1366x768 + $("#city_overview_tab").css("height", ($("#city_overview_tab").parent().parent().height())) + } } $("#city_tabs").tabs({ active: city_tab_index}); - $(".citydlg_tabs").height(is_small_screen() ? $(window).height() - 110 : $(window).height() - 225); + if (is_medium) { + $(".citydlg_tabs").height($(window).height() - 120); + } else if (is_small) { + $(".citydlg_tabs").height($(window).height() - 110); + } else { // is_large + $(".citydlg_tabs").height($(window).height() - 225); + } city_worklist_dialog(pcity); $("#worklist_dialog_headline").unbind('click'); @@ -548,7 +616,7 @@ function show_city_dialog(pcity) if (orig_renderer == RENDERER_WEBGL) renderer = orig_renderer; - var pop_string = is_small_screen() ? city_population(pcity)+"K" : numberWithCommas(city_population(pcity)*1000); + var pop_string = is_small ? city_population(pcity)+"K" : numberWithCommas(city_population(pcity)*1000); var change_string = pcity['granary_turns'] < 0 ? "Starves in: " : "Growth in: "; $("#city_size").html("Population: "+ pop_string + "
" + "Size: " + pcity['size'] + "
" @@ -562,7 +630,7 @@ function show_city_dialog(pcity) prod_string += html_emoji_from_universal(prod_type['type']['name'])+" "; } prod_string += "" + (prod_type != null ? prod_type['type']['name']+"" : "None"); - if (is_small_screen() && prod_type != null && prod_type['type']['name'] != null && prod_type['type']['name'].length>16) + if (is_small && prod_type != null && prod_type['type']['name'] != null && prod_type['type']['name'].length>16) prod_string = "" + prod_string + ""; let prod_name = (prod_type != null ? prod_type['type']['name'] : ""); $("#city_production_overview").html(""+spacer+"Citizen nationality:"; if (pcity['nationalities_count']>0) { // foreigners present ! for (ethnicity in pcity['nation_id']) { @@ -1058,7 +1126,7 @@ function show_city_dialog(pcity) } foreigners_html+="" - $("#city_overview_tab").append(foreigners_html); + $("#city_improvements_panel").append(foreigners_html); } if ($("#city_improvements").parent().width() - $("#city_improvements").width() < 50) { @@ -1070,7 +1138,7 @@ function show_city_dialog(pcity) $("#city_improvements").css( {"padding-bottom":"0px"} ); } - if (is_small_screen()) { + if (is_small) { $(".ui-tabs-anchor").css("padding", "2px"); $("#city_panel_stats").css( {"width":"100%", "margin-top":"17px", "padding":"0px"} ); $("#city_panel_top").css( {"width":"100%"} ); @@ -1095,12 +1163,45 @@ function show_city_dialog(pcity) $("#dialog-extend-fixed-container").hide(); } // Either/OR, worked better on iPad: - if (is_small_screen() || touch_device) { + if (!is_large || touch_device) { // City tab buttons lock to bottom of screen in landscape: if(window.innerHeight < window.innerWidth) { $('#city_tabs').css( {"position":"static"} ); } } + if (!is_small) adjust_prodlist_sizes_to_screen(); +} + +/************************************************************************** + Currently not for mobile. For all other screen sizes, this function + does delicate fittings to get the worklist, prodlist, and worklist + control buttoms sized and positioned optimally. +**************************************************************************/ +function adjust_prodlist_sizes_to_screen() { + const winheight = $(window).height(); + var mp, mw, b; + + if (winheight<1025) {mp=10000; mw=10000; b=-7;} // 1280x1024,1600x1000 or x900,1366x768 etc. + else if (winheight<1081) {mp=54; mw=51; b=33;} // HD + else if (winheight<1601) {mp=50; mw=49; b=33;} // QHD 1600p + else if (winheight<2161) {mp=55; mw=38; b=32;} // UHD "4K" + else {mp=50; mw=49; b=33;} // "8K" + // ------------------------------------------------- + + // Worklist control buttons: + $("#worklist_control").css("padding","0"); + let prod_tab_height = $("#worklist_control").parent().height(); + $("#worklist_control").height(prod_tab_height); + // Worklist height + $("#worklist_right").height(prod_tab_height); + let prodlist_height = $("#worklist_right").height() - $("#tasks_heading").height() - b; + prodlist_height -= (winheight-656)/mp; // slack space needed grows proportional to winheight + $("#worklist_production_choices").css("height", prodlist_height); + // Production choices height + $("#worklist_left").height(prod_tab_height); + let worklist_height = $("#worklist_left").height() - $("#worklist_dialog_headline").height() - $("#worklist_heading").height() - b; + worklist_height -= (winheight-656)/mw; // slack space needed grows proportional to winheight + $("#city_current_worklist").css("height",worklist_height); } /************************************************************************** @@ -1166,6 +1267,8 @@ function city_rapture_text(rapture_status) { **************************************************************************/ function city_change_tab(tab_num) { city_tab_index = tab_num; + if (tab_num==1 && ++prodlists_have_been_fitted < 2) + setTimeout(adjust_prodlist_sizes_to_screen, 500); } /************************************************************************** @@ -2849,9 +2952,10 @@ function city_worklist_dialog(pcity) show: { delay:460, effect:"none", duration: 0 }, hide: {delay:50, effect:"none", duration: 0} }); + /* prod buttons removed if (is_touch_device()) { $("#prod_buttons").html("1st tap: change. Next taps: add. Tap-tap: clear"); - } + }*/ $(".button").button(); @@ -2901,6 +3005,12 @@ function city_worklist_dialog(pcity) worklist_items.dblclick(handle_current_worklist_direct_remove); update_worklist_actions(); + + $("#worklist_control").children().tooltip({ + show: { delay:200, effect:"none", duration: 0 }, hide: {delay:120, effect:"none", duration: 0} + }); + + adjust_prodlist_sizes_to_screen(); } /************************************************************************** @@ -3256,7 +3366,7 @@ function update_worklist_actions() } if (production_selection.length > 0) { - $("#prod_buttons").show(); + //$("#prod_buttons").show(); //prod buttons removed $("#city_add_to_worklist_btn").button("enable"); $("#city_worklist_insert_btn").button("enable"); $("#city_worklist_append_btn").button("enable"); @@ -3274,7 +3384,7 @@ function update_worklist_actions() } } else { - $("#prod_buttons").hide(); + //$("#prod_buttons").hide(); //prod buttons removed $("#city_add_to_worklist_btn").button("disable"); $("#city_worklist_insert_btn").button("disable"); $("#city_worklist_change_btn").button("disable"); diff --git a/freeciv-web/src/main/webapp/javascript/client_main.js b/freeciv-web/src/main/webapp/javascript/client_main.js index 0e0da470b..802b39f14 100644 --- a/freeciv-web/src/main/webapp/javascript/client_main.js +++ b/freeciv-web/src/main/webapp/javascript/client_main.js @@ -129,51 +129,58 @@ function setup_window_size () $("#cities_tab").show(); $("#freeciv_logo").show(); $("#tabs-hel").hide(); - - if (is_small_screen()) { - // Adjustments for mobile: spatial economy, fit - $("#turn_done_button").css({"padding-left":"7px", "padding-right":"7px", "padding-bottom":"8px"}); - $("#tabs_menu").css("margin-left","-3px"); - $(".ui-tabs-anchor").css("padding", "7px"); - $("#freeciv_logo").hide(); - // Remove text from tabs: icons only: - $("#map_tab").children().html(""); - $("#empire_tab").children().html(""); - $("#civ_tab").children().html(""); - $("#tech_tab").children().html(""); - $("#players_tab").children().html(""); - $("#cities_tab").children().html(""); - $("#opt_tab").children().html(""); - $("#hel_tab").children().html(""); - $("#warcalc_tab").children().html("🎲") - $("#button_national_units").html("♟"); - $("#button_unit_homecity").html("🏠"); - $("#button_unit_deployment").html("⊙"); - $("#button_city_buildings").html("🏢"); - $("#button_empire_upkeep").html("💰"); - $("#button_empire_prod").html("🔨"); - // Remove mini-map - $(".overview_dialog").hide(); overview_active = false; - // Remove orders buttons - //if ($("#game_unit_orders_default").length > 0) $("#game_unit_orders_default").remove(); - $(".not_mobile").remove(); // gets rid of all except goto,paradrop,airlift,nuke,and "hide buttons" - $("#game_unit_orders_default").css("position","absolute"); - $("#game_unit_orders_default").css("top","48px"); - $(".order_button").css("padding","1px 1px 0px 6px"); - - if ($("#game_unit_orders_settlers").length > 0) $("#game_unit_orders_settlers").remove(); - // Optimise space/fit in game unit panel: - $("#game_unit_panel").css({"transform":"scale(0.95)","float":"left","margin-top":"-12px","margin-left":"-22px","width":"100%;"}); - $("#game_unit_info").css({"float":"left", "width":"2000%"}); // continuous horizontal drag-scroll panel - // WE DON'T HAVE OR USE THIS, NOT SURE WHAT IT WAS PLANNED FOR: $("#help_footer").hide(); - - $(".ui-dialog-titlebar").show(); // patch:was hidden on mobile for more room, but minimize-disabling is worse - // TODO: find accurate #id method to do this, ui-id-12 is not for certain: - $(".ui-dialog-titlebar").find("#ui-id-12").parent().css({"background":"none","border-style":"none","height":"16px","width":"1px"}); // remove background image - $('#ui-id-12').parent().show(); // unhide messagebox title - $(".ui-dialog-titlebar").css({"font-size":"70%", "margin-left":"-3px"}); - $("#game_status_panel_bottom").css("font-size", "0.8em"); - } else { // handle case where small window is resized to large again + if (not_large_screen()) { + if (is_small_screen()) { + // Adjustments for mobile: spatial economy, fit + $("#turn_done_button").css({"padding-left":"7px", "padding-right":"7px", "padding-bottom":"8px"}); + $("#tabs_menu").css("margin-left","-3px"); + $(".ui-tabs-anchor").css("padding", "7px"); + $("#freeciv_logo").hide(); + // Remove text from tabs: icons only: + $("#map_tab").children().html(""); + $("#empire_tab").children().html(""); + $("#civ_tab").children().html(""); + $("#tech_tab").children().html(""); + $("#players_tab").children().html(""); + $("#cities_tab").children().html(""); + $("#opt_tab").children().html(""); + $("#hel_tab").children().html(""); + $("#warcalc_tab").children().html("🎲") + $("#button_national_units").html("♟"); + $("#button_unit_homecity").html("🏠"); + $("#button_unit_deployment").html("⊙"); + $("#button_city_buildings").html("🏢"); + $("#button_empire_upkeep").html("💰"); + $("#button_empire_prod").html("🔨"); + // Remove mini-map + $(".overview_dialog").hide(); overview_active = false; + // Remove orders buttons + //if ($("#game_unit_orders_default").length > 0) $("#game_unit_orders_default").remove(); + $(".not_mobile").remove(); // gets rid of all except goto,paradrop,airlift,nuke,and "hide buttons" + $("#game_unit_orders_default").css("position","absolute"); + $("#game_unit_orders_default").css("top","48px"); + $(".order_button").css("padding","1px 1px 0px 6px"); + + if ($("#game_unit_orders_settlers").length > 0) $("#game_unit_orders_settlers").remove(); + // Optimise space/fit in game unit panel: + $("#game_unit_panel").css({"transform":"scale(0.95)","float":"left","margin-top":"-12px","margin-left":"-22px","width":"100%;"}); + $("#game_unit_info").css({"float":"left", "width":"2000%"}); // continuous horizontal drag-scroll panel + // WE DON'T HAVE OR USE THIS, NOT SURE WHAT IT WAS PLANNED FOR: $("#help_footer").hide(); + + $(".ui-dialog-titlebar").show(); // patch:was hidden on mobile for more room, but minimize-disabling is worse + // TODO: find accurate #id method to do this, ui-id-12 is not for certain: + $(".ui-dialog-titlebar").find("#ui-id-12").parent().css({"background":"none","border-style":"none","height":"16px","width":"1px"}); // remove background image + $('#ui-id-12').parent().show(); // unhide messagebox title + $(".ui-dialog-titlebar").css({"font-size":"70%", "margin-left":"-3px"}); + $("#game_status_panel_bottom").css("font-size", "0.8em"); + } + else { // medium screen e.g. 1366 x 768, has some issues it needs TLC on: + $(".wc_spacer").css("height","2%") + $("#worklist_control button").css("height","7%") + $(".ui-dialog .ui-dialog-title").css("font-size","115%"); // vert space at premium + } + } + else { // handle case where small window is resized to large again $("#map_tab").children().html(" Map"); $("#empire_tab").children().html(" Empire"); $("#civ_tab").children().html(" Gov."); diff --git a/freeciv-web/src/main/webapp/javascript/tracklist.js b/freeciv-web/src/main/webapp/javascript/tracklist.js index 6bfa44f92..b44cacde8 100644 --- a/freeciv-web/src/main/webapp/javascript/tracklist.js +++ b/freeciv-web/src/main/webapp/javascript/tracklist.js @@ -670,12 +670,12 @@ var tracklist = [ // Game-start songs // T1 in reverse order -{filepath: "1/AfricanSerenadeVoodoo.PoorAfricanKids.YogaTribe,NaturesRootRevival",conditions: [[{"priority":"priority"}],[{"turn<":3},{"!tech":"Alphabet"},{"!tech":"Pottery"}]],f:"m4a",creds: "" }, -{filepath: "1/DunePart2OST.BeginningsAreSuchDelicateTimes.HZ",conditions: [/*[{"priority":"priority"}],*/[{"turn<":2},{"!tech":"Ceremonial Burial"}]],f:"m4a",creds: "" }, +{filepath: "1/DunePart2OST.BeginningsAreSuchDelicateTimes.HZ",conditions: [/*[{"priority":"priority"}],*/[{"turn>":2},{"!tech":"Ceremonial Burial"}]],f:"m4a",creds: "" }, // T2 {filepath: "1/AVATAR.BecomingoneofThePeopleBecomingonewithNeytiri.JamesHorner",conditions: [[{"priority":"priority"}],[{"turn>":1},{"turn<":3},{"!tech":"Ceremonial Burial"}]],f:"m4a",creds: "" }, // T3 {filepath: "tribal/Paleo3",conditions: [[{"priority":"priority"}],[{"turn>":2},{"turn<":4},{"!tech":"Ceremonial Burial"}]],creds: "" }, +{filepath: "1/AfricanSerenadeVoodoo.PoorAfricanKids.YogaTribe,NaturesRootRevival",conditions: [[{"priority":"priority"}],[{"turn>":3},{"!tech":"Alphabet"},{"!tech":"Pottery"}]],f:"m4a",creds: "" }, // wonders first so they get LIFO delayed after played once: {filepath: "1/EpicPowerSongsofWalesandCornwall.FantasyMusic.MedievalRenaissanceMusicENSMBL",conditions: [[{"priority":"priority"}], [{"tech":"Masonry"},{"tech":"Pottery"},{"tech":"Ceremonial Burial"},{"!wonderplr":"Code of Hammurabi"},{"!tech":"Literacy"}], diff --git a/freeciv-web/src/main/webapp/webclient/city.hbs b/freeciv-web/src/main/webapp/webclient/city.hbs index 3d763c19e..3801374af 100644 --- a/freeciv-web/src/main/webapp/webclient/city.hbs +++ b/freeciv-web/src/main/webapp/webclient/city.hbs @@ -99,12 +99,14 @@
+