Improving visual appearance of the five tabs in basic mode

[teusbenschop]

Here is a mockup/prototype of the 5 tabs CSS element:

https://aranggitoar.github.io/navbarmockup.github.io/

It was created by @aranggitoar

[teusbenschop]

Thank you @aranggitoar for creating this beatiful interface for the five basic tabs in Bibledit.

[warpok]

I would like to update you on the names of the 5 tabs. I am making the first 3 shorter. Baca Teliti Terjemahanku Catatan Settings

The Settings button can become 3 vertical dots in a portrait mode view. Thanks so much.

[teusbenschop]

A question you, @aranggitoar I have is this: How to make the CSS to blend in well with the Indonesian version we now have?

How it looks at this moment is visible at http://bibledit.org:6050. You will be able to login with guest as username and password.

The Bibledit there now already has a lot of CSS which was made by someone to make it look consistent. So in Basic mode, how to style the CSS for the buttons to look the way as is in your mockup?

[warpok]

Aranggi, Teus means to use the same word, 'guest', as both the username and password.

The site shows just like a screenshot that I already sent to Aranggi.

Teus, I hope Aranggi understands your question. I don't. But I think you are pointing out that the current interface style will not look as good with the tab buttons Aranggi made. It would look better if you were able to put in the style that Aranggi used in his example.

[aranggitoar]

I've logged in with guest as both the username and password. I can see what's the problem.

If you would direct me to the HTML and CSS file for the page, Sir @teusbenschop. I can work on it to make it like what I did in the mockup and send you a pull request.

And I understood the question, thank you Sir Phil. To style the CSS we only need to assign several Flexbox properties to the navbar container. I can try to work on it and explain the code in the pull request.

Edit: I've found the CSS file on the repository, I will see what I can do.

[aranggitoar]

I've cloned the repository locally and I can find the CSS file but I cannot find the HTML file that is displayed in the site that you've linked above, @teusbenschop. Can you please direct me to the HTML file?

And if it's possible, can I deploy the site locally? I have LAMPP installed and I can make edits to the HTML and CSS file locally then make a pull request here. Thank you for the time.

[teusbenschop]

Thanks you @aranggitoar for going to see what you can do to make the updates as you see fit to the styling of Bibledit Cloud.

There are several steps for installing a version of software locally. All the steps are outlined on this page:

http://bibledit.org:8080/help/installcloudsourcedebian

There is not one single html file. Instead of having one file, there usually are two or three of them.

1. One has the header information.
2. The other has the actual page content.
3. There's a workspace wrapper too.

All the fragments of the html are in the "assets" folder of the source tree.

xhtml_start.html header.html workspacewrapper_start.html workspacewrapper_finish.html xhtml_finish.html

Then there's one html fragment for the main page contents. Such html fragments are in their various folders in the source tree.

There's a "dev" script in the root of the source tree. It can be used to build and run the source outside of the main source tree because building and running creates binaries and databases and other files that do not belong to the source.

There's also a #define for the Indonesian version, if something is made specifically for the Indonesian version that is not in the general version of Bibledit.

#ifdef DEFAULT_BIBLEDIT_CONFIGURATION
#endif
#ifdef HAVE_INDONESIANCLOUDFREE
#endif

[aranggitoar]

@teusbenschop I've tried adding the codes that I used yesterday. You can easily copy it in the stylesheet.css file on top of .clearfix selector until before the #topbar a selector: 5tabs.txt.

All I added other than that code is a display property of none for the div with the class clearfix and another div with the id breadcrumbs so that it wouldn't show up in the served HTML page. Because I think the codes you have link to the breadcrumbs id is not for the user. I'm sorry if I'm mistaken, I've never worked in C++ nor it's siblings before.

Here is screenshots for the result: Around 1125px wide. Around 230px wide.

Edit: I used a browser app to take the screenshot and it has a problem with the page that I don't know what. That's why you can't see the bibledit vector image, but it's there. Edit 2: Added the name of the CSS file.

[teusbenschop]

Thank you @aranggitoar for the clear instructions as to how to update the stylesheet.css file of Bibledit.

