Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

40 use css variables for general design #86

Closed
wants to merge 83 commits into from

Conversation

BaBrixx
Copy link
Contributor

@BaBrixx BaBrixx commented Oct 26, 2023

About

This pull request contains the initial implementation of the dynamic loading of CSS colors (And other CSS properties) and is the foundation for one of the features requested by the PO.

The specific feature is the one in-which users should be able to change the color-scheme by themselves.

Features implemented:

  • Zod schemes representing the structure of the different media queries and their associated css properties, defined in the GlobalCSSProperties.JSON file .
  • Media Queries Loader that loads the correct CSS properties from the JSON file based on which media queries matches the browsers. This includes eventlisteners so that the colorscheme automatically changes (ex. changing from light to dark mode).
  • Dark and light mode CSS properties for the existing GUI elements in the main branch
  • Minor changes to the console implementation that removes the need for a hard coded estimated height of the console bar. The reason for this is that the estimated height was wrong in macOS.

Link to MDN docs for mediaQuery selector

BaBrixx and others added 21 commits October 23, 2023 14:35
commit a48c0a7
Author: Anton <[email protected]>
Date:   Fri Oct 20 11:29:34 2023 +0200

    Update dependencies

    To fix a dependency mismatch

commit f417b36
Author: tr0ub1eM4k3r <[email protected]>
Date:   Thu Oct 19 15:07:29 2023 +0200

    Console (#45)

    * Changed SvelteKit version, trying to fix dependacy error

    * Added button for expanding footer

    * Made button for collapsing/expanding console

    Co-authored-by: tr0ub1eM4k3r <[email protected]>

    * Made basic console functionality, including:
    Collapsible console,
    Multiple tabs which you can switch between,
    Line component for messages and errors

    Co-authored-by: SolarEarth37 <[email protected]>

    * Added simple css for tab buttons

    Co-authored-by: SolarEarth37 <[email protected]>

    * Made console collapse button larger
    Small inconsistencies fixed

    Co-authored-by: SolarEarth37 <[email protected]>

    * Changed ordering of functions and variables
    Combined two functions into a general one

    * FIxed weird formatting

    * Added functionality
    for sending errors to the console

    * Removed useless line of code

    * Made console more independent,
    and changed removed magic numbers

    * Removed console logs

    * Ran yarn format

    * Fixed issue where you could select the arrow

    * Formatting

    * Fixed issue where not all elements could be seen
    when resizing
    Fixed issue with topbar resizing when other elements on page changes

    * Formatting

    * consoleTab button now changes color on select

    * Added text wrapping in console

    Co-authored-by: SolarEarth37 <[email protected]>

    * Added a max height for the console

    * Made console resizeable

    Co-authored-by: SolarEarth37 <[email protected]>

    * Fixed console drag issue
    Now body is grid instead of flexbox

    Co-authored-by: tr0ub1eM4k3r <[email protected]>

    * Flex Solution

    Suggested flexbox solution

    * Made Arrow svg for collapse button

    * Used lint, and removed unused variables

    * Converted collapse-button image to standard
    Changed dimensions to match new image
    Removed "symbols" folder

    * Cleaned up, ready for check

    ---------

    Co-authored-by: SolarEarth37 <[email protected]>
    Co-authored-by: tr0ub1eM4k3r <[email protected]>
    Co-authored-by: SolarEarth37 <[email protected]>
    Co-authored-by: Skrome <[email protected]>
Co-authored-by: Arnar Freyr <[email protected]>
Co-authored-by: Albert Hald <[email protected]>
@BaBrixx BaBrixx added the enhancement New feature or request label Oct 26, 2023
@BaBrixx BaBrixx self-assigned this Oct 26, 2023
@BaBrixx BaBrixx linked an issue Oct 26, 2023 that may be closed by this pull request
@netlify
Copy link

netlify bot commented Oct 26, 2023

Deploy Preview for ecdar ready!

Name Link
🔨 Latest commit 4fec073
🔍 Latest deploy log https://app.netlify.com/sites/ecdar/deploys/653a47292818e90008dc7d43
😎 Deploy Preview https://deploy-preview-86--ecdar.netlify.app/
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@BaBrixx BaBrixx closed this Oct 26, 2023
@BaBrixx
Copy link
Contributor Author

BaBrixx commented Oct 26, 2023

Closed as the merge commit made horrible changes to the commit history - R.I.P

@BaBrixx BaBrixx deleted the 40-use-css-variables-for-general-design branch October 26, 2023 11:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants