Dynamic Columns for mobile device support

[RapidCamel]

Idea
When using obsidian on mobile, i.e. dashboard or home become hard to use because the screen is not wide enough for three elements in a row.
A solution would be to not strictly force the three-column grid layout and instead use more dynamic columns.

Approach
I saw that you already imported the mcl multi-column css snippet. I wrapped all elements on the home screen in mcl elements and it works quite well. Also, I altered the build function for open tasks, so that these are also wrapped in multicolumns.

I think this works quite well and would be a nice optimization for mobile.

Code:

---
ELN version: 0.5.0
cssclasses:
  - wide-page
  - dashboard
banner: "![[obsidian-eln-banner.png]]"
banner_y: 0.336
date created: 2023-03-25
author: Frieder Scheiba
note type: dashboard
tags:
  - dashboard
banner_x: 0.5
---

<div class="title" style="color:#edf">HOME</div>

# Project Management

> [!multi-column| center-fixed]
>>- ### [[Projects]]
>>  ```dataview
>>  LIST
>>  FROM #project
>>  WHERE project.status = "active"
>>  ```
>
>>- ### [[Meetings]]
>>  ```dataview
>>  LIST
>> FROM #meeting AND !"assets"
>>  SORT file.mtime.ts ASC
>> LIMIT 6
>>   ```
>
>>-  ### [[Daily Notes]]
>> ```dataview
>> LIST
>>   FROM #daily-note AND !"assets"
>>   SORT file.mtime.ts ASC
>>   LIMIT 6
>>   ```



# Open Tasks

```dataviewjs
const querry = dv.pages('!"assets" AND !"Notes/HowTos"').file.tasks
    .where(t => !t.completed && !t.checked);

let note_list = Array.from(new Set(querry.map(t => t.path).values)).sort();
const n_notes = note_list.length;
let index = 0;

function buildMultiColumnMarkdownBlock(notePaths) {
    let block = `> [!multi-column]\n`;
    for (let path of notePaths) {
        const tasks = querry.where(q => q.path === path);
        if (tasks.length === 0) continue;

        block += `>>- ### [[${path.split("/").pop()}]]\n`;
        for (let task of tasks) {
            block += `>> - [ ] ${task.text}\n`;
        }
        block += `>\n`; 
    }
    //console.log(block);
    return block;
}

// Paginate 3 at a time and wrap in multicolumn callout
while (index + 3 <= n_notes) {
    const group = note_list.slice(index, index + 3);
    dv.paragraph(buildMultiColumnMarkdownBlock(group));
    index += 3;
}

// Remaining 1 or 2
const remaining = note_list.slice(index);
if (remaining.length > 0) {
    dv.paragraph(buildMultiColumnMarkdownBlock(remaining));
}

```

# Experiments

> [!multi-column|center-fixed]
>>- ### [[Processes]]
>>  ```dataview
>>  LIST
>>  FROM #process 
>>  SORT file.mtime.ts ASC
>>  LIMIT 6
>>  ```
>
>>- ### [[Samples]]
>>  ```dataview
>>  LIST
>>  FROM #sample
>>  SORT file.mtime.ts ASC
>>  LIMIT 6
>> ```
>
>>- ### [[Analyses]]
>>  ```dataview
>>  LIST
>>  FROM #analysis 
>>  SORT file.mtime.ts ASC
>>  LIMIT 6
>>  ```

# Resources
> [!multi-column|center-fixed]
>>- ### [[Chemicals]]
>>  ```dataview
>>  LIST
>>  FROM #chemical
>>  SORT file.mtime.ts ASC
>>  LIMIT 6
>>  ```
>
>>- ### [[Devices]]
>>  ```dataview
>>  LIST
>>  FROM #device 
>>  SORT file.mtime.ts ASC
>>  LIMIT 6
>>  ```
>
>>- ### [[Instruments]]
>>  ```dataview
>>  LIST
>>  FROM #analysis 
>>  SORT file.mtime.ts ASC
>> LIMIT 6
>> ```

# Quick Links
> [!multi-column|center-fixed]
> >- ### [[Lists]]  
> >	- [[Processes]]
> >	- [[Samples]]
> >	- [[Analyses]]
> >	- [[Chemicals]]
> >	- [[Devices]]
> >	- [[Instruments]]
>
> >- ### Literature
> >	- [[Books]]
> >	- [[Publications]]
>
> >- ### [[Notes]]
> >  ```dataview
> >  LIST
> >  FROM "Notes" AND !"assets"
> >  WHERE note-type != "tutorial"
> >  SORT file.mtime.ts ASC
> >  LIMIT 6
> >  ```
>
>>- ### Tutorials 
>>   - [[Wiki/HowTos/Obsidian ELN/Obsidian ELN - Getting started]]
>>   ```dataview
>>        LIST
>>        FROM "Notes"
>>        WHERE note-type = "tutorial"
>>        SORT file.mtime.ts ASC
>>        LIMIT 4
>>   ``` 
>
>>- ### Miscellaneous
>>	 - [[Wiki/Miscellaneous/Electrochemical Glossary/Electrochemical Glossary]]
>>	 - [[Conferences]]


# Recently Edited
> [!multi-column|center-fixed]
>>
>>  ```dataviewjs
>>    dv.list(dv.pages('').sort(f=>f.file.mtime.ts,"desc").slice(0, 5).file.link)
>>   ```
>
>>  ```dataviewjs
>>    dv.list(dv.pages('').sort(f=>f.file.mtime.ts,"desc").slice(5, 10).file.link)
>>   ```
>
>>  ```dataviewjs
>>    dv.list(dv.pages('').sort(f=>f.file.mtime.ts,"desc").slice(10, 15).file.link)
>>   ```


# Vault Info
> [!multi-column|center-fixed]
>>- ### 〽️ Stats 
>>-	-  File Count: **`$=dv.pages().length`**
>>-	-  Number of Samples: **`$=dv.pages('#sample AND !"assets"').length`**
>>-	-  Number of Analsyes: **`$=dv.pages('#analysis AND !"assets"').length`**
>>-	-  Number of Processes: **`$=dv.pages('#process AND !"assets"').length`**



```dataviewjs
await dv.view("/assets/javascript/dataview/views/note_footer", {});
```

[fcskit]

I must admit that I haven't tested the ELN vault on mobile devices. Wrapping everything in a multi-column callout may be a workaround for now, but it's a bit cumbersome to edit. I'll see if I can transfer a bit of the multicolumn css magic to the dashboard css to improve the layout on mobile devices.
But it may take some time, since I'm currently trying to migrate most of the core functionality (i.e. templating and creation of the ELN notes) of the ELN into a proper obsidian plugin and that's eating up all my time at the moment.

[fcskit]

Here is a quick fix to address the issue. Add

@media (max-width: 768px) {
    .dashboard div.el-ul>ul {
        grid-template-columns: 50% 50%; /* 2 columns for tablets */
    }
}

@media (max-width: 480px) {
    .dashboard div.el-ul>ul {
        grid-template-columns: 100%; /* 1 column for smartphones */
    }
}

to the dashboard.css snippet.