In Progress

Print-Friendly Button on React Page

We have a page in a React Web App ([login to view URL]) that shows (for a user-selected neighborhood and season) a schedule of services offered shown by category ("service type"). We need you to add a print-friendly version that can be generated with a button. The list of services types is shown as headers, with separate lines for each service. The lines for the services show the service time followed by location. (Everything is written in Hebrew, which is a right-to-left language. Therefore, the time appears to the right of the location name.) The page also shows a map of the neighborhood, and a few ([login to view URL] shows the times for a particular neighborhood and season.

The goal is to produce a "Print-Friendly Version" button on the page that:

(1) opens a new tab and

(2) that tab contains a pdf version of the data page that is one A4 page exactly in size.

The model is the hand-generated pdf "Luach Beitar Winter 18 10" uploaded here. It doesn't have to look exactly the same, but the basic structure is the same.

The desired format is as follows, following the structure of the uploaded pdf:

(a) A simple header (containing a static text in the right corner and the date in the left corner. could be displayed in 18-11-2018 format. NOTE: the date in the uploaded model is the Hebrew date, which you are *not* expected to create.)

(b) A very simple footer (a centered static string)

(c) The same title as is dynamically generated on the current live page e.g. [login to view URL] Note that the sample title in the pdf is shown highlighted in yellow.

(d) A map as on the current live page (the map is an image file.) The image should be centered and should be scaled if necessary to fit into a size (say vertically at most 17 centimeters)

(e) 3 columns showing the same data as the current live page, where you have a header for each "service type" and a row for each service. Note that in the uploaded sample pdf the titles have a green highlighting. The row consists of a time and a location name. (Note that the time appears as black in the the sample pdf, whereas the names of the locations are shown in the colors that they have on the map. You are *not* expected to create different colors for each location.)

(f) The font used in the sample is Calibri. You are not limited to Calibri, as long as the font that you choose looks good in Hebrew and prints well. IMPORTANT: The font for the 3 columns must be reduced as necessary to fit on an A4 page!!

(g) We should ideally add the logo somewhere on the page, which does not occur in the sample pdf.

(h) The location and size for the logo, as well as for the map, is negotiable. An outstanding solution would modify the size of the map as necessary if need be to make more room for the service times, but that level of quality is not required unless you say that you can do it!

Added details:
For (e) the ideal solution would have constants: MIN_FONT_SIZE, MAX_FONT_SIZE, MIN_IMAGE_HEIGHT, MAX_IMAGE_HEIGHT. The algorithm to handle sizing would be as follows:
- if MAX_IMAGE_HEIGHT and text with MAX_FONT_SIZE fits the page size, use those.
-if not, then minimize the font size as needed to fit the page size until MIN_FONT_SIZE.
-if even with MIN_FONT_SIZE the page doesn't fit, then scale the image down until the height is MIN_IMAGE_HEIGHT.
-if even MIN_FONT_SIZE and MIN_IMAGE_HEIGHT are too much, then add further pages as needed using MIN_FONT_SIZE. Header, footer and borders should remain unchanged.
(b) and (g): the logo can go to the right of the centered text in the footer. Centered text can be: "www.zmanenu.com 0548412410"
(f) unless your have great skill in graphical design, use the Calibri font
(a) header on top right corner should contain the following Hebrew text:
בס"ד

Skills: CSS, HTML, Javascript ES6, Website Design

See more: print friendly asp css javascript, vbnet click submit button webbrowser page code, click button browse page, react print button, react + print css, react print component example, react-easy-print, reactjs print, react-print github, react print pdf, npm react print, use vba click button web page, print label web user page, print friendly version php, use code click button web page, print friendly button, click browse button web page vba, paypal button aspx page, aspnet print friendly pages, add virtuemart add cart button static page

About the Employer:
( 1 review ) Beitar, Israel

Project ID: #18203726

Awarded to:

hardcode4u

Hello, Hope you are doing well. My name is Ishant and I am an expert PHP & JS developer having experience of 9 years. I can do any type of development & customization work in React.js, Node.js, RoR, Laravel and P More

$200 USD in 7 days
(124 Reviews)
7.6

8 freelancers are bidding on average $170 for this job

abstractsoftweb

[login to view URL] [login to view URL] [login to view URL] [login to view URL] [login to view URL] [login to view URL] http://www.myfcpower.com./ [login to view URL] More

$105 USD in 3 days
(91 Reviews)
6.9
visionvivante

Hi, Yes, I have extensive experience in React.js as you have mentioned you need a print-friendly button on react page. I have gone through your document and it is the Hebrew language I guess so I can't understand an More

$248 USD in 3 days
(45 Reviews)
6.8
abhi98041

I am a React expert with over 7 years of experience in this field. I can start immediately and can complete it. Please check my reviews to see the quality of work i provide.

$250 USD in 3 days
(98 Reviews)
5.8
domaxy111

Dear Employer, We are ready to start your work right now. Me and my team is ready to complete your work with a quality work. I am capable to do this project. we have 6+ year experience in IT Industry. We have alread More

$220 USD in 22 days
(4 Reviews)
3.1
ArtemGB

And...NOW...This is the main event of the evening! Three branding packages for your business! Introducing first: 1. Ambitious startup (150 USD; TODAY 75 USD) Includes: * Logo (2 concepts) * Corporate colors More

$45 USD in 7 days
(2 Reviews)
2.7
waseemsaleemg

Hi Dear, Our best concern is to follow your requirement and deadline and we will do our best for the success of your project. Feel free to send message to discuss your project with us. Thank you very much! Surely, we More

$133 USD in 3 days
(2 Reviews)
2.4
$155 USD in 3 days
(2 Reviews)
1.6