allow different sizes for mobile for iframes. Reduce padding on smaller devices for iframe and allow them to be added through tina

Author: Erik2609

content/english/technical-tools/implementation-tool.md

@@ -29,14 +29,14 @@ All potential outcomes of the first questionnaire are shown in the [figure](/tec
 
 {{< container_close >}}
 
-{{< iframe src="https://ai-documentation.s3.eu-central-1.amazonaws.com/index.html?lang=en" title="" id="tool" icon="" height="60vh" >}}
+{{< iframe src="https://ai-documentation.s3.eu-central-1.amazonaws.com/index.html?lang=en" title="" id="tool" icon="" height="60vh" height_mobile="100vh" >}}
 
 {{< container_open icon="fas fa-layer-group" title="Outcomes questionnaires" id="outcome" >}}
 
 The outcomes of the first questionnaire are displayed in the below figure. The following categories are distinguished:
 
 - Algorithms: fall outside the scope of the AI Act, no additional control measures are needed.
-- Impactful algorithms: fall outside the scope of the AI Act, additional control measures are needed. 
+- Impactful algorithms: fall outside the scope of the AI Act, additional control measures are needed.
 - AI systems: are in scope of the AI Act, only additional control measures are needed in case of high-risk AI systems.
 - High risk AI systems: are in scope of the AI Act, additional control measures for high-risk AI systems are needed through harmonized standards.
 - Prohibited AI systems: are in scope of the AI Act, usage of this type of AI systems is prohibited in the European Union. More information about this category is provided by the <a href="https://www.digitaleoverheid.nl/achtergrondartikelen/welke-ai-praktijken-zijn-volgend-jaar-verboden/" target="_blank">Dutch government</a>.
@@ -51,7 +51,7 @@ The questions in the AI Act Implementation Tool are developed in collaboration w
 
 {{< container_close >}}
 
-{{< container_open icon="far fa-file" title="Guidelines for AI Act implementation" id="documentation-definition" >}} 
+{{< container_open icon="far fa-file" title="Guidelines for AI Act implementation" id="documentation-definition" >}}
 
 The reasoning and motivations behind the selected questions in the AI Act Implementation Tool are outlined in the below documents.
 
@@ -61,7 +61,7 @@ The reasoning and motivations behind the selected questions in the AI Act Implem
 
 {{< container_open icon="fas fa-chalkboard-teacher" title="Explainers" id="explainers" >}}
 
-Through examples the slides decks explain the intricacies of the AI system definition. 
+Through examples the slides decks explain the intricacies of the AI system definition.
 
 ### 10 examples of (non) AI systems
 
@@ -81,4 +81,4 @@ Through examples the slides decks explain the intricacies of the AI system defin
 
 {{< embed_pdf url="/pdf-files/technical-tools/AIA-Implementation-Tool/20250205_Flowchart_AIAIT_EN.pdf" width_mobile_pdf="12" width_desktop_pdf="12" >}}
 
-{{< container_close >}}
+{{< container_close >}}

layouts/shortcodes/iframe.html

@@ -3,7 +3,7 @@
 <div class="container-fluid mt-5 p-0">
     <div class="rounded-lg" id='{{.Get "id" }}'>
         <div class="row">
-            <div class="col-12">
+            <div class="col-12 p-0 p-lg-3">
                 {{ if .Get "title" }}
                 {{ if .Get "icon" }}
                 <!-- Title and icon -->
@@ -20,7 +20,7 @@ <h3 class="pl-3">{{ .Get "title" }}
                 {{ end }}
                 {{ end}}
                 <div class="i-frame__container" >
-                    <iframe class="iframe" src='{{.Get "src" }}'
+                    <iframe id='{{.Get "id" }}' class="iframe" src='{{.Get "src" }}'
                         title='{{.Get "title"}}'>
                     </iframe>
                 </div>
@@ -34,11 +34,19 @@ <h3 class="pl-3">{{ .Get "title" }}
                         align-items: center;
                     }
 
-                    .iframe {
+                    #{{.Get "id" }} {
                         border: none;
                         width: 100%;
                         height: {{.Get "height" }};
                     }
+
+                    {{ if .Get "height_mobile"}}
+                    @media only screen and (max-width: 992px) {
+                        #{{.Get "id" }} {
+                            height: {{.Get "height_mobile" }};
+                        }
+                    }
+                    {{ end }}
                 </style>
             </div>
         </div>

tina/collections/shared/templates/iframe.ts

@@ -11,7 +11,6 @@ const iframe: RichTextTemplate = {
       name: "id",
       label: "ID",
       type: "string",
-      description: "Use top level template",
       required: true,
     },
     {
@@ -28,6 +27,12 @@ const iframe: RichTextTemplate = {
       description: "Height of the iframe (i.e. 500px)",
       required: true,
     },
+    {
+      name: "height_mobile",
+      label: "Height mobile",
+      type: "string",
+      description: "Height of the iframe (i.e. 500px)",
+    },
     {
       name: "title",
       label: "Title",