Gitmoji: ✨ Make a cheatsheet style list

[szepeviktor]

It would be nice to have a visually smaller list on the website.

| Emoji | Code | Commit type |
| ----- | ---- | ----------- |
| :art: | :art: | Improving structure / format of the code. |
| :zap: | :zap: | Improving performance. |
| :fire: | :fire: | Removing code or files. |
| :bug: | :bug: | Fixing a bug. |
| :ambulance: | :ambulance: | Critical hotfix. |
| :sparkles: | :sparkles: | Introducing new features. |
| :pencil: | :pencil: | Writing docs. |
| :rocket: | :rocket: | Deploying stuff. |
| :lipstick: | :lipstick: | Updating the UI and style files. |
| :tada: | :tada: | Initial commit. |
| :white_check_mark: | :white_check_mark: | Updating tests. |
| :lock: | :lock: | Fixing security issues. |
| :apple: | :apple: | Fixing something on macOS. |
| :penguin: | :penguin: | Fixing something on Linux. |
| :checkered_flag: | :checkered_flag: | Fixing something on Windows. |
| :robot: | :robot: | Fixing something on Android. |
| :green_apple: | :green_apple: | Fixing something on iOS. |
| :bookmark: | :bookmark: | Releasing / Version tags. |
| :rotating_light: | :rotating_light: | Removing linter warnings. |
| :construction: | :construction: | Work in progress. |
| :green_heart: | :green_heart: | Fixing CI Build. |
| :arrow_down: | :arrow_down: | Downgrading dependencies. |
| :arrow_up: | :arrow_up: | Upgrading dependencies. |
| :pushpin: | :pushpin: | Pinning dependencies to specific versions. |
| :construction_worker: | :construction_worker: | Adding CI build system. |
| :chart_with_upwards_trend: | :chart_with_upwards_trend: | Adding analytics or tracking code. |
| :recycle: | :recycle: | Refactoring code. |
| :whale: | :whale: | Work about Docker. |
| :heavy_plus_sign: | :heavy_plus_sign: | Adding a dependency. |
| :heavy_minus_sign: | :heavy_minus_sign: | Removing a dependency. |
| :wrench: | :wrench: | Changing configuration files. |
| :globe_with_meridians: | :globe_with_meridians: | Internationalization and localization. |
| :pencil2: | :pencil2: | Fixing typos. |
| :poop: | :poop: | Writing bad code that needs to be improved. |
| :rewind: | :rewind: | Reverting changes. |
| :twisted_rightwards_arrows: | :twisted_rightwards_arrows: | Merging branches. |
| :package: | :package: | Updating compiled files or packages. |
| :alien: | :alien: | Updating code due to external API changes. |
| :truck: | :truck: | Moving or renaming files. |
| :page_facing_up: | :page_facing_up: | Adding or updating license. |
| :boom: | :boom: | Introducing breaking changes. |
| :bento: | :bento: | Adding or updating assets. |
| :ok_hand: | :ok_hand: | Updating code due to code review changes. |
| :wheelchair: | :wheelchair: | Improving accessibility. |
| :bulb: | :bulb: | Documenting source code. |
| :beers: | :beers: | Writing code drunkenly. |
| :speech_balloon: | :speech_balloon: | Updating text and literals. |
| :card_file_box: | :card_file_box: | Performing database related changes. |
| :loud_sound: | :loud_sound: | Adding logs. |
| :mute: | :mute: | Removing logs. |
| :busts_in_silhouette: | :busts_in_silhouette: | Adding contributor(s). |
| :children_crossing: | :children_crossing: | Improving user experience / usability. |
| :building_construction: | :building_construction: | Making architectural changes. |
| :iphone: | :iphone: | Working on responsive design. |
| :clown_face: | :clown_face: | Mocking things. |
| :egg: | :egg: | Adding an easter egg. |
| :see_no_evil: | :see_no_evil: | Adding or updating a .gitignore file |
| :camera_flash: | :camera_flash: | Adding or updating snapshots |
| :alembic: | :alembic: | Experimenting new things |
| :mag: | :mag: | Improving SEO |
| :wheel_of_dharma: | :wheel_of_dharma: | Work about Kubernetes |
| :label: | :label: | Adding or updating types (Flow, TypeScript) |

[szepeviktor]

wget -qO- https://github.com/carloscuesta/gitmoji/raw/master/src/data/gitmojis.json | jq -r '.gitmojis[] | "| \(.code) | `\(.code)` | \(.description) |"'

[johannchopin]

Is the website not minimal enough concerning the presentation of the gitmojis? 🤔

[vhoyer]

Well, whenever I'm looking at files in the file explorer, I tend to use details mode because I like to search for things line by line, and if they are on a grid it makes it kinda uncomfortable for me :sweat_smile: so I see the point.

It's not a matter of minimalism, it's a matter of scanning, I think :thinking:... @szepeviktor, could you comment on the reasoning behind this request?

[szepeviktor]

The website is 6 pages in my 1200×1200 browser window.
I'd like to see all gitmojis on the screen at the same time.
Like a cheatsheet.

[johannchopin]

Ok I see, maybe just a toggle Button for 'grid' or 'raw' mode will do the job 🤔

[vhoyer]

@johannchopin, wanna have a project to organize this tasks?

[johannchopin]

@vhoyer Never use before but yeah looks amazing 👍

[johannchopin]

What do you think about this type of layout? 🤔

[vhoyer]

What do you think about this type of layout?

I think the table is super cute and I like it, but this does not takes the advantage of the wide screen OP mentioned, maybe we could add a media query to separate the "table" in two columns :D, what d'you think?

[johannchopin]

@vhoyer Yes great idea I opened a WIP PR #453 for this layout 👍