I did the steps you described, then got the nicely coloured buttons in basic mode, so it looked great.

But then when I switched Bibledit to Advanced mode, that is when problems became visible. One of the issues was that a long menu cannot be read, because the text labels of the menu items get collapsed, and so I cannot read what is in the menu items.

[aranggitoar]

Yeah, I can see what you're talking about.

I'm attaching a short jQuery code that you can insert after this,

if (typeof (fadingMenuDelay) != 'undefined' && fadingMenuDelay != 0) {
    $ (".fadeout").delay (parseInt (fadingMenuDelay)).hide (2000);
  }

inside the header.js in the assets folder of the source tree.

Inside is also a class in CSS that jQuery will add and remove that you can insert after,

#topbar a {
  color: #000;
}

and before,

#breadcrumbs {
  display: none;
}

inside the stylesheet.css.

(The order in CSS doesn't really impact the functionality but it makes it easier for us to navigate when grouped like so.)

The code in txt file: jquery-css-5tabs.txt.

Basically I'm adding a class selector (in CSS) with a CSS property that will wrap its childrens. It will be added when the span tag inside the div with the id topbar is more than 5 and will be removed if it's less than 5. You can easily change the number as you see fit. I hope it works better.

Edit: Added the Javascript file name. Edit 2: Clarifying the code explanation.

[teusbenschop]

Thanks for the update, @aranggitoar , the new jQuery and CSS fixes the problem mentioned, and it looks better now.

Side-note: The breadcrumbs no longer show up. Background information: The breadcrumbs is an option that can be enabled in the Settings / Preferences, if the user so desires.

If both of you, @aranggitoar and @warpok agree that the current styling is what is needed, then I can update the code, so that the styling is enabled for the Indonesian version.

Reason for this is that I think it now is good for the Indonesian free Cloud version, since it is using Basic mode only. And in basic mode it looks nice with the updates.

But for advanced mode, the coloured tabs intermix with the plain tabs and buttons, hence my suggestion to use it for the Indonesian version.

[aranggitoar]

Thanks for checking it out @teusbenschop.

Sadly I've found a bug. If you would go to the workspace, the verse editor is only visible in part because of a few of the CSS properties that I made. But I have done a fix for that, basically I set the same properties to default for the versepickerwrapper id.

Now I'm working on the breadcrumbs that no longer show up. Thank you for the background information, that helps, now I know that it is a feature that can be displayed.

I will send an update with the verse picker and breadcrumbs fix, if not in a few hours at least 16 hours from now. It's 7 pm here. :)

[teusbenschop]

That is great, thank you for checking it out and hunting for the bugs :)

Please take your time, I am not in any hurry.

One favour I ask is that if it were possible, may you attach the whole stylesheet.css and jQuery file that you use, so I can easily drop the entire content in here locally :)

[aranggitoar]

Alright I will drop the whole file next time, and I will take my time. :)

One more thing to ask: can I refactor the CSS code? Just so that it would be easier to navigate and more efficient.

[teusbenschop]

Yes, refactoring the CSS code is okay, in particular if it becomes easier to navigate and if it becomes more efficient. Thanks for going to look into this.

[aranggitoar]

Thank you @teusbenschop, it's my pleasure to work on the code.

Also I've looked into the breadcrumbs not showing up bug. There are two alternatives to it.

The first one is that we can just remove the CSS property for it. The second one is that we can make it more interactive by making it invisible when it is deactivated and visible when it is activated.

Because before, even when it is deactivated, the div with the breadcrumbs id is still taking up space in the HTML document. That is why I added a CSS property that would take it off so there will be free space in its place. I tried to use an if function in Javascript on the text content of the Show breadcrumbs option in the Preferences tab and update a variable that's passed to another if function that will remove or add a CSS class with the property,

let counterForBreadcrumbContainerDisplay = 0;
if (document.querySelector('a[href*="breadcrumbs"]') != null) {
    if(document.querySelector('a[href*="breadcrumbs"]').innerHTML === "On") {
      counterForBreadcrumbContainerDisplay = 0;
    } else {
      counterForBreadcrumbContainerDisplay = 1;
    }
    if (counterForBreadcrumbContainerDisplay = 0) {
      document.querySelector('a[href*="breadcrumbs"]').classList.remove('off');
    } else if (counterForBreadcrumbContainerDisplay = 1) {
    document.querySelector('a[href*="breadcrumbs"]').classList.add('off');
    }
  };

