Skip to content

Commit

Permalink
style changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@d3liaa
d3liaa committed Apr 2, 2024
1 parent 603717c commit 907d271
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 143 deletions.
41 changes: 31 additions & 10 deletions frontend/src/assets/styles/widget/_nav-dropdown.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

.b-nav-dropdown {
.dropdown-menu {
background-color: #000 !important;
background-color: #fff !important;
width: 290px !important;
margin-top: 10px;

Expand All @@ -16,16 +16,20 @@
}

a {
color: white !important;
color: black !important;
}

li {
background-color: #000 !important;
background-color: #fff !important;
}

// li:hover {
// background-color: rgb(41, 41, 41) !important;
// }
li:hover {
background-color: #fff !important;
}

li:active {
background-color: #fff !important;
}

.triangle {
margin-top: -25px;
Expand All @@ -40,11 +44,28 @@
}

.dropdown-menu:hover {
background-color: #000 !important;
background-color: #fff !important;
}

/* stylelint-disable-next-line */
::v-deep .dropdown-item:hover {
background-color: #000 !important;
}
// ::v-deep .dropdown-item:hover {
// background-color: #fff !important;
// }
}

@media (max-width: 747px) {
.b-nav-dropdown {
text-align: center;
.dropdown-menu {
background-color: #fff !important;
margin-top: 10px;
text-align: center;

hr {
background-color: white !important;
margin: 0 12px;
}
}

}
}
10 changes: 2 additions & 8 deletions frontend/src/layouts/partials/nav.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,13 +42,13 @@ SPDX-License-Identifier: AGPL-3.0-or-later
:to="localePath('how-to-add')"
@click="$emit('hide-overlay')"
>
Add
Add a webcomponent
</b-dropdown-item>
<b-dropdown-item
:to="localePath('how-to-create')"
@click="$emit('hide-overlay')"
>
Create
Create a webcomponent
</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item
Expand Down Expand Up @@ -121,12 +121,6 @@ export default {
font-weight: bold;
}
.dropdown-custom .dropdown-menu {
background-color: #f4f8f9 !important;
border: none !important;
box-shadow: none !important;
}
.bg {
background-color: #f4f8f9;
}
Expand Down
132 changes: 13 additions & 119 deletions frontend/src/pages/how-to-add/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,15 @@ SPDX-License-Identifier: AGPL-3.0-or-later
<div class="text-w p-2">
<h1>How to add a webcomponent</h1>
Everything you need to know to
<b>start creating your own Web Component!</b>
In the playlist below you can explore each step from start to finish,
to develop your web component and contribute to the collection.
<b>add a Web Component to your website!</b>
The following videos will provide detailed instructions on adding web
components to your website, addressing specific requirements for plain
HTML, WordPress, and TYPO3 platforms.
</div>
<iframe
class="video-w"
title="vimeo-player"
src="https://player.vimeo.com/video/734001032?h=a0ffd12d44"
src="https://player.vimeo.com/video/734000845?h=ff5b252b40&title=0&byline=0&portrait=0"
width="480"
height="300"
frameborder="0"
Expand All @@ -34,144 +35,37 @@ SPDX-License-Identifier: AGPL-3.0-or-later
<iframe
class="video-w"
title="vimeo-player"
src="https://player.vimeo.com/video/734001070?h=c4447e1f5a"
src="https://player.vimeo.com/video/917806165?h=ff5b252b40&title=0&byline=0&portrait=0"
width="480"
height="300"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
></iframe>
<div class="float-right-text">
<strong>Start with the Boilerplate</strong> <br />The first step to
create your own Web Component for the Open Data Hub Web Component
Collection.
<strong>Add a webcomponent to WordPress</strong> <br />A
comprehensive guide and walkthrough on effortlessly selecting,
integrating, and adding a web component to a WordPress website.
<br />
<a
href="https://github.com/noi-techpark/webcomp-boilerplate"
target="_blank"
class="btn btn-primary"
>ACCESS THE BOILERPLATE
</a>
</div>
</div>

