Skip to content

Commit

Permalink
Merge pull request #1 from Clip-sub/master
Browse files Browse the repository at this point in the history 
Refine header bar for mobile devices and some tweaks
  • Loading branch information
@BastianGanze
BastianGanze authored Feb 25, 2021
2 parents 38bf472 + 790a35a commit f67a164
Show file tree
Hide file tree
Showing 6 changed files with 118 additions and 87 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
# NPM dependencies cache
/node_modules/
/package-lock.json
/yarn.lock

# NPM/webpack output
/dist/
Expand Down
72 changes: 36 additions & 36 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,43 +28,43 @@
"test": "jest --coverage src/"
},
"dependencies": {
"bootstrap": "^4.4.1",
"bootstrap-vue": "^2.12.0",
"vue": "^2.6.11",
"vue-i18n": "^8.17.3",
"vue-unique-id": "^3.1.0",
"vuex": "^3.2.0",
"vuex-map-fields": "^1.4.0",
"vuex-persistedstate": "^3.0.1"
"bootstrap": "4.5.2",
"bootstrap-vue": "2.17.3",
"vue": "2.6.12",
"vue-i18n": "8.21.1",
"vue-unique-id": "3.1.1",
"vuex": "3.5.1",
"vuex-map-fields": "1.4.0",
"vuex-persistedstate": "3.1.0"
},
"devDependencies": {
"@babel/core": "^7.9.0",
"@babel/preset-env": "^7.9.5",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"compression-webpack-plugin": "^3.1.0",
"css-loader": "^3.5.2",
"eslint": "^6.8.0",
"eslint-config-standard": "^14.1.1",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1",
"eslint-plugin-vue": "^6.2.2",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.2.0",
"jest": "^26.0.1",
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.1",
"offline-plugin": "^5.0.7",
"robotstxt-webpack-plugin": "^7.0.0",
"sass-loader": "^8.0.2",
"vue-loader": "^15.9.1",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3",
"webpack-pwa-manifest": "^4.2.0"
"@babel/core": "7.11.6",
"@babel/preset-env": "7.11.5",
"babel-eslint": "10.1.0",
"babel-loader": "8.1.0",
"clean-webpack-plugin": "3.0.0",
"compression-webpack-plugin": "6.0.2",
"css-loader": "4.3.0",
"eslint": "7.9.0",
"eslint-config-standard": "14.1.1",
"eslint-plugin-import": "2.22.0",
"eslint-plugin-node": "11.1.0",
"eslint-plugin-promise": "4.2.1",
"eslint-plugin-standard": "4.0.1",
"eslint-plugin-vue": "6.2.2",
"file-loader": "6.1.0",
"html-webpack-plugin": "4.5.0",
"jest": "26.4.2",
"mini-css-extract-plugin": "0.11.2",
"node-sass-chokidar": "1.5.0",
"offline-plugin": "5.0.7",
"robotstxt-webpack-plugin": "7.0.0",
"sass-loader": "10.0.2",
"vue-loader": "15.9.3",
"vue-template-compiler": "2.6.12",
"webpack": "4.44.2",
"webpack-cli": "3.3.12",
"webpack-dev-server": "3.11.0",
"webpack-pwa-manifest": "4.2.0"
}
}
109 changes: 60 additions & 49 deletions src/components/Toolbar.vue
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,68 @@
<template>
<b-container fluid>
<b-row align-h="center">
<b-col cols="12" xl>
<b-form-group :label="$t('commands')" :label-for="$id('commands')" label-align="center" label-class="font-weight-bold" label-size="lg">
<b-textarea :id="$id('commands')" v-model="commands" lazy autofocus rows="5" no-resize />
</b-form-group>
</b-col>
<b-col cols="auto">
<b-form-group :label="$t('line.title')" :label-for="$id('lineWidth')" label-align="center" label-class="font-weight-bold" label-size="lg">
<b-form-group :label="$t('line.width') + ': '" :label-for="$id('lineWidth')" label-size="sm" label-cols="4" label-align="right">
<b-input :id="$id('lineWidth')" v-sync.number="lineWidth" :placeholder="$t('missing_number')" type="number" required min="0" :max="lineWidthLimit" step="0.125" />
</b-form-group>
<b-form-group :label="$t('line.cap') + ': '" :label-for="$id('lineCap')" label-size="sm" label-cols="4" label-align="right">
<b-select :id="$id('lineCap')" v-model="lineCap" :options="['butt', 'round', 'square']" />
</b-form-group>
<b-form-group :label="$t('line.join') + ': '" :label-for="$id('lineJoin')" label-size="sm" label-cols="4" label-align="right">
<b-select :id="$id('lineJoin')" v-model="lineJoin" :options="['bevel', 'round', 'miter']" />
</b-form-group>
</b-form-group>
</b-col>
<b-col cols="auto">
<b-form-group :label="$t('viewport.title')" :label-for="$id('viewportHeight')" label-align="center" label-class="font-weight-bold" label-size="lg">
<b-form-group :label="$t('viewport.size') + ': '" :label-for="$id('viewportHeight')" label-size="sm" label-cols="3" label-align="right">
<b-input-group>
<label :for="$id('viewportWidth')" class="sr-only">{{ $t('viewport.size') }}</label><!-- Pleasure screen readers ("every input needs a label") -->
<b-input :id="$id('viewportWidth')" readonly :value="viewportWidth.toFixed(2)" />
<b-input-group-prepend is-text>X</b-input-group-prepend>
<b-input :id="$id('viewportHeight')" v-sync.number="viewportHeight" :placeholder="$t('missing_number')" required type="number" min="1" :max="viewportDimensionLimit" step="1" />
</b-input-group>
</b-form-group>
<b-form-group :label="$t('viewport.offset') + ': '" :label-for="$id('viewportOffsetX')" label-size="sm" label-cols="3" label-align="right">
<b-input-group>
<b-input :id="$id('viewportOffsetX')" v-sync.number="viewportOffsetX" :placeholder="$t('missing_number')" required type="number" :min="-viewportOffsetLimit" :max="viewportOffsetLimit" step="1" />
<b-input-group-prepend is-text>X</b-input-group-prepend>
<label :for="$id('viewportOffsetY')" class="sr-only">{{ $t('viewport.offset') }}</label><!-- Pleasure screen readers ("every input needs a label") -->
<b-input :id="$id('viewportOffsetY')" v-sync.number="viewportOffsetY" :placeholder="$t('missing_number')" required type="number" :min="-viewportOffsetLimit" :max="viewportOffsetLimit" step="1" />
</b-input-group>
</b-form-group>
</b-form-group>
</b-col>
</b-row>
</b-container>
<b-nav class="navbar">
<b-container fluid>
<b-button v-b-toggle.menu-collapse type="button" class="navbar-toggle collapsed">
<b-icon icon="list" color="white" variant="white" />
</b-button>

