From a0190e76f6a24eb3332f8fcbba45b3712680e361 Mon Sep 17 00:00:00 2001 From: Mike Vink Date: Fri, 18 Jun 2021 13:57:55 +0200 Subject: readmeUpdate(section responsive design) --- readme.md | 13 +++++++++++++ readmeMedia/orderingFromMap.gif | 0 readmeMedia/responsiveDesign.gif | Bin 0 -> 4233249 bytes 3 files changed, 13 insertions(+) create mode 100644 readmeMedia/orderingFromMap.gif create mode 100644 readmeMedia/responsiveDesign.gif diff --git a/readme.md b/readme.md index 28bc85b..7377f50 100644 --- a/readme.md +++ b/readme.md @@ -8,3 +8,16 @@ database to be displayed in the dom. When the user tries to input a number of ti When a valid order is placed, it is stored in the shoppingbasket or an array in the localStorage. This array of orders is displayed when the user visits the shoppingbasket page, where the user can also dynamically remove an order before paying. In this prototype the actual payment is not implemented, we assume a valid payment and the order is stored in the database. Orders in the database are displayed when visiting the my orders page. ![localStorage order](readmeMedia/localStorage.gif) + +## Responsive design using CSS mediaquery breakpoints + +Depending on the size of the screen of your device, if there are articles on the screen, the styling will try to display a proper number of columns of articles/attraction on the screen. The use of flexboxes was also necessary for menu boxes. + +![responsive design](readmeMedia/responsiveDesign.gif) + +## Ordering tickets from a map + +There is also a map that uses GPS-coordinates of attractions in the database to display a marker that can be clicked to order tickets for the attraction in the same way as normal. + +![ordering from the map](readmeMedia/orderingFromMap.gif) + diff --git a/readmeMedia/orderingFromMap.gif b/readmeMedia/orderingFromMap.gif new file mode 100644 index 0000000..e69de29 diff --git a/readmeMedia/responsiveDesign.gif b/readmeMedia/responsiveDesign.gif new file mode 100644 index 0000000..2198cb7 Binary files /dev/null and b/readmeMedia/responsiveDesign.gif differ -- cgit v1.2.3