refactor(styles): improve PWA styles on mobile devices (1) #765

kKaskak · 2024-12-21T21:11:07Z

First PR in the series of PRs adressing the big @IEduStu PR.

Reference for changes:

Fixed html height / width in PWAs
Fixed offsets and safe-areas issues
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-callout
Removed -webkit-tap-highlight-color: transparent; since it's applied on html globally in styles.less on all components
Removed used px instead using rem
Removed inline var declarations, using global vars from app.less
Removed a variable that was basically a repetition of another variable; reusing instead
Improved conditionals with useMemo
Created new variables for some of the cases

this will allow us to reuse in the app without importing globals file

touch-callout is not supported well and might cause problems, clearly written not to use in production; highlight color not needed since we use it on global html

this ensures we utilize built in less style variables at the top of the file to avoid inline variable declarations

- removed the use of px values since these might be problematic on some devices - sticking to rem as the best way of defining sizes - reusing the global variable approach according screen sizes - added spacing - improved border-radius handling

- removed use of px - creates less native variables -removed unnecessary vars

- removed use of px

- remove unused nav-bar-size declaration

- var(--selectable-inputs-assumed-height) removed in favor of reusing var(--top-overlay-size) - fixed the bottom overlay size

- use useMemo for the bg render check

- use rem instead of px - make the bottom-overlay-size adjustments

- .search-container

This reverts commit dc00a9f.

IEduStu and others added 23 commits December 21, 2024 15:21

feat: improve mobile design

e03aba7

refactor(styles): app styles.less

ec570b9

add: calculated-bottom-safe-inset

45ed525

this will allow us to reuse in the app without importing globals file

remove: webkit properties on button

055ac1d

touch-callout is not supported well and might cause problems, clearly written not to use in production; highlight color not needed since we use it on global html

refactor(MainNavbars): use less variables

4f4b46c

this ensures we utilize built in less style variables at the top of the file to avoid inline variable declarations

refactor(HorizontalNavbar): add missing space

7765792

refactor: update the copyrights (1)

39cb89b

refactor(StreamingServerWarning): styles

dd8791d

- removed the use of px values since these might be problematic on some devices - sticking to rem as the best way of defining sizes - reusing the global variable approach according screen sizes - added spacing - improved border-radius handling

refactor(Addons): styles

d7776f6

- removed use of px - creates less native variables -removed unnecessary vars

refactor(Board): styles

896950c

- removed use of px

refactor(app): add vars used across the app

3a67df5

refactor(Addons): use global vars

d7a4dea

refactor(Discover): use global vars

d29375c

refactor(Discover): remove inline var

ef153fa

refactor(MetaDetails): use rem instead

fb1a043

- remove unused nav-bar-size declaration

remove(app styles): variable which was repeated

96ceafa

- var(--selectable-inputs-assumed-height) removed in favor of reusing var(--top-overlay-size) - fixed the bottom overlay size

feat: improve mobile design

9ca41aa

refactor(MetaDetails): styles + performance

a8609da

- use useMemo for the bg render check

fix(app): styles for the bottom-overlay-size

72d9a6b

- use rem instead of px - make the bottom-overlay-size adjustments

refactor(app toasts): styles

9c2b9da

remove(SearchBar): remove fixed width

561896b

- .search-container

refactor(app styles): env vars changes

dab4205

refactor(copyright): update copyright info

3d29fef

kKaskak added the refactor refactor of existing code, code removal, etc label Dec 21, 2024

kKaskak requested a review from tymmesyde December 21, 2024 21:11

kKaskak self-assigned this Dec 21, 2024

kKaskak changed the title ~~refactor(styles): improve PWA styles on mobile devices~~ refactor(styles): improve PWA styles on mobile devices (1) Dec 21, 2024

kKaskak added 3 commits December 21, 2024 23:14

refactor(MetaDetails): use rem instead of px

c49ae8d

refactor(HorizontalNavbar): use rem & use vars

7c23ab5

refactor(Library): use rem instead of px

fbebd9b

kKaskak added 7 commits December 23, 2024 20:59

fix(Discover): mask was flickering

ec720dc

remove: masks in the routes

b15b7bb

refactor(masks): remove masks paddings

ed56e83

Merge branch 'development' into refactor/overall-app-styles

ad5d9e4

Merge branch 'development' into refactor/overall-app-styles

b12e44c

fix(content): Content height was too big

97ed4b5

revert(MetaDetails): renderbg logic

dc00a9f

tymmesyde requested a review from TRtomasz December 26, 2024 14:33

kKaskak added 2 commits December 26, 2024 16:38

Revert "revert(MetaDetails): renderbg logic"

fc95a89

This reverts commit dc00a9f.

refactor: remove err state to make fallback render

049535e

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(styles): improve PWA styles on mobile devices (1) #765

refactor(styles): improve PWA styles on mobile devices (1) #765

kKaskak commented Dec 21, 2024 •

edited

Loading

refactor(styles): improve PWA styles on mobile devices (1) #765

Are you sure you want to change the base?

refactor(styles): improve PWA styles on mobile devices (1) #765

Conversation

kKaskak commented Dec 21, 2024 • edited Loading

First PR in the series of PRs adressing the big @IEduStu PR.

kKaskak commented Dec 21, 2024 •

edited

Loading