From 75de22f41b87d1b987c823459159cbcab1080a9e Mon Sep 17 00:00:00 2001 From: Jannik Schönartz Date: Thu, 9 May 2019 12:53:32 +0000 Subject: [webapp] Add screenshot css classes & add Screenshot classes to the User Module --- webapp/src/assets/styles.css | 78 ++++++++++++++++++++++++++++++++++++ webapp/src/components/DataTable.vue | 2 +- webapp/src/components/UserModule.vue | 8 ++-- 3 files changed, 83 insertions(+), 5 deletions(-) (limited to 'webapp') diff --git a/webapp/src/assets/styles.css b/webapp/src/assets/styles.css index b33e2e7..aa6f146 100644 --- a/webapp/src/assets/styles.css +++ b/webapp/src/assets/styles.css @@ -70,3 +70,81 @@ html { .tabbar-tabicon { margin-right: 12px; } + +.tutorial-enabled .tutorial-element { + position: relative; +} + +.tutorial-enabled .tutorial-element::after { + content: ''; + border: red solid 2px !important; + border-radius: 4px; + position: absolute; + top: -3px; + bottom: -3px; + left: -3px; + right: -3px; +} + +.tutorial-enabled .tutorial-element.element-icon::after { + border-radius: 50%; +} + +.tutorial-enabled .tutorial-element::before { + font-weight: bold; + content: var(--label-number); + opacity: 1; + border-radius: 50%; + border: 2px solid red; + color: white; + width: 24px; + height: 24px; + text-align: center; + position: absolute; + font-size: larger; + background-color: red; + z-index: 4; + top: auto; + bottom: auto; + left: auto; + right: auto; + display: flex; + align-items: center; + justify-content: center; +} + +.tutorial-element.label-top-left::before { + top: -5px; + left: -10px; +} + +.tutorial-element.label-top-right::before { + top: -5px; + right: -10px; +} + +.tutorial-element.label-bottom-left::before { + bottom: -5px; + left: -10px; +} + +.tutorial-element.label-bottom-right::before { + bottom: -5px; + right: -10px; +} + +.tutorial-element.label-top::before { + top: -14px; +} + +.tutorial-element.label-bottom::before { + bottom: -14px; +} + +.tutorial-element.label-left::before { + left: -14px; +} + +.tutorial-element.label-right::before { + right: -14px; +} \ No newline at end of file diff --git a/webapp/src/components/DataTable.vue b/webapp/src/components/DataTable.vue index 94bd524..c011353 100644 --- a/webapp/src/components/DataTable.vue +++ b/webapp/src/components/DataTable.vue @@ -163,7 +163,7 @@
{{ item.data[header.key] }} - +
diff --git a/webapp/src/components/UserModule.vue b/webapp/src/components/UserModule.vue index 2ee6825..e89afe3 100644 --- a/webapp/src/components/UserModule.vue +++ b/webapp/src/components/UserModule.vue @@ -41,15 +41,15 @@
- edit + edit
- + delete{{ $tc('deleteUsers', selectedUsers.length, [selectedUsers.length]) }} - + edit{{ $t('createUser') }}
@@ -91,7 +91,7 @@ export default { return { tab: 0, headers: [ - { text: this.$t('id'), key: 'id' }, + { text: this.$t('id'), key: 'id', width: '50px', sortType: 'number' }, { text: this.$t('username'), key: 'username' }, { text: this.$t('name'), key: 'name' }, { text: this.$t('email'), key: 'email' }, -- cgit v1.2.3-55-g7522