[TWC] What I've Done So Far & Help

[K]

I've been trying to recreate a similar site layout to the mobile wikipedia site - I like it's simplicity and readability - and probably it has been optimized for public viewing. I think TW's site layout is kind of counter-intuitive and I have adapted an approach that looks great everywhere and runs on mobile as well. I used the bibliocaelestis site as a starting point by copying the stylesheet and mainmenu. In the final stage, it will look different.

This site layout allows for reading without wasting time scrolling too much. Ie. You can read an article and then click a link. Only one page is shown at a time, and the 'v' button allows you jump pages in a breadcrumb like manner or go to the top. The sections are collapsible.

What I hated in tiddlywiki is that you are punished by typing up long articles and it is counter intuitive to scroll up and change tabs. Sick of that, I just removed the tab bar from the page template and just modified the hovermenu. I also changed the hide sidebar plugin, so that it would also hide the main menu. You can see the difference in state 1 and state 2. What is important the controls follow you as you move down the page, and they are all easily accessible without moving your hand or mouse too much

Wyswig was implemented so that I could jsut copy paste from microsoft word, saving minutes of editing, which would save hours and possibly days editing TW in the future.

---

1. Now, here is my problem. Header bar.

https://en.m.wikipedia.org/wiki/Main_Page

The >> button will hide/show the sidebars. In the final version, I will delete the right sidebar.
The search box uses yoursearch , which I will modify to the right dimensions.  !!!See state 3!!! I will modify the color and size of the search box later along with max characters in the code.

How do I make the search box look pretty like the one in the mobile site?
How do I make the the content obscured when I start searching?  - Try searching to see what I mean.

How do I change the >> button into a picture icon?

---

Thanks,

[Hiru Yoru]

Hi,

For the input box, I inspected the CSS of the Wikipedia site and this seems to be the relevant code: box-shadow: 0 1px 1px rgba(0,0,0,0.05);

If you try out Firefox Developer Edition, it has a lot of great features for inspecting CSS and HTML which helps when theme-building (it's also a beautiful app): https://www.mozilla.org/en-US/firefox/developer/

For the button, I'm not sure what's creating it. If it's the default search button, then you'd do it one way. If it comes from an added plugin/extension, you'd do it another way. Do you have a demo of the TiddlyWiki that you could share a link to? I could give you an answer that way. Also, let me know what image you'd like to use. If you have a link to that or attach it, I could help you with the styling.

Also, I'm not sure what you mean about the content being obscured when searching. Do you mean not to instantly show search results? There's a simple search plugin that's part of the TiddlyWiki on the main site: http://classic.tiddlywiki.com If you search for that, you'll find a great plugin which shows results in a box rather than closing/obscuring already opened tiddlers. If this is not what you mean, please let me know.

It looks very nice, by the way! My compliments. :)

Kind regards,
Hiru

P.S. - Have you noticed that the area at the center jumps from left to right by a bit when turning on/off the sidebars on the left and right?

[K]

Thanks for answering. 

> P.S. - Have you noticed that the area at the center jumps from left to right by a bit when turning on/off the sidebars on the left and right?

That's just the right sidebar pushing on the window. When I delete it, there shall be no such problem. Or I could just mess with the margins.

---

I'll attach it. Edit: It won't let me attach for some reason (maybe because of the tiddlysaver jar), so Ill give a link to my drive. All the deleted messages are because of the error message I got when trying to post.

https://drive.google.com/file/d/0B_0oJeSIBBVQWDMyQVlIVXdaMWs/view?usp=sharing

---

>Also, I'm not sure what you mean about the content being obscured when searching.

https://en.m.wikipedia.org/wiki/Main_Page Go here and try searching. Doing is better explanation in this case.

---

>For the button, I'm not sure what's creating it. If it's the default search button, then you'd do it one way. If it comes from an added plugin/extension, you'd do it another way. Do you have a demo of the TiddlyWiki that you could share a link to? I could give you an answer that way. Also, let me know what image you'd like to use. If you have a link to that or attach it, I could help you with the styling.

Oh, I'm not talking about the search. If you reexamine the picture, you will notice a '>>' above the search box. That is what I mean.

[Hiru Yoru]

Hi,

I looked at the HTML that you provided. The "»" comes from this section in the HoverMenuPlugin. You will have to alter the HoverMenuPlugin to change the arrows. It is this line in the plugin:

         arrow1: "«",
         arrow2: "»"

You will have to change it to this:

         arrow1: "",
         arrow2: ""

Note: There is not a space between the quotes. The quotes are right up against each other.

Then, you will need to style the button in the StyleSheet tiddler. The way that the HoverMenuPlugin works, I think you may be limited to using a single image (not one for hide and another one for show). Here is the way to access the button through CSS:

a.HideSideBarButton {

}

