Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

CSS HELP FOR THE SIDEBAR TO TOP "Menu" BAR PLEASE

Hello everyone,
I've been working hard at a Sugarcube 2.1 game that I finally launched and now we guesstimate that the userbase would prefer a top/down menu. I've tried my darndest to move the menu to the top without breaking my game but have had no luck. I also tried changing the icon for the menu from "<" to Close Menu/Open Menu but can't get the spacing correct so that the words Open Menu (or even Menu) show properly while the tw-sidebar element is stowed.

Can you guys help with an example of how to structure the side menu as a top/down menu? Please! Thank you.

Comments

  • It's unlikely that you're using SugarCube v2.1—while there was such a version, two actually (v2.1.0, v2.1.1), their release was over a year ago. Perhaps you're thinking of Twine 2 v2.1?

    Beyond that, you've confused the UI bar with the menus is contains, at least in your description, and it's not a tw-sidebar element—AFAIK, that's Harlowe specific.


    The UI bar's default styles patch the core styles to emplace itself. Additionally, it is designed to be responsive, which includes more patches to the core styles. While it's possible to relocate it, it would likely be far, far less work to completely remove the UI bar and its styles with a tiny bit of JavaScript and then write your own top bar/menu. Virtually everything offered by the UI bar is available separately as an API—in particular, all of the core menu items and the history controls.
  • Sorry. Yes, I'm using the most recent version of Twine (2.1.0) and also Sugarcube 2.12.1.

    So I know how to remove the bar, but I'm a bit lost on how to relocate it using the API. Is there anywhere that would document that? I've seen the documentation on the API in the official documentation but moving it via Javascript might be something I'll need my developer on. Thanks for your help.
  • FIF wrote: »
    So I know how to remove the bar, but I'm a bit lost on how to relocate it using the API.
    I did not say that you could relocate the UI bar via an API. I said that it would be difficult to move correctly and that an easier solution would be to remove it entirely and write your own top bar/menu, within which you could replicate the lion's share of the UI bar's functionality, since that's mostly provided by various public APIs.

    In particular:
    • The UI API provides all of the built-in dialogs—e.g. Saves, Settings, Restart, Jump To, and Share. See the Dialog API to write custom dialogs.
    • The Engine.backward() and Engine.forward() methods handle backwards and forwards navigation, respectively.

    Hmm. Now that I think about it, I suppose another alternative would be to simply remove the UI bar's default styles. You'd then have total control over its styling and layout, so you could do whatever you wanted with it. In that case, I'd suggest looking at the following:
    • SugarCube's HTML document, which shows its basic structure—it's the <div id="ui-bar"> element. That will let you know what you have to work with.
    • SugarCube's CSS document. In particular, look at its default styles, the fifth listed built-in stylesheet, ui-bar.css. That will let you see examples of how the default appearance and layout is achieved.

    Also, to be clear about what I meant before about completely removing it and its styles. The code is:
    $('#ui-bar').remove();
    $(document.head).find('#style-ui-bar').remove();
    
    To simply remove its styles, you'd only need the second line there. In other words:
    $(document.head).find('#style-ui-bar').remove();
    
  • I've been messing around with getting the ui bar to the top myself. Reading Exile's response, there's a good chance I did it in a really dumb way. When and if I get it working I'll post it. Probably best to let you other fine folks see it (and correct it) anyway.
  • @greyelf Did you have a solution for this? I swear I saw you post how to move it in another post I can't find.
  • edited February 2017
    I lost track of how much CSS I actually changed and changed back, so this CSS may include a bit more than necessary to make it work. To install it, put this in your javascript, as per Exile's instructions:
    $(document.head).find('#style-ui-bar').remove();
    

    Then grab the CSS from here (didn't fit in the forum post)

    Google Docs File

    There's two big chunks of code in that document. The first moves the ui-bar to the top, but also changes a bunch of other styles/colors. If you don't like the new colors, just paste in the second chunk of code after the first. If you're using Twine 1.4, put both code chunks in the same stylesheet passage.

    Here's a small piece of code to cause the ui-bar to stow/unstow on double click. I don't know if you'll need it, but it might be better than trying to change the button around or whatever you were trying to do. It also goes in your scripts.
    !function(){$(document).on("dblclick","#ui-bar",function(){$("#ui-bar").toggleClass("stowed")});}();
    

    The new ui-bar handles everything pretty well, but has a bit of trouble with story banners. I'll attach a demo of it in both styles.

    Let me know if I messed anything up inadvertently.

    Edit: This is a work in progress, and I'll wind up making the code way more efficient and such (i.e. not including things I'm not editing) and making more/better changes (the goal is to get something that works very well on mobile without having to rewrite the whole thing into columns), but you seemed like you were in a hurry.
  • Chapel wrote: »
    This is a work in progress...
    I suggest that when you have a version that you consider ready for 'release' that you create a new thread in the Workshop category with a relevant title, and a description that details exactly what it does, which story formats (name and version(s)) it supports, how to use it as is, and how to customise it.

    It may' help others find the solution again later and gives people a descriptive title to link to in future threads that reference that it.
  • greyelf wrote: »
    I suggest that when you have a version that you consider ready for 'release' that you create a new thread in the Workshop category with a relevant title, and a description that details exactly what it does, which story formats (name and version(s)) it supports, how to use it as is, and how to customise it.

    Sounds like a good idea. I'll do that.

  • Thank you @chapel that worked well just not the way I need it to. It places all the elements dynamically across the top which will jumble them depending on screen size. I literally was hoping for the same sliding bar, only falling from the top instead. I'm working on it... Thank you anyways, what you posted will be super helpful for many!
Sign In or Register to comment.