Improve icons in annotation area

MaMpf-HD · Jan 19, 2024 · e4b6a2a · e4b6a2a
1 parent c44a74b
commit e4b6a2a
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 36 deletions.
diff --git a/app/assets/stylesheets/annotations.scss b/app/assets/stylesheets/annotations.scss
@@ -135,9 +135,13 @@
 #annotation-area-buttons {
   display: flex;
   justify-content: space-between;
-  padding: 17px 26px;
+  padding: 0.4em 4.2em;
 
   box-shadow: 0px -2px 10px -2px rgba(0, 0, 0, 0.05);
+
+  & i {
+    font-size: 1.1rem;
+  }
 }
 
 #annotation-color-picker {

diff --git a/app/views/annotations/_annotation_area.html.erb b/app/views/annotations/_annotation_area.html.erb
@@ -1,36 +1,40 @@
 <figcaption id="annotation-caption">
-  <div id="annotation-infobar">
-    <!--- ANNOTATION CATEGORY -->
-  </div>
-  <div id="annotation-comment">
-    <!--- ANNOTATION COMMENT -->
-  </div>
-  <!--- ANNOTATION AREA BUTTONS -->
-  <div id="annotation-area-buttons">
-    <i id="annotation-previous-button"
-       class="fa fa-arrow-left fa-lg clickable"
-       data-toggle="tooltip"
-       title="<%= t('admin.annotation.previous_annotation') %> (A)">
-    </i>
-    <i id="annotation-next-button"
-       class="fa fa-arrow-right fa-lg clickable"
-       data-toggle="tooltip"
-       title="<%= t('admin.annotation.next_annotation') %> (S)">
-    </i>
-    <i id="annotation-goto-button"
-       class="fa fa-map-marker fa-lg clickable"
-       data-toggle="tooltip"
-       title="<%= t('admin.annotation.annotation_position') %>">
-    </i>
-    <i id="annotation-edit-button"
-       class="fa fa-edit fa-lg clickable"
-       data-toggle="tooltip"
-       title="<%= t('admin.annotation.edit_annotation') %>">
-    </i>
-    <i id="annotation-close-button"
-       class="fa fa-window-close fa-lg clickable"
-       data-toggle="tooltip"
-       title="<%= t('admin.annotation.close_annotation_area') %>">
-    </i>
-  </div>
-</figcaption>
+   <div id="annotation-infobar">
+      <!--- ANNOTATION CATEGORY -->
+   </div>
+   <div id="annotation-comment">
+      <!--- ANNOTATION COMMENT -->
+   </div>
+   <!--- ANNOTATION AREA BUTTONS -->
+   <div id="annotation-area-buttons">
+      <a class="btn">
+         <i id="annotation-previous-button" class="fa fa-arrow-left" aria-hidden="true" data-toggle="tooltip"
+            title="<%= t('admin.annotation.previous_annotation') %> (A)">
+         </i>
+      </a>
+
+      <a class="btn">
+         <i id="annotation-next-button" class="fa fa-arrow-right" aria-hidden="true" data-toggle="tooltip"
+            title="<%= t('admin.annotation.next_annotation') %> (S)">
+         </i>
+      </a>
+
+      <a class="btn">
+         <i id="annotation-goto-button" class="fa fa-map-pin" aria-hidden="true" data-toggle="tooltip"
+            title="<%= t('admin.annotation.annotation_position') %>">
+         </i>
+      </a>
+
+      <a class="btn">
+         <i id="annotation-edit-button" class="fa fa-pen" aria-hidden="true" data-toggle="tooltip"
+            title="<%= t('admin.annotation.edit_annotation') %>">
+         </i>
+      </a>
+
+      <a class="btn">
+         <i id="annotation-close-button" class="fa fa-window-close" aria-hidden="true" data-toggle="tooltip"
+            title="<%= t('admin.annotation.close_annotation_area') %>">
+         </i>
+      </a>
+   </div>
+</figcaption>