<b-collapse id="menu-collapse" aria-expanded="true" data-breakpoint="800" invisible>
<b-row align-h="center">
<b-col cols="12" xl>
<b-form-group :label="$t('commands')" :label-for="$id('commands')" label-align="center" label-class="font-weight-bold" label-size="lg">
<b-textarea :id="$id('commands')" v-model="commands" lazy autofocus rows="5" no-resize />
</b-form-group>
</b-col>

<b-col cols="auto">
<b-form-group :label="$t('line.title')" :label-for="$id('lineWidth')" label-align="center" label-class="font-weight-bold" label-size="lg">
<b-form-group :label="$t('line.width') + ': '" :label-for="$id('lineWidth')" label-size="sm" label-cols="4" label-align="right">
<b-input :id="$id('lineWidth')" v-sync.number="lineWidth" :placeholder="$t('missing_number')" type="number" required min="0" :max="lineWidthLimit" step="0.125" />
</b-form-group>
<b-form-group :label="$t('line.cap') + ': '" :label-for="$id('lineCap')" label-size="sm" label-cols="4" label-align="right">
<b-select :id="$id('lineCap')" v-model="lineCap" :options="['butt', 'round', 'square']" />
</b-form-group>
<b-form-group :label="$t('line.join') + ': '" :label-for="$id('lineJoin')" label-size="sm" label-cols="4" label-align="right">
<b-select :id="$id('lineJoin')" v-model="lineJoin" :options="['bevel', 'round', 'miter']" />
</b-form-group>
</b-form-group>
</b-col>

