Frontend documentation
The Frontend is at https://historiana.eu and in the current iteration it is a VueJS single page application (SPA) using the Vue Router for URL routing and Vuex for state management.
Internals and vision
On the CCS site of things we have removed the dependencies on Foundation and Elements.io and now use Quasar. Within the e-Activity we move away from jQuery. For the backend in some parts ElementIO is used, other parts are prototyped using Vuetify. We need to settle on one specific library. We should re-evaluate the current VueJS UI library scene.
Source tree overview
The Frontend lives in the Gitlab repository at https://gitlab.com/webtic/Historiana.
All of the VueJS code is in the src/ folder of this repo.
This tree still needs cleaning up; some materials are not used anymore and should be removed to clear the clutter.
Main elements are:
| file - folder | description |
|---|---|
| admin/ | Vue components which are solely used in the admin interface |
| App.vue | top level component, all others are childs in this one. |
| assets/ | to be removed? |
| components/ | Most Vue components which are actually a "page" |
| components/generic | remove? |
| config/ | configuration for the Vue Router and ActivityBuilder |
| custom.scss | used in Header.vue; contains new CSS which is not Foundation |
| docs/ | older docs to be repurposed |
| eabuilder/ | all files for the e-activity builder |
| element-variables.scss | settings for ElementIO UI Library |
| historiana.scss | global settings and more (also imports element-ui? css) |
| Historiana.vue | Main header/content/footer layout |
| indexes/ | remove? |
| main.js | main entry point, Vue is started here |
| mixins/ | globally used functionality, more needs to be moved here :) |
| pages/ | User facing pages should be here, currently it is a mix |
| store/ | Vuex definitions and functionality, the core of the App |
| tags/ | globally used Vue components, needs a better name :) |
| tic.js | global Javascript functions |
| views/ | Admin pages, conflicts with admin/ |
Rename and cleanup
Parts of this source tree need a major cleanup. Naming of components/pages/tags need to be better. We should read the style guide and implement accordingly.
Component level documentation
We are implementing the documentation on component level here
Full tree of the current contents
This is a snapshot of the full src/ tree:
├── App.vue
├── App.vue.dist
├── Historiana.vue
├── _settings.scss
├── admin
│ ├── hiCheckbox.vue
│ ├── hiCopyright.vue
│ ├── hiDuration.vue
│ ├── hiStatus.vue
│ ├── hiWhyCheckbox.vue
│ ├── selectCopyright.vue
│ └── selectPartner.vue
├── assets
│ ├── font-awesome
│ │ ├── HELP-US-OUT.txt
│ │ ├── css
│ │ │ ├── font-awesome.css
│ │ │ └── font-awesome.min.css
│ │ ├── fonts
│ │ │ ├── FontAwesome.otf
│ │ │ ├── fontawesome-webfont.eot
│ │ │ ├── fontawesome-webfont.svg
│ │ │ ├── fontawesome-webfont.ttf
│ │ │ ├── fontawesome-webfont.woff
│ │ │ └── fontawesome-webfont.woff2
│ │ ├── less
│ │ │ ├── animated.less
│ │ │ ├── bordered-pulled.less
│ │ │ ├── core.less
│ │ │ ├── fixed-width.less
│ │ │ ├── font-awesome.less
│ │ │ ├── icons.less
│ │ │ ├── larger.less
│ │ │ ├── list.less
│ │ │ ├── mixins.less
│ │ │ ├── path.less
│ │ │ ├── rotated-flipped.less
│ │ │ ├── screen-reader.less
│ │ │ ├── stacked.less
│ │ │ └── variables.less
│ │ └── scss
│ │ ├── _animated.scss
│ │ ├── _bordered-pulled.scss
│ │ ├── _core.scss
│ │ ├── _fixed-width.scss
│ │ ├── _icons.scss
│ │ ├── _larger.scss
│ │ ├── _list.scss
│ │ ├── _mixins.scss
│ │ ├── _path.scss
│ │ ├── _rotated-flipped.scss
│ │ ├── _screen-reader.scss
│ │ ├── _stacked.scss
│ │ ├── _variables.scss
│ │ └── font-awesome.scss
│ ├── logo.png
│ ├── sequencing
│ │ ├── Circles01.png
│ │ ├── Circles01.svg
│ │ ├── bgapp_Circles.svg
│ │ ├── bgapp_Lineair.svg
│ │ ├── bgapp_Timeline.svg
│ │ ├── logo.png
│ │ └── versailles_1430693c.jpg
│ └── sorting
│ ├── Circles01.png
│ ├── Circles01.svg
│ ├── bgapp_Circles.svg
│ ├── bgapp_Lineair.svg
│ ├── bgapp_Timeline.svg
│ ├── logo.png
│ └── versailles_1430693c.jpg
├── components
│ ├── ABPanel.vue
│ ├── Body.vue
│ ├── Builder.vue
│ ├── CountrySelect.vue
│ ├── Footer.vue
│ ├── Header.vue
│ ├── LearningActivities.vue
│ ├── MyActivities.vue
│ ├── MyActivityLog.vue
│ ├── MyHistoriana.vue
│ ├── MyProfile.vue
│ ├── MyResources.vue
│ ├── MyShares.vue
│ ├── MySources.vue
│ ├── MyTags.vue
│ ├── SASEuropeana.vue
│ ├── SASExplore.vue
│ ├── SASExploreSlug.vue
│ ├── SASPartnerView.vue
│ ├── SASPartners.vue
│ ├── SelectSources.vue
│ ├── Upload.vue
│ ├── Welcome.vue
│ ├── generic
│ ├── hiCopyright.vue
│ ├── hiPartnerSelect.vue
│ └── histRedirect.vue
├── config
│ ├── blocktypes.js
│ ├── routes.js
│ └── routes.js.orig
├── custom.scss
├── docs
│ ├── README.md
│ ├── _coverpage.md
│ ├── _media
│ │ ├── 1280px--Fontanellen-_Ephemeral_Art_Construction_in_front_of_Lund_University_Main_Building.jpg
│ │ ├── 800px--Fontanellen-_Ephemeral_Art_Construction_in_front_of_Lund_University_Main_Building.jpg
│ │ ├── Confirm.png
│ │ ├── Gallery.png
│ │ ├── H.svg
│ │ ├── Index-Card.png
│ │ ├── Index-Cards.png
│ │ ├── Logo-H.svg
│ │ ├── background.png
│ │ ├── favicon.ico
│ │ └── icon.svg
│ ├── _sidebar.md
│ ├── components
│ │ ├── confirm.md
│ │ ├── gallery.md
│ │ └── index-cards.md
│ ├── gallery.md
│ ├── guide
│ │ ├── named-routes.md
│ │ └── tags.md
│ ├── index.html
│ ├── projectstructure.md
│ ├── research.md
│ ├── seethisautomatically.md
│ └── testing.md
├── element-variables.scss
├── historiana.scss
├── indexes
│ ├── index.dev.html
│ ├── index.html
│ ├── index.live.html
│ ├── index.local.html
│ └── nobeta-index.html
├── main.js
├── main.js.dist
├── mixins
│ └── clipboard.mixin.js
├── node_modules
├── notes.md
├── package-lock.json
├── pages
│ ├── About.vue
│ ├── BB-analysing.vue
│ ├── BB-analysing.vue.old
│ ├── BB-embed.vue
│ ├── BB-prioritizing.vue
│ ├── BB-question.vue
│ ├── BB-sorting.vue
│ ├── BB-text.vue
│ ├── BlockEditor.vue
│ ├── CaseStudy.vue
│ ├── Experiment.vue
│ ├── HCbySlug.vue
│ ├── HCbySlug.vue.bak
│ ├── HistoricalContent.vue
│ ├── Homepage.vue
│ ├── MediaLibrary.vue
│ ├── ResetPassword.vue
│ ├── Status.vue
│ ├── TeachingLearning.vue
│ ├── TestPage.vue
│ ├── analysing.js
│ ├── analysing.js.1
│ ├── elaRedirect.vue
│ └── elaStudentView.vue
├── plugins
│ └── axios.js
├── store
│ ├── aa.js
│ ├── index.js
│ └── modules
│ ├── admin.js
│ ├── eactivity.js
│ ├── feedback.js
│ └── user.js
├── style
│ └── zurb.css
├── styles.scss
├── tags
│ ├── Actionbar.vue
│ ├── Alert.vue
│ ├── Card.vue
│ ├── Confirm.vue
│ ├── Editable.vue
│ ├── Gallery.vue
│ ├── GenericMemberTags.vue
│ ├── HFilter.vue
│ ├── HFilter.vue.old
│ ├── LanguageSelect.vue
│ ├── MemberTags.vue
│ ├── Modal.vue
│ ├── MyLabel.vue
│ ├── OldGallery.vue
│ └── navBuildingBlock.vue
├── tic.js
└── views
└── admin
├── Admin.vue
├── Collections.vue
├── Dashboard.vue
├── GenericEditor.vue
├── LearningActivityEditor.vue
├── ModEditor.vue
├── ModEditorChapter.vue
├── ModEditorIndex.vue
├── Partners.vue
├── Roles.vue
├── Style.scss
├── Users.vue
└── admin.scss