tracer/Spookie
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

before symfony/security-bundle update

Browse Source
This commit is contained in:
tracer
2022-05-25 14:41:58 +02:00
parent aec0b4356a
commit aa84f3c4c6
21 changed files with 1876 additions and 697 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.eslintrc
View File

@@ -3,10 +3,12 @@
// add more generic rulesets here, such as: // add more generic rulesets here, such as:
"eslint:recommended", "eslint:recommended",
"airbnb-base", "airbnb-base",
"plugin:vue/recommended" "plugin:vue/recommended",
"plugin:vue/vue3-recommended"
], ],
"parserOptions": { "parserOptions": {
"ecmaVersion": 9, "parser": "espree",
"ecmaVersion": 2022,
"sourceType": "module" "sourceType": "module"
}, },
"env": { "env": {
@@ -47,7 +49,7 @@
"no-tabs": "off", "no-tabs": "off",
"comma-dangle": "off", "comma-dangle": "off",
"no-alert": 0, "no-alert": 0,
"no-unused-vars": "warn", "no-unused-vars": "off",
"spaced-comment": "off", "spaced-comment": "off",
"no-param-reassign": 0, "no-param-reassign": 0,
"import/extensions": 0, "import/extensions": 0,

3
TODO
View File

@@ -1,3 +1,6 @@
entity types
- use quill vue - use quill vue
- add linenumbering - add linenumbering
- add yntax highlighning - add yntax highlighning

15
assets/js/App.vue
View File

@@ -13,9 +13,18 @@
<the-sidebar/> <the-sidebar/>
</div> </div>
<div class="col-xl-9"> <div class="col-xl-9">
<router-view <suspense>
@user-authenticated="onUserAuthenticated" <template #default>
/> <router-view
@user-authenticated="onUserAuthenticated"
/>
</template>
<template #fallback>
<div class="loading">
loading …
</div>
</template>
</suspense>
</div> </div>
<div class="col mt-2"/> <div class="col mt-2"/>
</div> </div>

2
assets/js/components/LoginForm.vue
View File

@@ -53,7 +53,7 @@
</template> </template>
<script setup> <script setup>
import { ref, defineEmits } from 'vue' import { ref } from 'vue'
import axios from 'axios' import axios from 'axios'
const username = ref('') const username = ref('')

152
assets/js/components/TheNavbar.vue
View File

@@ -1,122 +1,45 @@
<template> <template>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top navbar-top"> <nav
<router-link class="
class="navbar-brand" grid fixed inset-x-0 top-0 flex-wrap justify-between items-center py-0 leading-6 border-b
:to="{ name: 'Home' }" @border-orange-400 opacity-90 md:flex-nowrap md:justify-start md:px-24 box-border
> bg-neutral-800 text-stone-300 grid-cols-2 place-content-around"
<img style="z-index: 1030;"
src="/build/images/24unix/24_logo_bg_96x96.png" >
class="img-fluid" <div>
alt="24unix.net" <router-link
class="py-1 mr-4 text-xl leading-7 text-white whitespace-nowrap cursor-pointer box-border
hover:text-white focus:text-white"
:to="{ name: 'Home' }"
> >
</router-link> <img
<button src="/build/images/24unix/24_logo_bg_96x96.png"
class="navbar-toggler border-0" class="align-middle box-border"
type="button" alt="24unix.net"
data-toggle="collapse" >
data-target="#CollapsingNavbar" </router-link>
>
☰
</button>
<div
id="CollapsingNavbar"
class="collapse navbar-collapse"
>
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<div v-if="isLoggedIn">
<button
v-if="isLoggedIn"
data-bs-target="#dropdown-menu"
data-bs-toggle="dropdown"
class="btn btn-primary button-login dropdown-toggle ml-auto mb-2 mr-5"
:to="{ name: 'Home'}"
>
{{ user.username }}
</button>
<div
id="dropdown-menu"
class="dropdown-menu dropdown-menu-dark dropdown-menu-end"
aria-labelledby="navbar-dropdown"
>
<router-link
:to="{name: 'Profile'}"
class="dropdown-item"
href="/profile"
>
<span
class="fa fa-lg fa-fw fa-user"
aria-hidden="true"
/>
Profile
</router-link>
<a
class="dropdown-item"
href="#"
>
<span
class="fa fa-lg fa-fw fa-wrench"
aria-hidden="true"
/>
Settings</a>
<div class="dropdown-divider"/>
<a
class="dropdown-item"
href="/admin"
>
<span
class="fa fa-lg fa-fw fa-cog"
aria-hidden="true"
/>
Administration
</a>
<div class="dropdown-divider"/>
<a
class="dropdown-item"
href="/logout"
>
<span
class="fa fa-lg fa-fw fa-sign-out"
aria-hidden="true"
/>
&nbsp;Logout
</a>
</div>
</div>
<button
v-else
class="btn btn-outline-primary"
>
<router-link :to="{ name: 'LoginForm'}">
<span
class="fa fa-sign-in fa-lg fa-fw"
aria-hidden="true"
/>
Login
</router-link>
</button>
</li>
</ul>
</div> </div>
<!-- <div class="text-end">
<span <router-link
class="fa fa-lg fa-fw fa-wrench" id="buttonLogin"
aria-hidden="true" class="inline-block py-1 px-3 mt-6 text-base font-normal leading-normal text-center
/>&nbsp;Settings text-black align-middle bg-orange-400 rounded border border-orange-400 border-solid
</b-dropdown-item> cursor-pointer select-none box-border hover:border-orange-400 hover:bg-orange-400 hover:text-black
<b-dropdown-divider/> focus:border-orange-400 focus:bg-orange-400 focus:text-black"
<b-dropdown-item @click="logout"> :to="{ name: 'LoginForm' }"
<span role="button"
class="fa fa-lg fa-fw fa-sign-out" style="text-decoration: none; transition: none 0s ease 0s; list-style: outside none none;"
aria-hidden="true" >
/>&nbsp;Logout <span class="fa fa-sign-in fa-lg fa-fw"></span>&nbsp;Log In
</b-dropdown-item> </router-link>
-->
</div>
</nav> </nav>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue'
import axios from 'axios' import axios from 'axios'
import 'vue-navigation-bar/dist/vue-navigation-bar.css' import 'vue-navigation-bar/dist/vue-navigation-bar.css'
@@ -132,6 +55,11 @@ const props = defineProps({
}) })
const isLoggedIn = () => (!!this.user) const isLoggedIn = () => (!!this.user)
let showDropdown = ref(false)
const toggleDropDown = () => {
console.log('toggle', showDropdown)
showDropdown.value = !showDropdown.value
}
/* /*
const logout = () => ({ const logout = () => ({

69
assets/js/components/blog/BlogCard.vue
View File

@@ -1,33 +1,44 @@
<template> <template>
<div <div>
class=" <!-- media -->
flex <div class="h-64 w-auto md:w-1/2">
m-2 <img
gap-2 class="inset-0 h-full w-full object-cover object-center"
items-center src="/build/images/tracer_schmolle150x150.png"
shadow-md alt=""
w-1/4 >
flex-grow </div>
rounded <!-- content -->
overflow-hidden <div class="w-full py-4 px-6 text-gray-800 flex flex-col justify-between">
" <h3 class="font-semibold text-lg leading-tight truncate">
style="border: 1px solid #eee" {{ post.title }}
> </h3>
<img <p class="mt-2">
src="https://via.placeholder.com/150" {{ post.body.split('.')[0] }} …
style="background: #cccccc" </p>
width="150" <p class="text-sm text-gray-700 uppercase tracking-wide font-semibold mt-2">
height="150" {{ post.createdAt.toLocaleString('de-DE') }}
alt="placeholder" </p>
> <p v-if="blogUser">
<router-link :to="{ name: 'BlogPost', params: { id: post.id } }"> {{ blogUser }}
{{ post.title }}<br> </p>
User: {{ post.userId }} <p class="font-normal text-gray-700 mb-3">
</router-link> dddd
</p>
<router-link
:to="{ name: 'BlogPost', params: { id: post.id } }"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300
font-medium rounded-lg text-sm px-3 py-2 text-center inline-flex items-center"
>
Read more
</router-link>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
console.log('BlogCard') import useResource from '@/composables/useResource'
const props = defineProps({ const props = defineProps({
post: { post: {
type: Object, type: Object,
@@ -35,4 +46,10 @@ const props = defineProps({
} }
}) })
const post = { ...props.post } const post = { ...props.post }
const { items: blogUser, fetchOne } = useResource('users')
fetchOne(post.user)
console.log("blug user", post.user)
console.log(blogUser.value)
</script> </script>

49
assets/js/components/blog/BlogIndex.vue
View File

@@ -1,34 +1,37 @@
<template> <template>
<div <div class="pt-6 pb-12 bg-gray-300">
class=" <div
flex id="card"
m-2 class=""
gap-2 >
items-center <h2 class="text-center font-serif uppercase text-4xl xl:text-5xl">
shadow-md Recent Articles
w-1/4 </h2>
flex-grow <!-- container for all cards -->
rounded <div class="container w-100 lg:w-4/5 mx-auto flex flex-col">
overflow-hidden <BlogCard
" v-for="post in blogPosts"
style="border: 1px solid #eee" :key="post.id"
> :post="post"
BlogIndex class="
flex flex-col md:flex-row overflow-hidden bg-white rounded-lg
<BlogCard shadow-xl mt-4 w-100 mx-2"
v-for="post in blogPosts" />
:key="post.id" </div>
:post="post" </div>
/>
</div> </div>
</template> </template>
<script setup> <script setup async>
import useResource from '@/composables/useResource' import useResource from '@/composables/useResource'
//import useUser from '@/composables/useUser' //import useUser from '@/composables/useUser'
import BlogCard from '@/components/blog/BlogCard' import BlogCard from '@/components/blog/BlogCard'
const { items: blogPosts, fetchAll } = useResource('https://jsonplaceholder.typicode.com/posts') const {
items: blogPosts,
fetchAll
} = useResource('users/1/blogPosts')
fetchAll() fetchAll()
</script> </script>

10
assets/js/components/blog/BlogPost.vue
View File

@@ -32,20 +32,16 @@
</div> </div>
</template> </template>
<script setup> <script setup async>
import { watch } from 'vue'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import useResource from '@/composables/useResource' import useResource from '@/composables/useResource'
const route = useRoute() const route = useRoute()
const { item: blogPost, fetchOne: fetchOneBlog } = useResource('https://jsonplaceholder.typicode.com/posts') const { item: blogPost, fetchOne: fetchOneBlog } = useResource('https://jsonplaceholder.typicode.com/posts')
fetchOneBlog(route.params.id) await fetchOneBlog(route.params.id)
const { item: user, fetchOne: fetchOneUser } = useResource('https://jsonplaceholder.typicode.com/users') const { item: user, fetchOne: fetchOneUser } = useResource('https://jsonplaceholder.typicode.com/users')
watch( fetchOneUser(blogPost.value.userId)
() => ({ ...blogPost.value }),
() => fetchOneUser(blogPost.value.userId)
)
</script> </script>

2
assets/js/components/tabs/TabsGroup.vue
View File

@@ -72,7 +72,7 @@ export default {
} }
.tabs-header li.selected:hover { .tabs-header li.selected:hover {
border-color: $body-color; /*border-color: $body-color; */
} }
</style> </style>

