fix: better modal UI
This commit is contained in:
Jannat Patel
@@ -1,32 +1,42 @@
|
||||
<div class="modal fade no-preview-modal" id="no-preview-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal fade no-preview-modal" id="no-preview-modal" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
|
||||
<div class="modal-header">
|
||||
<div class="font-weight-bold">{{ _("Not available for preview") }}</div>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<div class="modal-title">{{ _("Not Available for Preview") }}</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
{% if is_user_interested %}
|
||||
<div class=""> {{ _("You have opted to be notified for this course. You will receive an email when the course becomes available.") }} </div>
|
||||
<div class="">
|
||||
{{ _("You have opted to be notified for this course. You will receive an email when the course becomes available.") }}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class=""> {{ _("This lesson is not available for preview. Please join the course to access it.") }} </div>
|
||||
<div class="">
|
||||
{{ _("This lesson is not available for preview. Please join the course to access it.") }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if not is_user_interested %}
|
||||
<div class="modal-footer">
|
||||
|
||||
<button class="btn btn-secondary btn-sm pull-right mr-2" data-dismiss="modal" aria-label="Close">
|
||||
{{ _("Discard") }}
|
||||
</button>
|
||||
|
||||
{% if course.upcoming %}
|
||||
<div class="button is-primary notify-me" data-course="{{course.name | urlencode}}">
|
||||
<button class="btn btn-primary btn-sm notify-me pull-right" data-course="{{course.name | urlencode}}">
|
||||
{{ _("Notify me when available") }}
|
||||
</div>
|
||||
</button>
|
||||
{% else %}
|
||||
<div class="button is-primary join-batch" data-course="{{ course.name | urlencode}}">
|
||||
{{ _("Start Learning") }}</div>
|
||||
<button class="btn btn-primary btn-sm join-batch pull-right" data-course="{{ course.name | urlencode}}">
|
||||
{{ _("Start Learning") }}
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -120,10 +120,7 @@
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<div class="font-weight-bold">{{ _("Write a review") }}</div>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<div class="modal-title">{{ _("Write a Review") }}</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -154,8 +151,7 @@
|
||||
<div class="control-input-wrapper">
|
||||
<div class="control-input">
|
||||
<textarea type="text" autocomplete="off" class="input-with-feedback form-control review-field"
|
||||
data-fieldtype="Text" data-fieldname="feedback_comments" placeholder="" style="height: 300px;"
|
||||
spellcheck="false"></textarea>
|
||||
data-fieldtype="Text" data-fieldname="feedback_comments" spellcheck="false"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -165,9 +161,13 @@
|
||||
|
||||
|
||||
<div class="modal-footer">
|
||||
<div class="button submit-review is-primary" data-course="{{ course.name | urlencode}}" id="submit-review">
|
||||
<button class="btn btn-secondary btn-sm mr-2" data-dismiss="modal" aria-label="Close">
|
||||
{{ _("Discard") }}
|
||||
</button>
|
||||
|
||||
<button class="btn btn-primary btn-sm" data-course="{{ course.name | urlencode}}" id="submit-review">
|
||||
{{ _("Submit") }}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -238,10 +238,6 @@ input[type=checkbox] {
|
||||
color: var(--gray-700);
|
||||
}
|
||||
|
||||
.submit-review {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.custom-checkbox>label>input {
|
||||
visibility: hidden;
|
||||
}
|
||||
@@ -1744,3 +1740,37 @@ li {
|
||||
border-radius: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 1.5rem 1.5rem 0 !important;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 0 1.5rem !important;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 0.75rem 1.5rem !important;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
font-size: var(--text-base) !important;
|
||||
}
|
||||
|
||||
.modal-header, .modal-body {
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border-top: none !important;
|
||||
background-color: var(--gray-200) !important;
|
||||
justify-content: flex-end !important;
|
||||
}
|
||||
|
||||
.modal-header .modal-title {
|
||||
color: var(--gray-900);
|
||||
}
|
||||
|
||||
@@ -381,10 +381,7 @@
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<div class="font-weight-bold">{{ _("Pick a Slot") }}</div>
|
||||
<button type="button" class="close close-slot-modal" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<div class="modal-title">{{ _("Pick a Slot") }}</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="slot-form">
|
||||
@@ -414,8 +411,13 @@
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="button is-primary" data-course="{{ course.name | urlencode}}" id="submit-slot">
|
||||
{{ _("Submit") }}</div>
|
||||
<button class="btn btn-secondary btn-sm pull-right mr-2 close-slot-modal" data-dismiss="modal" aria-label="Close">
|
||||
{{ _("Discard") }}
|
||||
</button>
|
||||
|
||||
<button class="btn btn-primary btn-sm pull-right" data-course="{{ course.name | urlencode}}" id="submit-slot">
|
||||
{{ _("Submit") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -52,39 +52,45 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade report-modal" id="report-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
|
||||
aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<div class="font-weight-bold">{{ _("Report this Post") }}</div>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="review-form" id="review-form">
|
||||
<div class="form-group">
|
||||
<div class="clearfix">
|
||||
<label class="control-label reqd" style="padding-right: 0px;">{{ _("Reason for reporting") }}</label>
|
||||
<div class="modal fade report-modal" id="report-modal" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
|
||||
<div class="modal-header">
|
||||
<div class="modal-title">{{ _("Report this Post") }}</div>
|
||||
</div>
|
||||
<div class="control-input-wrapper">
|
||||
<div class="control-input">
|
||||
<textarea type="text" autocomplete="off" class="input-with-feedback form-control report-field"
|
||||
data-fieldtype="Text" data-fieldname="feedback_comments" placeholder="" style="height: 200px;"
|
||||
spellcheck="false"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<form class="review-form" id="review-form">
|
||||
<div class="form-group">
|
||||
<div class="clearfix">
|
||||
<label class="control-label reqd" style="padding-right: 0px;">
|
||||
{{ _("Reason for Reporting") }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="control-input-wrapper">
|
||||
<div class="control-input">
|
||||
<textarea type="text" autocomplete="off" class="input-with-feedback form-control report-field"
|
||||
data-fieldtype="Text" data-fieldname="feedback_comments" spellcheck="false"></textarea>
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="error-field muted-text"></p>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<p class="error-field muted-text"></p>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<div class="button submit-review is-primary" data-job="{{ job.name }}" id="submit-report">
|
||||
Report</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-secondary btn-sm mr-2 pull-right" data-dismiss="modal" aria-label="Close">
|
||||
{{ _("Discard") }}
|
||||
</button>
|
||||
|
||||
<div class="btn btn-primary btn-sm pull-right" data-job="{{ job.name }}" id="submit-report">
|
||||
{{ _("Report") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user