Fix editor style. Fix render graph

README.md

@@ -1,5 +1,7 @@
 # A simplified Jira clone built with seed.rs and actix
 
+![JIRS](https://raw.githubusercontent.com/Eraden/jirs/master/jirs-client/static/project-icon.svg)
+
 Server: [![builds.sr.ht status](https://builds.sr.ht/~tsumanu/jirs/server.yml.svg)](https://builds.sr.ht/~tsumanu/jirs/server.yml?)
 Client: [![builds.sr.ht status](https://builds.sr.ht/~tsumanu/jirs/client.yml.svg)](https://builds.sr.ht/~tsumanu/jirs/client.yml?)
 

jirs-client/js/css/styledEditor.css

@@ -1,6 +1,8 @@
 .styledEditor {
-    display: grid;
+    display: flex;
-    grid-template-areas: "tab1 tab2" "view view";
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    max-width: 100%;
 }
 
 .styledEditor > input[type="radio"] {
@@ -45,12 +47,12 @@
     border-color: var(--borderInputFocus);
 }
 
-.styledEditor > .navbar.editor {
+.styledEditor > .navbar.editorTab {
-    grid-area: tab1;
+    min-width: 50%;
 }
 
-.styledEditor > .navbar.view {
+.styledEditor > .navbar.viewTab {
-    grid-area: tab2;
+    min-width: 50%;
 }
 
 .styledEditor > .styledTextArea {
@@ -59,7 +61,7 @@
 }
 
 .styledEditor > .view {
-    grid-area: view;
+    min-width: 100%;
     display: none;
     min-height: 40px;
     padding-top: 15px;

jirs-client/src/reports/view.rs

@@ -43,11 +43,19 @@ fn this_month_graph(page: &Box<ReportsPage>, this_month_updated: &Vec<&Issue>) -
         }
     }
 
+    // take log10 from largest amount of issue to calculate how long text will be
     let legend_margin_width = (dominant as f64).log10() * SVG_MARGIN_X as f64;
-    let mut columns: Vec<Node<Msg>> = vec![];
 
+    // shapes, groups and texts
+    let mut svg_parts: Vec<Node<Msg>> = vec![];
+
+    // each piece is part of column drawable view where number of parts depends on number of issues which have largest amount of issues
     let piece_height = SVG_DRAWABLE_HEIGHT as f64 / dominant as f64;
-    let piece_width = (SVG_WIDTH as f64 - (legend_margin_width + SVG_MARGIN_X as f64))
+    // width reduces by legend divided by number of days
+    let piece_width = (SVG_WIDTH as f64
+        - legend_margin_width
+        - SVG_MARGIN_X as f64
+        - (SVG_BAR_MARGIN as f64 * page.last_day.day() as f64))
         / page.last_day.day() as f64;
 
     let resolution = 10;
@@ -71,13 +79,10 @@ fn this_month_graph(page: &Box<ReportsPage>, this_month_updated: &Vec<&Issue>) -
             At::Style => "fill: var(--textLight);",
         ],]);
     }
-    columns.push(seed::g![legend_parts]);
+    svg_parts.push(seed::g![legend_parts]);
 
     for day in (page.first_day.day0())..(page.last_day.day()) {
         let num_issues = issues.get(&day).map(|v| v.len()).unwrap_or_default() as u32;
-        if num_issues == 0 {
-            continue;
-        }
         let x = (piece_width * day as f64)
             + (SVG_BAR_MARGIN * day) as f64
             + (legend_margin_width + SVG_MARGIN_X as f64);
@@ -96,25 +101,27 @@ fn this_month_graph(page: &Box<ReportsPage>, this_month_updated: &Vec<&Issue>) -
             )))
         });
 
-        columns.push(seed::rect![
+        svg_parts.push(seed::g![
-            on_hover,
+            seed::rect![
-            on_blur,
+                on_hover,
-            attrs![
+                on_blur,
-                At::X => x,
+                attrs![
-                At::Y => SVG_DRAWABLE_HEIGHT as f64 - height, // reverse draw origin
+                    At::X => x,
-                At::Width => piece_width,
+                    At::Y => SVG_DRAWABLE_HEIGHT as f64 - height, // reverse draw origin
-                At::Height => height,
+                    At::Width => piece_width,
-                At::Style => "fill: rgb(255, 0, 0);",
+                    At::Height => height,
-                At::Title => format!("Number of issues: {}", num_issues),
+                    At::Style => "fill: rgb(255, 0, 0);",
-            ]
+                    At::Title => format!("Number of issues: {}", num_issues),
-        ]);
+                ]
-        columns.push(seed::text![
-            attrs![
-                At::X => x,
-                At::Y => SVG_HEIGHT,
-                At::Style => "fill: var(--textLight); font-family: var(--font-regular); font-size: 10px;",
             ],
-            day.format("%d/%m").to_string(),
+            seed::text![
+                attrs![
+                    At::X => x,
+                    At::Y => SVG_HEIGHT,
+                    At::Style => "fill: var(--textLight); font-family: var(--font-regular); font-size: 10px;",
+                ],
+                day.format("%d/%m").to_string(),
+            ]
         ]);
     }
 
@@ -123,7 +130,7 @@ fn this_month_graph(page: &Box<ReportsPage>, this_month_updated: &Vec<&Issue>) -
         h5![class!["graphHeader"], "Last updated"],
         svg![
             attrs![At::Height => SVG_HEIGHT, At::Width => SVG_WIDTH],
-            columns,
+            svg_parts,
         ],
     ]
 }

jirs-client/static/project-icon.svg

