Skip to content
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.

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

Style ODK-X Survey Instance Savepoints-types #210

Open
wants to merge 5 commits into
base: development
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 26 additions & 1 deletion app/config/assets/css/odk-survey.css
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,7 @@ input[type="range"]::-webkit-slider-thumb:before {
/*
The height is a trade-off, we get a better looking regular grid with it set,
but we loose the ability auto-fit arbitrary sized content.
Maybe I could use a table to get the best of both worlds.
Maybe I could use a table to get the best of both worlds.
*/
width: 130px;
margin: 2px;
Expand Down Expand Up @@ -629,3 +629,28 @@ Eventually we should make a jqm theme for this.
overflow:hidden;
margin-right:50px;
}

.savepoints.finalized {
display: flex;
text-align: center;
align-items: center;
width: fit-content;
padding: 16px;
justify-content: center;
color: #1CCB3D;
background-color: #F0FDF2;
height: 40px;
}

.savepoints.incomplete {
display: flex;
text-align: center;
align-items: center;
width: fit-content;
padding: 16px;
justify-content: center;
color: #DF961F;
background-color: #FCF8EA;
height: 40px;
}
Copy link
Member

@Redeem-Grimm-Satoshi Redeem-Grimm-Satoshi Jul 12, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@juayuohcarineneng19 I don't see any border-radius, did you leave this out intentionally?

Those states have a border-radius on the design screen but I can't see it here

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@juayuohcarineneng19 I don't see any border-radius, did you leave this out intentionally?

Those states have a border-radius on the design screen but I can't see it here

Hi @Redeem-Grimm-Satoshi I have added border-radius .


