From 4463462d710d7eee25a7491c8168e5ba601a4273 Mon Sep 17 00:00:00 2001
From: dcz <dcz@ipipan.waw.pl>
Date: Fri, 15 Jul 2022 11:56:23 +0200
Subject: [PATCH] Simplify slowal frame layout (remove table tag).

---
 entries/static/entries/css/entries.css        |   1 -
 .../entries/js/components/LexicalUnitEdit.js  | 125 ++++++++----------
 2 files changed, 55 insertions(+), 71 deletions(-)

diff --git a/entries/static/entries/css/entries.css b/entries/static/entries/css/entries.css
index 333dc71..3142fbf 100644
--- a/entries/static/entries/css/entries.css
+++ b/entries/static/entries/css/entries.css
@@ -182,7 +182,6 @@ legend {
     border-style: dashed;
     border-width: 2px;
     border-color: #564c4c;
-    padding: 3px;
 }
 
 .sticky-bottom {
diff --git a/entries/static/entries/js/components/LexicalUnitEdit.js b/entries/static/entries/js/components/LexicalUnitEdit.js
index 34f6b2d..9558ba9 100644
--- a/entries/static/entries/js/components/LexicalUnitEdit.js
+++ b/entries/static/entries/js/components/LexicalUnitEdit.js
@@ -1056,80 +1056,65 @@ Object.assign(LexicalUnitEdit, {
         </table>
         <div id="semantics-frames">
           <template v-for="frame in frames">
-              <div v-if="!hidden_frames.includes(frame)">
-                <table class="table m-0 table-borderless border border-secondary text-dark"
-                   v-if="(!isFrameVerified(frame) || showVerifiedFrames) && isFrameVisible(frame.status)"
-                  >
-                    <tbody>
-                    <tr>
-                      <td>
-                        <div v-if="!readOnly && !isReadOnlyForSuperLeksykograf()" class="row">
-                          <div class="col" style="
-                              display: flex;
-                              justify-content: flex-end;"
-                          >
-                             <div class="close" style="
-                                width: 15px;
-                                cursor: pointer;
-                                text-align: end;"
-                                @click="hideFrame(frame)"
-                                title="Ukryj ramÄ™"
-                            >&times;</div>
-                          </div>
-                          <div class="col" style="max-width: 40px;"></div>
+              <div class="row pt-3" style="flex-wrap: nowrap;" v-if="!hidden_frames.includes(frame) && (!isFrameVerified(frame) || showVerifiedFrames) && isFrameVisible(frame.status)">
+                  <div class="col pl-5 pr-4">
+                      <div class="row">
+                        <div class="col frame px-0" id="lexical-unit">
+                            <meaning-component
+                                :key="frame.lexical_units"
+                                :lexicalUnits="frame.lexical_units"
+                                :selectedExamples="selectedExamples"
+                                @meaning-lu-selected="meaningLuSelected"
+                            ></meaning-component>
+                        </div>
+                        <div v-if="!readOnly && !isReadOnlyForSuperLeksykograf()" class="col px-0" style="
+                              max-width: 15px;">
+                           <div class="close" style="
+                              width: 15px;
+                              cursor: pointer;
+                              text-align: end;"
+                              @click="hideFrame(frame)"
+                              title="Ukryj ramÄ™"
+                          >&times;</div>
                         </div>
-                      <div class="row" style="flex-wrap: nowrap;">
-                        <div
-                          class="col"
-                          @mouseenter="frame.hover=true"
-                          @mouseleave="frame.hover=false"
-                          @click="slowalFrameSelected(frame)"
-                          :class="frame === active_slowal_frame ? 'active-frame' : frame.hover ? 'bg-highlight' : ''" 
-                        >
-                        <div class="frame mb-3 active">
-                          <div class="frame mt-0" id="lexical-unit">
-                              <meaning-component
-                                  :key="frame.lexical_units"
-                                  :lexicalUnits="frame.lexical_units"
+                      </div>
+                      <div class="row">
+                        <div class="col px-0 frame mb-3 active"
+                            @mouseenter="frame.hover=true"
+                            @mouseleave="frame.hover=false"
+                            @click="slowalFrameSelected(frame)"
+                            :class="frame === active_slowal_frame ? 'active-frame' : frame.hover ? 'bg-highlight' : ''" >
+                              <slowal-frame-component 
+                                  :frame="frame" 
+                                  :key="frame"
                                   :selectedExamples="selectedExamples"
-                                  @meaning-lu-selected="meaningLuSelected"
-                              ></meaning-component>
-                          </div>
-                          <slowal-frame-component 
-                              :frame="frame" 
-                              :key="frame"
-                              :selectedExamples="selectedExamples"
-                              @frame-selection-changed="insideFrameSelectionChanged"
-                           />
+                                  @frame-selection-changed="insideFrameSelectionChanged"
+                               />
+                        </div>
+                      </div>
+                  </div>
+                  <div v-if="!readOnly && !isReadOnlyForSuperLeksykograf()" class="col pl-0 pt-4" style="max-width: 60px;">
+                    <div class="row"></div>
+                    <div class="row">
+                        <div class="col">
+                       <button v-if="!isFrameVerified(frame)"
+                        class="btn btn-sm btn-dark px-2 py-0" role="button" 
+                        style="font-size: 20px; min-width: 35px"
+                        @click="change_slowal2unified_frame_argument_mapping(frame)"
+                        title="Zamień wybrane argumenty ramy"
+                        >Z</button>
                         </div>
-                         </div>
-                         <div v-if="!readOnly && !isReadOnlyForSuperLeksykograf()" class="col pl-0 pt-4" style="max-width: 60px;">
-                            <div class="row">
-                                <div class="col">
-                               <button v-if="!isFrameVerified(frame)"
-                                class="btn btn-sm btn-dark px-2 py-0" role="button" 
-                                style="font-size: 20px; min-width: 35px"
-                                @click="change_slowal2unified_frame_argument_mapping(frame)"
-                                title="Zamień wybrane argumenty ramy"
-                                >Z</button>
-                                </div>
-                            </div>
-                            <div class="row">
-                              <div v-if="isFrameVerified(frame)" class="col pt-2" style="display: flex;">
-                                  <input
-                                    type="checkbox"
-                                    :checked="isFrameVerified(frame)"
-                                    class="custom-control custom-checkbox ok-checkbox"
-                                  >
-                              </div>
-                            </div>
-                          </div>
-                     
                     </div>
-                  </td>
-                </tr>
-                </tbody>
-              </table>
+                    <div class="row">
+                      <div v-if="isFrameVerified(frame)" class="col pl-1" style="display: flex;">
+                          <input
+                            type="checkbox"
+                            :checked="isFrameVerified(frame)"
+                            class="custom-control custom-checkbox ok-checkbox"
+                          >
+                      </div>
+                    </div>
+                  </div>
               </div>
           </template>
         </div>
-- 
GitLab