From 34a8b5a25e5cd59942ae6393162c21c46d0f09e4 Mon Sep 17 00:00:00 2001
From: dcz <dcz@ipipan.waw.pl>
Date: Fri, 1 Jul 2022 07:20:58 +0200
Subject: [PATCH] CSS stype in edit view.
---
entries/static/entries/css/entries.css | 13 ++
.../entries/js/components/LexicalUnitEdit.js | 148 +++++++++---------
2 files changed, 89 insertions(+), 72 deletions(-)
diff --git a/entries/static/entries/css/entries.css b/entries/static/entries/css/entries.css
index a956369..7cd6434 100644
--- a/entries/static/entries/css/entries.css
+++ b/entries/static/entries/css/entries.css
@@ -237,4 +237,17 @@ legend {
.role-column {
min-width: 120px;
max-width: 120px;
+ width: 120px;
+}
+
+.role-header {
+ min-width: 100px;
+ max-width: 100px;
+ width: 100px;
+}
+
+.lu-table {
+ min-width: 400px;
+ max-width: 400px;
+ width: 400px;
}
diff --git a/entries/static/entries/js/components/LexicalUnitEdit.js b/entries/static/entries/js/components/LexicalUnitEdit.js
index d2cf69e..fca6bcd 100644
--- a/entries/static/entries/js/components/LexicalUnitEdit.js
+++ b/entries/static/entries/js/components/LexicalUnitEdit.js
@@ -813,87 +813,91 @@ Object.assign(LexicalUnitEdit, {
</tr>
</table>
<spinner />
- <div class="unifiedFrame mt-3" v-bind:data-frame_id="unified_frame.id" id="lexical-unit" v-html="unified_frame_title"></div>
- <table v-if="unified_frame.id" id="unified-frame" class="table m-0 table-borderless border border-secondary text-dark">
- <tbody>
- <tr>
- <th scope="row" class="py-2 px-1 text-secondary">Role</th>
- <td
- class="argument py-2 px-1 border-top border-left border-secondary role-column"
- :class="argument == active_unified_frame_argument && 'active'"
- v-for="argument in unified_frame_arguments"
- :key="argument.id"
- @click="unifiedFrameArgumentSelected(argument)"
- @mouseover="unifiedFrameArgumentHovered(argument)"
- @mouseleave="unifiedFrameArgumentHovered(null)"
- >
- {{ argument.role_type }}
-
- <div
- v-if="argument.role"
- >
- [{{ argument.role.str }}]
- </div>
- <div v-else>
- <ul class="ul-role">
- <li v-for="proposed_role in argument.proposed_roles">
- {{ proposed_role.str }}
- </li>
- </ul>
- </div>
- </td>
- </tr>
- <tr>
- <th scope="row" class="py-0 px-1 text-secondary">Selectional preferences</th>
- <td class="preferences py-0 px-0 border-top border-left border-secondary"
- v-for='argument in unified_frame_arguments'
- :key='argument.id'
- >
- <ul class="ul-preference" v-if="argument.preferences.length > 0">
- <li v-for='preference in argument.preferences'>
- <div
- v-if="preference.url != null"
- class="preference py-2 px-1 preference-bold"
- >
- <a class="synset-plwn" v-bind:href="preference.url" target="_blank">{{ preference.str }}</a>
- </div>
- <div v-else class="preference py-2 px-1 preference-bold">{{ preference.str }}</div>
- </li>
- </ul>
- <ul class="ul-preference">
- <li v-for="preference in slowal_frames2selecional_preferencies_mapping[argument.id]">
- <span v-if="preference.url != null" class="preference py-2 px-1">
- <a class="synset-plwn" v-bind:href="preference.url" target="_blank">{{ preference.str }}</a>
- </span>
- <span v-else class="preference py-2 px-1">{{ preference.str }}</span>
- <info-tooltip v-if="preference.info" :text="preference.info" />
- </li>
- </ul>
- </td>
- </tr>
- </tbody>
- </table>
-
- <div v-if="unified_frame.id" class="frame mt-3 mb-3">
- <table class="table m-0 table-borderless border border-secondary text-dark">
+ <div align="center">
+ <div align="left" style="display: table;">
+ <div class="unifiedFrame mt-3" v-bind:data-frame_id="unified_frame.id" id="lexical-unit" v-html="unified_frame_title"></div>
+ <table v-if="unified_frame.id" id="unified-frame" class="m-0 table-borderless border border-secondary text-dark">
<tbody>
<tr>
- <th scope="row" class="py-2 px-1 text-secondary">Jednostka leksykalna</th>
- <th scope="row" class="py-2 px-1 text-secondary">Opinion</th>
+ <th scope="row" class="py-2 px-1 text-secondary role-header">Role</th>
+ <td
+ class="argument py-2 px-1 border-top border-left border-secondary role-column"
+ :class="argument == active_unified_frame_argument && 'active'"
+ v-for="argument in unified_frame_arguments"
+ :key="argument.id"
+ @click="unifiedFrameArgumentSelected(argument)"
+ @mouseover="unifiedFrameArgumentHovered(argument)"
+ @mouseleave="unifiedFrameArgumentHovered(null)"
+ >
+ {{ argument.role_type }}
+
+ <div
+ v-if="argument.role"
+ >
+ [{{ argument.role.str }}]
+ </div>
+ <div v-else>
+ <ul class="ul-role">
+ <li v-for="proposed_role in argument.proposed_roles">
+ {{ proposed_role.str }}
+ </li>
+ </ul>
+ </div>
+ </td>
</tr>
- <tr class="preferences py-0 px-0 border-top border-left border-secondary"
- v-for='lexical_unit in lexical_units'
- >
- <td class="argument py-2 px-1 border-top border-left border-secondary">{{ lexical_unit.str }}</td>
- <td class="argument py-2 px-1 border-top border-left border-secondary">
- <img v-bind:src="img_prefix + 'entries/img/' +lexical_unit.opinion_key + '.svg'" width="12" height="12" v-bind:alt="lexical_unit.opinion">
- {{ lexical_unit.opinion }}
+ <tr>
+ <th scope="row" class="py-0 px-1 text-secondary role-header">Selectional preferences</th>
+ <td class="preferences py-0 px-0 border-top border-left border-secondary role-column"
+ v-for='argument in unified_frame_arguments'
+ :key='argument.id'
+ >
+ <ul class="ul-preference" v-if="argument.preferences.length > 0">
+ <li v-for='preference in argument.preferences'>
+ <div
+ v-if="preference.url != null"
+ class="preference py-2 px-1 preference-bold"
+ >
+ <a class="synset-plwn" v-bind:href="preference.url" target="_blank">{{ preference.str }}</a>
+ </div>
+ <div v-else class="preference py-2 px-1 preference-bold">{{ preference.str }}</div>
+ </li>
+ </ul>
+ <ul class="ul-preference">
+ <li v-for="preference in slowal_frames2selecional_preferencies_mapping[argument.id]">
+ <span v-if="preference.url != null" class="preference py-2 px-1">
+ <a class="synset-plwn" v-bind:href="preference.url" target="_blank">{{ preference.str }}</a>
+ </span>
+ <span v-else class="preference py-2 px-1">{{ preference.str }}</span>
+ <info-tooltip v-if="preference.info" :text="preference.info" />
+ </li>
+ </ul>
</td>
</tr>
</tbody>
</table>
+ </div>
+ <div v-if="unified_frame.id" class="lu-table mt-3 mb-3">
+ <table class="m-0 table-borderless border border-secondary text-dark">
+ <tbody>
+ <tr>
+ <th scope="row" class="py-2 px-1 text-secondary">Jednostka leksykalna</th>
+ <th scope="row" class="py-2 px-1 text-secondary">Opinion</th>
+ </tr>
+ <tr class="preferences py-0 px-0 border-top border-left border-secondary"
+ v-for='lexical_unit in lexical_units'
+ >
+ <td class="argument py-2 px-1 border-top border-left border-secondary">{{ lexical_unit.str }}</td>
+ <td class="argument py-2 px-1 border-top border-left border-secondary">
+ <img v-bind:src="img_prefix + 'entries/img/' +lexical_unit.opinion_key + '.svg'" width="12" height="12" v-bind:alt="lexical_unit.opinion">
+ {{ lexical_unit.opinion }}
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
</div>
+
<table v-if="!readOnly && unified_frame.id" class="table-button-menu" cellspacing="1">
<tr style="background-color: white;">
<td id="wrong-frame" style="padding: 10px 15px 10px 15px; color: #000000;">Błędna</td>
--
GitLab