fixed missing arrow-icons in Contao 5.1 (see #37)

numero2 · May 2, 2023 · 808c630 · 808c630
1 parent 12947a9
commit 808c630
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 33 deletions.
diff --git a/src/Resources/contao/widgets/OpenGraphProperties.php b/src/Resources/contao/widgets/OpenGraphProperties.php
@@ -3,13 +3,13 @@
 /**
  * Contao Open Source CMS
  *
- * Copyright (c) 2005-2022 Leo Feyer
+ * Copyright (c) 2005-2023 Leo Feyer
  *
  * @package   Opengraph3
  * @author    Benny Born <[email protected]>
  * @author    Michael Bösherz <[email protected]>
  * @license   LGPL
- * @copyright 2022 numero2 - Agentur für digitales Marketing GbR
+ * @copyright 2023 numero2 - Agentur für digitales Marketing GbR
  */
 
 
@@ -259,16 +259,16 @@ public function generate(): string {
 
             $html .= '<td class="operations">';
             $html .=    '<a rel="copy" href="#" class="widgetImage" title="'.$GLOBALS['TL_LANG']['opengraph_fields']['og_property']['operations']['copy'].'">
-                            <img src="system/themes/'.$theme.'/'.$path.'/copy.'.$iconExt.'" width="14" height="16" alt="'.$GLOBALS['TL_LANG']['opengraph_fields']['og_property']['operations']['copy'].'" class="tl_listwizard_img">
+                            <img src="system/themes/'.$theme.'/'.$path.'/copy.'.$iconExt.'" width="16" height="16" alt="'.$GLOBALS['TL_LANG']['opengraph_fields']['og_property']['operations']['copy'].'" class="tl_listwizard_img">
                         </a>';
             $html .=    '<a rel="up" href="#" class="widgetImage" title="'.$GLOBALS['TL_LANG']['opengraph_fields']['og_property']['operations']['up'].'">
-                            <img src="system/themes/'.$theme.'/'.$path.'/up.'.$iconExt.'" width="13" height="16" alt="'.$GLOBALS['TL_LANG']['opengraph_fields']['og_property']['operations']['up'].'" class="tl_listwizard_img">
+                            <img src="system/themes/'.$theme.'/'.$path.'/back.'.$iconExt.'" width="16" height="16" alt="'.$GLOBALS['TL_LANG']['opengraph_fields']['og_property']['operations']['up'].'" class="tl_listwizard_img">
                         </a>';
             $html .=    '<a rel="down" href="#" class="widgetImage" title="'.$GLOBALS['TL_LANG']['opengraph_fields']['og_property']['operations']['down'].'">
-                            <img src="system/themes/'.$theme.'/'.$path.'/down.'.$iconExt.'" width="13" height="16" alt="'.$GLOBALS['TL_LANG']['opengraph_fields']['og_property']['operations']['down'].'" class="tl_listwizard_img">
+                            <img src="system/themes/'.$theme.'/'.$path.'/back.'.$iconExt.'" width="16" height="16" alt="'.$GLOBALS['TL_LANG']['opengraph_fields']['og_property']['operations']['down'].'" class="tl_listwizard_img">
                         </a>';
             $html .=    '<a rel="delete" href="#" class="widgetImage" title="'.$GLOBALS['TL_LANG']['opengraph_fields']['og_property']['operations']['delete'].'">
-                            <img src="system/themes/'.$theme.'/'.$path.'/delete.'.$iconExt.'" width="14" height="16" alt="'.$GLOBALS['TL_LANG']['opengraph_fields']['og_property']['operations']['delete'].'" class="tl_listwizard_img">
+                            <img src="system/themes/'.$theme.'/'.$path.'/delete.'.$iconExt.'" width="16" height="16" alt="'.$GLOBALS['TL_LANG']['opengraph_fields']['og_property']['operations']['delete'].'" class="tl_listwizard_img">
                         </a>';
             $html .= '</td>';
             $html .= '</tr>';

diff --git a/src/Resources/public/backend.css b/src/Resources/public/backend.css
@@ -1,60 +1,64 @@
 .og_properties > table {
-    width: 100%;
+  width: 100%;
 }
 
 .og_properties > table tr {
-    height: 1.5rem;
+  height: 1.5rem;
 }
 
 .og_properties > table tr td {
-    vertical-align: top;
-    height: auto;
+  vertical-align: top;
+  height: auto;
 }
 
 .og_properties > table tr td.w50 {
-    width: 50%;
-    float: none;
-    position: relative;
+  width: 50%;
+  float: none;
+  position: relative;
 }
 
 .og_properties > table tr td.w50 > *:nth-child(1) {
-    width: calc(100% - 15px);
+  width: calc(100% - 15px);
 }
 
-.og_properties > table tr td.w50 > *:nth-child(1)textarea {
-    resize: vertical;
+.og_properties > table tr td.w50 > *:nth-childtextarea(1) {
+  resize: vertical;
 }
 
 .og_properties > table tr td.w50.wizard > *:nth-child(1) {
-    width: calc(100% - 42px);
+  width: calc(100% - 42px);
 }
 
 .og_properties > table tr td.w50 h3 {
-    display: none;
+  display: none;
 }
 
 .og_properties > table tr td.w50 + .w50 {
-    padding-left: 15px;
-    width: calc(50% - 70px);
+  padding-left: 15px;
+  width: calc(50% - 70px);
 }
 
 .og_properties > table tr td.operations {
-    width: 70px;
-    text-align: right;
+  width: 80px;
+  text-align: right;
+  vertical-align: middle;
 }
 
-.og_properties > table tr td.operations a img[src$=".svg"] {
-    padding-top: 9px;
+.og_properties > table tr td.operations a[rel="up"] img {
+  transform: rotate(90deg);
 }
 
-.og_properties > table tr:nth-child(1) td.operations a[rel="up"],
-.og_properties > table tr:nth-last-child(1) td.operations a[rel="down"] {
-    cursor: default;
-    pointer-events: none;
+.og_properties > table tr td.operations a[rel="down"] img {
+  transform: rotate(-90deg);
+}
+
+.og_properties > table tr:nth-child(1) td.operations a[rel="up"], .og_properties > table tr:nth-last-child(1) td.operations a[rel="down"] {
+  cursor: default;
+  pointer-events: none;
 }
 
 .og_properties > table tr:nth-child(1):nth-last-child(1) td.operations a[rel="delete"] {
-    cursor: default;
-    pointer-events: none;
-    opacity: 0.5;
+  cursor: default;
+  pointer-events: none;
+  opacity: 0.5;
 }
diff --git a/src/Resources/public/backend.scss b/src/Resources/public/backend.scss
@@ -33,10 +33,13 @@
             }
 
             &.operations {
-                width: 70px;
+
+                width: 80px;
                 text-align: right;
+                vertical-align: middle;
 
-                a img[src$=".svg"]{ padding-top: 9px; }
+                a[rel="up"] img { transform: rotate(90deg); }
+                a[rel="down"] img { transform: rotate(-90deg); }
             }
         }