Cloudron Forum

@froodle said in New UI Sneak peak and review:

@dev-cb I love all these changes! Please consider raising this as a PR so I can give proper credit

thanks, will do

@osobo said in New UI Sneak peak and review:

@necrevistonnezr Thanks for your feedback. You're right ! I've cleared the cache and ... voila

Also here in the menu noticeable: The icons and their colorful boxes show some indecisiveness in terms of the spacing, sizing and border-radius. They are almost a circle, but not yet. Or in other peoples eyes almost rounded rectangles. In design should be no doubt, always decisions

@froodle thanks for the work. Great application and very useful in daily use!

But the latest UI changes feel a bit imbalanced to me and less organized. I think the biggest driver for that feeling is the border-radius of the icon boxes and the cards. Inconsistencies in sizing and spacing of the icons as well as too less padding for the icons also add to the feeling that something’s off.
The considerably strong stroke-width of the icons in comparison to the light font-weight of the tool titles does rather separating icon and text than connecting them visually to one item.
Also the border-width of the cards is visually too strong. Reducing the border-width or lighten the border-color. By the way, also noticeable inconsistencies in the border-widths (0.1rem in the search input vs. 2px icon cards).

Sounds quite harsh, meant as constructive feedback

I quickly sketched the changes in the dev inspect tool and saved the changes. Here is the comparison and the adjustments. Hope this is helping you to find the right balance!

original:

adjusted:

diff --git a/pdf/css/bootstrap.min.css b/pdf/css-edit/bootstrap.min.css
index 5cfa298..d262c73 100644
--- a/pdf/css/bootstrap.min.css	
+++ b/pdf/css-edit/bootstrap.min.css	
@@ -4389,12 +4389,13 @@ fieldset:disabled .btn {
 }
 
 .nav-link {
-  display: block;
+  display: flex;
   padding: 0.5rem 1rem;
   color: #0d6efd;
   text-decoration: none;
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
     border-color 0.15s ease-in-out;
+  align-items: center;
 }
 
 @media (prefers-reduced-motion: reduce) {
diff --git a/pdf/css/home.css? b/pdf/css-edit/home.css?
index a6f89ed..91a0204 100644
--- a/pdf/css/home.css?	
+++ b/pdf/css-edit/home.css?	
@@ -5,7 +5,7 @@
   font-size: 16px;
   margin-bottom: 2rem;
   padding: 0.75rem 3.5rem;
-  border: 0.1rem solid var(--md-sys-color-outline-variant);
+  border: 1px solid var(--md-sys-color-outline-variant);
   border-radius: 3rem;
   outline-color: var(--md-sys-color-outline-variant);
 }
@@ -19,12 +19,12 @@
 .features-container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(15rem, 3fr));
-  gap: 25px 30px;
+  gap: 30px 30px;
 }
 
 .feature-card {
-  border: 2px solid var(--md-sys-color-surface-5);
-  border-radius: 2rem;
+  border: 1px solid var(--md-sys-color-surface-5);
+  border-radius: 1.75rem;
   padding: 1.25rem;
   display: flex;
   flex-direction: column;
@@ -47,13 +47,13 @@
 }
 
 .feature-card .card-text {
-  flex: 1;
+  font-size: .875rem;
 }
 
 .feature-card:hover {
   cursor: pointer;
-  transform: scale(1.1);
-  box-shadow: var(--md-sys-elevation-3);
+  transform: scale(1.025);
+  box-shadow: var(--md-sys-elevation-2);
 }
 
 .card-title.text-primary {
@@ -79,11 +79,12 @@
 }
 
 #tool-text {
-  margin: 0.5rem 0.5rem 0rem;
+  margin: 0.0rem 0 0 1.25rem;
 }
 
 .card-title {
   margin-bottom: 1rem;
+  font-size: 1rem;
 }
 
 /* Only show the favorite icons when the parent card is being hovered over */
