Commit 0aa634f0 authored by ZeMKI's avatar ZeMKI
Browse files

New design

* homepage done
* new study started
* login and registration done
parent a6ab95ca
......@@ -4,7 +4,7 @@
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
"This file is @generated automatically"
],
"content-hash": "17fe3fec5f84d4e664f4911f2745bee9",
"content-hash": "e8f013b87f07553d50e3b8d23d52cfd5",
"packages": [
{
"name": "alessandrobelli/lingua",
......@@ -277,6 +277,69 @@
],
"time": "2021-08-15T20:50:18+00:00"
},
{
"name": "creativeorange/gravatar",
"version": "v1.0.21",
"source": {
"type": "git",
"url": "https://github.com/creativeorange/gravatar.git",
"reference": "f5f25dda14aff8b296a52a92f375586114608cda"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/creativeorange/gravatar/zipball/f5f25dda14aff8b296a52a92f375586114608cda",
"reference": "f5f25dda14aff8b296a52a92f375586114608cda",
"shasum": ""
},
"require": {
"illuminate/support": "^5|^6|^7|^8|^9",
"php": ">=5.4.0"
},
"require-dev": {
"nunomaduro/larastan": "^0.6.2",
"orchestra/testbench": "^5.4",
"php": ">=7.2"
},
"type": "library",
"extra": {
"laravel": {
"providers": [
"Creativeorange\\Gravatar\\GravatarServiceProvider"
],
"aliases": {
"Gravatar": "Creativeorange\\Gravatar\\Facades\\Gravatar"
}
}
},
"autoload": {
"psr-4": {
"Creativeorange\\Gravatar\\": "src/"
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"authors": [
{
"name": "Jaco Tijssen",
"email": "jaco@creativeorange.nl",
"homepage": "https://www.creativeorange.nl",
"role": "Developer"
}
],
"description": "A Laravel Gravatar package for retrieving gravatar image URLs or checking the existance of an image.",
"keywords": [
"avatar",
"gravatar",
"laravel"
],
"support": {
"issues": "https://github.com/creativeorange/gravatar/issues",
"source": "https://github.com/creativeorange/gravatar/tree/v1.0.21"
},
"time": "2022-01-19T20:28:57+00:00"
},
{
"name": "dflydev/dot-access-data",
"version": "v3.0.1",
......
This diff is collapsed.
......@@ -10,10 +10,16 @@
"production": "mix --production",
"compress": "bread-compressor -s public/css/*.css public/js/*.js"
},
"postcss":{"plugins":{"tailwindcss":"./tailwind.config.js"},"autoprefixer":{}},
"postcss": {
"plugins": {
"tailwindcss": "./tailwind.config.js"
},
"autoprefixer": {}
},
"devDependencies": {
"@babel/core": "^7.17.4",
"@babel/preset-env": "^7.16.11",
"@tailwindcss/forms": "^0.5.0",
"autoprefixer": "^10.4.2",
"axios": "^0.21.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
......@@ -26,7 +32,7 @@
"laravel-mix-purgecss": "^6.0.0",
"lodash": "^4.17.21",
"popper.js": "^2.0.0-next.4",
"postcss": "^8.4.6",
"postcss": "^8.4.8",
"postcss-import": "^14.0.2",
"sass": "^1.49.7",
"sass-loader": "^8.0.2",
......
......@@ -439,7 +439,27 @@ window.app = new Vue({
interviewaddtoken: function () {
store.commit("newtokenmodal");
},
catchOutsideClick(event, dropdown) {
// When user clicks menu — do nothing
if (dropdown == event.target) return false;
// When user clicks outside of the menu — close the menu
if (
!dropdown.classList.contains("hidden") &&
dropdown != event.target
)
return true;
},
showdropdown: function (id) {
var self = this;
const closeListerner = (e) => {
if (self.catchOutsideClick(e, self.$refs.usermenu))
window.removeEventListener("click", closeListerner),
document.getElementById(id).classList.toggle("hidden");
};
window.addEventListener("click", closeListerner);
document.getElementById(id).classList.toggle("hidden");
},
showmodal: function (id = null, study) {
......
......@@ -41,5 +41,3 @@ Vue.component(
"notification-bell",
require("./components/notificationBell.vue").default
);
Vue.component("navbar-home", require("./components/navbarhome.vue").default);
This diff is collapsed.
......@@ -3,8 +3,6 @@
<div
id="newStudyContainer"
class="flex flex-wrap w-2/3 mx-auto">
<b-loading :active.sync="loading" :can-cancel="false" :is-full-page="true"></b-loading>
<div
class="block w-full">
<sorting-preview
......@@ -19,43 +17,77 @@
</div>
<form
enctype="multipart/form-data">
<h1 class="text-6xl font-bold text-blue-500 uppercase" v-text="isedit ? trans('Edit Study') : trans('Create Study')">
<h1 class="text-4xl font-extrabold tracking-tight text-blue-500 uppercase md:text-5xl lg:text-6xl" v-text="isedit ? trans('Edit Study') : trans('Create Study')">
</h1>
<h6 class="mt-1 text-xl text-red-600">
<h6 class="my-6 text-xl text-red-600">
{{
trans('To create a new study, you should provide some general information, choose a sorting scheme you wish to use and add additional questions for your interviewees. To navigate between these options please use the three tabs provided below.')
}}</h6>
<div
class="w-full mx-auto">
<ul class="flex flex-row flex-wrap pt-3 pb-4 mb-0 list-none">
<li class="flex-auto mr-2 -mb-px text-center border-b-2 border-blue-500 border-solid last:mr-0 hover:border-blue-600">
<a :class="{'text-gray-400 bg-white': openTab !== 1, 'text-blue-500 ': openTab === 1}"
class="block px-5 py-3 font-bold leading-normal uppercase hover:text-blue-600 "
v-on:click="toggleTabs(1)">
<nav aria-label="Progress">
<ol role="list" class="space-y-4 md:flex md:space-y-0 md:space-x-8">
<li class="md:flex-1">
<!-- Completed Step -->
<a href="#"
class="flex flex-col py-2 pl-4 border-l-4 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4"
v-on:click="toggleTabs(1)"
:class="{'border-gray-200 group hover:border-gray-300': openTab !== 1, 'border-blue-500 group hover:border-blue-800': openTab === 1}">
<span
class="text-xs font-semibold tracking-wide uppercase"
:class="{'text-gray-500 group-hover:text-gray-700 ': openTab !== 1, 'text-blue-500 group-hover:text-blue-800': openTab === 1}"
>Step 1</span>
<span class="text-sm font-medium">
{{
trans('Study Details')
}}
</a>
</li>
<li class="flex-auto mr-2 -mb-px text-center border-b-2 border-blue-500 border-solid last:mr-0 hover:border-blue-600">
<a :class="{'text-gray-400 bg-white': openTab !== 2, 'text-blue-500 ': openTab === 2}"
class="block px-5 py-3 font-bold leading-normal uppercase hover:text-blue-600 "
v-on:click="toggleTabs(2)">
{{
</span>
</a>
</li>
<li class="md:flex-1">
<!-- Current Step -->
<a href="#"
class="flex flex-col py-2 pl-4 border-l-4 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4"
:class="{'border-gray-200 group hover:border-gray-300': openTab !== 2, 'border-blue-500 group hover:border-blue-800': openTab === 2}"
v-on:click="toggleTabs(2)"
>
<span
class="text-xs font-semibold tracking-wide uppercase"
:class="{'text-gray-500 group-hover:text-gray-700': openTab !== 2, 'text-blue-500 group-hover:text-blue-800': openTab === 2}"
>Step 2</span>
<span class="text-sm font-medium">
{{
trans('Select Sorting Options')
}}
</a>
</li>
<li class="flex-auto mr-2 -mb-px text-center border-b-2 border-blue-500 border-solid last:mr-0 hover:border-blue-600">
<a :class="{'text-gray-400 bg-white': openTab !== 3, 'text-blue-500 ': openTab === 3}"
class="block px-5 py-3 font-bold leading-normal uppercase hover:text-blue-600 "
v-on:click="toggleTabs(3)">
{{
</span>
</a>
</li>
<li class="md:flex-1">
<!-- Upcoming Step -->
<a href="#"
class="flex flex-col py-2 pl-4 border-l-4 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4"
:class="{'border-gray-200 group hover:border-gray-300': openTab !== 3, 'border-blue-500 group hover:border-blue-800': openTab === 3}"
v-on:click="toggleTabs(3)">
<span
class="text-xs font-semibold tracking-wide uppercase"
:class="{'text-gray-500 group-hover:text-gray-700': openTab !== 3, 'text-blue-500 group-hover:text-blue-800': openTab === 3}"
>Step 3</span>
<span class="text-sm font-medium">
{{
trans('Questions')
}}
</a>
</li>
</ul>
</span>
</a>
</li>
</ol>
</nav>
<div
class="relative flex flex-col w-full min-w-0 mb-6 break-words bg-white rounded shadow-lg">
<div
......@@ -78,7 +110,7 @@
class="field">
<label
:class="response.indexOf(errormessages.studyname) > -1 ? 'is-red text-uppercase': 'text-uppercase'"
class="label">
class="block text-base font-bold text-gray-700">
{{
trans('Study Name')
}}
......@@ -88,7 +120,7 @@
<textarea
id="studyname"
v-model="name"
:class="response.indexOf(errormessages.studyname) > -1 ? 'bg-gray-200 focus:bg-gray-200 border-transparent focus:border-blue-400 border-red-500': 'bg-gray-200 focus:bg-gray-200 border-transparent focus:border-blue-400'"
:class="response.indexOf(errormessages.studyname) > -1 ? 'shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm rounded-md border-red-500': 'shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-200 rounded-md'"
:maxlength="inputLength.studyname"
class="w-full textarea"
placeholder=""
......@@ -112,14 +144,14 @@
<div
class="field">
<label
class="label">{{
class="block text-base font-bold text-gray-700">{{
trans('Responsible Researcher(s)')
}}</label>
<div
class="control">
<textarea
v-model="author"
:class="response.indexOf(errormessages.author) > -1 ? 'bg-gray-200 focus:bg-gray-200 border-transparent focus:border-blue-400 border-red-500': 'bg-gray-200 focus:bg-gray-200 border-transparent focus:border-blue-400'"
:class="response.indexOf(errormessages.author) > -1 ? 'shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm rounded-md border-red-500': 'shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-200 rounded-md'"
:maxlength="inputLength.author"
class="textarea"
placeholder=""
......@@ -143,14 +175,14 @@
<div
class="field">
<label
class="label">{{
class="block text-base font-bold text-gray-700">{{
trans('Short description of study')
}}</label>
<div
class="control">
<textarea
v-model="short_description"
:class="response.indexOf(errormessages.short_description) > -1 ? 'bg-gray-200 focus:bg-gray-200 border-transparent focus:border-blue-400 border-red-500': 'bg-gray-200 focus:bg-gray-200 border-transparent focus:border-blue-400'"
:class="response.indexOf(errormessages.short_description) > -1 ? 'shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm rounded-md border-red-500': 'shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-200 rounded-md'"
:maxlength="inputLength.short_description"
class="textarea"
placeholder=""></textarea>
......@@ -193,7 +225,7 @@
id="sortingDescription"
v-model="sorting.description"
:maxlength="inputLength.sorting_description"
class="bg-gray-200 border-transparent textarea focus:bg-gray-200 focus:border-blue-400"
class="block w-full border-gray-200 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
placeholder=""
type="text"></textarea>
<span
......
<template>
<div>
<div
class="items-center justify-center inline-block mr-4 text-center align-middle"
class="flex items-center justify-center mr-4 text-center align-middle"
>
<p
class="inline w-6 h-6 p-2 mx-auto text-xs font-bold text-white bg-indigo-500 rounded-full select-none cursor-none"
class="flex items-center justify-center w-6 h-6 text-xs font-bold text-center text-white align-middle bg-blue-700 rounded-full select-none cursor-none"
v-if="howmanyunreadnotifications > 0"
>
{{ howmanyunreadnotifications }}
</p>
<a
class="inline"
class="flex"
@click.prevent="shownotificationbox = !shownotificationbox"
>
<svg
class="w-6 h-6"
xmlns="http://www.w3.org/2000/svg"
class="inline w-8 h-8 fill-current"
viewBox="0 0 20 20"
fill="currentColor"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path
d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
/>
</svg>
</a>
</div>
<div
class="absolute z-50 w-64 h-64 mr-20 overflow-auto bg-gray-100 border-2 border-gray-400 border-solid "
style="top:50px;"
v-show="shownotificationbox"
class="absolute z-10 items-end w-screen max-w-xs px-2 mt-3 sm:px-0"
>
<div class="w-full p-2 bg-gray-200">
<p class="font-bold text-center text-blue-400 align-middle">
{{ trans("Notifications") }}
</p>
</div>
<div
class="relative z-10 w-auto pb-6 text-black border-t border-b border-b-4 border-gray-400 border-solid"
:class="
notification.read_at == null ? 'bg-gray-500' : 'bg-gray-300'
"
role="relative px-3 py-3 mb-4 border"
v-for="notification in usernotifications"
class="overflow-hidden break-words rounded-lg shadow-lg ring-1 ring-black ring-opacity-5"
>
<div
class="items-center justify-center w-full p-2 align-middle bg-gray-200"
class="relative grid gap-6 px-5 py-6 bg-white sm:gap-8 sm:p-8"
>
<p class="inline text-blue-600">
{{ formatDate(notification.created_at) }}
</p>
<a
v-if="notification.read_at == null"
role="button"
class="right-0 z-50 inline px-4 py-2 text-xs font-bold text-white text-blue-400 bg-gray-900 shrink hover:bg-gray-700"
@click.prevent="togglenotification(notification.id)"
<div
v-for="(notification, index) in usernotifications"
:key="index"
href="#"
class="block p-3 -m-3 transition duration-150 ease-in-out rounded-md hover:bg-gray-50"
>
{{ trans("Set to READ") }}
</a>
<div class="flex-1 w-auto p-1">
<p class="text-base font-medium text-gray-900">
{{ notification.data["title"] }}
</p>
<p
class="mt-1 text-sm text-gray-500 break-words"
v-html="notification.data['message']"
></p>
</div>
<div class="flex border-l border-gray-200">
<button
v-if="notification.read_at == null"
@click.prevent="
togglenotification(notification.id)
"
class="flex items-center justify-center w-full p-4 text-sm font-medium text-blue-500 border border-transparent rounded-none rounded-r-lg hover:text-blue-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"
>
{{ trans("Set to READ") }}
</button>
</div>
</div>
</div>
<p
class="block px-4 mt-1 text-xs font-normal text-justify break-word "
>
<span class="text-sm font-bold">
{{ notification.data["title"] }}
</span>
<br />
<span
class="break-words"
v-html="notification.data['message']"
></span>
</p>
</div>
</div>
</div>
</template>
<script>
import Bell from "vue-material-design-icons/Bell";
import moment from "moment";
export default {
name: "notificationBell",
components: { Bell },
components: {},
data() {
return {
shownotificationbox: false,
usernotifications: [],
howmanyunreadnotifications: 0
howmanyunreadnotifications: 0,
};
},
created() {
......@@ -99,7 +94,7 @@ export default {
this.productionUrl +
"/users/notifications"
)
.then(response => {
.then((response) => {
self.usernotifications = response.data;
self.howmanyunreadnotifications = 0;
for (let i = 0; i < self.usernotifications.length; i++) {
......@@ -108,31 +103,32 @@ export default {
}
}
})
.catch(function(error) {
.catch(function (error) {
self.loading = false;
// self.$buefy.snackbar.open('There it was an error during the request - refresh page and try again');
});
},
methods: {
togglenotification: function(id) {
togglenotification: function (id) {
let self = this;
axios
.post("users/notifications/update", { notification: id })
.then(response => {
.then((response) => {
// if set to read set background different
self.$buefy.snackbar.open("Notification set to read");
let notification = _.find(self.usernotifications, function(
o
) {
return o.id === id;
});
let notification = _.find(
self.usernotifications,
function (o) {
return o.id === id;
}
);
notification.read_at = response.data;
self.howmanyunreadnotifications--;
self.$forceUpdate();
})
.catch(function(error) {
.catch(function (error) {
self.loading = false;
self.$buefy.snackbar.open(
"There it was an error during the request - refresh page and try again"
......@@ -157,7 +153,7 @@ export default {
return moment(String(date)).format(this.getLocaleDateString());
},
getLocaleDateString: function() {
getLocaleDateString: function () {
var formats = {
"ar-SA": "DD/MM/YY HH:mm",
"bg-BG": "DD.M.YYYY HH:mm",
......@@ -368,12 +364,12 @@ export default {
"en-SG": "d/M/YYYY HH:mm",
"ug-CN": "YYYY-M-d HH:mm",
"sr-Cyrl-BA": "DD.M.YYYY HH:mm",
"es-US": "M/DD/YYYY HH:mm"
"es-US": "M/DD/YYYY HH:mm",
};
return formats[navigator.language] || "DD/MM/YYYY HH:mm";
}
}
},
},
};
</script>
......
This diff is collapsed.
<nav class="flex items-center w-screen py-2 justify-between bg-gray-900 py-4">
<div class="flex items-center text-blue-400 h-full">
<img src="{{config('utilities.base64logo')}}" class="w-10 h-10" alt="Mesort Logo">
<a class="font-bold hover:bg-blue-300 hover:text-white" target="_blank"
href="https://mesoftware.org/index.php/mesort/" title="Mesort Manual"
rel="noopener noreferrer"> {{ __('MeSort Manual') }} </a>
<a class="font-semibold ml-4 hover:bg-blue-300 hover:text-white px-4 py-4"
href="{{url('/')}}"
>
{{ __('Home') }}
</a>
@if(Auth::user()->hasRole('admin'))
<a target="_blank" class="font-semibold ml-4 hover:bg-blue-300 hover:text-white px-4 py-4"
href="{{url('translations')}}"
>
{{ __('Translations') }}
<div class="relative flex flex-col min-h-full">
<!-- Navbar -->
<nav class="flex-shrink-0 bg-blue-500">
<div class="px-2 mx-auto max-w-7xl sm:px-4 lg:px-8">
<div class="relative flex items-center justify-between h-16">
<!-- Logo section -->
<div class="flex items-center px-2 lg:px-0 xl:w-64">
<div class="flex-shrink-0">
<a href="{{url('/')}}" title="home">
<img class="w-auto h-10" src="{{config('utilities.base64logo')}}" alt="MeSort Logo">
</a>
@endif
</div>
{{-- @if(Request::is('/'))
<div class="flex text-blue-700 items-center ">
You have {{$studies->count()}} Studies
</div>
</div>
@endif--}}
<div class="flex items-center text-blue-400 h-full">
<!-- Search section -->
{{-- <div class="flex justify-center flex-1 lg:justify-end">
<div class="w-full px-2 lg:px-6">
<label for="search" class="sr-only">Search Studies</label>
<div class="relative text-indigo-200 focus-within:text-gray-400">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<!-- Heroicon name: solid/search -->
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
</svg>
</div>
<input id="search" name="search" class="block w-full py-2 pl-10 pr-3 leading-5 text-indigo-100 placeholder-indigo-200 bg-indigo-400 bg-opacity-25 border border-transparent rounded-md focus:outline-none focus:bg-white focus:ring-0 focus:placeholder-gray-400 focus:text-gray-900 sm:text-sm" placeholder="Search projects" type="search">
</div>
</div>
</div> --}}
<div class="flex lg:hidden">
<!-- Mobile menu button -->
<button type="button" class="inline-flex items-center justify-center p-2 text-indigo-400 bg-indigo-600 rounded-md hover:text-white hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-indigo-600 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!--
Icon when menu is closed.
Heroicon name: outline/menu-alt-1
Menu open: "hidden", Menu closed: "block"
-->
<svg class="block w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" />
</svg>
<!--
Icon when menu is open.
Heroicon name: outline/x