vikunja/frontend
Archived
6
39
Fork 48
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

Migrate to bulma-css-variables and introduce dark mode #954

Merged
konrad merged 72 commits from adrinux/frontend:bulma-css-variables into main 2021-11-22 21:12:55 +00:00
Conversation 24 Commits 72 Files Changed 73 +9 -1
3 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a957df0a59 - Show all commits

1
src/components/home/topNavigation.vue
View File

@ -144,6 +144,7 @@ $vikunja-nav-logo-full-width: 164px;
.logo {
display: none;
color: var(--logo-text-color);
dpschen marked this conversation as resolved Outdated
dpschen commented 2021-11-16 16:33:25 +00:00
Outdated
Review
Copy Link

Put this in logo.vue

Put this in logo.vue
dpschen commented 2021-11-16 17:05:59 +00:00
Outdated
Review
Copy Link

Done!

Done!
@media screen and (min-width: $tablet) {
dpschen marked this conversation as resolved Outdated
dpschen commented 2021-11-16 16:33:33 +00:00
Outdated
Review
Copy Link

This also in logo.vue

This also in logo.vue
dpschen commented 2021-11-16 17:06:05 +00:00
Outdated
Review
Copy Link

Done!

Done!
align-self: stretch;

6
src/components/misc/no-auth-wrapper.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="no-auth-wrapper">
<div class="noauth-container">
<Logo width="400" height="117" />
<Logo class="logo" width="400" height="117" />
dpschen marked this conversation as resolved
konrad commented 2021-11-13 22:58:04 +00:00
Review
Copy Link

Maybe setting the logo text color should be done in the Logo component directly?

Maybe setting the logo text color should be done in the `Logo` component directly?
adrinux commented 2021-11-13 23:58:18 +00:00
Review
Copy Link

I assumed so and added scoped scss in there but it had no effect - possibly my lack of vue experience - is it neccessary to tell vue it has to render scss in logo.vue?

That said this is only on the log on page. Once logged in the logo class is on the link wrapping the logo and svg inherits color set on that...

I assumed so and added scoped scss in there but it had no effect - possibly my lack of vue experience - is it neccessary to tell vue it has to render scss in logo.vue? That said this is only on the log on page. Once logged in the logo class is on the link wrapping the logo and svg inherits color set on that...
konrad commented 2021-11-14 10:44:59 +00:00
Review
Copy Link

I assumed so and added scoped scss in there but it had no effect - possibly my lack of vue experience - is it neccessary to tell vue it has to render scss in logo.vue?

Did you tell it the content in the style tag was in scss with the lang="scss" attribute?

> I assumed so and added scoped scss in there but it had no effect - possibly my lack of vue experience - is it neccessary to tell vue it has to render scss in logo.vue? Did you tell it the content in the style tag was in scss with the `lang="scss"` attribute?
dpschen commented 2021-11-14 12:52:13 +00:00
Review
Copy Link

This should definately happen inside the Logo component, else we'll have to repeat the styles all over.

This should definately happen inside the Logo component, else we'll have to repeat the styles all over.
adrinux commented 2021-11-14 14:19:27 +00:00
Review
Copy Link

Yes I added lang="scss". It was late on a Saturday night so maybe I missed something but I literally copied the entire style tag from another vue file, and added the logo class to the template section.

<template>
	<Logo class="logo" alt="Vikunja" />
</template>

// and

<style lang="scss" scoped>
  .logo {
    color: var(--logo-text-color);
  }
</style>

I even killed and restarted yarn serve. So why didn't it work? Traditional css would say I need a more specific selector, but this is scoped so 🤷

Yes it should happen inside the logo component. And there are a pile of pre-existing logo styles that need moved there that are currently in other files.

Yes I added lang="scss". It *was* late on a Saturday night so maybe I missed something but I literally copied the entire style tag from another vue file, and added the logo class to the template section. ``` <template> <Logo class="logo" alt="Vikunja" /> </template> // and <style lang="scss" scoped> .logo { color: var(--logo-text-color); } </style> ``` I even killed and restarted yarn serve. So why didn't it work? Traditional css would say I need a more specific selector, but this is scoped so 🤷 Yes it *should* happen inside the logo component. And there are a pile of pre-existing logo styles that need moved there that are currently in other files.
dpschen commented 2021-11-14 15:47:55 +00:00
Review
Copy Link

Yes I added lang="scss". It was late on a Saturday night so maybe I missed something but I literally copied the entire style tag from another vue file, and added the logo class to the template section.

<template>
	<Logo class="logo" alt="Vikunja" />
</template>

// and

<style lang="scss" scoped>
  .logo {
    color: var(--logo-text-color);
  }
</style>

I even killed and restarted yarn serve. So why didn't it work? Traditional css would say I need a more specific selector, but this is scoped so 🤷

Yes it should happen inside the logo component. And there are a pile of pre-existing logo styles that need moved there that are currently in other files.

When you check the dom: Does with that style the class logo apply to the SVG?
Because if there is a class that defines the --logo-text-color I don't see a reason why scoping should change anything (since currentColor inherits)?

Other then that: there is also the :deep() selector that helps styling deep children (basically stuff that is inside child components). But I don't think it should be necessary.

> Yes I added lang="scss". It *was* late on a Saturday night so maybe I missed something but I literally copied the entire style tag from another vue file, and added the logo class to the template section. > > ``` > <template> > <Logo class="logo" alt="Vikunja" /> > </template> > > // and > > <style lang="scss" scoped> > .logo { > color: var(--logo-text-color); > } > </style> > ``` > > I even killed and restarted yarn serve. So why didn't it work? Traditional css would say I need a more specific selector, but this is scoped so 🤷 > > > Yes it *should* happen inside the logo component. And there are a pile of pre-existing logo styles that need moved there that are currently in other files. > > When you check the dom: Does with that style the class `logo` apply to the SVG? Because if there is a class that defines the `--logo-text-color` I don't see a reason why scoping should change anything (since currentColor inherits)? Other then that: there is also the `:deep()` selector that helps styling deep children (basically stuff that is inside child components). But I don't think it should be necessary.
dpschen commented 2021-11-17 13:42:29 +00:00
Review
Copy Link

Solved in 4133363fe1

Solved in https://kolaente.dev/vikunja/frontend/commit/4133363fe10cd724862007e57a82339928cd4362
<div class="message is-info" v-if="motd !== ''">
<div class="message-header">
<p>{{ $t('misc.info') }}</p>
@ -36,4 +36,8 @@ const motd = computed(() => store.state.config.motd)
margin: 0 auto;
padding: 1rem;
}
.logo {
color: var(--logo-text-color);
dpschen marked this conversation as resolved Outdated
dpschen commented 2021-11-16 16:37:03 +00:00
Outdated
Review
Copy Link

Move to logo.vue

Move to logo.vue
dpschen commented 2021-11-16 17:07:20 +00:00
Outdated
Review
Copy Link

Done!

Done!
}
</style>

3
src/styles/custom-properties/colors.scss
View File

@ -79,6 +79,8 @@
// Define custom color variable to alow change in dark mode
--card-border-color: var(--grey-200);
--logo-text-color: hsl(180, 1%, 15%);
&.dark {
@ -113,5 +115,6 @@
// Custom color variables we need to override
--card-border-color: hsla(var(--grey-100-hsl), 0.3);
--logo-text-color: var(--grey-700);
}
}