One of my internship projects.
A work in progress.
Live demo: https://itsm-carbon-footprint-dashboard.teddysc.me/
- Vue Router for instant jumping between pages
- Edit button to allow editing of texts on the pages
Built upon Anima App exported code from Zhao, Billie's Figma design.
Code export option: Vue.js with SASS.
As of Oct 2022, Anima does not support Vue 3 / Vite, the original exported code was using Vue 2 with Vue CLI.
I tried to migrate the Vue 3 but it didn't work, so I'm kind of stuck with the Vue 2 stack for now. The Vue 3 setup is on branch vite.
See also changelog
How it works:
This button toggles the value of the contentEditable attribute to all elements matching "*:not(:has(*))" (all nodes that only contain text nodes).
Try it in Vue SFC Playground.
Why not convert the elements to <input> elements?
This will break the layout of these elements.
That's because vue-cli-service serve won't route non-index.html paths to index.html, so I had to put a hash sign in the URL to work around that restriction when developing locally.
I created the vite branch in an attempt to migrate to Vue 3 with Vite following this guide.
If you know why it doesn't work, please let me know. :)
npm install
npm run start
Build /dist first:
npm run build
Then deploy /dist to your web server.
See CHANGELOG.md.
Zhao, Billie @ SAP For Mefor designing the website with Figma