vipassana-design-standards 0.0.14 → 0.0.17

package/lib/vipassana/translations.rb

@@ -1,6 +1,6 @@
 # this is a copy of i18n.js, using ruby syntax instead of javascript syntax
 
-VIPASSANA_TRANSLATIONS = {
+VDS_TRANSLATIONS = {
   "en": {
     "language": "English",
     "vipassana_meditation": "Vipassana Meditation",
@@ -8,6 +8,14 @@ VIPASSANA_TRANSLATIONS = {
     "in_the_tradition": "in the Tradition of Sayagyi U Ba Khin",
     "full": "Vipassana Meditation As Taught By S.N. Goenka in the Tradition of Sayagyi U Ba Khin",
   },
+  "ar": {
+    "rtl": true,
+    "language": "Arabic",
+    "vipassana_meditation": "تأمل فيباسانا",
+    "as_taught": "كما تم تدريسه بواسطة S.N. جوينكا",
+    "in_the_tradition": "في تقليد Sayagyi U Ba Khin",
+    "full": "تأمل فيباسانا كما علمه S.N. Goenka في تقليد Sayagyi U Ba Khin",
+  },
   "bg": {
     "language": "Bulgarian",
     "vipassana_meditation": "Випассана Медитация",

package/lib/vipassana-design-standards.rb

@@ -1,3 +1,3 @@
 # frozen_string_literal: true
 
-require "vipassana/logo_helper"
+require "vipassana/design_standards_helper"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vipassana-design-standards",
-  "version": "0.0.14",
+  "version": "0.0.17",
   "description": "Vipassana design standards materials",
   "homepage": "https://design-standards.dhamma.org",
   "author": "Dhamma Workers",
@@ -9,5 +9,16 @@
     "bootstrap5": "npm:bootstrap@5"
   },
   "sass": "src/stylesheets/bootstrap5-theme.scss",
-  "css": "dist/bootstrap5-theme.css"
+  "css": "dist/bootstrap5-theme.css",
+  "scripts" : {
+    "build-sass": "sass --load-path=node_modules src/stylesheets/bootstrap5-theme.scss dist/css/bootstrap5-theme.css && sass src/stylesheets/fonts.scss dist/css/fonts.css && sass src/stylesheets/logo.scss dist/css/logo.css",
+    "build-rtl": "rtlcss dist/css/bootstrap5-theme.css dist/css/bootstrap5-theme.rtl.css",
+    "build-fonts": "cp src/stylesheets/specific-fonts/* dist/css/",
+    "build-min": "cleancss --batch --batch-suffix '.min' dist/css/*.css",
+    "build-css": "rm -f dist/css/* && npm run build-fonts && npm run build-sass && npm run build-rtl && npm run build-min",
+    "build-js": "rm -f dist/js/* && concat -o dist/js/bootstrap5-theme.min.js node_modules/bootstrap5/dist/js/bootstrap.bundle.min.js src/javascripts/auto-resize.js && cp node_modules/bootstrap5/dist/js/bootstrap.bundle.min.js.map dist/js/bootstrap5-theme.min.js.map",
+    "build": "npm run build-css && npm run build-js",
+    "dist": "npm run build && npm run dist-version-folder && npm publish",
+    "dist-version-folder": "mkdir -p dist/$npm_package_version/css && mkdir -p dist/$npm_package_version/js && cp dist/css/* dist/$npm_package_version/css && cp dist/js/* dist/$npm_package_version/js"
+  }
 }

package/src/javascripts/auto-resize.js

@@ -0,0 +1,30 @@
+// Auto resize a select so it takes only the selected option width
+
+document.addEventListener('DOMContentLoaded', () => {
+  // resize on initial load
+  document.querySelectorAll("select.auto-resize").forEach(resizeSelect)
+
+  // delegated listener on change
+  document.body.addEventListener("change", (e) => {
+    if (e.target.matches("select.auto-resize")) {
+      resizeSelect(e.target)
+    }
+  })
+})
+
+function resizeSelect(sel) {
+  let tempOption = document.createElement('option');
+  tempOption.textContent = sel.selectedOptions[0].textContent;
+
+  let tempSelect = document.createElement('select');
+  tempSelect.classList.add('form-select', 'w-auto', 'p-0')
+  tempSelect.style.visibility = "hidden";
+  tempSelect.style.position = "fixed"
+  tempSelect.appendChild(tempOption);
+
+  sel.after(tempSelect);
+  const paddingL = window.getComputedStyle(sel, null).getPropertyValue('padding-left')
+  const paddingR = window.getComputedStyle(sel, null).getPropertyValue('padding-right')
+  sel.style.width = `calc(${+tempSelect.clientWidth}px + 4px + ${paddingL} + ${paddingR})`;
+  tempSelect.remove();
+}

package/src/javascripts/i18n.js

@@ -13,6 +13,13 @@ export default {
     "in_the_tradition": "в Традицията на Саяджи У Ба Кин",
     "full": "Випассана Медитация, както се преподава от С. Н. Гоенка, в традицията на Саяджи У Ба Кин",
   },
+  "ca": {
+    "language": "Catalan",
+    "vipassana_meditation": "Meditació Vipassana",
+    "as_taught": "tal com l’ensenya S.N. Goenka",
+    "in_the_tradition": "en la tradició de Sayagyi U Ba Khin",
+    "full": "Meditació Vipassana tal com l’ensenya S.N. Goenka en la tradició de Sayagyi U Ba Khin"
+  },
   "cs": {
     "language": "Czech",
     "vipassana_meditation": "Meditace Vipassana",

package/src/javascripts/index.js

@@ -1,5 +1,5 @@
 // i18n JSON
-import i18nJson from './i18n.js?ver=0.14'
+import i18nJson from './i18n.js?ver=0.16'
 
 // Dependencies
 import { Canvg } from 'https://cdn.skypack.dev/canvg@^4.0.0';
@@ -46,14 +46,11 @@ export default {
     isRtl() {
       return this.i18n[this.locale].rtl
     },
-    fontPath() {
-      return 'assets/fonts/'
-    },
     titleFontUrl() {
-      return this.embedSVG ? footlight : `${this.fontPath}FootlightMTProLight.woff`
+      return footlight
     },
     taglineFontUrl() {
-      return this.embedSVG ? lato : `${this.fontPath}Lato-Light.woff`
+      return lato
     },
     wheels() {
       return {
@@ -315,7 +312,7 @@ export default {
       # This file has been generated by design-standards.dhamma.org wesbite
       # index.js#generateAllInlineSVG
 
-      VIPASSANA_SVGS = ${JSON.stringify(svgs)}
+      VDS_SVGS = ${JSON.stringify(svgs)}
       `
       var blob = new Blob([result], {type: "text/plain;charset=utf-8"})
       fileSaver.saveAs(blob, "logos_inline_svg.rb")

package/src/stylesheets/bootstrap5-theme.scss

@@ -11,4 +11,14 @@
 @import "./layout/vds-sidenav.scss";
 
 @import "./fonts.scss";
-@import "./logo.scss";
+@import "./logo.scss";
+
+html.vds-html {
+  font-size: 14px;
+  @include media-breakpoint-up(md) {
+    font-size: 15px;
+  }
+  @include media-breakpoint-up(xl) {
+    font-size: 16px;
+  }
+}

package/src/stylesheets/custom-bootstrap.scss

@@ -38,6 +38,19 @@
 .btn-outline-secondary:hover {
   color: white;
 }
+.btn-with-icon {
+  display: inline-flex;
+  align-items: center;
+
+  img, i {
+    margin-right: .5rem;
+  }
+
+  img {
+    height: 1rem;
+  }
+}
+
 .text-bg-secondary {
   color: white !important;
 }
@@ -80,12 +93,12 @@
 }
 
 // Form
+.form-group {
+  margin-bottom: 1rem;
+}
 .form-check-input, .form-check-label {
   cursor: pointer;
 }
-.form-floating > label {
-  width: 100%;
-}
 .form-label {
   font-size: .9rem;
   opacity: .8;
@@ -93,18 +106,13 @@
 }
 .form-select {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 18'%3e%3cpath fill='none' stroke='%23a1a1a1' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
+  &.auto-resize {
+    padding-right: 2.3em;
+  }
 }
 .form-check {
   margin-bottom: .25rem;
 }
-[dir="rtl"] {
-  .form-floating > .form-control ~ label {
-    transform-origin: right;
-  }
-  .form-floating > .form-control:focus ~ label {
-    transform: scale(0.85) translateY(-1rem) translateX(-0.15rem);
-  }
-}
 .input-group-text {
   background-color: var(--bs-light);
 }