chore: remove unused files and references (#6562)
This commit is contained in:
@@ -1,38 +0,0 @@
|
||||
# create-svelte
|
||||
|
||||
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
|
||||
|
||||
## Creating a project
|
||||
|
||||
If you're seeing this, you've probably already done this step. Congrats!
|
||||
|
||||
```bash
|
||||
# create a new project in the current directory
|
||||
npm init svelte
|
||||
|
||||
# create a new project in my-app
|
||||
npm init svelte my-app
|
||||
```
|
||||
|
||||
## Developing
|
||||
|
||||
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
|
||||
# or start the server and open the app in a new browser tab
|
||||
npm run dev -- --open
|
||||
```
|
||||
|
||||
## Building
|
||||
|
||||
To create a production version of your app:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
You can preview the production build with `npm run preview`.
|
||||
|
||||
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
|
||||
@@ -1,3 +0,0 @@
|
||||
module.exports = {
|
||||
browser: false,
|
||||
};
|
||||
@@ -1,3 +0,0 @@
|
||||
module.exports = {
|
||||
env: {},
|
||||
};
|
||||
@@ -1,48 +0,0 @@
|
||||
# How to scroll like Google Photos
|
||||
|
||||
## Glossary
|
||||
|
||||
1. Section: a group of photos within a month
|
||||
2. Segment: a group of photos within a day
|
||||
|
||||
## Assumption
|
||||
|
||||
* The photo's thumbnail is a square box with the size of 235px
|
||||
|
||||
## Order of Implementation
|
||||
|
||||
### Custom scrollbar
|
||||
|
||||
* We need the custom scroll bar which represents the entire viewport.
|
||||
* The viewport can be estimated by the total number of the photos and the width of the occupied photo's grid
|
||||
|
||||
```typescript
|
||||
const thumbnailHeight = 235;
|
||||
|
||||
const unwrappedWidth = (3 / 2) * totalPhotoCount * thumbnailHeight * (7 / 10);
|
||||
const rows = Math.ceil(unwrappedWidth / viewportWidth);
|
||||
|
||||
const scrollbarHeight = rows * thumbnailHeight;
|
||||
```
|
||||
|
||||
* Next, we will need to know when we click on a random position on the scroll bar, which section will fit into the page. Thus, we will need to know the section height as well.
|
||||
* The section height can be calculated by the method above by putting `totalPhotoCount` as the count of the total photos within a month. We can use the following data structure to represent a list of section.
|
||||
|
||||
```json
|
||||
{
|
||||
[
|
||||
{
|
||||
"section": "2022_08",
|
||||
"count": 100,
|
||||
"viewportHeight": 4000
|
||||
},
|
||||
{
|
||||
"section": "2022_07",
|
||||
"count": 50,
|
||||
"viewportHeight": 2000
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
* With the known viewport height of each section and the total viewport height, we can build out the custom scrollbar with information of each section layout relatively and interactively on the scrollbar by using the percentages height.
|
||||
Reference in New Issue
Block a user