Fix display issues on mobile (#373)

2021-06-10 00:08:08 +02:00
parent 0590a252b8
commit 4c6888c587
9 changed files with 34 additions and 9 deletions
--- a/source/app/web/statics/app.placeholder.js
+++ b/source/app/web/statics/app.placeholder.js
@@ -403,6 +403,7 @@
            habits: {
              facts: options["habits.facts"],
              charts: options["habits.charts"],
+              trim: options["habits.trim"],
              lines: {
                average: {
                  chars: faker.datatype.number(1000)/10,
--- a/source/plugins/habits/README.md
+++ b/source/plugins/habits/README.md
@@ -34,5 +34,6 @@ By default, dates use Greenwich meridian (GMT/UTC). Be sure to set your timezone
    plugin_habits_days: 14        # Keep only events from last 14 days
    plugin_habits_facts: yes      # Display facts section
    plugin_habits_charts: yes     # Display charts section
+    plugin_habits_trim: yes       # Trim unused hours on daily chart
    config_timezone: Europe/Paris # Set timezone
 ```
--- a/source/plugins/habits/index.mjs
+++ b/source/plugins/habits/index.mjs
@@ -10,10 +10,10 @@ export default async function({login, data, rest, imports, q, account}, {enabled
      return null

    //Load inputs
-    let {from, days, facts, charts} = imports.metadata.plugins.habits.inputs({data, account, q}, defaults)
+    let {from, days, facts, charts, trim} = imports.metadata.plugins.habits.inputs({data, account, q}, defaults)

    //Initialization
-    const habits = {facts, charts, lines:{average:{chars:0}}, commits:{fetched:0, hour:NaN, hours:{}, day:NaN, days:{}}, indents:{style:"", spaces:0, tabs:0}, linguist:{available:false, ordered:[], languages:{}}}
+    const habits = {facts, charts, trim, lines:{average:{chars:0}}, commits:{fetched:0, hour:NaN, hours:{}, day:NaN, days:{}}, indents:{style:"", spaces:0, tabs:0}, linguist:{available:false, ordered:[], languages:{}}}
    const pages = Math.ceil(from / 100)
    const offset = data.config.timezone?.offset ?? 0

--- a/source/plugins/habits/metadata.yml
+++ b/source/plugins/habits/metadata.yml
@@ -43,3 +43,9 @@ inputs:
    description: Display coding habits charts based on recent activity
    type: boolean
    default: no
+
+  # Trim unused hours on daily chart
+  plugin_habits_trim:
+    description: Trim unused hours on daily chart
+    type: boolean
+    default: no
--- a/source/plugins/habits/tests.yml
+++ b/source/plugins/habits/tests.yml
@@ -11,6 +11,7 @@
    plugin_habits: yes
    plugin_habits_facts: no
    plugin_habits_charts: yes
+    plugin_habits_trim: yes
    config_timezone: Europe/Paris

 - name: Habits plugin (facts)
--- a/source/templates/classic/image.svg
+++ b/source/templates/classic/image.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="<%= large ? 960 : columns ? 'auto' : 480 %>" height="99999" class="<%= large ? 'large' : columns ? 'columns' : '' %> <%= !animated ? 'no-animations' : '' %>">
+<svg xmlns="http://www.w3.org/2000/svg" width="<%= large ? 960 : columns ? '100%' : 480 %>" height="99999" class="<%= large ? 'large' : columns ? 'columns' : '' %> <%= !animated ? 'no-animations' : '' %>">

  <defs><style><%= fonts %></style></defs>
  <style><%= style %></style>
--- a/source/templates/classic/partials/followup.ejs
+++ b/source/templates/classic/partials/followup.ejs
@@ -2,7 +2,7 @@
  <section>
    <h2 class="field">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M6 2a.75.75 0 01.696.471L10 10.731l1.304-3.26A.75.75 0 0112 7h3.25a.75.75 0 010 1.5h-2.742l-1.812 4.528a.75.75 0 01-1.392 0L6 4.77 4.696 8.03A.75.75 0 014 8.5H.75a.75.75 0 010-1.5h2.742l1.812-4.529A.75.75 0 016 2z"></path></svg>
-      Overall issues and pull requests status
+      <span class="followup-title">Overall issues and pull requests status</span>
    </h2>
  </section>
  <% if (plugins.followup.error) { %>
--- a/source/templates/classic/partials/habits.ejs
+++ b/source/templates/classic/partials/habits.ejs
@@ -1,6 +1,6 @@
 <% if (plugins.habits) { %>
  <section>
-    <h2 class="field">
+    <h2 class="field wrap">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 01-1.484.211c-.04-.282-.163-.547-.37-.847a8.695 8.695 0 00-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.75.75 0 01-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75zM6 15.25a.75.75 0 01.75-.75h2.5a.75.75 0 010 1.5h-2.5a.75.75 0 01-.75-.75zM5.75 12a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-4.5z"></path></svg>
      Recent coding habits
      <% if (plugins.habits.commits?.fetched) { %>
@@ -41,11 +41,19 @@
      <section class="column chart largeable">
        <h3>Commit activity per hour of day</h3>
        <div class="chart-bars">
-          <% for (let h = 0; h < 24; h++) { const p = (plugins.habits.commits.hours[h]??0)/(plugins.habits.commits.hours.max??1); %>
+          <% var displayedValues = []; %>
+          <% for (let h = 0; h < 24; h++) { displayedValues.push([h, (plugins.habits.commits.hours[h]??0)/(plugins.habits.commits.hours.max??1), plugins.habits.commits.hours[h]]) } %>
+
+          <% if (plugins.habits.trim) { %>
+            <% while (displayedValues[0][1] === 0) { displayedValues.shift(); } %>
+            <% while (displayedValues[displayedValues.length-1][1] === 0){ displayedValues.pop(); } %>
+          <% } %>
+
+          <% for(let i = 0; i < displayedValues.length; i++) { %>
            <div class="entry">
-              <span class="value"><%= plugins.habits.commits.hours[h] %></span>
-              <div class="bar" style="height: <%= p*50 %>px; background-color: var(--color-calendar-graph-day-L<%= Math.ceil(p/0.25) %>-bg)"></div>
-              <%= `${h}`.padStart(2, 0) %>
+              <span class="value"><%= displayedValues[i][2] %></span>
+              <div class="bar" style="height: <%= displayedValues[i][1]*50 %>px; background-color: var(--color-calendar-graph-day-L<%= Math.ceil(displayedValues[i][1]/0.25) %>-bg)"></div>
+              <%= `${displayedValues[i][0]}`.padStart(2, 0) %>
            </div>
          <% } %>
        </div>
--- a/source/templates/classic/style.css
+++ b/source/templates/classic/style.css
@@ -89,6 +89,9 @@
    margin-bottom: 2px;
    white-space: nowrap;
  }
+  .field.wrap {
+    flex-wrap: wrap;
+  }
  .field svg {
    margin: 0 8px;
    fill: #959da5;
@@ -104,6 +107,7 @@
 /* Displays */
  .row {
    display: flex;
+    flex-wrap: wrap;
  }
  .row section {
    flex: 1 1 0;
@@ -227,6 +231,9 @@
  .followup.legend svg:last-child {
    margin-right: 0;
  }
+  .followup-title{
+    white-space: initial;
+  }

 /* Labels */
  .label {
@@ -1011,6 +1018,7 @@
    border-radius: 16px;
    font-size: 10px;
    padding: 0 5px;
+    white-space: nowrap;
  }
  .achievement .gauge-base, .achievement .gauge-arc {
    stroke-width: 6;