But every change of page resets the counter, so the function only works when we are in the preference page. I couldn't think of another way to do it with Javascript. Can we access a global variable from C++ in Javascript? I was thinking about accessing the live Database_Config_User object that's constructed in request.cpp line 58 to 63,

Database_Config_User * Webserver_Request::database_config_user ()
{
  // Single live object during the entire web request.
  if (!database_config_user_instance) database_config_user_instance = new Database_Config_User (this);
  return database_config_user_instance;
}

Can we somehow get the boolean value in the property of setDisplayBreadcrumbs inside the live _Database_ConfigUser object and assign it to a variable in Javascript?

And another question, when the breadcrumbs are active what's actually being shown? I can see it, but only in the preference page, is it the Menu >> Settings link on the top right? A screenshot.

Edit: The outermost if wrapper of the Javascript function is there to check if there is any a tag with an href attribute with the value of "breadcrumbs" and run the function if the tag exists.

[teusbenschop]

Can we somehow get the boolean value in the property of setDisplayBreadcrumbs inside the live _Database_ConfigUser object and assign it to a variable in Javascript?

After reading through the code you modified, in the issue, and thinking about this, yes, it looks like having the setting propagate to the html output is the better and cleaner approach.

So I updated the code so the setting enables a section of the html.

The changes are visible in this commit:

https://github.com/bibledit/cloud/commit/ac8edabab045942471152ae2595d888fff4b1f36

And another question, when the breadcrumbs are active what's actually being shown? I can see it, but only in the preference page, is it the Menu >> Settings link on the top right? A screenshot.

Yes, it is correct in your screenshot, but it's not entirely the way it was designed. And it also should show up in on all pages.

You may see how it was designed to look when you ./configure the code without configuring it for the Indonesian free Cloud.

Here's a screenshot of one example of how it would look normally.

[aranggitoar]

Hi @teusbenschop, I've added the new codes from the commit that you've referenced.

It seems that now the div with breadcrumbs id is gone entirely, it doesn't exist if you try to find it in the browser dev tools. Please check it out for me, maybe it's a problem with my client here.

And I will add the breadcrumbs position fix as well in the code that I will sent later. Thank you for the info.

[teusbenschop]

Yes, the div with the breadcrumbs will have been done now entirely. But only in Basic mode.

In Advanced mode, it should still be there.

[aranggitoar]

It took me awhile to realize you've solved the breadcrumbs bug. Thank you @teusbenschop.

I'm finishing the refactor today and I want to ask: do we support old browsers like IE 8,7, and 6?

[teusbenschop]

I am not sure if old browsers are still relevant. Likely anything less than Edge on Windows 10 may not currently be capable of running the Bible editors within Bibledit, since those Bible editors have fairly new Javascript running.

Are the IE browsers in use in Indonesian still? If so , that might change things a bit.

[warpok]

Aranggi, I have seen the video that you sent.

You showed both the Basic and Advanced mode. The whole time that you were showing the interface, the setting was for not showing the whole menu, but only showing the menu button. So in the Settings > Preferences, you have this setting Off: Keep main menu always visible: On. This works in both basic and advanced mode.

I always set the menu to be visible, and I hope that this setting can be On by default for the Tamu Bibledit people. It would be fine to add a setting to turn that off for the Tamu people in the shorter settings for the Tamu account.

REASON: I switch tabs very frequently when working in the Basic Mode. The last thing I want is to have to click twice to switch tabs. The neat thing about a tabbed interface is that you can quickly switch between tabs with just one click.

Other than that, the tabs look nice.

