dan/parsley
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style cleanup

Browse Source
This commit is contained in:
Dan Elbert 2024-09-29 09:44:40 -05:00
parent f246f71aa9
commit b957d44aed
16 changed files with 72 additions and 450 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
app/javascript/application.js
View File

@ -1,91 +0,0 @@
import './styles';
import "vue-resize/dist/vue-resize";
import Vue from 'vue'
import { sync } from 'vuex-router-sync';
import { swInit } from "./lib/ServiceWorker";
import responsiveSync from "./lib/VuexResponsiveSync";
import { createChannel } from "./lib/ActionCable";
import VueProgressBar from "vue-progressbar";
import VueResize from "vue-resize";
import config from './lib/config';
import store from './store';
import router from './router';
import './lib/GlobalMixins';
import App from './components/App';
import AppAutocomplete from "./components/AppAutocomplete";
import AppConfirm from "./components/AppConfirm";
import AppDateTime from "./components/AppDateTime";
import AppDatePicker from "./components/AppDatePicker";
import AppDropdown from "./components/AppDropdown";
import AppExpandTransition from "./components/AppExpandTransition";
import AppIcon from "./components/AppIcon";
import AppIconicIcon from "./components/AppIconicIcon";
import AppModal from "./components/AppModal";
import AppNavbar from "./components/AppNavbar";
import AppPager from "./components/AppPager";
import AppRating from "./components/AppRating";
import AppSearchText from "./components/AppSearchText";
import AppTagEditor from "./components/AppTagEditor";
import AppTextField from "./components/AppTextField";
import AppValidationErrors from "./components/AppValidationErrors";
Vue.component("AppAutocomplete", AppAutocomplete);
Vue.component("AppConfirm", AppConfirm);
Vue.component("AppDateTime", AppDateTime);
Vue.component("AppDatePicker", AppDatePicker);
Vue.component("AppDropdown", AppDropdown);
Vue.component("AppExpandTransition", AppExpandTransition);
Vue.component("AppIcon", AppIcon);
Vue.component("AppIconicIcon", AppIconicIcon);
Vue.component("AppModal", AppModal);
Vue.component("AppNavbar", AppNavbar);
Vue.component("AppPager", AppPager);
Vue.component("AppRating", AppRating);
Vue.component("AppSearchText", AppSearchText);
Vue.component("AppTagEditor", AppTagEditor);
Vue.component("AppTextField", AppTextField);
Vue.component("AppValidationErrors", AppValidationErrors);
Vue.use(VueProgressBar, {
// color: '#bffaf3',
// failedColor: '#874b4b',
// thickness: '5px',
// transition: {
// speed: '0.2s',
// opacity: '0.6s',
// termination: 300
// },
// autoRevert: true,
// location: 'left',
// inverse: false
});
Vue.use(VueResize);
sync(store, router);
responsiveSync(store);
Vue.prototype.$createChannel = function(...args) {
createChannel(null, ...args);
}
document.addEventListener('DOMContentLoaded', () => {
const app = document.getElementById('app');
config.baseApiUrl = app.dataset.url;
window.$vm = new Vue({
el: '#app',
store,
router: router,
render: createElement => createElement('App'),
mounted() {
this.$nextTick(() => swInit(store));
},
components: { App }
});
});

8
app/javascript/components/App.vue
View File

@ -21,9 +21,11 @@
<script>
import { mapState } from "pinia";
import TWEEN from '@tweenjs/tween.js';
import { useGlobalTweenGroup } from "../lib/useGlobalTweenGroup";
import { useAppConfigStore } from "../stores/appConfig";
const globalTweenGroup = useGlobalTweenGroup();
export default {
data() {
return {
@ -59,8 +61,8 @@
created() {
// Setup global animation loop
function animate () {
TWEEN.update();
function animate(time) {
globalTweenGroup.update(time);
requestAnimationFrame(animate);
}
animate();

6
app/javascript/components/AppAutocomplete.vue
View File

@ -220,13 +220,13 @@
<style lang="scss" scoped>
@import "../styles/variables";
@use "bulma/sass/utilities" as bulma;
$labelLineHeight: 0.8rem;
input.input {
&::placeholder {
color: $grey-darker;
color: bulma.$grey-darker;
}
}
@ -251,7 +251,7 @@
&.active {
color: white;
background-color: $turquoise;
background-color: bulma.$turquoise;
}
.opt_value {

3
app/javascript/components/AppExpandTransition.vue
View File

@ -12,6 +12,7 @@
<script>
import TWEEN from '@tweenjs/tween.js';
import { useGlobalTweenGroup } from "../lib/useGlobalTweenGroup";
export default {
props: {
@ -70,6 +71,7 @@
}, 1000);
done();
})
.group(useGlobalTweenGroup())
.start();
},
@ -92,6 +94,7 @@
element.removeAttribute('style');
done();
})
.group(useGlobalTweenGroup())
.start();
}
}

4
app/javascript/components/AppRating.vue
View File

@ -105,7 +105,7 @@
<style lang="scss" scoped>
@import "../styles/variables";
@use "bulma/sass/utilities" as bulma;
span.rating {
position: relative;
@ -125,7 +125,7 @@
}
.filled-set {
color: $yellow;
color: bulma.$yellow;
position: absolute;
top: 0;
left: 0;

4
app/javascript/components/RecipeEditIngredientItem.vue
View File

@ -100,10 +100,10 @@
<style lang="scss" scoped>
@import "../styles/variables";
@use "bulma/sass/utilities" as bulma;
.edit-ingredient-item {
border-bottom: solid 1px $grey-light;
border-bottom: solid 1px bulma.$grey-light;
margin-bottom: 1.25rem;
&:last-child {

2
app/javascript/components/TaskItemList.vue
View File

@ -190,8 +190,6 @@
<style lang="scss" scoped>
@import "../styles/variables";
.columns {
margin-top: 0;
margin-bottom: 0;

2
app/javascript/components/TaskListDropdownItem.vue
View File

@ -53,7 +53,7 @@
<style lang="scss" scoped>
@use "bulma/sass" as bulma;
@use "bulma/sass/utilities" as bulma;
@use 'sass:color';
div.dropdown-item {

49
app/javascript/lib/VuexResponsiveSync.js
View File

@ -1,49 +0,0 @@
// Adds a module to a vuex store with a set of media query states
const defaultOptions = {
module: "mediaQueries"
};
// Hard coded values taken directly from Bulma css
const mobileBp = 768;
const desktopBp = 1024;
const widscreenBp = 1216;
const fullHdBp = 1408;
const mediaQueries = {
mobile: `screen and (max-width: ${mobileBp}px)`,
tablet: `screen and (min-width: ${mobileBp + 1}px)`,
tabletOnly: `screen and (min-width: ${mobileBp + 1}px) and (max-width: ${desktopBp - 1}px)`,
touch: `screen and (max-width: ${desktopBp - 1}px)`,
desktop: `screen and (min-width: ${desktopBp}px)`,
desktopOnly: `screen and (min-width: ${desktopBp}px) and (max-width: ${widscreenBp - 1}px)`,
widescreen: `screen and (min-width: ${widscreenBp}px)`,
widescreenOnly: `screen and (min-width: ${widscreenBp}px) and (max-width: ${fullHdBp - 1}px)`,
fullhd: `screen and (min-width: ${fullHdBp}px)`
};
export default function(store, options) {
let opts = Object.assign({}, defaultOptions, options || {});
const moduleName = opts.module;
const initialState = {};
for (let device in mediaQueries) {
const query = window.matchMedia(mediaQueries[device]);
query.onchange = (q) => {
store.commit(moduleName + "/MEDIA_QUERY_CHANGED", {mediaName: device, value: q.matches});
};
initialState[device] = query.matches;
}
store.registerModule(moduleName, {
namespaced: true,
state: initialState,
mutations: {
"MEDIA_QUERY_CHANGED" (state, data) {
state[data.mediaName] = data.value;
}
}
});
}

10
app/javascript/lib/useGlobalTweenGroup.js Normal file
View File

@ -0,0 +1,10 @@
import { Group } from '@tweenjs/tween.js'
let group = null;
export function useGlobalTweenGroup() {
if (group === null) {
group = new Group();
}
return group;
}

10
app/javascript/packs/application.js
View File

@ -25,7 +25,15 @@ import AppValidationErrors from "../components/AppValidationErrors";
import App from '../components/App.vue'
// Resize?
// Progressbar?
document.addEventListener('DOMContentLoaded', () => {
const appElement = document.getElementById('app');
if (!appElement) { return; }
config.baseApiUrl = appElement.dataset.url;
const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
@ -50,5 +58,5 @@ document.addEventListener('DOMContentLoaded', () => {
app.component("AppTextField", AppTextField);
app.component("AppValidationErrors", AppValidationErrors);
app.mount('#app');
app.mount(appElement);
});

218
app/javascript/store/index.js
View File

@ -1,218 +0,0 @@
import Vue from 'vue'
import Vuex from 'vuex'
import api from '../lib/Api';
import { createChannel } from '../lib/ActionCable';
Vue.use(Vuex);
let taskChannel = null;
export default new Vuex.Store({
strict: process.env.NODE_ENV !== 'production',
state: {
initialLoad: false,
updateAvailable: false,
loadingCount: 0,
error: null,
authChecked: false,
user: null,
loginMessage: null,
taskLists: [],
currentTaskList: null,
nutrientList: {
kcal: { label: "Calories", unit: "kcal" },
protein: { label: "Protein", unit: "g" },
lipids: { label: "Fat", unit: "g" },
carbohydrates: { label: "Carbohydrates", unit: "g" },
water: { label: "Water", unit: "g" },
sugar: { label: "Sugar", unit: "g" },
fiber: { label: "Fiber", unit: "g" },
cholesterol: { label: "Cholesterol", unit: "mg" },
sodium: { label: "Sodium", unit: "mg" },
calcium: { label: "Calcium", unit: "mg" },
iron: { label: "Iron", unit: "mg" },
magnesium: { label: "Magnesium", unit: "mg" },
phosphorus: { label: "Phosphorus", unit: "mg" },
potassium: { label: "Potassium", unit: "mg" },
zinc: { label: "Zinc", unit: "mg" },
copper: { label: "Copper", unit: "mg" },
manganese: { label: "Manganese", unit: "mg" },
vit_a: { label: "Vitamin A", unit: "μg" },
vit_b6: { label: "Vitamin B6", unit: "mg" },
vit_b12: { label: "Vitamin B12", unit: "μg" },
vit_c: { label: "Vitamin C", unit: "mg" },
vit_d: { label: "Vitamin D", unit: "μg" },
vit_e: { label: "Vitamin E", unit: "mg" },
vit_k: { label: "Vitamin K", unit: "μg" },
ash: { label: "ash", unit: "g" }
}
},
getters: {
isLoading(state) {
return state.loadingCount > 0;
},
isLoggedIn(state) {
return state.user !== null;
},
isAdmin(state) {
return state.user !== null && state.user.admin === true;
}
},
mutations: {
setUpdateAvailable(state, value) {
state.updateAvailable = value;
},
setInitialLoad(state, value) {
state.initialLoad = value;
},
setLoading(state, value) {
if (value) {
state.loadingCount = state.loadingCount + 1;
} else {
state.loadingCount = state.loadingCount - 1;
}
state.loading = state.loadingCount !== 0;
},
setError(state, value) {
console.log(value);
state.error = value;
},
setUser(state, user) {
state.authChecked = true;
state.user = user;
},
setLoginMessage(state, msg) {
state.loginMessage = msg;
},
setTaskLists(state, lists) {
state.taskLists = lists || [];
},
setCurrentTaskList(state, list) {
state.currentTaskList = list || null;
},
replaceTaskList(state, list) {
if (state.taskLists) {
const listIdx = state.taskLists.findIndex(l => l.id === list.id);
if (listIdx >= 0) {
state.taskLists.splice(listIdx, 1, list);
}
if (state.currentTaskList && state.currentTaskList.id === list.id) {
state.currentTaskList = list;
}
}
}
},
actions: {
updateCurrentUser({commit}) {
return api.getCurrentUser()
.then(user => {
commit("setUser", user);
return user;
});
},
login({commit}, authData) {
return api.postLogin(authData.username, authData.password)
.then(data => {
if (data.success) {
commit("setUser", data.user);
commit("setLoginMessage", null);
} else {
commit("setUser", null);
commit("setLoginMessage", data.message);
}
return data;
});
},
logout({commit}) {
return api.getLogout()
.then(() => {
commit("setUser", null);
});
},
refreshTaskLists({commit, dispatch, state}) {
const cb = function(data) {
commit("setTaskLists", data);
let ctl = null;
if (state.currentTaskList) {
ctl = data.find(l => l.id === state.currentTaskList.id);
}
ctl = ctl || data[0] || null;
commit("setCurrentTaskList", ctl);
dispatch('ensureTaskListChannel');
};
return api.getTaskLists(cb)
},
ensureTaskLists({dispatch, state}) {
if (state.user && state.taskLists.length === 0) {
return dispatch("refreshTaskLists");
} else {
return Promise.resolve();
}
},
ensureTaskListChannel({ commit }) {
if (taskChannel === null) {
taskChannel = createChannel(null, "TaskChannel", {
received(data) {
if (data && data.action === 'updated') {
commit('replaceTaskList', data.task_list);
}
}
});
}
},
createTaskList({commit, dispatch}, newList) {
return api.postTaskList(newList)
.then(data => commit("setCurrentTaskList", data))
.then(() => dispatch("refreshTaskLists"))
},
deleteTaskList({dispatch}, taskList) {
return api.deleteTaskList(taskList)
.then(() => dispatch("refreshTaskLists"));
},
createTaskItem({commit, dispatch}, taskItem) {
return api.postTaskItem(taskItem.task_list_id, taskItem)
.then(data => {
return data;
});
},
updateTaskItem({commit}, taskItem) {
return api.patchTaskItem(taskItem.task_list_id, taskItem)
.then(data => {
return data;
});
},
deleteTaskItems({commit}, payload) {
return api.deleteTaskItems(payload.taskList.id, payload.taskItems);
},
completeTaskItems({commit}, payload) {
return api.completeTaskItems(payload.taskList.id, payload.taskItems, !payload.completed);
}
}
});

68
app/javascript/styles/_responsive_controls.scss
View File

@ -1,107 +1,97 @@
@mixin responsive-button-size($size) {
&.is-small-#{$size} {
@include button-small;
}
&.is-medium-#{$size} {
@include button-medium;
}
&.is-large-#{$size} {
@include button-large;
}
}
@use "bulma/sass/utilities" as bulma;
@use "bulma/sass/utilities/controls";
@use "bulma/sass/utilities/mixins";
@mixin responsive-label-size($size) {
&.is-small-#{$size} {
font-size: $size-small;
font-size: bulma.$size-small;
}
&.is-medium-#{$size} {
font-size: $size-medium;
font-size: bulma.$size-medium;
}
&.is-large-#{$size} {
font-size: $size-large;
font-size: bulma.$size-large;
}
}
@mixin responsive-control-size($size) {
&.is-small-#{$size} {
@include control-small;
@include controls.control-small;
}
&.is-medium-#{$size} {
@include control-medium;
@include controls.control-medium;
}
&.is-large-#{$size} {
@include control-large;
@include controls.control-large;
}
}
.button {
@include mobile {
@include responsive-button-size("mobile");
@include mixins.mobile {
@include responsive-control-size("mobile");
}
@include tablet {
@include responsive-button-size("tablet");
@include mixins.tablet {
@include responsive-control-size("tablet");
}
@include desktop {
@include responsive-button-size("desktop");
@include mixins.desktop {
@include responsive-control-size("desktop");
}
@include widescreen {
@include responsive-button-size("widescreen");
@include mixins.widescreen {
@include responsive-control-size("widescreen");
}
@include fullhd {
@include responsive-button-size("fullhd");
@include mixins.fullhd {
@include responsive-control-size("fullhd");
}
}
.label {
@include mobile {
@include mixins.mobile {
@include responsive-label-size("mobile");
}
@include tablet {
@include mixins.tablet {
@include responsive-label-size("tablet");
}
@include desktop {
@include mixins.desktop {
@include responsive-label-size("desktop");
}
@include widescreen {
@include mixins.widescreen {
@include responsive-label-size("widescreen");
}
@include fullhd {
@include mixins.fullhd {
@include responsive-label-size("fullhd");
}
}
.input, .textarea {
@include mobile {
@include mixins.mobile {
@include responsive-control-size("mobile");
}
@include tablet {
@include mixins.tablet {
@include responsive-control-size("tablet");
}
@include desktop {
@include mixins.desktop {
@include responsive-control-size("desktop");
}
@include widescreen {
@include mixins.widescreen {
@include responsive-control-size("widescreen");
}
@include fullhd {
@include mixins.fullhd {
@include responsive-control-size("fullhd");
}
}

35
app/javascript/styles/_variables.scss
View File

@ -1,35 +0,0 @@
// coolors.co pallet
$coolors-dark: rgba(29, 30, 24, 1);
$coolors-blue: rgba(67, 127, 151, 1);
$coolors-green: rgba(121, 167, 54, 1);
$coolors-red: #ab4c34;
$coolors-yellow: rgba(240, 162, 2, 1);
//$family-sans-serif: "Verdana", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
$family-serif: Georgia, "Times New Roman", Times, serif;
// Bluma default overrides
//$green: #79A736;
//$red: #d4424e;
//$blue: #9c36a7;
$green: $coolors-green;
$blue: $coolors-blue;
$red: $coolors-red;
$yellow: $coolors-yellow;
$dark: $coolors-dark;
$primary: $green;
$family-primary: $family-serif;
$modal-content-width: 750px;
// Make all Bulma variables and functions available
@import "~bulma/sass/utilities/initial-variables";
@import "~bulma/sass/utilities/functions";
@import "~bulma/sass/utilities/derived-variables";
//$dropdown-item-hover-background-color: $white-ter;

8
app/javascript/styles/_wide_modal.scss
View File

@ -1,5 +1,9 @@
@include until($desktop) {
@use "bulma/sass/utilities" as bulma;
@use "bulma/sass/utilities/mixins";
@include mixins.until(bulma.$desktop) {
.modal.is-wide {
.modal-content, .modal-card {
margin: 0 20px;
@ -8,7 +12,7 @@
}
}
@include from($desktop) {
@include mixins.from(bulma.$desktop) {
.modal.is-wide {
.modal-content, .modal-card {
margin: 0 auto;

4
app/javascript/styles/index.scss
View File

@ -18,8 +18,8 @@ $family-serif: Georgia, "Times New Roman", Times, serif;
$modal-content-width: 750px
);
// @import "./responsive_controls";
// @import "./wide_modal";
@import "./responsive_controls";
@import "./wide_modal";
@import "./iconic";
@import "./transitions";