c3lf/c3lf-system-3
9
0
Fork 0
Code Issues 55 Pull requests Projects 2 Releases Wiki Activity Actions

wip

Browse source
This commit is contained in:
j3d1 2023-11-23 23:17:20 +01:00
parent 0f911589ca
commit 5bdfe313de
65 changed files with 2219 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

6
web/src/components/Lightbox.vue
View file

@ -16,15 +16,11 @@
<script>
import Modal from '@/components/Modal';
import config from '../config';
export default {
name: 'Lightbox',
components: {Modal},
props: ['file'],
data: () => ({
baseUrl: config.service.url,
}),
props: ['file']
};
</script>

92
web/src/components/Navbar.vue
View file

@ -10,27 +10,25 @@
:class="{ active: event.slug === getEventSlug }" @click="changeEvent(event)">{{ event.slug }}</a>
</div>
</div>
<div class="custom-control-inline mr-1">
<button type="button" class="btn mx-1 text-nowrap btn-success" @click="$emit('addClicked')">
<font-awesome-icon icon="plus"/>
<span class="d-none d-md-inline">&nbsp;Add</span>
</button>
<div class="btn-group btn-group-toggle">
<button :class="['btn', 'btn-info', { active: layout === 'cards' }]" @click="setLayout('cards')">
<font-awesome-icon icon="th"/>
</button>
<button :class="['btn', 'btn-info', { active: layout === 'table' }]" @click="setLayout('table')">
<font-awesome-icon icon="list"/>
</button>
</div>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<ul class="nav nav-tabs flex-nowrap">
<li class="nav-item">
<router-link :to="{name: 'items', params: {event: getEventSlug}}"
:class="['nav-link', { active: getActiveView === 'items' }]">
Items
</router-link>
</li>
<li class="nav-item" v-if="checkRole('postevent')">
<router-link :to="{name: 'tickets', params: {event: getEventSlug}}"
:class="['nav-link', { active: getActiveView === 'tickets' }]">
Tickets
</router-link>
</li>
<li class="nav-item" v-if="checkRole('admin')">
<router-link :to="{name: 'admin'}" :class="['nav-link', { active: getActiveView === 'admin' }]">
Admin
</router-link>
</li>
</ul>
<form class="form-inline mt-1 my-lg-auto my-xl-auto w-100 d-inline">
<input
class="form-control w-100"
@ -41,10 +39,27 @@
disabled
>
</form>
<div class="custom-control-inline mr-1">
<div class="btn-group btn-group-toggle mx-1">
<button :class="['btn', 'btn-info', { active: layout === 'cards' }]" @click="setLayout('cards')">
<font-awesome-icon icon="th"/>
</button>
<button :class="['btn', 'btn-info', { active: layout === 'table' }]" @click="setLayout('table')">
<font-awesome-icon icon="list"/>
</button>
</div>
<button type="button" class="btn text-nowrap btn-success" @click="$emit('addClicked')">
<font-awesome-icon icon="plus"/>
<span class="d-none d-md-inline">&nbsp;Add</span>
</button>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<!--li class="nav-item dropdown">
<button class="btn nav-link dropdown-toggle" type="button" id="dropdownMenuButton2"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ getActiveView }}
@ -55,7 +70,7 @@
<a class="nav-link text-nowrap" href="#" @click="changeView(link)">{{ link.title }}</a>
</li>
</ul>
</li>
</li-->
<li class="nav-item" v-for="(link, index) in links" v-bind:key="index">
<a class="nav-link text-nowrap" :href="link.path" @click.prevent="navigateTo(link.path)">
@ -80,12 +95,12 @@ export default {
//{'title':'mass-edit','path':'massedit'},
],
links: [
{'title': 'howto engel', 'path': '/howto/'}
{'title': 'howto engel', 'path': '/howto/'},
]
}),
computed: {
...mapState(['events', 'activeEvent', 'layout']),
...mapGetters(['getEventSlug', 'getActiveView']),
...mapGetters(['getEventSlug', 'getActiveView', "checkRole"]),
},
methods: {
...mapActions(['changeEvent', 'changeView', 'searchEventItems']),
@ -99,4 +114,29 @@ export default {
<style lang="scss">
@import "../scss/navbar.scss";
.nav-tabs {
margin-bottom: -0.5rem !important;
border-bottom: var(--gray) solid 1px !important;
& .nav-item {
margin-right: 0.5em;
&:first-child {
margin-left: 0.5em;
}
}
& .nav-link {
padding-bottom: 1rem !important;
border: var(--gray) solid 1px !important;
border-bottom: none !important;
&.active {
background: black !important;
border-bottom: none;
color: white !important;
}
}
}
</style>

336
web/src/components/Timeline.vue Normal file
View file

@ -0,0 +1,336 @@
<template>
<ol class="timeline">
<li class="timeline-item">
<span class="timeline-item-icon | faded-icon">
<font-awesome-icon icon="pen"/>
</span>
<div class="timeline-item-description">
<i class="avatar | small">
<font-awesome-icon icon="user"/>
</i>
<span><a href="#">Luna Bonifacio</a> has changed <a href="#">2 attributes</a> on <time
datetime="21-01-2021">Jan 21, 2021</time></span>
</div>
</li>
<li class="timeline-item">
<span class="timeline-item-icon | faded-icon">
<font-awesome-icon icon="check"/>
</span>
<div class="timeline-item-description">
<i class="avatar | small">
<font-awesome-icon icon="user"/>
</i>
<span><a href="#">Yoan Almedia</a> moved <a href="#">Eric Lubin</a> to <a href="#">📚 Technical Test</a> on <time
datetime="20-01-2021">Jan 20, 2021</time></span>
</div>
</li>
<li class="timeline-item | extra-space">
<span class="timeline-item-icon | filled-icon">
<font-awesome-icon icon="envelope"/>
</span>
<div class="timeline-item-wrapper">
<div class="timeline-item-description">
<i class="avatar | small">
<font-awesome-icon icon="user"/>
</i>
<span><a href="#">Yoan Almedia</a> commented on <time
datetime="20-01-2021">Jan 20, 2021</time></span>
</div>
<div class="comment">
<p>I've sent him the assignment we discussed recently, he is coming back to us this week. Regarding
to our last call, I really enjoyed talking to him and so far he has the profile we are looking
for. Can't wait to see his technical test, I'll keep you posted and we'll debrief it all
together!😊</p>
<button class="button">👏 2</button>
<button class="button | square">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z"/>
<path fill="currentColor"
d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zM7 12a5 5 0 0 0 10 0h-2a3 3 0 0 1-6 0H7z"/>
</svg>
</button>
</div>
<button class="show-replies">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-forward"
width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M15 11l4 4l-4 4m4 -4h-11a4 4 0 0 1 0 -8h1"/>
</svg>
Show 3 replies
<span class="avatar-list">
<i class="avatar | small">
<font-awesome-icon icon="user"/>
</i>
<i class="avatar | small">
<font-awesome-icon icon="user"/>
</i>
<i class="avatar | small">
<font-awesome-icon icon="user"/>
</i>
</span>
</button>
</div>
</li>
<li class="timeline-item">
<span class="timeline-item-icon | faded-icon">
<font-awesome-icon icon="comment"/>
</span>
<div class="new-comment">
<input type="text" placeholder="Add a comment..."/>
</div>
</li>
</ol>
</template>
<script>
export default {
name: 'Timeline',
props: {
timeline: {
type: Array,
default: () => []
}
},
};
</script>
<style>
*,
*:before,
*:after {
box-sizing: border-box;
}
:root {
--c-grey-100: #f4f6f8;
--c-grey-200: #e3e3e3;
--c-grey-300: #b2b2b2;
--c-grey-400: #7b7b7b;
--c-grey-500: #3d3d3d;
--c-blue-500: #688afd;
}
button,
input,
select,
textarea {
font: inherit;
}
a {
color: inherit;
}
img {
display: block;
max-width: 100%;
}
/* End basic CSS override */
.timeline {
width: 85%;
display: flex;
flex-direction: column;
padding: 32px 0 32px 32px;
border-left: 2px solid var(--c-grey-200);
font-size: 1.125rem;
margin: 0 auto;
}
.timeline-item {
display: flex;
gap: 24px;
& + * {
margin-top: 24px;
}
& + .extra-space {
margin-top: 48px;
}
}
.new-comment {
width: 100%;
input {
border: 1px solid var(--c-grey-200);
border-radius: 6px;
height: 48px;
padding: 0 16px;
width: 100%;
&::placeholder {
color: var(--c-grey-300);
}
&:focus {
border-color: var(--c-grey-300);
outline: 0; /* Don't actually do this */
box-shadow: 0 0 0 4px var(--c-grey-100);
}
}
}
.timeline-item-icon {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border-radius: 50%;
margin-left: -57px;
flex-shrink: 0;
overflow: hidden;
svg {
width: 20px;
height: 20px;
}
&.faded-icon {
background-color: var(--c-grey-100);
color: var(--c-grey-400);
}
&.filled-icon {
background-color: var(--c-blue-500);
color: #fff;
}
}
.timeline-item-description {
display: flex;
padding-top: 6px;
gap: 8px;
color: var(--c-grey-400);
img {
flex-shrink: 0;
}
a {
/*color: var(--c-grey-500);*/
font-weight: 500;
text-decoration: none;
&:hover,
&:focus {
outline: 0; /* Don't actually do this */
color: var(--c-blue-500);
}
}
}
.avatar {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
overflow: hidden;
aspect-ratio: 1 / 1;
flex-shrink: 0;
width: 40px;
height: 40px;
&.small {
width: 28px;
height: 28px;
}
img {
object-fit: cover;
}
}
.comment {
margin-top: 12px;
/*color: var(--c-grey-500);*/
border: 1px solid var(--c-grey-200);
background: var(--dark);
border-radius: 6px;
padding: 16px;
font-size: 1rem;
}
.button {
border: 0;
display: inline-flex;
vertical-align: middle;
margin-right: 4px;
margin-top: 12px;
align-items: center;
justify-content: center;
font-size: 1rem;
height: 32px;
padding: 0 8px;
background-color: var(--c-grey-100);
flex-shrink: 0;
cursor: pointer;
border-radius: 99em;
&:hover {
background-color: var(--c-grey-200);
}
&.square {
border-radius: 50%;
color: var(--c-grey-400);
width: 32px;
height: 32px;
padding: 0;
svg {
width: 24px;
height: 24px;
}
&:hover {
background-color: var(--c-grey-200);
color: var(--c-grey-500);
}
}
}
.show-replies {
color: var(--c-grey-300);
background-color: transparent;
border: 0;
padding: 0;
margin-top: 16px;
display: flex;
align-items: center;
gap: 6px;
font-size: 1rem;
cursor: pointer;
svg {
flex-shrink: 0;
width: 24px;
height: 24px;
}
&:hover,
&:focus {
color: var(--c-grey-200);
}
}
.avatar-list {
display: flex;
align-items: center;
& > * {
position: relative;
box-shadow: 0 0 0 2px #fff;
background: var(--dark);
margin-right: -8px;
}
}
</style>