CodeMirror/fantasia-archive
1
0
Fork 0
mirror of https://github.com/Elvanos/fantasia-archive.git synced 2024-06-26 10:00:23 +12:00
Code Issues Projects Releases Wiki Activity

0.1.5 - first iterration of responsive display added

Browse source
This commit is contained in:
Elvanos 2021-04-13 20:26:35 +02:00
parent 4e8e2cabfc
commit 4042f709c1
7 changed files with 115 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
README.md
View file

@ -1,4 +1,4 @@
# Fantasia archive (fantasiaarchive) # Fantasia Archive (fantasiaarchive)
A database manager for world building A database manager for world building
@ -23,14 +23,16 @@ npm install
** Prep for build ** Prep for build
Due to issues with this package being written in somewhat older version of nodeJS, the script will fizzle out upon building due to wrong version of `.d.ts` file in one of the included NPM packages. Due to issues with this package being written in somewhat older version of nodeJS, the script will fizzle out upon building due to wrong version of `.d.ts` file in one of the included NPM packages.
- The proper replacement file can be found in `_typeFix/index.d.ts`
- The faulty file can be found in `node_modules\builder-util\node_modules\@types\fs-extra\index.d.ts` - The proper replacement file can be found in `_typeFix/index.d.ts`
- To fix this issue, simply copy the contents of the proper replacement over the buggy faulty file (or just replace its contents) - The faulty file can be found in `node_modules\builder-util\node_modules\@types\fs-extra\index.d.ts`
- Once this is done, the build should run as normal without any issues - To fix this issue, simply copy the contents of the proper replacement over the buggy faulty file (or just replace its contents)
- Once this is done, the build should run as normal without any issues
## Optional: Start the app in development mode (hot-code reloading, error reporting, etc.) ## Optional: Start the app in development mode (hot-code reloading, error reporting, etc.)
If you don't know what's going on, skip this step. If you don't know what's going on, skip this step.
```bash ```bash
npm run dev npm run dev
``` ```

4
package.json
View file

@ -2,7 +2,7 @@
"name": "fantasiaarchive", "name": "fantasiaarchive",
"version": "0.1.5", "version": "0.1.5",
"description": "A database manager for world building", "description": "A database manager for world building",
"productName": "Fantasia archive", "productName": "Fantasia Archive",
"author": "Elvanos <elvanos66@gmail.com>", "author": "Elvanos <elvanos66@gmail.com>",
"license": "GNU GENERAL PUBLIC LICENSE", "license": "GNU GENERAL PUBLIC LICENSE",
"private": true, "private": true,
@ -81,4 +81,4 @@
"npm": ">= 6.13.4", "npm": ">= 6.13.4",
"yarn": ">= 1.21.1" "yarn": ">= 1.21.1"
} }
} }

4
quasar.conf.js
View file

