From 2b52e3acaddb8ea6d5d4dde4f61a9dc64293e521 Mon Sep 17 00:00:00 2001 From: Lee Sheppard Date: Sat, 28 Dec 2024 21:13:22 +1100 Subject: [PATCH 01/14] Remove webpacker files --- .postcssrc.yml | 2 - app/assets/builds/.keep | 0 app/packs/entrypoints/2019_survey.js | 279 -------- app/packs/entrypoints/application.js | 93 --- app/packs/src/tailwind.config.js | 927 --------------------------- app/packs/styles/admin.scss | 9 - app/packs/styles/application.scss | 231 ------- app/packs/styles/committee.scss | 62 -- app/packs/styles/forms.scss | 104 --- app/packs/styles/signatures.scss | 84 --- app/packs/styles/sponsorship.scss | 46 -- app/packs/styles/surveys.scss | 12 - config/initializers/assets.rb | 10 - config/webpack/base.js | 21 - config/webpack/development.js | 5 - config/webpack/production.js | 5 - config/webpack/test.js | 5 - config/webpacker.yml | 65 -- 18 files changed, 1960 deletions(-) delete mode 100644 .postcssrc.yml delete mode 100644 app/assets/builds/.keep delete mode 100644 app/packs/entrypoints/2019_survey.js delete mode 100644 app/packs/entrypoints/application.js delete mode 100644 app/packs/src/tailwind.config.js delete mode 100644 app/packs/styles/admin.scss delete mode 100644 app/packs/styles/application.scss delete mode 100644 app/packs/styles/committee.scss delete mode 100644 app/packs/styles/forms.scss delete mode 100644 app/packs/styles/signatures.scss delete mode 100644 app/packs/styles/sponsorship.scss delete mode 100644 app/packs/styles/surveys.scss delete mode 100644 config/initializers/assets.rb delete mode 100644 config/webpack/base.js delete mode 100644 config/webpack/development.js delete mode 100644 config/webpack/production.js delete mode 100644 config/webpack/test.js delete mode 100644 config/webpacker.yml diff --git a/.postcssrc.yml b/.postcssrc.yml deleted file mode 100644 index 0d59ca67..00000000 --- a/.postcssrc.yml +++ /dev/null @@ -1,2 +0,0 @@ -plugins: - tailwindcss: './app/packs/src/tailwind.config.js' diff --git a/app/assets/builds/.keep b/app/assets/builds/.keep deleted file mode 100644 index e69de29b..00000000 diff --git a/app/packs/entrypoints/2019_survey.js b/app/packs/entrypoints/2019_survey.js deleted file mode 100644 index b3204289..00000000 --- a/app/packs/entrypoints/2019_survey.js +++ /dev/null @@ -1,279 +0,0 @@ -const am4core = require("@amcharts/amcharts4/core"); -const am4charts = require("@amcharts/amcharts4/charts"); -const am4maps = require("@amcharts/amcharts4/maps"); -const am4geodata_australiaLow = require("@amcharts/amcharts4-geodata/australiaLow").default; - -$(document).ready(() => { - if ($("#survey-results").length == 0) { return; } - - - var chart = am4core.create("age-chart", am4charts.XYChart); - - chart.data = [ - {"range": "0-18", "count": 0}, - {"range": "19-24", "count": 1}, - {"range": "25-32", "count": 49}, - {"range": "33-38", "count": 47}, - {"range": "39-46", "count": 33}, - {"range": "47-58", "count": 4}, - {"range": "59+", "count": 0} - ] - - var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); - categoryAxis.dataFields.category = "range"; - categoryAxis.title.text = "Age Range"; - - var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); - valueAxis.title.text = "Count"; - - var series = chart.series.push(new am4charts.ColumnSeries()); - series.dataFields.valueY = "count"; - series.dataFields.categoryX = "range"; - series.columns.template.tooltipText = "Range: {categoryX}\nCount: {valueY}"; - - - var map = am4core.create("states-chart", am4maps.MapChart); - map.geodata = am4geodata_australiaLow; - - var polygonSeries = new am4maps.MapPolygonSeries(); - polygonSeries.useGeodata = true; - - polygonSeries.data = [ - {"id": "AU-ACT", "value": 4}, - {"id": "AU-NSW", "value": 33}, - {"id": "AU-NT", "value": 0}, - {"id": "AU-QLD", "value": 13}, - {"id": "AU-SA", "value": 5}, - {"id": "AU-TAS", "value": 1}, - {"id": "AU-VIC", "value": 63}, - {"id": "AU-WA", "value": 6} - ]; - polygonSeries.heatRules.push({ - "property": "fill", - "target": polygonSeries.mapPolygons.template, - "min": am4core.color("#F2EBFD"), - "max": am4core.color("#241146") - }); - map.series.push(polygonSeries); - - // Configure series - var polygonTemplate = polygonSeries.mapPolygons.template; - polygonTemplate.tooltipText = "{name}: {value}"; - - - var chart = am4core.create("education-chart", am4charts.PieChart); - chart.innerRadius = am4core.percent(40); - chart.startAngle = 0; - chart.endAngle = 360; - - chart.data = [ - {"type": "High School", "count": 15}, - {"type": "TAFE", "count": 14}, - {"type": "Bachelors", "count": 82}, - {"type": "Masters", "count": 18}, - {"type": "PhD", "count": 2}, - {"type": "Other", "count": 3} - ] - - var pieSeries = chart.series.push(new am4charts.PieSeries()); - pieSeries.dataFields.category = "type"; - pieSeries.dataFields.value = "count"; - - - var chart = am4core.create("employment-chart", am4charts.PieChart); - chart.innerRadius = am4core.percent(40); - chart.startAngle = -40; - chart.endAngle = 320; - - chart.data = [ - {"type": "Full-time Employee", "count": 99}, - {"type": "Part-time Employee", "count": 4}, - {"type": "Self Employed: Contractor/Freelancer", "count": 8}, - {"type": "Self Employed: Own Product", "count": 4}, - {"type": "Director/Owner", "count": 9}, - {"type": "Student", "count": 5}, - {"type": "Unemployed", "count": 4}, - {"type": "Other", "count": 1} - ] - - var pieSeries = chart.series.push(new am4charts.PieSeries()); - pieSeries.dataFields.category = "type"; - pieSeries.dataFields.value = "count"; - - - var chart = am4core.create("experience-chart", am4charts.PieChart); - chart.innerRadius = am4core.percent(40); - // chart.startAngle = -40; - // chart.endAngle = 320; - - chart.data = [ - {"type": "Entry-level/Junior", "count": 14}, - {"type": "Mid-level", "count": 26}, - {"type": "Senior/Principal", "count": 84} - ] - - var pieSeries = chart.series.push(new am4charts.PieSeries()); - pieSeries.dataFields.category = "type"; - pieSeries.dataFields.value = "count"; - - - var chart = am4core.create("office-chart", am4charts.PieChart); - chart.innerRadius = am4core.percent(40); - // chart.startAngle = -40; - // chart.endAngle = 320; - - chart.data = [ - {"type": "Only in an office", "count": 8}, - {"type": "Only remote", "count": 7}, - {"type": "Usually office, occasionally remote", "count": 57}, - {"type": "Usually remote, occasionally office", "count": 14}, - {"type": "Wherever", "count": 35}, - {"type": "Other", "count": 1} - ] - - var pieSeries = chart.series.push(new am4charts.PieSeries()); - pieSeries.dataFields.category = "type"; - pieSeries.dataFields.value = "count"; - - - var chart = am4core.create("company-size-chart", am4charts.XYChart); - - chart.data = [ - {"range": "0-10", "count": 19}, - {"range": "11-20", "count": 24}, - {"range": "21-50", "count": 23}, - {"range": "51-100", "count": 12}, - {"range": "101-500", "count": 28}, - {"range": "501-5000", "count": 15}, - {"range": "5001+", "count": 3} - ] - - var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); - categoryAxis.dataFields.category = "range"; - categoryAxis.title.text = "Number of Employees"; - - var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); - valueAxis.title.text = "Count"; - - var series = chart.series.push(new am4charts.ColumnSeries()); - series.dataFields.valueY = "count"; - series.dataFields.categoryX = "range"; - series.columns.template.tooltipText = "Range: {categoryX}\nCount: {valueY}"; - - - var chart = am4core.create("colleague-size-chart", am4charts.XYChart); - - chart.data = [ - {"range": "1", "count": 9}, - {"range": "2-4", "count": 21}, - {"range": "5-10", "count": 40}, - {"range": "11-20", "count": 14}, - {"range": "21-50", "count": 14}, - {"range": "50+", "count": 17} - ] - - var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); - categoryAxis.dataFields.category = "range"; - categoryAxis.title.text = "Number of Rubyists"; - - var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); - valueAxis.title.text = "Count"; - - var series = chart.series.push(new am4charts.ColumnSeries()); - series.dataFields.valueY = "count"; - series.dataFields.categoryX = "range"; - series.columns.template.tooltipText = "Range: {categoryX}\nCount: {valueY}"; - - - var chart = am4core.create("hire-size-chart", am4charts.XYChart); - - chart.data = [ - {"range": "0", "count": 26}, - {"range": "1-3", "count": 47}, - {"range": "4-10", "count": 21}, - {"range": "11+", "count": 18} - ] - - var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); - categoryAxis.dataFields.category = "range"; - categoryAxis.title.text = "New Hires (people)"; - - var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); - valueAxis.title.text = "Count"; - - var series = chart.series.push(new am4charts.ColumnSeries()); - series.dataFields.valueY = "count"; - series.dataFields.categoryX = "range"; - series.columns.template.tooltipText = "Range: {categoryX}\nCount: {valueY}"; - - - var chart = am4core.create("hobby-time-chart", am4charts.XYChart); - - chart.data = [ - {"range": "0-0.5", "count": 3}, - {"range": "1-1.5", "count": 11}, - {"range": "2-3", "count": 20}, - {"range": "4-6", "count": 22}, - {"range": "7-10", "count": 42}, - {"range": "11-15", "count": 30}, - {"range": "16+", "count": 6} - ] - - var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); - categoryAxis.dataFields.category = "range"; - categoryAxis.title.text = "Years"; - - var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); - valueAxis.title.text = "Count"; - - var series = chart.series.push(new am4charts.ColumnSeries()); - series.dataFields.valueY = "count"; - series.dataFields.categoryX = "range"; - series.columns.template.tooltipText = "Range: {categoryX}\nCount: {valueY}"; - - - var chart = am4core.create("professional-time-chart", am4charts.XYChart); - - chart.data = [ - {"range": "0", "count": 15}, - {"range": "0.5-1.5", "count": 11}, - {"range": "2-4", "count": 22}, - {"range": "5-7", "count": 36}, - {"range": "8-10", "count": 30}, - {"range": "11-16", "count": 20} - ] - - var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); - categoryAxis.dataFields.category = "range"; - categoryAxis.title.text = "Years"; - - var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); - valueAxis.title.text = "Count"; - - var series = chart.series.push(new am4charts.ColumnSeries()); - series.dataFields.valueY = "count"; - series.dataFields.categoryX = "range"; - series.columns.template.tooltipText = "Range: {categoryX}\nCount: {valueY}"; - - - var chart = am4core.create("focuses-chart", am4charts.PieChart); - chart.innerRadius = am4core.percent(40); - // chart.startAngle = -40; - // chart.endAngle = 320; - - chart.data = [ - {"type": "Ruby", "count": 101}, - {"type": "Javascript", "count": 73}, - {"type": "Tech Leadership/Management", "count": 54}, - {"type": "Elixir", "count": 33}, - {"type": "Go", "count": 22}, - {"type": "Python", "count": 19}, - {"type": "Other (Functional languages)", "count": 17}, - {"type": "Other (OO languages)", "count": 14}, - {"type": "Rust", "count": 10} - ] - - var pieSeries = chart.series.push(new am4charts.PieSeries()); - pieSeries.dataFields.category = "type"; - pieSeries.dataFields.value = "count"; -}); diff --git a/app/packs/entrypoints/application.js b/app/packs/entrypoints/application.js deleted file mode 100644 index 9c7e085a..00000000 --- a/app/packs/entrypoints/application.js +++ /dev/null @@ -1,93 +0,0 @@ -/* eslint no-console:0 */ -// This file is automatically compiled by Webpack, along with any other files -// present in this directory. You're encouraged to place your actual application logic in -// a relevant structure within app/javascript and only use these pack files to reference -// that code so it'll be compiled. -// -// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate -// layout file, like app/views/layouts/application.html.erb - -import 'core-js/stable' -import 'regenerator-runtime/runtime' - -import Rails from "@rails/ujs" -Rails.start() - -const SignaturePad = require("signature_pad").default; - -import "./2019_survey"; - -import "../styles/application.scss"; -import "../styles/committee.scss"; -import "../styles/sponsorship.scss"; -import "../styles/forms.scss"; -import "../styles/admin.scss"; -import "../styles/signatures.scss"; -import "../styles/surveys.scss"; - -$(document).ready(() => { - $('#mobile-menu-trigger').on('click', () => $('#mobile-menu').slideToggle()); -}); - -window.setupSignature = function() { - var wrapper = document.getElementById("signature-pad"); - var clearButton = wrapper.querySelector("[data-action=clear]"); - var undoButton = wrapper.querySelector("[data-action=undo]"); - var canvas = wrapper.querySelector("canvas"); - var signaturePad = new SignaturePad(canvas, { - backgroundColor: 'rgb(255, 255, 255)' - }); - - // Adjust canvas coordinate space taking into account pixel ratio, - // to make it look crisp on mobile devices. - // This also causes canvas to be cleared. - function resizeCanvas() { - // When zoomed out to less than 100%, for some very strange reason, - // some browsers report devicePixelRatio as less than 1 - // and only part of the canvas is cleared then. - var ratio = Math.max(window.devicePixelRatio || 1, 1); - - // This part causes the canvas to be cleared - canvas.width = canvas.offsetWidth * ratio; - canvas.height = canvas.offsetHeight * ratio; - canvas.getContext("2d").scale(ratio, ratio); - - // This library does not listen for canvas changes, so after the canvas is automatically - // cleared by the browser, SignaturePad#isEmpty might still return false, even though the - // canvas looks empty, because the internal data of this library wasn't cleared. To make sure - // that the state of this library is consistent with visual state of the canvas, you - // have to clear it manually. - signaturePad.clear(); - } - - // On mobile devices it might make more sense to listen to orientation change, - // rather than window resize events. - window.onresize = resizeCanvas; - resizeCanvas(); - - clearButton.addEventListener("click", function (event) { - signaturePad.clear(); - }); - - undoButton.addEventListener("click", function (event) { - var data = signaturePad.toData(); - - if (data) { - data.pop(); // remove the last dot or line - signaturePad.fromData(data); - } - }); - - $('#set-proxy-form').on('submit', function(event) { - if ($("#rsvp_proxy_name").val().length == 0) { - alert("Please provide the name of your proxy representative."); - return false; - } - if (signaturePad.isEmpty()) { - alert("Please provide a signature."); - return false; - } - - $('#rsvp_proxy_signature').val(signaturePad.toDataURL()); - }); -} diff --git a/app/packs/src/tailwind.config.js b/app/packs/src/tailwind.config.js deleted file mode 100644 index 8dbe5940..00000000 --- a/app/packs/src/tailwind.config.js +++ /dev/null @@ -1,927 +0,0 @@ -/* - -Tailwind - The Utility-First CSS Framework - -A project by Adam Wathan (@adamwathan), Jonathan Reinink (@reinink), -David Hemphill (@davidhemphill) and Steve Schoger (@steveschoger). - -Welcome to the Tailwind config file. This is where you can customize -Tailwind specifically for your project. Don't be intimidated by the -length of this file. It's really just a big JavaScript object and -we've done our very best to explain each section. - -View the full documentation at https://tailwindcss.com. - - -/* -|------------------------------------------------------------------------------- -| Colors https://tailwindcss.com/docs/colors -|------------------------------------------------------------------------------- -| -| Here you can specify the colors used in your project. To get you started, -| we've provided a generous palette of great looking colors that are perfect -| for prototyping, but don't hesitate to change them for your project. You -| own these colors, nothing will break if you change everything about them. -| -| We've used literal color names ("red", "blue", etc.) for the default -| palette, but if you'd rather use functional names like "primary" and -| "secondary", or even a numeric scale like "100" and "200", go for it. -| -*/ - -let colors = { - 'transparent': 'transparent', - - /* RubyAU Custom colours generated via https://javisperez.github.io/tailwindcolorshades/ */ - 'pink-darkest' : '#4A051E', - 'pink-darker' : '#940B3C', - 'pink-dark' : '#DE105A', - 'pink' : '#F71264', - 'pink-light' : '#F95993', - 'pink-lighter' : '#FCA0C1', - 'pink-lightest' : '#FEE7F0', - - 'purple-darkest' : '#241146', - 'purple-darker' : '#49238C', - 'purple-dark' : '#6D34D2', - 'purple' : '#793AE9', - 'purple-light' : '#A175F0', - 'purple-lighter' : '#C9B0F6', - 'purple-lightest' : '#F2EBFD', - - 'cyan-darkest' : '#164844', - 'cyan-darker' : '#2C9189', - 'cyan-dark' : '#42D9CD', - 'cyan' : '#49F1E4', - 'cyan-light' : '#80F5EC', - 'cyan-lighter' : '#B6F9F4', - 'cyan-lightest' : '#EDFEFC', - /* END RubyAU Custom colours */ - - 'black': '#22292f', - 'grey-darkest': '#3d4852', - 'grey-darker': '#606f7b', - 'grey-dark': '#8795a1', - 'grey': '#b8c2cc', - 'grey-light': '#dae1e7', - 'grey-lighter': '#f1f5f8', - 'grey-lightest': '#f8fafc', - 'white': '#ffffff', - - 'red-darkest': '#3b0d0c', - 'red-darker': '#621b18', - 'red-dark': '#cc1f1a', - 'red': '#e3342f', - 'red-light': '#ef5753', - 'red-lighter': '#f9acaa', - 'red-lightest': '#fcebea', - - 'orange-darkest': '#462a16', - 'orange-darker': '#613b1f', - 'orange-dark': '#de751f', - 'orange': '#f6993f', - 'orange-light': '#faad63', - 'orange-lighter': '#fcd9b6', - 'orange-lightest': '#fff5eb', - - 'yellow-darkest': '#453411', - 'yellow-darker': '#684f1d', - 'yellow-dark': '#f2d024', - 'yellow': '#ffed4a', - 'yellow-light': '#fff382', - 'yellow-lighter': '#fff9c2', - 'yellow-lightest': '#fcfbeb', - - 'green-darkest': '#0f2f21', - 'green-darker': '#1a4731', - 'green-dark': '#1f9d55', - 'green': '#38c172', - 'green-light': '#51d88a', - 'green-lighter': '#a2f5bf', - 'green-lightest': '#e3fcec', - - 'teal-darkest': '#0d3331', - 'teal-darker': '#20504f', - 'teal-dark': '#38a89d', - 'teal': '#4dc0b5', - 'teal-light': '#64d5ca', - 'teal-lighter': '#a0f0ed', - 'teal-lightest': '#e8fffe', - - 'blue-darkest': '#12283a', - 'blue-darker': '#1c3d5a', - 'blue-dark': '#2779bd', - 'blue': '#3490dc', - 'blue-light': '#6cb2eb', - 'blue-lighter': '#bcdefa', - 'blue-lightest': '#eff8ff', - - 'indigo-darkest': '#191e38', - 'indigo-darker': '#2f365f', - 'indigo-dark': '#5661b3', - 'indigo': '#6574cd', - 'indigo-light': '#7886d7', - 'indigo-lighter': '#b2b7ff', - 'indigo-lightest': '#e6e8ff', - - /* Replaced by custom RubyAU colours (see above) */ - // 'purple-darkest': '#21183c', - // 'purple-darker': '#382b5f', - // 'purple-dark': '#794acf', - // 'purple': '#9561e2', - // 'purple-light': '#a779e9', - // 'purple-lighter': '#d6bbfc', - // 'purple-lightest': '#f3ebff', - // - // 'pink-darkest': '#451225', - // 'pink-darker': '#6f213f', - // 'pink-dark': '#eb5286', - // 'pink': '#f66d9b', - // 'pink-light': '#fa7ea8', - // 'pink-lighter': '#ffbbca', - // 'pink-lightest': '#ffebef', -} - -module.exports = { - - theme: { - /* - |--------------------------------------------------------------------------- - | Colors https://tailwindcss.com/docs/colors - |--------------------------------------------------------------------------- - | - | The color palette defined above is also assigned to the "colors" key of - | your Tailwind config. This makes it easy to access them in your CSS - | using Tailwind's config helper. For example: - | - | .error { color: theme('colors.red') } - | - */ - - colors: colors, - - - /* - |--------------------------------------------------------------------------- - | Screens https://tailwindcss.com/docs/responsive-design - |--------------------------------------------------------------------------- - | - | Screens in Tailwind are translated to CSS media queries. They define the - | responsive breakpoints for your project. By default Tailwind takes a - | "mobile first" approach, where each screen size represents a minimum - | viewport width. Feel free to have as few or as many screens as you - | want, naming them in whatever way you'd prefer for your project. - | - | Tailwind also allows for more complex screen definitions, which can be - | useful in certain situations. Be sure to see the full responsive - | documentation for a complete list of options. - | - | Class name: .{screen}:{utility} - | - */ - - screens: { - 'sm': '576px', - 'md': '768px', - 'lg': '992px', - 'xl': '1200px', - }, - - - /* - |--------------------------------------------------------------------------- - | Fonts https://tailwindcss.com/docs/fonts - |--------------------------------------------------------------------------- - | - | Here is where you define your project's font stack, or font families. - | Keep in mind that Tailwind doesn't actually load any fonts for you. - | If you're using custom fonts you'll need to import them prior to - | defining them here. - | - | By default we provide a native font stack that works remarkably well on - | any device or OS you're using, since it just uses the default fonts - | provided by the platform. - | - | Class name: .font-{name} - | - */ - - fontFamily: { - 'sans': [ - 'system-ui', - 'BlinkMacSystemFont', - '-apple-system', - 'Segoe UI', - 'Roboto', - 'Oxygen', - 'Ubuntu', - 'Cantarell', - 'Fira Sans', - 'Droid Sans', - 'Helvetica Neue', - 'sans-serif', - ], - 'serif': [ - 'Constantia', - 'Lucida Bright', - 'Lucidabright', - 'Lucida Serif', - 'Lucida', - 'DejaVu Serif', - 'Bitstream Vera Serif', - 'Liberation Serif', - 'Georgia', - 'serif', - ], - 'mono': [ - 'Menlo', - 'Monaco', - 'Consolas', - 'Liberation Mono', - 'Courier New', - 'monospace', - ], - }, - - - /* - |--------------------------------------------------------------------------- - | Text sizes https://tailwindcss.com/docs/text-sizing - |--------------------------------------------------------------------------- - | - | Here is where you define your text sizes. Name these in whatever way - | makes the most sense to you. We use size names by default, but - | you're welcome to use a numeric scale or even something else - | entirely. - | - | By default Tailwind uses the "rem" unit type for most measurements. - | This allows you to set a root font size which all other sizes are - | then based on. That said, you are free to use whatever units you - | prefer, be it rems, ems, pixels or other. - | - | Class name: .text-{size} - | - */ - - fontSize: { - 'xs': '.75rem', // 12px - 'sm': '.875rem', // 14px - 'base': '1rem', // 16px - 'lg': '1.125rem', // 18px - 'xl': '1.25rem', // 20px - '2xl': '1.5rem', // 24px - '3xl': '1.875rem', // 30px - '4xl': '2.25rem', // 36px - '5xl': '3rem', // 48px - }, - - - /* - |--------------------------------------------------------------------------- - | Font weights https://tailwindcss.com/docs/font-weight - |--------------------------------------------------------------------------- - | - | Here is where you define your font weights. We've provided a list of - | common font weight names with their respective numeric scale values - | to get you started. It's unlikely that your project will require - | all of these, so we recommend removing those you don't need. - | - | Class name: .font-{weight} - | - */ - - fontWeight: { - 'thin': 100, - 'extralight': 200, - 'light': 300, - 'normal': 400, - 'medium': 500, - 'semibold': 600, - 'bold': 700, - 'extrabold': 800, - 'black': 900, - }, - - - /* - |--------------------------------------------------------------------------- - | Leading (line height) https://tailwindcss.com/docs/line-height - |--------------------------------------------------------------------------- - | - | Here is where you define your line height values, or as we call - | them in Tailwind, leadings. - | - | Class name: .leading-{size} - | - */ - - lineHeight: { - 'none': 1, - 'tight': 1.25, - 'normal': 1.5, - 'loose': 2, - }, - - - /* - |--------------------------------------------------------------------------- - | Tracking (letter spacing) https://tailwindcss.com/docs/letter-spacing - |--------------------------------------------------------------------------- - | - | Here is where you define your letter spacing values, or as we call - | them in Tailwind, tracking. - | - | Class name: .tracking-{size} - | - */ - - letterSpacing: { - 'tight': '-0.05em', - 'normal': '0', - 'wide': '0.05em', - }, - - - /* - |--------------------------------------------------------------------------- - | Text colors https://tailwindcss.com/docs/text-color - |--------------------------------------------------------------------------- - | - | Here is where you define your text colors. By default these use the - | color palette we defined above, however you're welcome to set these - | independently if that makes sense for your project. - | - | Class name: .text-{color} - | - */ - - textColor: colors, - - - /* - |--------------------------------------------------------------------------- - | Background colors https://tailwindcss.com/docs/background-color - |--------------------------------------------------------------------------- - | - | Here is where you define your background colors. By default these use - | the color palette we defined above, however you're welcome to set - | these independently if that makes sense for your project. - | - | Class name: .bg-{color} - | - */ - - backgroundColor: colors, - - - /* - |--------------------------------------------------------------------------- - | Background sizes https://tailwindcss.com/docs/background-size - |--------------------------------------------------------------------------- - | - | Here is where you define your background sizes. We provide some common - | values that are useful in most projects, but feel free to add other sizes - | that are specific to your project here as well. - | - | Class name: .bg-{size} - | - */ - - backgroundSize: { - 'auto': 'auto', - 'cover': 'cover', - 'contain': 'contain', - }, - - - /* - |--------------------------------------------------------------------------- - | Border widths https://tailwindcss.com/docs/border-width - |--------------------------------------------------------------------------- - | - | Here is where you define your border widths. Take note that border - | widths require a special "default" value set as well. This is the - | width that will be used when you do not specify a border width. - | - | Class name: .border{-side?}{-width?} - | - */ - - borderWidth: { - DEFAULT: '1px', - '0': '0', - '2': '2px', - '4': '4px', - '8': '8px', - }, - - - /* - |--------------------------------------------------------------------------- - | Border colors https://tailwindcss.com/docs/border-color - |--------------------------------------------------------------------------- - | - | Here is where you define your border colors. By default these use the - | color palette we defined above, however you're welcome to set these - | independently if that makes sense for your project. - | - | Take note that border colors require a special "default" value set - | as well. This is the color that will be used when you do not - | specify a border color. - | - | Class name: .border-{color} - | - */ - - borderColor: global.Object.assign({ default: colors['grey-light'] }, colors), - - - /* - |--------------------------------------------------------------------------- - | Border radius https://tailwindcss.com/docs/border-radius - |--------------------------------------------------------------------------- - | - | Here is where you define your border radius values. If a `default` radius - | is provided, it will be made available as the non-suffixed `.rounded` - | utility. - | - | If your scale includes a `0` value to reset already rounded corners, it's - | a good idea to put it first so other values are able to override it. - | - | Class name: .rounded{-side?}{-size?} - | - */ - - borderRadius: { - 'none': '0', - 'sm': '.125rem', - DEFAULT: '.25rem', - 'lg': '.5rem', - 'full': '9999px', - }, - - - /* - |--------------------------------------------------------------------------- - | Width https://tailwindcss.com/docs/width - |--------------------------------------------------------------------------- - | - | Here is where you define your width utility sizes. These can be - | percentage based, pixels, rems, or any other units. By default - | we provide a sensible rem based numeric scale, a percentage - | based fraction scale, plus some other common use-cases. You - | can, of course, modify these values as needed. - | - | - | It's also worth mentioning that Tailwind automatically escapes - | invalid CSS class name characters, which allows you to have - | awesome classes like .w-2/3. - | - | Class name: .w-{size} - | - */ - - width: { - 'auto': 'auto', - 'px': '1px', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '5': '1.25rem', - '6': '1.5rem', - '8': '2rem', - '10': '2.5rem', - '12': '3rem', - '16': '4rem', - '24': '6rem', - '32': '8rem', - '48': '12rem', - '64': '16rem', - '1/2': '50%', - '1/3': '33.33333%', - '2/3': '66.66667%', - '1/4': '25%', - '3/4': '75%', - '1/5': '20%', - '2/5': '40%', - '3/5': '60%', - '4/5': '80%', - '1/6': '16.66667%', - '5/6': '83.33333%', - 'full': '100%', - 'screen': '100vw', - }, - - - /* - |--------------------------------------------------------------------------- - | Height https://tailwindcss.com/docs/height - |--------------------------------------------------------------------------- - | - | Here is where you define your height utility sizes. These can be - | percentage based, pixels, rems, or any other units. By default - | we provide a sensible rem based numeric scale plus some other - | common use-cases. You can, of course, modify these values as - | needed. - | - | Class name: .h-{size} - | - */ - - height: { - 'auto': 'auto', - 'px': '1px', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '5': '1.25rem', - '6': '1.5rem', - '8': '2rem', - '10': '2.5rem', - '12': '3rem', - '16': '4rem', - '24': '6rem', - '32': '8rem', - '48': '12rem', - '64': '16rem', - 'full': '100%', - 'screen': '100vh', - }, - - - /* - |--------------------------------------------------------------------------- - | Minimum width https://tailwindcss.com/docs/min-width - |--------------------------------------------------------------------------- - | - | Here is where you define your minimum width utility sizes. These can - | be percentage based, pixels, rems, or any other units. We provide a - | couple common use-cases by default. You can, of course, modify - | these values as needed. - | - | Class name: .min-w-{size} - | - */ - - minWidth: { - '0': '0', - 'full': '100%', - }, - - - /* - |--------------------------------------------------------------------------- - | Minimum height https://tailwindcss.com/docs/min-height - |--------------------------------------------------------------------------- - | - | Here is where you define your minimum height utility sizes. These can - | be percentage based, pixels, rems, or any other units. We provide a - | few common use-cases by default. You can, of course, modify these - | values as needed. - | - | Class name: .min-h-{size} - | - */ - - minHeight: { - '0': '0', - 'full': '100%', - 'screen': '100vh', - }, - - - /* - |--------------------------------------------------------------------------- - | Maximum width https://tailwindcss.com/docs/max-width - |--------------------------------------------------------------------------- - | - | Here is where you define your maximum width utility sizes. These can - | be percentage based, pixels, rems, or any other units. By default - | we provide a sensible rem based scale and a "full width" size, - | which is basically a reset utility. You can, of course, - | modify these values as needed. - | - | Class name: .max-w-{size} - | - */ - - maxWidth: { - 'xs': '20rem', - 'sm': '30rem', - 'md': '40rem', - 'lg': '50rem', - 'xl': '60rem', - '2xl': '70rem', - '3xl': '80rem', - '4xl': '90rem', - '5xl': '100rem', - 'full': '100%', - }, - - - /* - |--------------------------------------------------------------------------- - | Maximum height https://tailwindcss.com/docs/max-height - |--------------------------------------------------------------------------- - | - | Here is where you define your maximum height utility sizes. These can - | be percentage based, pixels, rems, or any other units. We provide a - | couple common use-cases by default. You can, of course, modify - | these values as needed. - | - | Class name: .max-h-{size} - | - */ - - maxHeight: { - 'full': '100%', - 'screen': '100vh', - }, - - - /* - |--------------------------------------------------------------------------- - | Padding https://tailwindcss.com/docs/padding - |--------------------------------------------------------------------------- - | - | Here is where you define your padding utility sizes. These can be - | percentage based, pixels, rems, or any other units. By default we - | provide a sensible rem based numeric scale plus a couple other - | common use-cases like "1px". You can, of course, modify these - | values as needed. - | - | Class name: .p{side?}-{size} - | - */ - - padding: { - 'px': '1px', - '0': '0', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '5': '1.25rem', - '6': '1.5rem', - '8': '2rem', - '10': '2.5rem', - '12': '3rem', - '16': '4rem', - '20': '5rem', - '24': '6rem', - '32': '8rem', - '1/3': '33.33333%', - '2/3': '66.66667%', - }, - - - /* - |--------------------------------------------------------------------------- - | Margin https://tailwindcss.com/docs/margin - |--------------------------------------------------------------------------- - | - | Here is where you define your margin utility sizes. These can be - | percentage based, pixels, rems, or any other units. By default we - | provide a sensible rem based numeric scale plus a couple other - | common use-cases like "1px". You can, of course, modify these - | values as needed. - | - | Class name: .m{side?}-{size} - | - */ - - margin: { - 'auto': 'auto', - 'px': '1px', - '0': '0', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '5': '1.25rem', - '6': '1.5rem', - '8': '2rem', - '10': '2.5rem', - '12': '3rem', - '16': '4rem', - '20': '5rem', - '24': '6rem', - '32': '8rem', - '1/3': '33.33333%', - '2/3': '66.66667%', - - '-px': '-1px', - '-0': '-0', - '-1': '-0.25rem', - '-2': '-0.5rem', - '-3': '-0.75rem', - '-4': '-1rem', - '-5': '-1.25rem', - '-6': '-1.5rem', - '-8': '-2rem', - '-10': '-2.5rem', - '-12': '-3rem', - '-16': '-4rem', - '-20': '-5rem', - '-24': '-6rem', - '-32': '-8rem', - }, - - - /* - |--------------------------------------------------------------------------- - | Shadows https://tailwindcss.com/docs/shadows - |--------------------------------------------------------------------------- - | - | Here is where you define your shadow utilities. As you can see from - | the defaults we provide, it's possible to apply multiple shadows - | per utility using comma separation. - | - | If a `default` shadow is provided, it will be made available as the non- - | suffixed `.shadow` utility. - | - | Class name: .shadow-{size?} - | - */ - - boxShadow: { - DEFAULT: '0 2px 4px 0 rgba(0,0,0,0.10)', - 'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)', - 'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)', - 'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)', - 'outline': '0 0 0 3px rgba(52,144,220,0.5)', - 'none': 'none', - }, - - - /* - |--------------------------------------------------------------------------- - | Z-index https://tailwindcss.com/docs/z-index - |--------------------------------------------------------------------------- - | - | Here is where you define your z-index utility values. By default we - | provide a sensible numeric scale. You can, of course, modify these - | values as needed. - | - | Class name: .z-{index} - | - */ - - zIndex: { - 'auto': 'auto', - '0': 0, - '10': 10, - '20': 20, - '30': 30, - '40': 40, - '50': 50, - }, - - - /* - |--------------------------------------------------------------------------- - | SVG fill https://tailwindcss.com/docs/svg - |--------------------------------------------------------------------------- - | - | Here is where you define your SVG fill colors. By default we just provide - | `fill-current` which sets the fill to the current text color. This lets you - | specify a fill color using existing text color utilities and helps keep the - | generated CSS file size down. - | - | Class name: .fill-{name} - | - */ - - fill: { - 'current': 'currentColor', - }, - - - /* - |--------------------------------------------------------------------------- - | SVG stroke https://tailwindcss.com/docs/svg - |--------------------------------------------------------------------------- - | - | Here is where you define your SVG stroke colors. By default we just provide - | `stroke-current` which sets the stroke to the current text color. This lets - | you specify a stroke color using existing text color utilities and helps - | keep the generated CSS file size down. - | - | Class name: .stroke-{name} - | - */ - - stroke: { - 'current': 'currentColor', - }, - }, - - /* - |----------------------------------------------------------------------------- - | Modules https://tailwindcss.com/docs/configuration#modules - |----------------------------------------------------------------------------- - | - | Here is where you control which modules are generated and what variants are - | generated for each of those modules. - | - | Currently supported variants: - | - responsive - | - hover - | - focus - | - focus-within - | - active - | - group-hover - | - | To disable a module completely, use `false` instead of an array. - | - */ - - variants: { - appearance: ['responsive'], - backgroundAttachment: ['responsive'], - backgroundColor: ['responsive', 'hover', 'focus'], - backgroundPosition: ['responsive'], - backgroundRepeat: ['responsive'], - backgroundSize: ['responsive'], - borderCollapse: [], - borderColor: ['responsive', 'hover', 'focus'], - borderRadius: ['responsive'], - borderStyle: ['responsive'], - borderWidth: ['responsive'], - cursor: ['responsive'], - display: ['responsive'], - flexDirection: ['responsive'], - flexWrap: ['responsive'], - alignItems: ['responsive'], - alignSelf: ['responsive'], - justifyContent: ['responsive'], - alignContent: ['responsive'], - flex: ['responsive'], - flexGrow: ['responsive'], - flexShrink: ['responsive'], - float: ['responsive'], - fontFamily: ['responsive'], - fontWeight: ['responsive', 'hover', 'focus'], - height: ['responsive'], - lineHeight: ['responsive'], - listStylePosition: ['responsive'], - listStyleType: ['responsive'], - margin: ['responsive'], - maxHeight: ['responsive'], - maxWidth: ['responsive'], - minHeight: ['responsive'], - minWidth: ['responsive'], - opacity: ['responsive'], - outline: ['focus'], - overflow: ['responsive'], - padding: ['responsive'], - pointerEvents: ['responsive'], - position: ['responsive'], - inset: ['responsive'], - resize: ['responsive'], - boxShadow: ['responsive', 'hover', 'focus'], - fill: [], - stroke: [], - tableLayout: ['responsive'], - textAlign: ['responsive'], - textColor: ['responsive', 'hover', 'focus'], - fontSize: ['responsive'], - fontStyle: ['responsive', 'hover', 'focus'], - fontSmoothing: ['responsive', 'hover', 'focus'], - textDecoration: ['responsive', 'hover', 'focus'], - textStextTransformtyle: ['responsive', 'hover', 'focus'], - letterSpacing: ['responsive'], - userSelect: ['responsive'], - verticalAlign: ['responsive'], - visibility: ['responsive'], - whitespace: ['responsive'], - wordBreak: ['responsive'], - textOverflow: ['responsive'], - width: ['responsive'], - zIndex: ['responsive'], - }, - - corePlugins: { - objectFit: false, - objectPosition: false, - }, - - - /* - |----------------------------------------------------------------------------- - | Plugins https://tailwindcss.com/docs/plugins - |----------------------------------------------------------------------------- - | - | Here is where you can register any plugins you'd like to use in your - | project. Tailwind's built-in `container` plugin is enabled by default to - | give you a Bootstrap-style responsive container component out of the box. - | - | Be sure to view the complete plugin documentation to learn more about how - | the plugin system works. - | - */ - - plugins: [], -} diff --git a/app/packs/styles/admin.scss b/app/packs/styles/admin.scss deleted file mode 100644 index 1338a8de..00000000 --- a/app/packs/styles/admin.scss +++ /dev/null @@ -1,9 +0,0 @@ -.member-list { - @apply mx-4; - - td, th { - vertical-align: top; - padding: 0.35em; - text-align: left; - } -} diff --git a/app/packs/styles/application.scss b/app/packs/styles/application.scss deleted file mode 100644 index 96b97c69..00000000 --- a/app/packs/styles/application.scss +++ /dev/null @@ -1,231 +0,0 @@ -@tailwind base; - -body { - font-family: sans-serif; - line-height: 1.15; -} - -@tailwind components; -@tailwind utilities; - -p, li, div, span { - &> a { - @apply text-pink no-underline border-0; - - &:hover { - @apply text-pink-darker border-b border-pink; - } - - svg { - fill: theme('colors.pink'); - opacity: 0.5; - } - } -} - -a { - @apply text-blue underline; - - svg { display: inline; } -} - -h1 { - @apply text-xl bg-pink text-white h-12 pt-1 mb-5 pl-5 pt-3 font-bold; -} - -h2 { - @apply text-xl text-pink-dark font-bold my-4 pl-5; -} - -h3 { - @apply text-lg text-pink-dark font-bold my-3 pl-5; -} - -h4 { - @apply text-lg text-pink-darkest font-bold mt-3 mb-2 pl-5; -} - -p, li { - @apply leading-normal text-grey-darkest px-5; -} - -.markdown { - h1 { - @apply bg-white text-pink-darkest; - } - - blockquote { - @apply mx-8 my-3 p-2 bg-grey-lighter; - } - - ol { - @apply list-decimal list-inside; - - ol, ul { - @apply ml-3; - } - } - - ul { - @apply list-disc list-inside; - - ol, ul { - @apply ml-3; - } - } - - li { - p { - @apply mx-0 px-0; - } - } -} - -#meta { - nav { - header { - a { - border: none !important; - } - } - } -} - -nav { - .actions { - a, button { - @apply block mt-3 mx-3 px-5 py-2 border-2 shadow border-pink font-mono text-pink text-center no-underline; - transition: background-color 0.5s ease; - - &:hover { - @apply bg-pink-darker text-white; - } - } - } -} - -#nav-primary { - h3 { - @apply mt-5 mb-2 p-0; - } - - ul { - li { - @apply px-0 pb-2; - } - } -} - -#in-person { - #meetup-locations { - @apply mt-3; - - list-style: disc outside none; - - li { - @apply pb-2; - - a { - @apply no-underline border-cyan border-b; - - &:hover { - @apply border-purple; - } - } - } - } -} - -.welcome { - @apply text-xl; - @apply max-w-md; - @apply mx-4; - - h2 { - @apply my-6; - } - - p, ul { - @apply mt-10; - @apply my-6; - } -} - -#body { - p { - @apply mt-4; - } - - li { - @apply mt-1; - } -} - -.call-to-action { - a { - @apply text-purple w-5/6 my-4 mr-3 px-5 py-2 border-2 shadow bg-white border-purple text-purple no-underline font-mono; - transition: all 0.25s ease; - - &:hover { - @apply bg-purple-darker text-white; - } - } -} - -#contributing { - @apply text-white; -} - -.divider-1 { - background-position: 0 70px; - min-height: 70px; -} - -.divider-2 { - background-position: 0 100px; - min-height: 70px; -} - -.divider-3 { - background-position: 0 240px; - min-height: 70px; -} - -.divider-4 { - min-height: 70px; -} - -.announcement { - @apply divider-1 text-white py-6 justify-center; - - div { - @apply max-w-md mx-4 justify-center text-center; - } - - a, p { - @apply inline-block border-pink border-2 text-pink font-mono no-underline font-bold bg-white py-2 px-5 shadow-md; - - &:hover { - @apply bg-pink text-white; - } - } -} - -#flash { - @apply max-w-md text-center my-4; - - .flash { - @apply text-purple w-5/6 my-4 px-5 py-2 border-2 shadow bg-white border-purple font-mono mx-auto text-sm; - transition: all 0.25s ease; - } -} - -@screen md { - .devise-links { - @apply pl-1/3; - } -} - -.badge { - @apply inline-flex items-center rounded bg-green px-2 py-1 text-xs font-medium text-white ring-1 ring-inset; -} diff --git a/app/packs/styles/committee.scss b/app/packs/styles/committee.scss deleted file mode 100644 index 64227c0a..00000000 --- a/app/packs/styles/committee.scss +++ /dev/null @@ -1,62 +0,0 @@ - - -#committee { - & > article { - @apply max-w-xs rounded shadow-lg m-5 flex-shrink-0 flex flex-col; - - figure { - @apply overflow-hidden; - - max-height: 320px; - } - - header { - @apply px-6 py-4; - - div:first-child { - @apply font-bold text-xl mb-2; - } - - div:nth-child(2) { - @apply font-bold text-grey-darkest mb-2; - } - } - - main { - @apply px-1 py-2; - - p { - @apply text-grey-darker text-base; - } - } - - aside { - @apply flex flex-grow flex-col p-3 justify-end; - - span { - @apply bg-grey-lighter rounded-full px-3 py-2 text-sm font-semibold text-grey-darker m-1; - - svg { display: inline; } - - a { - @apply text-purple; - - &:hover { - @apply text-purple-darker; - } - } - } - } - } -} - -#previous { - article { - @apply rounded shadow-lg m-5 flex-shrink-0 flex flex-col p-5; - - img { - width: 120px; - align-self: flex-start; - } - } -} diff --git a/app/packs/styles/forms.scss b/app/packs/styles/forms.scss deleted file mode 100644 index 5d3846b0..00000000 --- a/app/packs/styles/forms.scss +++ /dev/null @@ -1,104 +0,0 @@ -form.standard { - @apply mt-5 w-full max-w-md; - - legend { - @apply text-purple-dark font-bold mt-12 mb-2; - } - - label { - @apply block text-grey font-bold mb-1 pr-4; - } - - input[type=text], - input[type=email], - input[type=password], - textarea { - @apply bg-grey-lighter appearance-none border-2 border-grey-lighter rounded w-full py-2 px-4 text-grey-darker leading-tight; - - &:focus { - @apply outline-none bg-white border-purple; - } - } - - input[type=submit] { - @apply shadow bg-purple text-white font-bold py-2 px-4 rounded; - - &:focus { - @apply ring outline-none; - } - - &:hover { - @apply bg-purple-light; - } - } - - .field { - @apply mb-6; - @apply mt-6; - } - - .buttons { - @apply mb-6; - } - - .hint { - @apply text-base pt-2; - } - - .info { - @apply text-base; - } - - @screen md { - legend { - @apply pl-1/3 w-2/3; - } - - label { - @apply text-right mb-0; - } - - .field { - @apply flex items-center; - flex-wrap: wrap; - } - - .label { - @apply w-1/3 flex-auto; - } - - .input { - @apply w-2/3 flex-auto; - } - - .flipped { - label { - @apply text-left; - } - - .label { - @apply w-2/3 flex-auto; - } - - .input { - @apply w-1/3 flex-auto text-right pr-3; - } - } - - .hint { - @apply w-2/3 ml-1/3; - } - - .buttons { - @apply flex items-center pl-1/3 w-2/3; - } - - .links { - @apply pl-1/3; - } - - .info { - @apply pl-1/3; - } - } -} diff --git a/app/packs/styles/signatures.scss b/app/packs/styles/signatures.scss deleted file mode 100644 index 97bef28d..00000000 --- a/app/packs/styles/signatures.scss +++ /dev/null @@ -1,84 +0,0 @@ -.signature { - height: 200px; -} - -.signature-pad { - position: relative; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - font-size: 10px; - width: 100%; - height: 100%; - max-width: 700px; - max-height: 460px; - border: 1px solid #e8e8e8; - background-color: #fff; - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset; - border-radius: 4px; - padding: 16px; -} - -.signature-pad::before, -.signature-pad::after { - position: absolute; - z-index: -1; - content: ""; - width: 40%; - height: 10px; - bottom: 10px; - background: transparent; - box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4); -} - -.signature-pad::before { - left: 20px; - -webkit-transform: skew(-3deg) rotate(-3deg); - transform: skew(-3deg) rotate(-3deg); -} - -.signature-pad::after { - right: 20px; - -webkit-transform: skew(3deg) rotate(3deg); - transform: skew(3deg) rotate(3deg); -} - -.signature-pad--body { - position: relative; - -webkit-box-flex: 1; - -ms-flex: 1; - flex: 1; - border: 1px solid #f4f4f4; -} - -.signature-pad--body -canvas { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - border-radius: 4px; - box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset; -} - -.signature-pad--footer { - color: #C3C3C3; - text-align: center; - font-size: 1.2em; - margin-top: 8px; -} - -.signature-pad--actions { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - margin-top: 8px; -} diff --git a/app/packs/styles/sponsorship.scss b/app/packs/styles/sponsorship.scss deleted file mode 100644 index 292a415f..00000000 --- a/app/packs/styles/sponsorship.scss +++ /dev/null @@ -1,46 +0,0 @@ -.sponsor-logos { - a { - border: none !important; - } - - img { - margin: 25px; - } - - .sponsor-logo-ruby { - width: 500px; - } - - .sponsor-logo-emerald { - width: 400px; - } - - .sponsor-logo-sapphire { - width: 325px; - } - - .sponsor-logo-opal { - width: 275px; - height: auto; - } - - .sponsor-logo-amber { - width: 225px; - } - - .opal-sponsors { - h2 { - margin: 0 0 16px 0; - } - } - - .sponsor-logo-standalone { - width: 400px; - } -} - -.sponsor-standalone { - h1 a { - @apply text-pink-darkest no-underline text-2xl; - } -} diff --git a/app/packs/styles/surveys.scss b/app/packs/styles/surveys.scss deleted file mode 100644 index be0966d4..00000000 --- a/app/packs/styles/surveys.scss +++ /dev/null @@ -1,12 +0,0 @@ -#survey-results { - .chart { - height: 400px; - width: 100%; - padding: 1.25rem; - font-size: 0.8rem; - } - - h3 { - margin-top: 3rem; - } -} diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb deleted file mode 100644 index 20637673..00000000 --- a/config/initializers/assets.rb +++ /dev/null @@ -1,10 +0,0 @@ -# Be sure to restart your server when you modify this file. - -# Version of your assets, change this if you want to expire all your assets. -Rails.application.config.assets.version = "1.0" - -# Add additional assets to the asset load path. -# Rails.application.config.assets.paths << Emoji.images_path - -# Add Yarn node_modules folder to the asset load path. -Rails.application.config.assets.paths << Rails.root.join('node_modules') diff --git a/config/webpack/base.js b/config/webpack/base.js deleted file mode 100644 index 9c4d9d22..00000000 --- a/config/webpack/base.js +++ /dev/null @@ -1,21 +0,0 @@ -const { webpackConfig, merge } = require('@rails/webpacker') -const webpack = require('webpack') - -const prependedConfig = { - plugins: [ - new webpack.ProvidePlugin({ - $: 'jquery', - jQuery: 'jquery', - jquery: 'jquery' - }) - ] -} - -const appendedConfig = { - resolve: { - extensions: ['.css', '.scss'] - } -} - -module.exports = merge(prependedConfig, webpackConfig) -module.exports = merge(module.exports, appendedConfig) diff --git a/config/webpack/development.js b/config/webpack/development.js deleted file mode 100644 index c84a413b..00000000 --- a/config/webpack/development.js +++ /dev/null @@ -1,5 +0,0 @@ -process.env.NODE_ENV = process.env.NODE_ENV || 'development' - -const webpackConfig = require('./base') - -module.exports = webpackConfig diff --git a/config/webpack/production.js b/config/webpack/production.js deleted file mode 100644 index c41e0436..00000000 --- a/config/webpack/production.js +++ /dev/null @@ -1,5 +0,0 @@ -process.env.NODE_ENV = process.env.NODE_ENV || 'production' - -const webpackConfig = require('./base') - -module.exports = webpackConfig diff --git a/config/webpack/test.js b/config/webpack/test.js deleted file mode 100644 index c84a413b..00000000 --- a/config/webpack/test.js +++ /dev/null @@ -1,5 +0,0 @@ -process.env.NODE_ENV = process.env.NODE_ENV || 'development' - -const webpackConfig = require('./base') - -module.exports = webpackConfig diff --git a/config/webpacker.yml b/config/webpacker.yml deleted file mode 100644 index 2ac14d06..00000000 --- a/config/webpacker.yml +++ /dev/null @@ -1,65 +0,0 @@ -# Note: You must restart bin/webpack-dev-server for changes to take effect - -default: &default - source_path: app/packs - source_entry_path: entrypoints - public_root_path: public - public_output_path: packs - cache_path: tmp/cache/webpacker - webpack_compile_output: true - - # Additional paths webpack should look up modules - # ['app/assets', 'engine/foo/app/assets'] - additional_paths: [] - - # Reload manifest.json on all requests so we reload latest compiled packs - cache_manifest: false - -development: - <<: *default - compile: true - - # Reference: https://webpack.js.org/configuration/dev-server/ - dev_server: - https: false - host: localhost - port: 3035 - public: localhost:3035 - # Inject browserside javascript that required by both HMR and Live(full) reload - inject_client: true - # Hot Module Replacement updates modules while the application is running without a full reload - hmr: false - # Inline should be set to true if using HMR; it inserts a script to take care of live reloading - inline: true - # Should we show a full-screen overlay in the browser when there are compiler errors or warnings? - overlay: true - # Should we use gzip compression? - compress: true - # Note that apps that do not check the host are vulnerable to DNS rebinding attacks - disable_host_check: true - # This option lets the browser open with your local IP - use_local_ip: false - # When enabled, nothing except the initial startup information will be written to the console. - # This also means that errors or warnings from webpack are not visible. - quiet: false - pretty: false - headers: - 'Access-Control-Allow-Origin': '*' - watch_options: - ignored: '**/node_modules/**' - -test: - <<: *default - compile: true - - # Compile test packs to a separate directory - public_output_path: packs-test - -production: - <<: *default - - # Production depends on precompilation of packs prior to booting for performance. - compile: false - - # Cache manifest.json for performance - cache_manifest: true From 7f5b138d6e4f0cb8e0d4985d058936d5da81ce37 Mon Sep 17 00:00:00 2001 From: Lee Sheppard Date: Sat, 28 Dec 2024 21:13:51 +1100 Subject: [PATCH 02/14] Have postcss use commonJS --- postcss.config.js => postcss.config.cjs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) rename postcss.config.js => postcss.config.cjs (67%) diff --git a/postcss.config.js b/postcss.config.cjs similarity index 67% rename from postcss.config.js rename to postcss.config.cjs index f5c43596..526a406c 100644 --- a/postcss.config.js +++ b/postcss.config.cjs @@ -1,13 +1,13 @@ module.exports = { plugins: [ - require('postcss-import'), - require('tailwindcss')('./tailwind.config.js'), require('postcss-flexbugs-fixes'), require('postcss-preset-env')({ autoprefixer: { flexbox: 'no-2009' }, stage: 3 - }) + }), + require('tailwindcss'), + require('autoprefixer') ] } From 26ae40d385ae4baf1a49c76929fb091e2a1921a7 Mon Sep 17 00:00:00 2001 From: Lee Sheppard Date: Sat, 28 Dec 2024 21:16:45 +1100 Subject: [PATCH 03/14] Vite installed --- .gitignore | 8 + Gemfile | 5 +- app/frontend/entrypoints/2019_survey.js | 279 ++++++++++++++++++ app/frontend/entrypoints/application.js | 81 +++++ app/frontend/entrypoints/styles/admin.scss | 9 + .../entrypoints/styles/application.scss | 228 ++++++++++++++ .../entrypoints/styles/committee.scss | 62 ++++ app/frontend/entrypoints/styles/forms.scss | 104 +++++++ .../entrypoints/styles/signatures.scss | 84 ++++++ .../entrypoints/styles/sponsorship.scss | 46 +++ app/frontend/entrypoints/styles/surveys.scss | 12 + app/views/layouts/application.html.erb | 5 +- bin/vite | 27 ++ config/environments/development.rb | 3 + .../initializers/content_security_policy.rb | 9 + config/vite.json | 16 + package.json | 42 +-- vite.config.mts | 41 +++ 18 files changed, 1029 insertions(+), 32 deletions(-) create mode 100644 app/frontend/entrypoints/2019_survey.js create mode 100644 app/frontend/entrypoints/application.js create mode 100644 app/frontend/entrypoints/styles/admin.scss create mode 100644 app/frontend/entrypoints/styles/application.scss create mode 100644 app/frontend/entrypoints/styles/committee.scss create mode 100644 app/frontend/entrypoints/styles/forms.scss create mode 100644 app/frontend/entrypoints/styles/signatures.scss create mode 100644 app/frontend/entrypoints/styles/sponsorship.scss create mode 100644 app/frontend/entrypoints/styles/surveys.scss create mode 100755 bin/vite create mode 100644 config/vite.json create mode 100644 vite.config.mts diff --git a/.gitignore b/.gitignore index 6a0ac78e..67734ef2 100644 --- a/.gitignore +++ b/.gitignore @@ -34,3 +34,11 @@ yarn-debug.log* /app/assets/builds/* !/app/assets/builds/.keep + +# Vite Ruby +/public/vite* +node_modules +# Vite uses dotenv and suggests to ignore local-only env files. See +# https://vitejs.dev/guide/env-and-mode.html#env-files +*.local + diff --git a/Gemfile b/Gemfile index 138d2684..d28dbc5e 100644 --- a/Gemfile +++ b/Gemfile @@ -19,11 +19,10 @@ gem 'kaminari' gem 'premailer-rails' gem 'pygmentize' gem 'redcarpet' -gem "dartsass-rails", "~> 0.5.0" gem 'validates_email_format_of' gem 'warden' # use for auth -gem 'webpacker', '6.0.0.rc.6' -gem 'sprockets-rails' # as of Rails 7.0, this is optional +gem 'vite_rails' +gem 'sprockets-rails' group :production do gem 'rails_12factor' diff --git a/app/frontend/entrypoints/2019_survey.js b/app/frontend/entrypoints/2019_survey.js new file mode 100644 index 00000000..b3204289 --- /dev/null +++ b/app/frontend/entrypoints/2019_survey.js @@ -0,0 +1,279 @@ +const am4core = require("@amcharts/amcharts4/core"); +const am4charts = require("@amcharts/amcharts4/charts"); +const am4maps = require("@amcharts/amcharts4/maps"); +const am4geodata_australiaLow = require("@amcharts/amcharts4-geodata/australiaLow").default; + +$(document).ready(() => { + if ($("#survey-results").length == 0) { return; } + + + var chart = am4core.create("age-chart", am4charts.XYChart); + + chart.data = [ + {"range": "0-18", "count": 0}, + {"range": "19-24", "count": 1}, + {"range": "25-32", "count": 49}, + {"range": "33-38", "count": 47}, + {"range": "39-46", "count": 33}, + {"range": "47-58", "count": 4}, + {"range": "59+", "count": 0} + ] + + var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); + categoryAxis.dataFields.category = "range"; + categoryAxis.title.text = "Age Range"; + + var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); + valueAxis.title.text = "Count"; + + var series = chart.series.push(new am4charts.ColumnSeries()); + series.dataFields.valueY = "count"; + series.dataFields.categoryX = "range"; + series.columns.template.tooltipText = "Range: {categoryX}\nCount: {valueY}"; + + + var map = am4core.create("states-chart", am4maps.MapChart); + map.geodata = am4geodata_australiaLow; + + var polygonSeries = new am4maps.MapPolygonSeries(); + polygonSeries.useGeodata = true; + + polygonSeries.data = [ + {"id": "AU-ACT", "value": 4}, + {"id": "AU-NSW", "value": 33}, + {"id": "AU-NT", "value": 0}, + {"id": "AU-QLD", "value": 13}, + {"id": "AU-SA", "value": 5}, + {"id": "AU-TAS", "value": 1}, + {"id": "AU-VIC", "value": 63}, + {"id": "AU-WA", "value": 6} + ]; + polygonSeries.heatRules.push({ + "property": "fill", + "target": polygonSeries.mapPolygons.template, + "min": am4core.color("#F2EBFD"), + "max": am4core.color("#241146") + }); + map.series.push(polygonSeries); + + // Configure series + var polygonTemplate = polygonSeries.mapPolygons.template; + polygonTemplate.tooltipText = "{name}: {value}"; + + + var chart = am4core.create("education-chart", am4charts.PieChart); + chart.innerRadius = am4core.percent(40); + chart.startAngle = 0; + chart.endAngle = 360; + + chart.data = [ + {"type": "High School", "count": 15}, + {"type": "TAFE", "count": 14}, + {"type": "Bachelors", "count": 82}, + {"type": "Masters", "count": 18}, + {"type": "PhD", "count": 2}, + {"type": "Other", "count": 3} + ] + + var pieSeries = chart.series.push(new am4charts.PieSeries()); + pieSeries.dataFields.category = "type"; + pieSeries.dataFields.value = "count"; + + + var chart = am4core.create("employment-chart", am4charts.PieChart); + chart.innerRadius = am4core.percent(40); + chart.startAngle = -40; + chart.endAngle = 320; + + chart.data = [ + {"type": "Full-time Employee", "count": 99}, + {"type": "Part-time Employee", "count": 4}, + {"type": "Self Employed: Contractor/Freelancer", "count": 8}, + {"type": "Self Employed: Own Product", "count": 4}, + {"type": "Director/Owner", "count": 9}, + {"type": "Student", "count": 5}, + {"type": "Unemployed", "count": 4}, + {"type": "Other", "count": 1} + ] + + var pieSeries = chart.series.push(new am4charts.PieSeries()); + pieSeries.dataFields.category = "type"; + pieSeries.dataFields.value = "count"; + + + var chart = am4core.create("experience-chart", am4charts.PieChart); + chart.innerRadius = am4core.percent(40); + // chart.startAngle = -40; + // chart.endAngle = 320; + + chart.data = [ + {"type": "Entry-level/Junior", "count": 14}, + {"type": "Mid-level", "count": 26}, + {"type": "Senior/Principal", "count": 84} + ] + + var pieSeries = chart.series.push(new am4charts.PieSeries()); + pieSeries.dataFields.category = "type"; + pieSeries.dataFields.value = "count"; + + + var chart = am4core.create("office-chart", am4charts.PieChart); + chart.innerRadius = am4core.percent(40); + // chart.startAngle = -40; + // chart.endAngle = 320; + + chart.data = [ + {"type": "Only in an office", "count": 8}, + {"type": "Only remote", "count": 7}, + {"type": "Usually office, occasionally remote", "count": 57}, + {"type": "Usually remote, occasionally office", "count": 14}, + {"type": "Wherever", "count": 35}, + {"type": "Other", "count": 1} + ] + + var pieSeries = chart.series.push(new am4charts.PieSeries()); + pieSeries.dataFields.category = "type"; + pieSeries.dataFields.value = "count"; + + + var chart = am4core.create("company-size-chart", am4charts.XYChart); + + chart.data = [ + {"range": "0-10", "count": 19}, + {"range": "11-20", "count": 24}, + {"range": "21-50", "count": 23}, + {"range": "51-100", "count": 12}, + {"range": "101-500", "count": 28}, + {"range": "501-5000", "count": 15}, + {"range": "5001+", "count": 3} + ] + + var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); + categoryAxis.dataFields.category = "range"; + categoryAxis.title.text = "Number of Employees"; + + var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); + valueAxis.title.text = "Count"; + + var series = chart.series.push(new am4charts.ColumnSeries()); + series.dataFields.valueY = "count"; + series.dataFields.categoryX = "range"; + series.columns.template.tooltipText = "Range: {categoryX}\nCount: {valueY}"; + + + var chart = am4core.create("colleague-size-chart", am4charts.XYChart); + + chart.data = [ + {"range": "1", "count": 9}, + {"range": "2-4", "count": 21}, + {"range": "5-10", "count": 40}, + {"range": "11-20", "count": 14}, + {"range": "21-50", "count": 14}, + {"range": "50+", "count": 17} + ] + + var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); + categoryAxis.dataFields.category = "range"; + categoryAxis.title.text = "Number of Rubyists"; + + var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); + valueAxis.title.text = "Count"; + + var series = chart.series.push(new am4charts.ColumnSeries()); + series.dataFields.valueY = "count"; + series.dataFields.categoryX = "range"; + series.columns.template.tooltipText = "Range: {categoryX}\nCount: {valueY}"; + + + var chart = am4core.create("hire-size-chart", am4charts.XYChart); + + chart.data = [ + {"range": "0", "count": 26}, + {"range": "1-3", "count": 47}, + {"range": "4-10", "count": 21}, + {"range": "11+", "count": 18} + ] + + var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); + categoryAxis.dataFields.category = "range"; + categoryAxis.title.text = "New Hires (people)"; + + var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); + valueAxis.title.text = "Count"; + + var series = chart.series.push(new am4charts.ColumnSeries()); + series.dataFields.valueY = "count"; + series.dataFields.categoryX = "range"; + series.columns.template.tooltipText = "Range: {categoryX}\nCount: {valueY}"; + + + var chart = am4core.create("hobby-time-chart", am4charts.XYChart); + + chart.data = [ + {"range": "0-0.5", "count": 3}, + {"range": "1-1.5", "count": 11}, + {"range": "2-3", "count": 20}, + {"range": "4-6", "count": 22}, + {"range": "7-10", "count": 42}, + {"range": "11-15", "count": 30}, + {"range": "16+", "count": 6} + ] + + var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); + categoryAxis.dataFields.category = "range"; + categoryAxis.title.text = "Years"; + + var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); + valueAxis.title.text = "Count"; + + var series = chart.series.push(new am4charts.ColumnSeries()); + series.dataFields.valueY = "count"; + series.dataFields.categoryX = "range"; + series.columns.template.tooltipText = "Range: {categoryX}\nCount: {valueY}"; + + + var chart = am4core.create("professional-time-chart", am4charts.XYChart); + + chart.data = [ + {"range": "0", "count": 15}, + {"range": "0.5-1.5", "count": 11}, + {"range": "2-4", "count": 22}, + {"range": "5-7", "count": 36}, + {"range": "8-10", "count": 30}, + {"range": "11-16", "count": 20} + ] + + var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis()); + categoryAxis.dataFields.category = "range"; + categoryAxis.title.text = "Years"; + + var valueAxis = chart.yAxes.push(new am4charts.ValueAxis()); + valueAxis.title.text = "Count"; + + var series = chart.series.push(new am4charts.ColumnSeries()); + series.dataFields.valueY = "count"; + series.dataFields.categoryX = "range"; + series.columns.template.tooltipText = "Range: {categoryX}\nCount: {valueY}"; + + + var chart = am4core.create("focuses-chart", am4charts.PieChart); + chart.innerRadius = am4core.percent(40); + // chart.startAngle = -40; + // chart.endAngle = 320; + + chart.data = [ + {"type": "Ruby", "count": 101}, + {"type": "Javascript", "count": 73}, + {"type": "Tech Leadership/Management", "count": 54}, + {"type": "Elixir", "count": 33}, + {"type": "Go", "count": 22}, + {"type": "Python", "count": 19}, + {"type": "Other (Functional languages)", "count": 17}, + {"type": "Other (OO languages)", "count": 14}, + {"type": "Rust", "count": 10} + ] + + var pieSeries = chart.series.push(new am4charts.PieSeries()); + pieSeries.dataFields.category = "type"; + pieSeries.dataFields.value = "count"; +}); diff --git a/app/frontend/entrypoints/application.js b/app/frontend/entrypoints/application.js new file mode 100644 index 00000000..e4ce6fc6 --- /dev/null +++ b/app/frontend/entrypoints/application.js @@ -0,0 +1,81 @@ +import 'core-js/stable' +import 'regenerator-runtime/runtime' + +require("@rails/ujs").start() + +const SignaturePad = require("signature_pad").default; + +import "./styles/application.scss"; +import "./styles/committee.scss"; +import "./styles/sponsorship.scss"; +import "./styles/forms.scss"; +import "./styles/admin.scss"; +import "./styles/signatures.scss"; +import "./styles/surveys.scss"; + +$(document).ready(() => { + $('#mobile-menu-trigger').on('click', () => $('#mobile-menu').slideToggle()); +}); + +window.setupSignature = function() { + var wrapper = document.getElementById("signature-pad"); + var clearButton = wrapper.querySelector("[data-action=clear]"); + var undoButton = wrapper.querySelector("[data-action=undo]"); + var canvas = wrapper.querySelector("canvas"); + var signaturePad = new SignaturePad(canvas, { + backgroundColor: 'rgb(255, 255, 255)' + }); + + // Adjust canvas coordinate space taking into account pixel ratio, + // to make it look crisp on mobile devices. + // This also causes canvas to be cleared. + function resizeCanvas() { + // When zoomed out to less than 100%, for some very strange reason, + // some browsers report devicePixelRatio as less than 1 + // and only part of the canvas is cleared then. + var ratio = Math.max(window.devicePixelRatio || 1, 1); + + // This part causes the canvas to be cleared + canvas.width = canvas.offsetWidth * ratio; + canvas.height = canvas.offsetHeight * ratio; + canvas.getContext("2d").scale(ratio, ratio); + + // This library does not listen for canvas changes, so after the canvas is automatically + // cleared by the browser, SignaturePad#isEmpty might still return false, even though the + // canvas looks empty, because the internal data of this library wasn't cleared. To make sure + // that the state of this library is consistent with visual state of the canvas, you + // have to clear it manually. + signaturePad.clear(); + } + + // On mobile devices it might make more sense to listen to orientation change, + // rather than window resize events. + window.onresize = resizeCanvas; + resizeCanvas(); + + clearButton.addEventListener("click", function (event) { + signaturePad.clear(); + }); + + undoButton.addEventListener("click", function (event) { + var data = signaturePad.toData(); + + if (data) { + data.pop(); // remove the last dot or line + signaturePad.fromData(data); + } + }); + + $('#set-proxy-form').on('submit', function(event) { + if ($("#rsvp_proxy_name").val().length == 0) { + alert("Please provide the name of your proxy representative."); + return false; + } + if (signaturePad.isEmpty()) { + alert("Please provide a signature."); + return false; + } + + $('#rsvp_proxy_signature').val(signaturePad.toDataURL()); + }); +} diff --git a/app/frontend/entrypoints/styles/admin.scss b/app/frontend/entrypoints/styles/admin.scss new file mode 100644 index 00000000..1338a8de --- /dev/null +++ b/app/frontend/entrypoints/styles/admin.scss @@ -0,0 +1,9 @@ +.member-list { + @apply mx-4; + + td, th { + vertical-align: top; + padding: 0.35em; + text-align: left; + } +} diff --git a/app/frontend/entrypoints/styles/application.scss b/app/frontend/entrypoints/styles/application.scss new file mode 100644 index 00000000..4450f62b --- /dev/null +++ b/app/frontend/entrypoints/styles/application.scss @@ -0,0 +1,228 @@ +@tailwind base; + +body { + font-family: sans-serif; + line-height: 1.15; + background-color: white; +} + +@tailwind components; +@tailwind utilities; + +p, li, div, span { + & > a { + @apply text-pink no-underline border-0; + + &:hover { + @apply text-pink-darker border-b border-pink-500; + } + + svg { + fill: theme('colors.pink.DEFAULT'); + opacity: 0.5; + } + } +} + +a { + @apply text-blue underline; + + svg { display: inline; } +} + +h1 { + @apply text-xl bg-pink text-white h-12 pt-1 mb-5 pl-5 pt-3 font-bold; +} + +h2 { + @apply text-xl text-pink-dark font-bold my-4 pl-5; +} + +h3 { + @apply text-lg text-pink-dark font-bold my-3 pl-5; +} + +h4 { + @apply text-lg text-pink-darkest font-bold mt-3 mb-2 pl-5; +} + +p, li { + @apply leading-normal text-grey-darkest px-5; +} + +.markdown { + h1 { + @apply bg-white text-pink-darkest; + } + + blockquote { + @apply mx-8 my-3 p-2 bg-grey-lighter; + } + + ol { + @apply list-decimal list-inside; + + ol, ul { + @apply ml-3; + } + } + + ul { + @apply list-disc list-inside; + + ol, ul { + @apply ml-3; + } + } + + li { + p { + @apply mx-0 px-0; + } + } +} + +#meta { + nav { + header { + a { + border: none !important; + } + } + } +} + +nav { + .actions { + a, button { + @apply block mt-3 mx-3 px-5 py-2 border-2 shadow border-pink-500 font-mono text-pink text-center no-underline; + transition: background-color 0.5s ease; + + &:hover { + @apply bg-pink-darker text-white; + } + } + } +} + +#nav-primary { + h3 { + @apply mt-5 mb-2 p-0; + } + + ul { + li { + @apply px-0 pb-2; + } + } +} + +#in-person { + #meetup-locations { + @apply mt-3; + + list-style: disc outside none; + + li { + @apply pb-2; + + a { + @apply no-underline border-cyan border-b; + + &:hover { + @apply border-purple-500; + } + } + } + } +} + +.welcome { + @apply text-xl; + @apply max-w-md; + @apply mx-4; + + h2 { + @apply my-6; + } + + p, ul { + @apply mt-10; + @apply my-6; + } +} + +#body { + p { + @apply mt-4; + } + + li { + @apply mt-1; + } +} + +.call-to-action { + a { + @apply text-purple w-6 my-4 mr-3 px-5 py-2 border-2 shadow bg-white border-purple-500 text-purple-500 no-underline font-mono; + transition: all 0.25s ease; + + &:hover { + @apply bg-purple-darker text-white; + } + } +} + +#contributing { + @apply text-white; +} + +.divider-1 { + background-position: 0 70px; + min-height: 70px; +} + +.divider-2 { + background-position: 0 100px; + min-height: 70px; +} + +.divider-3 { + background-position: 0 240px; + min-height: 70px; +} + +.divider-4 { + min-height: 70px; +} + +.announcement { + @apply divider-1 text-white py-6 justify-center; + + div { + @apply max-w-md mx-4 justify-center text-center; + } + + a, p { + @apply inline-block border-pink-500 border-2 text-pink-500 font-mono no-underline font-bold bg-white py-2 px-5 shadow-md; + + &:hover { + @apply bg-pink text-white; + } + } +} + +#flash { + @apply max-w-md text-center my-4; + + .flash { + @apply text-purple w-6 my-4 px-5 py-2 border-2 shadow bg-white border-purple-500 font-mono mx-auto text-sm; + transition: all 0.25s ease; + } +} + +@screen md { + .devise-links { + @apply pl-4; + } +} diff --git a/app/frontend/entrypoints/styles/committee.scss b/app/frontend/entrypoints/styles/committee.scss new file mode 100644 index 00000000..64227c0a --- /dev/null +++ b/app/frontend/entrypoints/styles/committee.scss @@ -0,0 +1,62 @@ + + +#committee { + & > article { + @apply max-w-xs rounded shadow-lg m-5 flex-shrink-0 flex flex-col; + + figure { + @apply overflow-hidden; + + max-height: 320px; + } + + header { + @apply px-6 py-4; + + div:first-child { + @apply font-bold text-xl mb-2; + } + + div:nth-child(2) { + @apply font-bold text-grey-darkest mb-2; + } + } + + main { + @apply px-1 py-2; + + p { + @apply text-grey-darker text-base; + } + } + + aside { + @apply flex flex-grow flex-col p-3 justify-end; + + span { + @apply bg-grey-lighter rounded-full px-3 py-2 text-sm font-semibold text-grey-darker m-1; + + svg { display: inline; } + + a { + @apply text-purple; + + &:hover { + @apply text-purple-darker; + } + } + } + } + } +} + +#previous { + article { + @apply rounded shadow-lg m-5 flex-shrink-0 flex flex-col p-5; + + img { + width: 120px; + align-self: flex-start; + } + } +} diff --git a/app/frontend/entrypoints/styles/forms.scss b/app/frontend/entrypoints/styles/forms.scss new file mode 100644 index 00000000..b04bcf7b --- /dev/null +++ b/app/frontend/entrypoints/styles/forms.scss @@ -0,0 +1,104 @@ +form.standard { + @apply mt-5 w-full max-w-md; + + legend { + @apply text-purple-dark font-bold mt-12 mb-2; + } + + label { + @apply block text-black font-bold mb-1 pr-4; + } + + input[type=text], + input[type=email], + input[type=password], + textarea { + @apply bg-grey-lighter appearance-none border-2 border-grey-lighter rounded w-full py-2 px-4 text-black leading-tight; + + &:focus { + @apply outline-none bg-white border-purple; + } + } + + input[type=submit] { + @apply shadow bg-purple text-white font-bold py-2 px-4 rounded; + + &:focus { + @apply ring outline-none; + } + + &:hover { + @apply bg-purple-light; + } + } + + .field { + @apply mb-6; + @apply mt-6; + } + + .buttons { + @apply mb-6; + } + + .hint { + @apply text-base pt-2; + } + + .info { + @apply text-base; + } + + @screen md { + legend { + @apply pl-1 w-2; + } + + label { + @apply text-right mb-0; + } + + .field { + @apply flex items-center; + flex-wrap: wrap; + } + + .label { + @apply w-1 flex-auto; + } + + .input { + @apply w-2 flex-auto; + } + + .flipped { + label { + @apply text-left; + } + + .label { + @apply w-2 flex-auto; + } + + .input { + @apply w-1 flex-auto text-right pr-3; + } + } + + .hint { + @apply w-2 ml-1; + } + + .buttons { + @apply flex items-center pl-1 w-2; + } + + .links { + @apply pl-1; + } + + .info { + @apply pl-1; + } + } +} diff --git a/app/frontend/entrypoints/styles/signatures.scss b/app/frontend/entrypoints/styles/signatures.scss new file mode 100644 index 00000000..97bef28d --- /dev/null +++ b/app/frontend/entrypoints/styles/signatures.scss @@ -0,0 +1,84 @@ +.signature { + height: 200px; +} + +.signature-pad { + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + font-size: 10px; + width: 100%; + height: 100%; + max-width: 700px; + max-height: 460px; + border: 1px solid #e8e8e8; + background-color: #fff; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset; + border-radius: 4px; + padding: 16px; +} + +.signature-pad::before, +.signature-pad::after { + position: absolute; + z-index: -1; + content: ""; + width: 40%; + height: 10px; + bottom: 10px; + background: transparent; + box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4); +} + +.signature-pad::before { + left: 20px; + -webkit-transform: skew(-3deg) rotate(-3deg); + transform: skew(-3deg) rotate(-3deg); +} + +.signature-pad::after { + right: 20px; + -webkit-transform: skew(3deg) rotate(3deg); + transform: skew(3deg) rotate(3deg); +} + +.signature-pad--body { + position: relative; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + border: 1px solid #f4f4f4; +} + +.signature-pad--body +canvas { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + border-radius: 4px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset; +} + +.signature-pad--footer { + color: #C3C3C3; + text-align: center; + font-size: 1.2em; + margin-top: 8px; +} + +.signature-pad--actions { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + margin-top: 8px; +} diff --git a/app/frontend/entrypoints/styles/sponsorship.scss b/app/frontend/entrypoints/styles/sponsorship.scss new file mode 100644 index 00000000..292a415f --- /dev/null +++ b/app/frontend/entrypoints/styles/sponsorship.scss @@ -0,0 +1,46 @@ +.sponsor-logos { + a { + border: none !important; + } + + img { + margin: 25px; + } + + .sponsor-logo-ruby { + width: 500px; + } + + .sponsor-logo-emerald { + width: 400px; + } + + .sponsor-logo-sapphire { + width: 325px; + } + + .sponsor-logo-opal { + width: 275px; + height: auto; + } + + .sponsor-logo-amber { + width: 225px; + } + + .opal-sponsors { + h2 { + margin: 0 0 16px 0; + } + } + + .sponsor-logo-standalone { + width: 400px; + } +} + +.sponsor-standalone { + h1 a { + @apply text-pink-darkest no-underline text-2xl; + } +} diff --git a/app/frontend/entrypoints/styles/surveys.scss b/app/frontend/entrypoints/styles/surveys.scss new file mode 100644 index 00000000..be0966d4 --- /dev/null +++ b/app/frontend/entrypoints/styles/surveys.scss @@ -0,0 +1,12 @@ +#survey-results { + .chart { + height: 400px; + width: 100%; + padding: 1.25rem; + font-size: 0.8rem; + } + + h3 { + margin-top: 3rem; + } +} diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index b314e686..1f8717ac 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -31,8 +31,9 @@ <%= csrf_meta_tags %> - <%= javascript_pack_tag 'application' %> - <%= stylesheet_pack_tag 'application' %> + <%= vite_client_tag %> + <%= vite_javascript_tag 'application' %> +
diff --git a/bin/vite b/bin/vite new file mode 100755 index 00000000..5da3388e --- /dev/null +++ b/bin/vite @@ -0,0 +1,27 @@ +#!/usr/bin/env ruby +# frozen_string_literal: true + +# +# This file was generated by Bundler. +# +# The application 'vite' is installed as part of a gem, and +# this file is here to facilitate running it. +# + +ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../Gemfile", __dir__) + +bundle_binstub = File.expand_path("bundle", __dir__) + +if File.file?(bundle_binstub) + if File.read(bundle_binstub, 300).include?("This file was generated by Bundler") + load(bundle_binstub) + else + abort("Your `bin/bundle` was not generated by Bundler, so this binstub cannot run. +Replace `bin/bundle` by running `bundle binstubs bundler --force`, then run this command again.") + end +end + +require "rubygems" +require "bundler/setup" + +load Gem.bin_path("vite_ruby", "vite") diff --git a/config/environments/development.rb b/config/environments/development.rb index 55f8b1b7..d8a792fb 100644 --- a/config/environments/development.rb +++ b/config/environments/development.rb @@ -86,4 +86,7 @@ # Apply autocorrection by RuboCop to files generated by `bin/rails generate`. # config.generators.apply_rubocop_autocorrect_after_generate! + + # config.action_controller.asset_host = "http://localhost:3036" + config.assets.debug = true end diff --git a/config/initializers/content_security_policy.rb b/config/initializers/content_security_policy.rb index b3076b38..aa21c5fe 100644 --- a/config/initializers/content_security_policy.rb +++ b/config/initializers/content_security_policy.rb @@ -11,7 +11,16 @@ # policy.img_src :self, :https, :data # policy.object_src :none # policy.script_src :self, :https + # Allow @vite/client to hot reload javascript changes in development +# policy.script_src *policy.script_src, :unsafe_eval, "http://#{ ViteRuby.config.host_with_port }" if Rails.env.development? + + # You may need to enable this in production as well depending on your setup. +# policy.script_src *policy.script_src, :blob if Rails.env.test? + # policy.style_src :self, :https + # Allow @vite/client to hot reload style changes in development +# policy.style_src *policy.style_src, :unsafe_inline if Rails.env.development? + # # Specify URI for violation reports # # policy.report_uri "/csp-violation-report-endpoint" # end diff --git a/config/vite.json b/config/vite.json new file mode 100644 index 00000000..5240bd22 --- /dev/null +++ b/config/vite.json @@ -0,0 +1,16 @@ +{ + "all": { + "sourceCodeDir": "app/frontend", + "watchAdditionalPaths": [] + }, + "development": { + "autoBuild": true, + "publicOutputDir": "vite-dev", + "port": 3036 + }, + "test": { + "autoBuild": true, + "publicOutputDir": "vite-test", + "port": 3037 + } +} diff --git a/package.json b/package.json index 3e7f7d9e..fb2b2f5b 100644 --- a/package.json +++ b/package.json @@ -3,42 +3,30 @@ "@amcharts/amcharts4": "^4.10.39", "@amcharts/amcharts4-geodata": "^4.1.30", "@rails/ujs": "^7.1.3-4", - "@rails/webpacker": "^6.0.0-rc.6", - "autoprefixer": "^10.4.20", - "css-loader": "^7.1.2", - "css-minimizer-webpack-plugin": "^3.0.2", "jquery": "^3.7.1", - "mini-css-extract-plugin": "^2.2.0", - "postcss": "^8.4.49", - "postcss-flexbugs-fixes": "^5.0.2", - "postcss-loader": "^6.1.1", - "postcss-preset-env": "^6.7.0", - "sass": "^1.82.0", - "sass-loader": "^16.0.4", + "sass": "^1.83.0", "signature_pad": "^3.0.0-beta.4", "tailwindcss": "^2.2.7", - "webpack": "^5.97.1", - "webpack-cli": "^5.1.4", - "yarn": "^1.22.22" + "vite-plugin-rails": "^0.5.0" }, "devDependencies": { - "@webpack-cli/serve": "^2.0.5", - "webpack-dev-server": "^5.1.0" + "autoprefixer": "^10.4.20", + "postcss": "^8.4.49", + "postcss-flexbugs-fixes": "^5.0.2", + "postcss-preset-env": "^6.7.0", + "vite": "^6.0.0", + "vite-plugin-ruby": "^5.1.0" }, "engines": { "node": "22.x.x" }, - "license": "MIT", - "babel": { - "presets": [ - "./node_modules/@rails/webpacker/package/babel/preset.js" - ] - }, - "browserslist": [ - "defaults" - ], "scripts": { - "start": "NODE_OPTIONS=--openssl-legacy-provider bin/webpack-dev-server" + "dev": "vite dev", + "build": "vite build" + }, + "repository": { + "type": "git", + "url": "https://github.com/rubyaustralia/ruby_au.git" }, - "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e" + "license": "MIT" } diff --git a/vite.config.mts b/vite.config.mts new file mode 100644 index 00000000..c4d1213c --- /dev/null +++ b/vite.config.mts @@ -0,0 +1,41 @@ +import { defineConfig } from 'vite' +import ViteRails from 'vite-plugin-rails' +import { resolve } from 'path' + +export default defineConfig({ + plugins: [ + ViteRails( + ['config/routes.rb', 'app/views/**/*'], + { delay: 200 }, + ), + ], + server: { + host: 'localhost', // Match the Vite dev server host + port: 3036, + strictPort: true, + watch: { + ignored: ['**/node_modules/**'], + }, + headers: { + 'Access-Control-Allow-Origin': '*', + }, + }, + resolve: { + alias: { + '@': resolve(__dirname, 'app/javascript') + } + }, + css: { + devSourcemap: true, + preprocessorOptions: { + scss: { + quietDeps: true + } + } + }, + build: { + rollupOptions: { + external: ['jquery'] + } + } +}) \ No newline at end of file From 6dda2973919655dbed054b60a7b83dfced7228d0 Mon Sep 17 00:00:00 2001 From: Lee Sheppard Date: Sat, 28 Dec 2024 21:17:09 +1100 Subject: [PATCH 04/14] Update bundle --- bin/bundle | 110 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 108 insertions(+), 2 deletions(-) diff --git a/bin/bundle b/bin/bundle index 66e9889e..50da5fdf 100755 --- a/bin/bundle +++ b/bin/bundle @@ -1,3 +1,109 @@ #!/usr/bin/env ruby -ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../../Gemfile', __FILE__) -load Gem.bin_path('bundler', 'bundle') +# frozen_string_literal: true + +# +# This file was generated by Bundler. +# +# The application 'bundle' is installed as part of a gem, and +# this file is here to facilitate running it. +# + +require "rubygems" + +m = Module.new do + module_function + + def invoked_as_script? + File.expand_path($0) == File.expand_path(__FILE__) + end + + def env_var_version + ENV["BUNDLER_VERSION"] + end + + def cli_arg_version + return unless invoked_as_script? # don't want to hijack other binstubs + return unless "update".start_with?(ARGV.first || " ") # must be running `bundle update` + bundler_version = nil + update_index = nil + ARGV.each_with_index do |a, i| + if update_index && update_index.succ == i && a.match?(Gem::Version::ANCHORED_VERSION_PATTERN) + bundler_version = a + end + next unless a =~ /\A--bundler(?:[= ](#{Gem::Version::VERSION_PATTERN}))?\z/ + bundler_version = $1 + update_index = i + end + bundler_version + end + + def gemfile + gemfile = ENV["BUNDLE_GEMFILE"] + return gemfile if gemfile && !gemfile.empty? + + File.expand_path("../Gemfile", __dir__) + end + + def lockfile + lockfile = + case File.basename(gemfile) + when "gems.rb" then gemfile.sub(/\.rb$/, ".locked") + else "#{gemfile}.lock" + end + File.expand_path(lockfile) + end + + def lockfile_version + return unless File.file?(lockfile) + lockfile_contents = File.read(lockfile) + return unless lockfile_contents =~ /\n\nBUNDLED WITH\n\s{2,}(#{Gem::Version::VERSION_PATTERN})\n/ + Regexp.last_match(1) + end + + def bundler_requirement + @bundler_requirement ||= + env_var_version || + cli_arg_version || + bundler_requirement_for(lockfile_version) + end + + def bundler_requirement_for(version) + return "#{Gem::Requirement.default}.a" unless version + + bundler_gem_version = Gem::Version.new(version) + + bundler_gem_version.approximate_recommendation + end + + def load_bundler! + ENV["BUNDLE_GEMFILE"] ||= gemfile + + activate_bundler + end + + def activate_bundler + gem_error = activation_error_handling do + gem "bundler", bundler_requirement + end + return if gem_error.nil? + require_error = activation_error_handling do + require "bundler/version" + end + return if require_error.nil? && Gem::Requirement.new(bundler_requirement).satisfied_by?(Gem::Version.new(Bundler::VERSION)) + warn "Activating bundler (#{bundler_requirement}) failed:\n#{gem_error.message}\n\nTo install the version of bundler this project requires, run `gem install bundler -v '#{bundler_requirement}'`" + exit 42 + end + + def activation_error_handling + yield + nil + rescue StandardError, LoadError => e + e + end +end + +m.load_bundler! + +if m.invoked_as_script? + load Gem.bin_path("bundler", "bundle") +end From 51a2005d191b3955b4166659d9114e6e8d2699b7 Mon Sep 17 00:00:00 2001 From: Lee Sheppard Date: Sat, 28 Dec 2024 21:17:24 +1100 Subject: [PATCH 05/14] Load Vite command --- Procfile.dev | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/Procfile.dev b/Procfile.dev index f5a3a6cc..25b701e3 100644 --- a/Procfile.dev +++ b/Procfile.dev @@ -1,3 +1,2 @@ -js: bin/webpack-dev-server -web: bundle exec rails server -p 3000 -css: bin/rails dartsass:watch +web: bin/rails server -p 3000 +vite: bin/vite dev From 5e0ffedb0c27c492d98748d0235afe6d11f27117 Mon Sep 17 00:00:00 2001 From: Lee Sheppard Date: Sat, 28 Dec 2024 21:17:31 +1100 Subject: [PATCH 06/14] Update tailwind.config.js --- tailwind.config.js | 126 +++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 123 insertions(+), 3 deletions(-) diff --git a/tailwind.config.js b/tailwind.config.js index 6bee1d6e..1ab34f32 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,8 +1,128 @@ module.exports = { - purge: [], - darkMode: false, // or 'media' or 'class' + purge: [ + './app/views/**/*.html.erb', + './app/helpers/**/*.rb', + './app/frontend/**/*.{js,ts}', + ], + darkMode: false, theme: { - extend: {}, + extend: { + colors: { + 'transparent': 'transparent', + + /* RubyAU Custom colours generated via https://javisperez.github.io/tailwindcolorshades/ */ + 'pink-darkest' : '#4A051E', + 'pink-darker' : '#940B3C', + 'pink-dark' : '#DE105A', + 'pink' : '#F71264', + 'pink-light' : '#F95993', + 'pink-lighter' : '#FCA0C1', + 'pink-lightest' : '#FEE7F0', + + 'purple-darkest' : '#241146', + 'purple-darker' : '#49238C', + 'purple-dark' : '#6D34D2', + 'purple' : '#793AE9', + 'purple-light' : '#A175F0', + 'purple-lighter' : '#C9B0F6', + 'purple-lightest' : '#F2EBFD', + + 'cyan-darkest' : '#164844', + 'cyan-darker' : '#2C9189', + 'cyan-dark' : '#42D9CD', + 'cyan' : '#49F1E4', + 'cyan-light' : '#80F5EC', + 'cyan-lighter' : '#B6F9F4', + 'cyan-lightest' : '#EDFEFC', + /* END RubyAU Custom colours */ + + 'black': '#22292f', + 'grey-darkest': '#3d4852', + 'grey-darker': '#606f7b', + 'grey-dark': '#8795a1', + 'grey': '#b8c2cc', + 'grey-light': '#dae1e7', + 'grey-lighter': '#f1f5f8', + 'grey-lightest': '#f8fafc', + 'white': '#ffffff', + + 'red-darkest': '#3b0d0c', + 'red-darker': '#621b18', + 'red-dark': '#cc1f1a', + 'red': '#e3342f', + 'red-light': '#ef5753', + 'red-lighter': '#f9acaa', + 'red-lightest': '#fcebea', + + 'orange-darkest': '#462a16', + 'orange-darker': '#613b1f', + 'orange-dark': '#de751f', + 'orange': '#f6993f', + 'orange-light': '#faad63', + 'orange-lighter': '#fcd9b6', + 'orange-lightest': '#fff5eb', + + 'yellow-darkest': '#453411', + 'yellow-darker': '#684f1d', + 'yellow-dark': '#f2d024', + 'yellow': '#ffed4a', + 'yellow-light': '#fff382', + 'yellow-lighter': '#fff9c2', + 'yellow-lightest': '#fcfbeb', + + 'green-darkest': '#0f2f21', + 'green-darker': '#1a4731', + 'green-dark': '#1f9d55', + 'green': '#38c172', + 'green-light': '#51d88a', + 'green-lighter': '#a2f5bf', + 'green-lightest': '#e3fcec', + + 'teal-darkest': '#0d3331', + 'teal-darker': '#20504f', + 'teal-dark': '#38a89d', + 'teal': '#4dc0b5', + 'teal-light': '#64d5ca', + 'teal-lighter': '#a0f0ed', + 'teal-lightest': '#e8fffe', + + 'blue-darkest': '#12283a', + 'blue-darker': '#1c3d5a', + 'blue-dark': '#2779bd', + 'blue': '#3490dc', + 'blue-light': '#6cb2eb', + 'blue-lighter': '#bcdefa', + 'blue-lightest': '#eff8ff', + + 'indigo-darkest': '#191e38', + 'indigo-darker': '#2f365f', + 'indigo-dark': '#5661b3', + 'indigo': '#6574cd', + 'indigo-light': '#7886d7', + 'indigo-lighter': '#b2b7ff', + 'indigo-lightest': '#e6e8ff', + + pink: { + DEFAULT: '#ec4899', + lighter: '#fce7f3', + light: '#f9a8d4', + dark: '#be185d', + darker: '#9d174d', + darkest: '#831843' + }, + grey: { + lighter: '#f3f4f6', + darkest: '#111827' + }, + purple: { + DEFAULT: '#7c3aed', + darker: '#5b21b6' + }, + cyan: { + DEFAULT: '#06b6d4' + }, + }, + }, }, variants: { extend: {}, From 2a03774271f2aa795b93c34ad3bceabde3fb3f6e Mon Sep 17 00:00:00 2001 From: Lee Sheppard Date: Sat, 28 Dec 2024 21:17:34 +1100 Subject: [PATCH 07/14] Update manifest.js --- app/assets/config/manifest.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js index 9a99757a..8e0326d5 100644 --- a/app/assets/config/manifest.js +++ b/app/assets/config/manifest.js @@ -1,2 +1 @@ -//= link_tree ../images -//= link_tree ../builds +//= link_tree ../images \ No newline at end of file From 975cb57603f83616197111d17e176a552ff74f15 Mon Sep 17 00:00:00 2001 From: Lee Sheppard Date: Sat, 28 Dec 2024 21:54:52 +1100 Subject: [PATCH 08/14] Update to resolve Procfile.dev load --- bin/dev | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/bin/dev b/bin/dev index 5f91c205..74ade166 100755 --- a/bin/dev +++ b/bin/dev @@ -1,2 +1,8 @@ -#!/usr/bin/env ruby -exec "./bin/rails", "server", *ARGV +#!/usr/bin/env sh + +if ! gem list foreman -i --silent; then + echo "Installing foreman..." + gem install foreman +fi + +exec foreman start -f Procfile.dev "$@" From bf63722f696a64ca4cac126678ba21874ad0d5b9 Mon Sep 17 00:00:00 2001 From: Lee Sheppard Date: Sat, 28 Dec 2024 22:20:35 +1100 Subject: [PATCH 09/14] Replace pink with red tone --- .../entrypoints/styles/application.scss | 28 +++++++++---------- .../entrypoints/styles/sponsorship.scss | 2 +- app/views/pages/welcome.html.erb | 6 ++-- app/views/shared/_navigation.html.erb | 14 +++++----- 4 files changed, 25 insertions(+), 25 deletions(-) diff --git a/app/frontend/entrypoints/styles/application.scss b/app/frontend/entrypoints/styles/application.scss index 4450f62b..fb9294a6 100644 --- a/app/frontend/entrypoints/styles/application.scss +++ b/app/frontend/entrypoints/styles/application.scss @@ -11,14 +11,14 @@ body { p, li, div, span { & > a { - @apply text-pink no-underline border-0; + @apply text-red no-underline border-0; &:hover { - @apply text-pink-darker border-b border-pink-500; + @apply text-red-darker border-b border-red; } svg { - fill: theme('colors.pink.DEFAULT'); + fill: theme('colors.red'); opacity: 0.5; } } @@ -31,19 +31,19 @@ a { } h1 { - @apply text-xl bg-pink text-white h-12 pt-1 mb-5 pl-5 pt-3 font-bold; + @apply text-xl bg-red text-white h-12 pt-1 mb-5 pl-5 pt-3 font-bold; } h2 { - @apply text-xl text-pink-dark font-bold my-4 pl-5; + @apply text-xl text-red-dark font-bold my-4 pl-5; } h3 { - @apply text-lg text-pink-dark font-bold my-3 pl-5; + @apply text-lg text-red-dark font-bold my-3 pl-5; } h4 { - @apply text-lg text-pink-darkest font-bold mt-3 mb-2 pl-5; + @apply text-lg text-red-darkest font-bold mt-3 mb-2 pl-5; } p, li { @@ -52,7 +52,7 @@ p, li { .markdown { h1 { - @apply bg-white text-pink-darkest; + @apply bg-white text-red; } blockquote { @@ -95,11 +95,11 @@ p, li { nav { .actions { a, button { - @apply block mt-3 mx-3 px-5 py-2 border-2 shadow border-pink-500 font-mono text-pink text-center no-underline; + @apply block mt-3 mx-3 px-5 py-2 border-2 shadow border-red font-mono text-red text-center no-underline; transition: background-color 0.5s ease; &:hover { - @apply bg-pink-darker text-white; + @apply bg-red-darker text-white; } } } @@ -164,11 +164,11 @@ nav { .call-to-action { a { - @apply text-purple w-6 my-4 mr-3 px-5 py-2 border-2 shadow bg-white border-purple-500 text-purple-500 no-underline font-mono; + @apply text-red-dark my-4 mr-3 px-5 py-2 border-2 shadow bg-white border-red no-underline font-mono; transition: all 0.25s ease; &:hover { - @apply bg-purple-darker text-white; + @apply bg-red-darker text-white; } } } @@ -204,10 +204,10 @@ nav { } a, p { - @apply inline-block border-pink-500 border-2 text-pink-500 font-mono no-underline font-bold bg-white py-2 px-5 shadow-md; + @apply inline-block border-red border-2 text-red font-mono no-underline font-bold bg-white py-2 px-5 shadow-md; &:hover { - @apply bg-pink text-white; + @apply bg-red text-white; } } } diff --git a/app/frontend/entrypoints/styles/sponsorship.scss b/app/frontend/entrypoints/styles/sponsorship.scss index 292a415f..56dfbe60 100644 --- a/app/frontend/entrypoints/styles/sponsorship.scss +++ b/app/frontend/entrypoints/styles/sponsorship.scss @@ -41,6 +41,6 @@ .sponsor-standalone { h1 a { - @apply text-pink-darkest no-underline text-2xl; + @apply text-red-darkest no-underline text-2xl; } } diff --git a/app/views/pages/welcome.html.erb b/app/views/pages/welcome.html.erb index e3afd0f8..20b9f3a5 100644 --- a/app/views/pages/welcome.html.erb +++ b/app/views/pages/welcome.html.erb @@ -1,5 +1,5 @@ <%= content_for :banner do %> -