Skip to content

Commit

Permalink
Merge pull request #277 from leepeuker/improve-movie-log-modal
Browse files Browse the repository at this point in the history 
Improve movie log modal UX
  • Loading branch information
@leepeuker
leepeuker authored Feb 9, 2023
2 parents a77cc9b + f847628 commit c26dd6f
Show file tree
Hide file tree
Showing 6 changed files with 94 additions and 93 deletions.
8 changes: 4 additions & 4 deletions public/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,9 +135,9 @@ function updateLogPlayModalButtonState() {
}

document.getElementById('logPlayModalSearchInput').addEventListener('keypress', loadLogModalSearchResultsOnEnterPress);

function loadLogModalSearchResultsOnEnterPress(event) {
if (event.key === "Enter") {
// 13=enter, works better to check the key code because the key is named differently on mobile
if (event.keyCode === 13) {
searchTmdbWithLogModalSearchInput()
}
}
Expand Down Expand Up @@ -197,9 +197,9 @@ function logMovie(context) {
}

async function showLogPlayModalWithSpecificMovie(tmdbId, movieTitle) {
var myModal = new bootstrap.Modal(document.getElementById('logPlayModal'), {
const myModal = new bootstrap.Modal(document.getElementById('logPlayModal'), {
keyboard: false
})
});

const rating = await fetchRating(tmdbId)
setRatingStars('logPlayModal', rating)
Expand Down
0 ...ent/movie-modal-edit-watch-date.html.twig → ...component/modal-edit-watch-date.html.twig
View file
File renamed without changes.
87 changes: 87 additions & 0 deletions templates/component/modal-log-play.html.twig
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
{% if loggedIn == true %}
<div class="modal fade" id="logPlayModal" tabindex="-1" role="dialog" data-bs-backdrop="static" aria-labelledby="logPlayModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="logPlayModalTitle">Log play</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div id="logPlayModalSearchDiv">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" value="{{ (searchTerm is null) ? '' : searchTerm }}" id="logPlayModalSearchInput">
<button class="btn btn-primary"
type="submit"
onclick="searchTmdbWithLogModalSearchInput()"
id="logPlayModalSearchButton"
disabled>
<i class="bi bi-search"></i>
</button>
</div>


<div class="alert alert-danger d-none" role="alert" id="logPlayModalSearchErrorAlert" style="margin-top: 1rem;margin-bottom: 0">
Something went wrong. Please try again.
</div>
<div class="alert alert-secondary d-none" role="alert" id="logPlayModalSearchNoResultAlert" style="margin-top: 1rem;margin-bottom: 0">
No search results...
</div>
<div class="text-center d-none" style="margin-top: 1rem;margin-bottom: 0" id="logPlayModalSearchSpinner">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<ul class="list-group" id="logPlayModalSearchResultList"></ul>
</div>

<div class="d-none" id="logPlayModalWatchDateDiv">
<input id="logPlayModalTmdbIdInput" hidden>

<div class="input-group" id="watchDateGroup">
<i class="bi bi-calendar-date input-group-text"></i>
<input type="text"
class="datepicker_input form-control"
placeholder="Watch date"
aria-label="Watch date"
name="watchDate"
id="logPlayModalWatchDateInput"
required
onfocusout="validateWatchDate('logPlayModal', this.value)">
<div class="invalid-feedback" id="watchDateValidationRequiredErrorMessage" style="padding-bottom: 0;margin-bottom: 0">
Watch date is required!
</div>
<div class="invalid-feedback" id="watchDateValidationFormatErrorMessage" style="padding-bottom: 0;margin-bottom: 0">
Watch date format is invalid!
</div>
</div>
<div class="fw-light" id="logPlayModalRatingStars"
style="color: rgb(255, 193, 7);
font-size: 1.5rem;
margin-top: 0.5rem;
cursor:pointer;
border-top-right-radius: .375rem!important;
border-bottom-right-radius: .375rem">
<span id="ratingStarsSpan">
{% for i in 1..10 %}
<i class="bi bi-star" data-value="{{ i }}" id="logPlayModalRatingStar{{ i }}" onclick="updateRatingStars('logPlayModal', this)"></i>
{% endfor %}
</span>
</div>
<div class="input-group" style="margin-top: 0.5rem;">
<i class="input-group-text"><i class="bi bi-chat-square-text"></i></i>
<textarea class="form-control" rows="1" aria-label="Comment" id="logPlayModalCommentInput" placeholder="Comment"></textarea>
</div>
</div>

<div class="alert alert-danger d-none" role="alert" id="logPlayModalLogErrorAlert" style="margin-top: 1rem;margin-bottom: 0">
Could not log play. Please try again.
</div>
</div>
<div class="modal-footer d-none" id="logPlayModalFooter">
<button type="submit" class="btn btn-secondary" onclick="backToLogModalSearchResults()">Back</button>
<button type="submit" class="btn btn-primary" onclick="logMovie('logPlayModal')">Log play</button>
</div>
</div>
</div>
</div>
{% endif %}
0 ...ates/component/movie-modal-more.html.twig → ...es/component/modal-more-options.html.twig
View file
File renamed without changes.
88 changes: 1 addition & 87 deletions templates/component/navbar.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,90 +53,4 @@
</div>
</nav>

{% if loggedIn == true %}
<div class="modal fade" id="logPlayModal" tabindex="-1" role="dialog" aria-labelledby="logPlayModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="logPlayModalTitle">Log play</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div id="logPlayModalSearchDiv">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" value="{{ (searchTerm is null) ? '' : searchTerm }}" id="logPlayModalSearchInput">
<button class="btn btn-primary"
type="submit"
onclick="searchTmdbWithLogModalSearchInput()"
id="logPlayModalSearchButton"
disabled>
<i class="bi bi-search"></i>
</button>
</div>


<div class="alert alert-danger d-none" role="alert" id="logPlayModalSearchErrorAlert" style="margin-top: 1rem;margin-bottom: 0">
Something went wrong. Please try again.
</div>
<div class="alert alert-secondary d-none" role="alert" id="logPlayModalSearchNoResultAlert" style="margin-top: 1rem;margin-bottom: 0">
No search results...
</div>
<div class="text-center d-none" style="margin-top: 1rem;margin-bottom: 0" id="logPlayModalSearchSpinner">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<ul class="list-group" id="logPlayModalSearchResultList"></ul>
</div>

<div class="d-none" id="logPlayModalWatchDateDiv">
<input id="logPlayModalTmdbIdInput" hidden>

<div class="input-group" id="watchDateGroup">
<i class="bi bi-calendar-date input-group-text"></i>
<input type="text"
class="datepicker_input form-control"
placeholder="Watch date"
aria-label="Watch date"
name="watchDate"
id="logPlayModalWatchDateInput"
required
onfocusout="validateWatchDate('logPlayModal', this.value)">
<div class="invalid-feedback" id="watchDateValidationRequiredErrorMessage" style="padding-bottom: 0;margin-bottom: 0">
Watch date is required!
</div>
<div class="invalid-feedback" id="watchDateValidationFormatErrorMessage" style="padding-bottom: 0;margin-bottom: 0">
Watch date format is invalid!
</div>
</div>
<div class="fw-light" id="logPlayModalRatingStars"
style="color: rgb(255, 193, 7);
font-size: 1.5rem;
margin-top: 0.5rem;
cursor:pointer;
border-top-right-radius: .375rem!important;
border-bottom-right-radius: .375rem">
<span id="ratingStarsSpan">
{% for i in 1..10 %}
<i class="bi bi-star" data-value="{{ i }}" id="logPlayModalRatingStar{{ i }}" onclick="updateRatingStars('logPlayModal', this)"></i>
{% endfor %}
</span>
</div>
<div class="input-group" style="margin-top: 0.5rem;">
<i class="input-group-text"><i class="bi bi-chat-square-text"></i></i>
<textarea class="form-control" rows="1" aria-label="Comment" id="logPlayModalCommentInput" placeholder="Comment"></textarea>
</div>
</div>

<div class="alert alert-danger d-none" role="alert" id="logPlayModalLogErrorAlert" style="margin-top: 1rem;margin-bottom: 0">
Could not log play. Please try again.
</div>
</div>
<div class="modal-footer d-none" id="logPlayModalFooter">
<button type="submit" class="btn btn-secondary" onclick="backToLogModalSearchResults()">Back</button>
<button type="submit" class="btn btn-primary" onclick="logMovie('logPlayModal')">Log play</button>
</div>
</div>
</div>
</div>
{% endif %}
{{ include('component/modal-log-play.html.twig') }}
4 changes: 2 additions & 2 deletions templates/page/movie.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,8 +151,8 @@
</div>
</div>

{{ include('component/movie-modal-more.html.twig') }}
{{ include('component/movie-modal-edit-watch-date.html.twig') }}
{{ include('component/modal-edit-watch-date.html.twig') }}
{{ include('component/modal-more-options.html.twig') }}
{% endif %}

{# --- Tagline --- #}
Expand Down

0 comments on commit c26dd6f

Please sign in to comment.