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.

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

ODK-X Instance row control buttons. #211

Open
wants to merge 6 commits into
base: development
Choose a base branch
from
Open

ODK-X Instance row control buttons. #211

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c484776
instance row control btns
juayuohcarineneng19 Jul 8, 2024
6236ea4
add gap betwee buttons
juayuohcarineneng19 Jul 9, 2024
a91481c
border-radius added
juayuohcarineneng19 Jul 15, 2024
ad33d04
consistent border and equal spacing
juayuohcarineneng19 Jul 15, 2024
70f7626
add material design icons
juayuohcarineneng19 Aug 20, 2024
903c28c
Merge branch 'development' into instance-row-control
juayuohcarineneng19 Aug 20, 2024
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
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -341,7 +341,32 @@ Eventually we should make a jqm theme for this.

.instanceRowControl{
float: right;
}
display: flex;
margin-right: auto;
gap: 5px;
}

.instanceRowControl .openInstance {
border-top-left-radius: 8px!important;
Copy link
Member

Choose a reason for hiding this comment

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

Hello - great work! 👍
One small question regarding the CSS; Is the '!important' tag necessary?
It is really a kind of last resort in CSS (i.e. when something "more specific" exists in the css inheritance hierarchy).. However - if it is indeed needed here, then just ignore this comment! 😄

border-top-right-radius: 8px!important;
border-bottom-right-radius: 8px!important;
border-bottom-left-radius: 8px!important;
display: flex;
justify-content: center;
align-items: center;
text-align: center
}

.instanceRowControl .deleteInstance {
border-top-left-radius: 8px!important;
border-top-right-radius: 8px!important;
border-bottom-right-radius: 8px!important;
border-bottom-left-radius: 8px!important;
display: flex;
justify-content: center;
align-items: center;
text-align: center
}
Copy link
Member

Choose a reason for hiding this comment

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

indentation issue...


.openingRowControl{
float: right;
Expand Down
76 changes: 39 additions & 37 deletions app/system/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- <meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' /> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenDataKit Common Javascript Framework</title>
<link rel="stylesheet" type="text/css" id="custom-styles" />
<link rel="stylesheet" type="text/css" id="theme" href="libs/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../config/assets/css/odk-survey.css" />
<link rel="stylesheet" type="text/css" id="theme" href="libs/spinner/waitMe.css" />
<link rel="stylesheet" type="text/css" href="../config/assets/css/jquery.calendars.picker.css" />
<script type="text/javascript" src="../config/assets/framework/frameworkDefinitions.js"></script>
<script type="text/javascript" src="../config/assets/commonDefinitions.js"></script>
<script type="text/javascript" src="js/odkCommon.js"></script>
<script type="text/javascript" src="js/odkData.js"></script>
<script type="text/javascript" src="tables/js/odkTables.js"></script>
<script type="text/javascript" src="survey/js/odkSurvey.js"></script>
<script type="text/javascript" src="survey/js/odkSurveyStateManagement.js"></script>
<script src="/node_modules/@sqlite.org/sqlite-wasm/sqlite-wasm/jswasm/sqlite3.js"></script>
<noscript>This page requires javascript</noscript>
</head>
<body>
<div id="block-ui"></div>
<div class="odk-page">
<div class="odk-screen">
<div class="odk-toolbar"></div>
<div class="odk-scroll">
<div class="odk-container">Please wait...</div>
</div>
<div class="odk-footer"></div>
</div>
</div>
<!-- move load of main.js to body since it is now dependent on odkXxx.js having been loaded -->
<script type="text/javascript" data-main="survey/js/main" src="libs/require.2.3.6.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- <meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' /> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenDataKit Common Javascript Framework</title>
<link rel="stylesheet" type="text/css" id="custom-styles" />
<link rel="stylesheet" type="text/css" id="theme" href="libs/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../config/assets/css/odk-survey.css" />
<link rel="stylesheet" type="text/css" id="theme" href="libs/spinner/waitMe.css" />
<link rel="stylesheet" type="text/css" href="../config/assets/css/jquery.calendars.picker.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
<script type="text/javascript" src="../config/assets/framework/frameworkDefinitions.js"></script>
<script type="text/javascript" src="../config/assets/commonDefinitions.js"></script>
<script type="text/javascript" src="js/odkCommon.js"></script>
<script type="text/javascript" src="js/odkData.js"></script>
<script type="text/javascript" src="tables/js/odkTables.js"></script>
<script type="text/javascript" src="survey/js/odkSurvey.js"></script>
<script type="text/javascript" src="survey/js/odkSurveyStateManagement.js"></script>
<script src="/node_modules/@sqlite.org/sqlite-wasm/sqlite-wasm/jswasm/sqlite3.js"></script>
<noscript>This page requires javascript</noscript>
</head>
<body>
<div id="block-ui"></div>
<div class="odk-page">
<div class="odk-screen">
<div class="odk-toolbar"></div>
<div class="odk-scroll">
<div class="odk-container">Please wait...</div>
</div>
<div class="odk-footer"></div>
</div>
</div>
<!-- move load of main.js to body since it is now dependent on odkXxx.js having been loaded -->
<script type="text/javascript" data-main="survey/js/main" src="libs/require.2.3.6.js"></script>
</body>
</html>
4 changes: 2 additions & 2 deletions app/system/survey/templates/instances.handlebars
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,11 +39,11 @@
<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;">
<span class="material-symbols-outlined">edit</span>
</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;">
<span class="material-symbols-outlined">delete </span>
</button>
{{/if}}
</div>
Expand Down