css for phones?

[Vajra Natha]

Does anyone know if anyone has ever developed alternative css for TW classic so that it displays well on small screens? I'm finding myself using it more on the phone nowadays and the widescreen presentation isn't so comfortable.

[Vajra Natha]

I just played about with the StyleSheet tiddler and came up with this which almost does what I want, maybe it might be useful for others...

img { max-width: 100% }

@media only screen and (max-width: 600px) {

.header {display: none;}
#tiddlerDisplay {position:absolute; top:0px; width:70% }
#mainMenu {position:relative; }
#sidebar {position:relative; }
#displayArea{padding:0.2em;margin:0;}

}

[Alfonso Arciniega]

Vajra,

The attached works for me. It only increases the font on the tiddlers. Obviously, change the extension from .txt to .html

You may want to try the FontSizePlugin as well, also attached.

Alfonso

[Yakov]

Hi everyone,

I'm using TW on mobile for quite a while already and have multiple adjustments for it. They are far from ideal for sharing (could be delivered in a smaller number of tiddlers with less mess), but it's a good excersice to share them at least "as is" so that I can further adjust them (and apply some bits to the core in the end).

I've prepared their description in a showcase TW which you can open on mobile and try:
http://yakovl.bplaced.net/TW/materials_for_discussions/mobile_styles/

Let me know what you think! This thread is a nice occasion for me to put these together and I'll probably push this forward to an adaptive theme/something for the TWC core at some point; this requires more work, though.

Best regards,
Yakov.

[Vajra Natha]

Hey that's great Yakov thank you.

I've downloaded it & will play about & let you know what I think.

My first impression is that what you have created is not responsive css that changes the design for small screens, but simply a different design.

As I like the classic 3 column TW design for use on the computer (one of the reason I use TW classic rather than 5) I don't think your solution isn't what I'm looking for. I have a TW with about 350 tiddlers that I use to organise my whole life that I have used since about 2007. I share it between my devices with dropbox. The css I created above means that when the screen is less than 600pxs the 3 columns collapse down to 2 only - which gives me full access to the menu & sidebar but more space for the tiddlers that are displayed. It is an over simple solution & I have found one problem with it but I think I'll put a bit more work into it and repost here at some point.

I will explore some of the things you have suggested to see if I can incorporate them into the kind of design I want.

Best wishes
Vayira

[Yakov]

Hi Vajra,

My first impression is that what you have created is not responsive css that changes the design for small screens, but simply a different design.

sure, that's correct, the state is actually "styles for mobile + first steps to make it look ok on PC". Like in TW5, this layout is far from ideal because on big screens the content should be put into a container with limited width (which is easier to read than full-width container), the font size should be smaller, some interface elements should reappear etc. If you have any specific suggestions, let me know. I've created an experimental page to improve the current setup and will let you know once I come up with something more interesting.

Best regards,
Yakov.

[Yakov]

Hello everyone,

today I'm glad to share with you the first consistently responsive TiddlyWiki theme/plugin: https://responsive.tiddlyhost.com#ResponsiveThemePlugin

It's a pre-release (0.5.2, not updateable via EEP, with some todos left), but something that seems to be good enough to share already. After getting some feedback and making some fixes and adding features, I'm going to move it to GitHub for a full release and consider using it in classic.tiddlywiki.com and others, and also incorporating some parts of it to the core. For design notes, backlog, etc, take a look at GettingStarted which is basically the place for my dev notes for now. Let me know what you think!

Best regards,

Yakov.

суббота, 2 мая 2020 г. в 00:46:36 UTC+3, Yakov:

[Reto]

How relates this to StyleSheet? Can any Stylesheets be used? What exactly do I have to do to install it?

[Yakov]

StyleSheet is "included", meaning that it is applied after the ResponsiveStyleSheet; I've specifically made sure that editing StyleSheet refreshes styles at once, like usually.

The installation is like for a ordinary plugin, only after the first run it will update MarkupPreHead, so to get viewport applied, you'll need to save and reload again.

I've added the "Installation & configuration" section to the extension with additional details, let me know if something is not clear yet.

четверг, 21 сентября 2023 г. в 08:39:56 UTC+3, Reto:

[mark.ke...@gmail.com]

Hello Yakov

Have you made thought about releasing your responsive edition as a standalone version? IE one that I can drop my existing TWC file on and see if I like it?

Thanks

Mark Kerrigan

[mark.ke...@gmail.com]

Looks like I missed the fact I could just install it as a plugin. I think it is definitely a much better base to work from than my efforts on my custom theme.

Thanks

Mark Kerrigan

[Yakov]

Hello Mark,

yes indeed, it is fully implemented as a single plugin, https://responsive.tiddlyhost.com#ResponsiveThemePlugin

I believe all the necessary notes are there in the plugin description (it is both a plugin and a theme to which the plugin switches automatically; both ResponsiveStyleSheet and StyleSheet applied to simplify combining own customizations and stuff from the theme).

Unfortunatelly, Tiddlyhost doesn't support CORS, so updating via EEP is not available yet. I'll probably move it Github at some point to support that (at least if I resume active work on it).

Best regards,

Yakov

пятница, 20 декабря 2024 г. в 02:08:27 UTC+3, mark.ke...@gmail.com: