Merge pull request #720 from photonia-io/bulma-1.0.0

Migrate to Bulma v1

app/javascript/albums/index.vue

@@ -2,16 +2,16 @@
   <section class="section-pt-pb-0">
     <div class="container">
       <h1 class="title mt-5 mb-0">Albums</h1>
-      <hr class="mt-2 mb-4">
-      <div class="columns is-1 is-variable is-multiline">
+      <hr class="mt-2 mb-4" />
+      <div class="columns is-1 is-multiline">
         <AlbumItem
           v-if="result && result.albums"
           v-for="album in result.albums.collection"
           :album="album"
           :key="album.id"
         />
       </div>
-      <hr class="mt-1 mb-4">
+      <hr class="mt-1 mb-4" />
       <Pagination
         v-if="result && result.albums"
         :metadata="result.albums.metadata"
@@ -22,23 +22,26 @@
 </template>
 
 <script setup>
-  import { computed } from 'vue'
-  import { useRoute } from 'vue-router'
-  import gql from 'graphql-tag'
-  import { useQuery } from '@vue/apollo-composable'
-  import { useTitle } from 'vue-page-title'
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+import gql from "graphql-tag";
+import { useQuery } from "@vue/apollo-composable";
+import { useTitle } from "vue-page-title";
 
-  // components
-  import AlbumItem from '@/albums/album-item.vue'
-  import Pagination from '@/shared/pagination.vue'
+// components
+import AlbumItem from "@/albums/album-item.vue";
+import Pagination from "@/shared/pagination.vue";
 
-  useTitle('Albums') // todo: add page number
+useTitle("Albums"); // todo: add page number
 
-  const route = useRoute()
-  const page = computed(
-    function() {
-      return parseInt(route.query.page) || 1
-    }
-  )
-  const { result } = useQuery(gql`${gql_queries.albums_index}`, { page: page })
+const route = useRoute();
+const page = computed(function () {
+  return parseInt(route.query.page) || 1;
+});
+const { result } = useQuery(
+  gql`
+    ${gql_queries.albums_index}
+  `,
+  { page: page },
+);
 </script>

app/javascript/albums/show.vue

@@ -8,7 +8,7 @@
         v-html="album.descriptionHtml"
         v-if="album.descriptionHtml"
       />
-      <div class="columns is-1 is-variable is-multiline">
+      <div class="columns is-1 is-multiline">
         <PhotoItem
           v-for="photo in album.photos.collection"
           :photo="photo"

app/javascript/app.vue

@@ -6,15 +6,24 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import Navigation from "./navigation.vue";
 import Footer from "./footer.vue";
 
-export default {
-  name: "App",
-  components: {
-    Navigation,
-    Footer,
-  },
-};
+import { useApplicationStore } from "@/stores/application";
+import { watch } from "vue";
+import { storeToRefs } from "pinia";
+
+const applicationStore = useApplicationStore();
+const { colorScheme } = storeToRefs(applicationStore);
+
+function setColorScheme(cs) {
+  document.documentElement.setAttribute("data-theme", cs);
+}
+
+watch(colorScheme, (cs) => {
+  setColorScheme(cs);
+});
+
+setColorScheme(colorScheme.value);
 </script>

app/javascript/homepage/random-photos.vue

@@ -1,7 +1,7 @@
 <template>
   <h2 class="title is-3 mb-2">Random Photos</h2>
   <hr class="mt-0 mb-3" />
-  <div class="columns is-variable is-multiline">
+  <div class="columns is-multiline">
     <div v-for="photo in photos" class="column is-half">
       <router-link :to="{ name: 'photos-show', params: { id: photo.id } }">
         <img

app/javascript/navigation.vue

@@ -3,7 +3,25 @@
     <div class="container">
       <div class="navbar-brand">
         <router-link :to="{ name: 'root' }" class="navbar-item">
-          <img src="@/assets/photonia-logo.png" width="156" height="30" />
+          <picture>
+            <source
+              v-if="applicationStore.colorScheme === 'dark'"
+              srcset="@/assets/photonia-logo-dark.png"
+              width="156"
+              height="24"
+            />
+            <source
+              v-else
+              srcset="@/assets/photonia-logo-light.png"
+              width="156"
+              height="24"
+            />
+            <img
+              src="@/assets/photonia-logo-light.png"
+              width="156"
+              height="24"
+            />
+          </picture>
         </router-link>
         <a
           role="button"
@@ -93,6 +111,22 @@
         </div>
 
         <div class="navbar-end">
+          <div class="navbar-item">
+            <span
+              v-if="applicationStore.colorScheme === 'dark'"
+              class="icon is-clickable"
+              @click="applicationStore.setUserColorScheme('light')"
+            >
+              <i class="fas fa-moon"></i>
+            </span>
+            <span
+              v-else
+              class="icon is-clickable"
+              @click="applicationStore.setUserColorScheme('dark')"
+            >
+              <i class="fas fa-sun"></i>
+            </span>
+          </div>
           <div class="navbar-item">
             <form @submit.prevent="doSearch">
               <div class="field has-addons">
@@ -118,10 +152,12 @@
 
 <script setup>
 import { ref, watch } from "vue";
+import { useApplicationStore } from "@/stores/application";
 import { useUserStore } from "@/stores/user";
 import { useRoute, useRouter } from "vue-router";
 
 const router = useRouter();
+const applicationStore = useApplicationStore();
 const userStore = useUserStore();
 
 const showNavigation = ref(false);

