nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-05-21 20:44:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

vue frontend update

Browse Source
This commit is contained in:
carodej
2020-04-20 09:01:54 +02:00
parent 506c39896a
commit 8740cc7685
21 changed files with 416 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/VueFileManagerComponents/FilesView/ContextMenu.vue
+32 -3
View File
@@ -7,7 +7,7 @@
ref="contextmenu"
>
<!--ContextMenu for trash location-->
<ul v-if="$isTrashLocation()" class="menu-options" ref="list">
<ul v-if="$isTrashLocation() && $checkPermission('master')" class="menu-options" ref="list">
<li class="menu-option" @click="removeItem" v-if="item">
{{ $t('context_menu.delete') }}
</li>
@@ -25,8 +25,8 @@
</li>
</ul>
<!--ContextMenu for Base location-->
<ul v-if="$isBaseLocation()" class="menu-options" ref="list">
<!--ContextMenu for Base location with MASTER permission-->
<ul v-if="$isBaseLocation() && $checkPermission('master')" class="menu-options" ref="list">
<li class="menu-option" @click="addToFavourites" v-if="item && isFolder">
{{ isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites') }}
</li>
@@ -49,6 +49,35 @@
{{ $t('context_menu.download') }}
</li>
</ul>
<!--ContextMenu for Base location with EDITOR permission-->
<ul v-if="$isBaseLocation() && $checkPermission('editor')" class="menu-options" ref="list">
<li class="menu-option" @click="createFolder">
{{ $t('context_menu.create_folder') }}
</li>
<li class="menu-option" @click="removeItem" v-if="item">
{{ $t('context_menu.delete') }}
</li>
<li class="menu-option" @click="moveItem" v-if="item">
{{ $t('context_menu.move') }}
</li>
<li class="menu-option" @click="ItemDetail" v-if="item">
{{ $t('context_menu.detail') }}
</li>
<li class="menu-option" @click="downloadItem" v-if="! isFolder && item">
{{ $t('context_menu.download') }}
</li>
</ul>
<!--ContextMenu for Base location with VISITOR permission-->
<ul v-if="$isBaseLocation() && $checkPermission('visitor')" class="menu-options" ref="list">
<li class="menu-option" @click="ItemDetail" v-if="item">
{{ $t('context_menu.detail') }}
</li>
<li class="menu-option" @click="downloadItem" v-if="! isFolder && item">
{{ $t('context_menu.download') }}
</li>
</ul>
</div>
</template>
resources/js/components/VueFileManagerComponents/FilesView/DesktopToolbar.vue
+13 -6
View File
@@ -1,5 +1,5 @@
<template>
<div id="desktop-toolbar">
<div id="desktop-toolbar" v-if="! $isMinimalScale()">
<div class="toolbar-wrapper">
<!-- Go back-->
@@ -10,20 +10,26 @@
class="icon-back"
icon="chevron-left"
></FontAwesomeIcon>
<span class="back-directory-title">{{
directoryName
}}</span>
<span class="back-directory-title">
{{ directoryName }}
</span>
</div>
</div>
<!-- Tools-->
<div class="toolbar-tools">
<!--Search bar-->
<div class="toolbar-button-wrapper">
<SearchBar/>
</div>
<div class="toolbar-button-wrapper">
<ToolbarButtonUpload source="upload" action="Upload file"/>
<!--Files controlls-->
<div class="toolbar-button-wrapper" v-if="$checkPermission(['master', 'editor'])">
<ToolbarButtonUpload
source="upload"
action="Upload file"
/>
<ToolbarButton
source="trash-alt"
action="Delete"
@@ -36,6 +42,7 @@
/>
</div>
<!--View options-->
<div class="toolbar-button-wrapper">
<ToolbarButton
:source="preview"
resources/js/components/VueFileManagerComponents/FilesView/FilesContainer.vue → resources/js/components/VueFileManagerComponents/FilesView/FileBrowser.vue
+7 -19
View File
@@ -8,25 +8,20 @@
<div
class="files-container"
ref="fileContainer"
:class="{
'is-fileinfo-visible': fileInfoVisible && !$isMinimalScale()
}"
:class="{'is-fileinfo-visible': fileInfoVisible && !$isMinimalScale() }"
@click.self="filesContainerClick"
>
<!--MobileToolbar-->
<MobileToolbar v-if="$isMinimalScale()"/>
<MobileToolbar />
<!--Searchbar-->
<SearchBar v-if="$isMinimalScale()" class="mobile-search"/>
<!--Mobile Actions-->
<MobileActions v-if="$isMinimalScale()" />
<MobileActions />
<!--Item previews list-->
<div
v-if="isList"
class="file-list-wrapper"
>
<div v-if="isList" class="file-list-wrapper">
<transition-group
name="file"
tag="section"
@@ -76,20 +71,13 @@
/>
</div>
<div
v-if="!$isMinimalScale()"
class="file-info-container"
:class="{ 'is-fileinfo-visible': fileInfoVisible }"
>
<!--File Info Panel-->
<div v-if="! $isMinimalScale()" class="file-info-container" :class="{ 'is-fileinfo-visible': fileInfoVisible }">
<!--File info panel-->
<FileInfoPanel v-if="fileInfoDetail"/>
<!--If file info panel empty show message-->
<EmptyMessage
v-if="!fileInfoDetail"
:message="$t('messages.nothing_to_preview')"
icon="eye-slash"
/>
<EmptyMessage v-if="!fileInfoDetail" :message="$t('messages.nothing_to_preview')" icon="eye-slash"/>
</div>
</div>
</template>
resources/js/components/VueFileManagerComponents/FilesView/FileInfoPanel.vue
+2 -2
View File
@@ -34,7 +34,7 @@
</li>
<!--Parent-->
<li class="list-info-item">
<li v-if="$checkPermission(['master', 'editor'])" class="list-info-item">
<b>{{ $t('file_detail.where') }}</b>
<div class="action-button" @click="moveItem">
<FontAwesomeIcon class="icon" icon="pencil-alt" />
@@ -43,7 +43,7 @@
</li>
<!--Parent-->
<li v-if="true" class="list-info-item">
<li v-if="$checkPermission('master')" class="list-info-item">
<b>Shared</b>
<div class="action-button" @click="shareItemOptions">
<FontAwesomeIcon class="icon" icon="user-edit" />
resources/js/components/VueFileManagerComponents/FilesView/FileItemGrid.vue
+6 -4
View File
@@ -42,7 +42,7 @@
<b
ref="name"
@input="changeItemName"
:contenteditable="!$isMobile()"
:contenteditable="canEditName"
class="name"
>
{{ itemName }}
@@ -50,9 +50,8 @@
<div class="item-info">
<!--Shared Icon-->
<div class="item-shared" v-if="true">
<div v-if="$checkPermission('master')" class="item-shared">
<FontAwesomeIcon class="shared-icon" icon="user-friends"/>
<span class="label">Shared, </span>
</div>
<!--Filesize-->
@@ -91,6 +90,9 @@
isImage() {
return this.data.type === 'image'
},
canEditName() {
return ! this.$isMobile() && ! this.$isTrashLocation() && ! this.$checkPermission('visitor')
},
timeStamp() {
return this.data.deleted_at ? this.$t('item_thumbnail.deleted_at', this.data.deleted_at) : this.data.created_at
},
@@ -247,7 +249,7 @@
}
.shared-icon {
@include font-size(10);
@include font-size(9);
path {
fill: $theme;
resources/js/components/VueFileManagerComponents/FilesView/FileItemList.vue
+6 -4
View File
@@ -40,7 +40,7 @@
<b
ref="name"
@input="changeItemName"
:contenteditable="!$isMobile() && !$isTrashLocation()"
:contenteditable="canEditName"
class="name"
>
{{ itemName }}
@@ -49,9 +49,8 @@
<div class="item-info">
<!--Shared Icon-->
<div class="item-shared" v-if="true">
<div v-if="$checkPermission('master')" class="item-shared">
<FontAwesomeIcon class="shared-icon" icon="user-friends"/>
<span class="label">Shared,</span>
</div>
<!--Filesize and timestamp-->
@@ -93,6 +92,9 @@
isImage() {
return this.data.type === 'image'
},
canEditName() {
return ! this.$isMobile() && ! this.$isTrashLocation() && ! this.$checkPermission('visitor')
},
timeStamp() {
return this.data.deleted_at ? this.$t('item_thumbnail.deleted_at', {time: this.data.deleted_at}) : this.data.created_at
},
@@ -260,7 +262,7 @@
}
.shared-icon {
@include font-size(10);
@include font-size(9);
path {
fill: $theme;
resources/js/components/VueFileManagerComponents/FilesView/MobileActionButton.vue
+4 -2
View File
@@ -1,7 +1,9 @@
<template>
<button class="mobile-action-button">
<FontAwesomeIcon class="icon" :icon="icon"></FontAwesomeIcon>
<span class="label">{{ text }}</span>
<span class="label">
<slot></slot>
</span>
</button>
</template>
@@ -9,7 +11,7 @@
export default {
name: 'MobileActionButton',
props: [
'icon', 'text'
'icon'
],
}
</script>
resources/js/components/VueFileManagerComponents/FilesView/MobileActionButtonUpload.vue
+2 -2
View File
@@ -2,7 +2,7 @@
<button class="mobile-action-button">
<FontAwesomeIcon class="icon" :icon="icon"></FontAwesomeIcon>
<label label="file" class="label button file-input button-base">
{{ text }}
<slot></slot>
<input
accept="*"
v-show="false"
@@ -20,7 +20,7 @@
export default {
name: 'MobileActionButtonUpload',
props: [
'icon', 'text'
'icon'
],
data() {
return {
resources/js/components/VueFileManagerComponents/FilesView/MobileActions.vue
+32 -6
View File
@@ -1,11 +1,37 @@
<template>
<div id="mobile-actions-wrapper">
<div class="mobile-actions">
<MobileActionButton v-if="! $isTrashLocation()" @click.native="createFolder" icon="folder-plus" :text="$t('context_menu.add_folder')"></MobileActionButton>
<MobileActionButtonUpload v-if="! $isTrashLocation()" @input.native="$uploadFiles" icon="upload" :text="$t('context_menu.upload')"></MobileActionButtonUpload>
<MobileActionButton @click.native="switchPreview" :icon="previewIcon" :text="previewText"></MobileActionButton>
<MobileActionButton v-if="$isTrashLocation()" @click.native="$store.dispatch('emptyTrash')" icon="trash-alt" :text="$t('context_menu.empty_trash')"></MobileActionButton>
<div id="mobile-actions-wrapper" v-if="$isMinimalScale()">
<!--Actions for trash location with MASTER permission--->
<div v-if="$isTrashLocation() && $checkPermission('master')" class="mobile-actions">
<MobileActionButton @click.native="switchPreview" :icon="previewIcon">
{{ previewText }}
</MobileActionButton>
<MobileActionButton @click.native="$store.dispatch('emptyTrash')" icon="trash-alt">
{{ $t('context_menu.empty_trash') }}
</MobileActionButton>
</div>
<!--ContextMenu for Base location with MASTER permission-->
<div v-if="$isBaseLocation() && $checkPermission(['master', 'editor'])" class="mobile-actions">
<MobileActionButton @click.native="createFolder" icon="folder-plus">
{{ $t('context_menu.add_folder') }}
</MobileActionButton>
<MobileActionButtonUpload @input.native="$uploadFiles" icon="upload">
{{ $t('context_menu.upload') }}
</MobileActionButtonUpload>
<MobileActionButton @click.native="switchPreview" :icon="previewIcon">
{{ previewText }}
</MobileActionButton>
</div>
<!--ContextMenu for Base location with VISITOR permission-->
<div v-if="$isBaseLocation() && $checkPermission('visitor')" class="mobile-actions">
<MobileActionButton @click.native="switchPreview" :icon="previewIcon">
{{ previewText }}
</MobileActionButton>
</div>
<!--Upload Progressbar-->
<UploadProgress />
</div>
</template>
resources/js/components/VueFileManagerComponents/FilesView/MobileMenu.vue
+24 -8
View File
@@ -10,7 +10,7 @@
<div class="menu-wrapper">
<!--Mobile for trash location-->
<ul v-if="$isTrashLocation()" class="menu-options">
<ul v-if="$isTrashLocation() && $checkPermission('master')" class="menu-options">
<li class="menu-option" @click="$store.dispatch('restoreItem', fileInfoDetail)" v-if="fileInfoDetail">
{{ $t('context_menu.restore') }}
</li>
@@ -23,7 +23,7 @@
</ul>
<!--Mobile for Base location-->
<ul v-if="$isBaseLocation()" class="menu-options">
<ul v-if="$isBaseLocation() && $checkPermission('master')" class="menu-options">
<li class="menu-option" @click="addToFavourites" v-if="fileInfoDetail && isFolder">
{{ isInFavourites ? $t('context_menu.remove_from_favourites') : $t('context_menu.add_to_favourites') }}
</li>
@@ -43,15 +43,31 @@
{{ $t('context_menu.delete') }}
</li>
</ul>
<!--Mobile for Base location with EDITOR permission-->
<ul v-if="$isBaseLocation() && $checkPermission('editor')" class="menu-options">
<li class="menu-option" @click="renameItem" v-if="fileInfoDetail">
{{ $t('context_menu.rename') }}
</li>
<li class="menu-option" @click="moveItem" v-if="fileInfoDetail">
{{ $t('context_menu.move') }}
</li>
<li class="menu-option" @click="downloadItem" v-if="! isFolder">
{{ $t('context_menu.download') }}
</li>
</ul>
<!--Mobile for Base location with VISITOR permission-->
<ul v-if="$isBaseLocation() && $checkPermission('visitor')" class="menu-options">
<li class="menu-option" @click="downloadItem" v-if="! isFolder">
{{ $t('context_menu.download') }}
</li>
</ul>
</div>
</div>
</transition>
<transition name="fade">
<div
v-show="isVisible"
class="vignette"
@click="closeAndResetContextMenu"
></div>
<div v-show="isVisible" class="vignette" @click="closeAndResetContextMenu"></div>
</transition>
</div>
</template>
@@ -61,7 +77,7 @@
import {mapGetters} from 'vuex'
export default {
name: 'MobileOptionList',
name: 'MobileMenu',
computed: {
...mapGetters(['fileInfoDetail', 'app']),
isInFavourites() {
resources/js/components/VueFileManagerComponents/FilesView/MobileToolbar.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="mobile-toolbar">
<div class="mobile-toolbar" v-if="$isMinimalScale()">
<!-- Go back-->
<div @click="goBack" class="go-back-button">
resources/js/components/VueFileManagerComponents/Sidebar/Sidebar.vue
+18 -5
View File
@@ -12,15 +12,15 @@
<div class="menu-list-wrapper">
<TextLabel>{{ $t('sidebar.locations') }}</TextLabel>
<ul class="menu-list">
<li class="menu-list-item" @click="goHome">
<li class="menu-list-item" :class="{'is-active': isBaseLocation}" @click="goHome">
<FontAwesomeIcon class="icon" icon="hdd"/>
<span class="label">{{ $t('locations.home') }}</span>
</li>
<li class="menu-list-item">
<li class="menu-list-item" :class="{'is-active': isSharedLocation}" @click="getShared">
<FontAwesomeIcon class="icon" icon="share"/>
<span class="label">Shared</span>
</li>
<li class="menu-list-item" @click="getTrash">
<li class="menu-list-item" :class="{'is-active': isTrashLocation}" @click="getTrash">
<FontAwesomeIcon class="icon" icon="trash-alt"/>
<span class="label">{{ $t('locations.trash') }}</span>
</li>
@@ -91,7 +91,16 @@
TextLabel,
},
computed: {
...mapGetters(['homeDirectory', 'app', 'appSize', 'config']),
...mapGetters(['homeDirectory', 'app', 'appSize', 'config', 'currentFolder']),
isTrashLocation() {
return this.currentFolder && this.currentFolder.location === 'trash-root' || this.currentFolder && this.currentFolder.location === 'trash'
},
isBaseLocation() {
return this.currentFolder && this.currentFolder.location === 'base'
},
isSharedLocation() {
return this.currentFolder && this.currentFolder.location === 'shared'
},
isSmallAppSize() {
return this.appSize === 'small'
}
@@ -104,6 +113,9 @@
}
},
methods: {
getShared() {
this.$store.dispatch('getShared')
},
getTrash() {
this.$store.dispatch('getTrash')
},
@@ -247,7 +259,8 @@
display: inline-block;
}
&:hover {
&:hover,
&.is-active {
background: rgba($theme, .1);
.icon {
resources/js/helpers.js
Vendored
+14 -1
View File
@@ -1,5 +1,5 @@
import store from './store/index'
import {debounce} from "lodash";
import {debounce, includes} from "lodash";
import {events} from './bus'
import axios from 'axios'
@@ -221,6 +221,19 @@ const Helpers = {
return store.getters.currentFolder && store.getters.currentFolder.location === 'base' ? true : false
}
Vue.prototype.$checkPermission = function(type) {
let currentPermission = store.getters.permission
// Check if type is object
if (typeof type === 'Object' || type instanceof Object) {
return includes(type, currentPermission)
} else {
return currentPermission === type
}
}
Vue.prototype.$isMobile = function() {
const toMatch = [
/Android/i,
resources/js/store/modules/filesView.js
Vendored
+37
View File
@@ -70,6 +70,43 @@ const actions = {
})
})
},
getShared: (context, back = false) => {
events.$emit('show:content')
// Go to files view
if (router.currentRoute.name !== 'Files') {
router.push({name: 'Files'})
}
if (! back) context.commit('FLUSH_BROWSER_HISTORY')
context.commit('FLUSH_DATA')
context.commit('LOADING_STATE', true)
// Create shared object for history
let trash = {
name: 'Shared',
unique_id: undefined,
location: 'shared',
}
axios
.get(context.getters.api + '/shared')
.then(response => {
context.commit('GET_DATA', response.data)
context.commit('LOADING_STATE', false)
context.commit('STORE_CURRENT_FOLDER', trash)
context.commit('ADD_BROWSER_HISTORY', trash)
events.$emit('scrollTop')
})
.catch(() => {
// Show error message
events.$emit('alert:open', {
title: i18n.t('popup_error.title'),
message: i18n.t('popup_error.message'),
})
})
},
getTrash: (context, back = false) => {
events.$emit('show:content')
resources/js/store/modules/userAuth.js
Vendored
+3 -1
View File
@@ -5,6 +5,7 @@ import router from '@/router'
const defaultState = {
authorized: undefined,
permission: 'master', // master | editor | visitor,
app: undefined,
}
@@ -138,8 +139,9 @@ const mutations = {
}
const getters = {
isLogged: state => state.authorized,
permission: state => state.permission,
isGuest: state => ! state.authorized,
isLogged: state => state.authorized,
app: state => state.app,
}
resources/js/views/Files.vue
+4 -6
View File
@@ -1,15 +1,14 @@
<template>
<div @click="fileViewClick" @contextmenu.prevent.capture="contextMenu($event, undefined)" id="files-view" :class="filesViewWidth">
<ContextMenu />
<DesktopToolbar v-if="! $isMinimalScale()"/>
<FilesContainer/>
<DesktopToolbar />
<FileBrowser />
</div>
</template>
<script>
import UploadProgress from '@/components/VueFileManagerComponents/FilesView/UploadProgress'
import FilesContainer from '@/components/VueFileManagerComponents/FilesView/FilesContainer'
import DesktopToolbar from '@/components/VueFileManagerComponents/FilesView/DesktopToolbar'
import FileBrowser from '@/components/VueFileManagerComponents/FilesView/FileBrowser'
import ContextMenu from '@/components/VueFileManagerComponents/FilesView/ContextMenu'
import {ResizeSensor} from 'css-element-queries'
import {mapGetters} from 'vuex'
@@ -18,9 +17,8 @@
export default {
name: 'FilesView',
components: {
UploadProgress,
FilesContainer,
DesktopToolbar,
FileBrowser,
ContextMenu,
},
computed: {
resources/js/views/Shared/SharedContent.vue
+115 -11
View File
@@ -1,32 +1,99 @@
<template>
<div @click="fileViewClick" @contextmenu.prevent.capture="contextMenu($event, undefined)" id="files-view" :class="filesViewWidth">
<ContextMenu />
<DesktopToolbar v-if="! $isMinimalScale()"/>
<FilesContainer/>
<div id="shared-content">
<div id="single-file">
<div v-if="false" class="single-file-wrapper">
<FileItemGrid :data="item"/>
<ButtonBase @click.native="download" class="download-button" button-style="theme">
Download File
</ButtonBase>
</div>
</div>
<div
@contextmenu.prevent.capture="contextMenu($event, undefined)"
:class="filesViewWidth"
@click="fileViewClick"
id="files-view"
v-if="true"
>
<!--Move item window-->
<MoveItem/>
<!--Mobile Menu-->
<MobileMenu/>
<!--Background vignette-->
<Vignette/>
<!--Context menu-->
<ContextMenu/>
<!--Desktop Toolbar-->
<DesktopToolbar/>
<!--File browser-->
<FileBrowser/>
</div>
</div>
</template>
<script>
import UploadProgress from '@/components/VueFileManagerComponents/FilesView/UploadProgress'
import FilesContainer from '@/components/VueFileManagerComponents/FilesView/FilesContainer'
import DesktopToolbar from '@/components/VueFileManagerComponents/FilesView/DesktopToolbar'
import FileItemGrid from '@/components/VueFileManagerComponents/FilesView/FileItemGrid'
import FileBrowser from '@/components/VueFileManagerComponents/FilesView/FileBrowser'
import ContextMenu from '@/components/VueFileManagerComponents/FilesView/ContextMenu'
import ButtonBase from '@/components/VueFileManagerComponents/FilesView/ButtonBase'
import MobileMenu from '@/components/VueFileManagerComponents/FilesView/MobileMenu'
import Vignette from '@/components/VueFileManagerComponents/Others/Vignette'
import MoveItem from '@/components/VueFileManagerComponents/Others/MoveItem'
import {ResizeSensor} from 'css-element-queries'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
export default {
name: 'FilesView',
name: 'SharedContent',
components: {
UploadProgress,
FilesContainer,
DesktopToolbar,
FileItemGrid,
FileBrowser,
ContextMenu,
MobileMenu,
ButtonBase,
Vignette,
MoveItem,
},
computed: {
...mapGetters(['config', 'filesViewWidth']),
},
data() {
return {
item: {
"id": 339,
"user_id": 3,
"unique_id": 421,
"folder_id": 0,
"thumbnail": null,
"name": "VueFileManager-0.0.1-mac",
"basename": "gF5GiO16GNgmkr7K-VueFileManager-0.0.1-mac.zip",
"mimetype": "zip",
"filesize": "95.78MB",
"type": "file",
"deleted_at": null,
"created_at": "11. April. 2020 at 17:11",
"updated_at": "2020-04-11 17:11:49",
"file_url": "https://vuefilemanager.hi5ve.digital/api/file/gF5GiO16GNgmkr7K-VueFileManager-0.0.1-mac.zip",
"parent": null
}
}
},
methods: {
download() {
console.log('penis');
this.$downloadFile(
this.item.file_url,
this.item.name + '.' + this.item.mimetype
)
},
fileViewClick() {
events.$emit('contextMenu:hide')
},
@@ -34,8 +101,7 @@
events.$emit('contextMenu:show', event, item)
},
handleContentResize() {
let filesView = document.getElementById('files-view')
.clientWidth
let filesView = document.getElementById('files-view').clientWidth
if (filesView >= 0 && filesView <= 690)
this.$store.commit('SET_FILES_VIEW_SIZE', 'minimal-scale')
@@ -70,6 +136,44 @@
<style lang="scss">
@import "@assets/app.scss";
#shared-content {
width: 100%;
height: 100%;
}
#single-file {
position: absolute;
bottom: 0;
right: 0;
left: 0;
top: 0;
display: grid;
.single-file-wrapper {
margin: auto;
text-align: center;
.download-button {
margin-top: 15px;
}
}
/deep/ .file-wrapper {
.file-item {
width: 290px;
&:hover, &.is-clicked {
background: transparent;
}
.item-shared {
display: none;
}
}
}
}
#files-view {
font-family: 'Nunito', sans-serif;
font-size: 16px;
resources/sass/vue-file-manager/_auth.scss
Vendored
+4
View File
@@ -5,6 +5,10 @@
display: table-cell;
vertical-align: middle;
input {
min-width: 310px;
}
.additional-link {
a {