switch to bootstrap-italia styling
This commit is contained in:
+24
-20
@@ -1,23 +1,27 @@
|
||||
/*
|
||||
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@300;400;600;700&display=swap');
|
||||
@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_overrides.css");
|
||||
@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");
|
||||
@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/fonts.css");
|
||||
@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");
|
||||
@import url("https://console-unipr.elixforms.it/rwe2/css/design-bs/responsive.css");
|
||||
@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");
|
||||
@import url("https://console-unipr.elixforms.it/rwe2/css/plugins/modaldisplay.css");
|
||||
@import url("https://console-unipr.elixforms.it/rwe2/css/themes/blu-italia.css");
|
||||
@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");
|
||||
@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://cdn.jsdelivr.net/npm/bootstrap-italia@2.18.2/dist/css/bootstrap-italia.min.css");
|
||||
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js");
|
||||
@import url("https://cdn.jsdelivr.net/npm/bootstrap-italia@2.18.2/dist/js/bootstrap-italia.bundle.min.js");
|
||||
|
||||
:root {
|
||||
--font-family-sans-serif: "Titillium Web", "Segoe UI", Arial, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Titillium Web", "Segoe UI", Arial, sans-serif;
|
||||
}
|
||||
|
||||
.it-brand-wrapper .icon {
|
||||
width: 120px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.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) */
|
||||
.mainview .container .submit {
|
||||
|
||||
@@ -93,14 +93,18 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
|
||||
|
||||
public override render(): React.ReactElement<IElixFormsComponentProperties> {
|
||||
const {
|
||||
description,
|
||||
environmentMessage,
|
||||
additionalFieldsJson,
|
||||
isDarkTheme,
|
||||
userDisplayName,
|
||||
moduleName,
|
||||
headerTitle,
|
||||
pageTitle,
|
||||
pageDescription,
|
||||
submitDescription,
|
||||
heroImageSrc
|
||||
headerHeroImageSrc: headerTitleImageSrc,
|
||||
cardTitle,
|
||||
cardDescription,
|
||||
alertInfoTitle,
|
||||
alertInfoMessage,
|
||||
instructionsTitle,
|
||||
instructionsMessage,
|
||||
submitText,
|
||||
} = this.props;
|
||||
|
||||
const queryParams = new URLSearchParams(window.location.search);
|
||||
@@ -108,94 +112,137 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
|
||||
const hasAuthenticationError = missingMandatoryParams.length > 0;
|
||||
|
||||
return (
|
||||
<div className="container-fluid px-0" id="pageBody">
|
||||
<div>
|
||||
<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="container">
|
||||
<div className="it-header-center-content-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">
|
||||
<h2 className="no_toc">Ente Pubblico</h2>
|
||||
<h3 className="no_toc d-none d-md-block">Sito istituzionale</h3>
|
||||
<p className="h2 no_toc">Università di Parma</p>
|
||||
{/* <p className="h3 no_toc d-none d-md-block">Procedure Online</p> */}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="it-right-zone">
|
||||
<div className="it-search-wrapper">
|
||||
{/* <div className="it-search-wrapper">
|
||||
<span className="d-none d-md-block">Cerca</span>
|
||||
<button className="search-link" aria-label="Cerca">
|
||||
<span className="it-search"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div className="row g-0">
|
||||
<div id="userConsole" className="col-12">
|
||||
<header className='it-header-wrapper'>
|
||||
<div className="neutral">
|
||||
<div className="grid_12">
|
||||
<div className="console_header">
|
||||
<div className="leftDiv">
|
||||
<h1>elixForms</h1>
|
||||
<div className="logo">
|
||||
<a href="https://www.unipr.it/" title="Torna alla homepage dell'Università di Parma">
|
||||
<img src="https://console-unipr.elixforms.it/elixFormsCustom/images/logo.png" alt="Logo Università di Parma" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rightDiv">
|
||||
<div className="rightDivInside info padding_r">
|
||||
<div className="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="clear"></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="row">
|
||||
<div className="col-12">
|
||||
{headerTitle && (
|
||||
<div>
|
||||
<div className="mb-4">
|
||||
<h2 className="h4 mb-0">{headerTitle}</h2>
|
||||
<div className="container my-2 mx-4">
|
||||
<div className='cmp-breadcrumb' role='navigation'>
|
||||
<nav className="breadcrumb-container" aria-label="breadcrumb">
|
||||
<ol className="breadcrumb">
|
||||
<li className='breadcrumb-item'>Procedure Online<span className="separator">/</span></li>
|
||||
<li className="breadcrumb-item active" aria-current="page">{moduleName}</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</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>}
|
||||
{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. Parametri obbligatori mancanti ({missingMandatoryParams.join(', ')}).
|
||||
</div>
|
||||
<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>
|
||||
}
|
||||
<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 className="mt-4 d-flex justify-content-end">
|
||||
<button type="submit" className="btn btn-primary">{submitText ?? 'INVIA'} <span className="it-arrow-right text-white ms-2"></span></button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{this.renderExtraContentPost()}
|
||||
</>
|
||||
)}
|
||||
@@ -204,26 +251,23 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="clearfix"></div>
|
||||
|
||||
<footer className="it-footer mt-5">
|
||||
<div className="it-footer-main">
|
||||
<footer className="it-footer">
|
||||
<div className="it-footer-small-prints clearfix">
|
||||
<div className="container">
|
||||
<section>
|
||||
<div className="row clearfix">
|
||||
<div className="col-sm-12">
|
||||
<div className="footer-content">
|
||||
<div className="footer-content text-white text-center p-2">
|
||||
<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>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<div className="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,17 +1,19 @@
|
||||
export interface IElixFormsComponentProperties {
|
||||
description: string;
|
||||
isDarkTheme: boolean;
|
||||
environmentMessage: string;
|
||||
hasTeamsContext: boolean;
|
||||
userDisplayName: string;
|
||||
additionalFieldsJson?: string;
|
||||
|
||||
// Layout Properties
|
||||
moduleName: string;
|
||||
headerTitle?: string;
|
||||
pageTitle?: string;
|
||||
pageDescription?: string;
|
||||
submitDescription?: string;
|
||||
heroImageSrc?: string;
|
||||
headerHeroImageSrc?: string;
|
||||
cardTitle: string;
|
||||
cardDescription?: string;
|
||||
alertInfoTitle?: string;
|
||||
alertInfoMessage?: string;
|
||||
instructionsTitle?: string;
|
||||
instructionsMessage?: string;
|
||||
submitText?: string;
|
||||
}
|
||||
|
||||
// Additional Fields JSON Schema
|
||||
|
||||
@@ -4,15 +4,19 @@ import RecuperoPropostaCctDaContrattiComponent from './RecuperoPropostaCctDaCont
|
||||
function App() {
|
||||
return (
|
||||
<RecuperoPropostaCctDaContrattiComponent
|
||||
description=""
|
||||
isDarkTheme={false}
|
||||
environmentMessage=""
|
||||
hasTeamsContext={false}
|
||||
userDisplayName=""
|
||||
headerTitle="Modulo - Placeholder Titolo Modulo"
|
||||
pageTitle="Recupero Proposta CCT da Contratti"
|
||||
pageDescription=""
|
||||
submitDescription='CONFERMA E PROSEGUI'
|
||||
userDisplayName='useruseruser'
|
||||
|
||||
moduleName='Module name'
|
||||
headerTitle='Header title'
|
||||
headerHeroImageSrc='https://procedure.unipr.it/UploadImgs/8_marchio_UNIPR_pos_b1_small_SVG.png'
|
||||
cardTitle='Recupero Proposta CCT da Contratti (card title)'
|
||||
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'
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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');
|
||||
|
||||
: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/rwe2/css/design-bs/bootstrap_adaptation.css');
|
||||
|
||||
@@ -5,15 +5,14 @@ import SceltaCarrieraComponent from './SceltaCarrieraComponent';
|
||||
function App() {
|
||||
return (
|
||||
<SceltaCarrieraComponent
|
||||
description=""
|
||||
moduleName=""
|
||||
isDarkTheme={false}
|
||||
environmentMessage=""
|
||||
hasTeamsContext={false}
|
||||
alertInfoMessage=""
|
||||
userDisplayName="John Doe"
|
||||
headerTitle="Modulo A/13 - Richiesta di Certificato"
|
||||
pageTitle="Scelta Carriera"
|
||||
pageDescription="Benvenuto nella piattaforma di scelta carriera! Esplora le tue opzioni e trova la strada giusta per te."
|
||||
heroImageSrc={heroImg}
|
||||
cardTitle="Scelta Carriera"
|
||||
cardDescription="Benvenuto nella piattaforma di scelta carriera! Esplora le tue opzioni e trova la strada giusta per te."
|
||||
headerHeroImageSrc={heroImg}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user