<div class="container container-w p-4">
<iframe
class="video-w"
title="vimeo-player"
src="https://player.vimeo.com/video/734000899?h=06d0770158"
src="https://player.vimeo.com/video/917806135?h=ff5b252b40&title=0&byline=0&portrait=0"
width="480"
height="300"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen
></iframe>
<div class="float-right-text">
<strong>Hello World </strong> <br />Explanation of the simple
hello-world Web Component inside the Web Component Boilerplate
provided by the Open Data Hub.
<strong>Add a webcomponent to TYPO3</strong> <br />A comprehensive
guide and walkthrough on effortlessly selecting, integrating, and
adding a web component to a TYPO3 website.
<br />
<a
href="https://github.com/noi-techpark/webcomp-boilerplate"
target="_blank"
class="btn btn-primary"
>ACCESS THE BOILERPLATE
</a>
</div>
</div>

<div class="container container-w p-4">
<iframe
class="video-w"
title="vimeo-player"
src="https://player.vimeo.com/video/734001138?h=e73be62049"
width="480"
height="300"
frameborder="0"
allowfullscreen
></iframe>
<div class="float-right-text">
<strong>What is the manifest.json? </strong> <br />What is the
manifest.json file in the Web Component Boilerplate of the Open Data
Hub.
<br />
<a
href="https://webcomponents.opendatahub.com/validator/"
target="_blank"
class="btn btn-primary"
>ACCESS THE VALIDATOR
</a>
</div>
</div>

<div class="container container-w p-4">
<iframe
class="video-w"
title="vimeo-player"
src="https://player.vimeo.com/video/734001174?h=93f24ec42c"
width="480"
height="300"
frameborder="0"
allowfullscreen
></iframe>
<div class="float-right-text">
<strong>What is Webpack? </strong> <br />What is Webpack and how to
use it for your Web Component development process using the
Boilerplate provided by the Open Data Hub.
<br />
<a
href="https://webpack.js.org/guides/getting-started/"
target="_blank"
class="btn btn-primary"
>ACCESS THE WEBPACK GUIDES
</a>
</div>
</div>

<div class="container container-w p-4">
<iframe
class="video-w"
title="vimeo-player"
src="https://player.vimeo.com/video/734001110?h=ffbc275281"
width="480"
height="300"
frameborder="0"
allowfullscreen
></iframe>
<div class="float-right-text">
<strong>What is Docker? </strong> <br />What is Docker and how to
use it for your Web Component development process using the
Boilerplate provided by the Open Data Hub.
<br />
<a
href="https://docs.docker.com/install/"
target="_blank"
class="btn btn-primary"
>ACCESS THE DOCKER INSTALLATION GUIDE
</a>
</div>
</div>

<div class="container container-w p-4">
<iframe
class="video-w"
title="vimeo-player"
src="https://player.vimeo.com/video/734001003?h=0fcde41882"
width="480"
height="300"
frameborder="0"
allowfullscreen
></iframe>
<div class="float-right-text">
<strong>How to publish? </strong> <br />How to publish your Web
Component in the Open Data Hub Web Component Store.
<br />
<a
href="https://github.com/noi-techpark/webcomp-boilerplate"
target="_blank"
class="btn btn-primary"
>ACCESS THE BOILERPLATE
</a>
</div>
</div>
</div>
Expand Down
21 changes: 15 additions & 6 deletions frontend/src/pages/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,29 @@ SPDX-License-Identifier: AGPL-3.0-or-later

<template>
<div>
<!-- <banner></banner>-->
<div class="ml-auto header-container">
<div
:class="{ collapsed: !isHeaderExpanded, 'p-4 mb-5': isHeaderExpanded }"
class="container container-w inner-header-container"
>
<div class="text-w p-2 mb-4">
<div class="container container-w inner-header-container text-center">
<div class="text-w mb-2">
Here you can find already developed Web Components with data from the
Open Data Hub, <strong>available and ready to be used.</strong> Filter
by category and find the Web Components you need for your website or
application, in the fields of tourism, weather, mobility and many
more.
</div>
</div>
<div class="container container-w d-flex justify-content-center">
<div>
<a href="/how-to-add" target="_blank" class="btn btn-primary mb-2">
Add a webcomponent
</a>
</div>
<div>
<a href="/how-to-create" target="_blank" class="btn btn-primary">
<!-- Update this link to point to the appropriate page on your website -->
Create a webcomponent
</a>
</div>
</div>
</div>

<Searchbar
Expand Down

0 comments on commit 907d271

Please sign in to comment.