Skip to content

Commit

Permalink
fix(validatore): fix responsive view (#565)
Browse files Browse the repository at this point in the history
  • Loading branch information
@VincenzoDeSisto
VincenzoDeSisto authored Sep 6, 2024
1 parent 14a613d commit 5228490
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 59 deletions.
2 changes: 1 addition & 1 deletion src/components/layout/HeaderMainMenu/HeaderMainMenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const HeaderMainMenu = () => {
});
}, []);
const isActive = (href) => {
if (href.includes(pathname)) {
if (href.includes(pathname) && pathname !== "/") {
return true;
}

Expand Down
14 changes: 8 additions & 6 deletions src/components/static-content/validatore/Validatore.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ const Validatore = ({ test = false }) => {
};

const handleChangeBackground = () => {
const offset = buttonGroupEl.getBoundingClientRect().top;
const offset = buttonGroupEl.getBoundingClientRect().top + window.scrollY;

backgroundEl.style.background = `linear-gradient(to bottom, #f0f6fc ${
offset - (isMobile() ? 80 : 140)
Expand Down Expand Up @@ -179,9 +179,11 @@ const Validatore = ({ test = false }) => {

<div className="row pt-3 pb-3">
<div className="col-12">
<h1 className="main ms-2">Carica il tuo file Turtle</h1>
<h1 className="main ms-2">
Valida i metadati delle risorse semantiche
</h1>
</div>
<div className="description col-6 mb-2">
<div className="description col-12 col-md-6 mb-2">
Per la pubblicazione sul Catalogo, i metadati devono
essere conformi alle regole indicate nella{" "}
<a
Expand Down Expand Up @@ -228,7 +230,7 @@ const Validatore = ({ test = false }) => {
<svg
data-bs-toggle="tooltip"
title="Adottare le regole di metadatazione dell’ontologia ADMS-AP_IT"
data-bs-placement="bottom"
data-bs-placement="right"
data-bs-custom-class="tooltip"
className="icon icon-xs icon-secondary ms-1"
style={{ verticalAlign: "text-top" }}
Expand Down Expand Up @@ -256,7 +258,7 @@ const Validatore = ({ test = false }) => {
<svg
data-bs-toggle="tooltip"
title="Adottare le regole di metadatazione DCAT-AP_IT e una licenza aperta"
data-bs-placement="bottom"
data-bs-placement="right"
className="icon icon-xs icon-secondary ms-1"
style={{ verticalAlign: "text-top" }}
>
Expand All @@ -277,7 +279,7 @@ const Validatore = ({ test = false }) => {
<svg
data-bs-toggle="tooltip"
title="Il file index.ttl deve adottare le regole di metadatazione dell’ontologia ADMS-AP_IT"
data-bs-placement="bottom"
data-bs-placement="right"
className="icon icon-xs icon-secondary ms-1"
style={{ verticalAlign: "text-top" }}
>
Expand Down
112 changes: 60 additions & 52 deletions src/components/static-content/validatore/partials/ValidatoreResult.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import BreadCrumbs from "../../../common/BreadCrumbs/BreadCrumbs";
import BREADCRUMBS from "../../../../services/BreadCrumbsConst";
import sprite from "../../../../assets/images/sprite.svg";
import "../Validatore.css";
import { isMobile } from "../../../common/ResponsiveViews";
import { Navigate, useLocation, useNavigate } from "react-router-dom";
import { VALIDATORE } from "../../../../services/routes";
import { isMobile } from "../../../common/ResponsiveViews";

const ValidatoreResult = () => {
const location = useLocation();
Expand Down Expand Up @@ -76,17 +76,17 @@ const ValidatoreResult = () => {
};

const handleChangeBackground = () => {
const offset = buttonGroupErrorEl.getBoundingClientRect().top;
const offset =
buttonGroupErrorEl.getBoundingClientRect().top + window.scrollY;
backgroundEl.style.background = `linear-gradient(to bottom, #f0f6fc ${
offset - (isMobile() ? 0 : 100)
offset - (isMobile() ? 0 : 80)
}px, white 0)`;
};

useEffect(() => {
if (buttonGroupErrorEl) {
handleChangeBackground();
window.addEventListener("resize", handleChangeBackground);

if (!stoplight) setStoplight(true);
}

Expand Down Expand Up @@ -117,7 +117,7 @@ const ValidatoreResult = () => {
</div>
</div>
<div className="container-fluid schemaPadding">
<div className="">
<div className="col-12">
<div className="col-12">
<div>
<div className="col-lg-12">
Expand Down Expand Up @@ -151,7 +151,7 @@ const ValidatoreResult = () => {
Complimenti, il tuo file risulta essere idoneo
</h1>
</div>
<div id="button-group-error" className="mb-5">
<div id="button-group-error">
<a
className="btn btn-primary text-white ms-2 mb-5"
onClick={handlePageReload}
Expand All @@ -177,7 +177,7 @@ const ValidatoreResult = () => {
</div>
</div>
</div>
<div className="container-fluid schemaPadding d-flex">
<div className="container-fluid schemaPadding">
<div className="">
<div className="col-12">
<div>
Expand All @@ -187,9 +187,10 @@ const ValidatoreResult = () => {
<div
className="schemaPadding py-2 ms-2 mt-3"
data-testid="messageAlert"
style={{ width: "100%" }}
>
<div
className="alert alert-warning m-0"
className="alert alert-warning m-0 w-100"
role="alert"
>
<strong>
Expand All @@ -209,9 +210,10 @@ const ValidatoreResult = () => {
<div
className="schemaPadding py-2 ms-2 mt-1"
data-testid="messageAlert"
style={{ width: "100%" }}
>
<div
className="alert alert-danger m-0"
className="alert alert-danger m-0 w-100"
role="alert"
>
<strong>
Expand Down Expand Up @@ -247,16 +249,19 @@ const ValidatoreResult = () => {
>
<use href={sprite + "#it-error"}></use>
</svg>
<h1 className="main col-6">
<h1 className="main col-8 col-md-6">
Ci dispiace, il tuo file non risulta essere
idoneo
</h1>
</div>
<div id="button-group-error" className="d-flex">
<div
id="button-group-error"
className="d-flex flex-row gap-2"
>
{errors?.length !== 0 ? (
<div>
<button
className="btn btn-lg btn-danger fw-bold ms-2 "
className="btn btn-lg btn-danger fw-bold"
onClick={handleShowErrors}
>
Mostra errori
Expand All @@ -267,7 +272,7 @@ const ValidatoreResult = () => {
{warnings?.length !== 0 ? (
<div>
<button
className="btn btn-lg btn-outline-warning fw-bold ms-2"
className="btn btn-lg btn-outline-warning fw-bold"
onClick={handleShowWarnings}
// style={{ color: "hsl(0, 70%, 50%)" }}
>
Expand All @@ -278,11 +283,11 @@ const ValidatoreResult = () => {

<div>
<a
className="btn btn-lg btn-primary text-white ms-3"
className="btn btn-lg btn-primary d-flex flex-row text-white"
onClick={downloadFile}
>
<svg
className="icon icon-sm ms-0 me-2"
className="icon icon-sm ms-0 d-none d-sm-block me-2"
fill="white"
>
<use href={sprite + "#it-download"}></use>
Expand All @@ -305,17 +310,17 @@ const ValidatoreResult = () => {
LISTA ERRORI
</div>
<div
className="card card-bg mt-4"
className="card card-bg w-100 p-4 mt-3 mx-0"
style={{ minHeight: "3rem" }}
>
<div className="col-12 card-space">
<div className="row">
<div className="w-100">
<div className="w-100">
<div
className="pt-1 fw-bold mt-3 mb-4 ms-4"
className="fw-bold mt-3 mb-4"
ref={errorRef}
style={{
fontSize: "0.8rem",
width: "95%"
width: "100%"
}}
>
<span
Expand All @@ -332,23 +337,25 @@ const ValidatoreResult = () => {
return (
<div
key={index}
className="col-12 card-wrapper card-space mx-2"
className="w-100 card-wrapper"
>
<div className="col-12 ms-0 row">
<h6
className="col-1 me-5 ms-2 fw-bold"
style={{ color: "#004080" }}
>
Errore {`${index + 1}`}
</h6>
<span className="col-10">
{error.message}
</span>
<div className="d-flex flex-column w-100 ms-0">
<div className="d-flex flex-column flex-md-row">
<div
className="h6 col-12 col-md-2 ms-2 fw-bold"
style={{ color: "#004080" }}
>
Errore {`${index + 1}`}
</div>
<span className="col-12 col-md-10 ms-2 me-2 text-wrap">
{error.message}
</span>
</div>
<hr
className="ms-3 me-4"
className=""
style={{
paddingBottom: "0.1rem",
width: "95%"
width: "100%"
}}
/>
</div>
Expand All @@ -373,19 +380,18 @@ const ValidatoreResult = () => {
>
LISTA WARNING
</div>

<div
className="card card-bg mt-4"
className="card card-bg w-100 p-4 mt-3 mx-0"
style={{ minHeight: "3rem" }}
>
<div className="col-12 card-space">
<div className="row">
<div className="">
<div className="">
<div
className="pt-1 mt-3 mb-4 ms-4 fw-bold"
className="fw-bold mt-3 mb-4"
ref={warningRef}
style={{
fontSize: "0.8rem",
width: "95%"
width: "100%"
}}
>
<span
Expand All @@ -402,23 +408,25 @@ const ValidatoreResult = () => {
return (
<div
key={index}
className="col-12 card-wrapper card-space mx-2"
className="w-100 card-wrapper"
>
<div className="col-12 ms-0 row">
<h6
className="col-1 me-5 ms-2 fw-bold"
style={{ color: "#004080" }}
>
Warning {`${index + 1}`}
</h6>
<span className="col-10">
{warning.message}
</span>
<div className="d-flex flex-column w-100 ms-0">
<div className="d-flex flex-column flex-md-row">
<div
className="h6 col-12 col-md-2 ms-2 fw-bold"
style={{ color: "#004080" }}
>
Warning {`${index + 1}`}
</div>
<span className="col-12 col-md-10 ms-2 me-2 text-wrap">
{warning.message}
</span>
</div>
<hr
className="ms-3 me-4"
className=""
style={{
paddingBottom: "0.1rem",
width: "95%"
width: "100%"
}}
/>
</div>
Expand Down

0 comments on commit 5228490

Please sign in to comment.