Commit b6f441f3 authored by ZeMKI's avatar ZeMKI
Browse files

Tablet layout problem solved

* reworked the navbar, now it's responsive and it display correctly on smaller tablets.
* reworked positions of the buttons on the homepage, this way there's no problem on smaller layouts.
* general layout optimization.

Fixes #7
parent 811e6a61
......@@ -10,4 +10,5 @@ Please confirm your email address and set a password by clicking on the followin
If you don't see the button, please copy and paste this link:
",
'emailFeedbackText' => 'mailto:gitlab-incoming+zemki-gitlab-mesort-17188-6siyqlb3eanagb4fgcmza0g4e-issue@informatik.uni-bremen.de?subject=feedback from website&body=Issue: %0A%0A Description: %0A%0A Steps to reproduce:'
];
......@@ -106,6 +106,12 @@ table {
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
 
.menu-item {
color: #046cbe;
display: block;
line-height: 1.5;
}
/* BACKGROUND
HEX #ffffff
HEX #fdfbf7
......
......@@ -106,6 +106,12 @@ table {
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.menu-item {
color: #046cbe;
display: block;
line-height: 1.5;
}
/* BACKGROUND
HEX #ffffff
HEX #fdfbf7
......
......@@ -2527,7 +2527,7 @@ $(document).keydown(function (event) {
},
getbounds: function getbounds() {
// get the distance from the circle to the window bounds
this.offsetbounds_y = window.pageYOffset - document.querySelector('#navbarBasicExample').offsetHeight + (window.pageYOffset - document.querySelector('#token-container').offsetHeight + 30) + document.querySelector('.round-sorting' + this.circles).getBoundingClientRect().top;
this.offsetbounds_y = window.pageYOffset - document.querySelector('#navbar').offsetHeight + (window.pageYOffset - document.querySelector('#token-container').offsetHeight + 30) + document.querySelector('.round-sorting' + this.circles).getBoundingClientRect().top;
this.offsetbounds_x = window.pageXOffset + document.querySelector('.round-sorting' + this.circles).getBoundingClientRect().left;
this.parentPos = document.querySelector('.sorting-container').getBoundingClientRect();
this.bounds.top = this.getElementGlobalCoordinates(document.querySelector('.round-sorting' + this.circles)).top;
......@@ -12206,6 +12206,58 @@ __webpack_require__.r(__webpack_exports__);
});
 
 
/***/ }),
/***/ "./node_modules/vue-loader/lib/index.js?!./node_modules/vue-material-design-icons/ChevronDown.vue?vue&type=script&lang=js&":
/*!*******************************************************************************************************************************************!*\
!*** ./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-material-design-icons/ChevronDown.vue?vue&type=script&lang=js& ***!
\*******************************************************************************************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
/* harmony default export */ __webpack_exports__["default"] = ({
name: "ChevronDownIcon",
props: {
title: {
type: String,
default: "Chevron Down icon"
},
decorative: {
type: Boolean,
default: false
},
fillColor: {
type: String,
default: "currentColor"
},
size: {
type: Number,
default: 24
}
}
});
/***/ }),
 
/***/ "./node_modules/vue-loader/lib/index.js?!./node_modules/vue-material-design-icons/EmoticonSad.vue?vue&type=script&lang=js&":
......@@ -12534,6 +12586,65 @@ render._withStripped = true
 
 
 
/***/ }),
/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/vue-material-design-icons/ChevronDown.vue?vue&type=template&id=621dfb81&":
/*!*****************************************************************************************************************************************************************************************************************************!*\
!*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-material-design-icons/ChevronDown.vue?vue&type=template&id=621dfb81& ***!
\*****************************************************************************************************************************************************************************************************************************/
/*! exports provided: render, staticRenderFns */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "render", function() { return render; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return staticRenderFns; });
var render = function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
return _c(
"span",
{
staticClass: "material-design-icon chevron-down-icon",
attrs: {
"aria-hidden": _vm.decorative,
"aria-label": _vm.title,
role: "img"
}
},
[
_c(
"svg",
{
staticClass: "material-design-icon__svg",
attrs: {
fill: _vm.fillColor,
width: _vm.size,
height: _vm.size,
viewBox: "0 0 24 24"
}
},
[
_c(
"path",
{
attrs: {
d: "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
}
},
[_c("title", [_vm._v(_vm._s(_vm.title))])]
)
]
)
]
)
}
var staticRenderFns = []
render._withStripped = true
/***/ }),
 