You have used the horizontal slider twice. A horizontal slider is used in the mockup to show parts of a menu or for picking Bible books. But again, this will be SLOW and bothersome when I switch so frequently. Can we have a pop-up box instead? I worry that it will be hard to control the speed of the scrolling of Bible books when using a cell phone or tablet and scrolling with a finger. 69 items (book choices) is a lot to scroll through when placed horizontally. Again I think a pop-up box will be much better. Having the NT and OT Bible books a different color in the menu might help find the section needed.

Perhaps the horizontal scroll would not be so bad if the user can start typing to reduce the choices. For instance, if the user typed M the menu choices would reduce to Mazmur, Maleaki, Matius, Markus. Typing Mat, would reduce further to Matius. In that case, the horizontal menu might work.

I appreciate your work on this so much, Aranggi.

[warpok]

I just thought of something, Aranggi! Maybe you were showing how both Basic Mode and Advanced mode would show up on a cellphone in portrait mode! If that is what you were proposing, I agree with using two sliders, one for the menu and one for the Bible book chooser. But as soon as they flip the screen to landscape mode, or if Bibledit is being viewed on a tablet, then in basic mode, I hope that the tabs will show.

[aranggitoar]

Sorry for the late response!

@teusbenschop I just checked and in 2016 they say there is only 5%. What do you think? I think we can pass IE altogether.

@warpok Thank you so much for the explanation. I didn't know about the main menu option before! Now I know what to work on, before I thought you were talking about the verse picker.

For @teusbenschop, this is the video that @warpok is talking about.

I can see that about the horizontal slider, how it could be more bothersome. I will use the original one and differentiate the colors between OT and NT books.

Actually I didn't thought of that, but that is a great idea. I will make it so that they will switch to the horizontal sliders in portrait mode.

I will try to do the improvement before Saturday. Thank you, feel free to suggest other things that I can add while I'm on it!

[teusbenschop]

@teusbenschop I just checked and in 2016 [they say there is only 5%] What do you think? I think we can pass IE altogether.

I agree, there is no need to support IE.

[aranggitoar]

Hello @warpok and @teusbenschop, here's an update. So far I've removed the horizontal slider for the original pop-up, made it responsive even with the main menu always on, and added some colors to the different books in the Bible book picker. Here's a demo.

I tried another combination of colors but only noticed now that it doesn't look too good in the Bible book picker. I will work on that, maybe I can use the original color just with different shades. And now the colors aren't consistent as you can see from the Advanced mode change into Basic mode, I will work on that too.

God bless!

[teusbenschop]

I had enjoyed watching the video. It looks promising. Personally I am no expert in making or evaluating a good and pleasant user interface. Nonetheless it looks good to me.

[warpok]

Great work, Aranggi. We're getting there! There are a couple of things that I observe that you should know about.

1. When the Workspace tab is chosen, you only have the bundled default Workspace choices. But users can create their own Workspaces, and I sometimes send new Workspaces to all the users. I have at least 12, but some of our users who don't delete old workspaces have 24. So we will need a popup for the Workspace choices that is just like the one for Bible books.
2. It might be relevant for you to know that in Basic Mode, the Tabs will be 5 in this order: Baca (a new one), Teliti (Resources), Translate, Notes, Settings (or three dots).

Teus, are you willing to have Aranggi suggest a new theme picture instead of the yellow and brown blank Bible? His original mockup had a very simple but thoughtfully made logo instead of the picture. How about if you consider that as a new logo for your site? I feel like part of the difficulty in finding nice colors is that the yellow and brown picture restricts Aranggi's creativity and doesn't show the interface colors in the best light.

[teusbenschop]

Teus, are you willing to have Aranggi suggest a new theme picture instead of the yellow and brown blank Bible? His original mockup had a very simple but thoughtfully made logo instead of the picture. How about if you consider that as a new logo for your site? I feel like part of the difficulty in finding nice colors is that the yellow and brown picture restricts Aranggi's creativity and doesn't show the interface colors in the best light.

Yes, I like the new picture that @aranggitoar had created for the initial mockup. It looks good if that logo or something similar be used as a new and updated logo for Bibledit. The yellow and brown blank Bible has been there now for a long time. It's good to change it for something new and fresh. The logo made by Arrangi is a good and beautiful candidate for something new.

[aranggitoar]