32 changes: 17 additions & 15 deletions app/system/survey/js/prompts.js
Original file line number Diff line number Diff line change
Expand Up @@ -223,10 +223,10 @@ promptTypes.base = Backbone.View.extend({
if (currEl.length > 0) {
currElString = currEl[0].innerHTML;
currElStringNoSpaces = currElString.replace(/\s/g, '');
}
}
var toBeDrawnEl = that.template(that.renderContext, {
// Subverting breaking change in handlebars v. 4.6 to allow access to "not own" properties (insecure)
allowProtoMethodsByDefault: true,
allowProtoMethodsByDefault: true,
allowProtoPropertiesByDefault: true
});
var tbdString = null;
Expand Down Expand Up @@ -623,9 +623,11 @@ promptTypes.instances = promptTypes.base.extend({
if ( savepoint_type === opendatakit.savepoint_type_complete ) {
term.savepoint_type_text = that.savepoint_type_finalized_text;
term.is_checkpoint = false;
term.status_class = 'finalized';
} else if ( savepoint_type === opendatakit.savepoint_type_incomplete ) {
term.savepoint_type_text = that.savepoint_type_incomplete_text;
term.is_checkpoint = false;
term.status_class = 'incomplete';
} else {
term.savepoint_type_text = that.savepoint_type_checkpoint_text;
term.is_checkpoint = true;
Expand Down Expand Up @@ -2209,7 +2211,7 @@ promptTypes.birth_date = promptTypes.date_no_time.extend({
}
},
});

promptTypes.date_year_only = promptTypes.date_no_time.extend({
type: "date",
showTime: false,
Expand Down Expand Up @@ -2336,7 +2338,7 @@ promptTypes.coptic_calendar_picker = promptTypes.non_gregorian_calendar.extend({
that.insideAfterRender = false;
}
},

formatDBVal: function(formattedDateValue) {
var outputValue = null;
if (formattedDateValue !== null && formattedDateValue !== undefined && !(_.isEmpty(formattedDateValue))) {
Expand Down Expand Up @@ -2366,7 +2368,7 @@ promptTypes.ethiopian_calendar_picker = promptTypes.non_gregorian_calendar.exten
that.insideAfterRender = false;
}
},

formatDBVal: function(formattedDateValue) {
var outputValue = null;
if (formattedDateValue !== null && formattedDateValue !== undefined && !(_.isEmpty(formattedDateValue))) {
Expand Down Expand Up @@ -2396,7 +2398,7 @@ promptTypes.hebrew_calendar_picker = promptTypes.non_gregorian_calendar.extend({
that.insideAfterRender = false;
}
},

formatDBVal: function(formattedDateValue) {
var outputValue = null;
if (formattedDateValue !== null && formattedDateValue !== undefined && !(_.isEmpty(formattedDateValue))) {
Expand Down Expand Up @@ -2426,7 +2428,7 @@ promptTypes.islamic_calendar_picker = promptTypes.non_gregorian_calendar.extend(
that.insideAfterRender = false;
}
},

formatDBVal: function(formattedDateValue) {
var outputValue = null;
if (formattedDateValue !== null && formattedDateValue !== undefined && !(_.isEmpty(formattedDateValue))) {
Expand Down Expand Up @@ -2456,7 +2458,7 @@ promptTypes.julian_calendar_picker = promptTypes.non_gregorian_calendar.extend({
that.insideAfterRender = false;
}
},

formatDBVal: function(formattedDateValue) {
var outputValue = null;
if (formattedDateValue !== null && formattedDateValue !== undefined && !(_.isEmpty(formattedDateValue))) {
Expand Down Expand Up @@ -2486,7 +2488,7 @@ promptTypes.mayan_calendar_picker = promptTypes.non_gregorian_calendar.extend({
that.insideAfterRender = false;
}
},

formatDBVal: function(formattedDateValue) {
var outputValue = null;
if (formattedDateValue !== null && formattedDateValue !== undefined && !(_.isEmpty(formattedDateValue))) {
Expand Down Expand Up @@ -2516,7 +2518,7 @@ promptTypes.nanakshahi_calendar_picker = promptTypes.non_gregorian_calendar.exte
that.insideAfterRender = false;
}
},

formatDBVal: function(formattedDateValue) {
var outputValue = null;
if (formattedDateValue !== null && formattedDateValue !== undefined && !(_.isEmpty(formattedDateValue))) {
Expand Down Expand Up @@ -2546,7 +2548,7 @@ promptTypes.nepali_calendar_picker = promptTypes.non_gregorian_calendar.extend({
that.insideAfterRender = false;
}
},

formatDBVal: function(formattedDateValue) {
var outputValue = null;
if (formattedDateValue !== null && formattedDateValue !== undefined && !(_.isEmpty(formattedDateValue))) {
Expand Down Expand Up @@ -2576,7 +2578,7 @@ promptTypes.persian_calendar_picker = promptTypes.non_gregorian_calendar.extend(
that.insideAfterRender = false;
}
},

formatDBVal: function(formattedDateValue) {
var outputValue = null;
if (formattedDateValue !== null && formattedDateValue !== undefined && !(_.isEmpty(formattedDateValue))) {
Expand Down Expand Up @@ -2606,7 +2608,7 @@ promptTypes.taiwan_calendar_picker = promptTypes.non_gregorian_calendar.extend({
that.insideAfterRender = false;
}
},

formatDBVal: function(formattedDateValue) {
var outputValue = null;
if (formattedDateValue !== null && formattedDateValue !== undefined && !(_.isEmpty(formattedDateValue))) {
Expand Down Expand Up @@ -2636,7 +2638,7 @@ promptTypes.thai_calendar_picker = promptTypes.non_gregorian_calendar.extend({
that.insideAfterRender = false;
}
},

formatDBVal: function(formattedDateValue) {
var outputValue = null;
if (formattedDateValue !== null && formattedDateValue !== undefined && !(_.isEmpty(formattedDateValue))) {
Expand Down Expand Up @@ -2666,7 +2668,7 @@ promptTypes.ummalqura_calendar_picker = promptTypes.non_gregorian_calendar.exten
that.insideAfterRender = false;
}
},

formatDBVal: function(formattedDateValue) {
var outputValue = null;
if (formattedDateValue !== null && formattedDateValue !== undefined && !(_.isEmpty(formattedDateValue))) {
Expand Down
124 changes: 62 additions & 62 deletions app/system/survey/templates/instances.handlebars
Original file line number Diff line number Diff line change
@@ -1,62 +1,62 @@
<div>
<div>
<center><img src="{{ headerImg }}" class="odk-formlogo" /></center>
<hr>
</div>
{{{localizeText display.instances_survey_form_identification}}}
<div class="instanceClearDiv"></div>
<div>
<fieldset class="instanceNew">
<div class="row">
<div>
<button type="button" class="createInstance btn btn-default" tabindex="0">{{localizeText display.new_button_label}}
<span class="glyphicon glyphicon-plus-sign" style="font-size:20px;"></span>
</button>
</div>
</div>
</fieldset>
<hr>
</div>
{{{localizeText display.instances_previously_created_instances_label}}}
<hr>
<div class="instanceList">
<ul class="list-group">
{{#each instances}}
{{#if dateDivider}}
<li class="list-group-item">{{dateDivider}}</li>
{{/if}}
<li class="list-group-item">
<fieldset class="instanceListGrid">
<div class="row">
<div class="col-xs-8">
<p><strong>{{display_field}}</strong></p>
{{{localizeText ../display.instances_last_save_date_label}}}
<p>{{savepoint_timestamp}}</p>
<p><strong>{{localizeText savepoint_type_text}}</strong></p>
{{#if is_checkpoint}}
<span class="glyphicon glyphicon-warning-sign"></span></p>
{{/if}}
</div>
<div class="col-xs-4">
<div class="instanceRowControl btn-group">
<button type="button" id="{{instance_id}}" class="odk openInstance btn btn-default" tabindex="0">
<span class="glyphicon glyphicon-pencil" style="font-size:20px;">
</button>
{{#if show_delete}}
<button type="button" id="{{instance_id}}" display_value="{{display_field}}" class="odk deleteInstance btn btn-default" tabindex="0">
<span class="glyphicon glyphicon-remove-sign" style="font-size:20px;">
</button>
{{/if}}
</div>
</div>
</div>
</fieldset>
</li>
{{else}}
<li>{{localizeText display.instances_no_saved_instances_label}}</li>
{{/each}}
</ul>
</div>
</div>
<div>
<div>
<center><img src="{{ headerImg }}" class="odk-formlogo" /></center>
<hr>
</div>
{{{localizeText display.instances_survey_form_identification}}}

<div class="instanceClearDiv"></div>
<div>
<fieldset class="instanceNew">
<div class="row">
<div>
<button type="button" class="createInstance btn btn-default" tabindex="0">{{localizeText display.new_button_label}}
<span class="glyphicon glyphicon-plus-sign" style="font-size:20px;"></span>
</button>
</div>
</div>
</fieldset>
<hr>
</div>

{{{localizeText display.instances_previously_created_instances_label}}}
<hr>
<div class="instanceList">
<ul class="list-group">
{{#each instances}}
{{#if dateDivider}}
<li class="list-group-item">{{dateDivider}}</li>
{{/if}}
<li class="list-group-item">
<fieldset class="instanceListGrid">
<div class="row">
<div class="col-xs-8">
<p><strong>{{display_field}}</strong></p>
{{{localizeText ../display.instances_last_save_date_label}}}
<p>{{savepoint_timestamp}}</p>
<p class="savepoints {{status_class}}"><strong>{{localizeText savepoint_type_text}}</strong></p>
{{#if is_checkpoint}}
<span class="glyphicon glyphicon-warning-sign"></span></p>
{{/if}}
</div>
<div class="col-xs-4">
<div class="instanceRowControl btn-group">
<button type="button" id="{{instance_id}}" class="odk openInstance btn btn-default" tabindex="0">
<span class="glyphicon glyphicon-pencil" style="font-size:20px;">
</button>
{{#if show_delete}}
<button type="button" id="{{instance_id}}" display_value="{{display_field}}" class="odk deleteInstance btn btn-default" tabindex="0">
<span class="glyphicon glyphicon-remove-sign" style="font-size:20px;">
</button>
{{/if}}
</div>
</div>
</div>
</fieldset>
</li>
{{else}}
<li>{{localizeText display.instances_no_saved_instances_label}}</li>
{{/each}}
</ul>
</div>
</div>