mazer-rails 0.1.1 → 0.1.2

data/assets/javascripts/pages/ui-chartjs.js

@@ -0,0 +1,445 @@
+var chartColors = {
+  red: "rgb(255, 99, 132)",
+  orange: "rgb(255, 159, 64)",
+  yellow: "rgb(255, 205, 86)",
+  green: "rgb(75, 192, 192)",
+  info: "#41B1F9",
+  blue: "#3245D1",
+  purple: "rgb(153, 102, 255)",
+  grey: "#EBEFF6",
+}
+
+var config1 = {
+  type: "line",
+  data: {
+    labels: ["January", "February", "March", "April", "May", "June", "July"],
+    datasets: [
+      {
+        label: "Balance",
+        backgroundColor: "#fff",
+        borderColor: "#fff",
+        data: [20, 40, 20, 70, 10, 50, 20],
+        fill: false,
+        pointBorderWidth: 100,
+        pointBorderColor: "transparent",
+        pointRadius: 3,
+        pointBackgroundColor: "transparent",
+        pointHoverBackgroundColor: "rgba(63,82,227,1)",
+      },
+    ],
+  },
+  options: {
+    responsive: true,
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        left: -10,
+        top: 10,
+      },
+    },
+    legend: {
+      display: false,
+    },
+    title: {
+      display: false,
+    },
+    tooltips: {
+      mode: "index",
+      intersect: false,
+    },
+    hover: {
+      mode: "nearest",
+      intersect: true,
+    },
+    scales: {
+      xAxes: [
+        {
+          gridLines: {
+            drawBorder: false,
+            display: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+      ],
+      yAxes: [
+        {
+          gridLines: {
+            display: false,
+            drawBorder: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+      ],
+    },
+  },
+}
+var config2 = {
+  type: "line",
+  data: {
+    labels: ["January", "February", "March", "April", "May", "June", "July"],
+    datasets: [
+      {
+        label: "Revenue",
+        backgroundColor: "#fff",
+        borderColor: "#fff",
+        data: [20, 800, 300, 400, 10, 50, 20],
+        fill: false,
+        pointBorderWidth: 100,
+        pointBorderColor: "transparent",
+        pointRadius: 3,
+        pointBackgroundColor: "transparent",
+        pointHoverBackgroundColor: "rgba(63,82,227,1)",
+      },
+    ],
+  },
+  options: {
+    responsive: true,
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        left: -10,
+        top: 10,
+      },
+    },
+    legend: {
+      display: false,
+    },
+    title: {
+      display: false,
+    },
+    tooltips: {
+      mode: "index",
+      intersect: false,
+    },
+    hover: {
+      mode: "nearest",
+      intersect: true,
+    },
+    scales: {
+      xAxes: [
+        {
+          gridLines: {
+            drawBorder: false,
+            display: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+      ],
+      yAxes: [
+        {
+          gridLines: {
+            display: false,
+            drawBorder: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+      ],
+    },
+  },
+}
+var config3 = {
+  type: "line",
+  data: {
+    labels: ["January", "February", "March", "April", "May", "June", "July"],
+    datasets: [
+      {
+        label: "Orders",
+        backgroundColor: "#fff",
+        borderColor: "#fff",
+        data: [20, 40, 20, 200, 10, 540, 723],
+        fill: false,
+        pointBorderWidth: 100,
+        pointBorderColor: "transparent",
+        pointRadius: 3,
+        pointBackgroundColor: "transparent",
+        pointHoverBackgroundColor: "rgba(63,82,227,1)",
+      },
+    ],
+  },
+  options: {
+    responsive: true,
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        left: -10,
+        top: 10,
+      },
+    },
+    legend: {
+      display: false,
+    },
+    title: {
+      display: false,
+      text: "Chart.js Line Chart",
+    },
+    tooltips: {
+      mode: "index",
+      intersect: false,
+    },
+    hover: {
+      mode: "nearest",
+      intersect: true,
+    },
+    scales: {
+      xAxes: [
+        {
+          gridLines: {
+            drawBorder: false,
+            display: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+      ],
+      yAxes: [
+        {
+          gridLines: {
+            display: false,
+            drawBorder: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+      ],
+    },
+  },
+}
+var config4 = {
+  type: "line",
+  data: {
+    labels: ["January", "February", "March", "April", "May", "June", "July"],
+    datasets: [
+      {
+        label: "My First dataset",
+        backgroundColor: "#fff",
+        borderColor: "#fff",
+        data: [20, 40, 20, 70, 10, 5, 23],
+        fill: false,
+        pointBorderWidth: 100,
+        pointBorderColor: "transparent",
+        pointRadius: 3,
+        pointBackgroundColor: "transparent",
+        pointHoverBackgroundColor: "rgba(63,82,227,1)",
+      },
+    ],
+  },
+  options: {
+    responsive: true,
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        left: -10,
+        top: 10,
+      },
+    },
+    legend: {
+      display: false,
+    },
+    title: {
+      display: false,
+      text: "Chart.js Line Chart",
+    },
+    tooltips: {
+      mode: "index",
+      intersect: false,
+    },
+    hover: {
+      mode: "nearest",
+      intersect: true,
+    },
+    scales: {
+      xAxes: [
+        {
+          gridLines: {
+            drawBorder: false,
+            display: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+      ],
+      yAxes: [
+        {
+          gridLines: {
+            display: false,
+            drawBorder: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+      ],
+    },
+  },
+}
+
+var ctxBar = document.getElementById("bar").getContext("2d")
+var myBar = new Chart(ctxBar, {
+  type: "bar",
+  data: {
+    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
+    datasets: [
+      {
+        label: "Students",
+        backgroundColor: [
+          chartColors.grey,
+          chartColors.grey,
+          chartColors.grey,
+          chartColors.grey,
+          chartColors.info,
+          chartColors.blue,
+          chartColors.grey,
+        ],
+        data: [5, 10, 30, 40, 35, 55, 15],
+      },
+    ],
+  },
+  options: {
+    responsive: true,
+    barRoundness: 1,
+    title: {
+      display: true,
+      text: "Students in 2020",
+    },
+    legend: {
+      display: false,
+    },
+    scales: {
+      yAxes: [
+        {
+          ticks: {
+            beginAtZero: true,
+            suggestedMax: 40 + 20,
+            padding: 10,
+          },
+          gridLines: {
+            drawBorder: false,
+          },
+        },
+      ],
+      xAxes: [
+        {
+          gridLines: {
+            display: false,
+            drawBorder: false,
+          },
+        },
+      ],
+    },
+  },
+})
+var line = document.getElementById("line").getContext("2d")
+var gradient = line.createLinearGradient(0, 0, 0, 400)
+gradient.addColorStop(0, "rgba(50, 69, 209,1)")
+gradient.addColorStop(1, "rgba(265, 177, 249,0)")
+
+var gradient2 = line.createLinearGradient(0, 0, 0, 400)
+gradient2.addColorStop(0, "rgba(255, 91, 92,1)")
+gradient2.addColorStop(1, "rgba(265, 177, 249,0)")
+
+var myline = new Chart(line, {
+  type: "line",
+  data: {
+    labels: [
+      "16-07-2018",
+      "17-07-2018",
+      "18-07-2018",
+      "19-07-2018",
+      "20-07-2018",
+      "21-07-2018",
+      "22-07-2018",
+      "23-07-2018",
+      "24-07-2018",
+      "25-07-2018",
+    ],
+    datasets: [
+      {
+        label: "Balance",
+        data: [50, 25, 61, 50, 72, 52, 60, 41, 30, 45],
+        backgroundColor: "rgba(50, 69, 209,.6)",
+        borderWidth: 3,
+        borderColor: "rgba(63,82,227,1)",
+        pointBorderWidth: 0,
+        pointBorderColor: "transparent",
+        pointRadius: 3,
+        pointBackgroundColor: "transparent",
+        pointHoverBackgroundColor: "rgba(63,82,227,1)",
+      },
+      {
+        label: "Balance",
+        data: [20, 35, 45, 75, 37, 86, 45, 65, 25, 53],
+        backgroundColor: "rgba(253, 183, 90,.6)",
+        borderWidth: 3,
+        borderColor: "rgba(253, 183, 90,.6)",
+        pointBorderWidth: 0,
+        pointBorderColor: "transparent",
+        pointRadius: 3,
+        pointBackgroundColor: "transparent",
+        pointHoverBackgroundColor: "rgba(63,82,227,1)",
+      },
+    ],
+  },
+  options: {
+    responsive: true,
+    layout: {
+      padding: {
+        top: 10,
+      },
+    },
+    tooltips: {
+      intersect: false,
+      titleFontFamily: "Helvetica",
+      titleMarginBottom: 10,
+      xPadding: 10,
+      yPadding: 10,
+      cornerRadius: 3,
+    },
+    legend: {
+      display: true,
+    },
+    scales: {
+      yAxes: [
+        {
+          gridLines: {
+            display: true,
+            drawBorder: true,
+          },
+          ticks: {
+            display: true,
+          },
+        },
+      ],
+      xAxes: [
+        {
+          gridLines: {
+            drawBorder: false,
+            display: false,
+          },
+          ticks: {
+            display: false,
+          },
+        },
+      ],
+    },
+  },
+})
+
+// let ctx1 = document.getElementById("canvas1").getContext("2d");
+// let ctx2 = document.getElementById("canvas2").getContext("2d");
+// let ctx3 = document.getElementById("canvas3").getContext("2d");
+// let ctx4 = document.getElementById("canvas4").getContext("2d");
+// var lineChart1 = new Chart(ctx1, config1);
+// var lineChart2 = new Chart(ctx2, config2);
+// var lineChart3 = new Chart(ctx3, config3);
+// var lineChart4 = new Chart(ctx4, config4);

data/assets/javascripts/pages/ui-todolist.js

@@ -0,0 +1,5 @@
+dragula([document.getElementById("widget-todo-list")], {
+  moves: function (e, a, t) {
+    return t.classList.contains("cursor-move")
+  },
+})

data/assets/stylesheets/_fonts.scss

@@ -0,0 +1,5 @@
+@import "~@fontsource/nunito/300.css";
+@import "~@fontsource/nunito/400.css";
+@import "~@fontsource/nunito/600.css";
+@import "~@fontsource/nunito/700.css";
+@import "~@fontsource/nunito/800.css";

data/assets/stylesheets/_mazer.scss

@@ -0,0 +1,103 @@
+/*
+* Mazer, Technology Innovations Bootstrap HTML5 Landing Page
+* 
+* File: app.scss
+*
+* If you want to edit the components, just go to _variables.scss
+*/
+
+/**
+
+====== TABLE OF CONTENTS =======
+1. Mixins
+2. Bootstrap Components Override 
+    2.1 Alert
+    2.2 Avatar
+    2.3 Badge
+    2.4 Buttons
+    2.5 Breadcrumb
+    2.6 Carousel
+    2.7 Card
+    2.8 Divider
+    2.9 Dropdowns
+    2.10 Forms
+    2.11 Modal
+    2.12 Sidebar
+    2.13 Navs
+    2.14 Navbar
+    2.15 Pagination
+    2.16 Table
+    2.17 Progress
+4. Pages
+    4.0 Layout
+    4.1 Auth
+    4.2 Error
+5. Utilities
+
+
+*/
+
+// 1. Mixins
+@import "./mixins/navbar";
+
+// 2. Bootstrap Components Override
+
+// - 2.1. Alert
+@import "./components/alert";
+
+// - 2.2. Avatar
+@import "./components/avatar";
+
+// - 2.3. Badge
+@import "./components/badge";
+
+// - 2.4. Buttons
+@import "./components/buttons";
+
+// - 2.5. breadcrumb
+@import "./components/breadcrumb";
+
+// - 2.6. carousel
+@import "./components/carousel";
+
+// - 2.7. card
+@import "./components/card";
+
+// - 2.8. divider
+@import "./components/divider";
+
+// - 2.9. dropdowns
+@import "./components/dropdowns";
+
+// - 2.10. forms
+@import "./components/forms";
+
+// - 2.11. modal
+@import "./components/modal";
+
+// - 2.12. sidebar
+@import "./components/sidebar";
+
+// - 2.13. navs
+@import "./components/navs";
+
+// - 2.14. navbar
+@import "./components/navbar";
+
+// - 2.15. pagination
+@import "./components/pagination";
+
+// - 2.16. table
+@import "./components/table";
+
+// - 2.17. progress
+@import "./components/progress";
+
+// - 2.18. icons
+@import "./components/icons";
+
+// - 4.0 Layout
+@import "./layouts/main.scss";
+
+// - 5.0 Utilities
+@import "./utilities"

data/assets/stylesheets/_utilities.scss

@@ -0,0 +1,53 @@
+
+// Margin
+.mt-10 { margin-top: 3rem; }
+.mb-10 { margin-bottom: 3rem; }
+.my-10 { margin-top: 3rem; margin-bottom: 3rem; }
+.mb-24 { margin-bottom: 6rem; }
+.my-24 { margin-bottom: 6rem; margin-top: 6rem; }
+
+// Opacity 
+.opacity-50 { opacity: 50%; }
+
+// Padding
+.py-4-5 { padding-top: 2rem !important; padding-bottom: 2rem !important }
+
+
+// Font size
+.text-sm { font-size: .875rem; }
+.text-xl { font-size: 1.25rem; }
+.text-4xl { font-size: 2.25rem; }
+.text-6xl { font-size: 4rem; }
+.text-black { color: #000 }
+
+// Background
+.bg-gradient-ltr { background: linear-gradient(to right, #095CDE, #53C3F3); }
+@each $key, $value in $theme-colors-light {
+    .bg-light-#{$key} {
+        background-color: $value;
+        color: darken($value,80%);
+    }
+}
+
+.font-semibold { font-weight: 600; }
+.font-bold { font-weight: bold; }
+.font-extrabold { font-weight: 800; }
+
+// Text Width
+.text-width-md { max-width: 450px }
+
+// Text Color
+.text-gray-300 { color: $gray-300 !important }
+.text-gray-400 { color: $gray-400 !important  }
+.text-gray-500 { color: $gray-500 !important  }
+.text-gray-600 { color: $gray-600 !important  }
+
+
+// Button
+.btn-xl { padding: 1rem 2rem; }
+
+// Icon
+.icon-mid:before { vertical-align: middle; }
+
+// Z Index
+.z-1 { z-index: 1 }