Thank you so much brothers.

Yes, those are things that I have to know about! Let my try to understand what you mean about the Workspace choices first, @warpok. Is it the menu that by default would fade away in 4 seconds?

I will take notes on the order of menu tabs in Basic Mode. About that, I want to ask you @teusbenschop, is the href attribute of the menu tabs translated in different languages too or is it a file name? I've not looked into the code for it, but is it done in jQuery's AJAX like with versepickerwrapper or generated by C++?

About the logo, I'm sorry that I didn't tell but it's from google! But now that you brothers liked it I have an idea where to start. Thank you so much for this chance, I will send candidates for the logo and color schemes in the upcoming week. I think it's better if we take a week or two to look at several of them just so you brothers can have time to evaluate and while you're on that I can produce other variations.

[warpok]

The menu tabs are, I believe, subject to the translation in the Indonesian interface. I am the one who has done most of those. So therefore I need to update several. What about the Read tab, Teus. The place to choose the language interface is Settings > System, in Advanced mode.

Yes, the workspace choices are the ones that disappear in 4 seconds. It would really be helpful if the menu would NOT disappear if the cursor was placed on top of it. That means the user is trying to choose, and sometimes I take longer than 4 seconds. Yet, I don't want to increase the seconds, because usually I only need 2 seconds. My list of workspaces is currently like this.

[teusbenschop]

I will take notes on the order of menu tabs in Basic Mode. About that, I want to ask you @teusbenschop, is the href attribute of the menu tabs translated in different languages too or is it a file name? I've not looked into the code for it, but is it done in jQuery's AJAX like with versepickerwrapper or generated by C++?

The href attributes of the menus are the same always in any language. They are internal references, they are generated through C++, and again interpreted by C++.

I guess this is an example containing the href elements you refer to:

<span class="nowrap"><a href="/menu/index?item=read/index" title="">Read</a></span>
<span class="nowrap"><a href="/menu/index?item=resource/index" title="">Resources</a></span>
<span class="nowrap"><a href="/menu/index?item=editone2/index" title="">Translate</a></span>
<span class="nowrap"><a href="/menu/index?item=notes/index" title="">Notes</a></span>
<span class="nowrap"><a href="/menu/index?item=personalize/index" title="">Settings</a></span>

What is not translated is the href attributes. They refer the browser to a page to open, when the user clicks one such a link.

[teusbenschop]

What about the Read tab, Teus.

It's not yet translated into Indonesian, I checked just now.

In general any English string in the interface would not yet have been translated to the target language.

[warpok]

So the titles that I propose are: Baca Teliti Terjemahanku Catatan and 3 dots (for Settings)

Aranggi, silakan mengusulkan kata lain, kalau mau.

[teusbenschop]

So the titles that I propose are: Baca Teliti Terjemahanku Catatan and 3 dots (for Settings)

The three dots from the old menu were now put back again in this menu. The Settings menu now has the three dots again.

[aranggitoar]

Thank you @warpok for the explanation about the workspace, I will take notes and see what I can do.

About the href attribute, @teusbenschop, yes that is what I was referring to. That's great, thank you.

I've tried making a few variations in the theme colors and logo, this is what I can come up for now. There is a menu that you can click to see the color and logo variations in action. There is SVG files for the logo so you can download and look at it better. And now the logo is made by us, not from google anymore! :)

Please tell me what you think about them. I will try to come up with other variations in the coming days.

Edit: about the titles @warpok, I think it's great already, formal and clear. Maybe if you want to make it one "tone", Catatan can be Catatanku. Another suggestion is Terjemahanku and Catatan can be Terjemahkan and Catat so it would be one tone with Baca and Teliti.

[warpok]

I love it! For colors, I don't have a strong preference. I like them all. But I have a slight preference for both blue and red. I love the way all of them go to white for the Translate button. I like the Settings button having the word Settings (since this gives the 5 buttons a symetrical appearance), but have suggested using the three dots to save space if the interface gets squashed in portrait mode on cell phones and 7 inch tablets.

