elixForms/elixforms-web-pages
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

switch to bootstrap-italia styling

Browse Source
This commit is contained in:
pierpaolo.mammi
2026-07-17 13:34:40 +02:00
parent 1943252422
commit c3d4c2a660
6 changed files with 197 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
react/common/src/App.css
+24 -20
View File
@@ -1,23 +1,27 @@
/* @import url("https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap'); @import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css");
@import url("https://console-unipr.elixforms.it/elixFormsCustom/css/elixForms.css"); @import url("https://cdn.jsdelivr.net/npm/bootstrap-italia@2.18.2/dist/css/bootstrap-italia.min.css");
@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/bootstrap_adaptation.css"); @import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js");
@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/bootstrap_overrides.css"); @import url("https://cdn.jsdelivr.net/npm/bootstrap-italia@2.18.2/dist/js/bootstrap-italia.bundle.min.js");
@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/console_user.css");
@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/designitalia_adaptation.css"); :root {
@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/fonts.css"); --font-family-sans-serif: "Titillium Web", "Segoe UI", Arial, sans-serif;
@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/isipcss_overrides.css"); }
@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/iulib.css");
@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/print.css"); body {
@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/responsive.css"); font-family: "Titillium Web", "Segoe UI", Arial, sans-serif;
@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/style-bs.css"); }
@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/style.css");
@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/util.css"); .it-brand-wrapper .icon {
@import url("https://console-unipr.elixforms.it/rwe2/css/plugins/modaldisplay.css"); width: 120px;
@import url("https://console-unipr.elixforms.it/rwe2/css/themes/blu-italia.css"); height: auto;
@import url("https://console-unipr.elixforms.it/rwe2/isipcss/css/grid_fluid.css"); }
*/
@import url("https://cdn.jsdelivr.net/npm/bootstrap-italia@2.0.0/dist/css/bootstrap-italia.min.css"); .page-shell-card {
border: 1px solid #e6e6e6;
border-radius: 0.75rem;
box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.06);
}
/* Submit button styling (elixForms main submit) */ /* Submit button styling (elixForms main submit) */
.mainview .container .submit { .mainview .container .submit {
react/common/src/ElixFormsComponentAbstract.tsx
+137 -93
View File
@@ -93,14 +93,18 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
public override render(): React.ReactElement<IElixFormsComponentProperties> { public override render(): React.ReactElement<IElixFormsComponentProperties> {
const { const {
description, isDarkTheme,
environmentMessage, userDisplayName,
additionalFieldsJson, moduleName,
headerTitle, headerTitle,
pageTitle, headerHeroImageSrc: headerTitleImageSrc,
pageDescription, cardTitle,
submitDescription, cardDescription,
heroImageSrc alertInfoTitle,
alertInfoMessage,
instructionsTitle,
instructionsMessage,
submitText,
} = this.props; } = this.props;
const queryParams = new URLSearchParams(window.location.search); const queryParams = new URLSearchParams(window.location.search);
@@ -108,121 +112,161 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
const hasAuthenticationError = missingMandatoryParams.length > 0; const hasAuthenticationError = missingMandatoryParams.length > 0;
return ( return (
<div className="container-fluid px-0" id="pageBody"> <div>
<header className="it-header-wrapper"> <header className="it-header-wrapper">
<div className="it-header-slim-wrapper">
<div className="container">
<div className="row">
<div className="col-12">
<div className="it-header-slim-wrapper-content">
{/* <a className="d-none d-lg-block navbar-brand" href="#">Ente appartenenza</a> */}
<div className="nav-mobile">
{/* <nav aria-label="Navigazione accessoria">
<a className="it-opener d-lg-none" data-bs-toggle="collapse" href="#menu1a" role="button"
aria-expanded="false" aria-controls="menu4">
<span>Ente appartenenza</span>
<svg className="icon" aria-hidden="true">
<use href="/bootstrap-italia/dist/svg/sprites.svg#it-expand"></use>
</svg>
</a>
<div className="link-list-wrapper collapse" id="menu1a">
<ul className="link-list">
<li><a className="dropdown-item list-item" href="#">Link 1</a></li>
<li><a className="list-item active" href="#" aria-current="page">Link 2 (Attivo)</a></li>
</ul>
</div>
</nav> */}
</div>
<div className="it-header-slim-right-zone">
{/* <div className="nav-item dropdown">
<a className="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
<span className="visually-hidden">Selezione lingua: lingua selezionata</span>
<span>ITA</span>
<svg className="icon d-none d-lg-block">
<use href="/bootstrap-italia/dist/svg/sprites.svg#it-expand"></use>
</svg>
</a>
<div className="dropdown-menu">
<div className="row">
<div className="col-12">
<div className="link-list-wrapper">
<ul className="link-list">
<li><a className="dropdown-item list-item" href="#"><span>ITA <span
className="visually-hidden">selezionata</span></span></a></li>
<li><a className="dropdown-item list-item" href="#"><span>ENG</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div> */}
<div className="it-access-top-wrapper">
{userDisplayName}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="it-header-center-wrapper"> <div className="it-header-center-wrapper">
<div className="container"> <div className="container">
<div className="it-header-center-content-wrapper"> <div className="it-header-center-content-wrapper">
<div className="it-brand-wrapper"> <div className="it-brand-wrapper">
<a href="/"> <a href="https://www.unipr.it/" title="Torna alla homepage dell'Università di Parma">
<img className='icon' src="https://procedure.unipr.it/UploadImgs/12_marchio_UNIPR_neg_b1_squareLogo.png" alt="Università di Parma" />
<div className="it-brand-text"> <div className="it-brand-text">
<h2 className="no_toc">Ente Pubblico</h2> <p className="h2 no_toc">Università di Parma</p>
<h3 className="no_toc d-none d-md-block">Sito istituzionale</h3> {/* <p className="h3 no_toc d-none d-md-block">Procedure Online</p> */}
</div> </div>
</a> </a>
</div> </div>
<div className="it-right-zone"> <div className="it-right-zone">
<div className="it-search-wrapper"> {/* <div className="it-search-wrapper">
<span className="d-none d-md-block">Cerca</span> <span className="d-none d-md-block">Cerca</span>
<button className="search-link" aria-label="Cerca"> <button className="search-link" aria-label="Cerca">
<span className="it-search"></span> <span className="it-search"></span>
</button> </button>
</div> </div> */}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</header> </header>
<div className="row g-0">
<div id="userConsole" className="col-12"> <div className="container my-2 mx-4">
<header className='it-header-wrapper'> <div className='cmp-breadcrumb' role='navigation'>
<div className="neutral"> <nav className="breadcrumb-container" aria-label="breadcrumb">
<div className="grid_12"> <ol className="breadcrumb">
<div className="console_header"> <li className='breadcrumb-item'>Procedure Online<span className="separator">/</span></li>
<div className="leftDiv"> <li className="breadcrumb-item active" aria-current="page">{moduleName}</li>
<h1>elixForms</h1> </ol>
<div className="logo"> </nav>
<a href="https://www.unipr.it/" title="Torna alla homepage dell'Università di Parma"> </div>
<img src="https://console-unipr.elixforms.it/elixFormsCustom/images/logo.png" alt="Logo Università di Parma" />
</a> {headerTitleImageSrc && <img src={headerTitleImageSrc} alt="Hero Image" className="hero-image img-fluid mb-3" />}
{headerTitle && (<p className='h2'>{headerTitle}</p>)}
<div className="container">
<div className="card shadow-sm mb-4">
<div className="card-body">
{cardTitle && <p className="h3 mb-3">{cardTitle}</p>}
{cardDescription && <p className="lead text-secondary">{cardDescription}</p>}
{(alertInfoTitle || alertInfoMessage) &&
<div className="alert alert-warning" role="status">
{alertInfoTitle && <p className="h6 mb-1">{alertInfoTitle}</p>}
{alertInfoMessage &&<p className="text-secondary mb-0">{alertInfoMessage}</p>}
</div>}
{hasAuthenticationError ? (
<div className="alert alert-danger" role="alert">Accesso non autorizzato!</div>
) : (
<>
{this.renderExtraContentPre()}
{(instructionsTitle || instructionsMessage) &&
<div className="alert alert-info" role="status">
{instructionsTitle && <p className="h6 mb-1">{instructionsTitle}</p>}
{instructionsMessage && <p className="text-secondary mb-0">{instructionsMessage}</p>}
</div> </div>
</div> }
<div className="rightDiv"> <form action="https://procedure.unipr.it/rwe2/ComeBackToElixAndSave" method="post" acceptCharset="ISO-8859-1" className="mt-3">
<div className="rightDivInside info padding_r"> {this.createMandatoryFormFields(queryParams)}
<div className="clear"></div> {this.createAdditionalFormFields()}
</div> {this.renderCustomFormFields()}
</div> <div className="mt-4 d-flex justify-content-end">
<div className="clear"></div> <button type="submit" className="btn btn-primary">{submitText ?? 'INVIA'} <span className="it-arrow-right text-white ms-2"></span></button>
</div> </div>
</div> </form>
<div className="clear"></div> {this.renderExtraContentPost()}
</div> </>
</header> )}
<div className="row">
<div className="col-12">
{headerTitle && (
<div>
<div className="mb-4">
<h2 className="h4 mb-0">{headerTitle}</h2>
</div>
</div>
)}
<div className="py-4">
<div className="container py-4">
{pageTitle && <h1 className="mb-3">{pageTitle}</h1>}
{heroImageSrc && <img src={heroImageSrc} alt="Hero Image" className="hero-image img-fluid mb-3" />}
{pageDescription && <p className="lead">{pageDescription}</p>}
{environmentMessage && <div className="alert alert-info">{environmentMessage}</div>}
{description && <div className="mb-3">{description}</div>}
{hasAuthenticationError ? (
<div className="alert alert-danger" role="alert">
Accesso non autorizzato. Parametri obbligatori mancanti ({missingMandatoryParams.join(', ')}).
</div>
) : (
<>
{this.renderExtraContentPre()}
<form action="https://procedure.unipr.it/rwe2/ComeBackToElixAndSave" method="post" acceptCharset="ISO-8859-1" className="mt-3">
{this.createMandatoryFormFields(queryParams)}
{this.createAdditionalFormFields()}
{this.renderCustomFormFields()}
<div className="mt-4 d-flex justify-content-start">
<button type="submit" className="btn btn-primary">{submitDescription ?? 'Invia'}</button>
</div>
</form>
{this.renderExtraContentPost()}
</>
)}
</div>
</div>
</div> </div>
</div> </div>
</div>
</div>
<div className="clearfix"></div> <footer className="it-footer">
<div className="it-footer-small-prints clearfix">
<footer className="it-footer mt-5"> <div className="container">
<div className="it-footer-main"> <section>
<div className="container"> <div className="row clearfix">
<div className="row clearfix"> <div className="col-sm-12">
<div className="col-sm-12"> <div className="footer-content text-white text-center p-2">
<div className="footer-content"> <div className="subfooter-top">powered by <span className="highlight">elixForms</span></div>
<div className="subfooter-top">powered by <span className="highlight">elixForms</span></div> {/* <div className="subfooter-bottom"><div>versione 1.24.0</div></div> */}
<div className="subfooter-bottom"><div>versione 1.24.0</div></div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </section>
</footer> </div>
</div> </div>
<div className="clear"></div> </footer>
</div>
</div> </div>
); );
} }
react/common/src/IElixFormsComponentProperties.ts
+10 -8
View File
@@ -1,17 +1,19 @@
export interface IElixFormsComponentProperties { export interface IElixFormsComponentProperties {
description: string;
isDarkTheme: boolean; isDarkTheme: boolean;
environmentMessage: string;
hasTeamsContext: boolean;
userDisplayName: string; userDisplayName: string;
additionalFieldsJson?: string; additionalFieldsJson?: string;
// Layout Properties // Layout Properties
moduleName: string;
headerTitle?: string; headerTitle?: string;
pageTitle?: string; headerHeroImageSrc?: string;
pageDescription?: string; cardTitle: string;
submitDescription?: string; cardDescription?: string;
heroImageSrc?: string; alertInfoTitle?: string;
alertInfoMessage?: string;
instructionsTitle?: string;
instructionsMessage?: string;
submitText?: string;
} }
// Additional Fields JSON Schema // Additional Fields JSON Schema
react/recupero-proposta-cct-da-contratti/src/App.jsx
+12 -8
View File
@@ -4,15 +4,19 @@ import RecuperoPropostaCctDaContrattiComponent from './RecuperoPropostaCctDaCont
function App() { function App() {
return ( return (
<RecuperoPropostaCctDaContrattiComponent <RecuperoPropostaCctDaContrattiComponent
description=""
isDarkTheme={false} isDarkTheme={false}
environmentMessage="" userDisplayName='useruseruser'
hasTeamsContext={false}
userDisplayName="" moduleName='Module name'
headerTitle="Modulo - Placeholder Titolo Modulo" headerTitle='Header title'
pageTitle="Recupero Proposta CCT da Contratti" headerHeroImageSrc='https://procedure.unipr.it/UploadImgs/8_marchio_UNIPR_pos_b1_small_SVG.png'
pageDescription="" cardTitle='Recupero Proposta CCT da Contratti (card title)'
submitDescription='CONFERMA E PROSEGUI' cardDescription='Card description'
alertInfoTitle='Alert Info'
alertInfoMessage='environment message'
instructionsTitle='Istruzioni di compilazione'
instructionsMessage='Completa i campi richiesti per procedere con la richiesta.'
submitText='CONFERMA E PROSEGUI'
/> />
); );
} }
react/scelta-carriera/src/App.css
+9
View File
@@ -1,4 +1,13 @@
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-italia@2.0.0/dist/css/bootstrap-italia.min.css'); @import url('https://cdn.jsdelivr.net/npm/bootstrap-italia@2.0.0/dist/css/bootstrap-italia.min.css');
:root {
--font-family-sans-serif: "Titillium Web", "Segoe UI", Arial, sans-serif;
}
body {
font-family: "Titillium Web", "Segoe UI", Arial, sans-serif;
}
/* /*
@import url('https://console-unipr.elixforms.it/elixFormsCustom/css/elixForms.css'); @import url('https://console-unipr.elixforms.it/elixFormsCustom/css/elixForms.css');
@import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/bootstrap_adaptation.css'); @import url('https://console-unipr.elixforms.it/rwe2/css/design-bs/bootstrap_adaptation.css');
react/scelta-carriera/src/App.jsx
+5 -6
View File
@@ -5,15 +5,14 @@ import SceltaCarrieraComponent from './SceltaCarrieraComponent';
function App() { function App() {
return ( return (
<SceltaCarrieraComponent <SceltaCarrieraComponent
description="" moduleName=""
isDarkTheme={false} isDarkTheme={false}
environmentMessage="" alertInfoMessage=""
hasTeamsContext={false}
userDisplayName="John Doe" userDisplayName="John Doe"
headerTitle="Modulo A/13 - Richiesta di Certificato" headerTitle="Modulo A/13 - Richiesta di Certificato"
pageTitle="Scelta Carriera" cardTitle="Scelta Carriera"
pageDescription="Benvenuto nella piattaforma di scelta carriera! Esplora le tue opzioni e trova la strada giusta per te." cardDescription="Benvenuto nella piattaforma di scelta carriera! Esplora le tue opzioni e trova la strada giusta per te."
heroImageSrc={heroImg} headerHeroImageSrc={heroImg}
/> />
) )
} }