Optimize (total expenses) box

Rafael_Sanchis
vor 1 JahrThu, September 28, 2023 at 9:08 PM UTC
17Antworten
Answered

I Need to optimize the HTML CCS total Expenses box to include third line and be able to change the font sizes for each line.

Appreciate the help.

let gastos := sum((select Gastos).Monto_Gastos);
let css := "
<style>
.grid-container {
    display:grid;
    font-size:small;
    grid-template-columns:repeat(auto-fill, minmax(11em, 1fr));
    grid-gap:2px 0px;
}
.gridFormat, .gridHeader{
    text-align:center;
    font-family:Helvetica;
    font-size:small
}
.gridFormat {
    font-size:small;
    padding:1em;
    color:dimgray;
    border:thin solid silver;
    background-color:#FFF;
}
.gridHeader {
    grid-column: 1 / -1;
    border:2px solid green;
    padding:5px;
    background:radial-gradient(circle, mediumorchid 30%, green);
    color:white;
    font-size:small;
}
section {
    color:green;
    font-size:large;
    font-weight:bold;
}
</style>
";
let content := "
<aside class = 'grid-container'>
<aside class = 'gridFormat '>&#x1f50e Total Expenses <br><br><section>" +
    gastos +
    "</section></aside>

</aside>
";
html(css + content)

mirko3
vor 1 JahrFri, September 29, 2023 at 6:46 AM UTC
Gemeldet - anzeigen

Hi Raphael, there is no need for a grid here. Try it this way. Mirko

let value1 := "Raphael";
let value2 := "Sanches";
let css := "
<style>
.asideFormat{
    text-align:center;
    font-family:Helvetica;
    font-size:small;
    padding:1em;
    color:dimgray;
    border:thin solid silver;
    background-color:#FFF;
}
.section1 {
    color:green;
    font-size:medium;
    font-weight:bold;
    padding:1em .5em .5em .5em;
}
.section2 {
    color:red;
    font-size:x-large;
    font-weight:bold;
    padding:.5em .5em 0 .5em;
}
</style>
";
let content := "
<aside class='asideFormat'>&#x1f50e Total Expenses<section class='section1'>" +
    value1 +
    "</section><section class='section2'>" +
    value2 +
    "</section>
</aside>
";
html(css + content)

- Rafael_Sanchis
- vor 1 JahrFri, September 29, 2023 at 7:11 AM UTC
- Gemeldet - anzeigen
Much better Mirko Thanks again

Rafael_Sanchis
vor 1 JahrFri, September 29, 2023 at 8:00 AM UTC
Gemeldet - anzeigen

let gastos := sum((select Gastos).Monto_Gastos);
let info := "Gastos de Enero a Septiembre";
let css := "
<style>
.asideFormat{
    text-align:center;
    font-family:Helvetica;
    font-size:small;
    padding:1em;
    color:dimgray;
    border:thin solid silver;
    background-color:#FFF;
}
.section1 {
    color:green;
    font-size:medium;
    font-weight:bold;
    padding:1em .5em .5em .5em;
}
.section2 {
    color:green;
    font-size:xx-large;
    font-weight:bold;
    padding:.5em .5em 0 .5em;
}
</style>
";
let content := "
<aside class='asideFormat' style='text-align:left; font-family:Helvetica; font-size:small; padding:1em; color:dimgray; border:thin solid silver; background-color:#FFF;'>
    &#x1f50e Total Expenses 2023
    <section class='section1' style='color:green; font-size:large; font-weight:bold; padding:0em .0em .0em .0em;'>" +
    gastos +
    "
    </section>
    <section class='section2' style='color:silver; font-size:small; font-weight:bold; padding:.0em .0em 0 .0em;'>" +
    info +
    "
    </section>
</aside>
";
html(css + content)

The only way I could change the attributes.

mirko3
vor 1 JahrFri, September 29, 2023 at 8:57 AM UTC
Gemeldet - anzeigen

The problem is that if there are several function fields with css, the last one prevails. In my opinion, your solution is the only one that works, inserting the style conditions directly into the html tag.

- Rafael_Sanchis
- vor 1 JahrFri, September 29, 2023 at 9:06 AM UTC
- Gemeldet - anzeigen
- Rafael_Sanchis
- vor 1 JahrFri, September 29, 2023 at 11:11 AM UTC
- Gemeldet - anzeigen
- Rafael_Sanchis
- vor 1 JahrFri, September 29, 2023 at 3:19 PM UTC
- Gemeldet - anzeigen
How can this type of graph bar be implemented.

mirko3
vor 1 JahrSun, October 1, 2023 at 7:37 AM UTC
Gemeldet - anzeigen

The script works in my environment (Mac-App, Safari, Firefox). Not every browser understands the manipulation of the tag <progress>. Keep in mind that css occupies Ninox. Not every variant will run there. Give it a try. Mirko

let maxValue := 35000;
let currValue := 9355.34;
let progressPoint := round(currValue * 100 / maxValue);
let info := "Gastos de Enero a Septiembre";
let css := "
<style>
progress::-webkit-progress-bar {background-color: silver; width: 100%;border-radius:.5em;}
progress::-webkit-progress-value {background-color: rebeccapurple !important;border-radius:.5em;}
progress::-moz-progress-bar {background-color: silver !important;}
progress {
    width: 100%;
    height: 10px;
    background:silver;
    border: thin solid gray;
    border-radius:.6em;
    accent-color: rebeccapurple;
}  .grid-container {
    display:grid;
    grid-template-columns:auto auto;
    border:thin solid silver;
    background-color:white;
    padding:.5em;
}
.single{
    font-size:medium;
    text-align:center;
    color:silver;
    font-family:Helvetica;
}
.double {grid-column: 1 / -1;}
.right {text-align:right;}
.left {text-align:left;}
</style>
";
let content := "
<aside class = 'grid-container'>
<aside class = 'double' style='text-align:center; font-family:Helvetica; font-size:small; color:dimgray; background-color:#FFF;'>&#x1f50e Total Expenses</aside>
<aside class = 'double' style='text-align:center; color:green; font-size:large; font-weight:bold;'>" +
    currValue +
    " $</aside>
