kodev-org
/
vikunja
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip: move to bulma 1.0

This commit is contained in:
Dominik Pschenitschni 2024-11-01 17:13:36 +01:00
parent de1eac5d36
commit b7665b95cd
25 changed files with 165 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/package.json
View File

@ -98,7 +98,7 @@
"@vueuse/router": "11.2.0", "@vueuse/router": "11.2.0",
"axios": "1.7.7", "axios": "1.7.7",
"blurhash": "2.0.5", "blurhash": "2.0.5",
"bulma-css-variables": "0.9.33", "bulma": "^1.0.2",
"change-case": "5.4.4", "change-case": "5.4.4",
"date-fns": "4.1.0", "date-fns": "4.1.0",
"dayjs": "1.11.13", "dayjs": "1.11.13",

23
frontend/pnpm-lock.yaml
View File

@ -160,9 +160,9 @@ importers:
blurhash: blurhash:
specifier: 2.0.5 specifier: 2.0.5
version: 2.0.5 version: 2.0.5
bulma-css-variables: bulma:
specifier: 0.9.33 specifier: ^1.0.2
version: 0.9.33 version: 1.0.2
change-case: change-case:
specifier: 5.4.4 specifier: 5.4.4
version: 5.4.4 version: 5.4.4
@ -2975,9 +2975,8 @@ packages:
resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==} resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
engines: {node: '>=6'} engines: {node: '>=6'}
bulma-css-variables@0.9.33: bulma@1.0.2:
resolution: {integrity: sha512-D85dXLyLOBBDCuSSOeASc0kN2IknJqo5hzkZ22hxDHobxko/qay0nD+zNl2CJtF8v/7iwvQXqzVSDRnFVRSg9A==} resolution: {integrity: sha512-D7GnDuF6seb6HkcnRMM9E739QpEY9chDzzeFrHMyEns/EXyDJuQ0XA0KxbBl/B2NTsKSoDomW61jFGFaAxhK5A==}
deprecated: bulma-css-variables is deprecated. Project has been shifted to monorepo @bulvar/bulma
cac@6.7.14: cac@6.7.14:
resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==} resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
@ -3565,10 +3564,6 @@ packages:
engines: {node: '>=18'} engines: {node: '>=18'}
hasBin: true hasBin: true
escalade@3.1.2:
resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==}
engines: {node: '>=6'}
escalade@3.2.0: escalade@3.2.0:
resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==} resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
engines: {node: '>=6'} engines: {node: '>=6'}
@ -6794,7 +6789,7 @@ snapshots:
'@babel/parser@7.25.4': '@babel/parser@7.25.4':
dependencies: dependencies:
'@babel/types': 7.25.4 '@babel/types': 7.26.0
'@babel/parser@7.26.1': '@babel/parser@7.26.1':
dependencies: dependencies:
@ -9361,7 +9356,7 @@ snapshots:
builtin-modules@3.3.0: {} builtin-modules@3.3.0: {}
bulma-css-variables@0.9.33: {} bulma@1.0.2: {}
cac@6.7.14: {} cac@6.7.14: {}
@ -10073,8 +10068,6 @@ snapshots:
'@esbuild/win32-ia32': 0.24.0 '@esbuild/win32-ia32': 0.24.0
'@esbuild/win32-x64': 0.24.0 '@esbuild/win32-x64': 0.24.0
escalade@3.1.2: {}
escalade@3.2.0: {} escalade@3.2.0: {}
escape-goat@2.1.1: {} escape-goat@2.1.1: {}
@ -13363,7 +13356,7 @@ snapshots:
yargs@17.7.2: yargs@17.7.2:
dependencies: dependencies:
cliui: 8.0.1 cliui: 8.0.1
escalade: 3.1.2 escalade: 3.2.0
get-caller-file: 2.0.5 get-caller-file: 2.0.5
require-directory: 2.1.1 require-directory: 2.1.1
string-width: 4.2.3 string-width: 4.2.3

2
frontend/src/components/base/BaseCheckbox.vue
View File

@ -8,7 +8,7 @@
> >
<input <input
type="checkbox" type="checkbox"
class="is-sr-only" class="tw-sr-only"
:checked="modelValue" :checked="modelValue"
:disabled="disabled || undefined" :disabled="disabled || undefined"
@change="(event) => emit('update:modelValue', (event.target as HTMLInputElement).checked)" @change="(event) => emit('update:modelValue', (event.target as HTMLInputElement).checked)"

