Skip to content
This repository has been archived by the owner on Sep 20, 2023. It is now read-only.

[Feature] Add Base Components #260

Open
2 of 15 tasks
Webkinger opened this issue Jun 7, 2021 · 10 comments · Fixed by #275 · May be fixed by #346
Open
2 of 15 tasks

[Feature] Add Base Components #260

Webkinger opened this issue Jun 7, 2021 · 10 comments · Fixed by #275 · May be fixed by #346
Labels
enhancement New feature or request
Milestone
Alpha v1.0.0

Comments

@Webkinger
Copy link
Member

Webkinger commented Jun 7, 2021 •
edited by TheBlckbird
Loading

Description

Add the base components to Cryptic.

Custom controls are to be developed for the game, so that the user interface can be adapted to a custom design. Another advantage is the possibility to create different themes and styles later.

For questions about the design please contact Philipp or Nibiru by Cryptic-Discord
For questions about the frontend development please contact @MaxiHuHe04

Additional context

All designs for the base components: In picture format
All base components in one overview: Live view

Icons for sidebar and inputs: Tabler Icons | Tabler icon npm

Typeface

Font 1: Jost
Font 2: Nothing You Could Do
Font size: 20px

General information

Small border radius: 8px (Button, Input etc.)
Big border radius: 16px (Pop-Up, Kacheln etc.)

Colors

Primary (Main Color)

Color HEX Description
2ECC70 #2ECC70 Default
1F8C4C #1F8C4C Hover
2E473E #2E473E Disabled

Success

Color HEX Description
3ABB18 #3ABB18 Default
277A10 #277A10 Hover
2F5629 #2F5629 Disabled

Warning

Color HEX Description
F1C30E #F1C30E Default
B3910B #B3910B Hover
675926 #675926 Disabled

Danger / Error

Color HEX Description
F00040 #F00040 Default
B0002F #B0002F Hover
671E3 #671E35 Disabled

Info

Color HEX Description
3281F6 #3281F6 Default
245EB5 #245EB5 Hover
2D456C #2D456C Disabled

Background / Font / Other

Color HEX Description
748781 #748781 Checkbox, radio, switch and light font disabled
222D2D #222D2D Button font dark disabled
25252B #25252B Input background disabled
2B2B31 #2B2B31 Background sidebar submenu
2F2F36 #2F2F36 Background
1A1C23 #1A1C23 Font dark
1D1D24 #1D1D24 Background inputs
Popup background dark
1E1E24 #1E1E24 Background sidebar
434349 #434349 Font placeholder disabled
888888 #888888 Placholder
Button font disabled
BEBEBE #BEBEBE Font grey
FFFFFF #FFFFFF Font light
Popup background light

Base components

Please check off finished control

Base Components
@Webkinger Webkinger added the enhancement New feature or request label Jun 7, 2021
@Webkinger Webkinger changed the title Add Base Componets Style Add Base Componets for Control Center Jun 7, 2021
@MarcelCoding
Copy link
Member

MarcelCoding commented Jun 7, 2021 •
edited by unfurl-links bot
Loading

For the font you could use this: https://www.npmjs.com/package/@fontsource/jost. With that we don't have to serve the font via Google Fonts or do manually update.

npm
Self-host the Jost font in a neatly bundled NPM package.

@Webkinger Webkinger changed the title Add Base Componets for Control Center Add Base Componets Style Jun 7, 2021
@DevMimas DevMimas changed the title Add Base Componets Style Add Base Components with Style Jun 8, 2021
@DevMimas DevMimas added this to the v0.3.0-pre-alpha milestone Jun 11, 2021
@Webkinger
Copy link
Member Author

Webkinger commented Jun 28, 2021 •
edited
Loading

Tabler icons on npm https://www.npmjs.com/package/angular-tabler-icons

Now Tabler icons for Angular available!!!

This was referenced Sep 12, 2021
Merged
Closed
@Akida31
Copy link
Contributor

Akida31 commented Sep 13, 2021

implemented first version of radio button here: Akida31/cryptic-frontend@8078007

@ClientCrash
Copy link
Member

As suggested in discord i would split this issue into multiple issues (Buttons, Radiobuttons, ...) and create a milestone to track the progress. Its to big to implement all at once.

@ClientCrash ClientCrash mentioned this issue Sep 18, 2021
Merged
3 tasks
@ClientCrash
Copy link
Member

Since not all contributers can check the checkboxes, please convert each box to an issue linked to that box. (The little button on the right)

This was referenced Sep 18, 2021
Open
Open
Open
Open
Closed
Open
Open
Open
Open
Open
Open
Closed
@MarcelCoding
Copy link
Member

@ClientCrash should I assign you to one?

@MarcelCoding MarcelCoding linked a pull request Sep 18, 2021 that will close this issue
Added Button Base Component #275
Merged
3 tasks
@Akida31
Copy link
Contributor

Akida31 commented Sep 27, 2021

@EggerWebdesign could we move the label for the buttons to the right side of the buttons? Currently if the labels would have different sizes the buttons wouldn’t be aligned nicely

@DevMimas
Copy link
Contributor

Where is the problem to align the font in cents? If the text of the button is always right-aligned, it takes up much more space.

@Webkinger Webkinger mentioned this issue Jan 20, 2022
Open
@Webkinger Webkinger mentioned this issue Jan 20, 2022
Open
@Webkinger
Copy link
Member Author

I have added the design for the submenu when no computers are available

This was referenced Mar 14, 2022
Closed
Draft
@MarcelCoding MarcelCoding changed the title Add Base Components with Style Add Base Components Mar 16, 2022
@Tristan-H11 Tristan-H11 changed the title Add Base Components [Feature] Add Base Components Mar 17, 2022
@Webkinger
Copy link
Member Author

The font size has change to 20px!

Tristan-H11 added a commit that referenced this issue Mar 22, 2022
@Tristan-H11
Added the color-variables for fonts, backgrounds and popUps. (#260)
2ccb1ff
Tristan-H11 added a commit that referenced this issue Mar 22, 2022
@Tristan-H11
Set new radius for the button. (#260)
140f93a
Tristan-H11 added a commit that referenced this issue Mar 22, 2022
@Tristan-H11
Grouped colors. (#260)
1a729fe
Tristan-H11 added a commit that referenced this issue Mar 22, 2022
@Tristan-H11
Fixed Fontsize. (#260)
7724400
Tristan-H11 added a commit that referenced this issue Mar 22, 2022
@Tristan-H11
Improved Base-Components showcase page. (#260)
07e2f63
@Tristan-H11 Tristan-H11 pinned this issue Mar 23, 2022
Tristan-H11 added a commit that referenced this issue Mar 23, 2022
@Tristan-H11
Added Jost and set default size to 20px. (#260)
e330e27
Tristan-H11 added a commit that referenced this issue Mar 23, 2022
@Tristan-H11
Replaced font-weight: bold with 500. (#260)
c620997
@TheBlckbird TheBlckbird mentioned this issue Aug 30, 2022
Merged
2 tasks
@TheBlckbird TheBlckbird mentioned this issue Sep 8, 2022
Open
This was referenced Nov 22, 2022
Closed
Open
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
Frontend
Status: ToDo - High Prio
Milestone
Alpha v1.0.0
Development

Successfully merging a pull request may close this issue.

Added Button Base Component
Base Components cryptic-game/frontend
5 participants
@Webkinger @MarcelCoding @ClientCrash @DevMimas @Akida31