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

first update to bootstrap italia styles

Browse Source
This commit is contained in:
pierpaolo.mammi
2026-07-17 10:40:42 +02:00
parent 4cd22396d9
commit 1943252422
7 changed files with 399 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
react/common/src/App.css
+3
View File
@@ -1,3 +1,4 @@
/*
@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");
@@ -15,6 +16,8 @@
@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");
/* Submit button styling (elixForms main submit) */
.mainview .container .submit {
react/common/src/ElixFormsComponentAbstract.tsx
+40 -13
View File
@@ -1,12 +1,13 @@
import './App.css';
import type { IElixFormsComponentFormState } from './IElixFormsComponentFormState';
import type { IElixFormsComponentProperties } from './IElixFormsComponentProperties';
import type { IElixFormsComponentCustomFormFieldFactory } from './IElixFormsComponentCustomFormFieldFactory';
import type { ElixFormsCheckboxOption, ElixFormsDropdownOption, ElixFormsRadioOption } from './ElixFormsTypes';
import { ElixFormsElement } from './ElixFormsElement';
import { QueryParamHelper } from './QueryParamHelper';
import { Component, type JSX } from 'react';
import React from 'react';
import type { IElixFormsComponentCustomFormFieldFactory } from './IElixFormsComponentCustomFormFieldFactory';
import type { ElixFormsCheckboxOption, ElixFormsDropdownOption, ElixFormsRadioOption } from './ElixFormsTypes';
export default abstract class ElixFormsComponentAbstract extends Component<IElixFormsComponentProperties, IElixFormsComponentFormState> {
constructor(props: IElixFormsComponentProperties) {
@@ -107,10 +108,36 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
const hasAuthenticationError = missingMandatoryParams.length > 0;
return (
<div className="container_12" id="pageBody">
<div className="grid_12">
<div id="userConsole" className="fe-behaviour">
<header>
<div className="container-fluid px-0" id="pageBody">
<header className="it-header-wrapper">
<div className="it-header-center-wrapper">
<div className="container">
<div className="it-header-center-content-wrapper">
<div className="it-brand-wrapper">
<a href="/">
<div className="it-brand-text">
<h2 className="no_toc">Ente Pubblico</h2>
<h3 className="no_toc d-none d-md-block">Sito istituzionale</h3>
</div>
</a>
</div>
<div className="it-right-zone">
<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>
</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">
@@ -134,16 +161,16 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
</div>
</header>
<div className="grid_12 console_main">
<div className="inside">
<div className="row">
<div className="col-12">
{headerTitle && (
<div>
<div className="fe-module-header-container">
<h2>{headerTitle}</h2>
<div className="mb-4">
<h2 className="h4 mb-0">{headerTitle}</h2>
</div>
</div>
)}
<div className="mainview">
<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" />}
@@ -177,9 +204,9 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
</div>
</div>
<div className="clear"></div>
<div className="clearfix"></div>
<footer className="it-footer">
<footer className="it-footer mt-5">
<div className="it-footer-main">
<div className="container">
<div className="row clearfix">
react/common/src/ElixFormsElement.tsx
+6 -18
View File
@@ -17,26 +17,14 @@ export class ElixFormsElement {
render(): JSX.Element {
return (
<div className="iuFieldContainer form-group row mb-3 align-items-start">
<div className="attrDisplay_left attrDisplay_label col-sm-4">
<div className="iuLabelContainer">
<div className="attrDisplay_center">
<div className="attrDisplay_middle">
{this.label}{this.separator}
</div>
</div>
<div className="iuClearContainer">&nbsp;</div>
<div className="row mb-3 align-items-start">
<div className="col-12 col-md-4">
<div className="text-md-end pe-md-3">
{this.label}{this.separator}
</div>
</div>
<div className="attrDisplay_right attrDisplay_input col-sm-8">
<div className="iuInputContainer iuTypeString">
<div className="attrDisplay_center">
<div className="attrDisplay_middle">
{this.input}
</div>
</div>
<div className="iuClearContainer">&nbsp;</div>
</div>
<div className="col-12 col-md-8">
{this.input}
</div>
</div>
);