/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/vue-material-design-icons/EmoticonSad.vue?vue&type=template&id=7d4e3018&":
......@@ -14194,10 +14305,7 @@ var render = function() {
_c(
"b-upload",
{
attrs: {
"drag-drop": "",
accept: "image/*"
},
attrs: { accept: "image/*" },
on: {
input: function($event) {
return _vm.settokenname(index)
......@@ -14216,9 +14324,11 @@ var render = function() {
"a",
{ staticClass: "button is-danger" },
[
_c("span", [
_vm._v("Click to upload")
])
_c(
"div",
{ staticClass: "md:text-sm" },
[_vm._v("Click to upload")]
)
]
),
_vm._v(" "),
......@@ -16289,6 +16399,75 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
/***/ }),
/***/ "./node_modules/vue-material-design-icons/ChevronDown.vue":
/*!****************************************************************!*\
!*** ./node_modules/vue-material-design-icons/ChevronDown.vue ***!
\****************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _ChevronDown_vue_vue_type_template_id_621dfb81___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ChevronDown.vue?vue&type=template&id=621dfb81& */ "./node_modules/vue-material-design-icons/ChevronDown.vue?vue&type=template&id=621dfb81&");
/* harmony import */ var _ChevronDown_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ChevronDown.vue?vue&type=script&lang=js& */ "./node_modules/vue-material-design-icons/ChevronDown.vue?vue&type=script&lang=js&");
/* empty/unused harmony star reexport *//* harmony import */ var _vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../vue-loader/lib/runtime/componentNormalizer.js */ "./node_modules/vue-loader/lib/runtime/componentNormalizer.js");
/* normalize component */
var component = Object(_vue_loader_lib_runtime_componentNormalizer_js__WEBPACK_IMPORTED_MODULE_2__["default"])(
_ChevronDown_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_1__["default"],
_ChevronDown_vue_vue_type_template_id_621dfb81___WEBPACK_IMPORTED_MODULE_0__["render"],
_ChevronDown_vue_vue_type_template_id_621dfb81___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"],
false,
null,
null,
null
)
/* hot reload */
if (false) { var api; }
component.options.__file = "node_modules/vue-material-design-icons/ChevronDown.vue"
/* harmony default export */ __webpack_exports__["default"] = (component.exports);
/***/ }),
/***/ "./node_modules/vue-material-design-icons/ChevronDown.vue?vue&type=script&lang=js&":
/*!*****************************************************************************************!*\
!*** ./node_modules/vue-material-design-icons/ChevronDown.vue?vue&type=script&lang=js& ***!
\*****************************************************************************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _vue_loader_lib_index_js_vue_loader_options_ChevronDown_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../vue-loader/lib??vue-loader-options!./ChevronDown.vue?vue&type=script&lang=js& */ "./node_modules/vue-loader/lib/index.js?!./node_modules/vue-material-design-icons/ChevronDown.vue?vue&type=script&lang=js&");
/* empty/unused harmony star reexport */ /* harmony default export */ __webpack_exports__["default"] = (_vue_loader_lib_index_js_vue_loader_options_ChevronDown_vue_vue_type_script_lang_js___WEBPACK_IMPORTED_MODULE_0__["default"]);
/***/ }),
/***/ "./node_modules/vue-material-design-icons/ChevronDown.vue?vue&type=template&id=621dfb81&":
/*!***********************************************************************************************!*\
!*** ./node_modules/vue-material-design-icons/ChevronDown.vue?vue&type=template&id=621dfb81& ***!
\***********************************************************************************************/
/*! exports provided: render, staticRenderFns */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _vue_loader_lib_loaders_templateLoader_js_vue_loader_options_vue_loader_lib_index_js_vue_loader_options_ChevronDown_vue_vue_type_template_id_621dfb81___WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!../vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../vue-loader/lib??vue-loader-options!./ChevronDown.vue?vue&type=template&id=621dfb81& */ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/vue-material-design-icons/ChevronDown.vue?vue&type=template&id=621dfb81&");
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "render", function() { return _vue_loader_lib_loaders_templateLoader_js_vue_loader_options_vue_loader_lib_index_js_vue_loader_options_ChevronDown_vue_vue_type_template_id_621dfb81___WEBPACK_IMPORTED_MODULE_0__["render"]; });
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "staticRenderFns", function() { return _vue_loader_lib_loaders_templateLoader_js_vue_loader_options_vue_loader_lib_index_js_vue_loader_options_ChevronDown_vue_vue_type_template_id_621dfb81___WEBPACK_IMPORTED_MODULE_0__["staticRenderFns"]; });
/***/ }),
 
