Survey refactor expansion UI changes #933
Conversation
main.diary.css - Increased the left and right padding for .notes-list by 10px - Removed the place-items: center as it was overriding the left alignment - Added a new style called notes-list-label which aligns the text to the left place_list_item.html - Removed the in-element styling for diary cards because this is now handled with the css notes_list.html - The notes-list-label class is not being used by the notes-list label field to left align it
enketo-notes-list.js - Added $ionicPopup - Added a new confirmDeleteEntry which first confirms you wish to delete, then calls the deleteEntry function delete-entry.html - Contains the template for the confirm delete popup notes_list.html - changed the trash can button to call confirmDeleteEntry() instead of going directly to deleteEntry()
|
@shankari does this PR look correct? |
|
At least it is to the right branch?! |
| @@ -494,19 +494,22 @@ enketo-notes-list, .notes-list { | |||
| } | |||
|
|
|||
| .notes-list { | |||
| padding: 0 5px 5px 5px; | |||
| padding: 0 15px 5px 15px; | |||
There was a problem hiding this comment.
To me, this puts the trash can a little too far in. How about 15 on the left and 10 on the right?
| padding: 0 15px 5px 15px; | |
| padding: 0 10px 5px 15px; |
Here's what that looks like
Since we will left-align the label, we must remove the horizontal justification, but we still want to keep the vertical alignment in notes-list-entry. To do this, we'll use align-items instead of place-items (place-items is shorthand for both justify-items and align-items) Also, no need to create a whole new class for this. Let's just select the <b> inside of `.notes-list-entry` and add a helpful comment so we know what it refers to
|
Real quick, I just patched up the CSS so that the vertical alignment was retained Left the pop-up as-is since it looks great. We will want to internationalize the text though. |
| @@ -4,7 +4,7 @@ | |||
| <!-- Start Time Tag --> | |||
| <!-- <div class="start-time-tag">{{trip.display_end_time}}</div> --> | |||
| <div class="diary-card short" style="padding-top: 10px;"> | |||
| <div style="width: 100%; margin: auto; padding: 5px"> | |||
There was a problem hiding this comment.
Why was this padding removed?
We can do without it - but if we do remove it, then we have to update the card height values in infinite_scroll_list.js > getTripHeight()
There was a problem hiding this comment.
Reverting. @sebastianbarry please address @JGreenlee's related comment on Monday
|
I am going to revert the padding change and merge tonight. @sebastianbarry you need to create a follow-on change that:
|
| @@ -4,7 +4,7 @@ | |||
| <!-- Start Time Tag --> | |||
| <!-- <div class="start-time-tag">{{trip.display_end_time}}</div> --> | |||
| <div class="diary-card short" style="padding-top: 10px;"> | |||
| <div style="width: 100%; margin: auto; padding: 5px"> | |||
There was a problem hiding this comment.
Reverting. @sebastianbarry please address @JGreenlee's related comment on Monday
I previously had this PR pointed to
places-surveybranch (sebastianbarry#7) but after a short discussion with Shankari I am redoing this PR forsurvey_refactor_expansionbranch:Testing:
Part 1: Left justify entry labels
Part 2: Confirm delete entry popup
https://user-images.githubusercontent.com/61334340/226062221-34999dea-69f1-422f-af9d-5e48ccb71265.mov