For the logo, I have a stronger preference to number 2. I don't think I told Aranggi this before, but here is the reason for my choice: When the TSI NT was first published in 2014, we took it into the Oyra area (where Gale and I first translated into their language) and sold copies there. This became one of my favorite pictures, so we have used it often, like in this slide from a presentation: She is hugging the NT! You can't see it, but it is still in the plastic wrapper. (But I know the rest of the story and she did read it and still reads it.) That is what your logo says to me. That the book is embraced and loved. We wanted but failed to get that idea in Albata's new logo: To me the other two logos remind me of 1. energy/power and 3. love/heart. Those are OK, but I love the idea of embracing and even lifting up that seems evident in #2. Well done, Aranggi!

[aranggitoar]

Praise the Lord!

Yes, I think the blue and red goes together nicely because of the cool tone of the colors. Also I've changed the Settings tab into the three vertical dots, it even looks more clean now.

That's wonderful @warpok, I'm very glad to hear that! Now I know better the logo that we aim for, I'll see what I can do to improve on the 2nd variation. Thank you so much.

[teusbenschop]

Well, I like all the colours that have showed up in the mockup, and liked all the logo's, one a bit more than the other. All of these look beautiful I can't even make a choice as to what is the better one, so my recommendation is that you all choose what's nicest and best in your opinions, as long as all users are happy about it, then I am happy too. Good luck @aranggitoar designing the user interface!

[aranggitoar]

Hello @warpok and @teusbenschop! I've uploaded another demo. There's two demos because I forgot that we decided on red and blue color. Looking at it again I think when it's all blue, it looks kind of bland.

A few things that I show in the video:

