From ab054deea88fc257c366d4e93a72019049bfe699 Mon Sep 17 00:00:00 2001 From: nahbee10 Date: Wed, 6 Nov 2024 10:17:46 -0500 Subject: [PATCH] add bread crumb and placeholder for sidenav --- assets/new-request-form-bundle.js | 2 +- assets/tailwind-output.css | 158 +++++++++++------- rollup.config.mjs | 16 +- .../article-page/ArticlePageModule.tsx | 19 ++- src/modules/article-page/index.ts | 2 +- .../article-page/renderArticlePage.tsx | 10 +- .../category-page/CategoryPageModule.tsx | 17 +- src/modules/category-page/index.ts | 2 +- .../category-page/renderCategoryPage.tsx | 10 +- src/modules/homepage/HomepageModule.tsx | 11 +- .../fields/attachments/Attachments.tsx | 2 +- .../section-page/SectionPageModule.tsx | 13 +- src/modules/section-page/index.ts | 2 +- .../section-page/renderSectionPage.tsx | 10 +- styles/main.css | 30 ++-- tailwind.config.ts | 34 ++-- templates/new_request_page.hbs | 47 ++++-- 17 files changed, 237 insertions(+), 148 deletions(-) diff --git a/assets/new-request-form-bundle.js b/assets/new-request-form-bundle.js index b4c076f94..3c8f2e7bc 100644 --- a/assets/new-request-form-bundle.js +++ b/assets/new-request-form-bundle.js @@ -4,7 +4,7 @@ import{j as e,F as n,S as t,H as s,I as r,M as a,r as o,u as i,a as l,N as u,T a } `;function ue({field:r,hasWysiwyg:a,baseLocale:m,hasAtMentions:p,userRole:j,brandId:b,onChange:g}){const{label:x,error:w,value:v,name:q,required:y,description:k}=r,_=function({hasWysiwyg:n,baseLocale:t,hasAtMentions:s,userRole:r,brandId:a}){const m=o.useRef(!1),{addToast:f}=i(),{t:h}=l();return o.useCallback((async o=>{if(n&&o&&!m.current){m.current=!0;const{createEditor:n}=await import("wysiwyg").then((function(e){return e.m}));(await n(o,{editorType:"supportRequests",hasAtMentions:s,userRole:r,brandId:a,baseLocale:t})).plugins.get("Notification").on("show",((n,t)=>{n.stop();const s=t.message instanceof Error?t.message.message:t.message,{type:r,title:a}=t;f((({close:n})=>e.jsxs(u,{type:r,children:[e.jsx(c,{children:a}),s,e.jsx(d,{"aria-label":h("new-request-form.close-label","Close"),onClick:n})]})))}))}}),[n,t,s,r,a,f,h])}({hasWysiwyg:a,baseLocale:m,hasAtMentions:p,userRole:j,brandId:b});return e.jsxs(n,{className:"custom-form-field-layout",children:[e.jsxs(f,{className:"custom-title",children:[x,y&&e.jsx(t,{"aria-hidden":"true",children:"*"})]}),e.jsx(h,{ref:_,name:q,defaultValue:v&&""!==v?v:"Describe your issue.",validation:w?"error":void 0,required:y,onChange:e=>g(e.target.value),rows:6,isResizable:!0}),w&&e.jsx(le,{validation:"error",children:w}),k&&e.jsx(s,{className:"custom-hint",dangerouslySetInnerHTML:{__html:k}})]})}function ce(){const{t:n}=l();return e.jsxs(e.Fragment,{children:[e.jsx(t,{"aria-hidden":"true",children:"Select an option"}),e.jsx(t,{hidden:!0,children:n("new-request-form.dropdown.empty-option","Select an option")})]})}function de({field:n,onChange:t}){const{label:s,options:r,error:a,value:i,name:l,required:u,description:c}=n,d=null==i?"":i.toString(),m=o.useRef(null);return o.useEffect((()=>{if(m.current&&u){const e=m.current.querySelector("[role=combobox]");e?.setAttribute("aria-required","true")}}),[m,u]),e.jsxs(p,{className:"custom-form-field-layout",children:[e.jsxs(j,{ref:m,inputProps:{name:l,required:u},isEditable:!1,validation:a?"error":void 0,inputValue:d,selectionValue:d,renderValue:({selection:n})=>n?.label||e.jsx(ce,{}),onChange:({selectionValue:e})=>{void 0!==e&&t(e)},children:[!u&&e.jsx(b,{value:"",label:"-",children:e.jsx(ce,{})}),r.map((n=>e.jsx(b,{value:n.value.toString(),label:n.name},n.value)))]}),a&&e.jsx(g,{validation:"error",children:a}),c&&e.jsx(x,{dangerouslySetInnerHTML:{__html:c}})]})}function me({field:r,onChange:i}){const{label:l,error:u,value:c,name:d,required:m,description:h}=r,[p,j]=o.useState(c);return e.jsxs(n,{children:[e.jsx("input",{type:"hidden",name:d,value:"off"}),e.jsxs(w,{name:d,required:m,defaultChecked:c,value:p?"on":"off",onChange:e=>{const{checked:n}=e.target;j(n),i(n)},children:[e.jsxs(f,{children:[l,m&&e.jsx(t,{"aria-hidden":"true",children:"*"})]}),h&&e.jsx(s,{dangerouslySetInnerHTML:{__html:h}})]}),u&&e.jsx(a,{validation:"error",children:u})]})}const fe="[]";function he(e){return`[${e.join("::")}]`}function pe(e){return e.startsWith("[")&&e.endsWith("]")}function je(e){const n=he(e.slice(0,-1));return{type:"SubGroup",name:e[e.length-1],backOption:{type:"previous",label:"Back",value:n},options:[]}}function be({options:e,hasEmptyOption:n}){const t=o.useMemo((()=>function(e,n){const t={[fe]:{type:"RootGroup",options:n?[{label:"-",value:""}]:[]}};return e.forEach((e=>{const{name:n,value:s}=e;if(n.includes("::")){const[e,r]=function(e){const n=e.split("::");return[n.slice(0,-1),n.slice(-1)[0]]}(n),a=he(e);t[a]||(t[a]=je(e)),t[a]?.options.push({value:s,label:n.split("::").join(" > "),menuLabel:r});for(let n=0;ne.value===o))&&t[a]?.options.push({type:"next",label:r[r.length-1],value:o})}}else t[fe].options.push({value:s,label:n})})),t}(e,n)),[e,n]),[s,r]=o.useState(function(e){const n={type:"RootGroup",options:[]};return Object.values(e).forEach((({options:e})=>{n.options.push(...e.filter((({type:e})=>void 0===e)))})),n}(t));o.useEffect((()=>{r(t[fe])}),[t]);return{currentGroup:s,isGroupIdentifier:pe,setCurrentGroupByIdentifier:e=>{const n=t[e];n&&r(n)}}}function ge({field:n}){const{label:s,options:r,error:a,value:i,name:l,required:u,description:c}=n,{currentGroup:d,isGroupIdentifier:m,setCurrentGroupByIdentifier:f}=be({options:r,hasEmptyOption:!1}),[h,w]=o.useState(i||[]),y=o.useRef(null);o.useEffect((()=>{if(y.current&&u){const e=y.current.querySelector("[role=combobox]");e?.setAttribute("aria-required","true")}}),[y,u]);return e.jsxs(p,{children:[h.map((n=>e.jsx("input",{type:"hidden",name:`${l}[]`,value:n},n))),e.jsxs(v,{children:[s,u&&e.jsx(t,{"aria-hidden":"true",children:"*"})]}),c&&e.jsx(x,{dangerouslySetInnerHTML:{__html:c}}),e.jsxs(j,{ref:y,isMultiselectable:!0,inputProps:{required:u},isEditable:!1,validation:a?"error":void 0,onChange:e=>{if(Array.isArray(e.selectionValue)){const n=e.selectionValue.slice(-1).toString();m(n)?f(n):w(e.selectionValue)}},selectionValue:h,maxHeight:"auto",children:["SubGroup"===d.type&&e.jsx(b,{...d.backOption}),"SubGroup"===d.type?e.jsx(q,{"aria-label":d.name,children:d.options.map((n=>e.jsx(b,{...n,children:n.menuLabel??n.label},n.value)))}):d.options.map((n=>e.jsx(b,{...n},n.value)))]}),a&&e.jsx(g,{validation:"error",children:a})]})}const xe="return-focus-to-ticket-form-field";function we({field:n,newRequestPath:t}){const s=o.createRef();return o.useEffect((()=>{sessionStorage.getItem(xe)&&(sessionStorage.removeItem(xe),s.current?.firstChild?.focus())}),[]),e.jsxs(e.Fragment,{children:[e.jsx("input",{type:"hidden",name:n.name,value:n.value}),n.options.length>1&&e.jsxs(p,{children:[e.jsx(v,{children:n.label}),e.jsx(j,{isEditable:!1,onChange:({selectionValue:e})=>{if(e&&"number"==typeof e){const n=new URL(window.location.href);n.searchParams.set("ticket_form_id",e),sessionStorage.setItem(xe,"true"),window.location.assign(`${t}${n.search}`)}},ref:s,children:n.options.map((t=>e.jsx(b,{value:t.value,label:t.name,isSelected:n.value===t.value,children:t.name},t.value)))})]})]})}function ve({field:n}){const{value:t,name:s}=n;return e.jsx("input",{type:"hidden",name:s,value:t})}function qe(e){const n=o.useRef(!1),t=o.useRef(!1);return{formRefCallback:o.useCallback((s=>{s&&!n.current&&(n.current=!0,s.submit=async()=>{if(!1===t.current){t.current=!0;const n=await async function(){const e=await fetch("/api/v2/help_center/sessions.json"),{current_session:n}=await e.json();return n.csrf_token}(),r=document.createElement("input");r.type="hidden",r.name="authenticity_token",r.value=n,s.appendChild(r);const a=e.filter((e=>"partialcreditcard"===e.type));for(const e of a){const n=s.querySelector(`input[name="${e.name}"]`);n&&n instanceof HTMLInputElement&&4===n.value.length&&(n.value=`XXXXXXXXX${n.value}`)}HTMLFormElement.prototype.submit.call(s)}})}),[e]),handleSubmit:e=>{e.preventDefault(),e.target.submit()}}}const ye=["true","false"],ke=["pre","strong","b","p","blockquote","ul","ol","li","h2","h3","h4","i","em","br"];function _e(e,n){if(!Number.isNaN(Number(e))){const t=`request[custom_fields][${e}]`;return n.ticketFields.find((e=>e.name===t))}switch(e){case"anonymous_requester_email":return n.emailField;case"due_at":return n.dueDateField;case"collaborators":return n.ccField;case"organization_id":return n.organizationField;default:return n.ticketFields.find((n=>n.name===`request[${e}]`))}}function Ce({ticketFields:e,ccField:n,dueDateField:t,emailField:s,organizationField:r}){return o.useMemo((()=>function(e){const{href:n}=location,t=new URL(n).searchParams,s={...e,ticketFields:[...e.ticketFields]};if(n.length>2048)return e;if(t.get("parent_id"))return e;for(const[e,n]of t){if(!e.startsWith("tf_"))continue;const t=_e(e.substring(3),s);if(!t)continue;const r=y.sanitize(n,{ALLOWED_TAGS:ke});switch(t.type){case"partialcreditcard":continue;case"multiselect":t.value=r.split(",").filter((e=>t.options.some((n=>n.value===e))));break;case"checkbox":ye.includes(r)&&(t.value="true"===r?"on":"false"===r?"off":"");break;default:t.value=r}}return s}({ticketFields:e,ccField:n,dueDateField:t,emailField:s,organizationField:r})),[e,n,t,s,r])}const Se=m.div` flex: 1; -`;function Ie({file:n,onRemove:t}){const{t:s}=l(),r=e=>{"Enter"!==e.code&&"Space"!==e.code&&"Delete"!==e.code&&"Backspace"!==e.code||(e.preventDefault(),t())},a="pending"===n.status?n.file_name:n.value.file_name,o=s("new-request-form.attachments.stop-upload","Stop upload"),i=s("new-request-form.attachments.remove-file","Remove file");return e.jsx(k.Item,{children:e.jsx(_,{type:"generic",title:a,onKeyDown:e=>{"Delete"!==e.code&&"Backspace"!==e.code||(e.preventDefault(),t())},children:"pending"===n.status?e.jsxs(e.Fragment,{children:[e.jsx(Se,{children:a}),e.jsx(C,{content:o,children:e.jsx(_.Close,{"aria-label":o,onClick:()=>{t()},onKeyDown:r})}),e.jsx(S,{value:n.progress,"aria-label":s("new-request-form.attachments.uploading","Uploading {{fileName}}",{fileName:a})})]}):e.jsxs(e.Fragment,{children:[e.jsx(Se,{children:e.jsx(I,{isExternal:!0,href:n.value.url,target:"_blank",children:a})}),e.jsx(C,{content:i,children:e.jsx(_.Delete,{"aria-label":i,onClick:()=>{t()},onKeyDown:r})}),e.jsx(S,{value:100,"aria-hidden":"true"})]})})})}async function Te(){const e=await fetch("/api/v2/users/me.json"),{user:{authenticity_token:n}}=await e.json();return n}function Fe({field:t}){const{label:s,error:m,name:h,attachments:p}=t,{files:j,addPendingFile:b,setPendingFileProgress:g,setUploaded:x,removePendingFile:w,removeUploadedFile:v}=function(e){const[n,t]=o.useState(e);return{files:n,addPendingFile:o.useCallback(((e,n,s)=>{t((t=>[...t,{status:"pending",id:e,file_name:n,progress:0,xhr:s}]))}),[]),setPendingFileProgress:o.useCallback(((e,n)=>{t((t=>t.map((t=>"pending"===t.status&&t.id===e?{...t,progress:n}:t))))}),[]),removePendingFile:o.useCallback((e=>{t((n=>n.filter((n=>"pending"!==n.status||n.id!==e))))}),[]),removeUploadedFile:o.useCallback((e=>{t((n=>n.filter((n=>"uploaded"!==n.status||n.value.id!==e))))}),[]),setUploaded:o.useCallback(((e,n)=>{t((t=>t.map((t=>"pending"===t.status&&t.id===e?{status:"uploaded",value:n}:t))))}),[])}}(p.map((e=>({status:"uploaded",value:e})))??[]),{addToast:q}=i(),{t:y}=l(),k=o.useCallback((n=>{q((({close:t})=>e.jsxs(u,{type:"error",children:[e.jsx(c,{children:y("new-request-form.attachments.upload-error-title","Upload error")}),y("new-request-form.attachments.upload-error-description","There was an error uploading {{fileName}}. Try again or upload another file.",{fileName:n}),e.jsx(d,{"aria-label":y("new-request-form.close-label","Close"),onClick:t})]})))}),[q,y]),_=o.useCallback((async e=>{const n=await Te();for(const t of e){const e=new XMLHttpRequest,s=new URL(`${window.location.origin}/api/v2/uploads.json`);if(s.searchParams.append("filename",t.name),e.open("POST",s),t.type)e.setRequestHeader("Content-Type",t.type);else{const n=T.getType(t.name);e.setRequestHeader("Content-Type",n||"application/octet-stream")}e.setRequestHeader("X-CSRF-Token",n),e.responseType="json";const r=crypto.randomUUID();b(r,t.name,e),e.upload.addEventListener("progress",(({loaded:e,total:n})=>{const t=Math.round(e/n*100);t<=90&&g(r,t)})),e.addEventListener("load",(()=>{if(e.status>=200&&e.status<300){const{upload:{attachment:{file_name:n,content_url:t},token:s}}=e.response;x(r,{id:s,file_name:n,url:t})}else k(t.name),w(r)})),e.addEventListener("error",(()=>{k(t.name),w(r)})),e.send(t)}}),[b,w,g,x,k]),{getRootProps:C,getInputProps:S,isDragActive:I}=F({onDrop:_});return e.jsxs(n,{className:"custom-form-field-layout",children:[e.jsx(f,{className:"custom-title",children:s}),m&&e.jsx(a,{validation:"error",children:m}),e.jsxs(P,{...C(),isDragging:I,className:"!border-0 !bg-light-surface-3 dark:!bg-dark-surface-3 !rounded-xl !py-3 flex flex-row space-x-4",children:[e.jsx(Pe,{}),I?e.jsx("span",{children:y("new-request-form.attachments.drop-files-label","Drop files here")}):e.jsx("span",{className:"button-label-2 !text-light-neutral-1 dark:!text-dark-neutral-1",children:y("new-request-form.attachments.choose-file-label","Add file or drop files here")}),e.jsx(r,{...S()})]}),j.map((n=>e.jsx(Ie,{file:n,onRemove:()=>{(async e=>{if("pending"===e.status)e.xhr.abort(),w(e.id);else{const n=await Te(),t=e.value.id;v(e.value.id),await fetch(`/api/v2/uploads/${t}.json`,{method:"DELETE",headers:{"X-CSRF-Token":n}})}})(n)}},"pending"===n.status?n.id:n.value.id))),j.map((n=>"uploaded"===n.status&&e.jsx("input",{type:"hidden",name:h,value:JSON.stringify(n.value)},n.value.id)))]})}const Pe=()=>e.jsx("svg",{className:"mx-0.5 min-w-4 min-h-4",xmlns:"http://www.w3.org/2000/svg",width:"25",height:"24",viewBox:"0 0 25 24",fill:"none",children:e.jsx("path",{d:"M15.25 6V3.75L19.75 8.25H17.5C15.92 8.25 15.25 7.58 15.25 6ZM17.5 9.75C15.08 9.75 13.75 8.42 13.75 6V3H8.5C6.5 3 5.5 4 5.5 6V18C5.5 20 6.5 21 8.5 21H17.5C19.5 21 20.5 20 20.5 18V9.75H17.5Z",className:"fill-light-neutral-1 dark:fill-dark-neutral-1"})});function Re(e,n){return n.filter((n=>n.child_fields.some((n=>n.id===e))))}function Le(e,n,t){return e.filter((e=>{const s=t.find((n=>n.id===e.parent_field_id));if(!s)return!1;const r=Re(s.id,n);return s.value===e.value&&(0===r.length||Le(r,n,t).length>0)}))}function $e(e,n){return 0===n.length?e:e.reduce(((t,s)=>{const r=Re(s.id,n);if(0===r.length)return[...t,s];const a=Le(r,n,e);return a.length>0?[...t,{...s,required:a.some((e=>e.child_fields.some((e=>e.id==s.id&&e.is_required))))}]:t}),[])}function Ee({field:i,locale:l,valueFormat:u,onChange:c}){const{label:d,error:m,value:h,name:p,required:j,description:b}=i,[g,x]=o.useState(h?new Date(h):void 0),w=e=>{if(void 0===e)return"";const n=e.toISOString();return"dateTime"===u?n:n.split("T")[0]};return e.jsxs(n,{children:[e.jsxs(f,{children:[d,j&&e.jsx(t,{"aria-hidden":"true",children:"*"})]}),b&&e.jsx(s,{dangerouslySetInnerHTML:{__html:b}}),e.jsx(R,{value:g,onChange:e=>{const n=new Date(Date.UTC(e.getFullYear(),e.getMonth(),e.getDate(),12,0,0));x(n);const t=w(n);void 0!==t&&c(t)},locale:l,children:e.jsx(r,{required:j,lang:l,onChange:e=>{""===e.target.value&&(x(void 0),c(""))},validation:m?"error":void 0})}),m&&e.jsx(a,{validation:"error",children:m}),e.jsx("input",{type:"hidden",name:p,value:w(g)})]})}const Ne=/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,De=m(N)` +`;function Ie({file:n,onRemove:t}){const{t:s}=l(),r=e=>{"Enter"!==e.code&&"Space"!==e.code&&"Delete"!==e.code&&"Backspace"!==e.code||(e.preventDefault(),t())},a="pending"===n.status?n.file_name:n.value.file_name,o=s("new-request-form.attachments.stop-upload","Stop upload"),i=s("new-request-form.attachments.remove-file","Remove file");return e.jsx(k.Item,{children:e.jsx(_,{type:"generic",title:a,onKeyDown:e=>{"Delete"!==e.code&&"Backspace"!==e.code||(e.preventDefault(),t())},children:"pending"===n.status?e.jsxs(e.Fragment,{children:[e.jsx(Se,{children:a}),e.jsx(C,{content:o,children:e.jsx(_.Close,{"aria-label":o,onClick:()=>{t()},onKeyDown:r})}),e.jsx(S,{value:n.progress,"aria-label":s("new-request-form.attachments.uploading","Uploading {{fileName}}",{fileName:a})})]}):e.jsxs(e.Fragment,{children:[e.jsx(Se,{children:e.jsx(I,{isExternal:!0,href:n.value.url,target:"_blank",children:a})}),e.jsx(C,{content:i,children:e.jsx(_.Delete,{"aria-label":i,onClick:()=>{t()},onKeyDown:r})}),e.jsx(S,{value:100,"aria-hidden":"true"})]})})})}async function Te(){const e=await fetch("/api/v2/users/me.json"),{user:{authenticity_token:n}}=await e.json();return n}function Fe({field:t}){const{label:s,error:m,name:h,attachments:p}=t,{files:j,addPendingFile:b,setPendingFileProgress:g,setUploaded:x,removePendingFile:w,removeUploadedFile:v}=function(e){const[n,t]=o.useState(e);return{files:n,addPendingFile:o.useCallback(((e,n,s)=>{t((t=>[...t,{status:"pending",id:e,file_name:n,progress:0,xhr:s}]))}),[]),setPendingFileProgress:o.useCallback(((e,n)=>{t((t=>t.map((t=>"pending"===t.status&&t.id===e?{...t,progress:n}:t))))}),[]),removePendingFile:o.useCallback((e=>{t((n=>n.filter((n=>"pending"!==n.status||n.id!==e))))}),[]),removeUploadedFile:o.useCallback((e=>{t((n=>n.filter((n=>"uploaded"!==n.status||n.value.id!==e))))}),[]),setUploaded:o.useCallback(((e,n)=>{t((t=>t.map((t=>"pending"===t.status&&t.id===e?{status:"uploaded",value:n}:t))))}),[])}}(p.map((e=>({status:"uploaded",value:e})))??[]),{addToast:q}=i(),{t:y}=l(),k=o.useCallback((n=>{q((({close:t})=>e.jsxs(u,{type:"error",children:[e.jsx(c,{children:y("new-request-form.attachments.upload-error-title","Upload error")}),y("new-request-form.attachments.upload-error-description","There was an error uploading {{fileName}}. Try again or upload another file.",{fileName:n}),e.jsx(d,{"aria-label":y("new-request-form.close-label","Close"),onClick:t})]})))}),[q,y]),_=o.useCallback((async e=>{const n=await Te();for(const t of e){const e=new XMLHttpRequest,s=new URL(`${window.location.origin}/api/v2/uploads.json`);if(s.searchParams.append("filename",t.name),e.open("POST",s),t.type)e.setRequestHeader("Content-Type",t.type);else{const n=T.getType(t.name);e.setRequestHeader("Content-Type",n||"application/octet-stream")}e.setRequestHeader("X-CSRF-Token",n),e.responseType="json";const r=crypto.randomUUID();b(r,t.name,e),e.upload.addEventListener("progress",(({loaded:e,total:n})=>{const t=Math.round(e/n*100);t<=90&&g(r,t)})),e.addEventListener("load",(()=>{if(e.status>=200&&e.status<300){const{upload:{attachment:{file_name:n,content_url:t},token:s}}=e.response;x(r,{id:s,file_name:n,url:t})}else k(t.name),w(r)})),e.addEventListener("error",(()=>{k(t.name),w(r)})),e.send(t)}}),[b,w,g,x,k]),{getRootProps:C,getInputProps:S,isDragActive:I}=F({onDrop:_});return e.jsxs(n,{className:"custom-form-field-layout",children:[e.jsx(f,{className:"custom-title",children:s}),m&&e.jsx(a,{validation:"error",children:m}),e.jsxs(P,{...C(),isDragging:I,className:"!border-0 !bg-light-surface-3 dark:!bg-dark-surface-3 !rounded-xl !py-3 flex flex-row space-x-4 !px-4",children:[e.jsx(Pe,{}),I?e.jsx("span",{children:y("new-request-form.attachments.drop-files-label","Drop files here")}):e.jsx("span",{className:"button-label-2 !text-light-neutral-1 dark:!text-dark-neutral-1",children:y("new-request-form.attachments.choose-file-label","Add file or drop files here")}),e.jsx(r,{...S()})]}),j.map((n=>e.jsx(Ie,{file:n,onRemove:()=>{(async e=>{if("pending"===e.status)e.xhr.abort(),w(e.id);else{const n=await Te(),t=e.value.id;v(e.value.id),await fetch(`/api/v2/uploads/${t}.json`,{method:"DELETE",headers:{"X-CSRF-Token":n}})}})(n)}},"pending"===n.status?n.id:n.value.id))),j.map((n=>"uploaded"===n.status&&e.jsx("input",{type:"hidden",name:h,value:JSON.stringify(n.value)},n.value.id)))]})}const Pe=()=>e.jsx("svg",{className:"mx-0.5 min-w-4 min-h-4",xmlns:"http://www.w3.org/2000/svg",width:"25",height:"24",viewBox:"0 0 25 24",fill:"none",children:e.jsx("path",{d:"M15.25 6V3.75L19.75 8.25H17.5C15.92 8.25 15.25 7.58 15.25 6ZM17.5 9.75C15.08 9.75 13.75 8.42 13.75 6V3H8.5C6.5 3 5.5 4 5.5 6V18C5.5 20 6.5 21 8.5 21H17.5C19.5 21 20.5 20 20.5 18V9.75H17.5Z",className:"fill-light-neutral-1 dark:fill-dark-neutral-1"})});function Re(e,n){return n.filter((n=>n.child_fields.some((n=>n.id===e))))}function Le(e,n,t){return e.filter((e=>{const s=t.find((n=>n.id===e.parent_field_id));if(!s)return!1;const r=Re(s.id,n);return s.value===e.value&&(0===r.length||Le(r,n,t).length>0)}))}function $e(e,n){return 0===n.length?e:e.reduce(((t,s)=>{const r=Re(s.id,n);if(0===r.length)return[...t,s];const a=Le(r,n,e);return a.length>0?[...t,{...s,required:a.some((e=>e.child_fields.some((e=>e.id==s.id&&e.is_required))))}]:t}),[])}function Ee({field:i,locale:l,valueFormat:u,onChange:c}){const{label:d,error:m,value:h,name:p,required:j,description:b}=i,[g,x]=o.useState(h?new Date(h):void 0),w=e=>{if(void 0===e)return"";const n=e.toISOString();return"dateTime"===u?n:n.split("T")[0]};return e.jsxs(n,{children:[e.jsxs(f,{children:[d,j&&e.jsx(t,{"aria-hidden":"true",children:"*"})]}),b&&e.jsx(s,{dangerouslySetInnerHTML:{__html:b}}),e.jsx(R,{value:g,onChange:e=>{const n=new Date(Date.UTC(e.getFullYear(),e.getMonth(),e.getDate(),12,0,0));x(n);const t=w(n);void 0!==t&&c(t)},locale:l,children:e.jsx(r,{required:j,lang:l,onChange:e=>{""===e.target.value&&(x(void 0),c(""))},validation:m?"error":void 0})}),m&&e.jsx(a,{validation:"error",children:m}),e.jsx("input",{type:"hidden",name:p,value:w(g)})]})}const Ne=/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,De=m(N)` padding: ${e=>`${e.theme.space.xxs} ${e.theme.space.sm}`}; // Removes white spaces for inline elements diff --git a/assets/tailwind-output.css b/assets/tailwind-output.css index f12d2272b..69269d898 100644 --- a/assets/tailwind-output.css +++ b/assets/tailwind-output.css @@ -800,17 +800,16 @@ video { margin-top: 0.5rem; } -<<<<<<< HEAD +.mt-3 { + margin-top: 0.75rem; +} + .mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; -======= -.mt-3 { - margin-top: 0.75rem; ->>>>>>> 3dea721 (finishing with dropdown styling) } .mt-\[1\.875rem\] { @@ -952,17 +951,16 @@ video { height: 2rem; } +.h-full { + height: 100%; +} + .h-padding-large { height: 1.5rem; } -<<<<<<< HEAD -.h-full { - height: 100%; -======= .\!min-h-\[7\.5rem\] { min-height: 7.5rem !important; ->>>>>>> 3dea721 (finishing with dropdown styling) } .min-h-4 { @@ -1543,6 +1541,11 @@ video { padding: 0.5rem; } +.\!px-4 { + padding-left: 1rem !important; + padding-right: 1rem !important; +} + .\!py-0 { padding-top: 0px !important; padding-bottom: 0px !important; @@ -2044,15 +2047,6 @@ video { -moz-osx-font-smoothing: grayscale; } -.\!heading-3 { - font-family: var(--font-basel-grotesk) !important; - font-size: 1.5rem !important; - font-weight: 485 !important; - line-height: 2rem !important; - -webkit-font-smoothing: antialiased !important; - -moz-osx-font-smoothing: grayscale !important; -} - .heading-3 { font-family: var(--font-basel-grotesk); font-size: 1.5rem; @@ -2187,17 +2181,16 @@ video { } } -<<<<<<< HEAD .divider { margin-top: 0.375rem; margin-bottom: 0.375rem; width: 100%; border-top-width: 1px; - border-color: rgba(34,34,34,0.05); + border-color: rgba(34, 34, 34, 0.05); } .divider:where(.dark, .dark *) { - border-color: rgba(255,255,255,0.12); + border-color: rgba(255, 255, 255, 0.12); } .ArticlePage { @@ -2306,10 +2299,10 @@ video { transition-duration: 150ms !important; } a:hover { - text-decoration-color: #7D7D7D; + text-decoration-color: #7d7d7d; } a:hover:where(.dark, .dark *) { - text-decoration-color: #9B9B9B; + text-decoration-color: #9b9b9b; } a { font: inherit; @@ -2453,9 +2446,15 @@ video { .article-votes, .article-votes-controls { button { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, + text-decoration-color, fill, stroke, opacity, box-shadow, transform, + filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, + text-decoration-color, fill, stroke, opacity, box-shadow, transform, + filter, backdrop-filter; + transition-property: color, background-color, border-color, + text-decoration-color, fill, stroke, opacity, box-shadow, transform, + filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } @@ -2592,8 +2591,8 @@ video { &:before { display: block; position: absolute; - content: ''; - background-image: url('../assets/book-open-light.svg'); + content: ""; + background-image: url("../assets/book-open-light.svg"); background-size: 1.5rem 1.5rem; height: 1.5rem; width: 1.5rem; @@ -2613,8 +2612,8 @@ video { } &:after { position: absolute; - content: ''; - background-image: url('../assets/book-open-dark.svg'); + content: ""; + background-image: url("../assets/book-open-dark.svg"); background-size: 1.5rem 1.5rem; height: 1.5rem; width: 1.5rem; @@ -2673,9 +2672,15 @@ video { opacity: 0; } &:before { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, + text-decoration-color, fill, stroke, opacity, box-shadow, + transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, + text-decoration-color, fill, stroke, opacity, box-shadow, + transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, + text-decoration-color, fill, stroke, opacity, box-shadow, + transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } @@ -2685,8 +2690,8 @@ video { &:before { display: block; position: absolute; - content: ''; - background-image: url('../assets/right-arrow-light.svg'); + content: ""; + background-image: url("../assets/right-arrow-light.svg"); background-size: 1.5rem 1.5rem; height: 1.5rem; width: 1.5rem; @@ -2707,9 +2712,15 @@ video { opacity: 0; } &:after { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, + text-decoration-color, fill, stroke, opacity, box-shadow, + transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, + text-decoration-color, fill, stroke, opacity, box-shadow, + transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, + text-decoration-color, fill, stroke, opacity, box-shadow, + transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } @@ -2718,8 +2729,8 @@ video { } &:after { position: absolute; - content: ''; - background-image: url('../assets/right-arrow-dark.svg'); + content: ""; + background-image: url("../assets/right-arrow-dark.svg"); background-size: 1.5rem 1.5rem; height: 1.5rem; width: 1.5rem; @@ -2737,9 +2748,15 @@ video { color: rgb(125 125 125 / var(--tw-text-opacity)); } a { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, + text-decoration-color, fill, stroke, opacity, box-shadow, transform, + filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, + text-decoration-color, fill, stroke, opacity, box-shadow, transform, + filter, backdrop-filter; + transition-property: color, background-color, border-color, + text-decoration-color, fill, stroke, opacity, box-shadow, transform, + filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } @@ -2794,9 +2811,15 @@ video { opacity: 0; } &:before { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, + text-decoration-color, fill, stroke, opacity, box-shadow, transform, + filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, + text-decoration-color, fill, stroke, opacity, box-shadow, transform, + filter, backdrop-filter; + transition-property: color, background-color, border-color, + text-decoration-color, fill, stroke, opacity, box-shadow, transform, + filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } @@ -2806,8 +2829,8 @@ video { &:before { display: block; position: absolute; - content: ''; - background-image: url('../assets/right-arrow-light.svg'); + content: ""; + background-image: url("../assets/right-arrow-light.svg"); background-size: 1.5rem 1.5rem; height: 1.5rem; width: 1.5rem; @@ -2828,9 +2851,15 @@ video { opacity: 0; } &:after { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, + text-decoration-color, fill, stroke, opacity, box-shadow, transform, + filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, + text-decoration-color, fill, stroke, opacity, box-shadow, transform, + filter, backdrop-filter; + transition-property: color, background-color, border-color, + text-decoration-color, fill, stroke, opacity, box-shadow, transform, + filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } @@ -2839,8 +2868,8 @@ video { } &:after { position: absolute; - content: ''; - background-image: url('../assets/right-arrow-dark.svg'); + content: ""; + background-image: url("../assets/right-arrow-dark.svg"); background-size: 1.5rem 1.5rem; height: 1.5rem; width: 1.5rem; @@ -2855,7 +2884,8 @@ video { html:has(.ArticlePage) { scroll-behavior: smooth; scroll-padding-top: 90px !important; -======= +} + .ck.ck-editor__main > .ck-editor__editable, .ck.ck-toolbar { border-width: 0px !important; @@ -2936,7 +2966,6 @@ html:has(.ArticlePage) { --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); ->>>>>>> db4cba5 (add style to the form) } .custom-input { @@ -3146,7 +3175,7 @@ html:has(.ArticlePage) { } .custom-submit-button { - width: 16.75rem !important; + width: 100% !important; border-radius: 0.75rem !important; --tw-bg-opacity: 1 !important; background-color: rgb(245 13 180 / var(--tw-bg-opacity)) !important; @@ -3164,11 +3193,22 @@ html:has(.ArticlePage) { -moz-osx-font-smoothing: grayscale !important; } +@media (min-width: 1280px) { + .custom-submit-button { + width: 16.75rem !important; + } +} + .custom-submit-button:where(.dark, .dark *) { --tw-bg-opacity: 1 !important; background-color: rgb(252 116 254 / var(--tw-bg-opacity)) !important; } +.ck.ck-editor__editable_inline { + padding-left: 0.75rem !important; + padding-right: 0.75rem !important; +} + .placeholder\:text-light-pink-vibrant::-moz-placeholder { --tw-text-opacity: 1; color: rgb(245 13 180 / var(--tw-text-opacity)); @@ -3459,6 +3499,10 @@ html:has(.ArticlePage) { margin-bottom: 0px; } + .md\:mb-6 { + margin-bottom: 1.5rem; + } + .md\:block { display: block; } diff --git a/rollup.config.mjs b/rollup.config.mjs index 948fd7602..deed14122 100644 --- a/rollup.config.mjs +++ b/rollup.config.mjs @@ -34,14 +34,14 @@ export default defineConfig([ { context: "this", input: { - 'new-request-form': 'src/modules/new-request-form/index.tsx', - 'flash-notifications': 'src/modules/flash-notifications/index.ts', - navigation: 'src/modules/navigation/index.ts', - footer: 'src/modules/footer/index.ts', - homepage: 'src/modules/homepage/index.ts', - 'article-page': 'src/modules/article-page/index.ts', - 'category-page': 'src/modules/category-page/index.ts', - 'section-page': 'src/modules/section-page/index.ts', + "new-request-form": "src/modules/new-request-form/index.tsx", + "flash-notifications": "src/modules/flash-notifications/index.ts", + navigation: "src/modules/navigation/index.ts", + footer: "src/modules/footer/index.ts", + homepage: "src/modules/homepage/index.ts", + "article-page": "src/modules/article-page/index.ts", + "category-page": "src/modules/category-page/index.ts", + "section-page": "src/modules/section-page/index.ts", }, output: { dir: "assets", diff --git a/src/modules/article-page/ArticlePageModule.tsx b/src/modules/article-page/ArticlePageModule.tsx index e0555d334..3596cba4a 100644 --- a/src/modules/article-page/ArticlePageModule.tsx +++ b/src/modules/article-page/ArticlePageModule.tsx @@ -1,6 +1,6 @@ -import { FC } from 'react'; -import { ArticlePageData } from '../../lib/types'; -import cn from 'classnames'; +import { FC } from "react"; +import { ArticlePageData } from "../../lib/types"; +import cn from "classnames"; type Props = { articlePageData: ArticlePageData; @@ -30,7 +30,11 @@ export const ArticleBreadcrumbs: FC = ({ articlePageData }) => { ); })} - + {articlePageData.article.title} @@ -41,8 +45,8 @@ export const ArticleBreadcrumbs: FC = ({ articlePageData }) => { }; const Chevron: FC<{ - color?: 'neutral-1'; -}> = ({ color = 'neutral-1' }) => { + color?: "neutral-1"; +}> = ({ color = "neutral-1" }) => { return ( diff --git a/src/modules/article-page/index.ts b/src/modules/article-page/index.ts index 4263d9320..6c466984a 100644 --- a/src/modules/article-page/index.ts +++ b/src/modules/article-page/index.ts @@ -1 +1 @@ -export { renderArticleBreadcrumbs } from './renderArticlePage'; +export { renderArticleBreadcrumbs } from "./renderArticlePage"; diff --git a/src/modules/article-page/renderArticlePage.tsx b/src/modules/article-page/renderArticlePage.tsx index 2dc82da2d..238dbcac1 100644 --- a/src/modules/article-page/renderArticlePage.tsx +++ b/src/modules/article-page/renderArticlePage.tsx @@ -1,8 +1,8 @@ -import { render } from 'react-dom'; -import { ArticlePageData } from '../../lib/types'; -import { Settings } from '../shared'; -import { createTheme, ThemeProviders } from '../shared'; -import { ArticleBreadcrumbs } from './ArticlePageModule'; +import { render } from "react-dom"; +import { ArticlePageData } from "../../lib/types"; +import { Settings } from "../shared"; +import { createTheme, ThemeProviders } from "../shared"; +import { ArticleBreadcrumbs } from "./ArticlePageModule"; export async function renderArticleBreadcrumbs( settings: Settings, diff --git a/src/modules/category-page/CategoryPageModule.tsx b/src/modules/category-page/CategoryPageModule.tsx index ce8bb8a09..1d8c53a16 100644 --- a/src/modules/category-page/CategoryPageModule.tsx +++ b/src/modules/category-page/CategoryPageModule.tsx @@ -1,6 +1,6 @@ -import { FC } from 'react'; -import { CategoryPageData } from '../../lib/types'; -import cn from 'classnames'; +import { FC } from "react"; +import { CategoryPageData } from "../../lib/types"; +import cn from "classnames"; type Props = { categoryPageData: CategoryPageData; @@ -10,7 +10,9 @@ type Props = { // If you change breadcrumbs, you should also update the breadcrumbs in the ArticlePageModule.tsx file to have consistant design. export const CategoryBreadcrumbs: FC = ({ categoryPageData }) => { const category = categoryPageData.category; - const pathSteps = [{ name: category.name, url: category.url, target: '_self' }]; + const pathSteps = [ + { name: category.name, url: category.url, target: "_self" }, + ]; return ( <> @@ -38,8 +40,8 @@ export const CategoryBreadcrumbs: FC = ({ categoryPageData }) => { }; const Chevron: FC<{ - color?: 'neutral-1'; -}> = ({ color = 'neutral-1' }) => { + color?: "neutral-1"; +}> = ({ color = "neutral-1" }) => { return ( diff --git a/src/modules/category-page/index.ts b/src/modules/category-page/index.ts index 0ef684ffb..6e930f63e 100644 --- a/src/modules/category-page/index.ts +++ b/src/modules/category-page/index.ts @@ -1 +1 @@ -export { renderCategoryBreadcrumbs } from './renderCategoryPage'; +export { renderCategoryBreadcrumbs } from "./renderCategoryPage"; diff --git a/src/modules/category-page/renderCategoryPage.tsx b/src/modules/category-page/renderCategoryPage.tsx index ec328bb9c..b768c0472 100644 --- a/src/modules/category-page/renderCategoryPage.tsx +++ b/src/modules/category-page/renderCategoryPage.tsx @@ -1,8 +1,8 @@ -import { render } from 'react-dom'; -import { CategoryPageData } from '../../lib/types'; -import { Settings } from '../shared'; -import { createTheme, ThemeProviders } from '../shared'; -import { CategoryBreadcrumbs } from './CategoryPageModule'; +import { render } from "react-dom"; +import { CategoryPageData } from "../../lib/types"; +import { Settings } from "../shared"; +import { createTheme, ThemeProviders } from "../shared"; +import { CategoryBreadcrumbs } from "./CategoryPageModule"; export async function renderCategoryBreadcrumbs( settings: Settings, diff --git a/src/modules/homepage/HomepageModule.tsx b/src/modules/homepage/HomepageModule.tsx index e20dee05e..3849522e1 100644 --- a/src/modules/homepage/HomepageModule.tsx +++ b/src/modules/homepage/HomepageModule.tsx @@ -37,14 +37,17 @@ const Homepage: FC = ({ homepageData }) => { {hero && (

