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.

Sign up for GitHub

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

Jump to bottom

Overlay Component #139

Closed
wants to merge 2 commits into from
Closed

Overlay Component #139

wants to merge 2 commits into from

Conversation

CorentinGS
Copy link

Description

Added the overlay component #137

Usage

  <Overlay v-if="showOverlay">
      <p> Content </p>
  </Overlay>

Checklist:

  • I have performed a self-review of my own code
  • The map tiles are correct and haven't any artefact or missing roads, prefab or other things like this
  • I've got attached the full map (level 0) on this pull request
  • I've got attached archive for Euro truck simulator 2 and American truck simulator on this pull request

@CorentinGS CorentinGS added the type/enhancement New feature or request label Aug 22, 2022
@CorentinGS CorentinGS added this to the 2.0 milestone Aug 22, 2022
@CorentinGS CorentinGS requested a review from JAGFx August 22, 2022 12:58
JAGFx
JAGFx requested changes Aug 22, 2022
View reviewed changes
Copy link
Owner

@JAGFx JAGFx left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Est-ce que tu pourrais déplacer cela dans
src/jagfx/application/components/shared/ui

Ce dossier comporte l'ensemble des composants atomique ;)

Aussi, tant que possible, utiliser les classes bootstrap ou celle définie dans ce fichier
src/jagfx/application/style/vendors/_bootstrap.scss

src/jagfx/application/components/overlay/Overlay.vue

<script setup>
// Defines a closeOverlay event that can be emitted by the overlay component.
defineEmits(["closeOverlay"]);
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Il sera émis par le contenu dans le slot, c'est ça ?

src/jagfx/application/components/overlay/overlay.scss
width: 0;
z-index: 9999;

@supports (backdrop-filter: blur(30px)) {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Il n'est pas nécessaire de faire cette vérification.
Le mixin devrait suffire à lui-même normalement.

src/jagfx/application/components/overlay/overlay.scss

/* The Overlay (background) */
.overlay {
background: $color-black;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cette propriété ne devrait pas être nécessaire ici, car déjà incluse dans le mixin plus bas.

src/jagfx/application/components/overlay/overlay.scss
.overlay-content {
position: relative;
text-align: center; /* Centered text/links */
top: 50%; /* 50% from the top */
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Plus team display flex. Mais si ça fonctionne bien, c'est top.

@JAGFx JAGFx linked an issue Nov 4, 2022 that may be closed by this pull request
Create an overlay component #137
Open
@CorentinGS CorentinGS closed this by deleting the head repository Jan 28, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@JAGFx JAGFx JAGFx requested changes

Assignees
No one assigned
Labels
type/enhancement New feature or request
Projects
JAGFx dev'
Status: No status
Milestone
2.0
Development

Successfully merging this pull request may close these issues.

Create an overlay component
2 participants
@CorentinGS @JAGFx