search

UserOfficeProject / issue-tracker

Shared place for features and bugs from all collaborators.
0 stars 0 forks source link

Proposal PDF header overlaps into content #908

Closed simonfernandes closed 11 months ago

simonfernandes commented 11 months ago

The new proposal PDF header overlaps into the content of the PDF. This affects custom PDF templates and default PDF template.

First page, unmodified:

image

Second page, unmodified:

image

First page, adding <br> after each page (better):

image

Second page, adding <br> after each page (same problem):

image

yoganandaness commented 11 months ago

@simonfernandes Is it for Custom PDF template? And can you share the Header html code with CSS?

simonfernandes commented 11 months ago

Hi @yoganandaness, it's for the default and custom template. Here is the entire custom PDF template for the above screenshots:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,400..700;1,75..100,400..700&display=swap" rel="stylesheet">

<style>

body {
  font-family: "Open Sans", sans;
  font-stretch: 85%;
}

@page {
  margin: 0.5cm;
  margin-top: 2cm;
}

strong {
  font-weight: 600;
}

h1,h2,h3,h4,h5,h6 {
  margin: 0;
}

h1 {
  font-size: 1.2rem;
  padding-bottom: 0.2em;
}

h2 {
  font-size: 1.1rem;
  padding-bottom: 0.2em;
}

.content {
  font-size: 1rem;
  line-height: 1.1;
}

small {
  font-size: 0.75rem;
}

p {
  margin: 0;
  margin-top: 0.2em;
}

.request {
  padding-top: 0.2em;
  display: flex;
  gap: 1em;
}

.request h2 {
  font-size: 1rem;
}

.request p {
  margin-top: 0;
}

section::after {
  content: "";
  display: block;
  border-bottom: 1px #aaaaaa solid;
  padding-top: 0.35rem;
  margin-bottom: 0.35rem;
}

section:last-child::after {
  content: none;
}

.page {
  page-break-after: always;
}

