stuff
This commit is contained in:
parent
4706efacae
commit
f5291924c3
17 changed files with 105 additions and 69 deletions
6
.devcontainer/devcontainer.json
Normal file
6
.devcontainer/devcontainer.json
Normal file
|
@ -0,0 +1,6 @@
|
||||||
|
{
|
||||||
|
"name": "Euph Website",
|
||||||
|
"image": "git.euph.dev/development_tools/symfony:latest",
|
||||||
|
"forwardPorts": [8080],
|
||||||
|
workspaceMount: ""
|
||||||
|
}
|
|
@ -1,5 +1,5 @@
|
||||||
twig:
|
twig:
|
||||||
default_path: '%kernel.project_dir%/frontend/templates'
|
default_path: '%kernel.project_dir%/frontend/templates/'
|
||||||
|
|
||||||
when@test:
|
when@test:
|
||||||
twig:
|
twig:
|
||||||
|
|
|
@ -6,19 +6,12 @@
|
||||||
"extends": [
|
"extends": [
|
||||||
"eslint:recommended",
|
"eslint:recommended",
|
||||||
"plugin:@typescript-eslint/strict",
|
"plugin:@typescript-eslint/strict",
|
||||||
"plugin:svelte/recommended"
|
|
||||||
],
|
],
|
||||||
"parser": "@typescript-eslint/parser",
|
"parser": "@typescript-eslint/parser",
|
||||||
"parserOptions": {
|
"parserOptions": {
|
||||||
"ecmaVersion": "latest",
|
"ecmaVersion": "latest",
|
||||||
"sourceType": "module"
|
"sourceType": "module"
|
||||||
},
|
},
|
||||||
"overrides": [
|
|
||||||
{
|
|
||||||
"files": ["*.svelte"],
|
|
||||||
"parser": "svelte-eslint-parser"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"plugins": [
|
"plugins": [
|
||||||
"@typescript-eslint"
|
"@typescript-eslint"
|
||||||
],
|
],
|
||||||
|
|
|
@ -1 +1,2 @@
|
||||||
|
import '#styles/app.scss';
|
||||||
import '#pkg/stimulus';
|
import '#pkg/stimulus';
|
||||||
|
|
9
app/frontend/styles/app.scss
Normal file
9
app/frontend/styles/app.scss
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
@import "sizes";
|
||||||
|
|
||||||
|
@import "components/Header/_";
|
||||||
|
@import "components/BurgerMenu/_";
|
||||||
|
|
||||||
|
:root, body {
|
||||||
|
margin: 0;
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
5
app/frontend/styles/components/BurgerMenu/_.scss
Normal file
5
app/frontend/styles/components/BurgerMenu/_.scss
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
#burger-menu {
|
||||||
|
&__container {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
7
app/frontend/styles/components/Header/_.scss
Normal file
7
app/frontend/styles/components/Header/_.scss
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
#header {
|
||||||
|
display: flex;
|
||||||
|
height: $size-xxl;
|
||||||
|
padding: $size-xs;
|
||||||
|
gap: $size-xs;
|
||||||
|
justify-items: center;
|
||||||
|
}
|
7
app/frontend/styles/sizes.scss
Normal file
7
app/frontend/styles/sizes.scss
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
$size-xxs: 0.25rem; // 4px
|
||||||
|
$size-xs: 0.5rem; // 8px
|
||||||
|
$size-s: 0.75rem; // 12px
|
||||||
|
$size-m: 1rem; // 16px
|
||||||
|
$size-l: 1.5rem; // 24px
|
||||||
|
$size-xl: 2rem; // 32px
|
||||||
|
$size-xxl: 3rem; // 48px
|
|
@ -21,7 +21,7 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<twig:Header/>
|
<twig:Header:_/>
|
||||||
{% block body %}{% endblock %}
|
{% block body %}{% endblock %}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -1,55 +0,0 @@
|
||||||
{% set logged_in = true %}
|
|
||||||
<button>
|
|
||||||
<twig:ux:icon name="fa6-solid:bars" />
|
|
||||||
</button>
|
|
||||||
<div tabindex="-1">
|
|
||||||
<button>
|
|
||||||
<twig:ux:icon name="fa6-solid:x" />
|
|
||||||
</button>
|
|
||||||
<div>
|
|
||||||
<div >
|
|
||||||
<twig:ux:icon name="fa6-solid:circle-user" />
|
|
||||||
</div>
|
|
||||||
{% if logged_in %}
|
|
||||||
<span>Username</span>
|
|
||||||
<span>username@email.com</span>
|
|
||||||
<div>
|
|
||||||
{{ _self.user_action('Profile', 'user') }}
|
|
||||||
{{ _self.user_action('Settings', 'gear') }}
|
|
||||||
{{ _self.user_action('Logout', 'right-from-bracket') }}
|
|
||||||
</div>
|
|
||||||
{% else %}
|
|
||||||
<span>not logged in</span>
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
{% if not logged_in %}
|
|
||||||
<hr/>
|
|
||||||
<a>
|
|
||||||
<span>Login with Euphcloud</span>
|
|
||||||
</a>
|
|
||||||
{% endif %}
|
|
||||||
<hr/>
|
|
||||||
<nav>
|
|
||||||
<ul>
|
|
||||||
{{ _self.nav_item('Test1', '#test1', 'bars') }}
|
|
||||||
{{ _self.nav_item('Test2', '#test2', 'bars') }}
|
|
||||||
{{ _self.nav_item('Test3', '#test3', 'bars') }}
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% macro user_action(name, icon) %}
|
|
||||||
<button>
|
|
||||||
<twig:ux:icon name="fa6-solid:{{ icon }}" />
|
|
||||||
<span>{{ name }}</span>
|
|
||||||
</button>
|
|
||||||
{% endmacro %}
|
|
||||||
|
|
||||||
{% macro nav_item(name, href, icon) %}
|
|
||||||
<li>
|
|
||||||
<a href="{{ href }}">
|
|
||||||
<twig:ux:icon name="fa6-solid:{{ icon }}" />
|
|
||||||
<span>{{ name }}</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{% endmacro %}
|
|
|
@ -0,0 +1,6 @@
|
||||||
|
{% set logged_in = false %}
|
||||||
|
{% if not logged_in %}
|
||||||
|
<a>
|
||||||
|
<span>Login with Euphcloud</span>
|
||||||
|
</a>
|
||||||
|
{% endif %}
|
|
@ -0,0 +1,16 @@
|
||||||
|
<nav id="burger-menu-navigation">
|
||||||
|
<ul>
|
||||||
|
{{ _self.nav_item('Test1', '#test1', 'bars') }}
|
||||||
|
{{ _self.nav_item('Test2', '#test2', 'bars') }}
|
||||||
|
{{ _self.nav_item('Test3', '#test3', 'bars') }}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
{% macro nav_item(name, href, icon) %}
|
||||||
|
<li>
|
||||||
|
<a href="{{ href }}">
|
||||||
|
<twig:ux:icon name="fa6-solid:{{ icon }}" />
|
||||||
|
<span>{{ name }}</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
{% endmacro %}
|
26
app/frontend/templates/components/BurgerMenu/User.html.twig
Normal file
26
app/frontend/templates/components/BurgerMenu/User.html.twig
Normal file
|
@ -0,0 +1,26 @@
|
||||||
|
{% set logged_in = false %}
|
||||||
|
<div id="burger-menu-user">
|
||||||
|
<div >
|
||||||
|
<twig:ux:icon name="fa6-solid:circle-user" />
|
||||||
|
</div>
|
||||||
|
{% if logged_in %}
|
||||||
|
<span>Username</span>
|
||||||
|
<span>username@email.com</span>
|
||||||
|
<div>
|
||||||
|
{{ _self.user_action('Profile', 'user') }}
|
||||||
|
{{ _self.user_action('Settings', 'gear') }}
|
||||||
|
{{ _self.user_action('Logout', 'right-from-bracket') }}
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<span>not logged in</span>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
{% macro user_action(name, icon) %}
|
||||||
|
<button>
|
||||||
|
<twig:ux:icon name="fa6-solid:{{ icon }}" />
|
||||||
|
<span>{{ name }}</span>
|
||||||
|
</button>
|
||||||
|
{% endmacro %}
|
||||||
|
|
14
app/frontend/templates/components/BurgerMenu/_.html.twig
Normal file
14
app/frontend/templates/components/BurgerMenu/_.html.twig
Normal file
|
@ -0,0 +1,14 @@
|
||||||
|
<button id="burger-menu">
|
||||||
|
<twig:ux:icon name="fa6-solid:bars" />
|
||||||
|
</button>
|
||||||
|
<div id="burger-menu__container" tabindex="-1">
|
||||||
|
<button>
|
||||||
|
<twig:ux:icon name="fa6-solid:x" />
|
||||||
|
</button>
|
||||||
|
<twig:BurgerMenu:User/>
|
||||||
|
<hr/>
|
||||||
|
<twig:BurgerMenu:Login/>
|
||||||
|
<hr/>
|
||||||
|
<twig:BurgerMenu:Navigation/>
|
||||||
|
</div>
|
||||||
|
|
|
@ -1,14 +1,12 @@
|
||||||
<header id="header">
|
<header id="header">
|
||||||
<img
|
<img
|
||||||
id="header__logo"
|
|
||||||
src="{{ asset("icons/logo/logo.svg") }}"
|
src="{{ asset("icons/logo/logo.svg") }}"
|
||||||
alt="Euph Logo"
|
alt="Euph Logo"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
id="header__logo-dark"
|
|
||||||
src="{{ asset("icons/logo/dark-logo.svg") }}"
|
src="{{ asset("icons/logo/dark-logo.svg") }}"
|
||||||
alt="Euph Logo"
|
alt="Euph Logo"
|
||||||
>
|
>
|
||||||
<h1 id="header__logo-text">Euph</h1>
|
<h1>Euph</h1>
|
||||||
<twig:BurgerMenu/>
|
<twig:BurgerMenu:_/>
|
||||||
</header>
|
</header>
|
|
@ -22,6 +22,9 @@
|
||||||
"#pkg/*": [
|
"#pkg/*": [
|
||||||
"./packages/*"
|
"./packages/*"
|
||||||
],
|
],
|
||||||
|
"#styles/*": [
|
||||||
|
"./styles/*"
|
||||||
|
],
|
||||||
"#types/*": [
|
"#types/*": [
|
||||||
"./types/*"
|
"./types/*"
|
||||||
]
|
]
|
||||||
|
|
|
@ -32,7 +32,7 @@ Encore
|
||||||
config.corejs = '3.23';
|
config.corejs = '3.23';
|
||||||
})
|
})
|
||||||
.enableStimulusBridge('./frontend/controllers/controllers.json')
|
.enableStimulusBridge('./frontend/controllers/controllers.json')
|
||||||
//.enableSassLoader()
|
.enableSassLoader()
|
||||||
.enableTypeScriptLoader(function tsconfigCallback(tsConfig) {
|
.enableTypeScriptLoader(function tsconfigCallback(tsConfig) {
|
||||||
tsConfig.configFile = TS_CONFIG_PATH;
|
tsConfig.configFile = TS_CONFIG_PATH;
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in a new issue