@ -149,8 +149,8 @@ module.exports = configure(function (ctx) {
workboxPluginMode: "GenerateSW", // 'GenerateSW' or 'InjectManifest' workboxPluginMode: "GenerateSW", // 'GenerateSW' or 'InjectManifest'
workboxOptions: {}, // only for GenerateSW workboxOptions: {}, // only for GenerateSW
manifest: { manifest: {
name: "Fantasia archive", name: "Fantasia Archive",
short_name: "Fantasia archive", short_name: "Fantasia Archive",
description: "A database manager for world building", description: "A database manager for world building",
display: "standalone", display: "standalone",
orientation: "portrait", orientation: "portrait",

66
src/components/dialogs/ProgramSettings.vue
View file

@ -66,7 +66,7 @@
</div> </div>
</div> </div>
<div class="col-4 optionWrapper"> <div class="col-12 col-md-6 col-lg-4 optionWrapper">
<div class="optionTitle"> <div class="optionTitle">
Dark mode Dark mode
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md"> <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@ -87,7 +87,7 @@
</div> </div>
</div> </div>
<div class="col-4 optionWrapper"> <div class="col-12 col-md-6 col-lg-4 optionWrapper">
<div class="optionTitle"> <div class="optionTitle">
Accessibility - Text shadow Accessibility - Text shadow
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md"> <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@ -102,7 +102,7 @@
/> />
</div> </div>
<div class="col-4 optionWrapper"> <div class="col-12 col-md-6 col-lg-4 optionWrapper">
<div class="optionTitle"> <div class="optionTitle">
Accessibility - Pronounced count divider Accessibility - Pronounced count divider
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md"> <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@ -117,7 +117,7 @@
/> />
</div> </div>
<div class="col-4 optionWrapper"> <div class="col-12 col-md-6 col-lg-4 optionWrapper">
<div class="optionTitle"> <div class="optionTitle">
Accessibility - Hide strike-through Accessibility - Hide strike-through
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md"> <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@ -138,7 +138,7 @@
</div> </div>
</div> </div>
<div class="col-4 optionWrapper"> <div class="col-12 col-md-6 col-lg-4 optionWrapper">
<div class="optionTitle"> <div class="optionTitle">
Hide Welcome screen social links Hide Welcome screen social links
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md"> <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@ -153,7 +153,7 @@
/> />
</div> </div>
<div class="col-4 optionWrapper"> <div class="col-12 col-md-6 col-lg-4 optionWrapper">
<div class="optionTitle"> <div class="optionTitle">
Hide tips popup on start screen Hide tips popup on start screen
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md"> <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@ -168,7 +168,7 @@
/> />
</div> </div>
<div class="col-4 optionWrapper"> <div class="col-12 col-md-6 col-lg-4 optionWrapper">
<div class="optionTitle"> <div class="optionTitle">
Hide tips on project screen Hide tips on project screen
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md"> <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@ -183,7 +183,7 @@
/> />
</div> </div>
<div class="col-4 optionWrapper"> <div class="col-12 col-md-6 col-lg-4 optionWrapper">
<div class="optionTitle"> <div class="optionTitle">
Hide Fantasia mascot Hide Fantasia mascot
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md"> <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@ -224,7 +224,7 @@
</div> </div>
</div> </div>
<div class="col-4 optionWrapper"> <div class="col-12 col-md-6 col-lg-4 optionWrapper">
<div class="optionTitle"> <div class="optionTitle">
Disable document control bar Disable document control bar
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md"> <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@ -241,7 +241,7 @@
/> />
</div> </div>
<div class="col-4 optionWrapper"> <div class="col-12 col-md-6 col-lg-4 optionWrapper">
<div class="optionTitle"> <div class="optionTitle">
Disable document guides Disable document guides
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md"> <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@ -262,7 +262,7 @@
</div> </div>
</div> </div>
<div class="col-4 optionWrapper"> <div class="col-12 col-md-6 col-lg-4 optionWrapper">
<div class="optionTitle"> <div class="optionTitle">
Disable document tooltips Disable document tooltips
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md"> <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@ -277,7 +277,7 @@
/> />
</div> </div>
<div class="col-4 optionWrapper"> <div class="col-12 col-md-6 col-lg-4 optionWrapper">
<div class="optionTitle"> <div class="optionTitle">
Hide empty fields Hide empty fields
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md"> <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@ -294,7 +294,7 @@
/> />
</div> </div>
<div class="col-4 optionWrapper"> <div class="col-12 col-md-6 col-lg-4 optionWrapper">
<div class="optionTitle"> <div class="optionTitle">
Prevent auto-scrolling Prevent auto-scrolling
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md"> <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@ -333,7 +333,7 @@
</div> </div>
</div> </div>
<div class="col-4 optionWrapper"> <div class="col-12 col-md-6 col-lg-4 optionWrapper">
<div class="optionTitle"> <div class="optionTitle">
Close quick popups with same key Close quick popups with same key
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md"> <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@ -354,7 +354,7 @@
</div> </div>
</div> </div>
<div class="col-4 optionWrapper"> <div class="col-12 col-md-6 col-lg-4 optionWrapper">
<div class="optionTitle"> <div class="optionTitle">
Stop quick-search close after selection Stop quick-search close after selection
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md"> <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@ -371,7 +371,7 @@
/> />
</div> </div>
<div class="col-4 optionWrapper"> <div class="col-12 col-md-6 col-lg-4 optionWrapper">
<div class="optionTitle"> <div class="optionTitle">
Don't precheck category filter Don't precheck category filter
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md"> <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@ -412,7 +412,7 @@
</div> </div>
</div> </div>
<div class="col-4 optionWrapper"> <div class="col-12 col-md-6 col-lg-4 optionWrapper">
<div class="optionTitle"> <div class="optionTitle">
Hide tags in tree Hide tags in tree
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md"> <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@ -427,7 +427,7 @@
/> />
</div> </div>
<div class="col-4 optionWrapper"> <div class="col-12 col-md-6 col-lg-4 optionWrapper">
<div class="optionTitle"> <div class="optionTitle">
Top tags in tree Top tags in tree
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md"> <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@ -442,7 +442,7 @@
/> />
</div> </div>
<div class="col-4 optionWrapper"> <div class="col-12 col-md-6 col-lg-4 optionWrapper">
<div class="optionTitle"> <div class="optionTitle">
Compact tags Compact tags
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md"> <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@ -463,7 +463,7 @@
</div> </div>
</div> </div>
<div class="col-4 optionWrapper"> <div class="col-12 col-md-6 col-lg-4 optionWrapper">
<div class="optionTitle"> <div class="optionTitle">
Stop sublevel collapse in tree Stop sublevel collapse in tree
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md"> <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@ -478,7 +478,7 @@
/> />
</div> </div>
<div class="col-4 optionWrapper"> <div class="col-12 col-md-6 col-lg-4 optionWrapper">
<div class="optionTitle"> <div class="optionTitle">
Hide project name in tree Hide project name in tree
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md"> <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@ -493,7 +493,7 @@
/> />
</div> </div>
<div class="col-4 optionWrapper"> <div class="col-12 col-md-6 col-lg-4 optionWrapper">
<div class="optionTitle"> <div class="optionTitle">
Invert tree custom order sorting Invert tree custom order sorting
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md"> <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@ -516,7 +516,7 @@
</div> </div>
</div> </div>
<div class="col-4 optionWrapper"> <div class="col-12 col-md-6 col-lg-4 optionWrapper">
<div class="optionTitle"> <div class="optionTitle">
Hide document count entirely Hide document count entirely
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md"> <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@ -531,7 +531,7 @@
/> />
</div> </div>
<div class="col-4 optionWrapper"> <div class="col-12 col-md-6 col-lg-4 optionWrapper">
<div class="optionTitle"> <div class="optionTitle">
Hide category count Hide category count
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md"> <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@ -546,7 +546,7 @@
/> />
</div> </div>
<div class="col-4 optionWrapper"> <div class="col-12 col-md-6 col-lg-4 optionWrapper">
<div class="optionTitle"> <div class="optionTitle">
Invert category position Invert category position
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md"> <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@ -561,12 +561,12 @@
/> />
</div> </div>
<div class="col-4 optionWrapper"> <div class="col-12 col-md-6 col-lg-4 optionWrapper">
<div class="optionTitle"> <div class="optionTitle">
Hide order numbers Hide order numbers
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md"> <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
<q-tooltip :delay="500"> <q-tooltip :delay="500">
This option disabled showing of the custom order numbers left of the names. This option hides the custom order numbers left of the names.
</q-tooltip> </q-tooltip>
</q-icon> </q-icon>
</div> </div>
@ -582,7 +582,7 @@
</div> </div>
</div> </div>
<div class="col-4 optionWrapper"> <div class="col-12 col-md-6 col-lg-4 optionWrapper">
<div class="optionTitle"> <div class="optionTitle">
Hide extra icons Hide extra icons
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md"> <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@ -599,7 +599,7 @@
/> />
</div> </div>
<div class="col-4 optionWrapper"> <div class="col-12 col-md-6 col-lg-4 optionWrapper">
<div class="optionTitle"> <div class="optionTitle">
Hide "Add under" icon Hide "Add under" icon
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md"> <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@ -614,7 +614,7 @@
/> />
</div> </div>
<div class="col-4 optionWrapper"> <div class="col-12 col-md-6 col-lg-4 optionWrapper">
<div class="optionTitle"> <div class="optionTitle">
Hide "Edit" icon Hide "Edit" icon
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md"> <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@ -629,7 +629,7 @@
/> />
</div> </div>
<div class="col-4 optionWrapper"> <div class="col-12 col-md-6 col-lg-4 optionWrapper">
<div class="optionTitle"> <div class="optionTitle">
Hide "Open" icon Hide "Open" icon
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md"> <q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
@ -1265,10 +1265,10 @@ body.body--dark {
margin-top: 16px; margin-top: 16px;
margin-bottom: 8px; margin-bottom: 8px;
font-weight: 500; font-weight: 500;
align-items: center; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
display: flex; display: flex;
flex-wrap: wrap; width: calc(100% - 45px);
margin-left: 10px; margin-left: 10px;
} }

45
src/pages/DocumentDisplay.vue
View file

@ -108,11 +108,16 @@
</div> </div>
<div <div
:class="`col-${field.sizing} q-mb-md`"
v-for="field in bluePrintData.extraFields" v-for="field in bluePrintData.extraFields"
:key="`${field.id}`" :key="`${field.id}`"
v-show="hasValueFieldFilter(field) || editMode" v-show="hasValueFieldFilter(field) || editMode"
> :class="`
col-12
col-md-${determineSize_MD(field)}
col-lg-${determineSize_LG(field)}
col-xl-${determineSize_XL(field)}
q-mb-md
`">
<Field_Break <Field_Break
class="inputWrapper break" class="inputWrapper break"
@ -812,6 +817,40 @@ export default class PageDocumentDisplay extends BaseClass {
return true return true
} }
/****************************************************************/
// RESPONSIVE COLLUMN STYLES
/****************************************************************/
determineSize_MD (field: I_ExtraFields) {
if (field.type === "break") {
return 12
}
if (field.sizing <= 6) {
return 6
}
return field.sizing
}
determineSize_LG (field: I_ExtraFields) {
if (field.type === "break") {
return 12
}
if (field.sizing <= 4) {
return 4
}
return field.sizing
}
determineSize_XL (field: I_ExtraFields) {
if (field.type === "break") {
return 12
}
return field.sizing
}
/****************************************************************/ /****************************************************************/
// DELETE DIALOG // DELETE DIALOG
/****************************************************************/ /****************************************************************/
@ -841,7 +880,7 @@ export default class PageDocumentDisplay extends BaseClass {
} }
/****************************************************************/ /****************************************************************/
// `DOCUMENT COPY // DOCUMENT COPY
/****************************************************************/ /****************************************************************/
documentPass = null as unknown as I_OpenedDocument documentPass = null as unknown as I_OpenedDocument

36
src/pages/ProjectScreen.vue
View file

@ -1,5 +1,11 @@
<template> <template>
<q-page class="column items-center justify-center"> <q-page
class="column items-center justify-center no-wrap"
:class="{
'q-pb-xl q-pl-xl q-pr-xl': disableDocumentControlBar,
'q-pa-xl': !disableDocumentControlBar,
}"
>
<!-- New document dialog --> <!-- New document dialog -->
<newDocumentDialog <newDocumentDialog
@ -37,7 +43,7 @@
</div> </div>
<div> <div class="documentGraphParent">
<q-card <q-card
dark dark
class="documentGraphWrapper" class="documentGraphWrapper"
@ -146,6 +152,7 @@ export default class ProjectScreen extends BaseClass {
const options = this.SGET_options const options = this.SGET_options
this.hideTooltipsProject = options.hideTooltipsProject this.hideTooltipsProject = options.hideTooltipsProject
this.hidePlushes = options.hidePlushes this.hidePlushes = options.hidePlushes
this.disableDocumentControlBar = options.disableDocumentControlBar
} }
/** /**
@ -153,6 +160,11 @@ export default class ProjectScreen extends BaseClass {
*/ */
hidePlushes = false hidePlushes = false
/**
* Determines if the document control bar is show or hidden
*/
disableDocumentControlBar = false
/** /**
* Determines if the project screen help hint should show or not * Determines if the project screen help hint should show or not
*/ */
@ -399,11 +411,11 @@ export default class ProjectScreen extends BaseClass {
} }
.hintWrapper { .hintWrapper {
max-width: 950px; max-width: calc(100% - 110px);
width: 950px;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 15px 20px; padding: 15px 20px;
width: 100%;
background-color: lighten(#d7ac47, 35); background-color: lighten(#d7ac47, 35);
border-radius: 5px; border-radius: 5px;
margin-bottom: 30px; margin-bottom: 30px;
@ -442,12 +454,20 @@ body.body--dark {
} }
} }
.documentGraphWrapper { .documentGraphParent {
min-width: 950px; min-height: 500px;
max-height: 500px;
overflow-x: auto;
overflow-y: hidden;
max-width: calc(100% - 110px);
width: 950px;
}
.documentGraphWrapper {
min-height: 500px; min-height: 500px;
max-height: 500px; max-height: 500px;
max-width: 950px;
overflow: hidden; overflow: hidden;
width: 950px;
} }
.docCountLabel { .docCountLabel {
@ -460,7 +480,7 @@ body.body--dark {
<style scoped lang="scss"> <style scoped lang="scss">
.mainProjectSubTitle { .mainProjectSubTitle {
margin-top: 0; margin-top: 40px;
margin-bottom: 0; margin-bottom: 0;
opacity: 0.8; opacity: 0.8;
} }

1
suggestionList.md
View file

@ -67,3 +67,4 @@
- Better color pasting to documents via context menu - Better color pasting to documents via context menu
- Add printing support - Add printing support
- Add % bar graphs in tree (pinned in #general, idea by popoto) - Add % bar graphs in tree (pinned in #general, idea by popoto)
- Consider linking fields (names) to other documents for auto-updates