@@ -0,0 +1,135 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        preserveAspectRatio="xMidYMid meet"
+        viewBox="0 0 640 640"
+        width="256"
+        height="256"
+>
+    <defs>
+        <filter
+                id="shadow16022051"
+                filterUnits="userSpaceOnUse"
+                primitiveUnits="userSpaceOnUse"
+        >
+            <feFlood>
+            </feFlood>
+            <feComposite in2="SourceAlpha" operator="in">
+            </feComposite>
+            <feGaussianBlur stdDeviation="1">
+            </feGaussianBlur>
+            <feOffset dx="14" dy="10" result="afterOffset">
+            </feOffset>
+            <feFlood flood-color="#0d0e44" flood-opacity="0.5">
+            </feFlood>
+            <feComposite in2="afterOffset" operator="in">
+            </feComposite>
+            <feMorphology operator="dilate" radius="1">
+            </feMorphology>
+            <feComposite in2="SourceAlpha" operator="out">
+            </feComposite>
+        </filter>
+        <path
+                d="M500 300C500 410.38 410.38 500 300 500C189.62 500 100 410.38 100 300C100 189.61 189.62 100 300 100C410.38 100 500 189.61 500 300Z"
+                id="b6KNxjEO2"
+        >
+        </path>
+        <mask
+                id="maskb3oIvRAxi1"
+                x="78" y="78"
+                width="444"
+                height="444"
+                maskUnits="userSpaceOnUse"
+        >
+            <rect x="78" y="78" width="444" height="444" fill="white">
+            </rect>
+            <use xlink:href="#b6KNxjEO2" opacity="0.46" fill="black">
+            </use>
+        </mask>
+        <path
+                d="M520 338.18C520 448.56 430.38 538.18 320 538.18C209.62 538.18 120 448.56 120 338.18C120 227.8 209.62 138.18 320 138.18C430.38 138.18 520 227.8 520 338.18Z"
+                id="bDKGuSkBj"
+        >
+        </path>
+        <mask id="maskb4LRewzUS" x="98" y="116.18" width="444" height="444" maskUnits="userSpaceOnUse">
+            <rect x="98" y="116.18" width="444" height="444" fill="white">
+            </rect>
+            <use xlink:href="#bDKGuSkBj" opacity="0.46" fill="black">
+            </use>
+        </mask>
+        <path
+                d="M543.03 374.84C543.03 485.23 453.41 574.84 343.03 574.84C232.65 574.84 143.03 485.23 143.03 374.84C143.03 264.46 232.65 174.84 343.03 174.84C453.41 174.84 543.03 264.46 543.03 374.84Z"
+                id="a1k8tJrWR3"
+        >
+        </path>
+        <mask id="maskbctn2Bw0" x="121.03" y="152.84" width="444" height="444" maskUnits="userSpaceOnUse">
+            <rect x="121.03" y="152.84" width="444" height="444" fill="white">
+            </rect>
+            <use xlink:href="#a1k8tJrWR3" opacity="0.46" fill="black">
+            </use>
+        </mask>
+    </defs>
+    <path
+            d="M500 300C500 410.38 410.38 500 300 500C189.62 500 100 410.38 100 300C100 189.61 189.62 100 300 100C410.38 100 500 189.61 500 300Z"
+            id="h3zi0EZA0A"
+            fill-opacity="1"
+            filter="url(#shadow16022051)"
+    >
+    </path>
+    <use xlink:href="#b6KNxjEO2" opacity="0.46" fill="#fefefe" fill-opacity="1">
+    </use>
+    <g mask="url(#maskb3oIvRAxi1)">
+        <use
+                xlink:href="#b6KNxjEO2"
+                opacity="0.46"
+                fill-opacity="0"
+                stroke="#06697d"
+                stroke-width="22"
+                stroke-opacity="1"
+        >
+        </use>
+    </g>
+    <path
+            d="M520 338.18C520 448.56 430.38 538.18 320 538.18C209.62 538.18 120 448.56 120 338.18C120 227.8 209.62 138.18 320 138.18C430.38 138.18 520 227.8 520 338.18Z"
+            id="mzwSl44s1"
+            fill-opacity="1"
+            filter="url(#shadow16022051)"
+    >
+    </path>
+    <use xlink:href="#bDKGuSkBj" opacity="0.46" fill="#fefefe" fill-opacity="1">
+    </use>
+    <g mask="url(#maskb4LRewzUS)">
+        <use
+                xlink:href="#bDKGuSkBj"
+                opacity="0.46"
+                fill-opacity="0"
+                stroke="#06697d"
+                stroke-width="22"
+                stroke-opacity="1"
+        >
+        </use>
+    </g>
+    <path
+            d="M543.03 374.84C543.03 485.23 453.41 574.84 343.03 574.84C232.65 574.84 143.03 485.23 143.03 374.84C143.03 264.46 232.65 174.84 343.03 174.84C453.41 174.84 543.03 264.46 543.03 374.84Z"
+            id="c16Px1v9IX"
+            fill-opacity="1"
+            filter="url(#shadow16022051)"
+    >
+    </path>
+    <use xlink:href="#a1k8tJrWR3" opacity="0.46" fill="#fefefe" fill-opacity="1">
+    </use>
+    <g mask="url(#maskbctn2Bw0)">
+        <use
+                xlink:href="#a1k8tJrWR3"
+                opacity="0.46"
+                fill-opacity="0"
+                stroke="#06697d"
+                stroke-width="22"
+                stroke-opacity="1"
+        >
+        </use>
+    </g>
+</svg>