Mercurial > gemma
changeset 2534:bb5286acfee2
client: reduced spacings between and inside boxes and more compact main menu
line wrap: on
line diff
--- a/client/src/assets/application.scss Thu Mar 07 11:57:05 2019 +0100 +++ b/client/src/assets/application.scss Thu Mar 07 12:15:14 2019 +0100 @@ -20,7 +20,7 @@ $icon-width: 2rem; $large-offset: 2rem; $offset: 1rem; -$sidebar-width: 21rem; +$sidebar-width: 16rem; $slight-transparent: 0.96; $small-offset: 0.5rem; $smaller: 0.9rem; @@ -104,7 +104,12 @@ .expanded { max-height: 999px; max-width: 999px; - margin: 0 0.5rem 1rem 0.5rem; + margin: 0 0.25rem 0.5rem 0.25rem; +} + +.box-body { + padding: 0.75rem; + text-align: left; } // needed to fix the whitespace problem of
--- a/client/src/components/App.vue Thu Mar 07 11:57:05 2019 +0100 +++ b/client/src/components/App.vue Thu Mar 07 12:15:14 2019 +0100 @@ -1,7 +1,7 @@ <template> <div id="app" class="main"> <div v-if="isAuthenticated" class="d-flex flex-column userinterface"> - <div class="topbar d-flex pt-3 mx-3"> + <div class="topbar d-flex pt-2 mx-2"> <div class="mr-auto d-flex"> <Sidebar :routeName="routeName"></Sidebar> <div :class="searchContainer"> @@ -97,7 +97,7 @@ }, searchContainer() { return [ - "ml-3", + "ml-2", { wide: this.showSearchbar }
--- a/client/src/components/ImportApprovedGaugeMeasurement.vue Thu Mar 07 11:57:05 2019 +0100 +++ b/client/src/components/ImportApprovedGaugeMeasurement.vue Thu Mar 07 12:15:14 2019 +0100 @@ -1,7 +1,7 @@ <template> <div class="d-flex flex-row"> <Spacer></Spacer> - <div class="card sysconfig mt-3 shadow-xs w-100 h-100 mr-3"> + <div class="card sysconfig mt-2 shadow-xs w-100 h-100 mr-2"> <UIBoxHeader icon="upload" title="Import approved gaugemeasurements" /> <div class="card-body stretches-card"> <div class="w-95 ml-auto mr-auto mt-4 mb-4">
--- a/client/src/components/ImportSoundingresults.vue Thu Mar 07 11:57:05 2019 +0100 +++ b/client/src/components/ImportSoundingresults.vue Thu Mar 07 12:15:14 2019 +0100 @@ -2,7 +2,7 @@ <div class="main d-flex flex-column"> <div class="d-flex flex-row"> <Spacer></Spacer> - <div class="card shadow-xs mt-3 mr-3 w-100 h-100"> + <div class="card shadow-xs mt-2 mr-2 w-100 h-100"> <UIBoxHeader icon="upload" title="Import Soundingresults" /> <div v-if="editState"> <div
--- a/client/src/components/ImportWaterwayProfiles.vue Thu Mar 07 11:57:05 2019 +0100 +++ b/client/src/components/ImportWaterwayProfiles.vue Thu Mar 07 12:15:14 2019 +0100 @@ -1,7 +1,7 @@ <template> <div class="d-flex flex-row"> <Spacer></Spacer> - <div class="card sysconfig mt-3 shadow-xs w-100 h-100 mr-3"> + <div class="card sysconfig mt-2 shadow-xs w-100 h-100 mr-2"> <UIBoxHeader icon="upload" title="Import Waterway Profiles" /> <div class="card-body stretches-card"> <div class="w-95 ml-auto mr-auto mt-4 mb-4">
--- a/client/src/components/Logs.vue Thu Mar 07 11:57:05 2019 +0100 +++ b/client/src/components/Logs.vue Thu Mar 07 12:15:14 2019 +0100 @@ -2,7 +2,7 @@ <div class="main d-flex flex-column"> <div class="d-flex flex-row"> <Spacer></Spacer> - <div class="card logs shadow-xs mt-3 mr-3"> + <div class="card logs shadow-xs mt-2 mr-2"> <UIBoxHeader icon="book" title="Logs" /> <div class="logoutput text-left bg-white"> <pre id="code" v-highlightjs="logs">
--- a/client/src/components/Pdftool.vue Thu Mar 07 11:57:05 2019 +0100 +++ b/client/src/components/Pdftool.vue Thu Mar 07 12:15:14 2019 +0100 @@ -11,7 +11,7 @@ title="Generate PDF" :closeCallback="close" /> - <div class="p-3 text-left"> + <div class="box-body"> <select @change="applyTemplateToForm" v-model="form.template"
--- a/client/src/components/Sidebar.vue Thu Mar 07 11:57:05 2019 +0100 +++ b/client/src/components/Sidebar.vue Thu Mar 07 12:15:14 2019 +0100 @@ -59,9 +59,7 @@ fixed-width icon="upload" ></font-awesome-icon> - <span class="fix-trans-space" v-translate - >Import soundingresults</span - > + <span class="fix-trans-space" v-translate>Soundingresults</span> </router-link> <router-link to="/importapprovedgaugemeasurement"> <font-awesome-icon @@ -70,7 +68,7 @@ icon="upload" ></font-awesome-icon> <span class="fix-trans-space" v-translate - >Import approved gaugemeasurements</span + >Approved Gaugemeasurements</span > </router-link> <router-link to="/importwaterwayprofiles"> @@ -79,9 +77,7 @@ fixed-width icon="upload" ></font-awesome-icon> - <span class="fix-trans-space" v-translate - >Import waterway profiles</span - > + <span class="fix-trans-space" v-translate>Waterway Profiles</span> </router-link> <router-link to="/importschedule"> <font-awesome-icon @@ -89,7 +85,7 @@ fixed-width icon="clock" ></font-awesome-icon> - <translate class="fix-trans-space">Imports</translate> + <translate class="fix-trans-space">Import Schedule</translate> </router-link> <small class="text-muted pl-3"> <translate>Systemadministration</translate> @@ -243,9 +239,10 @@ .menu a { display: block; text-align: left; - padding: 0.5rem 1rem; + padding: 0.25rem 0.5rem; color: #333; text-decoration: none; + font-size: 90%; .indicator { left: auto; right: 10px;
--- a/client/src/components/Spacer.vue Thu Mar 07 11:57:05 2019 +0100 +++ b/client/src/components/Spacer.vue Thu Mar 07 12:15:14 2019 +0100 @@ -23,7 +23,7 @@ ...mapState("application", ["showSidebar"]), room() { return [ - "spacer ml-3", + "spacer ml-2", { "spacer-expanded": this.showSidebar, "spacer-collapsed": !this.showSidebar @@ -40,11 +40,11 @@ } .spacer-collapsed { - min-width: $icon-width + $offset; + min-width: $icon-width + $small-offset; transition: $transition-fast; } .spacer-expanded { - min-width: $sidebar-width + $offset; + min-width: $sidebar-width + $small-offset; } </style>
--- a/client/src/components/Zoom.vue Thu Mar 07 11:57:05 2019 +0100 +++ b/client/src/components/Zoom.vue Thu Mar 07 12:15:14 2019 +0100 @@ -1,6 +1,6 @@ <template> <div - class="d-flex buttoncontainer shadow-xs mb-3 position-absolute" + class="d-flex buttoncontainer shadow-xs mb-2 position-absolute" :style="showSplitscreen ? 'margin-bottom: 51vh !important' : ''" > <button
--- a/client/src/components/fairway/Infobar.vue Thu Mar 07 11:57:05 2019 +0100 +++ b/client/src/components/fairway/Infobar.vue Thu Mar 07 12:15:14 2019 +0100 @@ -1,7 +1,7 @@ <template> <div v-if="Object.keys(currentProfile).length && !showSplitscreen" - class="ui-element shadow-xs infobar rounded bg-white ml-auto mb-3 mr-3" + class="ui-element shadow-xs infobar rounded bg-white ml-auto mb-2 mr-2" > <div class="d-flex flex-row justify-content-between h-100"> <h6 class="my-auto px-2">
--- a/client/src/components/fairway/Profiles.vue Thu Mar 07 11:57:05 2019 +0100 +++ b/client/src/components/fairway/Profiles.vue Thu Mar 07 12:15:14 2019 +0100 @@ -7,9 +7,7 @@ > <div style="width: 18rem"> <UIBoxHeader icon="chart-area" title="Profiles" :closeCallback="close" /> - <div - class="d-flex flex-column p-3 flex-grow-1 text-left position-relative" - > + <div class="box-body"> <div class="loading d-flex justify-content-center align-items-center" v-if="surveysLoading || profileLoading"
--- a/client/src/components/identify/Identify.vue Thu Mar 07 11:57:05 2019 +0100 +++ b/client/src/components/identify/Identify.vue Thu Mar 07 12:15:14 2019 +0100 @@ -7,7 +7,7 @@ > <div style="width: 18rem"> <UIBoxHeader icon="info" title="Identified" :closeCallback="close" /> - <div class="features flex-grow-1 text-left"> + <div class="features"> <div v-if="currentMeasurement"> <small class="d-block bg-dark text-light text-center px-2 py-1"> {{ $gettext("Measurement") }} @@ -43,7 +43,7 @@ <translate>No features identified.</translate> </div> </div> - <div class="versioninfo border-top p-3 text-left"> + <div class="versioninfo border-top box-body"> <span v-translate="{ license: 'AGPL-3.0-or-later' }"> This app uses <i>gemma</i>, which is Free Software under <br /> %{ license } without warranty, see docs for details.
--- a/client/src/components/importschedule/Importschedule.vue Thu Mar 07 11:57:05 2019 +0100 +++ b/client/src/components/importschedule/Importschedule.vue Thu Mar 07 12:15:14 2019 +0100 @@ -1,9 +1,9 @@ <template> <div class="d-flex flex-row"> <Spacer></Spacer> - <div class="mt-3 w-100"> + <div class="mt-2 w-100"> <div class="card flex-grow-1 schedulecard shadow-xs"> - <UIBoxHeader icon="clock" title="Imports" /> + <UIBoxHeader icon="clock" title="Import Schedule" /> <div class="searchandfilter p-3 w-50 mx-auto"> <div class="searchgroup input-group"> <div class="input-group-prepend"> @@ -231,7 +231,7 @@ } .schedulecard { - margin-right: $offset; + margin-right: $small-offset; min-height: 20rem; }
--- a/client/src/components/layers/Layers.vue Thu Mar 07 11:57:05 2019 +0100 +++ b/client/src/components/layers/Layers.vue Thu Mar 07 12:15:14 2019 +0100 @@ -7,7 +7,7 @@ > <div style="width: 18rem"> <UIBoxHeader icon="layer-group" title="Layers" :closeCallback="close" /> - <div class="d-flex flex-column p-3 small"> + <div class="box-body small"> <Layerselect v-for="(layer, index) in layersForLegend" :layerindex="index"
--- a/client/src/components/systemconfiguration/Systemconfiguration.vue Thu Mar 07 11:57:05 2019 +0100 +++ b/client/src/components/systemconfiguration/Systemconfiguration.vue Thu Mar 07 12:15:14 2019 +0100 @@ -1,7 +1,7 @@ <template> <div class="d-flex flex-row"> <Spacer></Spacer> - <div class="card sysconfig mt-3 shadow-xs"> + <div class="card sysconfig mt-2 shadow-xs"> <UIBoxHeader icon="wrench" title="Systemconfiguration" /> <div class="card-body text-left"> <PDFTemplates /> @@ -14,7 +14,7 @@ <style scoped lang="scss"> .sysconfig { - margin-right: $offset; + margin-right: $small-offset; width: 100%; height: 100%; }
--- a/client/src/components/toolbar/Toolbar.vue Thu Mar 07 11:57:05 2019 +0100 +++ b/client/src/components/toolbar/Toolbar.vue Thu Mar 07 12:15:14 2019 +0100 @@ -1,5 +1,5 @@ <template> - <div class="ml-2"> + <div class="ml-1"> <div :class=" 'rounded-top toolbar toolbar-' +
--- a/client/src/components/usermanagement/Usermanagement.vue Thu Mar 07 11:57:05 2019 +0100 +++ b/client/src/components/usermanagement/Usermanagement.vue Thu Mar 07 12:15:14 2019 +0100 @@ -1,7 +1,7 @@ <template> <div class="main d-flex flex-row" style="position: relative;"> <Spacer></Spacer> - <div class="d-flex content py-3"> + <div class="d-flex content py-2"> <div :class="userlistStyle"> <div class="card shadow-xs"> <UIBoxHeader icon="users-cog" title="Users" /> @@ -200,7 +200,7 @@ }, userlistStyle() { return [ - "userlist mr-3", + "userlist mr-2", { userlistsmall: this.isUserDetailsVisible, userlistextended: !this.isUserDetailsVisible