/***/ "./node_modules/vue-material-design-icons/EmoticonSad.vue":
......@@ -16690,8 +16869,9 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var vue_material_design_icons_ArrowLeft_vue__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! vue-material-design-icons/ArrowLeft.vue */ "./node_modules/vue-material-design-icons/ArrowLeft.vue");
/* harmony import */ var vue_material_design_icons_ArrowRight_vue__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! vue-material-design-icons/ArrowRight.vue */ "./node_modules/vue-material-design-icons/ArrowRight.vue");
/* harmony import */ var vue_material_design_icons_Pencil_vue__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! vue-material-design-icons/Pencil.vue */ "./node_modules/vue-material-design-icons/Pencil.vue");
/* harmony import */ var vue_select__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! vue-select */ "./node_modules/vue-select/dist/vue-select.js");
/* harmony import */ var vue_select__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(vue_select__WEBPACK_IMPORTED_MODULE_6__);
/* harmony import */ var vue_material_design_icons_ChevronDown_vue__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! vue-material-design-icons/ChevronDown.vue */ "./node_modules/vue-material-design-icons/ChevronDown.vue");
/* harmony import */ var vue_select__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! vue-select */ "./node_modules/vue-select/dist/vue-select.js");
/* harmony import */ var vue_select__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(vue_select__WEBPACK_IMPORTED_MODULE_7__);
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
......@@ -16706,8 +16886,9 @@ __webpack_require__(/*! ./bootstrap */ "./resources/js/bootstrap.js");
 
 
 
