before symfony/security-bundle update
This commit is contained in:
parent
aec0b4356a
commit
aa84f3c4c6
@ -3,10 +3,12 @@
|
||||
// add more generic rulesets here, such as:
|
||||
"eslint:recommended",
|
||||
"airbnb-base",
|
||||
"plugin:vue/recommended"
|
||||
"plugin:vue/recommended",
|
||||
"plugin:vue/vue3-recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 9,
|
||||
"parser": "espree",
|
||||
"ecmaVersion": 2022,
|
||||
"sourceType": "module"
|
||||
},
|
||||
"env": {
|
||||
@ -47,7 +49,7 @@
|
||||
"no-tabs": "off",
|
||||
"comma-dangle": "off",
|
||||
"no-alert": 0,
|
||||
"no-unused-vars": "warn",
|
||||
"no-unused-vars": "off",
|
||||
"spaced-comment": "off",
|
||||
"no-param-reassign": 0,
|
||||
"import/extensions": 0,
|
||||
|
||||
3
TODO
3
TODO
@ -1,3 +1,6 @@
|
||||
entity types
|
||||
|
||||
|
||||
- use quill vue
|
||||
- add linenumbering
|
||||
- add yntax highlighning
|
||||
|
||||
@ -13,9 +13,18 @@
|
||||
<the-sidebar/>
|
||||
</div>
|
||||
<div class="col-xl-9">
|
||||
<router-view
|
||||
@user-authenticated="onUserAuthenticated"
|
||||
/>
|
||||
<suspense>
|
||||
<template #default>
|
||||
<router-view
|
||||
@user-authenticated="onUserAuthenticated"
|
||||
/>
|
||||
</template>
|
||||
<template #fallback>
|
||||
<div class="loading">
|
||||
loading …
|
||||
</div>
|
||||
</template>
|
||||
</suspense>
|
||||
</div>
|
||||
<div class="col mt-2"/>
|
||||
</div>
|
||||
|
||||
@ -53,7 +53,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineEmits } from 'vue'
|
||||
import { ref } from 'vue'
|
||||
import axios from 'axios'
|
||||
|
||||
const username = ref('')
|
||||
|
||||
@ -1,122 +1,45 @@
|
||||
<template>
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top navbar-top">
|
||||
<router-link
|
||||
class="navbar-brand"
|
||||
:to="{ name: 'Home' }"
|
||||
>
|
||||
<img
|
||||
src="/build/images/24unix/24_logo_bg_96x96.png"
|
||||
class="img-fluid"
|
||||
alt="24unix.net"
|
||||
<nav
|
||||
class="
|
||||
grid fixed inset-x-0 top-0 flex-wrap justify-between items-center py-0 leading-6 border-b
|
||||
@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"
|
||||
style="z-index: 1030;"
|
||||
>
|
||||
<div>
|
||||
<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>
|
||||
<button
|
||||
class="navbar-toggler border-0"
|
||||
type="button"
|
||||
data-toggle="collapse"
|
||||
data-target="#CollapsingNavbar"
|
||||
>
|
||||
☰
|
||||
</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"
|
||||
/>
|
||||
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>
|
||||
<img
|
||||
src="/build/images/24unix/24_logo_bg_96x96.png"
|
||||
class="align-middle box-border"
|
||||
alt="24unix.net"
|
||||
>
|
||||
</router-link>
|
||||
</div>
|
||||
<!--
|
||||
<span
|
||||
class="fa fa-lg fa-fw fa-wrench"
|
||||
aria-hidden="true"
|
||||
/> Settings
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-divider/>
|
||||
<b-dropdown-item @click="logout">
|
||||
<span
|
||||
class="fa fa-lg fa-fw fa-sign-out"
|
||||
aria-hidden="true"
|
||||
/> Logout
|
||||
</b-dropdown-item>
|
||||
-->
|
||||
<div class="text-end">
|
||||
<router-link
|
||||
id="buttonLogin"
|
||||
class="inline-block py-1 px-3 mt-6 text-base font-normal leading-normal text-center
|
||||
text-black align-middle bg-orange-400 rounded border border-orange-400 border-solid
|
||||
cursor-pointer select-none box-border hover:border-orange-400 hover:bg-orange-400 hover:text-black
|
||||
focus:border-orange-400 focus:bg-orange-400 focus:text-black"
|
||||
:to="{ name: 'LoginForm' }"
|
||||
role="button"
|
||||
style="text-decoration: none; transition: none 0s ease 0s; list-style: outside none none;"
|
||||
>
|
||||
<span class="fa fa-sign-in fa-lg fa-fw"></span> Log In
|
||||
</router-link>
|
||||
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import axios from 'axios'
|
||||
import 'vue-navigation-bar/dist/vue-navigation-bar.css'
|
||||
|
||||
@ -132,6 +55,11 @@ const props = defineProps({
|
||||
})
|
||||
|
||||
const isLoggedIn = () => (!!this.user)
|
||||
let showDropdown = ref(false)
|
||||
const toggleDropDown = () => {
|
||||
console.log('toggle', showDropdown)
|
||||
showDropdown.value = !showDropdown.value
|
||||
}
|
||||
|
||||
/*
|
||||
const logout = () => ({
|
||||
|
||||
@ -1,33 +1,44 @@
|
||||
<template>
|
||||
<div
|
||||
class="
|
||||
flex
|
||||
m-2
|
||||
gap-2
|
||||
items-center
|
||||
shadow-md
|
||||
w-1/4
|
||||
flex-grow
|
||||
rounded
|
||||
overflow-hidden
|
||||
"
|
||||
style="border: 1px solid #eee"
|
||||
>
|
||||
<img
|
||||
src="https://via.placeholder.com/150"
|
||||
style="background: #cccccc"
|
||||
width="150"
|
||||
height="150"
|
||||
alt="placeholder"
|
||||
>
|
||||
<router-link :to="{ name: 'BlogPost', params: { id: post.id } }">
|
||||
{{ post.title }}<br>
|
||||
User: {{ post.userId }}
|
||||
</router-link>
|
||||
<div>
|
||||
<!-- media -->
|
||||
<div class="h-64 w-auto md:w-1/2">
|
||||
<img
|
||||
class="inset-0 h-full w-full object-cover object-center"
|
||||
src="/build/images/tracer_schmolle150x150.png"
|
||||
alt=""
|
||||
>
|
||||
</div>
|
||||
<!-- content -->
|
||||
<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">
|
||||
{{ post.title }}
|
||||
</h3>
|
||||
<p class="mt-2">
|
||||
{{ post.body.split('.')[0] }} …
|
||||
</p>
|
||||
<p class="text-sm text-gray-700 uppercase tracking-wide font-semibold mt-2">
|
||||
{{ post.createdAt.toLocaleString('de-DE') }}
|
||||
</p>
|
||||
<p v-if="blogUser">
|
||||
{{ blogUser }}
|
||||
</p>
|
||||
<p class="font-normal text-gray-700 mb-3">
|
||||
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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
console.log('BlogCard')
|
||||
import useResource from '@/composables/useResource'
|
||||
|
||||
const props = defineProps({
|
||||
post: {
|
||||
type: Object,
|
||||
@ -35,4 +46,10 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
const post = { ...props.post }
|
||||
|
||||
const { items: blogUser, fetchOne } = useResource('users')
|
||||
fetchOne(post.user)
|
||||
|
||||
console.log("blug user", post.user)
|
||||
console.log(blogUser.value)
|
||||
</script>
|
||||
|
||||
@ -1,34 +1,37 @@
|
||||
<template>
|
||||
<div
|
||||
class="
|
||||
flex
|
||||
m-2
|
||||
gap-2
|
||||
items-center
|
||||
shadow-md
|
||||
w-1/4
|
||||
flex-grow
|
||||
rounded
|
||||
overflow-hidden
|
||||
"
|
||||
style="border: 1px solid #eee"
|
||||
>
|
||||
BlogIndex
|
||||
|
||||
<BlogCard
|
||||
v-for="post in blogPosts"
|
||||
:key="post.id"
|
||||
:post="post"
|
||||
/>
|
||||
<div class="pt-6 pb-12 bg-gray-300">
|
||||
<div
|
||||
id="card"
|
||||
class=""
|
||||
>
|
||||
<h2 class="text-center font-serif uppercase text-4xl xl:text-5xl">
|
||||
Recent Articles
|
||||
</h2>
|
||||
<!-- container for all cards -->
|
||||
<div class="container w-100 lg:w-4/5 mx-auto flex flex-col">
|
||||
<BlogCard
|
||||
v-for="post in blogPosts"
|
||||
:key="post.id"
|
||||
:post="post"
|
||||
class="
|
||||
flex flex-col md:flex-row overflow-hidden bg-white rounded-lg
|
||||
shadow-xl mt-4 w-100 mx-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script setup async>
|
||||
|
||||
import useResource from '@/composables/useResource'
|
||||
//import useUser from '@/composables/useUser'
|
||||
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()
|
||||
|
||||
</script>
|
||||
|
||||
@ -32,20 +32,16 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { watch } from 'vue'
|
||||
<script setup async>
|
||||
import { useRoute } from 'vue-router'
|
||||
import useResource from '@/composables/useResource'
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
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')
|
||||
watch(
|
||||
() => ({ ...blogPost.value }),
|
||||
() => fetchOneUser(blogPost.value.userId)
|
||||
)
|
||||
fetchOneUser(blogPost.value.userId)
|
||||
|
||||
</script>
|
||||
|
||||
@ -72,7 +72,7 @@ export default {
|
||||
}
|
||||
|
||||
.tabs-header li.selected:hover {
|
||||
border-color: $body-color;
|
||||
/*border-color: $body-color; */
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -2,13 +2,18 @@ import { ref } from 'vue'
|
||||
import axios from 'axios'
|
||||
|
||||
export default function useResource(resource) {
|
||||
|
||||
console.log('useBlog')
|
||||
axios.defaults.headers.common['app-id'] = '628cbf673800f869ed218152' // for all requests
|
||||
|
||||
const apiBaseUrl = 'https://628cc5c6a3fd714fd03914c2.mockapi.io/api/'
|
||||
const items = ref([])
|
||||
const item = ref(null)
|
||||
const fetchAll = async () => {
|
||||
await axios
|
||||
.get(resource)
|
||||
.get(apiBaseUrl + resource)
|
||||
.then((response) => {
|
||||
console.log(response.data)
|
||||
items.value = response.data
|
||||
})
|
||||
}
|
||||
|
||||
@ -6,8 +6,6 @@ import '../styles/ckeditor.css'
|
||||
import 'fork-awesome/scss/fork-awesome.scss'
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import 'bootstrap/dist/css/bootstrap.css'
|
||||
import 'bootstrap/dist/js/bootstrap'
|
||||
|
||||
import { createPinia } from 'pinia'
|
||||
|
||||
|
||||
442
assets/styles/_old.scss
Normal file
442
assets/styles/_old.scss
Normal 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;
|
||||
}
|
||||
@ -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%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// the ~ allows you to reference things in node_modules
|
||||
|
||||
@import 'bootstrap/dist/css/bootstrap.css';
|
||||
@import 'bootsdark/dist/bootsdark.min.css';
|
||||
$primary: #FF8040;
|
||||
$jet-black: #0e0e10;
|
||||
|
||||
|
||||
@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;
|
||||
@ -115,331 +89,3 @@ $mango: #FF8040;
|
||||
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;
|
||||
}
|
||||
|
||||
5
assets/styles/tailwind.css
Normal file
5
assets/styles/tailwind.css
Normal file
@ -0,0 +1,5 @@
|
||||
@tailwind base;
|
||||
|
||||
@tailwind componts;
|
||||
|
||||
@tailwind utilities;
|
||||
@ -1,4 +1,4 @@
|
||||
security:
|
||||
hisecurity:
|
||||
enable_authenticator_manager: true
|
||||
hide_user_not_found: false
|
||||
|
||||
|
||||
12
package.json
12
package.json
@ -3,13 +3,16 @@
|
||||
"@hotwired/stimulus": "^3.0.0",
|
||||
"@symfony/stimulus-bridge": "^3.0.0",
|
||||
"@symfony/webpack-encore": "^2.0.0",
|
||||
"autoprefixer": "^10.4.7",
|
||||
"core-js": "^3.0.0",
|
||||
"file-loader": "^6.0.0",
|
||||
"jquery": "^3.6.0",
|
||||
"less-loader": "^10.0.0",
|
||||
"postcss": "^8.4.14",
|
||||
"regenerator-runtime": "^0.13.2",
|
||||
"sass": "^1.50.0",
|
||||
"sass-loader": "^12.0.0",
|
||||
"tailwindcss": "^3.0.24",
|
||||
"ts-loader": "^9.0.0",
|
||||
"typescript": "^4.6.4",
|
||||
"vue-loader": "^17.0.0",
|
||||
@ -26,14 +29,15 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^6.1.1",
|
||||
"@typescript-eslint/eslint-plugin-tslint": "^5.26.0",
|
||||
"@vueup/vue-quill": "^1.0.0-beta.8",
|
||||
"axios": "^0.27.1",
|
||||
"bootsdark": "^1.0.16",
|
||||
"bootstrap": "^5.1.3",
|
||||
"eslint": "^8.15.0",
|
||||
"eslint-config-airbnb-base": "^15.0.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",
|
||||
"highlight.js": "^11.5.1",
|
||||
"husky": "^7.0.4",
|
||||
@ -41,9 +45,11 @@
|
||||
"marked": "^4.0.15",
|
||||
"pinia": "^2.0.14",
|
||||
"popper.js": "^1.16.1",
|
||||
"primevue": "^3.12.6",
|
||||
"postcss-import": "^14.1.0",
|
||||
"postcss-loader": "^7.0.0",
|
||||
"quill": "^1.3.7",
|
||||
"quill-html-edit-button": "^2.2.12",
|
||||
"tailwind": "^4.0.0",
|
||||
"vue": "3",
|
||||
"vue-navigation-bar": "^5.0.0",
|
||||
"vue-router": "4"
|
||||
|
||||
7
postcss.config.js
Normal file
7
postcss.config.js
Normal file
@ -0,0 +1,7 @@
|
||||
module.exports = {
|
||||
plugins: [
|
||||
require('tailwindcss'),
|
||||
require('autoprefixer'),
|
||||
require('postcss-import')
|
||||
]
|
||||
}
|
||||
11
tailwind.config.js
Normal file
11
tailwind.config.js
Normal file
@ -0,0 +1,11 @@
|
||||
module.exports = {
|
||||
theme: {
|
||||
extend: {}
|
||||
},
|
||||
variants: {},
|
||||
plugins: [],
|
||||
//prefix:
|
||||
content: [
|
||||
'./assets/**/*.{vue,js}'
|
||||
]
|
||||
}
|
||||
@ -8,6 +8,7 @@
|
||||
|
||||
{% block stylesheets %}
|
||||
{{ encore_entry_link_tags('app') }}
|
||||
{{ encore_entry_link_tags('tailwind') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block javascripts %}
|
||||
@ -22,4 +23,4 @@
|
||||
</script>
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
@ -14,6 +14,7 @@ Encore
|
||||
to: 'images/[path][name].[ext]'
|
||||
})
|
||||
.addEntry('app', './assets/js/index.js')
|
||||
.addEntry('tailwind', './assets/styles/tailwind.css')
|
||||
.splitEntryChunks()
|
||||
// will require an extra script tag for runtime.js
|
||||
// but, you probably want this, unless you're building a single-page app
|
||||
@ -37,6 +38,12 @@ Encore
|
||||
.enableSassLoader()
|
||||
.enableVueLoader(() => {}, { runtimeCompilerBuild: false })
|
||||
.enableTypeScriptLoader()
|
||||
.enablePostCssLoader((options) => {
|
||||
options.postcssOptions = {
|
||||
// directory where the postcss.config.js file is stored
|
||||
path: './postcss.config.js'
|
||||
}
|
||||
})
|
||||
.autoProvidejQuery()
|
||||
|
||||
module.exports = Encore.getWebpackConfig()
|
||||
|
||||
Loading…
Reference in New Issue
Block a user