From c28c7f40f4972930190ac9ebb7f8dcb63ee6d64a Mon Sep 17 00:00:00 2001 From: Petrut-Daniel Coman <uhisu@student.kit.edu> Date: Wed, 23 Oct 2024 13:13:00 +0200 Subject: [PATCH 1/2] fixed styling for popups --- src/components/main/popup/PopUp.vue | 1 + src/components/main/popup/PopUpEditParameterValueMap.vue | 1 + src/components/main/popup/PopUpExportSkill.vue | 4 ++-- src/components/main/popup/PopUpImportSkill.vue | 6 ++---- src/components/main/popup/PopUpSelectProfile.vue | 6 ++++-- 5 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/components/main/popup/PopUp.vue b/src/components/main/popup/PopUp.vue index 9719655f..34c46062 100644 --- a/src/components/main/popup/PopUp.vue +++ b/src/components/main/popup/PopUp.vue @@ -115,6 +115,7 @@ export default { min-width: 500px; min-height: 500px; max-height: 80%; + max-width: 80%; background-color: var(--background-color); border: 2px solid #74a2cf; border-radius: 10px; diff --git a/src/components/main/popup/PopUpEditParameterValueMap.vue b/src/components/main/popup/PopUpEditParameterValueMap.vue index 57c15bcf..40e590c1 100644 --- a/src/components/main/popup/PopUpEditParameterValueMap.vue +++ b/src/components/main/popup/PopUpEditParameterValueMap.vue @@ -140,6 +140,7 @@ export default { #table-wrapper { padding: 25px 10px; + max-height: 60vh; display: flex; flex-flow: column nowrap; align-items: stretch; diff --git a/src/components/main/popup/PopUpExportSkill.vue b/src/components/main/popup/PopUpExportSkill.vue index 14674710..544423e2 100644 --- a/src/components/main/popup/PopUpExportSkill.vue +++ b/src/components/main/popup/PopUpExportSkill.vue @@ -285,7 +285,7 @@ export default { #form-container { min-width: 400px; min-height: 275px; - max-height: 80%; + max-height: 80vh; overflow-y: auto; flex-shrink: 0; padding: 42px; @@ -382,7 +382,7 @@ export default { flex-flow: column nowrap; align-items: center; gap: 15px; - max-height: 350px; + max-height: 45vh; } .modal-action { diff --git a/src/components/main/popup/PopUpImportSkill.vue b/src/components/main/popup/PopUpImportSkill.vue index 535b11e8..fa0a1eed 100644 --- a/src/components/main/popup/PopUpImportSkill.vue +++ b/src/components/main/popup/PopUpImportSkill.vue @@ -100,9 +100,6 @@ export default { <template> <div id="pop-up-import-skills"> - <h2 id="title"> - Import Skills - </h2> <div id="form-container"> <div id="names-preview"> <span v-for="name in currentFileNames" :key="name" class="file-entry"> @@ -138,7 +135,6 @@ export default { :disabled="currentFiles.length === 0" @click="importSkills" > - >>>>>>> main Import </button> </div> @@ -154,6 +150,8 @@ export default { display: flex; flex-direction: column; gap: 5px; + max-height: 45vh; + overflow: auto; } .file-entry { diff --git a/src/components/main/popup/PopUpSelectProfile.vue b/src/components/main/popup/PopUpSelectProfile.vue index 6f29ae65..4669c90c 100644 --- a/src/components/main/popup/PopUpSelectProfile.vue +++ b/src/components/main/popup/PopUpSelectProfile.vue @@ -103,10 +103,12 @@ export default { #tree-view { min-width: 500px; min-height: 300px; + max-height: 40vh; + overflow: auto; padding: 42px; display: flex; - align-items: center; - justify-content: center; + align-items: safe center; + justify-content: safe center; } .modal-action { -- GitLab From 244abbf76a7ad3ccc8eaa80b556926659f68a35a Mon Sep 17 00:00:00 2001 From: Petrut-Daniel Coman <uhisu@student.kit.edu> Date: Wed, 23 Oct 2024 14:18:05 +0200 Subject: [PATCH 2/2] more fix more good yeees --- src/components/main/popup/PopUp.vue | 1 - .../main/popup/PopUpEditParameterValueMap.vue | 55 ++++++++----------- .../main/popup/PopUpExportSkill.vue | 10 ++-- .../main/popup/PopUpImportSkill.vue | 9 ++- .../main/popup/PopUpSelectProfile.vue | 5 +- 5 files changed, 37 insertions(+), 43 deletions(-) diff --git a/src/components/main/popup/PopUp.vue b/src/components/main/popup/PopUp.vue index 34c46062..7c54bb48 100644 --- a/src/components/main/popup/PopUp.vue +++ b/src/components/main/popup/PopUp.vue @@ -122,7 +122,6 @@ export default { text-align: center; padding: 20px 40px; display: flex; - overflow-y: auto; flex-direction: column; justify-content: space-between; align-items: stretch; diff --git a/src/components/main/popup/PopUpEditParameterValueMap.vue b/src/components/main/popup/PopUpEditParameterValueMap.vue index 40e590c1..c4af38a9 100644 --- a/src/components/main/popup/PopUpEditParameterValueMap.vue +++ b/src/components/main/popup/PopUpEditParameterValueMap.vue @@ -94,57 +94,48 @@ export default { <template> <div id="edit-parameter-value-map"> - <div id="container"> - <div id="table-wrapper"> - <div v-if="grid" id="content"> - <TableComponent - :grid="grid" - :show-add-row-btn="!isNativeSkill" - show-add-column-btn - @on-add-row="addParameter" - @on-add-column="addProfile" - @on-delete-entry="deleteParameter" - /> - </div> - </div> - <div class="modal-action"> - <button class="modal-basic-button" @click="close"> - close - </button> + <div id="table-wrapper"> + <div v-if="grid" id="content"> + <TableComponent + :grid="grid" + :show-add-row-btn="!isNativeSkill" + show-add-column-btn + @on-add-row="addParameter" + @on-add-column="addProfile" + @on-delete-entry="deleteParameter" + /> </div> </div> + <div class="modal-action"> + <button class="modal-basic-button" @click="close"> + close + </button> + </div> </div> </template> <style scoped> -#title { - color: var(--primary-text-color); -} - #edit-parameter-value-map { width: 100%; height: 100%; -} - -#container { - min-height: 400px; + overflow: hidden; display: flex; - flex-flow: column nowrap; - justify-content: space-between; + flex-direction: column; } #content { - max-height: 800px; - overflow-y: auto; + display: flex; + flex-direction: column; + overflow: auto; } #table-wrapper { padding: 25px 10px; - max-height: 60vh; display: flex; + overflow: auto; flex-flow: column nowrap; - align-items: stretch; - justify-content: center; + align-items: safe stretch; + justify-content: safe center; } #tabs { diff --git a/src/components/main/popup/PopUpExportSkill.vue b/src/components/main/popup/PopUpExportSkill.vue index 544423e2..ef386561 100644 --- a/src/components/main/popup/PopUpExportSkill.vue +++ b/src/components/main/popup/PopUpExportSkill.vue @@ -267,6 +267,9 @@ export default { } #pop-up-export-skills { + width: 100%; + height: 100%; + overflow: hidden; display: flex; flex-direction: column; } @@ -283,14 +286,11 @@ export default { } #form-container { + display: flex; min-width: 400px; - min-height: 275px; - max-height: 80vh; - overflow-y: auto; - flex-shrink: 0; + overflow: auto; padding: 42px; margin: 10px 0; - display: flex; align-items: safe center; justify-content: safe center; flex-direction: column; diff --git a/src/components/main/popup/PopUpImportSkill.vue b/src/components/main/popup/PopUpImportSkill.vue index fa0a1eed..89dec3fa 100644 --- a/src/components/main/popup/PopUpImportSkill.vue +++ b/src/components/main/popup/PopUpImportSkill.vue @@ -142,15 +142,18 @@ export default { </template> <style scoped> -#title { - color: var(--primary-text-color); +#pop-up-import-skills { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + overflow: hidden; } #names-preview { display: flex; flex-direction: column; gap: 5px; - max-height: 45vh; overflow: auto; } diff --git a/src/components/main/popup/PopUpSelectProfile.vue b/src/components/main/popup/PopUpSelectProfile.vue index 4669c90c..2c329325 100644 --- a/src/components/main/popup/PopUpSelectProfile.vue +++ b/src/components/main/popup/PopUpSelectProfile.vue @@ -58,6 +58,9 @@ export default { #pop-up-select-profile { width: 100%; height: 100%; + overflow: hidden; + display: flex; + flex-direction: column; } .legend { @@ -102,8 +105,6 @@ export default { #tree-view { min-width: 500px; - min-height: 300px; - max-height: 40vh; overflow: auto; padding: 42px; display: flex; -- GitLab