- {hero.headerLine1} + + {hero.headerLine1} + {hero.headerLine2}

)} - {homepageData.coloredCardsBlock && homepageData.coloredCardsBlock.cards.length > 0 ? ( + {homepageData.coloredCardsBlock && + homepageData.coloredCardsBlock.cards.length > 0 ? (
{homepageData.coloredCardsBlock.cards.map((card) => { const textColorName = getColorName(card.color); @@ -192,7 +195,9 @@ const ArticleLinkCard: FC<{

{title}

-

{description}

+

+ {description} +

diff --git a/src/modules/new-request-form/fields/attachments/Attachments.tsx b/src/modules/new-request-form/fields/attachments/Attachments.tsx index 6a61d0994..2a463d6d3 100644 --- a/src/modules/new-request-form/fields/attachments/Attachments.tsx +++ b/src/modules/new-request-form/fields/attachments/Attachments.tsx @@ -187,7 +187,7 @@ export function Attachments({ field }: AttachmentProps): JSX.Element { {isDragActive ? ( diff --git a/src/modules/section-page/SectionPageModule.tsx b/src/modules/section-page/SectionPageModule.tsx index 82eb1c326..959028e2c 100644 --- a/src/modules/section-page/SectionPageModule.tsx +++ b/src/modules/section-page/SectionPageModule.tsx @@ -1,6 +1,6 @@ -import { FC } from 'react'; -import { SectionPageData } from '../../lib/types'; -import cn from 'classnames'; +import { FC } from "react"; +import { SectionPageData } from "../../lib/types"; +import cn from "classnames"; type Props = { sectionPageData: SectionPageData; @@ -42,8 +42,8 @@ export const SectionBreadcrumbs: FC = ({ sectionPageData }) => { }; const Chevron: FC<{ - color?: 'neutral-1'; -}> = ({ color = 'neutral-1' }) => { + color?: "neutral-1"; +}> = ({ color = "neutral-1" }) => { return ( diff --git a/src/modules/section-page/index.ts b/src/modules/section-page/index.ts index ff19c18a3..696d4bc8d 100644 --- a/src/modules/section-page/index.ts +++ b/src/modules/section-page/index.ts @@ -1 +1 @@ -export { renderSectionBreadcrumbs } from './renderSectionPage'; +export { renderSectionBreadcrumbs } from "./renderSectionPage"; diff --git a/src/modules/section-page/renderSectionPage.tsx b/src/modules/section-page/renderSectionPage.tsx index dd2542b38..0d8e0b086 100644 --- a/src/modules/section-page/renderSectionPage.tsx +++ b/src/modules/section-page/renderSectionPage.tsx @@ -1,8 +1,8 @@ -import { render } from 'react-dom'; -import { SectionPageData } from '../../lib/types'; -import { Settings } from '../shared'; -import { createTheme, ThemeProviders } from '../shared'; -import { SectionBreadcrumbs } from './SectionPageModule'; +import { render } from "react-dom"; +import { SectionPageData } from "../../lib/types"; +import { Settings } from "../shared"; +import { createTheme, ThemeProviders } from "../shared"; +import { SectionBreadcrumbs } from "./SectionPageModule"; export async function renderSectionBreadcrumbs( settings: Settings, diff --git a/styles/main.css b/styles/main.css index 70b8d8b28..6e905a02b 100644 --- a/styles/main.css +++ b/styles/main.css @@ -136,8 +136,8 @@ @apply top-padding-medium left-padding-medium dark:hidden; display: block; position: absolute; - content: ''; - background-image: url('../assets/book-open-light.svg'); + content: ""; + background-image: url("../assets/book-open-light.svg"); background-size: 1.5rem 1.5rem; height: 1.5rem; width: 1.5rem; @@ -147,8 +147,8 @@ &:after { @apply top-padding-medium left-padding-medium hidden dark:block; position: absolute; - content: ''; - background-image: url('../assets/book-open-dark.svg'); + content: ""; + background-image: url("../assets/book-open-dark.svg"); background-size: 1.5rem 1.5rem; height: 1.5rem; width: 1.5rem; @@ -162,8 +162,8 @@ @apply top-padding-medium right-padding-medium dark:hidden transition opacity-0; display: block; position: absolute; - content: ''; - background-image: url('../assets/right-arrow-light.svg'); + content: ""; + background-image: url("../assets/right-arrow-light.svg"); background-size: 1.5rem 1.5rem; height: 1.5rem; width: 1.5rem; @@ -176,8 +176,8 @@ &:after { @apply top-padding-medium right-padding-medium hidden dark:block transition opacity-0; position: absolute; - content: ''; - background-image: url('../assets/right-arrow-dark.svg'); + content: ""; + background-image: url("../assets/right-arrow-dark.svg"); background-size: 1.5rem 1.5rem; height: 1.5rem; width: 1.5rem; @@ -210,8 +210,8 @@ @apply top-gap-medium right-gap-large dark:hidden transition opacity-0; display: block; position: absolute; - content: ''; - background-image: url('../assets/right-arrow-light.svg'); + content: ""; + background-image: url("../assets/right-arrow-light.svg"); background-size: 1.5rem 1.5rem; height: 1.5rem; width: 1.5rem; @@ -224,8 +224,8 @@ &:after { @apply top-gap-medium right-gap-large hidden dark:block transition opacity-0; position: absolute; - content: ''; - background-image: url('../assets/right-arrow-dark.svg'); + content: ""; + background-image: url("../assets/right-arrow-dark.svg"); background-size: 1.5rem 1.5rem; height: 1.5rem; width: 1.5rem; @@ -309,5 +309,9 @@ html:has(.ArticlePage) { } .custom-submit-button { - @apply !bg-light-accent-1 dark:!bg-dark-accent-1 !rounded-xl !py-4 !px-4 !w-[16.75rem] !button-label-2 !text-white; + @apply !bg-light-accent-1 dark:!bg-dark-accent-1 !rounded-xl !py-4 !px-4 md:!w-[16.75rem] !button-label-2 !text-white !w-full; +} + +.ck.ck-editor__editable_inline { + @apply !px-3; } diff --git a/tailwind.config.ts b/tailwind.config.ts index eb9f17e4a..c07519142 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -48,23 +48,23 @@ const config: Config = { nav: "800", }, spacing: { - 'margin-web': rem(40), - 'margin-mobile': rem(24), - 'margin-mobile-dense': rem(12), - 'margin-extension': rem(16), - 'padding-x-small': rem(8), - 'padding-x-small-dense': rem(6), - 'padding-small': rem(12), - 'padding-small-dense': rem(8), - 'padding-medium': rem(16), - 'padding-large': rem(24), - 'padding-x-large': rem(36), - 'gap-large': rem(16), - 'gap-medium': rem(12), - 'gap-small': rem(8), - 'gap-x-small': rem(4), - 'mobile-nav-h': rem(72), - 'nav-h': rem(72), + "margin-web": rem(40), + "margin-mobile": rem(24), + "margin-mobile-dense": rem(12), + "margin-extension": rem(16), + "padding-x-small": rem(8), + "padding-x-small-dense": rem(6), + "padding-small": rem(12), + "padding-small-dense": rem(8), + "padding-medium": rem(16), + "padding-large": rem(24), + "padding-x-large": rem(36), + "gap-large": rem(16), + "gap-medium": rem(12), + "gap-small": rem(8), + "gap-x-small": rem(4), + "mobile-nav-h": rem(72), + "nav-h": rem(72), }, boxShadow: { "light-short": diff --git a/templates/new_request_page.hbs b/templates/new_request_page.hbs index 9c83dfff0..50b81dbf8 100644 --- a/templates/new_request_page.hbs +++ b/templates/new_request_page.hbs @@ -1,13 +1,40 @@ -
-
- {{!-- TODO: add breadcrumbs after merging article PR --}} - {{!--
--}} -

- {{t 'submit_a_request'}} -

- -
-
+
+ +
+
+ + + Home + + + + + + + + Submit a Request + + +
+

+ {{t 'submit_a_request'}} +

+ +
+
+
{{!--