</style>
<div class="content">
  <div class="page">
    <h1>{{ proposal.proposalId }}: {{ proposal.title }}</h1>
    <section>
      <p>{{ answers.direct_access_route }}
        {{#if answers.previous_reference_number}}
          ({{ answers.previous_reference_number }})
        {{/if}}
      <p>{{ answers.Resubmission_Reason }}
        <p><strong>Principal Investigator:</strong> {{ principalInvestigator.preferredname }} ({{ principalInvestigator.organisation }}) 
        {{#each coProposers}}
          <p><strong>Co Investigator:</strong> {{ preferredname }} ({{ organisation }})
        {{/each}}
      <p><strong>Science Programmes:</strong> {{ answers.Proposal_Programmes }}
      <div class="request">
        <div class="request__part">
          <strong>Technique</strong>
          <p>{{ answers.scientific_technique }}
        </div>
        <div class="request__part">
          <strong>Instrument</strong>
          <p>
            {{#if answers.isis_instrument}}
              {{ answers.isis_instrument}}
            {{else}}
              {{ answers.instrument_small_angle_scattering }}
              {{ answers.instrument_muon }}
              {{ answers.instrument_electronics_irradiation }}
              {{ answers.instrument_inelastic_scattering }}
              {{ answers.instrument_quasi_elastic_scattering }}
              {{ answers.instrument_vibrational_spectroscopy }}
              {{ answers.instrument_liquid_defraction }}
              {{ answers.instrument_engineering }}
              {{ answers.instrument_defraction }}
              {{ answers.instrument_reflectometry }}
              {{ answers.instrument_excitations }}
              {{ answers.instrument_imaging }}
            {{/if}}
        </div>
        <div class="request__part">
          <strong>Days</strong>
          <p>{{ answers.days_requested.value }}
        </div>
      </div>
    </section>
    {{#if answers.other_recent_facility_submission }}
      <section>
        <strong>Similar submission:</strong> {{ answers.other_recent_facility_submission }}
      </section>
    {{/if}}
    <section>
      <h2>Grants</h2>
      {{#each answers.Research_Grants}}
        <p>
        <strong>
          {{#if other_funding_body}}
            {{ other_funding_body }}:
          {{else}}
            {{ Funding_Body }}:
          {{/if}}
        </strong>
        {{generic_template_basis}} <small>{{Grant_Objectives}}</small>
      {{/each}}
      {{#if answers.phd_details}}
        <p><strong>PhD:</strong> {{ answers.phd_details }}
      {{/if}}
      {{#if answers.other_support}}
        <p><strong>Other support:</strong> {{ answers.other_support }}
      {{/if}}
      <p><strong>Indian funding?</strong> {{ answers.indian_funding }}
    </section>
    <section>
      <h2>Publications</h2>
      {{#each answers.Associated_Publications}}
        <p>{{ generic_template_basis }}. {{ publication_year }}. {{ first_publication_author }}.
        {{#if publication_author}}
           et al.
        {{/if}}
      {{ publication_journal }}. {{ publication_doi }}
      {{/each}}
    </section>
    <section>
      <h2>Abstract</h2>
      {{ proposal.abstract }}
    </section>
  </div>
  <div class="page">
    <section>
      <h2>Technique: {{ answers.scientific_technique }}</h2>

      {{#if answers.instrument_small_angle_scattering}}
        <p><strong>Instrument:</strong> {{ answers.instrument_small_angle_scattering }}
        <p><strong>Lengthscale range:</strong> {{ answers.samepl_lengthscale_text_input }}
        <p><strong>SESANS?</strong> {{ answers.sesans_options }}
        <p><strong>Already been measured?</strong> {{ answers.sans_measurement_yn }}
        <p><strong>Measure needed at ISIS?</strong> {{ answers.sans_measurement_required_yn }}
        <p><strong>Polarised SANS?</strong> {{ answers.polarised_sans_yn }}
      {{/if}}

      {{#if answers.instrument_muon}}
        <p><strong>Instrument:</strong> {{ answers.instrument_muon }}
        <p><strong>Capabilities:</strong> {{ answers.muons_capabilities_mc }}
        <p><strong>Other capabilities:</strong> {{ answers.muons_capabilities_other_text }}
        <p><strong>Beam type:</strong> {{ answers.muons_single_double_beam_mc }}
      {{/if}}

      {{#if answers.instrument_electronics_irradiation}}
        <p><strong>Instrument:</strong> {{ answers.instrument_electronics_irradiation }}
        <p><strong>Irradiation type:</strong> {{ answers.electronics_irradiation_mc }}
        <p><strong>Neutron option?</strong> {{ answers.electronics_irradiation_neutrons_mc }}
      {{/if}}

      {{#if answers.instrument_inelastic_scattering}}
        <p><strong>Instrument:</strong> {{ answers.instrument_inelastic_scattering }}
        <p><strong>Contains metals?</strong> {{ answers.deep_inelastic_metal_yn }}
        <p><strong>Weak scatterer?</strong> {{ answers.deep_inelastic_weak_scat }}
      {{/if}}

      {{#if answers.instrument_quasi_elastic_scattering}}
        <p><strong>Instrument:</strong> {{ answers.instrument_quasi_elastic_scattering }}
        <p><strong>Weak scatterer?</strong> {{ answers.qe_scattering_sample_mc }}
        <p><strong>Multiple energy ranges?</strong> {{ answers.qe_scattering_energy_ranges_mc }}
        <p><strong>Polarised neutrons?</strong> {{ answers.qe_scattering_polarised_neutrons_mc }}
        <p><strong>Energy resolution:</strong> {{ answers.qe_scattering_energy_resolution_text }}
        <p><strong>Energy range:</strong> {{ answers.qe_scattering_energy_range_text }}
        <p><strong>Q-range:</strong> {{ answers.qe_scattering_q_range_text }}
        <p><strong>Magnet?</strong> {{ answers.qe_scattering_magnet_mc }}
      {{/if}}

      {{#if answers.instrument_vibrational_spectroscopy}}
        <p><strong>Instrument:</strong> {{ answers.instrument_vibrational_spectroscopy }}
        <p><strong>Energy range:</strong> {{ answers.spectroscopy_energy_range_mc }}
      {{/if}}

      {{#if answers.instrument_liquid_defraction}}
        <p><strong>Instrument:</strong> {{ answers.instrument_liquid_defraction }}
        <p><strong>Cell geometry:</strong> {{ answers.diffraction_cell_geometry }}
        <p><strong>Cell material:</strong> {{ answers.diffraction_materials_mc }}
        <p><strong>Q-range:</strong> {{ answers.diffraction_q_range_text }}
        <p><strong>Q-resolution:</strong> {{ answers.diffraction_q_resolution_text }}
        <p><strong>Samples/state points:</strong> {{ answers.diffraction_samples_text }}
      {{/if}}

      {{#if answers.instrument_engineering}}
        <p><strong>Instrument:</strong> {{ answers.instrument_engineering }}
        <p><strong>Collimator size:</strong> {{ answers.engineering_enginx_cillimator_size_mc }} {{ answers.engineering_imat_cillimator_size_mc }}
      {{/if}}

      {{#if answers.instrument_defraction}}
        <p><strong>Instrument:</strong> {{ answers.instrument_defraction }}
        <p><strong>Crystal symmetry:</strong> {{ answers.crystal_symmetry }}
        <p><strong>Crystal cell dimensions:</strong>
        <p>a: {{ answers.Cell_Parameter_A.value }}, b: {{ answers.Cell_Parameter_B.value }}, c: {{ answers.Cell_Parameter_C.value }}
        <p>alpha: {{ answers.Cell_Parameter_Alpha.value }}, beta: {{ answers.Cell_Parameter_Beta.value }}, gamma: {{ answers.Cell_Parameter_Gamma_.value }}
        <p>volume: {{ answers.Cell_Parameter_Volume.value }}
      {{/if}}

      {{#if answers.instrument_reflectometry}}
        <p><strong>Instrument:</strong> {{ answers.instrument_reflectometry }}
        <p><strong>Type:</strong> {{ answers.reflectometry_exp_type_mc }}
        <p><strong>Sample surface area:</strong> {{ answers.reflectometry_sample_surface_area_text }}
        <p><strong>Substrate thickness:</strong> {{ answers.reflectometry_substrate_thickness_area_text }}
        <p><strong>Substrate material:</strong> {{ answers.reflectometry_substrate_material_area_text }}
        <p><strong>Interface:</strong> {{ answers.reflectometry_interface_mc }}
        <p><strong>Simultaneous measurements:</strong> {{ answers.reflectometry_simultaneous_measurements_text }}
        <p><strong>Kinetic/off-specular measurements:</strong> {{ answers.reflectometry_measurement_text }}
      {{/if}}

      {{#if answers.instrument_excitations}}
        <p><strong>Instrument:</strong> {{ answers.instrument_excitations }}
        <p><strong>Sample type:</strong> {{ answers.excitations_crystal_powder_mc }}
        <p><strong>Crystal details:</strong> {{ answers.excitations_crystal_details_text }}
        <p><strong>Have all crystals required?</strong> {{ answers.excitations_sample_quantity_text }}
        <p><strong>Sample origin:</strong> {{ answers.excitations_sample_origin_text }}
      {{/if}}

      {{#if answers.instrument_imaging}}
        <p><strong>Instrument:</strong> {{ answers.instrument_imaging }}
        <p><strong>Resolution:</strong> {{ answers.imaging_resolution_text }}
      {{/if}}

      <p><strong>Deuteration lab?</strong> {{ answers.isis_deuteration_use }}
    </section>
    <section>
      <h2>Samples</h2>
      <table>
        <tr>
          <td><strong>Details</strong></td>
          {{#each answers.sample_declaration}}
            <td>{{ generic_template_basis }}</td>
          {{/each}}
        </tr>
        <tr>
          <td><strong>Formula</strong></td>
          {{#each answers.sample_declaration}}
            <td>{{ chemical_formula }}</td>
          {{/each}}
        </tr>
        <tr>
          <td><strong>Properties</strong></td>
          {{#each answers.sample_declaration}}
            <td>{{ sample_properties }}</td>
          {{/each}}
        </tr>
        <tr>
          <td><strong>Type</strong></td>
          {{#each answers.sample_declaration}}
            <td>{{ sample_type }}</td>
          {{/each}}
        </tr>
        <tr>
          <td><strong>Container</strong></td>
          {{#each answers.sample_declaration}}
            <td>{{ sample_container }}</td>
          {{/each}}
        </tr>
        <tr>
          <td><strong>ISIS kit</strong></td>
          {{#each answers.sample_declaration}}
            <td>{{ isis_equipment_details }}</td>
          {{/each}}
        </tr>
        <tr>
          <td><strong>User kit</strong></td>
          {{#each answers.sample_declaration}}
            <td>{{ user_equipment }}</td>
          {{/each}}
        </tr>
        <tr>
          <td><strong>Beamtime</strong></td>
          {{#each answers.sample_declaration}}
            <td>{{ technique_beamtime.value }}</td>
          {{/each}}
        </tr>
        <tr>
          <td><strong>Availability</strong></td>
          {{#each answers.sample_declaration}}
            <td>{{ sample_availability }}</td>
          {{/each}}
        </tr>
        <tr>
          <td><strong>Other info</strong></td>
          {{#each answers.sample_declaration}}
            <td>{{ other_sample_details }}</td>
          {{/each}}
        </tr>
      </table>
    </section>
    <section>
      <h2>Sample environment</h2>
      <p><strong>Temperature:</strong> {{ answers.temperature_range.min }} to {{ answers.temperature_range.max }} {{ answers.temperature_range.unit.symbol }}
      <p><strong>Pressure:</strong> {{ answers.pressure_range.min }} to {{ answers.pressure_range.max }} {{ answers.pressure_range.unit.symbol }}
      <p><strong>Magnetic:</strong> {{ answers.magnetic_field.min }} to {{ answers.magnetic_field.max }} {{ answers.magnetic_field.unit.symbol }}
      <p><strong>Other:</strong> {{ answers.other_experiment_parameters }}
    </section>
    <section>
      <h2>Hazards</h2>
      <p>Only hazards the user has selected appear here.
      {{#if answers.radioactive_hazards_text}}
        <p><strong>Radioactive:</strong> {{ answers.radioactive_hazards_text }}
      {{/if}}
      {{#if answers.nuclear_materials_sample_text}}
        <p><strong>Nuclear materials:</strong> {{ answers.nuclear_materials_sample_text }}
      {{/if}}
      {{#if answers.biological_hazards_text}}
        <p><strong>Biological:</strong> {{ answers.biological_hazards_text }}
      {{/if}}
      {{#if answers.air_sensitive_sample_text}}
        <p><strong>Air sensitive:</strong> {{ answers.air_sensitive_sample_text }}
      {{/if}}
      {{#if answers.water_sensitive_samples_text}}
        <p><strong>Water sensitive:</strong>  {{ answers.water_sensitive_samples_text }}
      {{/if}}
    </section>
  </div>
</div>
yoganandaness commented 11 months ago

@simonfernandes This can be fixed with the help of the CSS. You can increase the Page Margin top and the overlapping could be avoided. Check this out

https://www.diffchecker.com/0ERQkP8k/

yoganandaness commented 11 months ago

@simonfernandes I have also found a deprecated css property in your code: page-break-after.

page-break-after is deprecated and replaced with break-after. Kindly checkout the documentation. https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after

simonfernandes commented 11 months ago

Thanks very much @yoganandaness

@Cat-Lucifer I've increased the margin at the top from 2cm to 2.3cm - is this acceptable? Examples below (or I've applied it to the ISIS Direct PDF template if you want to check on the site)

image image

Cat-Lucifer commented 11 months ago

@simonfernandes Thanks for this. This looks fine. If there are any issues resulting from the upcoming ISIS call I'll let you know and we can open a new issue.

simonfernandes commented 11 months ago

I've adjusted the other HPL, LSF and Rapid templates too so I'll close this off for now then