5
frontend/src/components/base/Expandable.vue
View File

@ -51,10 +51,7 @@ const props = withDefaults(defineProps<{
const wrapper = ref<HTMLElement | null>(null) const wrapper = ref<HTMLElement | null>(null)
const computedBackgroundColor = computed(() => { const computedBackgroundColor = computed(() => {
if (wrapper.value === null) { return props.backgroundColor || wrapper.value === null ? '#fff' : getInheritedBackgroundColor(wrapper.value)
return props.backgroundColor || '#fff'
}
return props.backgroundColor || getInheritedBackgroundColor(wrapper.value)
}) })
/** /**

4
frontend/src/components/date/DatepickerWithRange.vue
View File

@ -221,6 +221,8 @@ const buttonText = computed<string>(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "bulma/sass/utilities/css-variables.scss" as cv;
.datepicker-with-range-container { .datepicker-with-range-container {
position: relative; position: relative;
} }
@ -231,7 +233,7 @@ const buttonText = computed<string>(() => {
border-radius: $radius; border-radius: $radius;
border: 1px solid var(--grey-200); border: 1px solid var(--grey-200);
background-color: var(--white); background-color: var(--white);
box-shadow: $shadow; box-shadow: cv.getVar("shadow");
&.is-open { &.is-open {
width: 500px; width: 500px;

4
frontend/src/components/date/DatepickerWithValues.vue
View File

@ -168,6 +168,8 @@ const customRangeActive = computed<boolean>(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "bulma/sass/utilities/css-variables.scss" as cv;
.datepicker-with-range-container { .datepicker-with-range-container {
position: relative; position: relative;
} }
@ -178,7 +180,7 @@ const customRangeActive = computed<boolean>(() => {
border-radius: $radius; border-radius: $radius;
border: 1px solid var(--grey-200); border: 1px solid var(--grey-200);
background-color: var(--white); background-color: var(--white);
box-shadow: $shadow; box-shadow: cv.getVar("shadow");
&.is-open { &.is-open {
width: 500px; width: 500px;

4
frontend/src/components/input/ColorPicker.vue
View File

@ -130,6 +130,8 @@ function reset() {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "bulma/sass/utilities/css-variables.scss" as cv;
.color-picker-container { .color-picker-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -156,7 +158,7 @@ function reset() {
overflow: hidden; overflow: hidden;
border-radius: 100%; border-radius: 100%;
border: $BORDER_WIDTH solid var(--grey-300); border: $BORDER_WIDTH solid var(--grey-300);
box-shadow: $shadow; box-shadow: cv.getVar("shadow");
& > * { & > * {
grid-row: 1; grid-row: 1;

4
frontend/src/components/input/Datepicker.vue
View File

@ -120,6 +120,8 @@ function close() {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use "bulma/sass/utilities/css-variables.scss" as cv;
.datepicker { .datepicker {
input.input { input.input {
display: none; display: none;
@ -132,7 +134,7 @@ function close() {
width: 320px; width: 320px;
background: var(--white); background: var(--white);
border-radius: $radius; border-radius: $radius;
box-shadow: $shadow; box-shadow: cv.getVar("shadow");
@media screen and (max-width: ($tablet)) { @media screen and (max-width: ($tablet)) {
width: calc(100vw - 5rem); width: calc(100vw - 5rem);

4
frontend/src/components/misc/ProgressBar.vue
View File

@ -24,6 +24,8 @@ withDefaults(defineProps<{
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@use 'sass:list';
.progress-bar { .progress-bar {
--progress-height: #{$size-normal}; --progress-height: #{$size-normal};
--progress-bar-background-color: var(--border-light, #{$border-light}); --progress-bar-background-color: var(--border-light, #{$border-light});
@ -73,7 +75,7 @@ withDefaults(defineProps<{
// Colors // Colors
@each $name, $pair in $colors { @each $name, $pair in $colors {
$color: nth($pair, 1); $color: list.nth($pair, 1);
&.is-#{$name} { &.is-#{$name} {
--progress-value-background-color: var(--#{$name}, #{$color}); --progress-value-background-color: var(--#{$name}, #{$color});

21
frontend/src/styles/common-imports.scss
View File

@ -1,3 +1,4 @@
@use "sass:math";
// //
// IMPORTANT NOTE: // IMPORTANT NOTE:
// //
@ -10,10 +11,17 @@
// are defined here. // are defined here.
// //
$family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
// the default values get overwritten by the definitions above // utilities
@import "bulma-css-variables/sass/utilities/_all"; @forward "bulma/sass/utilities/initial-variables.scss" with (
$family-sans-serif: "'Open Sans', Helvetica, Arial, sans-serif"
);
@forward "bulma/sass/utilities/functions";
@forward "bulma/sass/utilities/derived-variables";
@forward "bulma/sass/utilities/controls";
@use "bulma/sass/utilities/initial-variables.scss" as *;
// since $tablet is defined by bulma we can just define it after importing the utilities // since $tablet is defined by bulma we can just define it after importing the utilities
$mobile: math.div($tablet, 2); $mobile: math.div($tablet, 2);
@ -39,3 +47,10 @@ $vikunja-nav-color: var(--grey-700);
$vikunja-nav-selected-width: 0.4rem; $vikunja-nav-selected-width: 0.4rem;
$close-button-min-space: 84px; $close-button-min-space: 84px;
// re-added from bulma-css-variables
$item-padding: 0.375rem 1rem;
// 1152px container + 4rem
$widescreen: 1152px + (2 * $gap);
$border-light: $grey-lightest;

8
frontend/src/styles/components/_index.scss
View File

@ -1,4 +1,4 @@
@import "tooltip"; @forward "tooltip";
@import "labels"; @forward "labels";
@import "task"; @forward "task";
@import "tasks"; @forward "tasks";

2
frontend/src/styles/components/tasks.scss
View File

@ -1,3 +1,5 @@
@use "@/styles/common-imports" as *;
// FIXME: These classes are used all over. // FIXME: These classes are used all over.
// very hard to untangle // very hard to untangle
// they have many overwrites at different positions // they have many overwrites at different positions

4
frontend/src/styles/custom-properties/_index.scss
View File

@ -1,2 +1,2 @@
@import "colors"; @forward "colors";
@import "shadows"; @forward "shadows";

146
frontend/src/styles/global.scss
View File

@ -1,11 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "fonts";
@import "transitions";
// ################### // ###################
// START BULMA IMPORTS // START BULMA IMPORTS
// ################### // ###################
@ -14,79 +6,93 @@
// with the expeption of the bulma utilities – They are // with the expeption of the bulma utilities – They are
// imported globally in common-imports.scss // imported globally in common-imports.scss
// imports from "bulma-css-variables/sass/base/_all"; // themes
@import "bulma-css-variables/sass/base/minireset"; @forward "bulma/sass/themes";
@import "bulma-css-variables/sass/base/generic";
@import "bulma-css-variables/sass/base/animations"; // base
@forward "bulma/sass/base/minireset";
@forward "bulma/sass/base/generic";
@forward "bulma/sass/base/animations";
// imports from "bulma-css-variables/sass/elements/_all"; // elements
@import "bulma-css-variables/sass/elements/box"; @forward "bulma/sass/elements/block";
@import "bulma-css-variables/sass/elements/button"; @forward "bulma/sass/elements/box";
@import "bulma-css-variables/sass/elements/container"; @forward "bulma/sass/elements/button";
@import "bulma-css-variables/sass/elements/content"; @forward "bulma/sass/elements/content";
@import "bulma-css-variables/sass/elements/icon"; @forward "bulma/sass/elements/delete";
@import "bulma-css-variables/sass/elements/image"; @forward "bulma/sass/elements/icon";
//@import "bulma-css-variables/sass/elements/notification"; // not used @forward "bulma/sass/elements/image";
// @import "bulma-css-variables/sass/elements/progress"; // not used @forward "bulma/sass/elements/loader";
@import "bulma-css-variables/sass/elements/table"; // @forward "bulma/sass/elements/notification"; // not used
@import "bulma-css-variables/sass/elements/tag"; // @forward "bulma/sass/elements/progress"; // not used
@import "bulma-css-variables/sass/elements/title"; @forward "bulma/sass/elements/table";
@forward "bulma/sass/elements/tag";
@forward "bulma/sass/elements/title";
@import "bulma-css-variables/sass/elements/other"; // form
@forward "bulma/sass/form/shared";
@forward "bulma/sass/form/input-textarea";
@forward "bulma/sass/form/checkbox-radio";
@forward "bulma/sass/form/select";
@forward "bulma/sass/form/file";
@forward "bulma/sass/form/tools";
// components
// @forward "bulma/sass/components/breadcrumb"; // not used
@forward "bulma/sass/components/card";
// @forward "bulma/sass/components/dropdown"; // not used
@forward "bulma/sass/components/menu";
// @forward "bulma/sass/components/message"; // not used
@forward "bulma/sass/components/modal";
@forward "bulma/sass/components/navbar";
@forward "bulma/sass/components/pagination";
// @forward "bulma/sass/components/panel"; // not used
// @forward "bulma/sass/components/tabs"; // not used
// imports from "bulma-css-variables/sass/form/_all"; // grid
@import "bulma-css-variables/sass/form/shared"; @forward "bulma/sass/grid/columns";
@import "bulma-css-variables/sass/form/input-textarea"; // @forward "bulma/sass/grid/grid"; // probably not used, because new
@import "bulma-css-variables/sass/form/checkbox-radio";
@import "bulma-css-variables/sass/form/select";
@import "bulma-css-variables/sass/form/file";
@import "bulma-css-variables/sass/form/tools";
// layout
@forward "bulma/sass/layout/container";
// @forward "bulma/sass/layout/footer"; // not used
// @forward "bulma/sass/layout/hero"; // not used
// @forward "bulma/sass/layout/level"; // not used
@forward "bulma/sass/layout/media";
// @forward "bulma/sass/layout/section"; // not used
// imports from "bulma-css-variables/sass/components/_all"; // base/skeleton
// @import "bulma-css-variables/sass/components/breadcrumb"; // not used @forward "bulma/sass/base/skeleton";
@import "bulma-css-variables/sass/components/card";
// @import "bulma-css-variables/sass/components/dropdown"; // moved to component
// @import "bulma-css-variables/sass/components/level"; // not used
@import "bulma-css-variables/sass/components/media";
@import "bulma-css-variables/sass/components/menu";
//@import "bulma-css-variables/sass/components/message"; // not used
@import "bulma-css-variables/sass/components/modal";
@import "bulma-css-variables/sass/components/navbar";
@import "bulma-css-variables/sass/components/pagination";
// @import "bulma-css-variables/sass/components/panel"; // not used
// @import "bulma-css-variables/sass/components/tabs"; // not used
// helpers
// imports from "bulma-css-variables/sass/grid/_all"; // @forward "bulma/sass/helpers/aspect-ratio"; // probably not used, because new
@import "bulma-css-variables/sass/grid/columns"; // @forward "bulma/sass/helpers/border"; // probably not used, because new
// @import "bulma-css-variables/sass/grid/tiles"; // not used @forward "bulma/sass/helpers/color";
@forward "bulma/sass/helpers/flexbox";
@forward "bulma/sass/helpers/float";
// imports from "bulma-css-variables/sass/helpers/_all"; // @forward "bulma/sass/helpers/gap"; // probably not used, because new
@import "bulma-css-variables/sass/helpers/color"; // @forward "bulma/sass/helpers/overflow"; // not used
@import "bulma-css-variables/sass/helpers/flexbox"; // @forward "bulma/sass/helpers/position"; // not used
@import "bulma-css-variables/sass/helpers/float"; @forward "bulma/sass/helpers/spacing";
// @import "bulma-css-variables/sass/helpers/other"; // not used @forward "bulma/sass/helpers/typography";
// @import "bulma-css-variables/sass/helpers/overflow"; @forward "bulma/sass/helpers/visibility";
// @import "bulma-css-variables/sass/helpers/position"; // @forward "bulma/sass/helpers/other"; // not used
@import "bulma-css-variables/sass/helpers/spacing";
@import "bulma-css-variables/sass/helpers/typography";
@import "bulma-css-variables/sass/helpers/visibility";
// imports from "bulma-css-variables/sass/layout/_all";
// @import "bulma-css-variables/sass/layout/hero"; // not used
// @import "bulma-css-variables/sass/layout/section"; // not used
// @import "bulma-css-variables/sass/layout/footer"; // not used
// ################# // #################
// END BULMA IMPORTS // END BULMA IMPORTS
// ################# // #################
@import "theme";
@import "components";
@import "custom-properties"; @use "fonts";
@use "transitions";
@use "theme";
@use "components";
@use "custom-properties";
@tailwind base;
@tailwind components;
@tailwind utilities;

20
frontend/src/styles/theme/_index.scss
View File

@ -1,12 +1,12 @@
@import "scrollbars"; @forward "scrollbars";
@import "theme"; @forward "theme";
@import "background"; @forward "background";
@import "content"; @forward "content";
@import "form"; @forward "form";
@import "link-share"; @forward "link-share";
@import "loading"; @forward "loading";
@import "flatpickr"; @forward "flatpickr";
@import 'helpers'; @forward 'helpers';
@import 'navigation'; @forward 'navigation';

2
frontend/src/styles/theme/background.scss
View File

@ -1,3 +1,5 @@
@use "@/styles/common-imports" as *;
.app-container.has-background, .app-container.has-background,
.link-share-container.has-background { .link-share-container.has-background {
position: relative; position: relative;

2
frontend/src/styles/theme/content.scss
View File

@ -1,3 +1,5 @@
@use "@/styles/common-imports" as *;
.content h3 { .content h3 {
.icon, .icon,
.is-small { .is-small {

11
frontend/src/styles/theme/form.scss
View File

@ -1,3 +1,6 @@
@use 'sass:list';
@use "@/styles/common-imports" as *;
.field.has-addons .button { .field.has-addons .button {
height: 2.5rem; height: 2.5rem;
margin-left: 0 !important; margin-left: 0 !important;
@ -20,8 +23,8 @@
} }
@each $name, $pair in $colors { @each $name, $pair in $colors {
$color: nth($pair, 1); $color: list.nth($pair, 1);
$color-invert: nth($pair, 2); $color-invert: list.nth($pair, 2);
&.is-#{$name} { &.is-#{$name} {
&.is-active, &.is-active,
@ -85,8 +88,8 @@
padding: .3rem; padding: .3rem;
&:focus { &:focus {
background: $input-background-color; background: $scheme-main;
border-color: $input-focus-border-color; border-color: $link;
} }
&.disabled { &.disabled {

2
frontend/src/styles/theme/link-share.scss
View File

@ -1,3 +1,5 @@
@use "@/styles/common-imports" as *;
.field.has-addons.no-input-mobile { .field.has-addons.no-input-mobile {
.control:first-child { .control:first-child {
width: 100%; width: 100%;

2
frontend/src/styles/theme/loading.scss
View File

@ -1,3 +1,5 @@
@use "bulma/sass/utilities/mixins.scss" as *;
// FIXME: move to Loading.vue // FIXME: move to Loading.vue
.loader-container.is-loading { .loader-container.is-loading {
position: relative; position: relative;

2
frontend/src/styles/theme/navigation.scss
View File

@ -1,3 +1,5 @@
@use "@/styles/common-imports" as *;
// these are general menu styles // these are general menu styles
// should be in own components // should be in own components
.menu { .menu {

2
frontend/src/styles/theme/scrollbars.scss
View File

@ -1,3 +1,5 @@
@use "@/styles/common-imports" as *;
$scrollbar-height: 8px; $scrollbar-height: 8px;
$scrollbar-track-color: var(--grey-200); $scrollbar-track-color: var(--grey-200);
$scrollbar-thumb-color: var(--grey-300); $scrollbar-thumb-color: var(--grey-300);

2
frontend/src/styles/theme/theme.scss
View File

@ -1,3 +1,5 @@
@use "@/styles/common-imports" as *;
*, *,
*:hover, *:hover,
*:active, *:active,

2
frontend/src/styles/transitions.scss
View File

@ -1,3 +1,5 @@
@use "@/styles/common-imports" as *;
.fade-enter-active, .fade-enter-active,
.fade-leave-active { .fade-leave-active {
transition: opacity $transition-duration; transition: opacity $transition-duration;

5
frontend/vite.config.ts
View File

@ -22,7 +22,7 @@ const pathSrc = fileURLToPath(new URL('./src', import.meta.url)).replaceAll('\\'
// the @use rules have to be the first in the compiled stylesheets // the @use rules have to be the first in the compiled stylesheets
const PREFIXED_SCSS_STYLES = `@use "sass:math"; const PREFIXED_SCSS_STYLES = `@use "sass:math";
@import "${pathSrc}/styles/common-imports.scss";` @use "${pathSrc}/styles/common-imports.scss" as *;`
const isModernBuild = Boolean(process.env.BUILD_MODERN_ONLY) const isModernBuild = Boolean(process.env.BUILD_MODERN_ONLY)
const legacy = isModernBuild const legacy = isModernBuild
@ -93,6 +93,9 @@ export default defineConfig(({mode}) => {
}, },
css: { css: {
preprocessorOptions: { preprocessorOptions: {
// sass: {
// api: 'modern-compiler',
// },
scss: { scss: {
api: 'modern-compiler', api: 'modern-compiler',
additionalData: PREFIXED_SCSS_STYLES, additionalData: PREFIXED_SCSS_STYLES,