revengeday/cyber-circle-creator
revengeday/cyber-circle-creator
2
1
Fork 1
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

Mobile Optimization #8

Merged
revengeday merged 8 commits from kaiserkiwi/cyber-circle-creator:mobile-optimization into main 2024-11-17 13:40:11 +00:00
Conversation 0 Commits 8 Files changed 2 +177 -179
kaiserkiwi commented 2024-11-17 07:34:06 +00:00
Collaborator
Copy link

Description

I made a few adjustments for smaller viewports. The main goal was to make the API selection usable on mobile as it wasn't readable.

Before:

Before image is not optimized for mobile

After:

After image is optimized for mobile

I cleaned up the code a bit while doing this and reduced code duplication. I also introduced spacing variables that are aware of the viewport width for dynamic spacing.

How to test

Everything should look pretty much the same expect a few spacing differences as I'm using a 8px pattern (8, 16, 24, 32) as is common these days.

The form should be a lot more different as my main focus was this section. It should be fully usable on smaller screens and look quite similar on bigger screens.

Related issues

Closes #4
Closes #5

## Description I made a few adjustments for smaller viewports. The main goal was to make the API selection usable on mobile as it wasn't readable. ### Before: <img src="/attachments/485e1826-ef6a-432f-80b0-17898fc2a6e1" alt="Before image is not optimized for mobile" width="300"/> ### After: <img src="/attachments/3e138156-2041-4ee4-b4dc-78b6b2c1116d" alt="After image is optimized for mobile" width="300"/> I cleaned up the code a bit while doing this and reduced code duplication. I also introduced spacing variables that are aware of the viewport width for dynamic spacing. ## How to test Everything should look pretty much the same expect a few spacing differences as I'm using a 8px pattern (8, 16, 24, 32) as is common these days. The form should be a lot more different as my main focus was this section. It should be fully usable on smaller screens and look quite similar on bigger screens. ## Related issues Closes #4 Closes #5
Bildschirmfoto 2024-11-17 um 08.29.22.png
61 KiB
Bildschirmfoto 2024-11-17 um 08.29.09.png
43 KiB
🎉 1
kaiserkiwi added 5 commits 2024-11-17 07:34:07 +00:00 
- Use dynamic spacing for main element and sections
- Fix wonky padding when opening and closing faq answers
- The labels aren't cut off anymore
- Instead of trying to fit four buttons next to each other they're now one each line when not enough room is there
- Fix indentation in index.html
kaiserkiwi requested review from revengeday 2024-11-17 07:34:12 +00:00
kaiserkiwi requested review from marta 2024-11-17 07:34:12 +00:00
kaiserkiwi added 1 commit 2024-11-17 10:45:10 +00:00
revengeday approved these changes 2024-11-17 11:10:10 +00:00
Dismissed
revengeday approved these changes 2024-11-17 11:11:48 +00:00
kaiserkiwi added 2 commits 2024-11-17 13:33:25 +00:00 
Reviewed-on: kaiserkiwi/cyber-circle-creator#1
# Conflicts:
#	css/style.css
revengeday merged commit 217860f4c9 into main 2024-11-17 13:40:11 +00:00
kaiserkiwi deleted branch mobile-optimization 2024-11-20 04:16:30 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
marta
revengeday
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: revengeday/cyber-circle-creator#8
No description provided.
Delete branch "kaiserkiwi/cyber-circle-creator:mobile-optimization"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?