mirror of
https://github.com/bunkerity/bunkerweb
synced 2026-05-24 09:28:37 +00:00
add disabled style + fix nomatch layout
This commit is contained in:
Jordan Blasenhauer
parent
18a629dd58
commit
e0112c679b
38 changed files with 52 additions and 71 deletions
|
|
@ -505,6 +505,7 @@ body {
|
|||
@apply relative min-w-[300px] sm:min-w-[450px] max-w-screen-xl max-h-[80vh] transition dark:brightness-110 shadow-md bg-white dark:bg-slate-850 dark:shadow-dark-xl rounded-2xl bg-clip-border transform duration-300 ease-in-out px-6 py-4 overflow-hidden break-words grid grid-cols-12;
|
||||
}
|
||||
|
||||
|
||||
.layout-modal-button-container {
|
||||
@apply absolute right-4 top-4 z-[30];
|
||||
}
|
||||
|
|
@ -1066,25 +1067,24 @@ body {
|
|||
/* CONTENT COMPONENT */
|
||||
|
||||
.text-content {
|
||||
@apply col-span-12 mb-0 break-word;
|
||||
@apply col-span-12 mb-0 dark:text-gray-300 break-word;
|
||||
}
|
||||
|
||||
.text-modal {
|
||||
@apply col-span-12 mb-2 text-center break-word;
|
||||
@apply col-span-12 mb-2 text-center dark:text-gray-300 break-word;
|
||||
}
|
||||
|
||||
.text-card {
|
||||
@apply col-span-12 text-lg mb-0 break-word;
|
||||
@apply col-span-12 text-lg mb-0 dark:text-gray-300 break-word;
|
||||
}
|
||||
|
||||
.text-unmatch {
|
||||
@apply col-span-12 text-lg mb-0 font-bold break-word;
|
||||
@apply col-span-12 text-lg mb-0 font-bold dark:text-gray-300 break-word;
|
||||
}
|
||||
|
||||
|
||||
.text-table {
|
||||
@apply col-span-12 mb-0 break-word;
|
||||
|
||||
@apply col-span-12 mb-0 dark:text-gray-300 break-word;
|
||||
}
|
||||
|
||||
.text-form-error {
|
||||
|
|
@ -1092,11 +1092,11 @@ body {
|
|||
}
|
||||
|
||||
.text-stat {
|
||||
@apply col-span-12 my-1 font-bold dark:text-white/90 text-black uppercase break-word;
|
||||
@apply col-span-12 my-1 font-bold dark:text-gray-300 text-black uppercase break-word;
|
||||
}
|
||||
|
||||
.text-list-details {
|
||||
@apply w-full col-span-12 mb-0 break-word;
|
||||
@apply w-full col-span-12 mb-0 dark:text-gray-300 break-word;
|
||||
}
|
||||
|
||||
/* BTN GROUP */
|
||||
|
|
@ -1253,7 +1253,6 @@ body {
|
|||
@apply col-span-12 w-full;
|
||||
}
|
||||
|
||||
|
||||
.form-easy-container {
|
||||
@apply col-span-12 w-full;
|
||||
}
|
||||
|
|
@ -1310,7 +1309,7 @@ body {
|
|||
/* BTN */
|
||||
|
||||
.btn {
|
||||
@apply flex justify-center items-center tracking-wide dark:brightness-90 inline-block font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal ease-in shadow-xs hover:-translate-y-px active:opacity-85 hover:shadow-md disabled:cursor-not-allowed dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400/0 dark:disabled:bg-gray-700 dark:disabled:border-gray-700/0 disabled:hover:translate-y-0 disabled:hover:bg-gray-400 disabled:hover:border-gray-400/0 dark:disabled:hover:translate-y-0 dark:disabled:hover:bg-gray-700 dark:disabled:hover:border-gray-700/0;
|
||||
@apply flex justify-center items-end leading-none tracking-wide dark:brightness-90 inline-block font-bold text-center text-white uppercase align-middle transition-all rounded-lg cursor-pointer leading-normal ease-in shadow-xs hover:-translate-y-px active:opacity-85 hover:shadow-md disabled:cursor-not-allowed dark:disabled:text-gray-300 disabled:text-gray-700 disabled:bg-gray-400 disabled:border-gray-400/0 dark:disabled:bg-gray-700 dark:disabled:border-gray-700/0 disabled:hover:translate-y-0 disabled:hover:bg-gray-400 disabled:hover:border-gray-400/0 dark:disabled:hover:translate-y-0 dark:disabled:hover:bg-gray-700 dark:disabled:hover:border-gray-700/0;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1705,7 +1704,6 @@ body {
|
|||
/* TEXT COLOR MODIFIER */
|
||||
|
||||
.text-el {
|
||||
@apply text-current;
|
||||
}
|
||||
|
||||
.success.text-el{
|
||||
|
|
@ -1855,8 +1853,6 @@ body {
|
|||
/* BACKGROUND COLOR MODIFIER */
|
||||
|
||||
.bg-el {
|
||||
@apply bg-current;
|
||||
|
||||
}
|
||||
|
||||
.success.bg-el {
|
||||
|
|
@ -2006,7 +2002,10 @@ body {
|
|||
/* SVG COLOR MODIFIER */
|
||||
|
||||
.fill {
|
||||
@apply fill-current;
|
||||
}
|
||||
|
||||
.fill[aria-disabled="true"] {
|
||||
@apply !fill-gray-700 dark:!fill-gray-300;
|
||||
}
|
||||
|
||||
.success.fill {
|
||||
|
|
@ -2046,7 +2045,7 @@ body {
|
|||
}
|
||||
|
||||
.blue.fill {
|
||||
@apply fill-blue-500;
|
||||
@apply fill-blue-500 dark:fill-blue-400;
|
||||
}
|
||||
|
||||
.yellow.fill {
|
||||
|
|
@ -2129,7 +2128,7 @@ body {
|
|||
@apply fill-blue-600;
|
||||
}
|
||||
|
||||
.yellow-darker.fill-default {
|
||||
.yellow-darker.fill {
|
||||
@apply fill-yellow-600;
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -147,7 +147,7 @@ const buttonSave = {
|
|||
<Title type="card" :title="'dashboard_raw_mode'" />
|
||||
<Subtitle type="card" :subtitle="'dashboard_raw_mode_subtitle'" />
|
||||
|
||||
<Container class="form-raw-editor-container">
|
||||
<Container class="form-raw-editor-container layout-settings">
|
||||
<Editor @inp="(v) => (data.inp = v)" v-bind="editorData" />
|
||||
</Container>
|
||||
<Button :disabled="data.isValid ? false : true" v-bind="buttonSave" />
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const icon = reactive({
|
|||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="box"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const icon = reactive({
|
|||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="carton"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ onMounted(() => {
|
|||
<span :id="icon.id" class="sr-only">{{ $t("icons_check_desc") }}</span>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="check"
|
||||
role="img"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ onMounted(() => {
|
|||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="cross"
|
||||
role="img"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ onMounted(() => {
|
|||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="core"
|
||||
role="img"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ onMounted(() => {
|
|||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="cross"
|
||||
role="img"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ onMounted(() => {
|
|||
<span :id="icon.id" class="sr-only">{{ $t("icons_crown_desc") }}</span>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="crown"
|
||||
role="img"
|
||||
:aria-labelledby="icon.id"
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ onMounted(() => {
|
|||
<span :id="icon.id" class="sr-only">{{ $t("icons_discord_desc") }}</span>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="discord"
|
||||
role="img"
|
||||
fill="none"
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const icon = reactive({
|
|||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="disk"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const icon = reactive({
|
|||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="disks"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const icon = reactive({
|
|||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="box"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ onMounted(() => {
|
|||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="external"
|
||||
role="img"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ const icon = reactive({
|
|||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="flag"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const icon = reactive({
|
|||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="flag"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const icon = reactive({
|
|||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="gear"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ onMounted(() => {
|
|||
<span :id="icon.id" class="sr-only">{{ $t("icons_github_desc") }}</span>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="github"
|
||||
role="img"
|
||||
fill="none"
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const icon = reactive({
|
|||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="globe"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const icon = reactive({
|
|||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="house"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const icon = reactive({
|
|||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="info"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const icon = reactive({
|
|||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="key"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ onMounted(() => {
|
|||
<span :id="icon.id" class="sr-only">{{ $t("icons_linkedin_desc") }}</span>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="key"
|
||||
role="img"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const icon = reactive({
|
|||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="list"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
role="img"
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ const icon = reactive({
|
|||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="lock"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ onMounted(() => {
|
|||
<span :id="icon.id" class="sr-only">{{ $t("icons_plus_desc") }}</span>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="plus"
|
||||
role="img"
|
||||
:aria-labelledby="icon.id"
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const icon = reactive({
|
|||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="puzzle"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
role="img"
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const icon = reactive({
|
|||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="redirect"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const icon = reactive({
|
|||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="search"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const icon = reactive({
|
|||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="settings"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const icon = reactive({
|
|||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="task"
|
||||
:class="[props.iconClass, icon.color, 'fill']"
|
||||
role="img"
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ const icon = reactive({
|
|||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="trash"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ onMounted(() => {
|
|||
<span :id="icon.id" class="sr-only">{{ $t("icons_trespass_desc") }}</span>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="trespass"
|
||||
role="img"
|
||||
:aria-labelledby="icon.id"
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ onMounted(() => {
|
|||
<span :id="icon.id" class="sr-only">{{ $t("icons_twitter_desc") }}</span>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="twitter"
|
||||
role="img"
|
||||
:aria-labelledby="icon.id"
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const icon = reactive({
|
|||
<template>
|
||||
<svg
|
||||
:data-color="icon.color"
|
||||
:disabled="props.disabled"
|
||||
:aria-disabled="props.disabled ? 'true' : 'false'"
|
||||
data-svg="wire"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import PopoverGroup from "@components/Widget/PopoverGroup.vue";
|
|||
import Text from "@components/Widget/Text.vue";
|
||||
import Filter from "@components/Widget/Filter.vue";
|
||||
import Grid from "@components/Widget/Grid.vue";
|
||||
|
||||
import MessageUnmatch from "@components/Message/Unmatch.vue";
|
||||
/**
|
||||
@name List/Details.vue
|
||||
@description This component is a list of items separate on two columns : one for the title, and other for a list of popovers related to the plugin (type, link...)
|
||||
|
|
@ -58,14 +58,6 @@ const data = reactive({
|
|||
const gridClass = computed(() => {
|
||||
return `col-span-${props.columns.mobile} md:col-span-${props.columns.tablet} lg:col-span-${props.columns.pc}`;
|
||||
});
|
||||
|
||||
const unmatch = {
|
||||
text: "dashboard_no_match",
|
||||
textClass: "text-unmatch",
|
||||
icon: {
|
||||
iconName: "search",
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -76,9 +68,7 @@ const unmatch = {
|
|||
:data="data.base"
|
||||
:filters="props.filters"
|
||||
/>
|
||||
<div data-is="unmatch" v-if="!data.format.length" class="layout-unmatch">
|
||||
<Text v-bind="unmatch" />
|
||||
</div>
|
||||
<MessageUnmatch v-if="!data.format.length" />
|
||||
<ul
|
||||
data-is="list-details"
|
||||
v-if="data.format.length"
|
||||
|
|
|
|||
|
|
@ -141,14 +141,6 @@ const table = reactive({
|
|||
itemsFormat: JSON.parse(JSON.stringify(props.items)),
|
||||
});
|
||||
|
||||
const unmatch = {
|
||||
text: "dashboard_no_match",
|
||||
icons: {
|
||||
iconName: "search",
|
||||
color: "info",
|
||||
},
|
||||
};
|
||||
|
||||
function setUnmatchWidth() {
|
||||
try {
|
||||
const value = tableBody.value.closest("[data-is='card']").clientWidth - 60;
|
||||
|
|
|
|||
Loading…
Reference in a new issue