Merge pull request #337 from RRZE-Webteam/dev

v1.28.5
RRZE-Webteam · Jul 24, 2024 · fce5640 · fce5640
2 parents 0d9d872 + 422303c
commit fce5640
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 38 deletions.
diff --git a/assets/css/_timeline.scss b/assets/css/_timeline.scss
@@ -6,7 +6,9 @@
     max-width: 100%;
     overflow-x: hidden;
     position: relative;
-    padding-top: 32px;
+    padding-top: 30px;
+    //margin-top: 1em;
+    margin-bottom: 1em;
     @media screen and (min-width: 45em) {
         max-width: 800px;
         //height: 350px;
@@ -17,10 +19,13 @@
     .dotted-line {
         border-bottom: 3px dotted #888;
         position: relative;
-        top: -16px;
+        top: 34px;
+        @media screen and (min-width: 45em) {
+            top: 44px;
+        }
     }
 
-    * {
+    ul, li {
         margin: 0;
         padding: 0;
     }
@@ -39,10 +44,9 @@
         line-height: 1.5;
     }
 
-    .dates {
+    ul.dates {
         @media screen and (min-width: 45em) {
-            height: 60px;
-            overflow: hidden;
+            //height: 60px;
         }
         li {
             width: 70px;
@@ -71,6 +75,7 @@
         }
 
         a {
+            display: block;
             font-size: 1.2rem;
             padding-bottom: 10px;
             text-decoration: none;
@@ -93,8 +98,10 @@
 
             &.selected {
                 font-size: 1.5rem;
+                position: relative;
                 @media screen and (min-width: 45em) {
                     font-size: 2rem;
+                    top: -5px;
                 }
             }
         }
@@ -108,7 +115,8 @@
         @media screen and (min-width: 45em) {
             //width: 800px;
             //height: 350px;
-            overflow: hidden;
+            //overflow: hidden;
+            padding-top: 20px;
         }
         li {
             list-style: none;
@@ -207,42 +215,54 @@
 
     .grad_left,
     .grad_right {
-        height: 50px;
-        width: 50px;
-        position: absolute;
-        top: 32px;
+        display: none;
         @media screen and (min-width: 45em) {
+            position: absolute;
+            top: 0;
+            display: block;
             height: 100%;
-            width: 100px;
+            width: 80px;
         }
     }
     .grad_left {
-        left: 0;
-        background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
-        background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
-        background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
-        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );
+        @media screen and (min-width: 45em) {
+            left: 0;
+            background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+            background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+            background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1);
+        }
     }
     .grad_right {
-        right: 0;
-        background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
-        background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
-        background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
-        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
+        @media screen and (min-width: 45em) {
+            right: 0;
+            background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
+            background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
+            background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
+            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1);
+        }
     }
 
+    .nav-prev-wrapper {
+        width: 50%;
+        float: left;
+        text-align: left;
+    }
+    .nav-next-wrapper {
+        width: 50%;
+        float: right;
+        text-align: right;
+    }
     .next,
     .prev {
-        opacity: 0;
+        opacity: .9;
         display: block;
-        position: absolute;
-        top: 43%;
-        font-size: 70px;
-        width: 27px;
-        height: 44px;
         vertical-align: top;
+        font-size: 32px;
         @media screen and (min-width: 45em) {
-            opacity: .9;
+            font-size: 50px;
+            position: absolute;
+            top: 43%;
         }
         &.disabled {
             opacity: 0.2;
@@ -258,6 +278,9 @@
                 background-color: transparent;
             }
         }
+        span {
+            font-size: 1rem;
+        }
     }
     .next {
         right: 0;
@@ -373,6 +396,7 @@
         font-size: 20px;
         position: relative;
         top: -32px;
+        z-index: 1;
         .toggle-autoplay {
             display: inline-block;
             margin: 0 .5em 0 0;
@@ -422,5 +446,8 @@
                 text-decoration: none;
             }
         }
+        ul.dates li a.selected {
+            top: -5px;
+        }
     }
 }
diff --git a/assets/css/rrze-elements.css b/assets/css/rrze-elements.css
diff --git a/assets/css/rrze-elements.css.map b/assets/css/rrze-elements.css.map
diff --git a/includes/TimeLine/TimeLine.php b/includes/TimeLine/TimeLine.php
@@ -78,8 +78,8 @@ public function shortcodeTimeline($atts, $content = '')
         if ($orientation == 'horizontal') {
             $output .= "<div class=\"grad_left\"></div>" .
                     "<div class=\"grad_right\"></div>";
-            $output .= "<div><a href=\"#\" class=\"prev\">". (new Icon($this->pluginFile))->shortcodeIcon(['icon' => 'angle-left']) . "<span class=\"sr-only\">Previous</span></a></div>"
-                    . "<div><a href=\"#\" class=\"next\">". (new Icon($this->pluginFile))->shortcodeIcon(['icon' => 'angle-right']) . "<span class=\"sr-only\">Next</span></a></div>";
+            $output .= "<div class='nav-prev-wrapper'><a href=\"#\" class=\"prev\">". (new Icon($this->pluginFile))->shortcodeIcon(['icon' => 'angle-left']) . "<span class=\"sr-only\">Previous</span></a></div>"
+                    . "<div class='nav-next-wrapper'><a href=\"#\" class=\"next\">". (new Icon($this->pluginFile))->shortcodeIcon(['icon' => 'angle-right']) . "<span class=\"sr-only\">Next</span></a></div>";
         } else {
             $output .= "<div class=\"grad_top\"></div>" .
                     "<div class=\"grad_bottom\"></div>";

diff --git a/includes/TimeLine/assets/js/rrze-timelinr.js b/includes/TimeLine/assets/js/rrze-timelinr.js
@@ -364,6 +364,7 @@ function updateSize() {
     if (settings.orientation == 'vertical') {
         jQuery(settings.containerDiv).css('height',(+minHeight + +50)+'px');
     } else {
-        jQuery(settings.containerDiv).css('height',(+minHeight + +120 + jQuery(settings.datesDiv).find('li').height())+'px');
+        jQuery(settings.containerDiv).css('height',(+minHeight + +150 + jQuery(settings.datesDiv).find('li').height())+'px');
+        jQuery(settings.issuesDiv).css('height',(+minHeight + +10 + jQuery(settings.datesDiv).find('li').height())+'px');
     }
 }
diff --git a/includes/TimeLine/assets/js/rrze-timelinr.min.js b/includes/TimeLine/assets/js/rrze-timelinr.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rrze-elements",
-  "version": "1.28.4",
+  "version": "1.28.5",
   "description": "RRZE Elements: Gestalterische Erweiterungen für Webauftritte.",
   "main": "rrze-elements.php",
   "textdomain": "rrze-elements",

diff --git a/rrze-elements.php b/rrze-elements.php
@@ -4,7 +4,7 @@
 Plugin Name:     RRZE Elements
 Plugin URI:      https://github.com/RRZE-Webteam/rrze-elements
 Description:     Advanced design elements for WordPress websites.
-Version:         1.28.4
+Version:         1.28.5
 Author:          RRZE Webteam
 Author URI:      https://blogs.fau.de/webworking/
 License:         GNU General Public License v2
@@ -23,7 +23,7 @@
 
 const RRZE_PHP_VERSION = '7.4';
 const RRZE_WP_VERSION = '5.9';
-const RRZE_ELEMENTS_VERSION = '1.28.4';
+const RRZE_ELEMENTS_VERSION = '1.28.5';
 
 spl_autoload_register(function ($class) {
     $prefix = __NAMESPACE__;