Skip to content

Support form-floating from Bootstrap 5 #891

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Support form-floating from Bootstrap 5 #891

wants to merge 1 commit into from

Conversation

cedk
Copy link

@cedk cedk commented Feb 24, 2025

Closes #579

@Splines
Copy link

Splines commented Feb 27, 2025 •
edited
Loading

Nice, thanks! Might want to specify in the docs how to use it, e.g.

  • wrap select element in div with class form-floating
  • add class form-control to the select element.
  • Then, after the select element, add a label.
  • Also link to Bootstrap examples.

Furthermore, with your CSS, I get this behavior, i.e. there is not enough vertical space for the label.
image

This is because your padding-top in padding-bottom is overwritten by the TomSelect Bootstrap style .ts-wrapper.multi.has-items .ts-control.

However, adding form-select instead of form-control to the select element works like a charm and looks so nice ✨

form-floating-tom-select

Splines added a commit to MaMpf-HD/mampf that referenced this pull request Feb 27, 2025
@Splines
Use Tom Select for info slide selection & add form-floating
2638982 
Also see orchidjs/tom-select#891
Splines added a commit to MaMpf-HD/mampf that referenced this pull request Apr 21, 2025
@f-buerckel @Splines
Implement Vignettes (#737)
7bd465c 
* Merge vignette answer migrations together

* Init card design for slides

* Style "Next slide" button & add slide shadow

* Render info slides as modals

* Only show info slide section if there is any

* Redesign text area & add validation

* Check validations on form submit

* Move answer section to card footer & restyle submit button

* Use object-oriented model for slide statistics

* Remove console errors

* Early return if not text question

* Add design for likert scale

* Swap main content and additional information

* Fix alignment of additional information on small screens

* Improve accessibility for open info slide & submit button

* Make likert scale input required

* Redesign multiple choice questions

* Fix indentation of ERB syntax

* Init UI support for sortable slides

* Add TODO where slide was not moved at all

* Edit slide view: get basic dynamic loading of edit form to work

* Render slide edit form dynamically into accordion

* Remove unnecessary console logs

* Redesign add new slide button

* Add option to add new slide (at least to display the new slide creation form)

* Design text field (for edit slide)

* Start rewriting question types logic

* Redesign question type selection & use Bootstrap collapse

* Let backend populate select field & handle question field state

* Make question field state update more explicit

* Start simplifying multiple choice options view

* Reimplement adding new multiple choice option

* Implement removing a multiple choice option

* Make sure remove button also works for dynamically added items

* Pin Tom Select & use bootstrap 5 CSS styles

* Use Tom Select for info slide selection & add form-floating

Also see orchidjs/tom-select#891

* Disable sortable dragging on accordion body

* Remove unused ghost class on sortable

* Use tom select for question type selection

* Don't prevent mouse clicks for filtered sortable items

* Improve accordion slide opening (spinner & flickering)

* Ignore shown.bs.collapse for multiple choice options

* Improve rendering of loading spinner

* Add hint for dragging slides

* Fix redundant line continuation

* make questionnnaires part of course

Signed-off-by: Florian <florianbuerckel@gmail.com>

* fix docker compose command in just docker-reseed

* add locking mechanism to vignettes

Signed-off-by: Florian <florianbuerckel@gmail.com>

* Make questionnaire part of lecture

* make vignettes accessible from lecture

* reworked routes to not use vignettes prefix

* Add authentication for vignette controller actions

* fix bug where vignette answer not stored correctly

add csv handler for vignettes

* Remove unreachable code for questionnaire function

* fix rubocop warnings

* Add update slide function for questionnaire

* Remove unused routes and views

* Add delete button for questionnaire and slides

* Use a floating form for create new vignette title

* Use modal-footer & respect MaMpf "Cancel vs. Submit" button ordering

* Only show "drag slides" tip if there are at least 2 slides

* Remove "New Slide" title

* Don't show spinner when creating a new slide

* Add backend validations for actions after publish

* Prevent error for non existent questionnaire

* make slides not sortable when published

* Add duplicate action for questionnaire

* use update instead of update_column

* Add unsaved changes warning to questionnaire

* add preview image for video in trix editor

* add preview for questionnaire and fix bug with unsaved changes modal

* Fix rubocop mistakes

* Make vignettes only accessible to vignette courses

* fix RuboCop and ESLint errors

* validate user input

* fix content not duplicated

* detect changes of new slide and validate input in editor

* display unsaved changes when current item is closed

* fix bug with invisible multiple choice fields

* Add first time access time to slide_statistics

* Add icon selection to info slides

* Use svgs as icons, center icons in take view, remove attachment caption from images

* add already answered vignette message

* Add number field question

* backend validation of empty multiple choice option

* Redesign managing of vignettes in lecture page

* Add padding to bottom of button as well

* Fix browser navigation on lecture edit page

* Don't add empty list if no vignettes available

* Conform with turbolinks when pushing history state

* Use actionable list group items in "manage vignettes" view

* Include vignette key for stale lecture check

* Put focus on vignette title when creating a new vignette

* Redesign new info slide button (no functionality yet)

* Fix wrong vignette key in lecture caching

* Group buttons of vignette edit view at top

* Touch lecture upon questionnaire creation to force cache invalidation

* prevent site leaving with unsaved changes

* remove position from take action of questionnaire

* Route back to vignette anchor tag & i18n create & delete vignette

* fix preview with no slide bug

* decrease indentation level with early return

* make naming consistent.
For users: questionnaire and for editors: vignette

* remove icon upload for info slides

* add unpublish functionality

* add max length for questions

* Bring info slide closer to other slides (not working yet)

* Discern info slide and slide during edit action & handle unsaved changes

* Always collapse accordions after discarding changes

* Fix wrong accordion parent id

* Fix text max length property call

* Temporarily fix invalid field access (TODO Florian)

* Fix wrong default value of editable in schema

* Outsource site leaving popup to own function

* Fix multiple slides opening

* Add back & fix pending action upon accordion opening

* Bring back check to not deal with unsaved changes when question type is changed

* Fix `contains` vs. `includes` in JS

* Restyle title of info slide in edit view & fix bootstrap floating label

* Redesign icon selection of info slide

* Remove unnecessary empty inputs

* Improve duplicate questionnaire modal

* remove content types

* add total slide time
and fix of duplication of info slides

* Add back button to vignette edit page

* Simplify back button

* Use flex wrap on action items

* Add progress bar in user slide view

* Don't show "drag slides to change order" tip when slide is not editable

* Make info slide icons smaller & take out `data-info-slide-index`

* Use administration layout for questionnaire edit view

* add delete button for info slides

* display info slide id

* prevent changing of info slide associations when published

* remove debug code

* synchronize date of vignettes migrations

* add total_time_on_slide to create migration

* add german translations

* more german translations

* setup active storage for production

* add fix for serialize currentState

* Add german translations

* design questionnaire index view

* use language of lecture in index

* Improve back button flow & add bottom space on edit page

* Show question type of slide in accordion header

* Translate slide & info slide to German

* Fix too early form serialization for change detection

* Replace 'Unknown slide' by 'No question' slide

* Translate more fields to German

* Replace "Sie" by "Du" in German & fix remove duplicate keys

* Reposition unsaved changes dialog to be more unobtrusive

* Rename "export_answers" to "export_statistics"

* Add lock icon & info text to uneditable vignettes

* Fix grammar

* Add missing vignettes lecture translations

* Report form validity also for preview

* prevent adding mc options to non editable slide

* change active storage location

* Validate multiple choice answers in user view (require at least one selected)

* Localize multiple choice validation message & fix annoying turbolinks

* Automatically jump to #vignettes when opening vignette lecture

* Show warning message for navigating away via our back button when having unsaved changes

* Remove vignettes from lecture sidebar

* Include commit hash as note should one want to restore vignettes in the sidebar

* Redirect directly to questionnaires view & slightly redesign it

* Rename CSS file

* Add button to edit questionnaire

* Trigger new mampf-experimental build

* Trigger new mampf-experimental build again

* add libvips to prod Dockerfile

* Trigger mampf-experimental build after fixing migrations

* add ability for bold and italics in question text

* Add title to slide and language selection for likert-scale

* fix naming of likert scale in csv

* Allow question text for no question type

* remove x_sendfile_header temporarily

Signed-off-by: Florian <florianbuerckel@gmail.com>

* make language dropdown reflect actual model language

* Try to deactivate X-Accel-Redirect send file header only for active storage

* Properly construct the path to the vignettes folder

* Don't redirect to error messages for rails paths

* Fix req path calling

* Restore routes /rails/active_storage interception

* Remove wrong "/" in nginx config

* Delete active storage fix & hardcode vignettes storage again

* Allow nginx to access media folder for vignettes

* prevent navigating back while taking vignette
internationalize vignette take view

* use ";" as csv column seperator

* add navbar to vignettes

* remove empty tests for vignettes

* add slide title and remove question text from csv

* trigger unsaved changes on image upload

* add styling to disabled navbar tabs

* add pen icon to answer label

* decrease margin of alerts

* only display reste media for vignettes

* add codenames to vignettes

* use user language for index vignette view

* require codename for take action

* add media icon to info slides

* change likert labels

* adjust icons

* fix typo

* sort questionnaires alphanumerical

* add invite link to vignette lectures

* Add completion message to vignette lecture

* add unsaved changes to completion text

* center organizational div for vignette lectures

* remove unused helper

* move invite link to info view

* remove user from statistics

* change title style of completion message

* always display delete button

* force rebuild cache and authorize completion_message

* internationalize codename validation messages

* delete empty spec files

* delete more empty spec files

* delete empty helper

* Improve personal code UI

* Break lines in language files

* Remove duplicate keys in Gemfile.lock

* Improve ARIA for vignette navbar

* Fix organizational spacing in header & at bottom

* Add line break to language files

* Improve "clickability" of "take/continue questionnaire" button

* Remove badges that count questionnaires

I removed them since these badges are usually used when there are a lot
of elements. The number of questionnaires is probably rather limited
and will unlikely surpass 10 in total. Therefore, I remove these badges
to ease quick visual parsing of the page with the eye without being
distracted by the very prominent and contrasty-color badges.

* Rename vignette-related migrations

This is to reflect a more present date and to number their
order of execution.

* Update schema version to latest migration

* update erd diagram and delete outdated media svg

Signed-off-by: Florian <florianbuerckel@gmail.com>

* Remove console logs

* Remove duplicate Vignettes::TextQuestion key

* Add user to ERD diagram

* Add missing NumberQuestion and NumberAnswer to ERD diagram

* Remove extra quotation mark

---------

Signed-off-by: Florian <florianbuerckel@gmail.com>
Co-authored-by: Splines <info@splines.me>
@ericscales
Copy link

Any chance we could get this one merged? I'm happy to sign up as a maintainer to poke through the pull requests and merge if that helps.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

It doesnt work with floating inputs
3 participants
@cedk @Splines @ericscales