HTML/CSS/JS for results from a search
Budget: $30 – $250 USD
I need HTML/CSS/JS for results from a search.
Data source
The data for a row is a JS Object with the following fields:
site: e.g. "cnn.com"
user_name: e.g. John Johnson
img: URL of the user's image
description: text of the user's profile
Format
Each row contains a single search result profile.
Each result row has a fixed width:
- 75% on a cellphone/tablet
- 60% on laptop/desktop
Each row's height will be 100px + padding-top 2px
Row contents
The row will have:an image on the left of size 150px x 150px (img field)
- clicking on the image will open the original image in a modal div of max size 80% height or 80% width (ratio preserved),
The text on the right of the image will have:
- a highlighted title (user_name field)
- muted text (description field). If the length of the text will grow the height of the row. it is truncated with ellipsis in the row
- if the text is clicked, a modal div opens containing the full text of the description field as a block of <pre>...</pre> test, closed by clicking the expanded image, or escape key, or an 'X' on the upper right corner.
Modals
Modals will be closed by clicking outside the modal, an 'X' on the upper right corner of the modal, or escape key (laptop/desktop).
All styling must use Bootstrap 4+, with any additional CSS as required. Any Javascript created must be unobfuscated and non-minimised.
Data source
The data for a row is a JS Object with the following fields:
site: e.g. "cnn.com"
user_name: e.g. John Johnson
img: URL of the user's image
description: text of the user's profile
Format
Each row contains a single search result profile.
Each result row has a fixed width:
- 75% on a cellphone/tablet
- 60% on laptop/desktop
Each row's height will be 100px + padding-top 2px
Row contents
The row will have:an image on the left of size 150px x 150px (img field)
- clicking on the image will open the original image in a modal div of max size 80% height or 80% width (ratio preserved),
The text on the right of the image will have:
- a highlighted title (user_name field)
- muted text (description field). If the length of the text will grow the height of the row. it is truncated with ellipsis in the row
- if the text is clicked, a modal div opens containing the full text of the description field as a block of <pre>...</pre> test, closed by clicking the expanded image, or escape key, or an 'X' on the upper right corner.
Modals
Modals will be closed by clicking outside the modal, an 'X' on the upper right corner of the modal, or escape key (laptop/desktop).
All styling must use Bootstrap 4+, with any additional CSS as required. Any Javascript created must be unobfuscated and non-minimised.