<b-col cols="auto">
<b-form-group :label="$t('viewport.title')" :label-for="$id('viewportHeight')" label-align="center" label-class="font-weight-bold" label-size="lg">
<b-form-group :label="$t('viewport.size') + ': '" :label-for="$id('viewportHeight')" label-size="sm" label-cols="3" label-align="right">
<b-input-group>
<label :for="$id('viewportWidth')" class="sr-only">{{ $t('viewport.size') }}</label><!-- Pleasure screen readers ("every input needs a label") -->
<b-input :id="$id('viewportWidth')" readonly :value="viewportWidth.toFixed(2)" />
<b-input-group-prepend is-text>X</b-input-group-prepend>
<b-input :id="$id('viewportHeight')" v-sync.number="viewportHeight" :placeholder="$t('missing_number')" required type="number" min="1" :max="viewportDimensionLimit" step="1" />
</b-input-group>
</b-form-group>
<b-form-group :label="$t('viewport.offset') + ': '" :label-for="$id('viewportOffsetX')" label-size="sm" label-cols="3" label-align="right">
<b-input-group>
<b-input :id="$id('viewportOffsetX')" v-sync.number="viewportOffsetX" :placeholder="$t('missing_number')" required type="number" :min="-viewportOffsetLimit" :max="viewportOffsetLimit" step="1" />
<b-input-group-prepend is-text>X</b-input-group-prepend>
<label :for="$id('viewportOffsetY')" class="sr-only">{{ $t('viewport.offset') }}</label><!-- Pleasure screen readers ("every input needs a label") -->
<b-input :id="$id('viewportOffsetY')" v-sync.number="viewportOffsetY" :placeholder="$t('missing_number')" required type="number" :min="-viewportOffsetLimit" :max="viewportOffsetLimit" step="1" />
</b-input-group>
</b-form-group>
</b-form-group>
</b-col>
</b-row>
</b-collapse>
</b-container>
</b-nav>
</template>

<style lang="scss" scoped>
.container-fluid {
max-height: 12.7rem;
overflow-y: auto;
.container-fluid {
overflow-y: auto;
display: block;
input, select {
max-width: 6rem;
}
}
input,
select {
max-width: 6rem;
}
}
</style>

<script>
Expand Down
13 changes: 13 additions & 0 deletions src/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,3 +45,16 @@ html {
.browser-ie { display: none; }
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .browser-ie { display: block; } }
}

header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
display: block;
}

main {
padding-top: 54px;
}
8 changes: 7 additions & 1 deletion src/plugins/bootstrap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,10 @@ import {
InputGroupPlugin,
FormTextareaPlugin,
FormInputPlugin,
FormSelectPlugin
FormSelectPlugin,
ButtonPlugin,
CollapsePlugin,
NavbarPlugin
} from 'bootstrap-vue';
import './bootstrap.scss';

Expand All @@ -22,6 +25,9 @@ Vue.use(InputGroupPlugin);
Vue.use(FormTextareaPlugin);
Vue.use(FormInputPlugin);
Vue.use(FormSelectPlugin);
Vue.use(ButtonPlugin);
Vue.use(CollapsePlugin);
Vue.use(NavbarPlugin);

// For more:
// * https://bootstrap-vue.js.org/docs#tree-shaking-with-module-bundlers
Expand Down
2 changes: 1 addition & 1 deletion webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ module.exports = {
}),
new VueLoaderPlugin(),
new CompressionPlugin({
threshold: 8192, // Don"t process already tiny files
threshold: 8192, // Don't process already tiny files
cache: true // Faster re-builds
}),
new OfflinePlugin({
Expand Down

0 comments on commit f67a164

Please sign in to comment.