1. The tabs's color: middle will always be extra light red, the inner outer will always be light blue/light red and the outermost will always be blue/red.
2. The workspace fadeout timer that turns off when the user's mouse hover over it and turns on again after the user's mouse hover out of it.
3. The OT and NT red and blue color, also the glossary/wordlist and cancel button purple color (I chose purple because it's the analogous color of red and blue).
4. Enhancement of the visibility of the OT and NT book by making the text color white, also the borders around them.
5. The new bibledit logo in action!

This is a zip file containing the files that I change: bibledit_visual_improvement.zip

You can simply copy them into the source because I've made a copy of the folders that contain them as well. There's a few favicons of the logo as well if you want to change it.

What do you brothers think about it? If there is no other improvements or bugfixes for now, then these files are ready to be implemented. Thank you, God bless!

[warpok]

The demos often flash by faster than I can figure out what is being shown. Basically things look good to me, but I will need to try it. Are we at the point where the tabs can be plugged in and tried using the Indonesian tab names?

[teusbenschop]

Both the recent videos look good, I can't even make a choice, I'd say, go for it, and let's do this theme.

I can integrate your the code that you have made @aranggitoar , into the source code, and then I can make a sample Indonesian free Bibledit Cloud with that theme.

It this a good step forward?

[warpok]

It this a good step forward?

Please. So that we can test how it really looks in real life.

[aranggitoar]

The demos often flash by faster than I can figure out what is being shown. Basically things look good to me, but I will need to try it. Are we at the point where the tabs can be plugged in and tried using the Indonesian tab names?

I'm sorry, I thought I was being too slow last time, I will take notes on that for the next demos.

And yes it can be plugged in and it should have no problem with the languages that are being used.

[teusbenschop]

Hello @aranggitoar I had started on moving all contents from your bibledit_visual_improvement.zip into place into the source tree to integrate it into Bibledit. But then I saw that all the .png and .ico and .svg files are in the root folder. However a favour I ask from you is that these all be placed in the "pix" subfolder or the "assets" folder where they are now too. Then the root folder itself remains cleaner. Would that be possible? That would help me speeding up things integrating the nice and new layout with the existing code in the source tree.

In general all files like browserconfig.xml and favicon_guide.txt and site.webmanifest, if at all possible could these go to, say, the assets folder or the like?

[aranggitoar]

But then I saw that all the .png and .ico and .svg files are in the root folder.

Hello @teusbenschop, I'm sorry I forgot to tell you about this.

I've moved them into their respective folders and fixed the links inside the browserconfig.xml and site.webmanifest file that will call unto the favicons, they work nicely. Here are the files:

bibledit-visual-improvement-clean.zip favicon_guide.txt

I've separated the favicon_guide.txt because it is for you to read. It's some link and meta tags to add to the HTML files of every page. All they do is just to link around all the favicons, browserconfig.xml and site.webmanifest files. Please help me on adding them because I don't know how to go around doing that yet! I think they have to be generated through C++?

Thank you, God bless!

[teusbenschop]

All the updates have now been integrated into the Indonesian version of Bibledit Cloud.

The result can be seen at http://bibledit.org:8082 and all free Cloud editions as well.

Thank you @aranggitoar for doing the styling updates. All has been integrated into the source tree at https://github.com/bibledit/cloud. It would be good if credit is given to you for the changes made. Then everyone knows who wrote what. Credit is due to whom credit is due. And that makes it easier to handle future updates. If you would like to enter your name and copyright information where relevant, please make pull requests where needed.

[warpok]

Teus, this looks SO wonderful. Can we have this also at our TSI port? I think my team will be thrilled to see it, and they might have useful comments.

Aranggi, terima kasih banyak! Mantap sekali!

There are just two things that I find that might be improved:

1. The colors for the OT and NT are not yet showing.

2. The active tab doesn't display any difference from the non-active tab. A new user may get confused as to whether he is showing MyTranslation or OurTranslation. I suggest that the color of the tab could stay the same, but a dark outline could be drawn around the tab, or the text color could change to white. (I think white would be OK even on the almost-white tabs.)

3. The names of the tabs are not yet Indonesian. Names for the tabs were given above. But I didn't totally follow the conversation about whether this is something I need to change in the interface language.

4. This suggestion is minor and could be saved for later: Right now when the user selects a different tab, the whole screen blanks and the top tab bar disappears briefly and then the tab titles appear first, then the full tabs with all the colors plus the information for the selected tab. Is it possible in the browser Bibledit for the tabs to stay stable and not refresh, and only the part below the menu lines display? (That is, it would stay stable except for some color or outline difference as requested in #2.)

5. Right now, the user only can click when the cursor changes from a pointer to a hand. This happens when the cursor is placed on top of the tab title. (In the case of the three vertical dots, you made it a few spaces wider than the three dots. Thanks for doing that!) But please make it so that the user can click anywhere on the tab.

6. There is a bug that sometimes appears. I haven't figured out when. Sometimes the Read tab has not appeared. For instance, the first time I changed to a narrow portrait mode, there was no longer a Read tab. But this has only happened twice. OH, I see that on my cellphone, in portrait mode the Notes and settings tabs go down a line. That looks good.

7. BIG problem: The verse and chapter picker doesn't work for chapters or verses beyond …

[warpok]

The old vertical slider might be OK for most books and chapters. The exception would be something like Psalms and chapter 119.

Teus, do we still have a hot key for going to the Next/Previous chapter?

[teusbenschop]

Teus, this looks SO wonderful. Can we have this also at our TSI port? I think my team will be thrilled to see it, and they might have useful comments.

Yes, it looks so nice, quite an improvements. The stylesheet and the header.js were now copied to the TSI port too. Your team is going to be happy! Yes, and make useful comments too.

The names of the tabs are not yet Indonesian. Names for the tabs were given above. But I didn't totally follow the conversation about whether this is something I need to change in the interface language.

If the names are not yet in Indonesian, that means they need to be translated in the interface language at Launchpad. Please update me soI can do a pull from Launchpad to include the updated Indonesian language strings.

There is a bug that sometimes appears. I haven't figured out when. Sometimes the Read tab has not appeared. For instance, the first time I changed to a narrow portrait mode, there was no longer a Read tab. But this has only happened twice.

Once you have found the cause of the Read tab not appearing, may you open an issue. Then it can be addressed and fixed.

Teus, do we still have a hot key for going to the Next/Previous chapter?

Here is a list of the current keyboard shortcuts: http://bibledit.org:8080/help/shortcuts I cannot remember that there has been a hot key for going to another chapter. The swiping for going to a next or a previous chapter is still operational.