app/javascript/photos/deselected.vue

@@ -19,7 +19,7 @@
           <p>Click on a photo to move it back to the selection.</p>
         </div>
       </div>
-      <div class="columns is-1 is-variable is-multiline">
+      <div class="columns is-1 is-multiline">
         <PhotoItem
           v-for="photo in selectionStore.deselectedPhotos"
           :photo="photo"

app/javascript/photos/index.vue

@@ -37,7 +37,7 @@
         "
         :photos="result.photos.collection"
       />
-      <div class="columns is-1 is-variable is-multiline">
+      <div class="columns is-1 is-multiline">
         <PhotoItem
           v-if="result && result.photos"
           v-for="photo in result.photos.collection"
@@ -76,7 +76,7 @@ const route = useRoute();
 const query = computed(() => route.query.q || null);
 const page = computed(() => parseInt(route.query.page) || 1);
 const additionalQueryParams = computed(() =>
-  query.value !== null ? { q: query.value } : {}
+  query.value !== null ? { q: query.value } : {},
 );
 
 const applicationStore = useApplicationStore();
@@ -86,6 +86,6 @@ const { result } = useQuery(
   gql`
     ${gql_queries.photos_index}
   `,
-  { page: page, query: query }
+  { page: page, query: query },
 );
 </script>

app/javascript/photos/organizer.vue

@@ -15,7 +15,7 @@
       </div>
       <hr class="mt-2 mb-4" />
       <SelectionActions :photos="selectionStore.selectedPhotos" />
-      <div class="columns is-1 is-variable is-multiline">
+      <div class="columns is-1 is-multiline">
         <PhotoItem
           v-for="photo in selectionStore.selectedPhotos"
           :photo="photo"

app/javascript/photos/photo-infobox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="message is-smallish is-lightgray">
+  <div class="message is-smallish">
     <div class="message-header">
       <slot name="header"></slot>
     </div>
@@ -11,7 +11,7 @@
 
 <style scoped>
 .message {
-  background-color: hsl(0, 0%, 98%);
+  /* background-color: hsl(0, 0%, 98%); */
 }
 .message p {
   display: block;

app/javascript/photos/show.vue

@@ -162,7 +162,7 @@
                       {{ album.title }}
                     </router-link>
                   </h4>
-                  <div class="columns is-variable is-1 is-mobile">
+                  <div class="columns is-1 is-mobile">
                     <div class="column is-half">
                       <router-link
                         v-if="album.previousPhotoInAlbum"

app/javascript/stores/application.js

@@ -1,11 +1,22 @@
 import { defineStore } from "pinia";
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 
 export const useApplicationStore = defineStore("application", () => {
   const navigationShortcutsEnabled = ref(true);
   const selectionMode = ref(localStorage.getItem("selectionMode") === "true");
+
+  const systemColorScheme =
+    window.matchMedia &&
+    window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+  const userColorScheme = ref(localStorage.getItem("userColorScheme"));
+  const colorScheme = computed(() =>
+    userColorScheme.value ? userColorScheme.value : systemColorScheme,
+  );
+
   const showLabelsOnHero = ref(
-    localStorage.getItem("showLabelsOnHero") === "true"
+    localStorage.getItem("showLabelsOnHero") === "true",
   );
 
   function enableNavigationShortcuts() {
@@ -32,6 +43,14 @@ export const useApplicationStore = defineStore("application", () => {
     selectionMode.value = !selectionMode.value;
   }
 
+  watch(userColorScheme, (newValue) => {
+    localStorage.setItem("userColorScheme", newValue);
+  });
+
+  function setUserColorScheme(value) {
+    userColorScheme.value = value;
+  }
+
   watch(showLabelsOnHero, (newValue) => {
     localStorage.setItem("showLabelsOnHero", newValue);
   });
@@ -45,6 +64,8 @@ export const useApplicationStore = defineStore("application", () => {
     enableNavigationShortcuts,
     disableNavigationShortcuts,
     selectionMode,
+    colorScheme,
+    setUserColorScheme,
     enterSelectionMode,
     exitSelectionMode,
     toggleSelectionMode,

app/javascript/styles/application.scss

@@ -1,8 +1,10 @@
-$box-shadow: 0.1em 0.1em 0.1em 0.1em rgba(0, 0, 0, 0.1);
-$section-padding: 3rem 0.75rem;
+// @use "bulma/sass/utilities/mixins";
 
-@import "bulma-scss/bulma";
-@import "bulma-block-list/src/block-list";
+@use "bulma/sass" with (
+  $box-shadow: 0.1em 0.1em 0.1em 0.1em rgba(0, 0, 0, 0.1),
+  $section-padding: 3rem 0.75rem
+);
+@import "node_modules/bulma-block-list/src/block-list";
 
 $divider-margin-size: 0.75rem;
 @import "@creativebulma/bulma-divider";
@@ -32,11 +34,11 @@ $divider-margin-size: 0.75rem;
   flex-direction: column;
 }
 
-#photo-title-container {
-  @include from(769px) {
-    margin-right: 0.75rem;
-  }
-}
+// #photo-title-container {
+//   @include mixins.from(769px) {
+//     margin-right: 0.75rem;
+//   }
+// }
 
 .section-pt-pb-0 {
   @extend .section;
@@ -51,3 +53,8 @@ $divider-margin-size: 0.75rem;
     width: 640px;
   }
 }
+
+.navbar-brand picture {
+  display: flex;
+  align-items: center;
+}