Eosc-portal-common rendering

Marcelinna commented 2 years ago

1. element is rendered correctly, but the warning is in the network

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
  <body>
    <eosc-common-main-header
      username="name surname"
      login-url="https://marketplace.eosc-portal.eu/users/auth/checkin"
      logout-url="https://marketplace.eosc-portal.eu/users/logout"
    ></eosc-common-main-header>
    <div id="eosc-common-eu-information"></div>
    <EoscCommonMainFooter></EoscCommonMainFooter>

    <script src="https://s3.cloud.cyfronet.pl/eosc-portal-common/latest/index.production.min.js"></script>
    <link rel="stylesheet" href="https://s3.cloud.cyfronet.pl/eosc-portal-common/latest/index.production.min.css" />
  </body>
</html>

FIREFOX

CHROME

2. - navigation is not centered, character icon position is too high, there is a difference between chrome and firefox styles

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
  <body>
    <eosc-common-main-header
      username="name surname"
      login-url="https://marketplace.eosc-portal.eu/users/auth/checkin"
      logout-url="https://marketplace.eosc-portal.eu/users/logout"
    ></eosc-common-main-header>

    <script src="https://s3.cloud.cyfronet.pl/eosc-portal-common/latest/main-header.production.min.js"></script>
    <link rel="stylesheet" href="https://s3.cloud.cyfronet.pl/eosc-portal-common/latest/main-header.production.min.css" />
  </body>
</html>

FIREFOX

CHROME

element is rendered correctly, but the warning is in the network

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://s3.cloud.cyfronet.pl/eosc-portal-common/latest/index.production.min.js"></script>
<link rel="stylesheet" href="https://s3.cloud.cyfronet.pl/eosc-portal-common/latest/index.production.min.css" />
</head>
<body>
<eosc-common-main-header
  username="name surname"
  login-url="https://marketplace.eosc-portal.eu/users/auth/checkin"
  logout-url="https://marketplace.eosc-portal.eu/users/logout"
></eosc-common-main-header>
<script>
  window.renderCustomComponent(window.EoscCommonMainHeader, { tagName: "eosc-common-main-header" });
</script>

<div id="eosc-common-eu-information"></div>
<script>
  window.renderCustomComponent(window.EoscCommonEuInformation, { id: "eosc-common-eu-information" });
</script>

<EoscCommonMainFooter></EoscCommonMainFooter>
<script>
  window.renderCustomComponent(window.EoscCommonMainFooter, { tagName: "EoscCommonMainFooter" });
</script>
</body>
</html>

FIREFOX

CHROME

it render nothing

<div class="eosc-common-eu-information"></div>
<div id="eosc-common-eu-information"></div>

works properly

<eosc-common-eu-information></eosc-common-eu-information>
<EoscCommonEuInformation></EoscCommonEuInformation>

it render nothing <div id="eosc-common-main-footer"></div>

works properly

<EoscCommonMainFooter></EoscCommonMainFooter>
<eosc-common-main-footer></eosc-common-main-footer>
<div class="eosc-common-main-footer"></div>

it render nothing

<div
id="eosc-common-main-header"
username="name surname"
login-url="https://marketplace.eosc-portal.eu/users/auth/checkin"
logout-url="https://marketplace.eosc-portal.eu/users/logout"
></div>

work properly

<eosc-common-main-header
username="name surname"
login-url="https://marketplace.eosc-portal.eu/users/auth/checkin"
logout-url="https://marketplace.eosc-portal.eu/users/logout"
></eosc-common-main-header>

<EoscCommonMainHeader username="name surname" login-url="https://marketplace.eosc-portal.eu/users/auth/checkin" logout-url="https://marketplace.eosc-portal.eu/users/logout"

<div class="eosc-common-main-header" username="name surname" login-url="https://marketplace.eosc-portal.eu/users/auth/checkin" logout-url="https://marketplace.eosc-portal.eu/users/logout"

element is rendered correctly, but the warning is in the network


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://s3.cloud.cyfronet.pl/eosc-portal-common/latest/index.production.min.js"></script>
<link rel="stylesheet" href="https://s3.cloud.cyfronet.pl/eosc-portal-common/latest/index.production.min.css" />
</head>
<body>
<div id="custom-css-class"></div>
<script>
window.renderCustomComponent(window.EoscCommonEuInformation, { id: "custom-css-class" });
</script>

![image](https://user-images.githubusercontent.com/59872096/152808598-d16f7755-cd4b-45d4-884e-42653cf0b444.png)

element is rendered correctly, but the warning is in the network <!DOCTYPE html>
```
![image](https://user-images.githubusercontent.com/59872096/152808824-e91aa6f2-3668-4193-92a3-0e522b7fb659.png)
```
element is rendered correctly, but the warning is in the network

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script src="https://s3.cloud.cyfronet.pl/eosc-portal-common/latest/index.production.min.js"></script>
    <link rel="stylesheet" href="https://s3.cloud.cyfronet.pl/eosc-portal-common/latest/index.production.min.css" />
  </head>
  <body>
    <div
    id="custom-css-class"
    username="name surname"
    login-url="https://marketplace.eosc-portal.eu/users/auth/checkin"
    logout-url="https://marketplace.eosc-portal.eu/users/logout"
  ></div>
  <script>
    window.renderCustomComponent(window.EoscCommonMainHeader, { id: "custom-css-class" });
  </script>

  <div
    class="custom-css-class"
    username="name surname"
    login-url="https://marketplace.eosc-portal.eu/users/auth/checkin"
    logout-url="https://marketplace.eosc-portal.eu/users/logout"
  ></div>
  <script>
    window.renderCustomComponent(window.EoscCommonMainHeader, { className: "custom-css-class" });
  </script>

  <custom-tag-name
    username="name surname"
    login-url="https://marketplace.eosc-portal.eu/users/auth/checkin"
    logout-url="https://marketplace.eosc-portal.eu/users/logout"
  ></custom-tag-name>
  <script>
    window.renderCustomComponent(window.EoscCommonMainHeader, { tagName: "custom-tag-name" });
  </script>
  </body>
</html>

github-actions[bot] commented 2 years ago

Hi @Marcelinna. Thank you for raising an issue. We will will investigate into the matter and get back to you as soon as possible. Please make sure you have given us as much context as possible.

danielkryska commented 2 years ago

[x] 1, 3 points about the warning in console
[x] 2 points, rendering only one component style will not work correctly and is known issue

danielkryska commented 2 years ago

[x] render using class and id
[x] render using camel case tag
[x] render using snake case tag

cyfronet-fid / eosc-portal-common

Eosc-portal-common rendering #182