window.Vue = __webpack_require__(/*! vue */ "./node_modules/vue/dist/vue.common.js");
Vue.component('v-select', vue_select__WEBPACK_IMPORTED_MODULE_6___default.a);
Vue.component('v-select', vue_select__WEBPACK_IMPORTED_MODULE_7___default.a);
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
......@@ -16826,7 +17007,8 @@ window.app = new Vue({
PlusIcon: vue_material_design_icons_Plus_vue__WEBPACK_IMPORTED_MODULE_2__["default"],
ArrowRight: vue_material_design_icons_ArrowRight_vue__WEBPACK_IMPORTED_MODULE_4__["default"],
ArrowLeft: vue_material_design_icons_ArrowLeft_vue__WEBPACK_IMPORTED_MODULE_3__["default"],
Pencil: vue_material_design_icons_Pencil_vue__WEBPACK_IMPORTED_MODULE_5__["default"]
Pencil: vue_material_design_icons_Pencil_vue__WEBPACK_IMPORTED_MODULE_5__["default"],
Caret: vue_material_design_icons_ChevronDown_vue__WEBPACK_IMPORTED_MODULE_6__["default"]
},
data: {
newstudy: {},
......@@ -16848,6 +17030,9 @@ window.app = new Vue({
}
},
methods: {
showdropdown: function showdropdown(id) {
document.getElementById(id).classList.toggle("hidden");
},
showmodal: function showmodal() {
var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
var study = arguments.length > 1 ? arguments[1] : undefined;
{
"/js/app.js": "/js/app.js?id=3803ce4ea00beb99b3c5",
"/css/app.css": "/css/app.css?id=33e8c8db759d1aed6c23",
"/css/app_dompdf.css": "/css/app_dompdf.css?id=225174786ee9d00fe897",
"/js/app.js": "/js/app.js?id=8335407ff7be9f367e83",
"/css/app.css": "/css/app.css?id=1abf25588c73d17b8451",
"/css/app_dompdf.css": "/css/app_dompdf.css?id=06023e8a43967827a614",
"/js/manifest.js": "/js/manifest.js?id=844cdbfe9e6b6b56ae8f",
"/js/vendor.js": "/js/vendor.js?id=e803732b0abd596f50d8"
}
......@@ -11,6 +11,7 @@ import PlusIcon from "vue-material-design-icons/Plus.vue"
import ArrowLeft from "vue-material-design-icons/ArrowLeft.vue"
import ArrowRight from "vue-material-design-icons/ArrowRight.vue"
import Pencil from "vue-material-design-icons/Pencil.vue"
import Caret from "vue-material-design-icons/ChevronDown.vue"
import vSelect from 'vue-select'
......@@ -138,7 +139,8 @@ window.app = new Vue({
PlusIcon,
ArrowRight,
ArrowLeft,
Pencil
Pencil,
Caret
},
data: {
newstudy: {},
......@@ -163,6 +165,9 @@ window.app = new Vue({
}
},
methods: {
showdropdown: function(id){
document.getElementById(id).classList.toggle("hidden");
},
showmodal: function (id = null, study) {
this.newuser.showmodal = !this.newuser.showmodal;
this.newuser.edituser = id;
......
......@@ -131,10 +131,10 @@
</v-select>
</div>
<b-field class="file">
<b-upload v-model="t.file" @input="settokenname(index)" drag-drop
<b-upload v-model="t.file" @input="settokenname(index)"
accept="image/*">
<a class="button is-danger">
<span>Click to upload</span>
<div class="md:text-sm">Click to upload</div>
</a>
<br>
</b-upload>
......
......@@ -240,7 +240,7 @@
this.center_y = this.offsetbounds_y + (document.querySelector(".round-sorting" + this.circles).offsetHeight / 2);
}, getbounds: function () {
// get the distance from the circle to the window bounds
this.offsetbounds_y = (window.pageYOffset - document.querySelector('#navbarBasicExample').offsetHeight) + (window.pageYOffset - document.querySelector('#token-container').offsetHeight + 30) + document.querySelector('.round-sorting' + this.circles).getBoundingClientRect().top;
this.offsetbounds_y = (window.pageYOffset - document.querySelector('#navbar').offsetHeight) + (window.pageYOffset - document.querySelector('#token-container').offsetHeight + 30) + document.querySelector('.round-sorting' + this.circles).getBoundingClientRect().top;
this.offsetbounds_x = window.pageXOffset + document.querySelector('.round-sorting' + this.circles).getBoundingClientRect().left;
......
......@@ -32,3 +32,9 @@
src: local('Work Sans'), local('WorkSans-Regular'), url(https://fonts.gstatic.com/s/worksans/v3/QGYsz_wNahGAdqQ43Rh_fKDptfpA4Q.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.menu-item{
color: #046cbe;
display: block;
line-height: 1.5;
}
......@@ -18,46 +18,49 @@
<b-tab-item label="Study" data-toggle="tab">
<div class="tile is-parent is-vertical is-12">
<div class="text-base sm:text-xs md:text-sm lg:text-xs xl:text-xl w-full">
@permission('create-interviews',$study->id)
<div class="mt-2 inline-flex w-full">
<p class="control w-full">
<a class="button w-full is-primary" href="#"
href="{{url('interview/new').'?study='.$study->id}}"
@click.prevent="setinterviewdname({{$study->id}})">
<span>New Interview</span>
</a>
</p>
</div>
<div style="width: 100%; display: inline-flex;">
@permission('update-studies',$study->id)
<p class="control m-auto" style="width: 48%;">
<a class="button" style="width: 100%;"
href="{{url('studies').'/'.$study->id.'/edit'}}"
@click="goto('{{url('studies').'/'.$study->id.'/edit'}}')">
<span class="icon is-small">
<Pencil class="has-text-dark" decorative/>
</span>
<span>Edit Study</span>
</a>
</p>
@endpermission
@permission('create-interviews',$study->id)
<p class="control m-auto" style="width: 48%;">
<a class="button is-primary" style="width: 100%;"
href="{{url('interview/new').'?study='.$study->id}}"
@click.prevent="setinterviewdname({{$study->id}})">
<span>New Interview</span>
</a>
</p>
@permission('update-studies',$study->id)
<div class="mt-2 inline-flex w-full">
<p class="control w-full">
<a class="button w-full" href="#"
href="{{url('studies').'/'.$study->id.'/edit'}}"
@click="goto('{{url('studies').'/'.$study->id.'/edit'}}')">
<span class="icon is-small">
<Pencil class="has-text-dark" decorative/>
</span>
<span>Edit Study</span>
</a>
</p>
</div>
@endpermission
</div>
@permission('delete-studies',$study->id)
<div style="width: 100%; display: inline-flex;" class="is-danger mt-2">
<p class="control" style="width: 100%;">
<a class="button is-danger" style="width: 100%;" href="#"
@click="confirmdelete({{$study->id}}, '{{$study->name}}')">
<span>Delete Study</span>
</a>
</p>
@permission('delete-studies',$study->id)
<div class="is-danger mt-2 inline-flex w-full">
<p class="control w-full">
<a class="button is-danger w-full" href="#"
@click="confirmdelete({{$study->id}}, '{{$study->name}}')">
<span>Delete Study</span>
</a>
</p>
</div>
@endpermission
</div>
@endpermission
<article class="tile is-parent notification is-vertical hometile mt-2">
<div class="content">
<p class="title is-3" style="overflow: hidden;">{{$study->name}}</p>
......
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item">
<img src="{{config('utilities.base64logo')}}">
{{ config('app.name', 'Mesort') }}
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="{{url('/')}}">
Home
</a>
<a class="navbar-item" target="_blank" href="mailto:gitlab-incoming+zemki-gitlab-mesort-17188-6siyqlb3eanagb4fgcmza0g4e-issue@informatik.uni-bremen.de?subject=feedback from website&body=Issue: %0A%0A Description: %0A%0A Steps to reproduce:">
Email Feedback
<nav class="flex justify-between flex-wrap p-5 align-baseline">
<div class="flex flex-shrink-0 mr-6">
<img src="{{config('utilities.base64logo')}}" class="w-10 h-10">
<span class="font-semibold text-xl tracking-tight" style=" color: #046cbe;"> {{ config('app.name', 'Mesort') }}</span>
</div>
<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto font-bold ">
<div class="text-sm lg:flex-grow">
<a class="block mt-4 lg:inline-block lg:mt-0 mr-4 menu-item" href="{{url('/')}}">
Home
</a>
@if(Auth::user()->hasRole('superadministrator'))
<a class="navbar-item" href="{{url('translations')}}">
Translations
<a target="_blank" class="block mt-4 lg:inline-block lg:mt-0 mr-4 menu-item"
href="{{config('utilities.emailFeedbackText')}}"
>
Email Feedback
</a>
@endif
</div>
@if(Auth::user()->hasRole('superadministrator'))
<a target="_blank" class="block mt-4 lg:inline-block lg:mt-0 mr-4 menu-item"
href="{{url('translations')}}"
>
{{ __('Translations') }}
<div class="navbar-end">
<!-- Authentication Links -->
</a>
@if(Auth::user()->hasRole(['superadministrator','supervisor']) || Auth::user()->can('create-studies'))
@endif
<div class="navbar-item">
<p class="control">
<a class="" href="{{url('studies/new')}}">
<span class="icon">
<plus-icon title="add a study" />
<div class="float-right">
@if(Auth::user()->hasRole(['superadministrator','supervisor']) || Auth::user()->can('create-studies'))
<a class="block mt-4 lg:inline-block lg:mt-0 mr-4 menu-item "
href="{{url('studies/new')}}"
>
<span class="icon">
<plus-icon title="add a study"/>
</span>
<span>
{{ __('New Study') }}
</span>
</a>
</p>
</div>
@endif
<div class="navbar-item has-dropdown is-hoverable">
@if(Auth::user()->hasRole(['superadministrator']))
<a class="navbar-link">
{{__('Language')}} <span class="caret"></span>
</a>
@endif
<div class="navbar-dropdown is-right ">
<a class="navbar-item" href="{{ url('switch/de') }}">
{{ __('German') }}
</a>
<a class="navbar-item" href="{{ url('switch/en') }}">
{{ __('Englisch') }}
</a>
</div>
</div>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
{{ Auth::user()->email }} <span class="caret"></span>
</a>
<div class="navbar-dropdown is-right ">
<a class="navbar-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</div>
{{ __('New Study') }}
</a>
@endif
@if(Auth::user()->hasRole(['superadministrator']))
<div
class="block mt-4 lg:inline-block lg:mt-0 mr-4 menu-item languagedropbtn relative inline-block hover:cursor-pointer"
href="#" @click="showdropdown('dropdownLanguage')" @mouseover="showdropdown('dropdownLanguage')"
>
{{__('Language')}}
<Caret></Caret>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
<div id="dropdownLanguage" class="languagedropdown-content absolute hidden w-full text-center"
@mouseover="showdropdown('dropdownLanguage')"
@mouseleave="showdropdown('dropdownLanguage')">
<a class="text-center w-full mt-4 lg:inline-block lg:mt-0 mr-4 menu-item has-background-white-ter shadow-sm px-5 py-2"
href="{{ url('switch/de') }}"
>
{{ __('German') }}
</a>
<a class="text-center w-full lg:inline-block lg:mt-0 mr-4 menu-item has-background-white-ter shadow-sm px-5 py-2"
href="{{ url('switch/de') }}"
>
{{ __('Englisch') }}
</a>
</div>
</div>
@endif
<div
class="block mt-4 lg:inline-block lg:mt-0 mr-4 menu-item logoutdropbtn relative inline-block hover:cursor-pointer"
href="#" @click="showdropdown('dropdownLogout')" @mouseover="showdropdown('dropdownLogout')"
>
{{ Auth::user()->email }}
<Caret></Caret>