Skip to content
GitLab
Commit b1e4bb74 authored by ZeMKI's avatar ZeMKI
Browse files

starting new UI and merging production

parent 440b408b
Expand all Hide whitespace changes
Inline Side-by-side
.gitignore
View file @ b1e4bb74
......@@ -33,3 +33,4 @@ composer.lock
public/vendor/livewire/manifest.json
public/vendor/livewire/livewire.js.map
ray.php
public/translations.zip
resources/js/bootstrap.js
View file @ b1e4bb74
window._ = require('lodash');
window.Popper = require('popper.js').default;
window._ = require("lodash");
window.Popper = require("popper.js").default;
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
......@@ -9,7 +8,7 @@ window.Popper = require('popper.js').default;
*/
try {
window.$ = window.jQuery = require('jquery');
window.$ = window.jQuery = require("jquery");
//require('bootstrap');
} catch (e) {}
......@@ -20,9 +19,9 @@ try {
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
window.axios = require("axios");
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
/**
* Next we will register the CSRF Token as a common header with Axios so that
......@@ -33,9 +32,11 @@ window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
window.axios.defaults.headers.common["X-CSRF-TOKEN"] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
console.error(
"CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token"
);
}
/**
......
resources/js/components.js
View file @ b1e4bb74
import vSelect
from 'vue-select';
import vSelect from "vue-select";
Vue.component("v-select", vSelect);
Vue.component(
'v-select',
vSelect,
"new-interview",
require("./components/Interview/newinterview.vue").default
);
Vue.component(
'new-interview',
require(
'./components/Interview/newinterview.vue').default,
"circle-sorting",
require("./components/Interview/circle-sorting.vue").default
);
Vue.component(
'circle-sorting',
require(
'./components/Interview/circle-sorting.vue').default,
"new-token",
require("./components/Interview/newtokenmodal.vue").default
);
Vue.component(
'new-token',
require(
'./components/Interview/newtokenmodal.vue').default,
"interview-list",
require("./components/Interview/interviewlist.vue").default
);
Vue.component("q-sort", require("./components/Interview/q-sort.vue").default);
Vue.component(
'interview-list',
require(
'./components/Interview/interviewlist.vue').default,
"network-sorting",
require("./components/Interview/network-sorting.vue").default
);
Vue.component(
'q-sort',
require(
'./components/Interview/q-sort.vue').default,
"sorting-preview",
require("./components/Interview/sorting_preview.vue").default
);
Vue.component("url-list", require("./components/publicurllist").default);
Vue.component("new-study", require("./components/newstudy.vue").default);
Vue.component("action-table", require("./components/actiontable.vue").default);
Vue.component("user-table", require("./components/usertable.vue").default);
Vue.component(
'network-sorting',
require(
'./components/Interview/network-sorting.vue').default,
"better-browser-message",
require("./components/useChromeFirefoxModal.vue").default
);
Vue.component(
'sorting-preview',
require(
'./components/Interview/sorting_preview.vue').default,
"study-invites",
require("./components/studyInvites.vue").default
);
Vue.component(
'url-list',
require(
'./components/publicurllist').default,
);
Vue.component(
'new-study',
require(
'./components/newstudy.vue').default,
);
Vue.component(
'action-table',
require(
'./components/actiontable.vue').default,
);
Vue.component(
'user-table',
require(
'./components/usertable.vue').default,
);
Vue.component(
'better-browser-message',
require(
'./components/useChromeFirefoxModal.vue').default,
);
Vue.component(
'study-invites',
require(
'./components/studyInvites.vue').default,
);
Vue.component(
'notification-bell',
require(
'./components/notificationBell.vue').default,
"notification-bell",
require("./components/notificationBell.vue").default
);
Vue.component("navbar-home", require("./components/navbarhome.vue").default);
resources/js/components/navbarhome.vue 0 → 100644
View file @ b1e4bb74
This diff is collapsed.
resources/sass/_variables.scss
View file @ b1e4bb74
......@@ -18,11 +18,11 @@ $body-bg: #fdfbf7;
$question-bg: #e9e7e3;
// Typography
$font-family-sans-serif: 'Helvetica Neue', 'Arial';
$font-family-sans-serif: 'Inter var','Helvetica Neue', 'Arial';
$family-primary: $font-family-sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;
$family-header: Helvetica,Arial,sans-serif;
$family-header: 'Inter var',Helvetica,Arial,sans-serif;
$success: #046cbe;
$primary: #046cbe;
$danger: #d92442;
......
resources/views/auth/layouts/app.blade.php
View file @ b1e4bb74
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full bg-gray-50">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
......@@ -35,9 +35,9 @@
?>;
</script>
</head>
<body>
<body class="h-full">
<div id="app" class="bg-blue-900">
<div id="app">
@yield('content')
......
resources/views/auth/login.blade.php
View file @ b1e4bb74
......@@ -2,66 +2,92 @@
@section('content')
<div class="flex sm:items-start md:items-center md:justify-center h-screen">
<div class="bg-white p-4 rounded overflow-hidden shadow-lg sm:w-full md:w-1/2 lg:w-1/3">
@if(session()->has('message') || !empty($message))
<div class="bg-blue-100 border-t border-b border-blue-500 text-blue-700 px-4 py-3" role="alert">
<p class="font-bold">{{session()->get('message') ? session()->get('message') : $message}}</p>
</div>
@endif
<div class="md:hidden bg-yellow-300 w-full border-orange-100 border-2 text-yellow-900 p-4" role="alert">
{{__('Mesort is intended to be used on a Tablet or Computer')}}
</div>
<form method="POST" action="{{ route('login') }}">
@csrf
<figure class="w-1/4 m-auto max-w-full">
<img src="{{config('utilities.base64logo')}}" alt="Mesort Logo">
</figure>
<div class="text-center">
<h1 class="text-4xl pb-2 m-auto max-w-full font-extrabold">Mesort</h1>
<h4> {{ __('Login') }} </h4>
<div class="py-4 w-full text-center">
<a class="text-blue-500 hover:text-red-600 block"
href="{{url('register')}}">{{__("Register to use Mesort")}}</a>
</div>
</div>
<label for="email" class="label">{{ __('E-Mail Address') }}</label>
<input id="email" type="email"
class="input {{ $errors->has('email') ? ' bg-red-800 text-white' : '' }}" name="email"
value="{{ old('email') }}" required autofocus>
<div class="p-4 mx-2 rounded-md bg-yellow-50 md:hidden" role="alert">
<div class="flex">
<div class="flex-shrink-0">
<svg class="w-5 h-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-yellow-800">{{__('Attention Needed')}}</h3>
<div class="mt-2 text-sm text-yellow-700">
<p>{{__('Mesort is intended to be used on a Tablet or Computer')}}</p>
</div>
</div>
</div>
</div>
@if(session()->has('message') || !empty($message))
<div class="p-4 rounded-md bg-red-50">
<div class="flex">
<div class="flex-shrink-0">
<!-- Heroicon name: solid/x-circle -->
<svg class="w-5 h-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
</svg>
<div class="my-2">
<label for="password" class="label">{{ __('Password') }}</label>
</div>
<div class="ml-3">
<div class="mt-2 text-sm text-red-700">
{{session()->get('message') ? session()->get('message') : $message}}
</div>
</div>
</div>
</div>
@endif
<div class="flex items-center justify-center min-h-full px-4 py-12 sm:px-6 lg:px-8">
<div class="w-full max-w-md space-y-8">
<div>
<img class="w-auto h-24 mx-auto" src="{{config('utilities.base64logo')}}" alt="Mesort Logo">
<h1 class="mt-6 text-3xl font-extrabold text-center text-gray-900">Sign in to MeSort</h1>
<p class="mt-2 text-sm text-center text-gray-600">
Or
<a href="{{url('register')}}" class="font-medium text-indigo-600 hover:text-indigo-500"> Register to use MeSort </a>
</p>
</div>
<form class="mt-8 space-y-6" action="{{ route('login') }}" method="POST">
<input type="hidden" name="remember" value="true">
@csrf
<div class="-space-y-px rounded-md shadow-sm">
<div>
<label for="email-address" class="sr-only">{{ __('E-Mail Address') }}</label>
<input id="email-address" name="email" type="email" autocomplete="email" required class="relative block w-full px-3 py-2 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-none appearance-none rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="Email address">
</div>
<div>
<label for="password" class="sr-only">{{ __('Password') }}</label>
<input id="password" name="password" type="password" autocomplete="current-password" required class="relative block w-full px-3 py-2 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-none appearance-none rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="Password">
</div>
</div>
<input id="password" type="password"
class="input {{ $errors->has('password') ? ' bg-red-800 text-white' : '' }}"
name="password"
required>
</div>
<a class="text-blue-500 hover:text-red-600 block"
href="{{url('password/reset')}}">{{__("Forgot Password?")}}
</a>
<div class="flex items-center justify-between">
<div class="text-sm">
<a href="{{url('password/reset')}}" class="font-medium text-indigo-600 hover:text-indigo-500"> Forgot your password? </a>
</div>
</div>
@if ($errors->has('email'))
<div class="bg-red-700 my-2 pl-2 py-2 text-white font-bold">{{ $errors->first('email') }}
<div class="py-2 pl-2 my-2 font-bold text-white bg-red-700 rounded-none appearance-none rounded-b-md">{{ $errors->first('email') }}
</div>
@endif
@if ($errors->has('password'))
<div class="bg-red-700 my-2 pl-2 py-2 text-white font-bold">{{ $errors->first('password') }}
<div class="py-2 pl-2 my-2 font-bold text-white bg-red-700 rounded-none appearance-none rounded-b-md">{{ $errors->first('password') }}
</div>
@endif
<div class="text-center align-middle">
<button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded">
{{__("Login")}}
</button>
</div>
</form>
</div>
</div>
<div>
<button type="submit" class="relative flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md group hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
<!-- Heroicon name: solid/lock-closed -->
<svg class="w-5 h-5 text-indigo-500 group-hover:text-indigo-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
</svg>
</span>
{{__("Login")}}
</button>
</div>
</form>
</div>
</div>
@endsection
resources/views/auth/register.blade.php
View file @ b1e4bb74
......@@ -2,33 +2,61 @@
@section('content')
<div class="flex sm:items-start md:items-center md:justify-center h-screen">
<div class="bg-white p-4 rounded overflow-hidden shadow-lg sm:w-full md:w-1/2 lg:w-1/3">
<form method="POST" action="{{ route('register') }}">
@csrf
<figure class="w-1/4 m-auto max-w-full">
<img src="{{config('utilities.base64logo')}}" alt="Mesort Logo">
</figure>
<div class="text-center">
<h1 class="text-4xl pb-2 m-auto max-w-full font-extrabold">Mesort</h1>
<h4> {{ __('Register') }} </h4>
<div class="py-4 w-full text-center ">
<a class="text-blue-500 hover:text-red-600" href="{{url('login')}}">{{__("Login Page")}}</a>
</div>
</div>
<label for="email" class="label">{{ __('E-Mail Address') }}</label>
<div class="control">
<input id="email" type="email"
class="input {{ $errors->has('email') ? ' bg-red-dark' : '' }}" name="email"
value="{{ old('email') }}" required autofocus v-model="registration.email">
</div>
<div class="p-4 mx-2 rounded-md bg-yellow-50 md:hidden" role="alert">
<div class="flex">
<div class="flex-shrink-0">
<svg class="w-5 h-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-yellow-800">{{__('Attention Needed')}}</h3>
<div class="mt-2 text-sm text-yellow-700">
<p>{{__('Mesort is intended to be used on a Tablet or Computer')}}</p>
</div>
</div>
</div>
</div>
@if(session()->has('message') || !empty($message))
<div class="p-4 rounded-md bg-red-50">
<div class="flex">
<div class="flex-shrink-0">
<!-- Heroicon name: solid/x-circle -->
<svg class="w-5 h-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<div class="mt-2 text-sm text-red-700">
{{session()->get('message') ? session()->get('message') : $message}}
</div>
</div>
</div>
</div>
@endif
<div class="flex items-center justify-center min-h-full px-4 py-12 sm:px-6 lg:px-8">
<div class="w-full max-w-md space-y-8">
<div>
<img class="w-auto h-24 mx-auto" src="{{config('utilities.base64logo')}}" alt="Mesort Logo">
<h1 class="mt-6 text-3xl font-extrabold text-center text-gray-900">Register to MeSort</h1>
<p class="mt-2 text-sm text-center text-gray-600">
Or
<a href="{{url('login')}}" class="font-medium text-indigo-600 hover:text-indigo-500"> Login </a>
</p>
</div>
<form class="mt-8 space-y-6" method="POST" action="{{ route('register') }}">
<input type="hidden" name="remember" value="true">
@csrf
<div class="-space-y-px rounded-md shadow-sm">
<div>
<label for="email-address" class="sr-only">{{ __('E-Mail Address') }}</label>
<input id="email-address" name="email" type="email" autocomplete="email" required class="relative block w-full px-3 py-2 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-none appearance-none rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="Email address">
</div>
<ul class="w-full my-2">
<li class="list-item-registration w-auto"
<li class="w-auto list-item-registration"
:class="{ is_valid: registration.contains_six_characters }">{{__('6 Characters')}}
</li>
<li class="list-item-registration" :class="{ is_valid: registration.contains_number }">
......@@ -38,56 +66,55 @@
{{__('Contains Letters')}}
</li>
</ul>
<div class="my-2">
<label for="password" class="label">{{ __('Password') }}</label>
<input id="password" type="password" v-model="registration.password"
<div>
<label for="password" class="sr-only">{{ __('Password') }}</label>
<input
id="password" type="password" v-model="registration.password"
@input="checkPassword()"
class="input {{ $errors->has('password') ? ' bg-red-dark' : '' }}"
name="password"
required>
</div>
<div class="my-2">
<label for="password-confirm"
required
autocomplete="current-password" required class="relative block w-full px-3 py-2 text-gray-900 placeholder-gray-500 border border-gray-300 rounded-none appearance-none rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm" placeholder="Password">
</div>
<div>
<label for="password-confirm"
class="label">{{ __('Confirm Password') }}</label>
<input id="password-confirm" type="password" class="input"
name="password_confirmation" required>
</div>
@if ($errors->has('email'))
<div class="bg-red-700 my-2 pl-2 py-2">
<strong>{{ $errors->first('email') }}</strong>
</div>
@endif
@if ($errors->has('password'))
<div class="bg-red-700 my-2 pl-2 py-2">
<strong>{{ $errors->first('password') }}</strong>
</div>
@endif
</div>
</div>
<div class="text-center align-middle">
<label class="w-full block font-bold">
<div class="flex items-center justify-between">
<label class="block w-full font-bold">
<input class="mr-2 leading-tight" type="checkbox" checked name="newsletter">
<span class="text-sm">
Send me your newsletter!
</span>
</label>
</div>
<p class="block">{!!__('By registering you confirmed that you read the <a class="text-blue-500" target="_blank" href="https://mesoftware.org/index.php/datenschutzerklaerung-mesort/" title="Privacy Policy">Privacy Policy</a>')!!}</p>
<button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-l"
<div>
<p class="block">{!!__('By registering you confirmed that you read the <a class="text-blue-500" target="_blank" href="https://mesoftware.org/index.php/datenschutzerklaerung-mesort/" title="Privacy Policy">Privacy Policy</a>')!!}</p>
<button type="submit" class="relative flex justify-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md group hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
:class="{'opacity-50 cursor-not-allowed opacity-75' : !this.registration.valid_password}"
:disabled="!this.registration.valid_password"
>
{{__('Register')}}
</button>
>
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
<!-- Heroicon name: solid/lock-closed -->
<svg class="w-5 h-5 text-indigo-500 group-hover:text-indigo-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd" />
</svg>
</span>
{{__('Register')}}
</button>
</div>
</form>
</div>
</div>
</div>
</form>
</div>
</div>
@endsection
resources/views/auth/verify.blade.php
View file @ b1e4bb74
......@@ -3,10 +3,10 @@
@section('content')
<div class="flex sm:items-start md:items-center md:justify-center h-screen">
<div class="bg-white p-4 rounded overflow-hidden shadow-lg sm:w-full md:w-1/2 lg:w-1/3">
<div class="flex h-screen sm:items-start md:items-center md:justify-center">
<div class="p-4 overflow-hidden bg-white rounded shadow-lg sm:w-full md:w-1/2 lg:w-1/3">
<h1 class="text-4xl pb-2 m-auto max-w-full font-extrabold text-center">{{ __('Verify Your Email Address') }}</h1>
<h1 class="max-w-full pb-2 m-auto text-4xl font-extrabold text-center">{{ __('Verify Your Email Address') }}</h1>
<div class="text-justify">
{{ __('Before proceeding, please check your email for a verification link.') }}
<form id="resend-form" method="POST" action="{{route('verification.resend')}}">
......@@ -19,7 +19,7 @@
document.getElementById('resend-form').submit();">
{{ __('click here to request another') }}
</a> <br>
<a class="text-blue-700 mt-2" href="{{ route('logout') }}"
<a class="mt-2 text-blue-700" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
......@@ -32,9 +32,9 @@
@if (session('resent'))
<div class="flex items-center bg-blue-500 text-white text-sm font-bold px-4 py-3"
<div class="flex items-center px-4 py-3 text-sm font-bold text-white bg-blue-500"
role="alert">
<svg class="fill-current w-4 mb-2 font-medium leading-tight text-xl mr-2"
<svg class="w-4 mb-2 mr-2 text-xl font-medium leading-tight fill-current"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20">
<path
......
resources/views/layouts/header.blade.php
View file @ b1e4bb74
......@@ -15,6 +15,7 @@
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
......
tailwind.config.js
View file @ b1e4bb74
module.exports = {
content: [
"./storage/framework/views/*.php",
"./resources/**/*.blade.php",
"./resources/**/*.js",
"./resources/js/components/**/*.vue",
"./resources/**/*.vue",
],
theme: {
extend: {
fontFamily: {
sans: [
"Inter var",
"ui-sans-serif",
"system-ui",
"-apple-system",
"BlinkMacSystemFon",
"Segoe UI",
"Roboto",
"Helvetica Neue",
"Arial",
],
},
screens: {
qsortxs: {max: '575px'}, // Mobile (iPhone 3 - iPhone XS Max).
qsortxs: { max: "575px" }, // Mobile (iPhone 3 - iPhone XS Max).
qsortsm: {
min: '576px',
max: '897px',
min: "576px",
max: "897px",
}, // Mobile (matches max: iPhone 11 Pro Max landscape @ 896px).
qsortmd: {
min: '898px',
max: '1199px',
min: "898px",
max: "1199px",
}, // Tablet (matches max: iPad Pro @ 1112px).
qsortlg: {min: '1200px'}, // Desktop smallest.