Responsive Design

Relevant source files

The following files were used as context for generating this wiki page:

• static/style.css
• static/index.html
• README.md
• src/main.rs
• static/script.js
• Cargo.toml

The hdrify application employs a responsive design to ensure a consistent and optimized user experience across a range of devices, from large desktop screens to mobile phones. The design is described as "Optimized for desktop and mobile" in the project's documentation. The approach is primarily implemented using CSS with a fluid layout, a single media query breakpoint, and flexible components, served by a Rust backend.

The foundation for this responsiveness is established in the main HTML file, which includes the essential viewport meta tag. This tag instructs the browser to control the page's dimensions and scaling, preventing mobile browsers from showing a zoomed-out "desktop" version of the site.

Sources: README.md:14, static/index.html:6, src/main.rs:184-186

Core Layout and Viewport

The responsive strategy begins with a solid foundation in the HTML and base CSS.

Sources: static/index.html, static/style.css

Viewport Configuration

The index.html file sets the viewport to match the device's width, with an initial scale of 1.0. This is a critical first step for any responsive design.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Sources: static/index.html:6

Fluid Container

A central .container class is used to wrap the main content. It has a max-width of 600px and is centered using margin: 0 auto. This creates a comfortable reading width on large screens while allowing the layout to shrink fluidly on smaller screens until the mobile breakpoint is reached. The use of box-sizing: border-box for all elements ensures a more predictable box model where padding and borders do not affect the element's specified width.

Sources: static/style.css:1-5, static/style.css:18-21, static/index.html:10

Mobile Breakpoint (max-width: 640px)

The core of the responsive adaptation is a single media query in style.css that triggers for screen widths of 640px or less. This breakpoint adjusts several key layout and UI elements to better suit smaller screens.

Sources: static/style.css:295-339

The following diagram illustrates how the CSS applies different styles based on the viewport width.

This diagram shows the conditional styling logic based on the 640px breakpoint defined in static/style.css.

Style Adjustments Summary

When the viewport is 640px or narrower, the following style overrides are applied:

Element/Class	Property	Default Value	Mobile Value (<= 640px)
body	padding	2rem	1rem
h1	font-size	2.5rem	2rem
.controls	flex-direction	row (implicit)	column
.controls	gap	2rem	1rem
.upload	padding	4rem 2rem	3rem 1.5rem
#hdrSlider	width	200px	160px
.spinner	width, height	48px	28px
.spinner	border-width	4px	2px
.examples	padding	2rem	1.5rem
.example-grid	grid-template-columns	1fr 1fr	1fr
.example-item img	max-width	200px	150px

Sources: static/style.css:295-339

Code Example: Media Query

The following CSS block contains all the responsive overrides for small screens.

@media (max-width: 640px) {
  body {
    padding: 1rem;
  }

  h1 {
    font-size: 2rem;
    margin-bottom: 2rem;
  }

  .controls {
    flex-direction: column;
    gap: 1rem;
    padding: 0.5rem;
  }

  .upload {
    padding: 3rem 1.5rem;
  }

  #hdrSlider {
    width: 160px;
  }

  .spinner {
    width: 28px;
    height: 28px;
    border-width: 2px;
  }

  .examples {
    margin: 2rem 0;
    padding: 1.5rem;
  }

  .example-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .example-item img {
    max-width: 150px;
  }

  .examples h2 {
    font-size: 1.25rem;
  }
}

Sources: static/style.css:295-339

Fluid and Flexible Components

In addition to the main breakpoint, several components are designed to be inherently fluid, adapting to screen sizes between the max-width of the container and the mobile breakpoint.

• Image Display: The processed image (#resultImage) uses width: 100% and height: auto, allowing it to scale down proportionally with its parent container.
  Sources: static/style.css:100-101
• Controls Section: The .controls container uses flex-wrap: wrap. On screen sizes that are too narrow to fit all controls in a single row but wider than the 640px breakpoint, the flex items (slider, buttons) will wrap onto the next line.
  Sources: static/style.css:140-142
• JavaScript Interaction: The application's JavaScript dynamically shows and hides elements like the controls and image display. For example, it sets controls.style.display = 'flex'. The responsive behavior (flex-direction: column on mobile) is handled entirely by the CSS, demonstrating a clean separation of concerns.
  Sources: static/script.js:201, static/style.css:137, static/style.css:307

Conclusion

The responsive design of hdrify is achieved through a straightforward and effective strategy. It combines a fluid container, percentage-based widths, and a single, well-defined media query breakpoint at 640px. This approach ensures that the application is fully functional and visually appealing on both large desktop monitors and small mobile devices, fulfilling the project's goal of being "Optimized for desktop and mobile".

Sources: README.md:14, static/style.css