Commit ab35353c authored by ZeMKI's avatar ZeMKI

Changes to network sorting

* now labels are outside the circle and optimized for tablets.
* optimized labels for tablets.
* now you "add person" for network sorting.
parent 9dc6c38a
This diff is collapsed.
This diff is collapsed.
......@@ -6,8 +6,9 @@
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
"prod": "npm run production && npm run compress",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"compress": "bread-compressor -s public/css/*.css public/js/*.js"
},
"devDependencies": {
"@babel/core": "^7.9.6",
......@@ -16,6 +17,7 @@
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"bootstrap": "^4.5.0",
"bread-compressor-cli": "^1.1.0",
"cross-env": "^6.0.3",
"jquery": "^3.5.0",
"laravel-mix": "^5.0.4",
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
{
"/app.js": "/app.js?id=f2e12e6d70f933613e34",
"/app.css": "/app.css?id=326b997a579e007d2102",
"/app-dark.css": "/app-dark.css?id=5ebb5e33b7c425d6317c"
"/app.js": "/app.js?id=2cc598321134a0bcfac1",
"/app.css": "/app.css?id=d79fb7e75cd04c97ef92",
"/app-dark.css": "/app-dark.css?id=af37df8013614303ea68"
}
......@@ -307,6 +307,7 @@ window.app = new Vue(
sortingtotal: state => state.newinterview.sortingtotal,
presortQuestions: state => state.newinterview.presortQuestions,
postsortQuestions: state => state.newinterview.postsortQuestions,
sortingType: state => state.newinterview.sorting,
}),
},
......@@ -336,6 +337,7 @@ window.app = new Vue(
shownotificationbox: false,
usernotifications: [],
howmanyunreadnotifications: 0,
},
created()
{
......
<template>
<section>
<div :class="'sorting-container'+currentsorting" :id="'sortingc'+currentsorting"
style="scroll-behavior: unset;">
<div class="w-auto h-auto flex">
<h2 style="left:5%;touch-action: none;top:15%"
class="w-1/6 absolute remove-from-screenshot font-bold uppercase bg-gray-800 text-white p-4 text-center">
{{ trans('Choose from prepared tokens') }}
</h2>
<div class="absolute w-1/6 token-container has-to-move flex bg-blue-200" id="token-container"
style="top:20%;left:5%;flex-wrap: wrap;">
<div class="sortingstart z-30" :class="'token'+currentsorting" v-for="(t,index) in tokens"
:id="t.id"
v-if="t.author !== 0 "
@click="assignclassifier(t.id,index)"
style="touch-action: none"
>
<img :src="t.image_path"
class="absolute top-0 left-0"
style="width: 50px;height: 50px;z-index:100;" alt="token">
<img v-for="(classifiersimages,cindex) in t.valutation.classifiers"
:src="classifiersimages.dirname"
class="classifierimage absolute"
:style="'margin-left:'+(25+((cindex+1)*27))+'px;width: 25px;height: 25px;margin-top:12px;z-index:99;'"
:alt="'classifier'+cindex">
<span v-if="t.drag" class="tag is-dark token-label" :id="'tokenlabel'+t.id"
v-html="t.name"></span><br>
<div style="width:200px;top:38px;" class="debugDiv rounded-none block relative"
v-show="debug">
<div v-if="t.drag"
class="rounded-none bg-gray-800 text-white text-sm px-2 w-auto inline-block"
v-html="'Section: '+t.valutation.section"></div>
<div v-if="t.drag"
class="rounded-none bg-gray-800 text-white text-sm px-2 w-auto inline-block"
v-html="'Circle '+t.valutation.circle"></div>
<div v-if="t.drag" class="rounded-none bg-gray-800 text-white text-sm"
v-html="'Center Distance '+t.valutation.distance"></div>
<div v-if="t.drag"
class="rounded-none bg-gray-800 text-white text-sm px-2 w-auto inline-block"
v-html="'Position X '+t.position.x"></div>
<div v-if="t.drag"
class="rounded-none bg-gray-800 text-white text-sm px-2 w-auto inline-block"
v-html="'Position Y '+t.position.y "></div>
<div v-if="t.drag && t.percentagePosition"
class="rounded-none bg-gray-800 text-white text-sm px-2 w-auto inline-block"
v-html="'% position X '+t.percentagePosition.x"></div>
<div v-if="t.drag && t.percentagePosition"
class="rounded-none bg-gray-800 text-white text-sm px-2 w-auto inline-block"
v-html="'% position Y '+t.percentagePosition.y"
></div>
<div v-if="t.drag && t.valutation.sorting"
class="rounded-none bg-gray-800 text-white text-sm px-2 w-auto inline-block"
v-html="'Sorting '+t.valutation.sorting"
></div>
</div>
</div>
</div>
</div>
<div :class="'sorting-container'+currentsorting" :id="'sortingc'+currentsorting">
<new-token ref="newtokenmodal" class="remove-from-screenshot">
</new-token>
<div class="w-auto h-auto flex">
<h2 style="right:5%;touch-action: none;top:15%"
class="w-1/6 absolute remove-from-screenshot font-bold uppercase bg-gray-800 text-white p-4 text-center">
{{ trans('Your Created Tokens')}}
<h2 style="right:5%;top:15%"
class="sm:text-xs md:text-xs lg:text-base md:mt-5 absolute remove-from-screenshot font-bold uppercase bg-gray-800 text-white p-4 text-center ">
{{ trans('Persons')}}
</h2>
<div class="token-container-created z-20 h-auto flex has-to-move absolute bg-blue-200"
<div class="sm:text-xs md:text-xs lg:text-base md:mt-8 token-container-created z-20 h-auto flex has-to-move absolute bg-blue-200"
style="top:20%;right:5%;flex-wrap: wrap;width:16.6666666667%">
<div class="sortingstart inline-block createdtokens" :class="'token'+currentsorting"
......@@ -95,27 +35,31 @@
<span v-if="t.drag" class="tag is-dark token-label" :id="'tokenlabel'+t.id"
v-html="t.name"></span><br>
<div style="width:200px;top:38px;" class="debugDiv rounded-none block relative"
v-show="debug">
<div v-if="t.drag" class="rounded-none bg-gray-800 text-white text-sm block"
<div v-if="t.drag"
class="rounded-none bg-gray-800 text-white text-sm px-2 w-auto inline-block"
v-html="'Section: '+t.valutation.section"></div>
<div v-if="t.drag" class="rounded-none bg-gray-800 text-white text-sm inline-block"
v-html="'Circle '+t.valutation.circle"></div>
<div v-if="t.drag" class="rounded-none bg-gray-800 text-white text-sm block"
<div v-if="t.drag" class="rounded-none bg-gray-800 text-white text-sm inline-block"
v-html="'Center Distance '+t.valutation.distance"></div>
<div v-if="t.drag" class="rounded-none bg-gray-800 text-white text-sm block"
<div v-if="t.drag" class="rounded-none bg-gray-800 text-white text-sm inline-block"
v-html="'Position X '+t.position.x"></div>
<div v-if="t.drag" class="rounded-none bg-gray-800 text-white text-sm block"
<div v-if="t.drag" class="rounded-none bg-gray-800 text-white text-sm inline-block"
v-html="'Position Y '+t.position.y "></div>
<div v-if="t.drag && t.percentagePosition"
class="rounded-none bg-gray-800 text-white text-sm block"
class="rounded-none bg-gray-800 text-white text-sm inline-block"
v-html="'% position X '+t.percentagePosition.x"></div>
<div v-if="t.drag && t.percentagePosition"
class="rounded-none bg-gray-800 text-white text-sm block"
class="rounded-none bg-gray-800 text-white text-sm inline-block"
v-html="'% position Y '+t.percentagePosition.y"
></div>
<div v-if="t.drag && t.valutation.sorting"
class="rounded-none bg-gray-800 text-white text-sm px-2 w-auto block"
class="rounded-none bg-gray-800 text-white text-sm px-2 w-auto inline-block"
v-html="'Sorting '+t.valutation.sorting"
></div>
</div>
......
This diff is collapsed.
......@@ -68,7 +68,8 @@
</div>
<div class="flex items-center flex-shrink-1 text-white text-center">
<a class="text-center bg-green-500 hover:text-gray-300 hover:bg-green-800 p-2 ml-2" @click="interviewaddtoken">
<strong>{{ __('Add Token') }}</strong>
<strong v-if="sortingType == 1">{{ __('Add Token') }}</strong>
<strong v-if="sortingType == 2">{{ __('Add Person') }}</strong>
</a>
</div>
</span>
......
const mix = require('laravel-mix');
require('laravel-mix-purgecss');
const tailwindcss = require('tailwindcss');
const mix = require(
'laravel-mix');
require(
'laravel-mix-purgecss');
const tailwindcss = require(
'tailwindcss');
require('laravel-mix-polyfill');
require(
'laravel-mix-polyfill');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
......@@ -14,33 +18,55 @@ require('laravel-mix-polyfill');
|
*/
mix.js(
'resources/js/app.js',
'public/js',
).
extract(
[
'vue',
'axios',
'bootstrap',
'jquery',
'lodash',
'buefy',
'popper.js',
]).
polyfill(
{
enabled: true,
useBuiltIns: false,
targets: {'safari': '12.1'},
}).
sass(
'resources/sass/app.scss',
'public/css',
{
implementation: require(
'node-sass'),
},
).
version().
options(
{
processCssUrls: false,
postCss: [
tailwindcss(
'tailwind.config.js')],
resolve: {
alias: {
'jquery-ui': 'jquery-ui-dist/jquery-ui.js',
},
},
});
mix.js('resources/js/app.js', 'public/js').extract([
'vue',
'axios',
'bootstrap',
'jquery',
'lodash',
'buefy',
'popper.js'
]).polyfill({
enabled: true,
useBuiltIns: false,
targets: {"safari": "12.1"}
}).sass('resources/sass/app.scss', 'public/css', {implementation: require('node-sass')})
.version()
.options({
processCssUrls: false,
postCss: [tailwindcss('tailwind.config.js')],
resolve: {
alias: {
'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
}
}
});
mix.sass('resources/sass/app_dompdf.scss', 'public/css', {implementation: require('node-sass')}).version();
mix.sass(
'resources/sass/app_dompdf.scss',
'public/css',
{
implementation: require(
'node-sass'),
},
).
version();
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment