Width on desktops is too restrictive

[Perelandra0x309]

What's the problem you want solved?

On desktops the width of the used view is about 1/3 of the available screen width on my 22" monitor

Is there a solution you'd like to recommend?

I was able to modify the style.css to remove the max-width restriction. It would be nice to have an option in the settings to set a width for the main content section. There are two locations where a max-width is defined- lines 325 and 595.

For example, I changed:

  body {
    width: 100%;
    max-width: var(--measure);
    margin: 0;
  }

to

  body {
    width: 96%;
    margin: 0;
  }

[black-puppydog]

Hi @Perelandra0x309, I actually agree with you on this one, but the column width was quite deliberately chosen. See %/dyC6QfS7BZ55s4ISqvPIZCtsMCpPTDid33q/6ky7n0=.sha256 for discussion, including yours truly. :stuck_out_tongue:

However, I'd love to have some css styling available to people who like to skin/mod their oasis. Maybe we could have a mechanism to load from ~/.config/oasis/custom.css ?

[Perelandra0x309]

Thanks for that link, that's exactly the dilemma. I really like Blaine's post near the end talking about line height and readability. He also mentions the example of people preferring different mouse tracking speeds, which I think is a perfect analogy. Not everyone likes the same line width either, so this should be an adjustable setting.

Over many years I have wondered why monitors are landscape, and not portrait like books. It makes no sense to me, especially now that most things are done on the web. If I am reading a news website it would be so much more natural to have it in the same format as a book. I've contemplated attempting to change over to a portrait monitor layout but have yet to follow through.

Alternately, I can think of a 3 pane layout that would work well with landscape monitors, and still keep the actual posts to 1/3 or 1/2 screen width. Adding in a pane that displays one entry for each thread (title only, or a summary with participants) then on another pane the selected thread's posts would all be displayed. Sort of like the 3 paned email layout. I still haven't gotten used to Oasis yet with the way it organizes things. There seem to be a lot of ways to organize the thread (latest, topics, summaries, threads) that I feel like I am missing posts if I only stick to one or two. It seems like I have to cycle through all 4 to see everything. Having one pane display all the threads of those you follow that have posts in would be easier to keep track of recent posts. But this is a different request really, only related in that it keeps the smaller line length that some people prefer.

The real solutions I see to this issue are either:

• A setting to define line length or width by fixed pixel or %
• Custom css or themes

On the theme option, I tried to find where the included theme options in Oasis are stored but could not locate them. Are these hard coded? They seem like they are just CSS definitions, so it should be easy to add other non-color related CSS to them as well to control other layout attributes. I would make a theme if I know where they are located.

[black-puppydog]

https://github.com/fraction/oasis/blob/2d4063e2ddb2b8807ef646d79d6bc87a642c8a23/src/assets/style.css#L44

I think this is where that's set, as a multiple of the width of an "m" letter. the --measure is then referenced further down while setting the width for main:

https://github.com/fraction/oasis/blob/2d4063e2ddb2b8807ef646d79d6bc87a642c8a23/src/assets/style.css#L596

[Perelandra0x309]

Yes, that is what I did in my initial post, edited style.css directly.

I looked through the code and saw the themes are being loaded from module @fraction/base16-css. So I edited one of those themes, and modified --measure however the css in the themes are overridden by the oasis css definitions:

So we would need either a change to the way the themes define (and override) the oasis provided css styles or a setting specifically to define width.

[christianbundy]

Thanks for documenting this issue!

If you want to modify theme CSS variables (e.g. colors), you have to do it in a theme. If you want to modify Oasis CSS variables (e.g. width) you'll need to do it in Oasis. If you set --measure/etc in a theme, it will be overwritten because the Oasis CSS runs afterward.

Yes, that is what I did in my initial post, edited style.css directly.

Yep, this is the right move, I'd continue to do this (and/or add a 'custom CSS' field in a pull request).

[black-puppydog]

FWIW, I'd really favor a custom css file as the backing for a field (rather than e.g. storing it as a string in the json config) and would actually be okay with having the file mechanism without the UI work to expose it in the settings. Maybe just some text in the documentation and/or the startup terminal output, like for the rest of the config. Standard text editors are pretty good at syntax checking for css, and I think replicating a fully-featured css editor in the settings dialog is out of scope and unnecessary.

[christianbundy]

I'd be fine with that. :+1:

[Perelandra0x309]

OK I'll try to put together a PR which will create a stylesheet link in the page header if a "custom-style.css" file exists in the user's oasis config path (where default.json would also be). I put together something that works, following what was done with the other style sheets. However because the custom-style.css might not exist if the user doesn't create one just adding that link to the header results in a 404 console error, so I added a function to check if the file exists before adding the link. I don't know if I did this right, this is my first time working in node.js, but after trying a few examples I found online I found one way that works to check the existence of a file. Here is the diff for that file, if there is a better way to do this let me know so I can modify it before creating the PR. The commented out lines are things I tried which did not seem to work (I'll remove those before the final commit).

diff --git a/src/views/index.js b/src/views/index.js
index 13d9f07..7fc6fe6 100644
--- a/src/views/index.js
+++ b/src/views/index.js
@@ -1,5 +1,9 @@
 "use strict";

+const path = require("path");
+const envPaths = require("env-paths");
+const fs = require("fs");
+
 const debug = require("debug")("oasis");
 const highlightJs = require("highlight.js");

@@ -81,6 +85,25 @@ const template = (titlePrefix, ...elements) => {
       )
     );

+  const customLink = (filename) => {
+    const customStyleFile = path.join(envPaths("oasis", { suffix: "" }).config, filename);
+  //  fs.stat(customStyleFile, function(err, stat) {
+  //    if(err == null) {
+  //      return link({ rel: "stylesheet", href: filename });
+  //    } else {
+  //      return "test";
+  //    }
+  //  });
+  //  return fs.promises.access(customStyleFile, fs.constants.F_OK)
+  //         .then(() => link({ rel: "stylesheet", href: filename }))
+  //         .catch(() => "test");
+    try {
+      if (fs.existsSync(customStyleFile)) {
+        return link({ rel: "stylesheet", href: filename });
+      } 
+    } catch (error) { }
+  };
+
   const nodes = html(
     { lang: "en" },
     head(
@@ -88,6 +111,7 @@ const template = (titlePrefix, ...elements) => {
       link({ rel: "stylesheet", href: "/theme.css" }),
       link({ rel: "stylesheet", href: "/assets/style.css" }),
       link({ rel: "stylesheet", href: "/assets/highlight.css" }),
+      customLink("/custom-style.css"),
       link({ rel: "icon", type: "image/svg+xml", href: "/assets/favicon.svg" }),
       meta({ charset: "utf-8" }),
       meta({

[Perelandra0x309]

I also tinkered around with trying to add a button in Settings that would open the custom-style.css in the OS's default text editor, but haven't gotten it to work yet. I'm not sure if I am going to troubleshoot much more if that's not really a desired feature.

[christianbundy]

Here is the diff for that file, if there is a better way to do this let me know so I can modify it before creating the PR.

Please feel free to make a PR and I (or someone else) can take a look.

[Perelandra0x309]

Thanks for accepting the PR!