https://github.com/sinedied/surface-duo-photo-gallery
This repo is an Angular re-implementation of the Surface Duo Photo Gallery sample
https://github.com/sinedied/surface-duo-photo-gallery
Last synced: 9 months ago
JSON representation
This repo is an Angular re-implementation of the Surface Duo Photo Gallery sample
- Host: GitHub
- URL: https://github.com/sinedied/surface-duo-photo-gallery
- Owner: sinedied
- Created: 2021-03-12T09:41:04.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-11-29T16:20:24.000Z (about 3 years ago)
- Last Synced: 2025-02-14T10:54:24.530Z (10 months ago)
- Language: TypeScript
- Homepage: https://sinedied.github.io/surface-duo-photo-gallery/
- Size: 99.4 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Surface Duo Photo Gallery
> This repo is an Angular re-implementation of the [Surface Duo Photo Gallery sample](https://github.com/foldable-devices/demos/tree/master/photo-gallery)
## About this sample
The [`css` branch](https://github.com/sinedied/surface-duo-photo-gallery/tree/css) contains an implementation that uses CSS to hide and show the various components, depending on the foldable state of the application, in the same way that the reference sample works.
The `main` branch however uses the npm package [ngx-foldable](https://www.npmjs.com/package/ngx-foldable) that provides directives to adapt the design to foldable devices with minimal changes.
You can view the demo [here](https://sinedied.github.io/surface-duo-photo-gallery/).
Read more about how this sample works on the [Surface Duo blog](https://devblogs.microsoft.com/surface-duo/dual-screen-web-angular/?WT.mc_id=javascript-9776-yolasors).
## How to use this sample
First clone the repo on your machine, then run `npm install` to install packages.
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.