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:
|
||||
default_path: '%kernel.project_dir%/frontend/templates'
|
||||
default_path: '%kernel.project_dir%/frontend/templates/'
|
||||
|
||||
when@test:
|
||||
twig:
|
||||
|
|
|
@ -6,19 +6,12 @@
|
|||
"extends": [
|
||||
"eslint:recommended",
|
||||
"plugin:@typescript-eslint/strict",
|
||||
"plugin:svelte/recommended"
|
||||
],
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"parserOptions": {
|
||||
"ecmaVersion": "latest",
|
||||
"sourceType": "module"
|
||||
},
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["*.svelte"],
|
||||
"parser": "svelte-eslint-parser"
|
||||
}
|
||||
],
|
||||
"plugins": [
|
||||
"@typescript-eslint"
|
||||
],
|
||||
|
|
|
@ -1 +1,2 @@
|
|||
import '#styles/app.scss';
|
||||
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>
|
||||
|
||||
<body>
|
||||
<twig:Header/>
|
||||
<twig:Header:_/>
|
||||
{% block body %}{% endblock %}
|
||||
</body>
|
||||
</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">
|
||||
<img
|
||||
id="header__logo"
|
||||
src="{{ asset("icons/logo/logo.svg") }}"
|
||||
alt="Euph Logo"
|
||||
>
|
||||
<img
|
||||
id="header__logo-dark"
|
||||
src="{{ asset("icons/logo/dark-logo.svg") }}"
|
||||
alt="Euph Logo"
|
||||
>
|
||||
<h1 id="header__logo-text">Euph</h1>
|
||||
<twig:BurgerMenu/>
|
||||
<h1>Euph</h1>
|
||||
<twig:BurgerMenu:_/>
|
||||
</header>
|
|
@ -22,6 +22,9 @@
|
|||
"#pkg/*": [
|
||||
"./packages/*"
|
||||
],
|
||||
"#styles/*": [
|
||||
"./styles/*"
|
||||
],
|
||||
"#types/*": [
|
||||
"./types/*"
|
||||
]
|
||||
|
|
|
@ -32,7 +32,7 @@ Encore
|
|||
config.corejs = '3.23';
|
||||
})
|
||||
.enableStimulusBridge('./frontend/controllers/controllers.json')
|
||||
//.enableSassLoader()
|
||||
.enableSassLoader()
|
||||
.enableTypeScriptLoader(function tsconfigCallback(tsConfig) {
|
||||
tsConfig.configFile = TS_CONFIG_PATH;
|
||||
})
|
||||
|
|
Loading…
Reference in a new issue