7
assets/js/composables/useResource.js
View File

@@ -2,13 +2,18 @@ import { ref } from 'vue'
import axios from 'axios' import axios from 'axios'
export default function useResource(resource) { export default function useResource(resource) {
console.log('useBlog') console.log('useBlog')
axios.defaults.headers.common['app-id'] = '628cbf673800f869ed218152' // for all requests
const apiBaseUrl = 'https://628cc5c6a3fd714fd03914c2.mockapi.io/api/'
const items = ref([]) const items = ref([])
const item = ref(null) const item = ref(null)
const fetchAll = async () => { const fetchAll = async () => {
await axios await axios
.get(resource) .get(apiBaseUrl + resource)
.then((response) => { .then((response) => {
console.log(response.data)
items.value = response.data items.value = response.data
}) })
} }

2
assets/js/index.js
View File

@@ -6,8 +6,6 @@ import '../styles/ckeditor.css'
import 'fork-awesome/scss/fork-awesome.scss' import 'fork-awesome/scss/fork-awesome.scss'
import { createApp } from 'vue' import { createApp } from 'vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap'
import { createPinia } from 'pinia' import { createPinia } from 'pinia'

442
assets/styles/_old.scss Normal file
View File

@@ -0,0 +1,442 @@
/*
jet black (tiefschwarz) - RAL 9005: #0e0e10, rgba(14, 14, 16, 1.0);
mango: #FF8040, rgba(255, 130, 67, 1.0);
gray: #a1a1a1, rgba(161, 161, 161, 1.0)
*/
/*
@media (prefers-color-scheme: light) {}
@media (prefers-color-scheme: dark) {}
*/
/* debug */
* {
//border: 1px solid gray;
}
html, body{
margin: 0;
padding: 0;
background: black;
background: linear-gradient(90deg, rgba(14,14,16,1) 0%, rgba(255,128,64,1) 35%, rgba(14,14,16,1) 100%);
}
// the ~ allows you to reference things in node_modules
@import 'quill/dist/quill.core.css';
// customize some Bootstrap variables
$bs-primary: #FF8040;
$primary: #FF8040;
$body-bg: #0E0E10;
$body-color: darken(white, 20);
$border-primary: #FF8040;
$dropdown-dark-bg: black;
$dropdown-dark-link-color: $primary;
$dropdown-dark-border-color: $primary;
$jet-black: #0e0e10;
$mango: #FF8040;
.btn-primary {
border-color: $primary;
}
.btn-outline-primary {
color: $primary;
border-color: $primary;
}
.pages-editor-raw {
width: 100%;
height: 650px !important;
background-color: black;
color: white;
}
.ql-container {
overflow-y: scroll;
height: 650px !important;
}
.no-overflow {
overflow-y: visible !important;
height: auto !important;
}
.ql-syntax {
background-color: #222222;
border: 1px solid #888;
border-left: 3px solid $primary;
color: #666;
page-break-inside: avoid;
font-family: monospace;
font-size: 15px;
line-height: 1.6;
margin-bottom: 1.6em;
max-width: 100%;
overflow: auto;
padding: 1em 1.5em;
display: block;
word-wrap: break-word;
}
.ql-editor {
counter-reset: line;
padding-left: 0;
}
.ql-editor div:before {
counter-increment: line;
content: counter(line);
display: inline-block;
border-right: 1px solid red;
padding: 0 .5em;
margin-right: .5em;
color: #888
}
.ql-syntax pre:before {
counter-increment: line;
content: counter(line);
display: inline-block;
border-right: 1px solid #ddd;
padding: 2px .5em;
margin-right: .5em;
color: #888
}
/*
pre span.hljs-tag::before, span.hljs-attr::before {
content: "xxx";
display: inline-block;
}
*/
.wrapper {
clear: both;
position: sticky;
top: 0;
}
a:link {
text-decoration: none;
color: $mango;
}
a:visited {
text-decoration: none;
color: $mango;
}
a:hover {
text-decoration: none;
color: $mango;
}
a:active {
text-decoration: none;
color: $mango;
}
body {
padding-top: 95px;
padding-bottom: 155px;
}
.row.content {
height: 350px;
}
.col-center {
margin: 0 auto;
}
.sidenav-left {
padding-top: 20px;
padding-left: 0;
padding-right: 0;
background-color: #f1f1f1;
height: 100%;
width: auto;
margin-left: 3em !important;
}
.sidenav-left ul {
list-style-type: none;
line-height: 2.1;
}
.sidenav-right {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {
height: auto;
}
}
.navbar {
opacity: 0.9;
}
footer {
opacity: 0.9;
}
.navbar-top {
border-bottom-width: 1px;
border-bottom-color: $primary;
padding-top: 0;
padding-bottom: 0;
opacity: 0.9;
}
.navbar-bottom {
border-top-width: 1px;
border-top-color: $primary;
padding-top: 0;
padding-bottom: 0;
height: 125px;
opacity: 0.9;
}
.navbar-nav > li > .dropdown-menu {
background-color: black;
opacity: 0.8;
}
.display-wrapper {
text-align: left;
width: 90%;
margin: 0 auto 150px;
}
.button-login {
margin-top: 25px;
}
.main-content {
}
.box {
border-width: 1px;
border-style: solid;
border-color: $primary;
border-radius: 10px;
color: lightgray;
background: black;
align-content: center;
margin: 15px 15px 20px;
height: auto;
}
/* BlogPosts */
.main-article {
border: 2px solid #efefee;
Background: #fff;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.main-article img {
width: 100%;
height: 250px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-top: 5px solid lightblue;
}
.blog-container {
border: 1px solid $primary;
border-radius: 5px;
margin-bottom: 25px;
background: #0E0E10 url('../images/bg.jpeg') center;
}
.main-article-link, .article-container a {
text-decoration: none;
color: #000;
}
.main-article-link:hover {
text-decoration: none;
color: #000;
}
.article-title {
min-width: 300px;
}
.article-text {
text-align: justify;
hyphens: auto;
}
@media (max-width: 440px) {
.article-title {
min-width: 100px;
max-width: 245px;
}
}
.circle {
position:fixed;
width:500px;
height:600px;
margin:-300px auto auto -250px;
top:50%;
left:50%;
text-align:center;
}
.teaser-image {
object-fit: contain;
width: 800px;
border-radius: 5px;
margin: 7px;
}
.project-container {
border-radius: 5px;
}
.blog-img {
height: 100px;
width: 100px;
border-radius: 5px;
border-width: 1px;
border-color: $primary;
margin: 7px;
}
.article-author-img {
height: 50px;
border: 1px solid $primary;
margin-left: 25px;
}
.blog-details {
font-size: .8em;
margin-right: 15px;
}
.blog-teaser {
margin-left: 15px;
}
/* registration form */
.social_icon span {
font-size: 60px;
margin-left: 10px;
color: $primary;
}
.social_icon span:hover{
color: white;
cursor: pointer;
}
.card{
height: 370px;
margin-top: 45px;
margin-bottom: auto;
width: 500px;
background-color: #383c4a;
border-color: $primary;
padding: 15px;
background-image: url('../images/bg.jpeg');
border-bottom-left-radius: 10px !important;
border-bottom-right-radius: 10px !important;
}
.card-header {
position: absolute;
color: black;
background-color: $primary;
width: 500px;
height: 55px;
border-top-left-radius: 15px !important;
border-top-right-radius: 15px !important;
}
.card-body {
}
.social_icon{
/* position: absolute;
right: 20px;
top: 45px;
*/
}
.input-group-prepend span{
width: 50px;
background-color: $primary;
color: black;
border:0 !important;
height: 40px;
margin-bottom: 15px;
border-radius: 10px 0 0 10px;
}
.form-control {
height: 40px;
background-image: url('../images/bg.jpeg') !important;
color: white;
border-color: $primary;
}
input:focus{
/* TODO */
}
.submit-button {
color: $primary;
background-color: black;
width: 100px;
border-radius: 10px;
}
.submit-button:hover{
color: black;
background-color: $primary;
}
.links{
color: white;
}
.teaser-text {
height: 180px;
}
.content-text {
height: 400px;
}
.file-input {
color: $primary;
}

358
assets/styles/app.scss
View File

@@ -22,40 +22,14 @@ html, body{
background: linear-gradient(90deg, rgba(14,14,16,1) 0%, rgba(255,128,64,1) 35%, rgba(14,14,16,1) 100%); background: linear-gradient(90deg, rgba(14,14,16,1) 0%, rgba(255,128,64,1) 35%, rgba(14,14,16,1) 100%);
} }
$primary: #FF8040;
$jet-black: #0e0e10;
// the ~ allows you to reference things in node_modules
@import 'bootstrap/dist/css/bootstrap.css';
@import 'bootsdark/dist/bootsdark.min.css';
@import 'quill/dist/quill.core.css'; @import 'quill/dist/quill.core.css';
// customize some Bootstrap variables // customize some Bootstrap variables
$bs-primary: #FF8040;
$primary: #FF8040;
$body-bg: #0E0E10;
$body-color: darken(white, 20);
$border-primary: #FF8040;
$dropdown-dark-bg: black;
$dropdown-dark-link-color: $primary;
$dropdown-dark-border-color: $primary;
$jet-black: #0e0e10;
$mango: #FF8040;
.btn-primary {
border-color: $primary;
}
.btn-outline-primary {
color: $primary;
border-color: $primary;
}
.pages-editor-raw { .pages-editor-raw {
width: 100%; width: 100%;
height: 650px !important; height: 650px !important;
@@ -115,331 +89,3 @@ $mango: #FF8040;
margin-right: .5em; margin-right: .5em;
color: #888 color: #888
} }
/*
pre span.hljs-tag::before, span.hljs-attr::before {
content: "xxx";
display: inline-block;
}
*/
.wrapper {
clear: both;
position: sticky;
top: 0;
}
a:link {
text-decoration: none;
color: $mango;
}
a:visited {
text-decoration: none;
color: $mango;
}
a:hover {
text-decoration: none;
color: $mango;
}
a:active {
text-decoration: none;
color: $mango;
}
body {
padding-top: 95px;
padding-bottom: 155px;
}
.row.content {
height: 350px;
}
.col-center {
margin: 0 auto;
}
.sidenav-left {
padding-top: 20px;
padding-left: 0;
padding-right: 0;
background-color: #f1f1f1;
height: 100%;
width: auto;
margin-left: 3em !important;
}
.sidenav-left ul {
list-style-type: none;
line-height: 2.1;
}
.sidenav-right {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {
height: auto;
}
}
.navbar {
opacity: 0.9;
}
footer {
opacity: 0.9;
}
.navbar-top {
border-bottom-width: 1px;
border-bottom-color: $primary;
padding-top: 0;
padding-bottom: 0;
opacity: 0.9;
}
.navbar-bottom {
border-top-width: 1px;
border-top-color: $primary;
padding-top: 0;
padding-bottom: 0;
height: 125px;
opacity: 0.9;
}
.navbar-nav > li > .dropdown-menu {
background-color: black;
opacity: 0.8;
}
.display-wrapper {
text-align: left;
width: 90%;
margin: 0 auto 150px;
}
.button-login {
margin-top: 25px;
}
.main-content {
}
.box {
border-width: 1px;
border-style: solid;
border-color: $primary;
border-radius: 10px;
color: lightgray;
background: black;
align-content: center;
margin: 15px 15px 20px;
height: auto;
}
/* BlogPosts */
.main-article {
border: 2px solid #efefee;
Background: #fff;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.main-article img {
width: 100%;
height: 250px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-top: 5px solid lightblue;
}
.blog-container {
border: 1px solid $primary;
border-radius: 5px;
margin-bottom: 25px;
background: #0E0E10 url('../images/bg.jpeg') center;
}
.main-article-link, .article-container a {
text-decoration: none;
color: #000;
}
.main-article-link:hover {
text-decoration: none;
color: #000;
}
.article-title {
min-width: 300px;
}
.article-text {
text-align: justify;
hyphens: auto;
}
@media (max-width: 440px) {
.article-title {
min-width: 100px;
max-width: 245px;
}
}
.circle {
position:fixed;
width:500px;
height:600px;
margin:-300px auto auto -250px;
top:50%;
left:50%;
text-align:center;
}
.teaser-image {
object-fit: contain;
width: 800px;
border-radius: 5px;
margin: 7px;
}
.project-container {
border-radius: 5px;
}
.blog-img {
height: 100px;
width: 100px;
border-radius: 5px;
border-width: 1px;
border-color: $primary;
margin: 7px;
}
.article-author-img {
height: 50px;
border: 1px solid $primary;
margin-left: 25px;
}
.blog-details {
font-size: .8em;
margin-right: 15px;
}
.blog-teaser {
margin-left: 15px;
}
/* registration form */
.social_icon span {
font-size: 60px;
margin-left: 10px;
color: $primary;
}
.social_icon span:hover{
color: white;
cursor: pointer;
}
.card{
height: 370px;
margin-top: 45px;
margin-bottom: auto;
width: 500px;
background-color: #383c4a;
border-color: $primary;
padding: 15px;
background-image: url('../images/bg.jpeg');
border-bottom-left-radius: 10px !important;
border-bottom-right-radius: 10px !important;
}
.card-header {
position: absolute;
color: black;
background-color: $primary;
width: 500px;
height: 55px;
border-top-left-radius: 15px !important;
border-top-right-radius: 15px !important;
}
.card-body {
}
.social_icon{
/* position: absolute;
right: 20px;
top: 45px;
*/
}
.input-group-prepend span{
width: 50px;
background-color: $primary;
color: black;
border:0 !important;
height: 40px;
margin-bottom: 15px;
border-radius: 10px 0 0 10px;
}
.form-control {
height: 40px;
background-image: url('../images/bg.jpeg') !important;
color: white;
border-color: $primary;
}
input:focus{
/* TODO */
}
.submit-button {
color: $primary;
background-color: black;
width: 100px;
border-radius: 10px;
}
.submit-button:hover{
color: black;
background-color: $primary;
}
.links{
color: white;
}
.teaser-text {
height: 180px;
}
.content-text {
height: 400px;
}
.file-input {
color: $primary;
}

5
assets/styles/tailwind.css Normal file
View File

@@ -0,0 +1,5 @@
@tailwind base;
@tailwind componts;
@tailwind utilities;

2
config/packages/security.yaml
View File

@@ -1,4 +1,4 @@
security: hisecurity:
enable_authenticator_manager: true enable_authenticator_manager: true
hide_user_not_found: false hide_user_not_found: false

12
package.json
View File

@@ -3,13 +3,16 @@
"@hotwired/stimulus": "^3.0.0", "@hotwired/stimulus": "^3.0.0",
"@symfony/stimulus-bridge": "^3.0.0", "@symfony/stimulus-bridge": "^3.0.0",
"@symfony/webpack-encore": "^2.0.0", "@symfony/webpack-encore": "^2.0.0",
"autoprefixer": "^10.4.7",
"core-js": "^3.0.0", "core-js": "^3.0.0",
"file-loader": "^6.0.0", "file-loader": "^6.0.0",
"jquery": "^3.6.0", "jquery": "^3.6.0",
"less-loader": "^10.0.0", "less-loader": "^10.0.0",
"postcss": "^8.4.14",
"regenerator-runtime": "^0.13.2", "regenerator-runtime": "^0.13.2",
"sass": "^1.50.0", "sass": "^1.50.0",
"sass-loader": "^12.0.0", "sass-loader": "^12.0.0",
"tailwindcss": "^3.0.24",
"ts-loader": "^9.0.0", "ts-loader": "^9.0.0",
"typescript": "^4.6.4", "typescript": "^4.6.4",
"vue-loader": "^17.0.0", "vue-loader": "^17.0.0",
@@ -26,14 +29,15 @@
}, },
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-free": "^6.1.1", "@fortawesome/fontawesome-free": "^6.1.1",
"@typescript-eslint/eslint-plugin-tslint": "^5.26.0",
"@vueup/vue-quill": "^1.0.0-beta.8", "@vueup/vue-quill": "^1.0.0-beta.8",
"axios": "^0.27.1", "axios": "^0.27.1",
"bootsdark": "^1.0.16", "bootsdark": "^1.0.16",
"bootstrap": "^5.1.3",
"eslint": "^8.15.0", "eslint": "^8.15.0",
"eslint-config-airbnb-base": "^15.0.0", "eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-import": "^2.26.0", "eslint-plugin-import": "^2.26.0",
"eslint-plugin-vue": "^8.7.1", "eslint-plugin-tailwindcss": "^3.5.0",
"eslint-plugin-vue": "^9.0.1",
"fork-awesome": "^1.2.0", "fork-awesome": "^1.2.0",
"highlight.js": "^11.5.1", "highlight.js": "^11.5.1",
"husky": "^7.0.4", "husky": "^7.0.4",
@@ -41,9 +45,11 @@
"marked": "^4.0.15", "marked": "^4.0.15",
"pinia": "^2.0.14", "pinia": "^2.0.14",
"popper.js": "^1.16.1", "popper.js": "^1.16.1",
"primevue": "^3.12.6", "postcss-import": "^14.1.0",
"postcss-loader": "^7.0.0",
"quill": "^1.3.7", "quill": "^1.3.7",
"quill-html-edit-button": "^2.2.12", "quill-html-edit-button": "^2.2.12",
"tailwind": "^4.0.0",
"vue": "3", "vue": "3",
"vue-navigation-bar": "^5.0.0", "vue-navigation-bar": "^5.0.0",
"vue-router": "4" "vue-router": "4"

