mirror of
https://github.com/Elvanos/fantasia-archive.git
synced 2024-06-17 01:34:53 +12:00
0.1.5 - first iterration of responsive display added
This commit is contained in:
Elvanos
parent
4e8e2cabfc
commit
4042f709c1
12
README.md
12
README.md
|
|
@ -1,4 +1,4 @@
|
|||
# Fantasia archive (fantasiaarchive)
|
||||
# Fantasia Archive (fantasiaarchive)
|
||||
|
||||
A database manager for world building
|
||||
|
||||
|
|
@ -23,14 +23,16 @@ npm install
|
|||
|
||||
** 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.
|
||||
- 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`
|
||||
- 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
|
||||
|
||||
- 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`
|
||||
- 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.)
|
||||
|
||||
If you don't know what's going on, skip this step.
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
"name": "fantasiaarchive",
|
||||
"version": "0.1.5",
|
||||
"description": "A database manager for world building",
|
||||
"productName": "Fantasia archive",
|
||||
"productName": "Fantasia Archive",
|
||||
"author": "Elvanos <elvanos66@gmail.com>",
|
||||
"license": "GNU GENERAL PUBLIC LICENSE",
|
||||
"private": true,
|
||||
|
|
@ -81,4 +81,4 @@
|
|||
"npm": ">= 6.13.4",
|
||||
"yarn": ">= 1.21.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -149,8 +149,8 @@ module.exports = configure(function (ctx) {
|
|||
workboxPluginMode: "GenerateSW", // 'GenerateSW' or 'InjectManifest'
|
||||
workboxOptions: {}, // only for GenerateSW
|
||||
manifest: {
|
||||
name: "Fantasia archive",
|
||||
short_name: "Fantasia archive",
|
||||
name: "Fantasia Archive",
|
||||
short_name: "Fantasia Archive",
|
||||
description: "A database manager for world building",
|
||||
display: "standalone",
|
||||
orientation: "portrait",
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4 optionWrapper">
|
||||
<div class="col-12 col-md-6 col-lg-4 optionWrapper">
|
||||
<div class="optionTitle">
|
||||
Dark mode
|
||||
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4 optionWrapper">
|
||||
<div class="col-12 col-md-6 col-lg-4 optionWrapper">
|
||||
<div class="optionTitle">
|
||||
Accessibility - Text shadow
|
||||
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
|
||||
|
|
@ -102,7 +102,7 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-4 optionWrapper">
|
||||
<div class="col-12 col-md-6 col-lg-4 optionWrapper">
|
||||
<div class="optionTitle">
|
||||
Accessibility - Pronounced count divider
|
||||
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
|
||||
|
|
@ -117,7 +117,7 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-4 optionWrapper">
|
||||
<div class="col-12 col-md-6 col-lg-4 optionWrapper">
|
||||
<div class="optionTitle">
|
||||
Accessibility - Hide strike-through
|
||||
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
|
||||
|
|
@ -138,7 +138,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4 optionWrapper">
|
||||
<div class="col-12 col-md-6 col-lg-4 optionWrapper">
|
||||
<div class="optionTitle">
|
||||
Hide Welcome screen social links
|
||||
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
|
||||
|
|
@ -153,7 +153,7 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-4 optionWrapper">
|
||||
<div class="col-12 col-md-6 col-lg-4 optionWrapper">
|
||||
<div class="optionTitle">
|
||||
Hide tips popup on start screen
|
||||
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
|
||||
|
|
@ -168,7 +168,7 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-4 optionWrapper">
|
||||
<div class="col-12 col-md-6 col-lg-4 optionWrapper">
|
||||
<div class="optionTitle">
|
||||
Hide tips on project screen
|
||||
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
|
||||
|
|
@ -183,7 +183,7 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-4 optionWrapper">
|
||||
<div class="col-12 col-md-6 col-lg-4 optionWrapper">
|
||||
<div class="optionTitle">
|
||||
Hide Fantasia mascot
|
||||
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
|
||||
|
|
@ -224,7 +224,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4 optionWrapper">
|
||||
<div class="col-12 col-md-6 col-lg-4 optionWrapper">
|
||||
<div class="optionTitle">
|
||||
Disable document control bar
|
||||
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
|
||||
|
|
@ -241,7 +241,7 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-4 optionWrapper">
|
||||
<div class="col-12 col-md-6 col-lg-4 optionWrapper">
|
||||
<div class="optionTitle">
|
||||
Disable document guides
|
||||
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
|
||||
|
|
@ -262,7 +262,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4 optionWrapper">
|
||||
<div class="col-12 col-md-6 col-lg-4 optionWrapper">
|
||||
<div class="optionTitle">
|
||||
Disable document tooltips
|
||||
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
|
||||
|
|
@ -277,7 +277,7 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-4 optionWrapper">
|
||||
<div class="col-12 col-md-6 col-lg-4 optionWrapper">
|
||||
<div class="optionTitle">
|
||||
Hide empty fields
|
||||
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
|
||||
|
|
@ -294,7 +294,7 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-4 optionWrapper">
|
||||
<div class="col-12 col-md-6 col-lg-4 optionWrapper">
|
||||
<div class="optionTitle">
|
||||
Prevent auto-scrolling
|
||||
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
|
||||
|
|
@ -333,7 +333,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4 optionWrapper">
|
||||
<div class="col-12 col-md-6 col-lg-4 optionWrapper">
|
||||
<div class="optionTitle">
|
||||
Close quick popups with same key
|
||||
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
|
||||
|
|
@ -354,7 +354,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4 optionWrapper">
|
||||
<div class="col-12 col-md-6 col-lg-4 optionWrapper">
|
||||
<div class="optionTitle">
|
||||
Stop quick-search close after selection
|
||||
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
|
||||
|
|
@ -371,7 +371,7 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-4 optionWrapper">
|
||||
<div class="col-12 col-md-6 col-lg-4 optionWrapper">
|
||||
<div class="optionTitle">
|
||||
Don't precheck category filter
|
||||
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
|
||||
|
|
@ -412,7 +412,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4 optionWrapper">
|
||||
<div class="col-12 col-md-6 col-lg-4 optionWrapper">
|
||||
<div class="optionTitle">
|
||||
Hide tags in tree
|
||||
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
|
||||
|
|
@ -427,7 +427,7 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-4 optionWrapper">
|
||||
<div class="col-12 col-md-6 col-lg-4 optionWrapper">
|
||||
<div class="optionTitle">
|
||||
Top tags in tree
|
||||
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
|
||||
|
|
@ -442,7 +442,7 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-4 optionWrapper">
|
||||
<div class="col-12 col-md-6 col-lg-4 optionWrapper">
|
||||
<div class="optionTitle">
|
||||
Compact tags
|
||||
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
|
||||
|
|
@ -463,7 +463,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4 optionWrapper">
|
||||
<div class="col-12 col-md-6 col-lg-4 optionWrapper">
|
||||
<div class="optionTitle">
|
||||
Stop sublevel collapse in tree
|
||||
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
|
||||
|
|
@ -478,7 +478,7 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-4 optionWrapper">
|
||||
<div class="col-12 col-md-6 col-lg-4 optionWrapper">
|
||||
<div class="optionTitle">
|
||||
Hide project name in tree
|
||||
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
|
||||
|
|
@ -493,7 +493,7 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-4 optionWrapper">
|
||||
<div class="col-12 col-md-6 col-lg-4 optionWrapper">
|
||||
<div class="optionTitle">
|
||||
Invert tree custom order sorting
|
||||
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
|
||||
|
|
@ -516,7 +516,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4 optionWrapper">
|
||||
<div class="col-12 col-md-6 col-lg-4 optionWrapper">
|
||||
<div class="optionTitle">
|
||||
Hide document count entirely
|
||||
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
|
||||
|
|
@ -531,7 +531,7 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-4 optionWrapper">
|
||||
<div class="col-12 col-md-6 col-lg-4 optionWrapper">
|
||||
<div class="optionTitle">
|
||||
Hide category count
|
||||
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
|
||||
|
|
@ -546,7 +546,7 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-4 optionWrapper">
|
||||
<div class="col-12 col-md-6 col-lg-4 optionWrapper">
|
||||
<div class="optionTitle">
|
||||
Invert category position
|
||||
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
|
||||
|
|
@ -561,12 +561,12 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-4 optionWrapper">
|
||||
<div class="col-12 col-md-6 col-lg-4 optionWrapper">
|
||||
<div class="optionTitle">
|
||||
Hide order numbers
|
||||
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
|
||||
<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-icon>
|
||||
</div>
|
||||
|
|
@ -582,7 +582,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-4 optionWrapper">
|
||||
<div class="col-12 col-md-6 col-lg-4 optionWrapper">
|
||||
<div class="optionTitle">
|
||||
Hide extra icons
|
||||
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
|
||||
|
|
@ -599,7 +599,7 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-4 optionWrapper">
|
||||
<div class="col-12 col-md-6 col-lg-4 optionWrapper">
|
||||
<div class="optionTitle">
|
||||
Hide "Add under" icon
|
||||
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
|
||||
|
|
@ -614,7 +614,7 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-4 optionWrapper">
|
||||
<div class="col-12 col-md-6 col-lg-4 optionWrapper">
|
||||
<div class="optionTitle">
|
||||
Hide "Edit" icon
|
||||
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
|
||||
|
|
@ -629,7 +629,7 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-4 optionWrapper">
|
||||
<div class="col-12 col-md-6 col-lg-4 optionWrapper">
|
||||
<div class="optionTitle">
|
||||
Hide "Open" icon
|
||||
<q-icon name="mdi-help-circle" size="16px" class="q-ml-md">
|
||||
|
|
@ -1265,10 +1265,10 @@ body.body--dark {
|
|||
margin-top: 16px;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: calc(100% - 45px);
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -108,11 +108,16 @@
|
|||
</div>
|
||||
|
||||
<div
|
||||
:class="`col-${field.sizing} q-mb-md`"
|
||||
v-for="field in bluePrintData.extraFields"
|
||||
:key="`${field.id}`"
|
||||
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
|
||||
class="inputWrapper break"
|
||||
|
|
@ -812,6 +817,40 @@ export default class PageDocumentDisplay extends BaseClass {
|
|||
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
|
||||
/****************************************************************/
|
||||
|
|
@ -841,7 +880,7 @@ export default class PageDocumentDisplay extends BaseClass {
|
|||
}
|
||||
|
||||
/****************************************************************/
|
||||
// `DOCUMENT COPY
|
||||
// DOCUMENT COPY
|
||||
/****************************************************************/
|
||||
documentPass = null as unknown as I_OpenedDocument
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
<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 -->
|
||||
<newDocumentDialog
|
||||
|
|
@ -37,7 +43,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="documentGraphParent">
|
||||
<q-card
|
||||
dark
|
||||
class="documentGraphWrapper"
|
||||
|
|
@ -146,6 +152,7 @@ export default class ProjectScreen extends BaseClass {
|
|||
const options = this.SGET_options
|
||||
this.hideTooltipsProject = options.hideTooltipsProject
|
||||
this.hidePlushes = options.hidePlushes
|
||||
this.disableDocumentControlBar = options.disableDocumentControlBar
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -153,6 +160,11 @@ export default class ProjectScreen extends BaseClass {
|
|||
*/
|
||||
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
|
||||
*/
|
||||
|
|
@ -399,11 +411,11 @@ export default class ProjectScreen extends BaseClass {
|
|||
}
|
||||
|
||||
.hintWrapper {
|
||||
max-width: 950px;
|
||||
max-width: calc(100% - 110px);
|
||||
width: 950px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px 20px;
|
||||
width: 100%;
|
||||
background-color: lighten(#d7ac47, 35);
|
||||
border-radius: 5px;
|
||||
margin-bottom: 30px;
|
||||
|
|
@ -442,12 +454,20 @@ body.body--dark {
|
|||
}
|
||||
}
|
||||
|
||||
.documentGraphWrapper {
|
||||
min-width: 950px;
|
||||
.documentGraphParent {
|
||||
min-height: 500px;
|
||||
max-height: 500px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
max-width: calc(100% - 110px);
|
||||
width: 950px;
|
||||
}
|
||||
|
||||
.documentGraphWrapper {
|
||||
min-height: 500px;
|
||||
max-height: 500px;
|
||||
max-width: 950px;
|
||||
overflow: hidden;
|
||||
width: 950px;
|
||||
}
|
||||
|
||||
.docCountLabel {
|
||||
|
|
@ -460,7 +480,7 @@ body.body--dark {
|
|||
<style scoped lang="scss">
|
||||
|
||||
.mainProjectSubTitle {
|
||||
margin-top: 0;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 0;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -67,3 +67,4 @@
|
|||
- Better color pasting to documents via context menu
|
||||
- Add printing support
|
||||
- Add % bar graphs in tree (pinned in #general, idea by popoto)
|
||||
- Consider linking fields (names) to other documents for auto-updates
|
||||
|
|
|
|||
Loading…
Reference in a new issue