diff --git a/pdf/css/navbar.css? b/pdf/css-edit/navbar.css?
index ddeab5a..a8845f2 100644
--- a/pdf/css/navbar.css?	
+++ b/pdf/css-edit/navbar.css?	
@@ -75,7 +75,7 @@
 }
 
 .icon-text {
-  margin-left: 4px;
+  margin-left: 8px;
   margin-right: 4px;
   display: inline-flex;
   flex-direction: column;
diff --git a/pdf/css/theme/componentes.css? b/pdf/css-edit/theme/componentes.css?
index d767d59..6318212 100644
--- a/pdf/css/theme/componentes.css?	
+++ b/pdf/css-edit/theme/componentes.css?	
@@ -187,8 +187,8 @@ td {
 .feature-card .nav-icon {
   vertical-align: middle;
   font-size: 2rem !important;
-  padding: 0.5rem;
-  border-radius: 1.25rem;
+  padding: 0.75rem;
+  border-radius: 0.9rem;
   color: var(--md-sys-color-surface);
 }
 
diff --git a/pdf/css/theme/font.css b/pdf/css-edit/theme/font.css
index dfb1c1b..f245dd3 100644
--- a/pdf/css/theme/font.css	
+++ b/pdf/css-edit/theme/font.css	
@@ -7,7 +7,7 @@
 
 .material-symbols-rounded {
     font-family: 'Material Symbols Rounded';
-    font-weight: normal;
+    font-weight: 300;
     font-style: normal;
     font-size: 24px;
     line-height: 1;
diff --git a/pdf/css/theme/theme.css? b/pdf/css-edit/theme/theme.css?
index 3c9565d..4f7be33 100644
--- a/pdf/css/theme/theme.css?	
+++ b/pdf/css-edit/theme/theme.css?	
@@ -30,5 +30,5 @@
 }
 
 .no-fill {
-  font-variation-settings: var(--md-sys-icon-fill-0);
+  /* font-variation-settings: var(--md-sys-icon-fill-0); */
 }
\ No newline at end of file

@marcusquinn I took a closer look at Kadence, seems solid work. Thanks for the share.

I was wondering if its possible to register customized blocks based on Kadence default blocks, so registering modified blocks within the Kadence realm, using a plugin or child theme. Do you have experience with that?

Thank you! That seemed to be the issue. Now v7.6.1 is not pre-release flagged anymore.

Hi there,

I am a little confused about the OS requirements for current and past Cloudron versions.

In the docs it does not say.
In the git repo it does not say.
Also in the changelog it does not say.

So when I take a look at the updates section on the settings page of my install, it seems stuck on v7.5.2. Version 7.6.1 is mentioned as a pre-release. But in the changelog I see v8.0.0 as the latest entry.

Therefore I am even not sure what the latest stable Cloudron version is.

Hope somebody can help me out here. What did I miss?

Thanks in advance.

Hi,

I was just noticing that the notification titles in the Cloudron dashboard looked awfully odd. When looking at the theme.scss to check what’s off, I was noticing the following:

The font-weight is set to bold (theme.scss#L1648)

Digging deeper I was noticing, that there were only two @font-face rules defined in (theme.scss#L58-66)

• only two font files are loaded: Light and Regular
• no font-style descriptor, so default font-style: normal would be applied
• no font-weight descriptor, so default font-weight: normal would be applied

Since there are only two font files loaded (Light, Regular) there is no file for the bold/700 weight – unless you’ve installed the font locally on your device.

This will cause the browser to faux bold the notification title. That’s basically just an outline to make the font appear bolder but that leads to crappy results. (more about that phenomenon here)
BTW, the same applies to font-style: If there is no italic font file loaded the browser will slant the font which results in faux italics. (more here)

Here is a comparison of faux (left) and correct (right):

The fix is easy: Load the entire Roboto font family, incl. all italic styles.

Thanks. Great application though.

Thank you! right hints

@girish said in Possible package configuration issue with bounce processing webhook endpoint:

If so, curl https://sub.domain.tld should work. Does that work ?

Correct – works as expected.

@girish said in Possible package configuration issue with bounce processing webhook endpoint:

I somehow suspect the request is going to another app or something else. Listmonk doesn't use nginx, so I am not sure why you get a response from nginx...

Nevermind. In the meantime, I found the issue.. Wrong TLD.

Hi,

according to the official Listmonk docs, there is an API endpoint for recording bounces.
See: Webhook API

But the response is 405 Not Allowed (nginx) – anonymized:

curl -X POST -k -u "admin:password" https://sub.domain.tld/webhooks/bounce \
    -H "Content-Type: application/json" \
    --data '{"email": "eample@listmonk.app", "campaign_uuid": "e8ad4fdb-52e3-4907-b6a3-1c89c7dcb67f", "source": "api_test", "type": "hard", "meta": "{\"additional\": \"info\"}}'

<html>
<head><title>405 Not Allowed</title></head>
<body>
<center><h1>405 Not Allowed</h1></center>
<hr><center>nginx</center>
</body>
</html>

You might notice that I had to use the -k flag to ignore SSL issues since that was the first response without ignoring SSL issues:

curl: (60) SSL certificate problem: self signed certificate
More details here: https://curl.se/docs/sslcerts.html

curl failed to verify the legitimacy of the server and therefore could not
establish a secure connection to it. To learn more about this situation and
how to fix it, please visit the web page mentioned above.

Anyone experiencing same issue?

Hi @girish!

Thanks. I’ll check, but I guess This is working well so far ..

#!/bin/bash
 
# n8n auto backup process
 
# clean up to get all changes
 
rm -r /app/data/n8n-backup/workflows/
rm -r /app/data/n8n-backup/credentials/

# change directory
 
cd /app/code

# start export process
npx n8n export:workflow --backup --output /app/data/n8n-backup/workflows/
npx n8n export:credentials --backup --output /app/data/n8n-backup/credentials/ # save credentials encrypted
 
# npx n8n export:credentials --decrypted --backup --output /app/data/n8n-backup/credentials/ # save credentials decrypted
 
# Use gosu: gosu cloudron:cloudron cmd --param
 
# git add files, commit and push
gosu cloudron:cloudron git -C /app/data/n8n-backup/ add .
gosu cloudron:cloudron git -C /app/data/n8n-backup/ commit -m "Auto backup ($(date +'%Y-%m-%d'))"
gosu cloudron:cloudron git -C /app/data/n8n-backup/ push

# set ownership back to cloudron (fix)
 
chown -R cloudron:cloudron /app/data/n8n-backup/

I set up a git repo to backup n8n workflows and credentials via a bash script which exports via npx n8n export and pushes the data to the repo. The script is started via crontab.

Now a while ago it was running perfectly, no issues. Then suddenly (I assume after package update or Cloudron update) it stopped. Git is not pushing anymore due to an repo ownership issue:

fatal: detected dubious ownership in repository at '/app/data/n8n-backup'
To add an exception for this directory, call:
git config --global --add safe.directory /app/data/n8n-backup

This is the directory content inkl. rights:

root@package:/app/data/n8n-backup# ll
total 28
drwxr-xr-x 5 cloudron cloudron 4096 Jul  7 06:00 ./
drwxr-xr-x 7 cloudron cloudron 4096 Jul  5 16:57 ../
drwxr-xr-x 8 cloudron cloudron 4096 Jul  6 20:47 .git/
-rw-r--r-- 1 cloudron cloudron  562 Jun 14 13:58 README.md
drwxr-xr-x 2 root     root     4096 Jul  7 06:00 credentials/
-rwxr-xr-x 1 cloudron cloudron  710 Jun 14 13:58 start-backup.sh*
drwxr-xr-x 2 root     root     4096 Jul  7 06:00 workflows/

The script start-backup.sh is started by the crontab, setup via the app cron settings in Cloudron UI. So its run as root. Also the git command is then called as root. Since the ownership of .git/ is cloudron git is having doubts and stops.

Now if I change the ownership of all content in /app/data/n8n-backup/ to root, then start the script, all works fine. But after an update of the app the ownership is reset to cloudron. Makes sense from security perspective I guess.

Following the suggested git solution (adding the repository directory to the safe list) I am facing the problem that I can not write in the file system:

root@package:/app/code# git config --global --add safe.directory /app/data/n8n-backup 
error: could not lock config file /root/.gitconfig: Read-only file system

Now adding the setting to the local config of the repository and switching back to cloudron ownership is not working either since git is not recognizing the git repository. Also if I run as user cloudron no success:

root@package:/app/data/n8n-backup# runuser -l cloudron -c 'git status' 
fatal: not a git repository (or any of the parent directories): .git

The su command helps with the git issue but does not work completely since then the npx command is not found.

Now I could probably add chown -R root:root /app/data/n8n-backup/ as first command to the script but I guess that is not the best way to go.

Anyone some ideas to help me solving this?

@girish said in Cal.com (was Calendso) - Calendly Alternative:

Time to give this another try...

Thanks for the response and your will to give it fresh start!

What can we do to get this rolling? Since cal.com is now also working with SOGo quite well (it wasn’t at all for quite a while) I hope that there is some movement in the package development

Same issue here.

Installed package io.directus9.cloudronapp@1.24.0 on Cloudron v7.3.4

@tshirt-chihuahu thank you for being so enthusiastic about this one!

@nebulon I noticed that the deprecated notice was added in Mar, 2021.

Unfortunately there is no official development roadmap so it might just take much longer.

@nebulon said in Customizing Jitsi:

Tweaking via interface_config.js is indeed not supported by the package currently.

Do you think that might change soonish?

@UweG said in Error installing community nodes on n8n:

Is it generally not possible to install community nodes on Cloudron-n8n?

It is possible, I am using io.n8n.cloudronapp@2.14.0 (n8n v0.201.0):

1. open the app terminal
2. go to custom extensions folder cd /app/data/custom-extensions/
3. install your desired community packages, e.g. npm i n8n-nodes-directus
4. start editing the file /app/data/env with the File Manager and add these line:

export N8N_CUSTOM_EXTENSIONS=/app/data/custom-extensions/

5. Last but not least: restart the app and find the node in the Add Node panel