<aside class = 'double' style='color:silver; font-size:small; font-weight:bold;'>" +
    info +
    "</aside>
<aside class = 'single left' style='color:silver; font-size:small; font-weight:bold;'>0</aside>
<aside class = 'single right' style='color:silver; font-size:small; font-weight:bold;'>" +
    maxValue +
    " €</aside>
<aside class = 'double'><progress value='" +
    progressPoint +
    "' max='100'></progress></aside>
</aside>
";
html(css + content)

- Kruna
- vor 1 JahrSun, October 1, 2023 at 11:13 AM UTC
- Gemeldet - anzeigen
Hallo zusammen und einen schönen Sonntag ,

ich finde das Thema sehr interessant und habe auch schon ähnliches (auch hier aus dem Forum) umgesetzt.

Ich finde jedoch Mirko's Version übersichtlicher und nun bin ich dabei, diese zu adaptieren. Ich bin jedoch bei einer Sache 'hängengeblieben' und zwar - wie kann man positive Zahlen grün und negative Zahlen rot anzeigen?

Mein erster Ansatz ist 'irgendetwas mit if...then...else', aber da komme ich nicht weiter.

Hast Du eine Idee, wie ich das umsetzen kann?

Vielen Dank schon mal und Gruß Kruna
- mirko3
  
  vor 1 JahrSun, October 1, 2023 at 1:42 PM UTC
  
  Gemeldet - anzeigen
  Ein Beispiel. Ich habe es nur mit direkter Formatierung im HTML-Tag geschafft. Hier gibt es auch noch Anregungen dazu. https://forum.ninox.de/t/q6hvnzc/html-tabellen. Mirko
  
  let ANZAHL := 13; let content := " <p style=background-color:" + switch true do case ANZAHL > 30: "DarkOliveGreen" case ANZAHL < 2: "IndianRed" default: "DodgerBlue" end + "> " + ANZAHL + " </p>"; html(content)
- Rafael_Sanchis
  
  vor 1 JahrSun, October 1, 2023 at 1:46 PM UTC
  
  Gemeldet - anzeigen
  Thanks again Mirko.
  
  The only need is to align the 0 with the 35000
- Kruna
  
  vor 1 JahrMon, October 2, 2023 at 10:39 AM UTC
  
  Gemeldet - anzeigen
  MirkoHallo Mirko, ich habe versucht Dein Beispiel umzusetzen bzw festgestellt, dass ich mich nicht richtig ausgedrückt habe.
  
  Mein Ziel war es, dass die Zahl ansich grün bzw rot ist, je nach dem ob positiv oder negativ.
  
  Ich habe dann anstatt 'background-color' einfach 'color' eingesetzt und es hat funktioniert. Leider bekomme ich es nicht im ganzen Script hin. Ich weiß leider nicht, wo/wie ich das CodeSchnipsel im ganzen Script (ich habe obriges Script benutzt, welches Du Rafael vorgeschlagen hast) einfügen soll.
  
  Gefühlt überall eingesetzt, hat es leider nicht geklappt. Mein Wissen ist aber auch sehr begrenzt was HTML bzw CSS angeht.
  
  Gruß Kruna
- Rafael_Sanchis
  
  vor 1 JahrMon, October 2, 2023 at 1:55 PM UTC
  
  Gemeldet - anzeigen
  Better for me, but difficult when change something other thing changed now the progress bar is small

Rafael_Sanchis
vor 1 JahrWed, October 25, 2023 at 5:36 PM UTC
Gemeldet - anzeigen

Mirko

Hi Mirko need optimize this.

<aside class = 'double' style='text-align:left; color:grey; font-size:small; font-weight:bold;'>" +
    html("
             <span style=""color: black""> RYM Link </span>" +
    ":|" +
    "<br>") +
    Vrym +
    " </aside>

The Variable Vrym came from a field url in the same table need to View and click the url

And can't view the two color only one

How can I do that.

- mirko3
- vor 1 JahrThu, October 26, 2023 at 3:44 PM UTC
- Gemeldet - anzeigen
To implement a link, do this.

<a href='" + Vrym + "'>Rym-Link</a>
- Rafael_Sanchis
- vor 1 JahrThu, October 26, 2023 at 6:37 PM UTC
- Gemeldet - anzeigen

Rafael_Sanchis
vor 1 JahrThu, October 26, 2023 at 9:39 PM UTC
Gemeldet - anzeigen

Sorry Mirko

Error: Field not found a

<aside class = 'double' style='text-align:left; color:grey; font-size:small; font-weight:bold;'>" +
    html("
             <span style=""color: black""> RYM Raiting </span>" +
    ":|" +
    "<br>") +
    <a href='" + Vrym + "'>Rym-Link</a> +
    " </aside><aside class = 'double' style='text-align:left; color:grey; font-size:small; font-weight:bold;'>" +
    html("
             <span style=""color: black""> RYM Raiting </span>" +
    ":|" +
    "<br>") +
    <a href='" + Vrym + "'>Rym-Link</a>
    " </aside>

Content aside

Status Answered
1 „Gefällt mir“ Klicks
vor 1 JahrThu, October 26, 2023 at 9:39 PM UTCZuletzt aktiv
17Antworten
285Ansichten
4 Folge bereits

Willkommen in der Ninox-Community

Optimize (total expenses) box

17 Antworten

Content aside

Übersicht