You will have to set the display as block (or similar, see here: http://www.w3schools.com/cssref/pr_class_display.asp) and then set the width and height, otherwise it seems to just collapse into a small sliver. Then, you could set the background image to whatever image you'd like to use, through: background-image: url(image-name.jpg);

To accomplish something like the method used to hide the page when searching, you could install the search plugin from the http://classic.tiddlywiki.com site that I mentioned (here: http://classic.tiddlywiki.com/#SimpleSearchPlugin). You could then style the results area to cover the entire page. If you alter the CSS for it sufficiently, you should be able to get something like the style seen on the Wikipedia page.

I hope this helps!
Hiru

[K]

It does help, and I will implement this. 'll work when I have more time. I just need to fix up the search bar.

[Hiru Yoru]

Hi,

Have you tried specifying a width? Also, you have to remove the border from the search box in order to get the Wikipedia effect:

#sHeader input.searchField {
   box-shadow: 0 1px 1px rgba(0,0,0,0.05) !important;
   border: none;
   width: 150px;
   padding: 2px 4px 2px 4px;
}

You can change the height by changing the font-size. If you want to add some space to the left, use margin-left, which will allow more space between it and the search button image.

I hope this helps!
Hiru

[K]

It's looking good. Looking closely, wikipedia's search box doesn't actually align to the text perfectly. Doing some inspecting, an overlay forms when the search box is clicked. And then people don't notice that when the page is obscured. Although I have seen some tutorials on how to implement this, I have no idea how to integrate it into tw.

Try looking at it on chrome.

[Hiru Yoru]

Okay, I created fixes for the problems you mentioned.

I've attached files for you.

Here are descriptions:

PageTemplate.txt = a revised page template with an added div to cloak the page
SearchPlugin_with_changes_by_Hiru.txt = a revised search plugin that will make changes to the search box that allows the cloak plugin to work
SearchCloakPlugin.txt = a plugin I created to cloak and uncloak the page when searching

First, backup your current copy of TiddlyWiki. This is important, just in case.

Secondly, replace your PageTemplate with the one provided.

Then, remove the "systemConfig" tag from the searchPlugin you have installed. Create a new tiddler and name it "searchPlugin2" and then fill it with the contents of the .txt file I provided, then tag it "systemConfig"

Lastly, create a new tiddler and name it "SearchCloakPlugin" -- then tag it with "systemConfig" and copy the contents of SearchCloakPlugin.txt into it.

I think that this may be the most I can do, but I hope that this helps you.
Hiru







On Thursday, December 8, 2016 at 4:00:37 PM UTC-5, K wrote:

It's looking good. Looking closely, wikipedia's search box doesn't actually alight to the text perfectly. Doing some inspecting, an overlay forms when the search box is clicked. Although I have seen some tutorials on how to implement this, I have no idea how to integrate it into tw.

[K]

Thanks for the prompt reply. So that's how you implement the code into tiddlywiki. However, it doesn't seem to work.

I think the issue might be how the plugin handles it.

>

        txt.setAttribute("onfocus", "javascript:cloak()"); // change made by Hiru
	txt.setAttribute("onblur", "javascript:uncloak()"); // change made by Hiru

[Hiru Yoru]

Edit: I apologize. I did not copy /*** and ***/ around the table at the top of the SearchCloakPlugin. Please add them before and after the table, like this:

/***

|!Name|SearchCloakPlugin|
|!Created by|Hiru|
|!Version|0.0.1|
|!Description|Works with tweaks to the searchPlugin to allow the page to be obscured when search results are being provided.|
***/
/*{{{*/
function cloak() {
    document.querySelector("#searchCloak").style.display = "block";
}
function uncloak() {
    document.querySelector("#searchCloak").style.display = "none";
    document.querySelector("#searchResultPanel").style.display = "none";
}
/*}}}*/

That should fix everything. Please ignore the below previous message.
Hiru


I've been using the copy of TiddlyWiki that you sent me. After making those changes to the TiddlyWiki, it worked for me without any problem.

Have you made a lot of changes since the version you sent me? That could be interfering with it.

I've attached a screenshot of what it looks like for me after making changes. If you need me to, I could upload a copy of the edited TiddlyWiki for you.

Let me know.
Hiru

[Hiru Yoru]

I have added a fix through an edit to a previous post. Edits don't necessarily show up in the e-mails that you receive, so I'm making this note to inform you. ~ Hiru

[K]

To clear up any confusion; I noticed the error with the problem and already corrected that. But there was no overlay forming even though it did exist; maybe because I have done some modifications. I will be attaching the latest copy here - with the your fixes added. (I didn't know how to do comments so I just deleted the offending arrangement of letters.

[Hiru Yoru]

Here. I've attached it working. I had to make several changes. But, it tests as working now.

[K]

This is really great. Thanks. Might have other questions in the future. You've been really helpful.

I guess that "empty" tiddlywiki file up there can be used by anyone with the tiddlysaver jar. If they want to.

[K]

I've noticed a mistake, but I fixed it. The overlay works, but clicking on a search result doesn't open the page. It jsut closes the overlay.

I fixed it by going to the search cloak plugin and deleting one line. The final result is here:

function cloak() {
    document.querySelector("#searchCloak").style.display = "block";
}
function uncloak() {
    document.querySelector("#searchCloak").style.display = "none";
}