Mercurial > gemma
changeset 3281:439e1865a2d2
client: define stretches/imports: code cleanup / style improvements
line wrap: on
line diff
--- a/client/src/components/importconfiguration/Import.vue Thu May 16 09:35:37 2019 +0200 +++ b/client/src/components/importconfiguration/Import.vue Thu May 16 09:52:32 2019 +0200 @@ -1,7 +1,7 @@ <template> <div> <UIBoxHeader icon="clock" :title="title" :closeCallback="$parent.close" /> - <div v-if="mode === $options.MODES.LIST" class="mb-3"> + <div v-if="mode === $options.MODES.LIST"> <UISpinnerOverlay v-if="loading" /> <UITableHeader :columns="[ @@ -17,13 +17,13 @@ :isActive="item => currentSchedule && item.id === currentSchedule.id" > <template v-slot:row="{ item: schedule }"> - <div class="table-cell col-1">{{ schedule.id }}</div> - <div class="table-cell col-2"> + <div class="table-cell py-1 col-1">{{ schedule.id }}</div> + <div class="table-cell py-1 col-2"> {{ schedule.kind.toUpperCase() }} </div> - <div class="table-cell col-2">{{ schedule.user }}</div> - <div class="table-cell col-2">{{ schedule.config.cron }}</div> - <div class="table-cell col-2"> + <div class="table-cell py-1 col-2">{{ schedule.user }}</div> + <div class="table-cell py-1 col-2">{{ schedule.config.cron }}</div> + <div class="table-cell py-1 col-2"> <font-awesome-icon v-if="schedule.config['send-email']" class="fa-fw mr-2" @@ -31,7 +31,7 @@ icon="check" /> </div> - <div class="table-cell col justify-content-end"> + <div class="table-cell py-1 col justify-content-end"> <button @click="triggerManualImport(schedule.id)" class="btn btn-xs btn-dark mr-1" @@ -58,21 +58,17 @@ </UITableBody> </div> <ImportDetails v-if="mode === $options.MODES.EDIT"></ImportDetails> - <div class="d-flex flex-row w-100 mb-3"> - <button - :key="3" - v-if="mode === $options.MODES.LIST && !isOnetime" - @click="newConfiguration()" - class="ml-auto btn btn-info mr-3" - > + <div + class="text-right border-top p-2" + v-if="mode === $options.MODES.LIST && !isOnetime" + > + <button :key="3" @click="newConfiguration()" class="btn btn-sm btn-info"> <translate>New import</translate> </button> </div> </div> </template> -<style></style> - <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details.
--- a/client/src/components/importconfiguration/ImportDetails.vue Thu May 16 09:35:37 2019 +0200 +++ b/client/src/components/importconfiguration/ImportDetails.vue Thu May 16 09:52:32 2019 +0200 @@ -1,68 +1,76 @@ <template> - <div class="mt-3 mb-3 mr-3 ml-3 text-left"> - <small class="text-muted"> - <translate>Import type</translate> - </small> - <select v-model="Import" class="custom-select" id="importtype"> - <optgroup :label="regularLabel"> - <option :value="$options.IMPORTTYPES.BOTTLENECK"> - <translate>Bottlenecks</translate> - </option> - <option :value="$options.IMPORTTYPES.WATERWAYAXIS"> - <translate>Waterway axis</translate> - </option> - <option :value="$options.IMPORTTYPES.GAUGEMEASUREMENT"> - <translate>Gauge measurement</translate> - </option> - <option :value="$options.IMPORTTYPES.FAIRWAYAVAILABILITY"> - <translate>Available fairway depths</translate> - </option> - <option :value="$options.IMPORTTYPES.WATERWAYAREA"> - <translate>Waterway area</translate> - </option> - <option :value="$options.IMPORTTYPES.FAIRWAYDIMENSION"> - <translate>Fairway dimension</translate> - </option> - <option :value="$options.IMPORTTYPES.WATERWAYGAUGES"> - <translate>Waterway gauges</translate> - </option> - <option :value="$options.IMPORTTYPES.DISTANCEMARKSVIRTUAL"> - <translate>Distance marks virtual</translate> - </option> - <option :value="$options.IMPORTTYPES.DISTANCEMARKSASHORE"> - <translate>Distance marks ashore</translate> - </option> - </optgroup> - <optgroup :label="onetimeLabel"> - <option :value="$options.IMPORTTYPES.SOUNDINGRESULTS"> - <translate>Soundingresults</translate> - </option> - <option :value="$options.IMPORTTYPES.APPROVEDGAUGEMEASUREMENTS"> - <translate>Approved Gaugemeasurements</translate> - </option> - <option :value="$options.IMPORTTYPES.WATERWAYPROFILES"> - <translate>Waterway Profiles</translate> - </option> - </optgroup> - </select> - <ApprovedGaugeMeasurement - v-if="Import === $options.IMPORTTYPES.APPROVEDGAUGEMEASUREMENTS" - class="mt-1" - /> - <WaterwayProfiles - class="mt-1" - v-if="Import === $options.IMPORTTYPES.WATERWAYPROFILES" - /> - <SoundingResults - class="mt-1" - v-if="Import === $options.IMPORTTYPES.SOUNDINGRESULTS" - /> - <ScheduledImports - class="mt-1" - v-if="Import && !isOnetime" - ></ScheduledImports> - <div v-if="!Import" class="d-flex flex-row w-100 mt-3"> - <button :key="1" @click="back()" class="ml-auto btn btn-warning"> + <div class="text-left"> + <div> + <div class="p-2 pb-3 border-bottom"> + <small class="text-muted"> + <translate>Import type</translate> + </small> + <select + v-model="Import" + class="custom-select custom-select-sm" + id="importtype" + > + <optgroup :label="regularLabel"> + <option :value="$options.IMPORTTYPES.BOTTLENECK"> + <translate>Bottlenecks</translate> + </option> + <option :value="$options.IMPORTTYPES.WATERWAYAXIS"> + <translate>Waterway axis</translate> + </option> + <option :value="$options.IMPORTTYPES.GAUGEMEASUREMENT"> + <translate>Gauge measurement</translate> + </option> + <option :value="$options.IMPORTTYPES.FAIRWAYAVAILABILITY"> + <translate>Available fairway depths</translate> + </option> + <option :value="$options.IMPORTTYPES.WATERWAYAREA"> + <translate>Waterway area</translate> + </option> + <option :value="$options.IMPORTTYPES.FAIRWAYDIMENSION"> + <translate>Fairway dimension</translate> + </option> + <option :value="$options.IMPORTTYPES.WATERWAYGAUGES"> + <translate>Waterway gauges</translate> + </option> + <option :value="$options.IMPORTTYPES.DISTANCEMARKSVIRTUAL"> + <translate>Distance marks virtual</translate> + </option> + <option :value="$options.IMPORTTYPES.DISTANCEMARKSASHORE"> + <translate>Distance marks ashore</translate> + </option> + </optgroup> + <optgroup :label="onetimeLabel"> + <option :value="$options.IMPORTTYPES.SOUNDINGRESULTS"> + <translate>Soundingresults</translate> + </option> + <option :value="$options.IMPORTTYPES.APPROVEDGAUGEMEASUREMENTS"> + <translate>Approved Gaugemeasurements</translate> + </option> + <option :value="$options.IMPORTTYPES.WATERWAYPROFILES"> + <translate>Waterway Profiles</translate> + </option> + </optgroup> + </select> + </div> + <ApprovedGaugeMeasurement + v-if="Import === $options.IMPORTTYPES.APPROVEDGAUGEMEASUREMENTS" + class="mt-1" + /> + <WaterwayProfiles + class="mt-1" + v-if="Import === $options.IMPORTTYPES.WATERWAYPROFILES" + /> + <SoundingResults + class="mt-1" + v-if="Import === $options.IMPORTTYPES.SOUNDINGRESULTS" + /> + <ScheduledImports + class="mt-1" + v-if="Import && !isOnetime" + ></ScheduledImports> + </div> + <div v-if="!Import" class="p-2"> + <button :key="1" @click="back()" class="btn btn-sm btn-warning"> Back </button> </div>
--- a/client/src/components/importconfiguration/ScheduledImports.vue Thu May 16 09:35:37 2019 +0200 +++ b/client/src/components/importconfiguration/ScheduledImports.vue Thu May 16 09:52:32 2019 +0200 @@ -1,12 +1,10 @@ <template> <form @submit.prevent="save" class="w-100"> - <div class="d-flex flex-row"> - <div :key="1" class="flex-column mr-4"> - <div class="flex-row text-left"> - <small class="text-muted"> - <translate>Email Notification</translate> - </small> - </div> + <div class="d-flex px-2"> + <div :key="1" class="flex-column"> + <small class="text-muted"> + <translate>Email Notification</translate> + </small> <div class="flex-flex-row text-left"> <toggle-button v-model="eMailNotification" @@ -21,12 +19,14 @@ /> </div> </div> - <div :key="2" v-if="directImportAvailable" class="flex-column text-left"> - <div> - <small class="text-muted"> - <translate>Import via</translate> - </small> - </div> + <div + :key="2" + v-if="directImportAvailable" + class="flex-column text-left ml-3" + > + <small class="text-muted"> + <translate>Import via</translate> + </small> <div> <!-- '#75c791' is the DEFAULT_COLOR_CHECKED from vue-js-toggle-button as here both states are active --> @@ -130,7 +130,7 @@ :sortBy="sortBy" /> - <div class="d-flex flex-row mt-3"> + <div class="d-flex p-2"> <template v-if="!directImport || !directImportAvailable"> <div class="flex-column mr-4"> <div class="flex-row text-left"> @@ -183,7 +183,7 @@ <input style="width:120px;" v-model="trys" - class="mr-1 form-control" + class="mr-1 form-control form-control-sm" type="number" /> </div> @@ -198,33 +198,36 @@ <input style="width:120px;" v-model="waitRetry" - class="ml-1 form-control" + class="ml-1 form-control form-control-sm" /> </div> </div> </template> </div> <template v-if="!directImport || !directImportAvailable"> - <div class="flex-column w-100 mr-2"> + <div class="flex-column w-100 px-2 pb-3"> <div class="flex-row text-left"> <small class="text-muted"> <translate>Schedule</translate> </small> </div> <div v-if="easyCron" class="text-left w-50"> - <select :disabled="!scheduled" v-model="simple" class="form-control" + <select + :disabled="!scheduled" + v-model="simple" + class="form-control form-control-sm" ><option value="weekly"><translate>Weekly</translate></option> <option value="monthly"><translate>Monthly</translate> </option> </select> </div> <div v-if="!easyCron" class="text-left w-100"> <div class="d-flex flex-row"> - <h4 class="mt-auto mb-auto mr-2">{{ $options.EVERY }}</h4> + <div class="my-auto mr-2">{{ $options.EVERY }}</div> <select :disabled="!scheduled" style="width: 130px;" v-model="cronMode" - class="form-control" + class="form-control form-control-sm" @change="clearInputs" > <option :value="null"></option> @@ -236,34 +239,38 @@ > </select> <div v-if="cronMode == 'hour'" class="ml-1 d-flex flex-row"> - <h4 class="mt-auto mb-auto">{{ $options.ON }}</h4> + <div class="mt-auto mb-auto">{{ $options.ON }}</div> <input :disabled="!scheduled" v-model="minutes" - class="cronfield ml-1 mr-1 form-control" + class="cronfield ml-1 mr-1 form-control form-control-sm" type="number" /> - <h4 class="mt-auto mb-auto">{{ $options.MINUTESPAST }}</h4> + <div class="mt-auto mb-auto">{{ $options.MINUTESPAST }}</div> </div> <div v-if="cronMode == 'day'" class="ml-1 d-flex flex-row"> - <h4 class="mt-auto mb-auto">{{ $options.AT }}</h4> + <div class="mt-auto mb-auto">{{ $options.AT }}</div> <input :disabled="!scheduled" v-model="hour" - class="cronfield ml-1 mr-1 form-control" + class="cronfield ml-1 mr-1 form-control form-control-sm" type="number" /> <input :disabled="!scheduled" v-model="minutes" - class="cronfield ml-1 mr-1 form-control" + class="cronfield ml-1 mr-1 form-control form-control-sm" type="number" /> - <h4 class="mt-auto mb-auto">{{ $options.OCLOCK }}</h4> + <div class="mt-auto mb-auto">{{ $options.OCLOCK }}</div> </div> <div v-if="cronMode == 'week'" class="ml-1 d-flex flex-row"> - <h4 class="ml-1 mr-1 mt-auto mb-auto">{{ $options.ON }}</h4> - <select :disabled="!scheduled" v-model="day" class="form-control"> + <div class="ml-1 mr-1 mt-auto mb-auto">{{ $options.ON }}</div> + <select + :disabled="!scheduled" + v-model="day" + class="form-control form-control-sm" + > <option v-for="(option, key) in $options.DAYSOFWEEK" :key="key" @@ -271,56 +278,56 @@ >{{ option }}</option > </select> - <h4 class="ml-1 mt-auto mb-auto">{{ $options.AT }}</h4> + <div class="ml-1 mt-auto mb-auto">{{ $options.AT }}</div> <input :disabled="!scheduled" v-model="hour" - class="cronfield ml-1 mr-1 form-control" + class="cronfield ml-1 mr-1 form-control form-control-sm" type="number" /> <input :disabled="!scheduled" v-model="minutes" - class="cronfield ml-1 mr-1 form-control" + class="cronfield ml-1 mr-1 form-control form-control-sm" type="number" /> </div> <div v-if="cronMode == 'month'" class="ml-1 d-flex flex-row"> - <h4 class="ml-1 mt-auto mb-auto">{{ $options.ON }}</h4> + <div class="ml-1 mt-auto mb-auto">{{ $options.ON }}</div> <input :disabled="!scheduled" v-model="dayOfMonth" - class="cronfield ml-1 mr-1 form-control" + class="cronfield ml-1 mr-1 form-control form-control-sm" type="number" /> - <h4 class="mt-auto mb-auto">{{ $options.AT }}</h4> + <div class="mt-auto mb-auto">{{ $options.AT }}</div> <input :disabled="!scheduled" v-model="hour" - class="cronfield ml-1 mr-2 form-control" + class="cronfield ml-1 mr-2 form-control form-control-sm" type="number" /> <input :disabled="!scheduled" v-model="minutes" - class="cronfield ml-1 mr-2 form-control" + class="cronfield ml-1 mr-2 form-control form-control-sm" type="number" /> - <h4 class="mt-auto mb-auto">{{ $options.OCLOCK }}</h4> + <div class="mt-auto mb-auto">{{ $options.OCLOCK }}</div> </div> <div v-if="cronMode == 'year'" class="ml-1 d-flex flex-row"> - <h4 class="ml-1 mt-auto mb-auto">{{ $options.ON }}</h4> + <div class="ml-1 mt-auto mb-auto">{{ $options.ON }}</div> <input :disabled="!scheduled" v-model="dayOfMonth" - class="cronfield ml-1 mr-1 form-control" + class="cronfield ml-1 mr-1 form-control form-control-sm" type="number" /> - <h4 class="mt-auto mb-auto">{{ $options.OF }}</h4> + <div class="mt-auto mb-auto">{{ $options.OF }}</div> <select :disabled="!scheduled" v-model="month" - class="ml-1 mr-1 form-control" + class="ml-1 mr-1 form-control form-control-sm" > <option v-for="(option, key) in $options.MONTHS" @@ -329,28 +336,28 @@ >{{ option }}</option > </select> - <h4 class="mt-auto mb-auto">{{ $options.ON }}</h4> + <div class="mt-auto mb-auto">{{ $options.ON }}</div> <input :disabled="!scheduled" v-model="hour" - class="cronfield ml-1 mr-1 form-control" + class="cronfield ml-1 mr-1 form-control form-control-sm" type="number" /> <input :disabled="!scheduled" v-model="minutes" - class="cronfield ml-1 mr-1 form-control" + class="cronfield ml-1 mr-1 form-control form-control-sm" type="number" /> </div> </div> - <div class="mt-3 w-50 d-flex flex-row"> - <h5 class="mt-auto mb-auto mr-2"> + <div class="mt-3 w-50 d-flex"> + <div class="my-auto mr-2"> <translate>Cronstring</translate> - </h5> + </div> <input :disabled="!scheduled" - class="form-control" + class="form-control form-control-sm" v-model="cronString" type="text" /> @@ -358,14 +365,14 @@ </div> </div> </template> - <div v-else class="d-flex flex-row text-left"> - <div class="mt-3 mb-3 flex-column w-100"> + <div v-else class="d-flex text-left px-2 pb-3"> + <div class="flex-column w-100"> <div class="custom-file"> <input accept=".xml" type="file" @change="fileSelected" - class="custom-file-input" + class="custom-file-input custom-file-input-sm" id="uploadFile" /> <label class="pointer custom-file-label" for="uploadFile"> @@ -374,27 +381,29 @@ </div> </div> </div> - <div class="w-100 d-flex flex-row mt-3"> - <button - @click="triggerManualImport" - type="button" - class="shadow-sm btn btn-outline-info mr-auto" - :disabled="!triggerActive || !isValid" - > - <font-awesome-icon class="fa-fw mr-2" fixed-width icon="play" /> - <translate>Trigger import</translate> - </button> - <button - v-if="!directImport || !directImportAvailable" - :disabled="!isValid" - type="submit" - class="shadow-sm btn btn-info mr-3" - > - <translate>Save</translate> - </button> - <button :key="1" @click="back()" class="btn btn-warning"> + <div class="d-flex justify-content-between p-2 border-top"> + <button :key="1" @click="back()" class="btn btn-sm btn-warning"> Back </button> + <div> + <button + @click="triggerManualImport" + type="button" + class="btn btn-sm btn-outline-info" + :disabled="!triggerActive || !isValid" + > + <font-awesome-icon fixed-width icon="play" /> + <translate>Trigger import</translate> + </button> + <button + v-if="!directImport || !directImportAvailable" + :disabled="!isValid" + type="submit" + class="btn btn-sm btn-info ml-3" + > + <translate>Save</translate> + </button> + </div> </div> </form> </template> @@ -488,10 +497,6 @@ import_() { return this.currentSchedule.importType; }, - dialogLabel() { - if (this.id) return this.$gettext("Import") + " " + this.id; - return this.$gettext("New Import"); - }, directImportAvailable() { switch (this.import_) { case this.$options.IMPORTTYPES.BOTTLENECK:
--- a/client/src/components/importconfiguration/types/ApprovedGaugeMeasurement.vue Thu May 16 09:35:37 2019 +0200 +++ b/client/src/components/importconfiguration/types/ApprovedGaugeMeasurement.vue Thu May 16 09:52:32 2019 +0200 @@ -1,6 +1,6 @@ <template> <div> - <div class="d-flex flex-row"> + <div class="d-flex px-2"> <div :key="1" class="flex-column mr-4"> <div class="flex-row text-left"> <small class="text-muted"> @@ -30,7 +30,7 @@ <input type="text" v-model="originator" - class="form-control" + class="form-control form-control-sm" id="originator" /> <span class="text-left text-danger"> @@ -40,7 +40,7 @@ </span> </div> </div> - <div class="mt-4 flex-column w-100"> + <div class="mt-4 flex-column px-2 w-100"> <div class="custom-file"> <input accept=".csv" @@ -54,15 +54,15 @@ </label> </div> </div> - <div class="d-flex flex-row-reverse w-100 mt-3"> - <button :key="1" @click="back()" class="btn btn-warning"> + <div class="d-flex w-100 mt-3 border-top justify-content-between p-2"> + <button :key="1" @click="back()" class="btn btn-sm btn-warning"> Back </button> <button :key="2" type="submit" @click="submit" - class="shadow-sm btn btn-info submit-button mr-3" + class="btn btn-sm btn-info" > <translate>Submit</translate> </button>
--- a/client/src/components/importconfiguration/types/Availablefairwaydepth.vue Thu May 16 09:35:37 2019 +0200 +++ b/client/src/components/importconfiguration/types/Availablefairwaydepth.vue Thu May 16 09:52:32 2019 +0200 @@ -1,21 +1,21 @@ <template> <div> - <div class="d-flex flex-row"> - <div class="flex-column mt-3 mr-3 w-100"> + <div class="d-flex px-2"> + <div class="flex-column w-100"> <div class="flex-row text-left"> <small class="text-muted"> <translate>URL</translate> </small> </div> <div class="w-100"> <input @input="urlChanged" - class="url form-control" + class="url form-control form-control-sm" type="url" :value="url" /> </div> </div> </div> - <div v-if="!url" class="d-flex flex-row"> + <div v-if="!url" class="d-flex px-2"> <small ><translate class="text-danger">Please enter a URL</translate></small >
--- a/client/src/components/importconfiguration/types/Bottleneck.vue Thu May 16 09:35:37 2019 +0200 +++ b/client/src/components/importconfiguration/types/Bottleneck.vue Thu May 16 09:52:32 2019 +0200 @@ -1,22 +1,24 @@ <template> - <div> - <div class="d-flex flex-row"> - <div class="flex-column mt-3 mr-3 w-100"> + <div class="p-2"> + <div class="d-flex"> + <div class="flex-column w-100"> <template v-if="!directImport"> <div class="flex-row text-left"> - <small class="text-muted"> <translate>URL</translate> </small> + <small class="text-muted"> + <translate>URL</translate> + </small> </div> <div class="w-100"> <input @input="urlChanged" - class="url form-control" + class="url form-control form-control-sm" type="url" :value="url" /> </div> </template> </div> - <div v-if="false" class="flex-column mt-3 text-left"> + <div v-if="false" class="flex-column mt-2 text-left"> <div class="d-flex flex-row"> <small class="text-muted mr-2" ><translate>Insecure</translate> @@ -42,13 +44,13 @@ </div> </div> </div> - <div v-if="!directImport && !url" class="d-flex flex-row"> + <div v-if="!directImport && !url" class="d-flex"> <small ><translate class="text-danger">Please enter a URL</translate></small > </div> - <div class="d-flex flex-row"> - <div class="flex-column mt-3 mr-3 w-50"> + <div class="d-flex"> + <div class="flex-column mt-2 mr-3 w-50"> <div class="flex-row text-left"> <small class="text-muted"> <translate>Tolerance for snapping of waterway axis [m]</translate> @@ -57,13 +59,13 @@ <div class="w-100"> <input @input="toleranceChanged" - class="tolerance form-control" + class="tolerance form-control form-control-sm" type="number" min="0" :value="tolerance" /> </div> - <div v-if="!tolerance" class="d-flex flex-row"> + <div v-if="!tolerance" class="d-flex"> <small ><translate class="text-danger" >Please enter a tolerance value</translate
--- a/client/src/components/importconfiguration/types/Distancemarksashore.vue Thu May 16 09:35:37 2019 +0200 +++ b/client/src/components/importconfiguration/types/Distancemarksashore.vue Thu May 16 09:52:32 2019 +0200 @@ -1,34 +1,34 @@ <template> <div> - <div class="d-flex flex-row"> - <div class="flex-column mt-3 mr-3 w-100"> + <div class="d-flex px-2"> + <div class="flex-column w-100"> <div class="flex-row text-left"> <small class="text-muted"> <translate>URL</translate> </small> </div> <div class="w-100"> <input @input="urlChanged" - class="url form-control" + class="url form-control form-control-sm" type="url" :value="url" /> </div> </div> </div> - <div v-if="!url" class="d-flex flex-row"> + <div v-if="!url" class="d-flex px-2"> <small ><translate class="text-danger">Please enter a URL</translate></small > </div> - <div class="d-flex flex-row"> - <div class="flex-column mt-3 mr-3 w-50"> + <div class="d-flex px-2"> + <div class="flex-column mt-2 mr-3 w-50"> <div class="flex-row text-left"> <small class="text-muted"> <translate>Featuretype</translate> </small> </div> <div class="w-100"> <input @input="featureTypeChanged" - class="featuretype form-control" + class="featuretype form-control form-control-sm" type="text" :value="featureType" /> @@ -41,14 +41,14 @@ > </div> </div> - <div class="flex-column mt-3 w-50"> + <div class="flex-column mt-2 w-50"> <div class="flex-row text-left"> <small class="text-muted"> <translate>SortBy</translate> </small> </div> <div class="w-100"> <input @input="sortByChanged" - class="sortby form-control" + class="sortby form-control form-control-sm" type="text" :value="sortBy" />
--- a/client/src/components/importconfiguration/types/Distancemarksvirtual.vue Thu May 16 09:35:37 2019 +0200 +++ b/client/src/components/importconfiguration/types/Distancemarksvirtual.vue Thu May 16 09:52:32 2019 +0200 @@ -1,34 +1,34 @@ <template> <div> - <div class="d-flex flex-row"> - <div class="flex-column mt-3 mr-3 w-100"> + <div class="d-flex px-2"> + <div class="flex-column w-100"> <div class="flex-row text-left"> <small class="text-muted"> <translate>URL</translate> </small> </div> <div class="w-100"> <input @input="urlChanged" - class="url form-control" + class="url form-control form-control-sm" type="url" :value="url" /> </div> </div> </div> - <div v-if="!url" class="d-flex flex-row"> + <div v-if="!url" class="d-flex px-2"> <small ><translate class="text-danger">Please enter a URL</translate></small > </div> - <div class="d-flex flex-row"> - <div class="flex-column mt-3 mr-3 w-50"> + <div class="d-flex px-2"> + <div class="flex-column mt-2 mr-3 w-50"> <div class="flex-row text-left"> <small class="text-muted"> <translate>Username</translate> </small> </div> <div class="w-100"> <input @input="usernameChanged" - class="username form-control" + class="username form-control form-control-sm" type="text" :value="username" /> @@ -41,14 +41,14 @@ > </div> </div> - <div class="flex-column mt-3 w-50"> + <div class="flex-column mt-2 w-50"> <div class="flex-row text-left"> <small class="text-muted"> <translate>Password</translate> </small> </div> <div class="w-100 d-flex flex-row"> <input @input="passwordChanged" - class="pasword form-control" + class="pasword form-control form-control-sm" :type="showPassword" :value="password" />
--- a/client/src/components/importconfiguration/types/Fairwaydimensions.vue Thu May 16 09:35:37 2019 +0200 +++ b/client/src/components/importconfiguration/types/Fairwaydimensions.vue Thu May 16 09:52:32 2019 +0200 @@ -1,34 +1,34 @@ <template> <div> - <div class="d-flex flex-row"> - <div class="flex-column mt-3 mr-3 w-100"> + <div class="d-flex px-2"> + <div class="flex-column w-100"> <div class="flex-row text-left"> <small class="text-muted"> <translate>URL</translate> </small> </div> <div class="w-100"> <input @input="urlChanged" - class="url form-control" + class="url form-control form-control-sm" type="url" :value="url" /> </div> </div> </div> - <div v-if="!url" class="d-flex flex-row"> + <div v-if="!url" class="d-flex px-2"> <small ><translate class="text-danger">Please enter a URL</translate></small > </div> - <div class="d-flex flex-row"> - <div class="flex-column mt-3 mr-3 w-50"> + <div class="d-flex px-2"> + <div class="flex-column mt-2 mr-3 w-50"> <div class="flex-row text-left"> <small class="text-muted"> <translate>Featuretype</translate> </small> </div> <div class="w-100"> <input @input="featureTypeChanged" - class="featuretype form-control" + class="featuretype form-control form-control-sm" type="text" :value="featureType" /> @@ -41,14 +41,14 @@ > </div> </div> - <div class="flex-column mt-3 w-50"> + <div class="flex-column mt-2 w-50"> <div class="flex-row text-left"> <small class="text-muted"> <translate>SortBy</translate> </small> </div> <div class="w-100"> <input @input="sortByChanged" - class="sortby form-control" + class="sortby form-control form-control-sm" type="text" :value="sortBy" /> @@ -62,13 +62,13 @@ </div> </div> </div> - <div class="d-flex flex-row"> - <div class="flex-column mt-3 mr-3 w-50"> + <div class="d-flex px-2"> + <div class="flex-column mt-2 mr-3 w-50"> <div class="flex-row text-left"> <small class="text-muted"> <translate>LOS</translate> </small> </div> <div class="w-100"> - <select v-model="los" class="form-control"> + <select v-model="los" class="form-control form-control-sm"> <option>1</option> <option>2</option> <option>3</option> @@ -82,14 +82,14 @@ > </div> </div> - <div class="flex-column mt-3 w-50"> + <div class="flex-column mt-2 w-50"> <div class="flex-row text-left"> <small class="text-muted"> <translate>Depth</translate> </small> </div> <div class="d-flex flex-row"> <input @input="depthChanged" - class="depth form-control" + class="depth form-control form-control-sm" type="number" :value="depth" /> @@ -104,15 +104,15 @@ </div> </div> </div> - <div class="d-flex flex-row"> - <div class="flex-column mt-3 mr-3 w-50"> + <div class="d-flex px-2"> + <div class="flex-column mt-2 mr-3 w-50"> <div class="flex-row text-left"> <small class="text-muted"> <translate>MinWidth</translate> </small> </div> <div class="d-flex flex-row"> <input @input="minWidthChanged" - class="minwidth form-control" + class="minwidth form-control form-control-sm" type="number" :value="minWidth" /> @@ -126,14 +126,14 @@ > </div> </div> - <div class="flex-column mt-3 w-50"> + <div class="flex-column mt-2 w-50"> <div class="flex-row text-left"> <small class="text-muted"> <translate>MaxWidth</translate> </small> </div> <div class="d-flex flex-row"> <input @input="maxWidthChanged" - class="maxwidth form-control" + class="maxwidth form-control form-control-sm" type="number" :value="maxWidth" /> @@ -148,8 +148,8 @@ </div> </div> </div> - <div class="d-flex flex-row"> - <div class="flex-column mt-3 mr-3 w-50"> + <div class="d-flex px-2"> + <div class="flex-column mt-2 w-50"> <div class="flex-row text-left"> <small class="text-muted"> <translate>Source orgranization</translate> @@ -158,7 +158,7 @@ <div class="w-100"> <input @input="sourceOrganizationChanged" - class="sourceorganization form-control" + class="sourceorganization form-control form-control-sm" type="text" :value="sourceOrganization" />
--- a/client/src/components/importconfiguration/types/Gaugemeasurement.vue Thu May 16 09:35:37 2019 +0200 +++ b/client/src/components/importconfiguration/types/Gaugemeasurement.vue Thu May 16 09:52:32 2019 +0200 @@ -1,21 +1,21 @@ <template> <div> - <div class="d-flex flex-row"> - <div class="flex-column mt-3 mr-3 w-100"> + <div class="d-flex px-2"> + <div class="flex-column w-100"> <div class="flex-row text-left"> <small class="text-muted"> <translate>URL</translate> </small> </div> <div class="w-100"> <input @input="urlChanged" - class="url form-control" + class="url form-control form-control-sm" type="url" :value="url" /> </div> </div> </div> - <div v-if="!url" class="d-flex flex-row"> + <div v-if="!url" class="d-flex px-2"> <small ><translate class="text-danger">Please enter a URL</translate></small >
--- a/client/src/components/importconfiguration/types/Soundingresults.vue Thu May 16 09:35:37 2019 +0200 +++ b/client/src/components/importconfiguration/types/Soundingresults.vue Thu May 16 09:52:32 2019 +0200 @@ -1,19 +1,19 @@ <template> <div> - <div v-if="editState" class="mb-3"> + <div v-if="editState" class="mb-2 p-2"> <div v-for="(message, index) in messages" :key="index" - class="alert alert-warning small rounded-0" + class="alert alert-warning small" > {{ message }} </div> - <div class="d-flex flex-row w-100"> + <div class="d-flex w-100"> <div class="w-50 mr-2 text-left"> <small class="text-muted"> <translate>Bottleneck</translate> </small> - <select v-model="bottleneck" class="custom-select"> + <select v-model="bottleneck" class="custom-select custom-select-sm"> <option v-for="bottleneck in availableBottlenecks" :value="bottleneck" @@ -33,7 +33,7 @@ <translate>Projection</translate> (EPSG) </small> <input - class="form-control" + class="form-control form-control-sm" v-model="projection" value="4326" placeholder="e.g. 4326" @@ -53,7 +53,7 @@ </small> <select v-model="depthReference" - class="custom-select" + class="custom-select custom-select-sm" id="depthreference" > <option @@ -73,7 +73,7 @@ <input id="importdate" type="date" - class="form-control" + class="form-control form-control-sm" placeholder="Date of import" aria-label="bottleneck" aria-describedby="bottlenecklabel" @@ -87,8 +87,8 @@ </div> </div> </div> - <div class="mt-3"> - <div v-if="uploadState" class="input-group"> + <div class="mt-2"> + <div v-if="uploadState" class="input-group px-2"> <div :key="1" class="flex-column mr-4"> <div class="flex-row text-left"> <small class="text-muted"> @@ -122,33 +122,40 @@ </label> </div> </div> - <div class="d-flex justify-content-between mt-3" v-if="editState"> - <a - download="meta.json" - :href="dataLink" - :class="[ - 'btn btn-outline-info', - { disabled: !bottleneck || !importDate || !depthReference } - ]" + <div + class="d-flex justify-content-between mt-2 p-2 border-top" + v-if="editState" + > + <button + :key="1" + @click="deleteTempData()" + class="btn btn-sm btn-warning" > - <translate>Download Meta.json</translate> - </a> + Back + </button> <span> + <a + download="meta.json" + :href="dataLink" + :class="[ + 'btn btn-sm btn-outline-info', + { disabled: !bottleneck || !importDate || !depthReference } + ]" + > + <translate>Download Meta.json</translate> + </a> <button :disabled="disableUploadButton" @click="confirm" - class="btn btn-info mr-2" + class="btn btn-sm btn-info ml-2" type="button" > <translate>Confirm</translate> </button> - <button :key="1" @click="deleteTempData()" class="btn btn-warning"> - Back - </button> </span> </div> - <div v-if="uploadState" class="d-flex flex-row-100 mt-3"> - <button :key="2" @click="back()" class="ml-auto btn btn-warning"> + <div v-if="uploadState" class="d-flex mt-2 p-2 border-top"> + <button :key="2" @click="back()" class="btn btn-sm btn-warning"> Back </button> </div>
--- a/client/src/components/importconfiguration/types/WaterwayProfiles.vue Thu May 16 09:35:37 2019 +0200 +++ b/client/src/components/importconfiguration/types/WaterwayProfiles.vue Thu May 16 09:52:32 2019 +0200 @@ -1,6 +1,6 @@ <template> <div> - <div class="mb-4"> + <div class="mb-2 px-2"> <div :key="1" class="flex-column mr-4"> <div class="flex-row text-left"> <small class="text-muted"> @@ -27,7 +27,11 @@ <small class="text-muted"> <translate>URL</translate> </small> </div> <div class="w-100"> - <input class="form-control" type="url" v-model="url" /> + <input + class="form-control form-control-sm" + type="url" + v-model="url" + /> </div> </div> </div> @@ -37,14 +41,18 @@ > </div> <div class="d-flex flex-row"> - <div class="flex-column mt-3 mr-3 w-50"> + <div class="flex-column mt-2 mr-3 w-50"> <div class="flex-row text-left"> <small class="text-muted"> <translate>Featuretype</translate> </small> </div> <div class="w-100"> - <input class="form-control" type="text" v-model="featureType" /> + <input + class="form-control form-control-sm" + type="text" + v-model="featureType" + /> </div> <div v-if="!featureType" class="d-flex flex-row"> <small @@ -54,14 +62,18 @@ > </div> </div> - <div class="flex-column mt-3 w-50"> + <div class="flex-column mt-2 w-50"> <div class="flex-row text-left"> <small class="text-muted"> <translate>SortBy</translate> </small> </div> <div class="w-100"> - <input class="form-control" type="text" v-model="sortBy" /> + <input + class="form-control form-control-sm" + type="text" + v-model="sortBy" + /> </div> <div v-if="!sortBy" class="d-flex flex-row"> <small @@ -73,7 +85,7 @@ </div> </div> </div> - <div class="d-flex flex-row text-left"> + <div class="d-flex text-left px-2"> <div class="mt-3 mb-3 flex-column w-100"> <div class="custom-file"> <input @@ -89,15 +101,15 @@ </div> </div> </div> - <div class="d-flex flex-row-reverse w-100 mt-3"> - <button :key="1" @click="back()" class="btn btn-warning"> + <div class="d-flex justify-content-between w-100 p-2 border-top"> + <button :key="1" @click="back()" class="btn btn-sm btn-warning"> Back </button> <button :key="2" type="submit" @click="submit" - class="shadow-sm btn btn-info submit-button mr-3" + class="btn btn-sm btn-info submit-button" > <translate>Submit</translate> </button>
--- a/client/src/components/importconfiguration/types/Waterwayarea.vue Thu May 16 09:35:37 2019 +0200 +++ b/client/src/components/importconfiguration/types/Waterwayarea.vue Thu May 16 09:52:32 2019 +0200 @@ -1,34 +1,34 @@ <template> <div> - <div class="d-flex flex-row"> - <div class="flex-column mt-3 mr-3 w-100"> + <div class="d-flex px-2"> + <div class="flex-column w-100"> <div class="flex-row text-left"> <small class="text-muted"> <translate>URL</translate> </small> </div> <div class="w-100"> <input @input="urlChanged" - class="url form-control" + class="url form-control form-control-sm" type="url" :value="url" /> </div> </div> </div> - <div v-if="!url" class="d-flex flex-row"> + <div v-if="!url" class="d-flex px-2"> <small ><translate class="text-danger">Please enter a URL</translate></small > </div> - <div class="d-flex flex-row"> - <div class="flex-column mt-3 mr-3 w-50"> + <div class="d-flex px-2"> + <div class="flex-column mt-2 mr-3 w-50"> <div class="flex-row text-left"> <small class="text-muted"> <translate>Featuretype</translate> </small> </div> <div class="w-100"> <input @input="featureTypeChanged" - class="featuretype form-control" + class="featuretype form-control form-control-sm" type="text" :value="featureType" /> @@ -41,14 +41,14 @@ > </div> </div> - <div class="flex-column mt-3 w-50"> + <div class="flex-column mt-2 w-50"> <div class="flex-row text-left"> <small class="text-muted"> <translate>SortBy</translate> </small> </div> <div class="w-100"> <input @input="sortByChanged" - class="sortby form-control" + class="sortby form-control form-control-sm" type="text" :value="sortBy" />
--- a/client/src/components/importconfiguration/types/Waterwayaxis.vue Thu May 16 09:35:37 2019 +0200 +++ b/client/src/components/importconfiguration/types/Waterwayaxis.vue Thu May 16 09:52:32 2019 +0200 @@ -1,34 +1,34 @@ <template> <div> - <div class="d-flex flex-row"> - <div class="flex-column mt-3 mr-3 w-100"> + <div class="d-flex px-2"> + <div class="flex-column w-100"> <div class="flex-row text-left"> <small class="text-muted"> <translate>URL</translate> </small> </div> <div class="w-100"> <input @input="urlChanged" - class="url form-control" + class="url form-control form-control-sm" type="url" :value="url" /> </div> </div> </div> - <div v-if="!url" class="d-flex flex-row"> + <div v-if="!url" class="d-flex px-2"> <small ><translate class="text-danger">Please enter a URL</translate></small > </div> - <div class="d-flex flex-row"> - <div class="flex-column mt-3 mr-3 w-50"> + <div class="d-flex px-2"> + <div class="flex-column mt-2 mr-3 w-50"> <div class="flex-row text-left"> <small class="text-muted"> <translate>Featuretype</translate> </small> </div> <div class="w-100"> <input @input="featureTypeChanged" - class="featuretype form-control" + class="featuretype form-control form-control-sm" type="text" :value="featureType" /> @@ -41,14 +41,14 @@ > </div> </div> - <div class="flex-column mt-3 w-50"> + <div class="flex-column mt-2 w-50"> <div class="flex-row text-left"> <small class="text-muted"> <translate>SortBy</translate> </small> </div> <div class="w-100"> <input @input="sortByChanged" - class="sortby form-control" + class="sortby form-control form-control-sm" type="text" :value="sortBy" />
--- a/client/src/components/importconfiguration/types/Waterwaygauges.vue Thu May 16 09:35:37 2019 +0200 +++ b/client/src/components/importconfiguration/types/Waterwaygauges.vue Thu May 16 09:52:32 2019 +0200 @@ -1,34 +1,34 @@ <template> <div> - <div class="d-flex flex-row"> - <div class="flex-column mt-3 mr-3 w-100"> + <div class="d-flex px-2"> + <div class="flex-column w-100"> <div class="flex-row text-left"> <small class="text-muted"> <translate>URL</translate> </small> </div> <div class="w-100"> <input @input="urlChanged" - class="url form-control" + class="url form-control form-control-sm" type="url" :value="url" /> </div> </div> </div> - <div v-if="!url" class="d-flex flex-row"> + <div v-if="!url" class="d-flex px-2"> <small ><translate class="text-danger">Please enter a URL</translate></small > </div> - <div class="d-flex flex-row"> - <div class="flex-column mt-3 mr-3 w-50"> + <div class="d-flex px-2"> + <div class="flex-column mt-2 mr-3 w-50"> <div class="flex-row text-left"> <small class="text-muted"> <translate>Username</translate> </small> </div> <div class="w-100"> <input @input="usernameChanged" - class="username form-control" + class="username form-control form-control-sm" type="text" :value="username" /> @@ -41,14 +41,14 @@ > </div> </div> - <div class="flex-column mt-3 w-50"> + <div class="flex-column mt-2 w-50"> <div class="flex-row text-left"> <small class="text-muted"> <translate>Password</translate> </small> </div> <div class="w-100 d-flex flex-row"> <input @input="passwordChanged" - class="password form-control" + class="password form-control form-control-sm" :type="showPassword" :value="password" />
--- a/client/src/components/stretches/Stretches.vue Thu May 16 09:35:37 2019 +0200 +++ b/client/src/components/stretches/Stretches.vue Thu May 16 09:52:32 2019 +0200 @@ -1,5 +1,5 @@ <template> - <div class="d-flex flex-column mb-3"> + <div class="d-flex flex-column"> <UIBoxHeader icon="road" :title="defineStretchesLabel" @@ -7,7 +7,7 @@ /> <div class="position-relative"> <UISpinnerOverlay v-if="loading" /> - <div v-if="!edit" class="mb-3"> + <div v-if="!edit"> <UITableHeader :columns="[ { id: 'properties.name', title: `${nameLabel}`, class: 'col-4' }, @@ -27,18 +27,18 @@ :data="filteredStretches() | sortTable(sortColumn, sortDirection)" > <template v-slot:row="{ item: stretch }"> - <div class="py-1 col-4"> + <div class="py-1 px-2 col-4"> <a @click="moveMapToStretch(stretch)" href="#"> {{ stretch.properties.name }} </a> </div> - <div class="py-1 col-2"> + <div class="py-1 px-2 col-2"> {{ stretch.properties.date_info | surveyDate }} </div> - <div class="py-1 col-3"> + <div class="py-1 px-2 col-3"> {{ stretch.properties.source_organization }} </div> - <div class="py-1 col text-right"> + <div class="py-1 px-2 col text-right"> <button v-if="isInStaging(stretch.properties.name)" @click="gotoStaging(stretch.properties.name)" @@ -65,16 +65,23 @@ </div> </template> </UITableBody> + <div class="text-right p-2 border-top"> + <button :key="1" @click="startEdit()" class="btn btn-sm btn-info"> + <translate>New stretch</translate> + </button> + </div> </div> <div v-if="edit"> - <div class="ml-3 mr-3"> - <div class="d-flex flex-row justify-content-between"> - <div class="mt-2 w-50 mr-2 text-left"> - <small class="text-muted"> <translate>ID</translate> </small> + <div class="mx-2"> + <div class="d-flex justify-content-between mt-2"> + <div class="text-left flex-fill mr-1"> + <small class="text-muted"> + <translate>ID</translate> + </small> <input id="id" type="text" - class="form-control" + class="form-control form-control-sm" placeholder="AT_Section_12" aria-label="id" v-model="id" @@ -86,43 +93,44 @@ </small> </span> </div> - <div class="mt-2 w-50 ml-2 text-left"> - <div> - <small class="text-muted"> - <translate>Countrycode</translate> + <div class="text-left flex-fill ml-1"> + <small class="text-muted"> + <translate>Countrycode</translate> + </small> + <input + id="countryCode" + type="text" + class="form-control form-control-sm" + placeholder="AT" + aria-label="id" + v-model="countryCode" + /> + <span class="text-left text-danger"> + <small v-if="countryCodeError && !countryCode"> + <translate>Please enter a countrycode </translate> </small> - <input - id="countryCode" - type="text" - class="form-control" - placeholder="AT" - aria-label="id" - v-model="countryCode" - /> - <span class="text-left text-danger"> - <small v-if="countryCodeError && !countryCode"> - <translate>Please enter a countrycode </translate> - </small> - </span> - </div> - <div class="w-50 ml-2"></div> + </span> </div> </div> - <div class="d-flex flex-column justify-content-between"> - <div class="mt-2 text-left"> + <div class="d-flex justify-content-between mt-2"> + <div class="text-left flex-fill mr-1"> <small class="text-muted"> <translate>Start rhm</translate> </small> - <div class="d-flex flex-row"> + <div class="d-flex flex-row position-relative"> <input id="startrhm" type="text" - class="form-control" + class="form-control form-control-sm" placeholder="e.g. ATXXX000010000019900" aria-label="startrhm" v-model="startrhm" /> - <span class="input-group-text" @click="togglePipette('start')"> + <span + class="input-group-text position-absolute input-button" + @click="togglePipette('start')" + v-tooltip="pipetteTooltip" + > <font-awesome-icon :class="{ 'text-info': pipetteStart }" icon="crosshairs" @@ -135,18 +143,24 @@ </small> </span> </div> - <div class="mt-2 text-left"> - <small class="text-muted"> <translate>End rhm</translate> </small> - <div class="d-flex flex-row"> + <div class="text-left flex-fill ml-1"> + <small class="text-muted"> + <translate>End rhm</translate> + </small> + <div class="d-flex flex-row position-relative"> <input id="endrhm" type="text" - class="form-control" + class="form-control form-control-sm" placeholder="e.g. ATXXX000010000019900" aria-label="endrhm" v-model="endrhm" /> - <span class="input-group-text" @click="togglePipette('end')"> + <span + class="input-group-text position-absolute input-button" + @click="togglePipette('end')" + v-tooltip="pipetteTooltip" + > <font-awesome-icon :class="{ 'text-info': pipetteEnd }" icon="crosshairs" @@ -164,14 +178,14 @@ v-if="!editExistingStretch" class="d-flex flex-row justify-content-between" > - <div class="mt-2 mr-2 w-50 text-left"> + <div class="mt-2 mr-2 w-50 text-left"> <small class="text-muted"> <translate >Tolerance for snapping of waterway axis [m]</translate > </small> <input - class="form-control" + class="form-control form-control-sm" v-model.number="tolerance" placeholder="" type="number" @@ -195,7 +209,7 @@ <input id="objbn" type="text" - class="form-control" + class="form-control form-control-sm" placeholder="" aria-label="objbn" v-model="objbn" @@ -213,7 +227,7 @@ <input id="nobjbn" type="text" - class="form-control" + class="form-control form-control-sm" placeholder="" aria-label="nobjbn" v-model="nobjbn" @@ -228,7 +242,7 @@ <input id="date_info" type="date" - class="form-control" + class="form-control form-control-sm" placeholder="date_info" aria-label="date_info" v-model="date_info" @@ -244,7 +258,7 @@ <input id="source" type="text" - class="form-control" + class="form-control form-control-sm" placeholder="source" aria-label="source" v-model="source" @@ -257,28 +271,31 @@ </div> </div> </div> - <div class="text-right mt-2 mr-3 mb-3"> - <button @click="edit = false" class="btn btn-warning mr-2"> + <div class="d-flex justify-content-between mt-2 p-2 border-top"> + <button :key="2" @click="edit = false" class="btn btn-sm btn-warning"> Back </button> <button @click="save" type="submit" - class="shadow-sm btn btn-info submit-button" + class="shadow-sm btn btn-sm btn-info submit-button" > <translate>Submit</translate> </button> </div> </div> - <div class="text-right mr-3"> - <button v-if="!edit" @click="startEdit()" class="btn btn-info"> - <translate>New stretch</translate> - </button> - </div> </div> </div> </template> +<style lang="sass" scoped> +.input-button + border-top-left-radius: 0 + border-bottom-left-radius: 0 + right: 0 + height: 31px +</style> + <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. @@ -352,6 +369,9 @@ }, reviewTooltip() { return this.$gettext("Review pending import"); + }, + pipetteTooltip() { + return this.$gettext("Choose a distance mark by clicking on the map."); } }, watch: {