7
postcss.config.js Normal file
View File

@@ -0,0 +1,7 @@
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
require('postcss-import')
]
}

11
tailwind.config.js Normal file
View File

@@ -0,0 +1,11 @@
module.exports = {
theme: {
extend: {}
},
variants: {},
plugins: [],
//prefix:
content: [
'./assets/**/*.{vue,js}'
]
}

1
templates/base.html.twig
View File

@@ -8,6 +8,7 @@
{% block stylesheets %} {% block stylesheets %}
{{ encore_entry_link_tags('app') }} {{ encore_entry_link_tags('app') }}
{{ encore_entry_link_tags('tailwind') }}
{% endblock %} {% endblock %}
{% block javascripts %} {% block javascripts %}

7
webpack.config.js
View File

@@ -14,6 +14,7 @@ Encore
to: 'images/[path][name].[ext]' to: 'images/[path][name].[ext]'
}) })
.addEntry('app', './assets/js/index.js') .addEntry('app', './assets/js/index.js')
.addEntry('tailwind', './assets/styles/tailwind.css')
.splitEntryChunks() .splitEntryChunks()
// will require an extra script tag for runtime.js // will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app // but, you probably want this, unless you're building a single-page app
@@ -37,6 +38,12 @@ Encore
.enableSassLoader() .enableSassLoader()
.enableVueLoader(() => {}, { runtimeCompilerBuild: false }) .enableVueLoader(() => {}, { runtimeCompilerBuild: false })
.enableTypeScriptLoader() .enableTypeScriptLoader()
.enablePostCssLoader((options) => {
options.postcssOptions = {
// directory where the postcss.config.js file is stored
path: './postcss.config.js'
}
})
.autoProvidejQuery() .autoProvidejQuery()
module.exports = Encore.getWebpackConfig() module.exports = Encore.getWebpackConfig()

1407
yarn.lock
View File

File diff suppressed because it is too large Load Diff